/* ============================================================
   case-template-v2.css
   - Wide but shallow hero
   - Consistent content rhythm
   - Summary cards
   - Clean production blocks
   - FORCED hero brand logo sizing (Option #1 fix)
   ============================================================ */

/* ----------------------------
   Tokens
   ---------------------------- */
:root{
  --case-max: var(--page-max, 1200px);
  --case-pad: var(--page-pad, clamp(16px, 4vw, 48px));
  --case-gap: clamp(18px, 2.6vw, 28px);

  --case-ink: var(--color-primary, #022351);
  --case-text: var(--color-text, #0f172a);
  --case-rule: var(--rule, #eaeaea);

  --case-soft: #f7f7f7;
  --case-card: #ffffff;

  --case-radius: 14px;
  --case-shadow: 0 1px 3px rgba(0,0,0,.08);

  --hero-min: 220px;
  --hero-max: 420px;
  --hero-vh: 36vh;

  --brand-logo-h: 34px;
}

/* ------------------------------------------------
   Global case rhythm
   ------------------------------------------------ */
.case.case-v2{
  background: #fff;
}

.case.case-v2 .case-band__inner{
  max-width: var(--case-max);
  margin: 0 auto;
  padding-left: var(--case-pad);
  padding-right: var(--case-pad);
}

/* ------------------------------------------------
   HERO
   ------------------------------------------------ */
.case-hero-v2{
  position: relative;
  width: 100%;
  background: #fff;
}

.case-hero-v2__media{
  position: relative;
  width: 100%;
  height: clamp(var(--hero-min), var(--hero-vh), var(--hero-max));
  overflow: hidden;
  border-bottom: 1px solid var(--case-rule);
}

.case-hero-v2__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Overlay gradient */
.case-hero-v2__media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(to top,
      rgba(0,0,0,.56) 0%,
      rgba(0,0,0,.34) 35%,
      rgba(0,0,0,.10) 70%,
      rgba(0,0,0,0) 100%);
  pointer-events:none;
}

/* Overlay container */
.case-hero-v2__overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:flex-end;
  pointer-events:none;
}

.case-hero-v2__inner{
  width:100%;
  max-width:var(--case-max);
  margin:0 auto;
  padding-left:var(--case-pad);
  padding-right:var(--case-pad);
  padding-bottom:clamp(18px,3vw,34px);
  pointer-events:auto;
}

/* ------------------------------------------------
   BRAND LOCKUP (FORCED SIZE FIX)
   ------------------------------------------------ */
.case-hero-v2__brand{
  display:inline-flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
  max-width:100%;
  flex-wrap:wrap;
}

/* HARD override for any global img rules */
.case-hero-v2__brand img{
  height: var(--brand-logo-h);
  width: auto !important;
  max-width: 220px;
  max-height: none !important;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.20));
}

/* ------------------------------------------------
   Headline
   ------------------------------------------------ */
.case-hero-v2__h{
  margin:0;
  color:#fff;
  letter-spacing:-0.02em;
  line-height:1.02;
  font-family:var(--font-family-heading,'Barlow',system-ui,sans-serif);
  font-weight:800;
  font-size:clamp(2rem,2.8vw,3.1rem);
  text-shadow:0 2px 16px rgba(0,0,0,.45);
}

.case-hero-v2__sub{
  margin:10px 0 0;
  max-width:62ch;
  color:rgba(255,255,255,.92);
  font-family:var(--font-family-base,'Barlow',system-ui,sans-serif);
  font-size:clamp(1rem,0.35vw + 0.95rem,1.15rem);
  line-height:1.5;
  text-shadow:0 2px 12px rgba(0,0,0,.42);
}

/* Chips */
.case-hero-v2__chips{
  margin:14px 0 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:8px 10px;
}

.case-hero-v2__chips li{
  color:rgba(255,255,255,.92);
  background:rgba(15,23,42,.28);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(6px);
  padding:6px 10px;
  border-radius:999px;
  font-weight:700;
  font-size:.85rem;
}

/* ------------------------------------------------
   Summary Cards
   ------------------------------------------------ */
.case-cards-3{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--case-gap);
  padding:clamp(28px,4.2vw,56px) 0;
}

@media (min-width:900px){
  .case-cards-3{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.case-card{
  background:#fff;
  border:1px solid rgba(2,35,81,.10);
  border-radius:var(--case-radius);
  box-shadow:var(--case-shadow);
  padding:clamp(18px,2.4vw,26px);
}

.case-card p{
  margin:0;
  line-height:1.6;
}

/* ------------------------------------------------
   Prose
   ------------------------------------------------ */
.case-prose{
  max-width:72ch;
  font-size:clamp(1.02rem,0.35vw + 0.98rem,1.16rem);
  line-height:1.75;
  padding:clamp(18px,2.6vw,30px) 0;
}

/* ------------------------------------------------
   Steps Grid
   ------------------------------------------------ */
.case-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--case-gap);
  padding:clamp(22px,3.2vw,44px) 0 clamp(36px,5vw,64px);
}

