/* =========================================================
   CASE STUDY — SHARED HERO ENGINE
   Canonical hero + meta strip + featured media for detail pages.
   Meta strip pattern mirrors logo library entry heroes.
   ========================================================= */

.section-shell.case-hero {
  min-height: auto;
  justify-content: flex-start;

  padding-top: clamp(var(--space-12), 17vw, 14.5rem);
  padding-bottom: clamp(var(--space-9), 12vw, var(--space-10));
}

.case-hero-layout {
  position: relative;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.case-hero-copy {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}

.section--hero.case-hero .section-kicker {
  margin-bottom: var(--space-8);
  text-align: center;

  text-decoration: none;
  transition: background-color var(--transition-base);
}

.section--hero.case-hero .section-kicker:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .section--hero.case-hero .section-kicker:hover {
    background: var(--border-soft-color);
  }
}

.section--hero.case-hero .section-title {
  max-width: 22ch;
  margin-inline: auto;

  font-size: clamp(var(--text-3xl), 4vw, 4.25rem);
  line-height: var(--leading-heading);
  text-align: center;
}

.section--hero.case-hero .section-lead {
  max-width: 56ch;
  margin-top: var(--space-4);
  margin-inline: auto;
  text-align: center;

  font-size: clamp(var(--text-base), 1.1vw, var(--text-lg));
}

@media (max-width: 980px) {
  .section--hero.case-hero .section-lead {
    font-size: var(--text-base);
  }
}

.case-hero-supplement {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  text-align: center;
}

.case-hero-supplement > *:first-child {
  margin-top: var(--space-6);
}

.case-hero-supplement > * + * {
  margin-top: var(--space-4);
}

/* =========================================================
   META STRIP — logo library pattern
   ========================================================= */

.case-meta,
.case-meta-strip {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-7);
  row-gap: 0;

  width: auto;
  max-width: 100%;
  margin-top: 0;
  margin-inline: auto;
  padding-top: calc(clamp(var(--space-5), 3vw, var(--space-7)) + var(--space-8));
}

.case-meta > .case-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(var(--space-2-5));
  animation: caseMetaFadeUp 879ms cubic-bezier(.16, 1, .3, 1) forwards;
}

.case-meta > .case-meta-item:nth-child(1) { animation-delay: 135ms; }
.case-meta > .case-meta-item:nth-child(2) { animation-delay: 254ms; }
.case-meta > .case-meta-item:nth-child(3) { animation-delay: 372ms; }
.case-meta > .case-meta-item:nth-child(4) { animation-delay: 490ms; }
.case-meta > .case-meta-item:nth-child(5) { animation-delay: 608ms; }

.case-meta > .case-meta-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  min-height: calc(var(--space-8) * 0.5);
  margin-bottom: 0;
  padding: 0 var(--space-3);

  border-radius: var(--radius-pill);
  background: var(--border-soft-color);

  font-size: var(--text-xs);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  font-weight: var(--weight-medium);

  color: var(--text-secondary);
  opacity: 1;

  transition:
    background-color 1200ms cubic-bezier(.16, 1, .3, 1),
    color 1200ms cubic-bezier(.16, 1, .3, 1);
}

.case-meta > .case-meta-item strong {
  display: inline-block;

  font-size: var(--text-base);
  line-height: var(--leading-snug);
  font-weight: var(--weight-regular);

  /* Same rest colour as the logo-library meta strip, so links sit at the
     strip's own tone and brighten to --text-primary on hover. */
  color: var(--text-secondary);
  opacity: 0.7;
}

.case-meta > .case-meta-item strong a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;

  transition: opacity var(--transition-base);
}

/* Mobile-only duplicate, rendered after the hero image (see .case-visual-section
   below). Hidden everywhere else; the ≤760 block further down swaps
   visibility with the hero-embedded original so it never shows twice.
   Compound selector (0,2,0) so it reliably beats the bare `.case-meta { display }`
   rules in other breakpoint blocks, regardless of source order. */
.case-meta.case-meta-strip--mobile-dup {
  display: none;
}

