/* Story Engine Runtime v5.1 — Hero Layout Engine */

:root {
  --se-header-height: 88px;
  --se-header-gap: 18px;
  --se-hero-nav-clearance: calc(var(--se-header-height) + var(--se-header-gap));
  --se-hero-min-height: 100svh;
}

/* Remove stacked offsets from legacy layouts */
body .site-main,
body main,
.ds-growth-story-page,
.se-runtime {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.home .hero,
.front-page .hero,
body.home .hero,
.hero.hero-edge-network,
.se-runtime .se-hero,
.ds-growth-story-page .se-hero {
  min-height: var(--se-hero-min-height);
  margin-top: 0 !important;
  padding-top: clamp(112px, 16vh, 170px) !important;
  padding-bottom: clamp(72px, 12vh, 130px) !important;
}

/* Full-bleed backgrounds start behind the floating nav */
.home .hero:first-of-type,
.front-page .hero:first-of-type,
body.home .hero:first-of-type,
.se-runtime .se-hero:first-child,
.ds-growth-story-page .se-hero:first-child {
  position: relative;
  overflow: hidden;
}

/* Growth story hero should not inherit large card gap from standard chapters */
.se-story > .se-hero:first-child {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto var(--ds-space-section) auto !important;
}

/* Pull the first story hero into the top visual field while preserving readability */
.ds-growth-story-page.se-runtime,
.ds-growth-story-page {
  padding-top: 0 !important;
}

.ds-growth-story-page .se-story {
  padding-top: 0 !important;
}

/* Homepage edge hero content alignment */
.hero.hero-edge-network .hero-copy,
.home .hero .hero-copy,
.front-page .hero .hero-copy {
  padding-top: clamp(112px, 16vh, 170px) !important;
  padding-bottom: clamp(72px, 12vh, 130px) !important;
}

/* Prevent double clearance from legacy hero copy pseudo-panels */
.hero.hero-edge-network {
  align-items: stretch;
}

.hero.hero-edge-network .hero-stage,
.hero.hero-edge-network .stage-frame {
  top: 0;
}

/* Header/nav remains visually above hero */
.site-header,
header.site-header,
.ds-site-header,
#masthead {
  z-index: 9999;
}

/* Anchor targets should land below the fixed/smart header */
[id] {
  scroll-margin-top: calc(var(--se-header-height) + 24px);
}

/* Mobile tuning */
@media (max-width: 900px) {
  :root {
    --se-header-height: 76px;
    --se-header-gap: 12px;
  }

  .home .hero,
  .front-page .hero,
  body.home .hero,
  .hero.hero-edge-network,
  .se-runtime .se-hero,
  .ds-growth-story-page .se-hero {
    min-height: auto;
    padding-top: 104px !important;
    padding-bottom: 72px !important;
  }

  .se-story > .se-hero:first-child {
    width: min(100% - 28px, 1160px);
  }

  .hero.hero-edge-network .hero-copy,
  .home .hero .hero-copy,
  .front-page .hero .hero-copy {
    padding-top: 104px !important;
    padding-bottom: 72px !important;
  }
}

/* Story Engine Runtime v5.1.1 — Hero spacing correction
   Goal:
   - Homepage hero content moves higher
   - Growth Story hero card gets breathing room below nav
*/

/* Homepage: reduce excessive vertical dead space under nav */
body.home .hero,
.home .hero,
.front-page .hero,
body.home .hero.hero-edge-network,
.hero.hero-edge-network.se-hero-layout {
  padding-top: clamp(72px, 10vh, 112px) !important;
  min-height: 92svh;
}

body.home .hero .hero-copy,
.home .hero .hero-copy,
.front-page .hero .hero-copy,
.hero.hero-edge-network .hero-copy {
  padding-top: clamp(72px, 10vh, 112px) !important;
}

/* Growth Stories: card should sit below nav, not collide with it */
.ds-growth-story-page .se-story > .se-hero:first-child,
.se-runtime .se-story > .se-hero:first-child {
  margin-top: calc(var(--se-header-height) + 28px) !important;
  min-height: calc(100svh - var(--se-header-height) - 28px);
  padding-top: clamp(52px, 8vh, 86px) !important;
}

/* Keep Growth Story page itself from adding extra space */
.ds-growth-story-page,
.ds-growth-story-page.se-runtime,
.se-runtime {
  padding-top: 0 !important;
}

/* Large nav screenshots show actual nav closer to 110px tall */
@media (min-width: 901px) {
  :root {
    --se-header-height: 104px;
    --se-header-gap: 18px;
  }
}

