/*
  Case Study Detail — hero section.
  Source: Figma 772:2459 (frame 1440×756 at 1600 viewport, hero at 80,180).

  Structure:
    - Top row: breadcrumb (Home > Case Studies > Name)
    - Meta row: 5 industry chip pills (left) + share label + 5 social icons (right)
    - Main row (2-col):
        Left col (672px)  — 4 client-logo cards, big title, Context + Overview
                            stacked paragraphs, Talk to an Expert + Download PDF
        Right col (~690px) — 600×450 hero image with rounded corners, dark
                             bottom gradient, teal play button + dotted deco rings
    - Stacks single-col below 1100px.

  Nav is the normal light-bg header (no `has-hero` on <body>).
*/

.case-study-hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(24px, 2vw, 32px);
  padding-inline: var(--space-inline);
  color: var(--color-navy-blue);
}

.case-study-hero__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 40px);
}

/* ---------------------------------------------------------------
   Breadcrumb — Home > Case Studies > <Name>
   --------------------------------------------------------------- */
.case-study-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--font-family-sans);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.35px;
  color: #171717;
}

.case-study-hero__breadcrumb ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}

.case-study-hero__breadcrumb li {
  display: flex;
  align-items: center;
  gap: 11px;
}

.case-study-hero__breadcrumb a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.case-study-hero__breadcrumb a:hover,
.case-study-hero__breadcrumb a:focus-visible {
  color: var(--color-teal);
}

.case-study-hero__breadcrumb-sep {
  display: inline-block;
  width: 11px;
  color: inherit;
  opacity: 0.7;
  font-weight: var(--font-weight-regular);
}

.case-study-hero__breadcrumb [aria-current="page"] {
  color: inherit;
}

/* ---------------------------------------------------------------
   Meta row — industry chips + share icons
   --------------------------------------------------------------- */
.case-study-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.case-study-hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.case-study-hero__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 8px;
  /* Green outline, matching the pill treatment used by .research-articles__tag
     and .video-hub__tag so tags read consistently across sections. */
  border: 1px solid var(--color-green-2);
  border-radius: 200px;
  font-family: var(--font-family-sans);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 0.93;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-navy-blue);
  background: transparent;
  white-space: nowrap;
}

.case-study-hero__byline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  line-height: 1.5;
  color: var(--color-text-heading);
}

.case-study-hero__byline-author {
  font-weight: var(--font-weight-semibold);
}

.case-study-hero__share {
  display: flex;
  align-items: center;
  gap: var(--space-4_5);
}

.case-study-hero__share-label {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: 24px;
  color: var(--color-navy-blue);
}

.case-study-hero__socials {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  padding: 0;
  margin: 0;
}

.case-study-hero__social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--color-navy-blue);
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: relative;
}

.case-study-hero__social:hover,
.case-study-hero__social:focus-visible {
  opacity: 0.7;
  transform: translateY(-1px);
}

/* Copy-link confirmation tooltip — floats above the button for ~1.6s
   after a successful copy. Triggered by JS toggling .is-copied. Uses
   CSS-only positioning + fade so no extra DOM node is needed. */
.case-study-hero__social--copy::after {
  content: "Link copied!";
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 6px 10px;
  background-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
  font-family: var(--font-family-sans);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  line-height: 1;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 2;
}

.case-study-hero__social--copy.is-copied::after {
  opacity: 1;
  transform: translate(-50%, 0);
}

.case-study-hero__social--copy.is-copied {
  /* Freeze the hover lift while the confirmation is showing so the
     tooltip doesn't jump with the icon. */
  transform: none;
  opacity: 1;
}

.case-study-hero__social img,
.case-study-hero__social svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* Facebook composite: navy circle bg with white 'f' inside. Rendered as
   two positioned children so the exported facebook-vector.svg (glyph only)
   sits over a navy circle bg. */
