/* =========================================================================
   Media Highlight with Stats section (About page Figma 203:1462)
   Light-bordered rounded panel: heading + body + CTA on the left, media
   (video or image) framed in a dark navy box with deco-ring clusters on
   the right, divider, then a 4-column stats row below.

   Deco SVGs + play-button SVG are REUSED from the video-cta bundle
   (../assets/images/video-cta/) — no duplication. The video-modal
   controller (video-cta.js) auto-binds to [data-video-id] globally,
   so the play button on this section opens the same YouTube modal.
   ========================================================================= */

.media-highlight {
  padding-block: var(--section-padding-block);
  padding-inline: var(--space-inline);
}

/* Sibling-overlap rule — when this section follows alt-second-level-hero
   it gets pulled up to cover the bottom portion of the hero. Pair with a
   "Tall" or "Extra-tall" Panel-height on the hero (ACF) to guarantee
   breathing room under the subheading — on a standard-height banner the
   overlap sits very close to the subhead, which reads as crowded.
   The z-index promotion puts this section's panel + decos above the
   hero's own positioned children. Auto-disables if a section is inserted
   between them. See patterns/sibling-overlap-section.md.
   The featured-case-study variant (`.media-highlight--case-study`) uses
   a stronger pull-up to overlap a 520px-tall hero, matching the Case
   Studies page Figma composition. */
.alt-second-level-hero + .media-highlight {
  position: relative;
  z-index: 2;
  padding-top: 0;
  margin-top: clamp(-44px, -6.5vw, -44px);
}

.alt-second-level-hero + .media-highlight--case-study {
  margin-top: clamp(-40px, -8.125vw, -48px);
}

.media-highlight__panel {
  max-width: var(--content-max);
  margin-inline: auto;
  background-color: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: 8px;
  /* Mobile-first interior padding; scales up to Figma's 48px at desktop. */
  padding: clamp(28px, 4vw, 48px);
  /* Positioning context for the admin edit-link pill (top-right). */
  position: relative;
}

/* Section-level admin edit link (see infleqtion_render_section_edit_link()) */
.media-highlight__section-edit {
  position: absolute;
  top: 8px;
  right: 8px;
}

/* ----------- Top row: text + media layout ----------- */
.media-highlight__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(40px, 6vw, 64px);
  align-items: center;
}

@media (min-width: 1100px) {
  .media-highlight__layout {
    /* Figma columns: 514 left + 707 right, with the right column
       extending beyond the panel edge for the TR deco overhang. */
    grid-template-columns: minmax(0, 514fr) minmax(0, 707fr);
    gap: clamp(48px, 4vw, 100px);
  }
}

/* ----------- Left: content ----------- */
.media-highlight__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}

.media-highlight__heading {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 400;
  font-size: clamp(40px, 4.5vw, 60px);
  line-height: 1.2;
  color: var(--color-navy-blue);
}

/* Body — wysiwyg / two-paragraph block. Each <p> gets a 16px top
   margin (after the first) for spacing between paragraphs that matches
   the Figma 16px gap. */
.media-highlight__body {
  margin: 0;
  font-family: var(--font-family-sans);
  font-weight: 400;
  font-size: var(--font-size-body);  /* 16px */
  line-height: 1.5;
  color: var(--color-body-copy-text);
}

.media-highlight__body p {
  margin: 0;
}

.media-highlight__body p + p {
  margin-top: 16px;
}

.media-highlight__body a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease-out;
}

.media-highlight__body a:hover,
.media-highlight__body a:focus-visible {
  color: var(--color-green-2);
}

/* Nudge the CTA's top margin to feel proportioned without depending on
   the .media-highlight__content gap. */
.media-highlight__content .btn {
  margin-top: 8px;
}

/* Two-button row. The wrapper carries the 8px nudge; children reset to 0
   so the gap drives spacing between buttons. */
.media-highlight__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.media-highlight__ctas .btn {
  margin-top: 0;
}

/* Descender fix for "g" in "Roadmap"-style labels (matches video-cta). */
.media-highlight__content .btn__label,
.media-highlight__content .btn__label > span {
  line-height: 1.3;
}

/* ----------- Right: media + decos ----------- */
.media-highlight__media {
  position: relative;
  margin: 0;
  /* New stacking context so the bl-small ring's z-index: -1 stays scoped
     inside __media (and doesn't slip behind the outer white panel). */
  isolation: isolate;
}

@media (min-width: 1100px) {
  .media-highlight__media {
    /* Reserve room for the TR cluster above + BL cluster below the frame. */
    padding-block: 60px;
  }
}

/* Media frame — wraps either the video player <button> or the plain
   image <div>. Dark navy bg shows at the edges; image fills with cover. */
.media-highlight__frame {
  position: relative;
  display: block;
  width: 100%;
  /* Figma frame: 707×478 → 1.479:1. */
  aspect-ratio: 707 / 478;
  border: 0;
  padding: 0;
  background-color: var(--color-navy-blue);
  cursor: default;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.25s ease-out, transform 0.25s ease-out;
}

/* Video-mode frame — interactive button gets the lift treatment. */
.media-highlight__frame--video {
  cursor: pointer;
}

.media-highlight__frame--video:hover,
.media-highlight__frame--video:focus-visible {
  box-shadow: 0 8px 24px rgba(0, 9, 25, 0.12);
}