.case-meta > .case-meta-item strong a:focus-visible {
  opacity: var(--opacity-interactive-subtle);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Hover = colour only, matching the logo-library meta strip's
   .library-entry-meta-filter-link: the value brightens from the strip's
   secondary tone to full strength, no underline. focus-visible above keeps
   the underline as the keyboard affordance — same split as logo-entry.css. */
@media (hover: hover) and (pointer: fine) {
  .case-meta > .case-meta-item strong a:hover {
    color: var(--text-primary);
    opacity: 1;
    text-decoration: none;
  }

  html.theme-on-light .section--hero.case-hero .case-meta > .case-meta-item strong a:hover {
    color: var(--text-primary);
  }

  html.theme-on-dark .section--hero.case-hero .case-meta > .case-meta-item strong a:hover,
  html.theme-on-dark .case-visual-section.section-shell[data-theme="dark"] .case-meta-strip--mobile-dup > .case-meta-item strong a:hover {
    color: var(--text-inverse);
  }
}

@keyframes caseMetaFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-meta > .case-meta-item {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Tablet + desktop — inline label | value with vertical rules
   (matches the logo library meta strip pattern). Mobile (≤760) keeps its
   own stacked layout further down, untouched. */
@media (min-width: 761px) {
  .case-meta > .case-meta-item {
    gap: var(--space-2);
  }

  .case-meta > .case-meta-item span {
    min-height: auto;
    padding: 0;
    gap: var(--space-2);

    border-radius: 0;
    background: transparent;

    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-body);
    text-transform: none;
    font-weight: var(--weight-regular);

    color: var(--text-secondary);
  }

  .case-meta > .case-meta-item span::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 1.5px;
    height: 1em;
    margin-inline: 0;
    background: var(--divider-subtle-light);
    opacity: 1;
  }

  .case-meta > .case-meta-item strong {
    font-size: var(--text-sm);
    opacity: 1;
  }

  html.theme-on-dark .section--hero.case-hero .case-meta > .case-meta-item span,
  html.theme-on-light .section--hero.case-hero .case-meta > .case-meta-item span {
    background: transparent;
  }

  html.theme-on-dark .section--hero.case-hero .case-meta > .case-meta-item span {
    color: var(--text-inverse-muted);
  }

  html.theme-on-light .section--hero.case-hero .case-meta > .case-meta-item span {
    color: var(--text-secondary);
  }

  /* Dark keeps --text-inverse: logo-entry.css authors --text-inverse-strong
     here, but theme-transition.css outranks it there and renders pure white,
     so white is what actually matches the library on screen. */
  html.theme-on-dark .section--hero.case-hero .case-meta > .case-meta-item strong {
    color: var(--text-inverse);
    opacity: 1;
  }

  html.theme-on-light .section--hero.case-hero .case-meta > .case-meta-item strong {
    color: var(--text-secondary);
    opacity: 1;
  }

  html.theme-on-dark .section--hero.case-hero .case-meta > .case-meta-item span::after {
    background: var(--divider-subtle-dark);
  }

  html.theme-on-light .section--hero.case-hero .case-meta > .case-meta-item span::after {
    background: var(--divider-subtle-light);
  }
}

/* =========================================================
   FEATURED IMAGE
   ========================================================= */

.case-visual-section {
  padding-top: clamp(var(--space-6), 3.5vw, var(--space-8));
  padding-bottom: clamp(var(--space-9), 8vw, var(--space-10));
}

.case-visual-section .section-inner {
  max-width: var(--container-lg);
}

.case-image {
  position: relative;
  overflow: hidden;

  width: 100%;
  max-width: 1080px;

  margin-inline: auto;

  border-radius: var(--radius-lg);

  transform-origin: 50% 35%;
  transition: transform var(--transition-slow);
}

.case-image img {
  display: block;

  width: 100%;
  aspect-ratio: 16 / 10;

  object-fit: cover;
}

.case-image.case-image--16-9 img {
  aspect-ratio: 16 / 9;
  height: auto;
}

.case-image.case-image--16-10 img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: unset;
}

.case-image--native img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: unset;
}

.case-study-featured-video {
  display: block;

  width: 100%;
  aspect-ratio: 16 / 10;

  object-fit: cover;
}

.case-visual-section.is-expanded .case-image {
  transform: scale(1.10);
}

@media (min-width: 1440px) {
  .case-visual-section.is-expanded .case-image {
    transform: scale(1.16);
  }
}

@media (min-width: 1600px) {
  .case-image {
    max-width: var(--container-lg);
  }

  .case-visual-section.is-expanded .case-image {
    transform: scale(1.12);
  }
}

/* =========================================================
   DETAIL PAGE UTILITIES
   ========================================================= */

