/* ============================================================
   GHP Hero — shared hero layer.
   1) Azure theme tokens — the third sanctioned hero theme beside
      sky and navy. Flat field, hue-locked to logo #0099FF (hue 204°).
      Field #0078C8 carries white body text at 4.65:1 (AA).
      Zero gradients: depth comes from the stripes, not color stops.
   2) One mobile (≤860px) geometry for the shared hero furniture.
   Loaded LAST in each page's helmet so it wins ties.
   Desktop geometry (>860px) is untouched by design.
   ============================================================ */
:root {
  --azure-800: #005FA3; /* stripe — deeper than the field */
  --azure-600: #0078C8; /* the flat hero field */
  --azure-500: #0099FF; /* stripe — raw logo azure, kept literal */
  --azure-200: #7ACCFF; /* stripe — light tint */
}
@media (max-width: 860px) {

  /* ---- 1 · Stripe motif: a cropped top-right corner accent.
     Exactly two stripes on canvas (~150px ≈ 38vw at 390px);
     the third stripe sits fully off-canvas. Colors stay per-page. */
  section:has([data-r="tri-band"]), header:has([data-r="tri-band"]) { overflow: hidden; }
  [data-r="tri-band"] { width: 300px !important; height: 300px !important; top: -90px !important; right: -150px !important; gap: 18px !important; }
  section:has([data-r="tri-band-close"]) { overflow: hidden; }
  [data-r="tri-band-close"] { width: 300px !important; height: 300px !important; left: -150px !important; gap: 18px !important; }

  /* ---- 2 · Hero ZIP module: one card treatment everywhere.
     Rounded-rect card, 48px input, full-width 52px CTA. */
  [data-r="cta-zip"] > * { width: 100%; max-width: none !important; }
  [data-r="cta-zip"] form { flex-wrap: wrap !important; border-radius: var(--radius-lg) !important; padding: 8px !important; width: 100%; box-sizing: border-box; max-width: none !important; }
  [data-r="cta-zip"] form input { height: 48px !important; font-size: 16px !important; }
  [data-r="cta-zip"] form > button { flex: 1 0 100% !important; min-height: 52px !important; }

  /* ---- 3 · Guide-hero state map: one illustration stage.
     236px-tall stage, 82vw max; tall states bind on height, wide
     states on width, drawing centered. 34px headroom reserves room
     for edge-located pins (pins overflow the viewBox by design). */
  [data-map-stage] { height: auto !important; width: 100% !important; max-width: none !important; justify-self: center !important; transform: none !important; margin: 16px 0 0 !important; order: 1; }
  [data-map-stage] > div:last-child { height: 236px !important; width: auto !important; max-width: 82vw !important; margin: 34px auto 0 !important; }

  /* ---- 3b · Hero dek: ONE size on phones for every hero sub-text (matches ESTM) — pages own no dek size rules. */
  [data-screen-label="Hero"] [data-r="hero-dek"] { font-size: var(--text-lg) !important; line-height: 1.55 !important; }

  /* ---- 4 · Hero rhythm: ONE vertical spacing for every hero on phones —
     36px above the first line (breadcrumb or H1), 44px below the last
     (rating, dek or map). The hero container is [data-r="hero-inner"]
     (or the [data-r="m-stack"] grid when it IS the container); the
     section itself carries no padding. Pages own no hero padding rules. */
  [data-screen-label="Hero"]:has(> [data-r="hero-inner"]), [data-screen-label="Hero"]:has(> [data-r="m-stack"]), [data-screen-label="Contact header"]:has(> [data-r="hero-inner"]) { padding-top: 0 !important; padding-bottom: 0 !important; }
  [data-screen-label="Hero"] > [data-r="hero-inner"], [data-screen-label="Hero"] > [data-r="m-stack"], [data-screen-label="Contact header"] > [data-r="hero-inner"] { padding-top: 36px !important; padding-bottom: 44px !important; }
}