/* ────────────────────────────────────────────────────────────────
   v36.107 — Hero unification template
   Funding's hero geometry applied to Hub, Verdict, Partner.
   Goal: identical structure, image fit, and text positioning
   across all 4 portals × desktop/iPad/mobile.
   ──────────────────────────────────────────────────────────── */

/* ============================================================
   1. SHARED HERO BASE — every portal hero uses this geometry
   ============================================================ */

body.hub-page .hub-hero,
body.verdict-page #verdict-intro .v37g-hero,
body.partner-page #hero,
body.funding-page #hero {
  position: relative !important;
  isolation: isolate !important;
  /* v36.107.4 — unified hero height 984px (previously 847). Matches Hub's
     organic content-driven height so all four portals share exact geometry. */
  min-height: 984px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  border-bottom: 1px solid #1a1d21 !important;
  padding-bottom: 0 !important;
  justify-content: flex-start !important;
}

/* ─── Background art layer (::before) ─── */
body.hub-page .hub-hero::before,
body.verdict-page #verdict-intro .v37g-hero::before,
body.partner-page #hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background-position: center right !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  z-index: 0 !important;
  opacity: 0.85 !important;
  display: block !important;
}

body.hub-page    .hub-hero::before                      { background-image: url("assets/hero/hub_sd_fullbleed.png") !important; }
body.verdict-page #verdict-intro .v37g-hero::before     { background-image: url("assets/hero/verdict_matrix_landscape.png") !important; }
body.partner-page #hero::before                         { background-image: url("assets/hero/partner_dawn.png") !important; }

/* ─── Dark left-side gradient for H1 legibility (::after) ─── */
body.verdict-page #verdict-intro .v37g-hero::after,
body.partner-page #hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg,
      rgba(10,12,14,0.94) 0%,
      rgba(10,12,14,0.80) 28%,
      rgba(10,12,14,0.45) 58%,
      rgba(10,12,14,0.25) 100%),
    linear-gradient(180deg,
      rgba(10,12,14,0.40) 0%,
      rgba(10,12,14,0) 30%,
      rgba(10,12,14,0) 70%,
      rgba(10,12,14,0.75) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Hub uses LIGHT gradient because background is cream/dawn, not dark */
body.hub-page .hub-hero::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(90deg,
      rgba(244,238,225,0.92) 0%,
      rgba(244,238,225,0.75) 28%,
      rgba(244,238,225,0.30) 58%,
      rgba(244,238,225,0.00) 100%),
    linear-gradient(180deg,
      rgba(244,238,225,0.20) 0%,
      rgba(244,238,225,0) 30%,
      rgba(244,238,225,0) 70%,
      rgba(244,238,225,0.40) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Force background colors that match the art */
body.hub-page .hub-hero        { background: #f4eee1 !important; }
body.verdict-page #verdict-intro .v37g-hero { background: #0a0c0e !important; color: #f4f6f8 !important; }
body.partner-page #hero        { background: #0a0c0e !important; color: #f4f6f8 !important; }

/* Push all real content above background layers */
body.hub-page .hub-hero > *,
body.verdict-page #verdict-intro .v37g-hero > *,
body.partner-page #hero > * {
  position: relative !important;
  z-index: 2 !important;
}

/* ============================================================
   2. KILL competing background/foreground decoration
   ============================================================ */

/* Verdict — hide all the tron/grid/holo decorations.
   The card is already baked into verdict_hero_tron.jpg so we
   don't need any of the JS-driven layers on top. */
body.verdict-page #verdict-intro .v37g-backdrop,
body.verdict-page #verdict-intro .v37g-grid-wave,
body.verdict-page #verdict-intro .v37g-vignette {
  display: none !important;
}

/* Verdict — the inner .v37g-content needs to be the flex item.
   Original CSS uses justify-content: center; we override to flex-start
   so H1 hugs the left like Funding. */
body.verdict-page #verdict-intro .v37g-hero {
  justify-content: flex-start !important;
}
body.verdict-page #verdict-intro .v37g-content {
  text-align: left !important;
  align-items: flex-start !important;
}

/* Hub — kill any radial/grid noise */
body.hub-page .hub-hero .grid-bg,
body.hub-page .hub-hero .radial-pulse {
  display: none !important;
}

/* Partner — same */
body.partner-page #hero .grid-bg,
body.partner-page #hero .radial-pulse {
  display: none !important;
}

/* ============================================================
   3. SHARED CONTENT CONTAINER (matches Funding spacing)
   Funding H1 measured at left=72px, top≈292px on 1440x900.
   Match exactly across Hub, Verdict, Partner.
   ============================================================ */