/* Mobile bottom nav — logo-library inline-nav pattern (≤760) */
.case-study-nav {
  display: flex;
  min-height: auto;
  justify-content: flex-start;
  margin-top: 0;
  padding-block: var(--space-6) var(--space-9);
}

.case-study-nav__shell {
  width: 100%;
  max-width: 1020px;
}

.case-study-nav .library-entry-inline-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  width: 100%;
}

.case-study-skeleton-note {
  margin-top: 0;
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.case-study-logo-link {
  margin-top: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 761px) and (max-width: 1199px) {
  .section-shell.case-hero {
    overflow: hidden;
    padding-top: clamp(calc(var(--space-9) * 1.1), 10vw, var(--space-12));
    padding-bottom: clamp(var(--space-7), 6vw, var(--space-9));
  }

  .section--hero.case-hero .section-title {
    max-width: 20ch;
  }

  .section--hero.case-hero .section-lead {
    max-width: 48ch;
  }

  /* Match the kicker → h1 gap (space-8) for lead → meta strip. */
  .case-meta {
    padding-top: var(--space-8);
  }

  /* Hero image only (the visual section immediately after the hero — not
     the closing visual further down the page), across all tablet widths,
     regardless of per-page aspect-ratio modifier (--16-9, --16-10, --native). */
  .section--hero.case-hero + .case-visual-section .case-image img,
  .section--hero.case-hero + .case-visual-section .case-study-featured-video {
    aspect-ratio: 16 / 10;
  }
}

/* Tablet portrait only (matches logo-library's own 761–820 tablet-portrait
   range) — the inline nowrap meta strip doesn't have room for a Website
   entry alongside Client/Sector/Engagement below 820px; drop it to its own row. */
@media (min-width: 761px) and (max-width: 820px) {
  .case-meta {
    flex-wrap: wrap;
    row-gap: var(--space-3);
  }

  .case-meta-item--website {
    flex-basis: 100%;
    justify-content: center;
  }
}

/* Tablet 768–1024 — identical to the logo library entry meta strip:
   equal-width columns, label + divider line on top, value below.
   Copied from logo-entry.css's own 761–980 tablet block (case-hero is
   always data-theme="light", so no html.theme-on-dark toggle needed here). */
@media (min-width: 768px) and (max-width: 1024px) {
  .case-meta {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-5);
    row-gap: var(--space-4);
    width: 100%;
    /* Match the kicker → h1 gap (space-8) for lead → meta strip. */
    padding-top: var(--space-8);
  }

  .case-meta > .case-meta-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .case-meta > .case-meta-item span {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: var(--space-2);

    min-height: auto;
    padding: 0;

    border-radius: 0;
    background: transparent;

    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-body);
    text-transform: none;
    font-weight: var(--weight-regular);

    color: var(--text-secondary);
    opacity: 1;
  }

  .case-meta > .case-meta-item span::after {
    content: "";
    display: block;
    width: 100%;
    height: 1.5px;
    background: var(--divider-subtle-light);
    opacity: 1;
  }

  .case-meta > .case-meta-item strong {
    display: block;
    width: 100%;

    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    font-weight: var(--weight-medium);
    text-align: left;

    opacity: 1;
  }

  .case-meta > .case-meta-item strong a {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 760px) {
  .section-shell.case-hero {
    overflow: hidden;
    padding-top: clamp(var(--space-9), 24vw, var(--space-10));
    padding-bottom: var(--space-7);
  }

  .case-hero-copy,
  .case-hero-supplement {
    text-align: left;
    margin-inline: 0;
  }

  .section--hero.case-hero .section-kicker {
    text-align: left;
    /* 3 tokens less than the base space-8 (8 → 7 → 6 → 5). */
    margin-bottom: var(--space-5);
    /* 1 step below the base's own -0.0625rem optical tuning. */
    font-size: calc(var(--text-xs) - 0.125rem);
  }

  .section--hero.case-hero .section-title {
    max-width: 18ch;
    margin-inline: 0;
    text-align: left;
  }

  /* Hero image only (the visual section immediately after the hero — not
     the closing visual further down the page). */
  .section--hero.case-hero + .case-visual-section .case-image img,
  .section--hero.case-hero + .case-visual-section .case-study-featured-video {
    aspect-ratio: 1 / 1;
  }

  .section--hero.case-hero + .case-visual-section {
    /* 5 tokens less than the base's clamp floor (space-6 → 5 → 4 → 3 → 2 → 1)
       above the hero image. */
    padding-top: var(--space-1);
    /* 3 tokens less than the base's clamp floor (space-9 → 8 → 7 → 6)
       below the meta strip, now rendered at the bottom of this section. */
    padding-bottom: var(--space-6);
  }

  .section--hero.case-hero .section-lead {
    max-width: 40ch;
    margin-inline: 0;
    text-align: left;
  }

  /* Meta strip — desktop label|value, stacked rows (no pills) */
  .case-meta {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    column-gap: 0;
    row-gap: var(--space-4);
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    padding-top: clamp(var(--space-6), 5vw, var(--space-8));
    overflow: visible;
  }

  .case-meta > .case-meta-item {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex: 0 0 auto;
    width: 100%;
    justify-content: flex-start;
    gap: var(--space-2);
    white-space: normal;
  }

  .case-meta > .case-meta-item span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    width: auto;
    min-height: auto;
    padding: 0;

    border-radius: 0;
    background: transparent;

    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-body);
    text-transform: none;
    font-weight: var(--weight-regular);

    color: var(--text-secondary);
  }

  .case-meta > .case-meta-item span::after {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 1.5px;
    height: 1em;
    margin-inline: 0;
    background: var(--divider-subtle-light);
    opacity: 1;
  }

  .case-meta > .case-meta-item strong {
    display: inline;
    width: auto;
    font-size: var(--text-sm);
    text-align: left;
    color: var(--text-secondary-strong);
    opacity: 1;

    transition: color 1200ms cubic-bezier(.16, 1, .3, 1);
  }

  .case-meta > .case-meta-item strong a {
    white-space: normal;
  }

  html.theme-on-dark .section--hero.case-hero .case-meta > .case-meta-item span,
  html.theme-on-light .section--hero.case-hero .case-meta > .case-meta-item span {
    background: transparent;
  }

  html.theme-on-dark .section--hero.case-hero .case-meta > .case-meta-item span {
    color: var(--text-inverse-muted);
  }

  html.theme-on-light .section--hero.case-hero .case-meta > .case-meta-item span {
    color: var(--text-secondary);
  }

  html.theme-on-dark .section--hero.case-hero .case-meta > .case-meta-item strong {
    color: var(--text-inverse);
    opacity: 1;
  }

  html.theme-on-dark .section--hero.case-hero .case-meta > .case-meta-item span::after {
    background: var(--divider-subtle-dark);
  }

  html.theme-on-light .section--hero.case-hero .case-meta > .case-meta-item span::after {
    background: var(--divider-subtle-light);
  }

  /* Move the meta strip below the hero image: hide the hero-embedded
     original, show the duplicate rendered inside .case-visual-section.
     Target the base .case-meta class — skeleton/draft pages omit the
     .case-meta-strip modifier that published pages carry. */
  .case-hero-layout > .case-meta {
    display: none;
  }

  .case-meta.case-meta-strip--mobile-dup {
    display: flex;
    padding-top: 0;
    margin-top: clamp(var(--space-6), 5vw, var(--space-8));
  }

  /* .case-visual-section carries data-theme="dark", but the scroll-driven
     theme-transition system can keep html.theme-on-light active while the hero
     tail clears — see theme-transition.js getLightEntryHeroOverride(). Beat
     theme-transition.css's ≤980 pill overrides (same pattern as logo-entry.css
     .section--library-entry-hero meta strip). */
  html.theme-on-dark .case-visual-section.section-shell[data-theme="dark"] .case-meta-strip--mobile-dup > .case-meta-item span,
  html.theme-on-light .case-visual-section.section-shell[data-theme="dark"] .case-meta-strip--mobile-dup > .case-meta-item span {
    border-radius: 0;
    background: transparent;
  }

  html.theme-on-light .case-visual-section.section-shell[data-theme="dark"] .case-meta-strip--mobile-dup > .case-meta-item span {
    color: var(--text-secondary);
  }

  html.theme-on-dark .case-visual-section.section-shell[data-theme="dark"] .case-meta-strip--mobile-dup > .case-meta-item span {
    color: var(--text-inverse-muted);
  }

  html.theme-on-light .case-visual-section.section-shell[data-theme="dark"] .case-meta-strip--mobile-dup > .case-meta-item strong {
    color: var(--text-secondary-strong);
  }

  html.theme-on-dark .case-visual-section.section-shell[data-theme="dark"] .case-meta-strip--mobile-dup > .case-meta-item strong {
    color: var(--text-inverse);
  }

  html.theme-on-light .case-visual-section.section-shell[data-theme="dark"] .case-meta-strip--mobile-dup > .case-meta-item span::after {
    background: var(--divider-subtle-light);
  }

  html.theme-on-dark .case-visual-section.section-shell[data-theme="dark"] .case-meta-strip--mobile-dup > .case-meta-item span::after {
    background: var(--divider-subtle-dark);
  }
}