@media (min-width:700px){
  .case-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (min-width:980px){
  .case-steps{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

.case-step{
  background:#fff;
  border:1px solid rgba(2,35,81,.10);
  border-radius:var(--case-radius);
  padding:clamp(18px,2.4vw,26px);
}

/* ------------------------------------------------
   By the Numbers
   ------------------------------------------------ */
.case-band--numbers{
  padding-top:clamp(56px,6vw,88px);
  padding-bottom:clamp(56px,6vw,88px);
}

/* ------------------------------------------------
   Mobile
   ------------------------------------------------ */
@media (max-width:640px){
  :root{
    --hero-vh:34vh;
    --brand-logo-h:28px;
  }

  .case-hero-v2__h{
    font-size:clamp(1.8rem,6.4vw,2.3rem);
  }
}

/* ------------------------------------------------
   Full Showcase Band
   ------------------------------------------------ */

.case-band--showcase{
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 88px);
}

.case-showcase{
  margin-top: clamp(24px, 3vw, 40px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 30px rgba(0,0,0,.08);
}

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

/* ============================================================
   Case Nav (V2)
   Clean, mobile-first, premium motion
   ============================================================ */

.case-nav{
  border-top: 1px solid rgba(2,35,81,.08);
  background: #fafafa;
}

.case-nav__inner{
  max-width: var(--case-max, 1200px);
  margin: 0 auto;
  padding: 18px var(--case-pad, clamp(16px, 4vw, 48px)) 22px;
}

.case-nav__top{
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}

.case-nav__progress{
  font-family: var(--font-family-base, system-ui, sans-serif);
  font-size: .9rem;
  opacity: .72;
}

/* 3-up row on desktop */
.case-nav__row{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}

.case-nav__slot{
  min-width: 0;
}

.case-nav__slot--prev{
  justify-self: start;
}

.case-nav__slot--all{
  justify-self: center;
}

.case-nav__slot--next{
  justify-self: end;
  text-align: right;
}

.case-nav__link{
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: var(--case-ink, #022351);
  border-radius: 12px;
  padding: 12px 14px;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.case-nav__link:focus-visible{
  outline: 3px solid rgba(2,35,81,.25);
  outline-offset: 2px;
}

.case-nav__link:hover{
  background: rgba(2,35,81,.04);
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.case-nav__kicker{
  font-family: var(--font-family-base, system-ui, sans-serif);
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  opacity: .65;
}

.case-nav__title{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-family-heading, system-ui, sans-serif);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: 1.02rem;
  line-height: 1.15;
}

.case-nav__meta{
  font-family: var(--font-family-base, system-ui, sans-serif);
  font-size: .92rem;
  opacity: .72;
}

/* All work button */
.case-nav__link--all{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  border: 1px solid rgba(2,35,81,.14);
  background: #fff;
  padding: 10px 14px;
  min-width: 110px;
}

.case-nav__link--all:hover{
  background: #fff;
  transform: translateY(-1px);
}

/* Subtle directional motion */
.case-nav__link--prev:hover{
  transform: translateX(-4px);
}

.case-nav__link--next:hover{
  transform: translateX(4px);
}

/* Disabled */
.case-nav__link--disabled{
  opacity: .45;
  background: transparent;
  box-shadow: none;
  border: 1px dashed rgba(2,35,81,.20);
}

/* Mobile: stack */
@media (max-width: 720px){
  .case-nav__row{
    grid-template-columns: 1fr;
    text-align: center;
  }

  .case-nav__slot--prev,
  .case-nav__slot--next{
    justify-self: center;
    text-align: center;
  }

  .case-nav__link{
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    align-items: center;
  }

  .case-nav__title{
    justify-content: center;
  }

  .case-nav__link--prev:hover,
  .case-nav__link--next:hover{
    transform: translateY(-2px);
  }
}

/* ============================================================
   Test & Learn media tuning (media-card version)
   4:3 crop + per-card focal adjustments
   ============================================================ */

/* Lock 4:3 ratio */
.media-grid .media-card__media{
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

/* Default image behavior */
.media-grid .media-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Test 01 – move down slightly to show full quote */
.media-grid .media-card:nth-child(1) .media-card__media img{
  object-position: center 20%;
}

/* Test 03 – move down slightly to show full question */
.media-grid .media-card:nth-child(3) .media-card__media img{
  object-position: center 4%;
}

.case--zpsquad .case-hero-v2__media img {
  object-position: center 32%;
}