body.hub-page .hub-hero .hub-hero__inner,
body.verdict-page #verdict-intro .v37g-content,
body.partner-page #hero .relative.mx-auto.max-w-7xl,
body.funding-page #hero .relative.mx-auto.max-w-7xl {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 72px !important;
  padding-right: 0 !important;
  padding-top: 80px !important;
  padding-bottom: 56px !important;
  width: 100% !important;
}

/* HUB — the deeper text wrappers (.v79-card, .v79-card__content,
   .v79-card__top) override the inner padding. Force them flush-left
   with no auto margins and no centered flex. */
body.hub-page .hub-hero .v79-card,
body.hub-page .hub-hero .v79-card > .v79-card__content,
body.hub-page .hub-hero .v79-card__content,
body.hub-page .hub-hero .v79-card__top {
  max-width: 100% !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-align: left !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}

/* VERDICT — nudge content up to match Funding/Hub/Partner ~292-318px H1 top.
   Original has padding-bottom: 9vh + align-items: center which pushes
   shorter H1 lower. Kill the bottom padding to let content center higher. */
body.verdict-page #verdict-intro .v37g-hero {
  padding-bottom: 0 !important;
}
body.verdict-page #verdict-intro .v37g-content {
  align-items: flex-start !important;
  text-align: left !important;
  padding: 80px 0 56px 72px !important;
  margin: 0 !important;
}

/* ============================================================
   4. H1 — unified scale + positioning
   ============================================================ */

body.hub-page .hub-hero h1,
body.verdict-page #verdict-intro .v37g-h1,
body.partner-page #hero h1 {
  font-family: "Space Grotesk", Inter, sans-serif !important;
  font-weight: 700 !important;
  line-height: 0.95 !important;
  letter-spacing: -0.02em !important;
  font-size: clamp(2.25rem, 6vw, 6rem) !important;
  max-width: 64ch !important;
  margin-left: 0 !important;
  margin-top: 0 !important;
}

/* Dark heroes get pure white H1 with shadow */
body.verdict-page #verdict-intro .v37g-h1,
body.partner-page #hero h1 {
  color: #ffffff !important;
  text-shadow: 0 2px 24px rgba(0,0,0,0.45) !important;
}

/* Hub stays black on cream — but tighten alignment */
body.hub-page .hub-hero h1 {
  color: #0a0c0e !important;
  text-shadow: none !important;
}

/* ============================================================
   5. LEDE — same width and spacing across portals
   ============================================================ */

body.hub-page .hub-hero p,
body.verdict-page #verdict-intro .v37g-lede,
body.partner-page #hero p.lede,
body.partner-page #hero p[class*="text-ink"] {
  max-width: 56ch !important;
  margin-top: 1.5rem !important;
  margin-left: 0 !important;
  font-size: clamp(1rem, 1.2vw, 1.25rem) !important;
  line-height: 1.55 !important;
}

body.verdict-page #verdict-intro .v37g-lede,
body.partner-page #hero p.lede {
  color: #e4e7eb !important;
}

body.hub-page .hub-hero p {
  color: #1a1d21 !important;
}

/* ============================================================
   6. iPad / tablet — 768px to 1023px
   User: 1.25 inch (~120px) top margin, text raised, no flex-center.
   ============================================================ */