@media (min-width: 1200px) and (max-height: 760px) {
  .section-shell.case-hero {
    padding-bottom: var(--space-8);
  }
}

/* =========================================================
   CASE STUDY — HERO SIDE NAV (logo-library pattern)
   Prev = older year · Next = newer year
   ========================================================= */

.section--hero.case-hero {
  position: relative;
  /* Inline-size container so side-nav gutters can use 100cqw (= layout width, not 100vw). */
  container-type: inline-size;
}

.section--hero.case-hero .library-entry-side-nav {
  display: none;
}

/* Side arrows on all tablet+ breakpoints (≥761).
   Hide bottom prev/next strip while hero side nav is visible. */
@media (min-width: 761px) {
  .section--hero.case-hero {
    overflow: visible;
  }

  .section--hero.case-hero .library-entry-side-nav {
    display: block;
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
    z-index: 3;
  }

  /* :not(.is-disabled) so the shared disabled rule keeps its pointer-events:
     none — the first/last arrow is a dead <span>, so hover-expand on it is
     noise. It stays pointer-events: none via the nav wrapper above. */
  .section--hero.case-hero .library-entry-side-nav__button:not(.is-disabled) {
    pointer-events: auto;
  }

  .case-study-nav {
    display: none;
  }
}

/* Below 981px, .case-hero-layout (max-width 1080) leaves little to no real
   gutter outside the content column — the equal-gutter formula below only
   holds at the width logo-library itself uses it at. Keep a fixed
   flush-to-edge inset here so the arrows never crowd past the viewport edge. */
