/* hero-reserve.css — CLS fix for the homepage hero
   --------------------------------------------------
   Measured 2026-05-25 (WEB.GLASS):
     desktop 1920x1080 -> hero offsetHeight = 1080px
     mobile  iPhone 12 -> hero offsetHeight = 1347px

   The inline <style> in index.html sets:
     .hero                              { min-height: 100svh; }
     @media (max-width: 768px) .hero    { min-height: auto;   }

   `100svh` jitters during Lighthouse runs because the small-viewport unit
   shifts when the URL bar collapses, and the mobile breakpoint removes
   reservation entirely so the container grows from ~0 to 1347px as fonts,
   the bee aura, the swarm-canvas and the cosmic-bg lazily paint. That is
   the CLS=0.800 hole in the 2026-05-25 perf summary.

   We reserve the measured final height up front so deferred-load content
   cannot push siblings down. We use the more-specific selector
   `section.hero#main-content` (0,1,1,1) so we beat the inline `.hero` rules.
   We MUST use `!important` because mobile-optimizations.css ships
   `@media (max-width: 768px) .hero { min-height: auto !important }` at
   the same breakpoint we need to override. `!important` here is the
   minimum diff that wins the cascade against that pre-existing `!important`
   — see CDP getMatchedStylesForNode dump in the 2026-05-25 runbook for
   the receipt.

   Owner: WEB.GLASS  ·  Scope: index.html hero only.
*/

section.hero#main-content {
  /* Desktop / large screens — reserve exactly the slot the hero CONTENT
     actually paints into (re-measured 2026-06-01 @1920x1080: natural
     content height = 788px). The old 1080px value over-reserved ~290px,
     centering the content in a tall box and leaving visible dead bands
     above the title and below the CTA. Reserving the real 788px keeps
     CLS protection (deferred-load content still can't push siblings)
     while pulling everything up to sit near the top. Value = hero
     top-padding 120 + flow content 536 + bottom-padding 48 = 704px. */
  min-height: 704px !important;
}

/* Tablet / small desktop — keep the desktop reservation; the layout
   only goes single-column at <=1024px, but the height stays similar. */
@media (max-width: 1024px) {
  section.hero#main-content {
    min-height: 704px !important;
  }
}

/* Mobile — this is where CLS was bleeding. Reserve the measured 1347px
   final height so deferred-load (cosmic-bg via IntersectionObserver,
   hero-bee-aura, fonts, swarm-canvas) cannot push siblings.
   `!important` required to beat mobile-optimizations.css. */
@media (max-width: 768px) {
  section.hero#main-content {
    min-height: 1347px !important;
  }
}

/* Very small phones (<=375px) — content stack is the same; reservation
   stays the same. We do not over-reserve because that would push the
   Agent Console ticker further off-screen and hurt LCP-readiness. */
@media (max-width: 375px) {
  section.hero#main-content {
    min-height: 1347px !important;
  }
}

/* prefers-reduced-motion — no change needed (this is layout, not motion),
   but we include the empty block so future edits don't strip the file's
   reduced-motion awareness check. */
@media (prefers-reduced-motion: reduce) {
  /* intentionally empty — reservation applies regardless of motion pref */
}