.media-highlight__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Play button overlay — same positioning treatment as video-cta. */
.media-highlight__play {
  position: absolute;
  left: 88%;
  top: 85%;
  width: clamp(56px, 7vw, 80px);
  height: clamp(56px, 7vw, 80px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  transition: transform 0.25s ease-out;
}

.media-highlight__frame--video:hover .media-highlight__play,
.media-highlight__frame--video:focus-visible .media-highlight__play {
  transform: translate(-50%, -50%) scale(1.06);
}

/* ----------- Decos: only visible at ≥1100px ----------- */
.media-highlight__deco {
  position: absolute;
  pointer-events: none;
  display: none;
}

@media (min-width: 1100px) {
  .media-highlight__deco {
    display: block;
  }
}

.media-highlight__deco-ring {
  position: absolute;
  display: block;
}

/* TR cluster — anchored top-right of the media wrapper, overhangs 85px
   past the right edge into the panel padding (same overhang as
   video-cta's TR cluster). */
.media-highlight__deco--tr {
  top: 0;
  right: -85px;
  width: 309px;
  height: 213px;
}

/* BL cluster — anchored bottom-left, mirrors TR across the diagonal. */
.media-highlight__deco--bl {
  left: -85px;
  bottom: 0;
  width: 309px;
  height: 213px;
}

/* Large ring (214×213) — CCW spin, slower (28s). */
.media-highlight__deco-ring--bl-large {
  right: 40px;
  bottom: 0;
  width: 214px;
  height: 213px;
  animation: media-highlight-spin-ccw 28s linear infinite;
}

.media-highlight__deco-ring--tr-large {
  left: 40px;
  top: 0;
  width: 214px;
  height: 213px;
  animation: media-highlight-spin-ccw 28s linear infinite;
}

/* Small ring (141×146) — CW spin, faster (20s). */
.media-highlight__deco-ring--bl-small {
  left: 220px;
  bottom: 0;
  width: 141px;
  height: 146px;
  animation: media-highlight-spin 20s linear infinite;
  /* Tucks behind the image frame at the bottom-left, while bl-large
     stays on top (matches the alt-second-level-hero-intro BR pattern).
     The z-index is scoped by isolation: isolate on __media. */
  z-index: -1;
}

.media-highlight__deco-ring--tr-small {
  right: 220px;
  top: 0;
  width: 141px;
  height: 146px;
  animation: media-highlight-spin 20s linear infinite;
}

@keyframes media-highlight-spin {
  to { transform: rotate(360deg); }
}

@keyframes media-highlight-spin-ccw {
  to { transform: rotate(-360deg); }
}

/* ----------- Divider ----------- */
.media-highlight__divider {
  margin: clamp(40px, 4vw, 48px) 0;
  height: 1px;
  border: 0;
  background-color: var(--color-card-border);
}

/* ----------- Stats row (4 → 2×2 → 1 cascade) ----------- */
.media-highlight__stats {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .media-highlight__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .media-highlight__stats {
    /* 4 stats in a row. Last column is wider in the Figma (347 vs
       229/234/167) because it carries the longest label; 1fr at each
       slot still distributes proportionally and the text wraps cleanly. */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}

.media-highlight__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* dl > div needs no outside spacing; <dt>/<dd> reset below. */
}

.media-highlight__stat-value {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  /* Green, matching the other stat figures on the site
     (.case-study-impact__metric-value, .case-study-key-problem__stat-value). */
  color: var(--color-green-2);
}

.media-highlight__stat-label {
  margin: 0;
  font-family: var(--font-family-display);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.2;
  color: var(--color-body-copy);
}

/* ----------- Reveal stagger (per-stat) ----- */
.media-highlight__stat { --reveal-delay: 0s; }
.media-highlight__stats.reveal .media-highlight__stat:nth-child(1) { --reveal-delay: 0.05s; }
.media-highlight__stats.reveal .media-highlight__stat:nth-child(2) { --reveal-delay: 0.10s; }
.media-highlight__stats.reveal .media-highlight__stat:nth-child(3) { --reveal-delay: 0.15s; }
.media-highlight__stats.reveal .media-highlight__stat:nth-child(4) { --reveal-delay: 0.20s; }

/* =========================================================================
   Case Study variant — Featured Case Study section (Figma 772:225)
   Adds two optional pieces to the left content column: (1) a category-pills
   row above the heading and (2) a 2×2 partner-logo grid under the CTA.
   Scoped to .media-highlight--case-study so About (and any other instance)
   stays untouched.
   ========================================================================= */

.media-highlight--case-study .media-highlight__pills {
  list-style: none;
  margin: 0 0 -8px 0;  /* pull heading closer; matches Figma 24px gap after content gap */
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.media-highlight--case-study .media-highlight__pill {
  padding: 5px 8px;
  border: 1px solid var(--color-green-2);
  border-radius: 200px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-eyebrow);
  font-weight: var(--font-weight-medium);
  line-height: 0.93;
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-navy-blue);
  white-space: nowrap;
}

/* Partner-logo grid — Figma shows 2×2, greyscale monochrome logos. */
.media-highlight--case-study .media-highlight__partners {
  list-style: none;
  margin: 16px 0 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 32px;
  max-width: 320px;
  align-self: stretch;
}

.media-highlight--case-study .media-highlight__partner {
  display: flex;
  align-items: center;
}

.media-highlight--case-study .media-highlight__partner img {
  height: 30px;
  width: auto;
  max-width: 100%;
  display: block;
  filter: grayscale(1) contrast(1.05);
  opacity: 0.9;
}

/* Featured Case Study CTA. On hover the .btn--filled teal pill slides up out
   of the button, leaving just the teal border on the dark panel — the global
   rule then turns the label white. Teal instead, so the label matches the
   border it's sitting inside. The arrow inherits via currentColor. */
.media-highlight--case-study .btn--filled:hover,
.media-highlight--case-study .btn--filled:focus-visible {
  color: var(--color-teal);
}

/* Case Study variant renders as a plain image (no video button), so remove
   the button-only hover treatments' pointer cursor and shadow lift. The
   video-mode selector already scopes those, so nothing extra is needed —
   this comment just documents the intent for future readers. */