.case-study-hero__social--facebook {
  background-color: var(--color-navy-blue);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

.case-study-hero__social--facebook img {
  width: 43%;
  height: 80%;
  position: absolute;
  top: 20%;
  left: 29%;
  filter: brightness(0) invert(1);
}

/* ---------------------------------------------------------------
   Main 2-column layout — text left, image right
   --------------------------------------------------------------- */
.case-study-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 672fr) minmax(0, 690fr);
  gap: clamp(24px, 4vw, 61px);
  align-items: center;
}

.case-study-hero--blog .case-study-hero__layout {
  align-items: center;
}

/* Blog posts without a featured image collapse the hero to a single column so
   the content doesn't stare at an empty right slot. */
.case-study-hero--no-media .case-study-hero__layout {
  grid-template-columns: minmax(0, 1fr);
}

.case-study-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.case-study-hero__heading-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Logo cards row — fixed-size 250×150 pills, left-aligned, wrap on overflow.
   Each pill acts as an image-wrap; the logo image fits inside via object-fit:
   contain (preserves aspect, may letterbox). One pill leaves the rest of the
   row empty (no stretch). */
.case-study-hero__logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  justify-content: flex-start;
  padding: 0;
  margin: 0;
}

.case-study-hero__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 158px;
  height: 62px;
  padding: 20px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.case-study-hero__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Title — matches Figma H2 60px New Science */
.case-study-hero__title {
  font-family: var(--font-family-display);
  font-size: clamp(38px, 24px + 2.4vw, 60px);
  font-weight: var(--font-weight-regular);
  line-height: 1.2;
  color: #171717;
  margin: 0;
}

/* Context / Overview stacked paragraphs — labeled sub-blocks */
.case-study-hero__sections {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.case-study-hero__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.case-study-hero__section-heading {
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-semibold);
  line-height: 28px;
  color: #171717;
  margin: 0;
}

.case-study-hero__section-body {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  line-height: 24px;
  color: var(--color-body-copy);
  margin: 0;
}

/* CTA row — Talk to an Expert (filled teal) + Download PDF (outline teal) */
.case-study-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
}

/* Descender fix for "Talk to an Expert" / "Download PDF" — global .btn__label
   is height:1lh + line-height:1 which leaves no room below the baseline.
   Set line-height on BOTH the wrapper and the span copies so the slot is
   tall enough AND the text stays vertically centered inside it. */
.case-study-hero__actions .btn__label,
.case-study-hero__actions .btn__label > span {
  line-height: 1.3;
}

/* ---------------------------------------------------------------
   Media column — hero image with deco rings + play button
   --------------------------------------------------------------- */
.case-study-hero__media {
  position: relative;
  isolation: isolate;
  aspect-ratio: 690 / 620;
  width: 100%;
  max-width: 690px;
  margin-inline: auto;
}

.case-study-hero__frame {
  position: absolute;
  top: 43px;
  left: 49px;
  right: 41px;
  bottom: 127px;
  border-radius: 8px;
  overflow: hidden;
  border: 0;
  padding: 0;
  background: transparent;
  z-index: 2;
}

/* Only the video-frame variant (rendered as <button>) shows the pointer
   cursor. Image-only frames render as <div> and get the default cursor
   so users aren't teased with a clickable affordance that does nothing. */
button.case-study-hero__frame {
  cursor: pointer;
}

.case-study-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark bottom-gradient overlay — matches Figma's 34.2% → #000919 stop */
.case-study-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 9, 25, 0) 34.2%, #000919 100%);
  pointer-events: none;
  border-radius: inherit;
}

.case-study-hero__play {
  position: absolute;
  right: 4%;
  bottom: 6%;
  width: 80px;
  height: 80px;
  z-index: 2;
  pointer-events: none;
  transition: transform 0.25s ease;
}

/* Optional caption over the video thumbnail, bottom-left. Sits above the
   ::after gradient (z-index 1) and beside the play button (z-index 2). */