@media (max-width: 1023px) {
  body.hub-page .hub-hero,
  body.verdict-page #verdict-intro .v37g-hero,
  body.partner-page #hero,
  body.funding-page #hero {
    min-height: 720px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }
  body.hub-page .hub-hero .hub-hero__inner,
  body.verdict-page #verdict-intro .v37g-content,
  body.partner-page #hero .relative.mx-auto.max-w-7xl,
  body.funding-page #hero .relative.mx-auto.max-w-7xl {
    padding-left: 56px !important;
    padding-top: 120px !important;
    padding-bottom: 48px !important;
  }
  /* Hub: zero deeper wrappers so 120px only applies once */
  body.hub-page .hub-hero .v79-card,
  body.hub-page .hub-hero .v79-card__content,
  body.hub-page .hub-hero .v79-card__top {
    padding: 0 !important;
    margin: 0 !important;
  }
  body.hub-page .hub-hero h1,
  body.verdict-page #verdict-intro .v37g-h1,
  body.partner-page #hero h1,
  body.funding-page #hero h1 {
    font-size: clamp(3.25rem, 7.5vw, 5.25rem) !important;
    line-height: 0.95 !important;
    letter-spacing: -0.02em !important;
    margin-top: 0 !important;
    max-width: 12ch !important;
  }
  /* iPad lede: cap width to match title column, slightly smaller */
  body.hub-page .hub-hero p,
  body.verdict-page #verdict-intro .v37g-lede,
  body.partner-page #hero p.lede,
  body.partner-page #hero p[class*="text-ink"],
  body.funding-page #hero p.lede,
  body.funding-page #hero p {
    max-width: 42ch !important;
    font-size: 0.95rem !important;
    line-height: 1.5 !important;
    margin-top: 1.25rem !important;
  }
  /* iPad: push hero art further right so subject is in the right half.
     Funding sprinter (::before in funding.html) + Verdict holo card.
     Hub orb already right-anchored. Partner sunrise already right-anchored.
     Use background-size 'contain'-style sizing so the subject shrinks
     into the right half rather than getting cropped. */
  /* Verdict + Funding: anchor art to BOTTOM-RIGHT quadrant (Q4), enlarge
     to ~90% so subject sits in lower-right and may bleed slightly past edge.
     Partner is the reference: full-bleed cinematic image; we don't touch it. */
  /* Subject anchored to BOTTOM-LEFT of Q4 (i.e., roughly center-bottom of
     the section, sitting in the lower portion of the right half but pulled
     LEFT toward the section midline). Position percentages position the
     same percent point of the image to the same percent point of the box,
     so '65% bottom' puts the image's 65%-from-left point at the section's
     65%-from-left point — sliding the subject leftward inside Q4. */
  body.funding-page #hero::before {
    background: url("assets/hero/funding_flash.png") 88% 118% / 130% auto no-repeat !important;
    opacity: 0.9 !important;
    -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 28%,
      rgba(0,0,0,0.45) 38%,
      rgba(0,0,0,0.88) 50%,
      rgba(0,0,0,1) 60%) !important;
    mask-image: linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 28%,
      rgba(0,0,0,0.45) 38%,
      rgba(0,0,0,0.88) 50%,
      rgba(0,0,0,1) 60%) !important;
  }
  /* Verdict: drop the card lower so 'underwriting is' clears it, AND mask
     the hard top edge of the image with a vertical fade so it dissolves into
     the black background instead of showing a rectangular cutoff. */
  body.verdict-page #verdict-intro .v37g-hero::before {
    background-position: 65% 115% !important;
    background-size: 130% auto !important;
    background-repeat: no-repeat !important;
    -webkit-mask-image: linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,0.4) 28%,
      rgba(0,0,0,0.85) 40%,
      rgba(0,0,0,1) 52%) !important;
    mask-image: linear-gradient(180deg,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,0) 18%,
      rgba(0,0,0,0.4) 28%,
      rgba(0,0,0,0.85) 40%,
      rgba(0,0,0,1) 52%) !important;
  }
  /* Hub: force same 720px ceiling as Partner. Hub's outer .hub-hero was
     stretching to 969px because of intrinsic content height. Cap it. */
  body.hub-page .hub-hero {
    min-height: 720px !important;
    max-height: 720px !important;
    height: 720px !important;
    overflow: hidden !important;
  }
  /* Funding iPad: top-left fade so text is legible even when art sits Q4.
     Diagonal so upper-left stays dark and bottom-right reveals the sprinter. */
  body.funding-page #hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg,
      rgba(10,12,14,0.94) 0%,
      rgba(10,12,14,0.72) 40%,
      rgba(10,12,14,0.25) 70%,
      rgba(10,12,14,0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  body.funding-page #hero > * { position: relative !important; z-index: 2 !important; }
}

/* ============================================================
   7. Mobile — under 768px
   ============================================================ */

/* ============================================================
   7. Mobile — under 768px
   Inherits all iPad art positioning (Verdict mask, Funding sprinter,
   Hub orb, Partner full-bleed). Only overrides padding + font sizing
   so text fits narrower viewport.
   ============================================================ */

