/* =========================================================================
   Alt: Second Level Hero (Figma 371:11939)
   Compact page hero for second-level pages (Roadmap, etc.) — full-bleed
   navy panel with a decorative dot pattern, centered heading + subheading,
   no aurora and no CTAs. The nav overlays this panel (body.has-hero rule
   in nav.css), so the text needs enough top padding to clear the nav.
   ========================================================================= */

.alt-second-level-hero {
  position: relative;
  background-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
  overflow: hidden;
  text-align: center;
  /* Flex column + justify-center vertically centers content when the
     tall/extra-tall variants kick in above ~1113px (min-height 500/550
     > natural content height). Without this the content pins to the
     top padding and dead space collects below. Pattern layer is
     position:absolute so it stays out of the flex flow. */
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Top padding fluid 80→146 over 360→1600 viewport. The cap matches
     Figma's 146px text-top offset (so the heading lands where designed
     on desktop); the floor keeps the heading off the nav on mobile.
     slope = 66/1240 = 5.323vw/100, intercept = 80 - 0.05323×360 = 60.84. */
  padding-block-start: clamp(80px, 60.84px + 5.323vw, 146px);
  /* Bottom padding fluid 80→106 over 360→1600 — matches Figma 400-tall
     panel composition (146 top + 148 text + 106 bottom = 400, node 1015:204).
     slope = 26/1240 = 2.097vw/100, intercept = 80 - 0.02097×360 = 72.45. */
  padding-block-end: clamp(80px, 72.45px + 2.097vw, 106px);
  /* No outer padding-inline. Both __container (breadcrumb) and __inner
     (heading + collab) take their own padding-inline so they can each be
     max-width-capped and centered — matches the nav's inner-container
     pattern, so the breadcrumb left-edge lines up with the site logo. */
}

/* Dot pattern layer — covers the full panel, sits behind the text via
   z-index. SVG is rendered with preserveAspectRatio so it scales to
   fill the panel; on wider viewports the pattern stretches with the
   container (matches Figma intent at every width). */
.alt-second-level-hero__pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.alt-second-level-hero__pattern img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Tall variant — used on the Case Studies page so the featured-case-study
   card can overlap in front of a 500px banner. Editor opts in via the
   "Panel height" ACF select on the layout. */
.alt-second-level-hero--tall {
  min-height: 500px;
}

/* Extra-tall variant — 10% taller than "tall". Editor opts in via the
   "Panel height" ACF select on the layout. */
.alt-second-level-hero--extra-tall {
  min-height: 550px;
}

/* Balanced variant — bottom padding matches top so the hero text sits
   vertically centered in the panel. Used on the Case Studies index
   (Widescreen-R2-1 / Desktop-R2-1 iteration). */
.alt-second-level-hero--balanced {
  padding-block-end: clamp(80px, 60.84px + 5.323vw, 146px);
}

/* Text container — centered, max-width matches Figma's 952px.
   padding-inline keeps content off the viewport edges when the viewport
   is narrower than 952 + 2*padding. */
.alt-second-level-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 1242px;
  margin-inline: auto;
  padding-inline: var(--space-inline);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6); /* 24px between heading and subhead per Figma */
}

.alt-second-level-hero__heading {
  margin: 0;
  font-family: var(--font-family-display);
  /* Reuses the home hero display token: clamp(48, 6vw, 80). Cap of 80
     matches Figma; above 1600 the token holds at 80 (no wide-screen
     bump for this section unless designer provides one). */
  font-size: var(--font-size-display-1);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-tight);
  color: inherit;
  overflow-wrap: break-word;
}

@media (min-width: 768px) {
  .alt-second-level-hero__heading {
    white-space: nowrap;
  }
}

.alt-second-level-hero__heading-accent {
  color: var(--color-green-2);
  font-weight: var(--font-weight-semibold);
}

.alt-second-level-hero__subheading {
  margin: 0;
  width: 100%;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg); /* 18 → 20 above 1600 via token */
  font-weight: var(--font-weight-light);
  /* Figma: leading 1.2. No exact token (relaxed=1.4, tight=1.0) — literal. */
  line-height: 1.2;
  color: inherit;
}

/* Optional wide container — 1600px max, centered, page-padded — houses the
   breadcrumb above the __inner. Kept at --container-max (wider than __inner's
   1242) so a long crumb trail has room before it wraps; the trail itself is
   centred, so it shares the centre line with the heading either way.
   width:100% is required — parent is a flex-column and margin-inline:auto
   would otherwise cause shrink-to-fit, collapsing this to the breadcrumb's
   text width and centering it on the section. */
.alt-second-level-hero__container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-inline);
  margin-bottom: var(--space-6); /* 24px gap between breadcrumb and heading */
}

/* Optional breadcrumb — sits above the heading, centered on the panel so it
   shares the centre line with the heading + subheading below. Used on
   term/child pages (Glossary). */
.alt-second-level-hero__breadcrumb {
  text-align: center;
  color: inherit;
  font-family: var(--font-family-sans);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.35px;
}

.alt-second-level-hero__breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  /* The <ol> is a flex row filling __container, so text-align on the nav
     can't move the crumbs — justify-content is what centres them. */
  justify-content: center;
  gap: 11px;
  flex-wrap: wrap;
}

.alt-second-level-hero__breadcrumb li {
  display: flex;
  align-items: center;
}

.alt-second-level-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.alt-second-level-hero__breadcrumb a:hover,
.alt-second-level-hero__breadcrumb a:focus-visible {
  opacity: 0.7;
}

.alt-second-level-hero__breadcrumb-sep {
  display: inline-block;
  width: 11px;
  color: inherit;
  opacity: 0.7;
  text-align: center;
}

.alt-second-level-hero__breadcrumb [aria-current="page"] {
  opacity: 0.85;
}

/* Optional collab-line row — partner logo + short attribution text below
   the heading. Used on the Glossary hero (Figma 815:1912). */
.alt-second-level-hero__collab {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.alt-second-level-hero__collab-logo {
  height: 32px;
  width: auto;
  display: block;
}

.alt-second-level-hero__collab-text {
  margin: 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: inherit;
}

/* ---------------------------------------------------------------
   Wide-screen pass (≥1600px). Base inner caps at 1242px which
   leaves large gutters at 2500. Scale up to 1800px, smooth
   handoff at 1600 (the clamp resolves to exactly 1242).

   slope     = (1800 - 1242) / (2500 - 1600) = 558 / 900
             = 0.62 per px = 62vw / 100
   intercept = 1242 - 0.62 × 1600 = 250
   --------------------------------------------------------------- */
@media (min-width: 1600px) {
  .alt-second-level-hero__inner {
    max-width: clamp(1242px, 250px + 62vw, 1800px);
  }
}

/* Glossary term context: term titles can be long (e.g. "All-to-all Connectivity",
   "Quantum Approximate Optimization Algorithm (QAOA)") so allow the heading to
   wrap and centre both heading + subheading lines. Overrides the default
   nowrap that suits the short 1–2 word page titles this hero is otherwise used for. */
.alt-second-level-hero--glossary-term .alt-second-level-hero__heading {
  white-space: normal;
  text-align: center;
  overflow-wrap: anywhere;
}

.alt-second-level-hero--glossary-term .alt-second-level-hero__subheading {
  text-align: center;
  max-width: 900px;
}