/* =========================================================================
   Alt: Second Level Hero Intro (Figma 176:4324)
   White rounded panel with a two-column layout: heading + body + filled
   CTA on the left, navy image panel surrounded by dotted-circle deco
   clusters on the right. Intended as an intro section sitting below the
   page hero on second-level pages (Roadmap, etc.).
   ========================================================================= */

.alt-second-level-hero-intro {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
}

/* When this section directly follows the alt-second-level-hero, pull
   it up so its white panel overlaps the bottom ~20% of the hero
   (Figma compose). Margin-top fluid -44 (at small viewports, ~12% of
   the hero's 360 floor) → -104 (at viewport=1600, exactly 20% of the
   hero's 520 height). Section padding-top is zeroed in the same
   selector so the panel-top lands at the overlap edge directly.

   `position: relative; z-index: 2` promotes the intro into the
   positioned stack so the white panel + decos render ABOVE the
   hero's own positioned children (.__pattern at z-index 0,
   .__inner at z-index 1). Without this, in-flow stacking puts the
   intro section BELOW any positioned hero descendant where they
   overlap, even though intro comes later in the DOM. */
.alt-second-level-hero + .alt-second-level-hero-intro {
  position: relative;
  z-index: 2;
  padding-top: 0;
  margin-top: clamp(-104px, -6.5vw, -44px);
}

.alt-second-level-hero-intro__panel {
  max-width: var(--content-max);
  margin-inline: auto;
  background-color: var(--color-background);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  /* Matches video-cta__panel padding so the two rounded panels sit at
     identical interior breathing room when stacked on the same page. */
  padding: clamp(40px, 7vw, 100px) clamp(20px, 4vw, 64px);
}

/* ----------- Layout ----------- */
/* Mobile-first stack; switches to side-by-side at 1100px (real layout
   change — the 514 + 48 + 707 + decos can't fit comfortably below). */
.alt-second-level-hero-intro__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(32px, 4vw, 48px);
  align-items: center;
}

@media (min-width: 1100px) {
  .alt-second-level-hero-intro__layout {
    /* Figma column widths: text 514 / image 707 = 514fr / 707fr. */
    grid-template-columns: minmax(0, 514fr) minmax(0, 707fr);
  }
}

/* ----------- Left column: content ----------- */
.alt-second-level-hero-intro__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6); /* 24px between text block and CTA per Figma */
}

.alt-second-level-hero-intro__heading {
  margin: 0;
  font-family: var(--font-family-display);
  /* Reuses --font-size-h2 (clamp 32→60); above 1600 the token grows to 72
     via the wide-screen pass (no separate clamp needed here). */
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: var(--color-navy-blue);
}

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

.alt-second-level-hero-intro__body {
  /* 8px gap above per Figma (between heading and body, inside text block). */
  margin: 8px 0 0;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  /* Figma: 24/16 = 1.5. No exact token; literal value is clearest. */
  line-height: 1.5;
  color: var(--color-body-copy-text);
}

/* ----------- Right column: media + deco ----------- */
.alt-second-level-hero-intro__media {
  position: relative;
  width: 100%;
  /* New stacking context so the br-small ring's z-index: -1 stays scoped
     inside __media (and doesn't slip behind the outer white panel). */
  isolation: isolate;
}

/* Navy image panel — fills the column. Image is positioned absolutely
   inside per Figma so the rack "spills" slightly above the panel top
   (the source PNG has transparent areas; the navy bg shows through
   around the rack). */
.alt-second-level-hero-intro__image-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 707 / 478;
  background-color: var(--color-navy-blue);
  border-radius: 8px;
  overflow: hidden;
}

/* Default: full-bleed cover. */
.alt-second-level-hero-intro__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

/* Product size: Figma-positioned at designed scale inside the panel.
   left 22.12%, top -8.86%, width 55.77%, height 123.11%. */
.alt-second-level-hero-intro__image-panel--product .alt-second-level-hero-intro__image {
  inset: auto;
  left: 22.12%;
  top: -8.86%;
  width: 55.77%;
  height: 123.11%;
  object-fit: contain;
}

/* ----------- Deco circles: only at ≥1100px ----------- */
.alt-second-level-hero-intro__deco {
  position: absolute;
  pointer-events: none;
  display: none;
}

@media (min-width: 1100px) {
  .alt-second-level-hero-intro__deco {
    display: block;
  }
}

.alt-second-level-hero-intro__deco-ring {
  position: absolute;
  display: block;
}

/* Top-left cluster — mirrors the BR cluster across the diagonal. Same
   two SVGs (large + small ring); only the positioning anchor changes
   (top-left instead of bottom-right). Rotation matched ring-for-ring
   so each TL ring spins in sync with its BR counterpart — same pattern
   the video-cta section uses across its BL/TR pair. */
.alt-second-level-hero-intro__deco--tl {
  top: -60px;
  left: -85px;
  width: 214px;
  height: 213px;
}

.alt-second-level-hero-intro__deco-ring--tl-large {
  left: 0;
  top: 0;
  width: 214px;
  height: 213px;
  animation: alt-second-level-hero-intro-spin-ccw 28s linear infinite;
}

.alt-second-level-hero-intro__deco-ring--tl-small {
  left: 150px;
  top: 0;
  width: 141px;
  height: 146px;
  animation: alt-second-level-hero-intro-spin 20s linear infinite;
}

/* Bottom-right cluster — two separate rings positioned outside the
   image panel's bottom-right corner. The large ring (214×213) carries
   its own glow-dot accent at its right edge; the small ring (141×146)
   carries one at its bottom-right too. */
.alt-second-level-hero-intro__deco--br {
  right: -85px;
  bottom: -60px;
  width: 214px;
  height: 213px;
}

.alt-second-level-hero-intro__deco-ring--br-large {
  right: 45px;
  bottom: 0;
  width: 214px;
  height: 213px;
  animation: alt-second-level-hero-intro-spin-ccw 28s linear infinite;
}

.alt-second-level-hero-intro__deco-ring--br-small {
  right: 189px;
  bottom: 0;
  width: 141px;
  height: 146px;
  /* Tucks behind the navy image-panel where they overlap — visible
     parts read as a ring peeking out from behind the corner. */
  z-index: -1;
  animation: alt-second-level-hero-intro-spin 20s linear infinite;
}

/* Slow clockwise spin used by the small rings (paused under
   prefers-reduced-motion via the global rule in global.css). */
@keyframes alt-second-level-hero-intro-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Counter-clockwise counterpart used by the large rings. */
@keyframes alt-second-level-hero-intro-spin-ccw {
  to {
    transform: rotate(-360deg);
  }
}