@media (max-width: 767px) {
  /* Mobile: compress hero so hero + stats fit on a single viewport (~844px).
     Header ~100px + hero 484px + stats 260px = 844px. */
  body.hub-page .hub-hero,
  body.verdict-page #verdict-intro .v37g-hero,
  body.partner-page #hero,
  body.funding-page #hero {
    min-height: 484px !important;
    max-height: 484px !important;
    height: 484px !important;
    overflow: hidden !important;
  }
  body.hub-page .hub-hero .hub-hero__inner,
  body.verdict-page #verdict-intro .v37g-content,
  body.partner-page #hero .relative.mx-auto.max-w-7xl,
  body.funding-page #hero .relative.mx-auto.max-w-7xl {
    padding-left: 24px !important;
    padding-right: 24px !important;
    padding-top: 56px !important;
    padding-bottom: 20px !important;
  }
  /* Constrain hub-hero__inner to hero height so chrome-bg sizes correctly */
  body.hub-page .hub-hero .hub-hero__inner {
    min-height: 484px !important;
    max-height: 484px !important;
    height: 484px !important;
    overflow: hidden !important;
  }
  /* Hub orb: enlarged to fill entire compressed hero — no white space.
     Use cover so the orb image fills the 484px hero edge-to-edge. */
  body.hub-page .hub-hero .chrome-bg {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #ffffff !important;
    background-image: url('hero_chrome_sphere.png') !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
    z-index: 0 !important;
  }
  /* Veil: shorter so MORE of the orb is visible. Solid only behind H1,
     quick fade so orb shows through the lede area too. */
  body.hub-page .hub-hero .chrome-veil {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 55% !important;
    background: linear-gradient(180deg,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.85) 35%,
      rgba(255,255,255,0.4) 70%,
      rgba(255,255,255,0) 100%) !important;
    z-index: 1 !important;
  }
  /* Also override the ::before/::after overlays that paint SD skyline on mobile */
  body.hub-page .hub-hero::before {
    background-image: none !important;
    background: transparent !important;
    opacity: 0 !important;
  }
  body.hub-page .hub-hero::after {
    background: none !important;
    opacity: 0 !important;
  }
  body.hub-page .hub-hero {
    background: #ffffff !important;
  }
  /* Funding mobile (v36.107.6): fill the full 484px hero edge-to-edge.
     Prior version bottom-anchored the source image which pushed the bright
     streak band above the fold and left a dead black band before the stat
     divider. Cover + top-anchored: dark upper portion of source sits behind
     H1/lede (legible), bright streaks flare out toward the bottom of hero. */
  body.funding-page #hero::before {
    background-image: url('assets/hero/funding_flash.png') !important;
    background-size: cover !important;
    background-position: 50% 0% !important;
    background-repeat: no-repeat !important;
    opacity: 1 !important;
  }
  /* Soft seamless blend: long smooth gradient with no hard transition.
     Reads as ONE image, not 'photo glued under a black box'. */
  body.funding-page #hero::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg,
      rgba(8,10,14,0.98) 0%,
      rgba(8,10,14,0.92) 18%,
      rgba(8,10,14,0.78) 32%,
      rgba(8,10,14,0.55) 46%,
      rgba(8,10,14,0.3) 62%,
      rgba(8,10,14,0.12) 78%,
      rgba(8,10,14,0) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 1 !important;
  }
  /* Verdict mobile: HD matrix + slime neon green smoke as full BG.
     Show the dramatic green smoke. Title gets HARD-readable contrast via
     a solid black band behind H1+lede so the title is untouched & crisp. */
  body.verdict-page #verdict-intro {
    background: #000000 !important;
  }
  body.verdict-page #verdict-intro .v37g-hero::before,
  body.verdict-page #verdict-intro::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background-image: url('assets/hero/verdict_matrix.png') !important;
    background-size: auto 95% !important;
    background-position: 100% 100% !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    opacity: 1 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    transform: none !important;
  }
  /* Solid black band behind H1+lede (top ~52% of hero) so the title is
     completely crisp and untouched. Then sharp fade to reveal full smoke. */
  body.verdict-page #verdict-intro::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(180deg,
      rgba(0,0,0,0.88) 0%,
      rgba(0,0,0,0.72) 22%,
      rgba(0,0,0,0.3) 42%,
      rgba(0,0,0,0) 60%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
  /* CRITICAL: hero must sit ABOVE ::after overlay AND be transparent so
     the smoke (::before z:0) and overlay (::after z:1) both show through.
     Content z:3 sits on top of everything for crisp untouched title. */
  body.verdict-page #verdict-intro .v37g-hero {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
  }
  body.verdict-page #verdict-intro .v37g-hero::before {
    display: none !important;
  }
  body.verdict-page #verdict-intro .v37g-content {
    position: relative !important;
    z-index: 3 !important;
  }
  body.hub-page .hub-hero h1,
  body.verdict-page #verdict-intro .v37g-h1,
  body.partner-page #hero h1,
  body.funding-page #hero h1 {
    font-size: clamp(2.25rem, 9vw, 3.25rem) !important;
    max-width: 100% !important;
  }
  body.hub-page .hub-hero p,
  body.verdict-page #verdict-intro .v37g-lede,
  body.partner-page #hero p.lede,
  body.partner-page #hero p[class*="text-ink"],
  body.funding-page #hero p.lede,
  body.funding-page #hero p {
    max-width: 100% !important;
    font-size: 0.95rem !important;
  }
}