.case-study-hero__video-desc {
  position: absolute;
  left: 6%;
  right: 30%;
  bottom: 8%;
  z-index: 2;
  color: #fff;
  font-family: var(--font-family-sans);
  font-size: clamp(14px, 10px + 0.5vw, 18px);
  line-height: 1.4;
  pointer-events: none;
  white-space: pre-line;
}

.case-study-hero__frame:hover .case-study-hero__play,
.case-study-hero__frame:focus-visible .case-study-hero__play {
  transform: scale(1.05);
}

/* Deco ring clusters. Stacking mirrors Figma 1015:1295 DOM order:
   --tl and --tr sit BEHIND the image (z:1); --bl sits IN FRONT of the
   image (z:3), so its dots visibly overlay the bottom-left of the frame. */
.case-study-hero__deco {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.case-study-hero__deco--bl {
  left: 0;
  bottom: 6%;   /* 38 / 620 — Figma design offset, keeps ring above media bottom */
  width: 214px;
  height: 213px;
  z-index: 3;
}

.case-study-hero__deco--bl img {
  width: 100%;
  height: 100%;
  display: block;
  /* Large ring — CCW 24s, applied to the img so the visible circle
     spins around its own centre (the SVG's circle is centered in its
     215×215 viewBox, so rotating the box centre = rotating the
     circle centre). */
  animation: case-study-hero-spin-ccw 24s linear infinite;
  transform-origin: center;
}

/* Top-right large ring — mirror of --bl using the same SVG so the
   rotation looks visually identical (circle centred in a square box).
   Sits BEHIND the image (z:1) — the BL ring stays in front, so the
   composition has the front ring at bottom-left and the back ring at
   top-right for visual depth. */
.case-study-hero__deco--tr {
  top: 0;
  right: 0;
  width: 214px;
  height: 213px;
  z-index: 1;
}

.case-study-hero__deco--tr img {
  width: 100%;
  height: 100%;
  display: block;
  animation: case-study-hero-spin-ccw 24s linear infinite;
  transform-origin: center;
}

/* Top-right small dotted ring — mirror of --tl. Positioned near the
   top-right corner of the media area with the same offsets from the
   opposite edges as --tl uses. */
.case-study-hero__deco--tr-small {
  top: 0.9%;
  right: 20.2%;
  width: 141px;
  height: 146px;
  z-index: 1;
}

.case-study-hero__deco--tr-small img {
  width: 100%;
  height: 100%;
  display: block;
  animation: case-study-hero-spin 20s linear infinite;
  transform-origin: center;
}

/* Small dotted ring — bottom-left, offset from container left (~20%). Sits
   just above the container bottom and overlaps the big BL ring. Matches
   Figma 1015:1296 (141×146 at x=143, y=431 within a 707×582 media). */
.case-study-hero__deco--tl {
  top: auto;
  left: 20.2%;   /* 143 / 707 */
  bottom: 7%;    /* 43 / 620 — Figma design offset, sits above big BL ring */
  width: 141px;
  height: 146px;
  z-index: 1;
}

.case-study-hero__deco--tl img {
  width: 100%;
  height: 100%;
  display: block;
  /* Small ring — CW 20s (faster) to counter-rotate the large rings.
     Matches media-highlight-with-stats' small-ring cadence. */
  animation: case-study-hero-spin 20s linear infinite;
  transform-origin: center;
}

@keyframes case-study-hero-spin {
  to { transform: rotate(360deg); }
}

@keyframes case-study-hero-spin-ccw {
  to { transform: rotate(-360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .case-study-hero__deco--bl img,
  .case-study-hero__deco--tl img,
  .case-study-hero__deco--tr img,
  .case-study-hero__deco--tr-small img {
    animation: none;
  }
}

/* Reveal choreography — the two columns fade up in sequence when the hero
   is in view. Uses the global .reveal utility. */
.case-study-hero__content { --reveal-delay: 0s; }
.case-study-hero__media { --reveal-delay: 0.15s; }

/* ---------------------------------------------------------------
   Mobile / tablet — stack columns
   --------------------------------------------------------------- */
/* Breakpoint covers iPad Pro 12.9" landscape (1366) so all tablet widths
   get the stacked title → image → logos order. */
@media (max-width: 1400px) {
  .case-study-hero__layout {
    /* Switch grid → flex column so content's children can slot in around
       the media via display: contents + order below. */
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    align-items: start;
  }

  .case-study-hero--blog .case-study-hero__layout {
    align-items: start;
  }

  /* Flatten content AND heading-group so all leaf children (logos, title,
     sections, actions) become direct flex children of __layout. This lets
     the mobile order be: title → image → logos → context/overview → CTAs,
     which breaks the desktop logos-above-title stacking. */
  .case-study-hero__content,
  .case-study-hero__heading-group {
    display: contents;
  }

  .case-study-hero__title    { order: 1; }
  /* In-content byline + share (blog detail) stay adjacent to the title */
  .case-study-hero__content > .case-study-hero__byline { order: 1; }
  .case-study-hero__content > .case-study-hero__share  { order: 1; }
  .case-study-hero__media    { order: 2; }
  .case-study-hero__logos    { order: 3; }
  .case-study-hero__sections { order: 4; }
  .case-study-hero__actions  { order: 5; }

  .case-study-hero__media {
    aspect-ratio: 4 / 3;
    max-width: 100%;
  }

  .case-study-hero__frame {
    top: 24px;
    left: 24px;
    right: 24px;
    bottom: 60px;
  }

  .case-study-hero__deco--tr,
  .case-study-hero__deco--bl,
  .case-study-hero__deco--tl {
    display: none;
  }

  .case-study-hero__play {
    width: 56px;
    height: 56px;
  }
}

@media (max-width: 600px) {
  .case-study-hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4_5);
  }

  .case-study-hero__actions {
    gap: var(--space-4_5);
  }

  .case-study-hero__actions .btn {
    flex: 1 1 auto;
  }
}

/* On phone, push chips + share to the bottom so H1 and body copy read
   first (order 0 = breadcrumb / layout, order 1 = meta). Layout inner
   still has media { order: -1 }, so the sequence becomes:
   breadcrumb → media → content (logos, title, body, CTAs) → meta. */
@media (max-width: 768px) {
  .case-study-hero__meta {
    order: 1;
  }
}

/* Narrow phones — 158px logo cards + gap don't fit two-across cleanly.
   Switch to a 2×2 grid so the 4 client logos fill the row. */
@media (max-width: 380px) {
  .case-study-hero__logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .case-study-hero__logo {
    width: 100%;
  }
}

/* ---------------------------------------------------------------
   Wide-screen pass (≥1600px). Container widens via --container-max
   (in tokens.css). The hero image scales along with the grid, and
   the title grows to 72px.
   --------------------------------------------------------------- */
@media (min-width: 1600px) {
  .case-study-hero__title {
    font-size: clamp(60px, 38.667px + 1.333vw, 72px);
  }

  /* Wide-screen video sizing — the media box wraps the video frame PLUS
     the design's deco padding (49+41 horizontal / 43+127 vertical) so the
     corner ring decorations stay aligned to the frame corners.
       1600 viewport → frame 600×450 inside media 690×620
       2500 viewport → frame 800×650 inside media 890×820  (capped above)
     Frame stays inset by the base offsets (top:43, left:49, right:41,
     bottom:127) so no override is needed here. Right-aligned in the col. */
  .case-study-hero__media {
    width: clamp(690px, 334.444px + 22.222vw, 890px);
    height: clamp(620px, 264.444px + 22.222vw, 820px);
    max-width: none;
    aspect-ratio: auto;
    margin-left: auto;
    margin-right: 0;
  }
}