/* ---------------------------------------------------------------------------
 * theme-hero — Home variant (Figma 560:598). Moved out of home.css so the
 * block carries its own stylesheet (see inc/block-assets.php).
 *
 * Only the `.home-hero` variant lives here. The same block renders
 * `.page-hero--{slug}` on the interior pages via `theme_hero_select_page`;
 * that variant is still styled in interior.css.
 * ------------------------------------------------------------------------- */

.home-hero {
  display: flex;
  /* Full-viewport hero with the copy vertically centered (client round 6);
     svh keeps phones honest about their browser chrome. */
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  /* The fixed header overlays the hero, so without this the copy centers on the
     full viewport and reads as hugging the menu — the centering space must be
     what is left BELOW the chrome. */
  padding-top: var(--header-h, 174px);
  /* Figma fills: a 75%-opacity grey→black gradient over a flat 20% black wash. */
  --overlay-layers:
    linear-gradient(180deg, rgba(102, 102, 102, 0.015) 0%, rgba(0, 0, 0, 0.75) 100%),
    rgba(var(--black-rgb, 0, 0, 0), 0.2);
}

.home-hero-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 27px;
  max-width: calc(1500px + var(--gutter) * 2);
  padding-block: 40px;
}

.home-hero h1 {
  max-width: 1500px;
  margin: 0;
  /* 48px floor: the 40px minimum read too close to the 18px lead on phones
     (client round 7). */
  font-size: clamp(48px, 5.21vw, 100px);
  line-height: 1.11;
  color: var(--white, #ffffff);
}

.home-hero h1 .accent {
  color: var(--brand, #008AF7);
}

/* The design breaks after the first sentence; below tablet the heading is small
   enough that natural wrapping reads better. */
@media (max-width: 991px) {
  .home-hero h1 .break {
    display: none;
  }
}

.home-hero .lead {
  max-width: 1079px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--white, #ffffff);
}

.home-hero .buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin-top: 1px;
}

/* Client spec: the hero pair splits on hover — first (Explore) hollows out
   via the global .default rule; the second (Request An Estimate) goes white
   with brand text. Both share .default in markup, so position scopes it. */
.home-hero .buttons .btn-layout:last-child:hover,
.home-hero .buttons .btn-layout:last-child:focus-visible {
  background: var(--white, #ffffff);
  border-color: var(--white, #ffffff);
  color: var(--brand, #008AF7);
}

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

@media (max-width: 991px) {
  .home-hero {
    /* The header floats over the hero, so the copy has to clear it once the
       heading is tall enough to fill the frame — plus 16px of breathing room
       so the title never kisses the logo. */
    padding-top: calc(var(--header-h, 104px) + 16px);
  }
}

/* Was authored in home.css as `.home-hero .buttons, .home-cta .buttons` — one
   rule for two blocks. Split per block so each stylesheet stands alone; the
   declarations are identical to the original. */
@media (max-width: 767px) {
  .home-hero .buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 16px;
  }
}

/* --- Editor mirrors ------------------------------------------------------ *
 * The @media blocks above repeated as container queries, so the block reflows
 * against the width it is actually given instead of the browser window's.
 * Inert on the front end: nothing there declares a `crush-block` container, so
 * these queries evaluate to unknown and never match. The container is created
 * in assets/css/editor.css, on ACF's preview pane.
 * Keep each mirror in sync with the @media rule it copies.
 * ------------------------------------------------------------------------- */

@container crush-block (max-width: 991px) {
  .home-hero h1 .break {
    display: none;
  }

  .home-hero {
    padding-top: calc(var(--header-h, 104px) + 16px);
  }
}

@container crush-block (max-width: 767px) {
  .home-hero .buttons {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 16px;
  }
}

/* ---------------------------------------------------------------------------
 * Responsive hero backdrop (QC audit 2026-09-08).
 *
 * theme-hero.php emits the full-size original inline as `background-image`
 * plus --hero-bg-lg/-md/-sm. That inline declaration is the safety net: it
 * renders the hero correctly on its own, so nothing here is load-bearing.
 * These two gears swap in the narrower derivative below the widths where the
 * original is simply wasted bytes — /contact/ was pulling a 340KB webp into a
 * 412x240 band, and 92% of its 9.2s mobile LCP was resource-load duration.
 *
 * `!important` is deliberate and is the reason this works: an inline style
 * beats any stylesheet selector, so a plain rule here would never apply. It is
 * scoped to this one property on the hero, and each var() falls back up the
 * chain so a field with no attachment ID keeps the original.
 * ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .home-hero,
  .page-hero {
    background-image: var(--hero-bg-md, var(--hero-bg-lg)) !important;
  }
}

@media (max-width: 768px) {
  .home-hero,
  .page-hero {
    background-image: var(--hero-bg-sm, var(--hero-bg-md, var(--hero-bg-lg))) !important;
  }
}