/* ---------------------------------------------------------------------------
 * theme-intro — Home variant (Figma 560:606). Moved out of home.css so the
 * block carries its own stylesheet (see inc/block-assets.php).
 *
 * Only the `.home-intro` variant lives here. The same block also renders
 * `.intro-figures` on the interior pages; that variant is still styled in
 * interior.css.
 * ------------------------------------------------------------------------- */

.home-intro {
  padding-block: 104px;
  background: var(--bg, #ffffff);
}

.home-intro-inner {
  display: flex;
  align-items: center;
  gap: 31px;
}

.home-intro .mark {
  flex: none;
  width: 276px;
  height: auto;
}

.home-intro p {
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--black, #000000);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 991px) {
  .home-intro-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .home-intro .mark {
    width: 180px;
  }
}

@media (max-width: 767px) {
  .home-intro {
    padding-block: 48px;
  }
}

/* --- Editor mirrors ------------------------------------------------------ *
 * See blocks/theme/hero/theme-hero.css for why these exist. Inert on the front
 * end; the `crush-block` container is declared only in assets/css/editor.css.
 * ------------------------------------------------------------------------- */

@container crush-block (max-width: 991px) {
  .home-intro-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }

  .home-intro .mark {
    width: 180px;
  }
}

@container crush-block (max-width: 767px) {
  .home-intro {
    padding-block: 48px;
  }
}