/* Mobile keeps a little breathing room but avoids double spacing */
@media (max-width: 900px) {
  body.home .hero,
  .home .hero,
  .front-page .hero,
  body.home .hero.hero-edge-network,
  .hero.hero-edge-network.se-hero-layout {
    padding-top: 86px !important;
    min-height: auto;
  }

  body.home .hero .hero-copy,
  .home .hero .hero-copy,
  .front-page .hero .hero-copy,
  .hero.hero-edge-network .hero-copy {
    padding-top: 86px !important;
  }

  .ds-growth-story-page .se-story > .se-hero:first-child,
  .se-runtime .se-story > .se-hero:first-child {
    margin-top: calc(var(--se-header-height) + 18px) !important;
    padding-top: 42px !important;
    min-height: auto;
  }
}

/* Story Engine Runtime v5.1.2 — Visual Polish */

body.home .hero,
.home .hero,
.front-page .hero,
body.home .hero.hero-edge-network,
.hero.hero-edge-network.se-hero-layout {
  padding-top: clamp(54px, 8vh, 88px) !important;
}

body.home .hero .hero-copy,
.home .hero .hero-copy,
.front-page .hero .hero-copy,
.hero.hero-edge-network .hero-copy {
  padding-top: clamp(54px, 8vh, 88px) !important;
}

.ds-growth-story-page .se-story > .se-hero:first-child,
.se-runtime .se-story > .se-hero:first-child {
  margin-top: calc(var(--se-header-height) + 10px) !important;
  padding-top: clamp(46px, 7vh, 74px) !important;
  border-radius: 26px !important;
}

.se-chapter,
.ds-growth-story-page .se-chapter {
  border-radius: 26px;
}

.se-card,
.se-metric {
  border-radius: 22px;
}

.site-header .custom-logo-link,
.site-header .site-logo,
.site-header .brand,
.ds-site-header .custom-logo-link,
.ds-site-header .site-logo,
.ds-site-header .brand,
#masthead .custom-logo-link,
#masthead .site-logo,
#masthead .brand {
  font-family: inherit !important;
  text-decoration: none !important;
}

.site-header img.custom-logo,
.site-header .custom-logo-link img,
.ds-site-header img.custom-logo,
.ds-site-header .custom-logo-link img,
#masthead img.custom-logo,
#masthead .custom-logo-link img {
  display: block !important;
  width: auto !important;
  height: clamp(46px, 5vw, 72px) !important;
  max-width: min(230px, 42vw) !important;
  object-fit: contain !important;
}

@media (max-width: 900px) {
  body.home .hero,
  .home .hero,
  .front-page .hero,
  body.home .hero.hero-edge-network,
  .hero.hero-edge-network.se-hero-layout {
    padding-top: 72px !important;
  }

  body.home .hero .hero-copy,
  .home .hero .hero-copy,
  .front-page .hero .hero-copy,
  .hero.hero-edge-network .hero-copy {
    padding-top: 72px !important;
  }

  .ds-growth-story-page .se-story > .se-hero:first-child,
  .se-runtime .se-story > .se-hero:first-child {
    margin-top: calc(var(--se-header-height) + 10px) !important;
    padding-top: 36px !important;
  }

  .site-header img.custom-logo,
  .site-header .custom-logo-link img,
  .ds-site-header img.custom-logo,
  .ds-site-header .custom-logo-link img,
  #masthead img.custom-logo,
  #masthead .custom-logo-link img {
    height: 46px !important;
    max-width: 190px !important;
  }
}

/* Story Engine Runtime v5.2 — Navigation component integration */
:root {
  --se-header-height: 78px;
}
@media (max-width: 900px) {
  :root {
    --se-header-height: 68px;
  }
}

/* v5.2.4 — unified nav height across homepage and stories */
:root {
  --se-header-height: 78px;
}
@media (max-width: 900px) {
  :root {
    --se-header-height: 76px;
  }
}

/* v5.3 — canonical header height */
:root {
  --se-header-height: 72px;
}
@media (max-width: 900px) {
  :root {
    --se-header-height: 68px;
  }
}


/* alpha.25.4 — individual Growth Story hero card/nav gap
   Actual DOM: main.ds-growth-story-page > article.se-story > section.se-chapter.se-hero
   Uses the validated 45px token from design-tokens.css.
*/
body.single-growth_story.se-canonical-header-active .ds-growth-story-page .se-story > .se-hero:first-child,
body.single-growth_story.se-canonical-header-active .se-runtime .se-story > .se-hero:first-child {
  margin-top: calc(var(--se-header-height, 104px) + var(--se-story-top-gap, 45px)) !important;
  border-top-color: transparent !important;
}

body.single-growth_story.se-canonical-header-active .ds-growth-story-page .se-story > .se-hero:first-child::before,
body.single-growth_story.se-canonical-header-active .se-runtime .se-story > .se-hero:first-child::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  pointer-events: none;
}


/* alpha.25.6 — Growth Story hero card aligns to story/nav container
   Live test confirmed the issue was side margins, not parent width.
   Keep internal card padding; remove the 20px outer inset on the first hero card.
*/
body.single-growth_story .ds-growth-story-page .se-story > .se-hero:first-child,
body.single-growth_story .se-runtime .se-story > .se-hero:first-child {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}