@media (min-width: 761px) and (max-width: 980px) {
  .section--hero.case-hero .library-entry-side-nav__button--prev {
    left: 0;
    right: auto;
  }

  .section--hero.case-hero .library-entry-side-nav__button--next {
    right: 0;
    left: auto;
  }
}

/* Equal gutters: edge — gap — arrow — gap — content.
   100cqw = section content-box; add inline padding to get border-box width.
   Matches logo-library's own formula, at the same width it applies at. */
@media (min-width: 981px) {
  .section--hero.case-hero .section-title {
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-heading);
  }

  .section--hero.case-hero .library-entry-side-nav__button--prev {
    left: auto;
    right: calc(
      100% + max(
        0px,
        (100cqw + 2 * var(--section-padding-x) - 100%) / 4 - (var(--space-10-0) / 2)
      )
    );
  }

  .section--hero.case-hero .library-entry-side-nav__button--next {
    right: auto;
    left: calc(
      100% + max(
        0px,
        (100cqw + 2 * var(--section-padding-x) - 100%) / 4 - (var(--space-10-0) / 2)
      )
    );
  }
}

/* Mobile: nav moves into the hero, row-aligned with the kicker instead of
   the bottom .case-study-nav strip — kicker left column, circular icon-only
   arrows (same look as tablet/desktop, no hover-expand on touch) flush right. */
@media (max-width: 760px) {
  .section--hero.case-hero .library-entry-side-nav {
    display: flex;
    align-items: center;
    position: absolute;
    inset: auto;
    top: 0;
    right: 0;

    width: auto;
    height: auto;
    gap: var(--space-4);

    pointer-events: auto;
  }

  /* Shrink the circle to the kicker's own rendered height (space-7-0 = 28px,
     matching this breakpoint's kicker padding + line-height) and scale the
     arrow glyph down by the same ratio (28 / 40 = 0.7). */
  .section--hero.case-hero .library-entry-side-nav__button {
    position: static;
    pointer-events: auto;

    width: var(--space-7-0);
    height: var(--space-7-0);
  }

  .section--hero.case-hero .library-entry-side-nav__arrow {
    font-size: calc(var(--text-lg) * 0.7);
  }

  .case-study-nav {
    display: none;
  }
}