/* ==========================================================================
   Case study redesign — DRAFT
   Loaded only by pendula-draft.html, on top of site.css, so the live case
   studies keep their current look until this is approved.
   ========================================================================== */

/* --- Type scale ----------------------------------------------------------
   Sizes sit on h1–h6 so the Figma names map straight onto tags. Choose the tag
   by meaning — one h1 per page — and use .as-hN where body copy needs a
   heading's size (the intro is a paragraph, not a heading).
   ------------------------------------------------------------------------ */
/* Span (normal width), Thin only so far. Licensed from Klim like the rest —
   .woff2 only, never the desktop files. */
@font-face { font-family: 'Span'; src: url('../fonts/Span-Thin.woff2') format('woff2');       font-weight: 100; font-display: swap; }
@font-face { font-family: 'Span'; src: url('../fonts/Span-ThinItalic.woff2') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; }

/* Span Compressed Thin Italic — the redesign's title cut. The other Compressed
   weights are registered in site.css. */
@font-face { font-family: 'Span Compressed'; src: url('../fonts/SpanCompressed-ThinItalic.woff2') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; }

.case-v2 { --span: 'Span', 'Span Compressed', serif; }

.case-v2 h1, .case-v2 h2, .case-v2 h3,
.case-v2 h4, .case-v2 h5, .case-v2 h6 { margin: 0; font-weight: 300; }

.case-v2 h1, .case-v2 .as-h1 { font-family: var(--span); font-weight: 100; font-size: 72px; line-height: 1.05; }
.case-v2 h2, .case-v2 .as-h2 { font-family: var(--span); font-weight: 100; font-size: 48px; line-height: 1.1; }
/* Title: Span Compressed Thin Italic. Only Light Italic (300) is in the
   project, so weight 100 renders as Light until a Thin Italic file is added,
   at which point it takes over on its own. */
.case-v2 h3, .case-v2 .as-h3 { font-family: var(--serif); font-weight: 100; font-style: italic; font-size: 36px; line-height: 1.15; }
.case-v2 h4, .case-v2 .as-h4 { font-family: var(--span); font-weight: 100; font-size: 24px; line-height: 1.35; }
.case-v2 h5, .case-v2 .as-h5 { font-family: var(--sans);  font-weight: 300; font-size: 19px; line-height: 1.5; }

/* H6 — the roles list and the problem / solution labels. Black and light now,
   not orange and semibold. */
.case-v2 h6, .case-v2 .as-h6 {
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.15;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* Body copy */
.case-v2 p { font-family: var(--sans); font-weight: 300; font-size: 16px; line-height: 1.45; color: var(--ink); margin: 0; }

/* Stat figures sit a step above the title — 48px, same Thin Italic cut. */
.case-v2 .case2__figure {
  font-family: var(--span);
  font-weight: 100;
  font-style: italic;
  font-size: 48px;
  line-height: 1.1;
  /* even-width digits, so the counter animation doesn't jitter the layout */
  font-variant-numeric: tabular-nums;
}

/* --- The 12 column grid --------------------------------------------------
   Every section shares one grid, so everything lines up on the same columns:
     1–3   title and roles
     4–12  images
     4–10  all text, including the quote (7 columns)
   ------------------------------------------------------------------------ */
.case-v2 .case2,
.case-v2 .case-media,
.case-v2 .case-quote {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.case-v2 .case2 { padding-top: 96px; }

.case-v2 .case2__side { grid-column: 1 / 4; }
.case-v2 .case2__hero { grid-column: 4 / 13; }

.case-v2 .case2__intro,
.case-v2 .case2__brief,
.case-v2 .case2__rule,
.case-v2 .case2__stats { grid-column: 4 / 11; }

/* hairline between the problem / solution pair and the stats, 48px clear
   above and below */
.case-v2 .case2__rule {
  border: 0;
  height: 1px;
  background: var(--rule);
  width: 100%;
  margin: 48px 0 0;
}

/* images run to the right edge of the grid — any direct child of a media
   section, whether that's a stack, a grid, a bare image or a rounded wrapper */
.case-v2 .case-media > * { grid-column: 4 / 13; }

/* the quote sits on the text columns, mark hanging into the gap on its left */
.case-v2 .case-quote blockquote { grid-column: 4 / 11; padding-left: 0; }

.case-v2 .case2__roles { font-size: 14px; }

/* THE PROBLEM / THE SOLUTION — same 14px as the roles, one step heavier
   (Regular rather than Light) so they still read as labels */
.case-v2 .case2__brief h6 { font-size: 14px; font-weight: 400; }

.case2__roles {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.case2__hero {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
}

/* Animated covers are anchored to the bottom (data-lottie-fit="slice-bottom")
   and then allowed to run this far past the bottom edge, so the artwork sits
   just above centre — enough to clear text at its foot without dropping the
   whole frame. Raise to crop more off the bottom, lower to show more of it. */
.case-v2 .case2__hero .lottie {
  --hero-bleed: 5%;
  position: absolute;
  inset: 0 0 calc(-1 * var(--hero-bleed)) 0;
  height: auto;
}

.case2__hero video,
.case2__hero img,
.case2__hero .lottie {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Jessie's Notes awards box sits on the text columns under the intro, and is
   as wide as it: same font as .case2__intro so 60ch measures the same width
   (.award-box sets its own font back) */
.case-v2 .case2__award {
  grid-column: 4 / 11;
  margin-top: 48px;
  max-width: 60ch;
  font-family: var(--span);
  font-weight: 100;
  font-size: 24px;
}

/* .case-v2 prefix so this beats the `.case-v2 p { margin: 0 }` reset above */
.case-v2 .case2__intro { margin-top: 48px; max-width: 60ch; }

/* --- Problem / solution and stats ---------------------------------------- */
.case2__brief,
.case2__stats {
  margin-top: 48px;
  display: grid;
  gap: 24px;
}

.case2__brief { grid-template-columns: 1fr 1fr; }
/* the last image sits twice the footer's own padding above the rule, so the
   line doesn't crowd the artwork */
.case-v2 main > .case-media:last-child { padding-bottom: 56px; }

/* 48px from the last stat line down to the first image */
.case2__stats { grid-template-columns: repeat(3, 1fr); padding-bottom: 48px; }

/* Stat labels sit in a much narrower column than the problem / solution text,
   so the same 1.45 leading reads loose — tightened to 1.3. */
.case-v2 .case2__stats p { line-height: 1.3; }

/* 16px under each label and each stat figure */
.case2__brief h6,
.case2__stats .case2__figure { margin-bottom: 16px; }

/* --- Testimonial ---------------------------------------------------------
   Intro size, italic, with the opening quote mark hanging outside the text. */
.case-v2 .case-quote__text {
  font-family: var(--span);
  font-weight: 100;
  font-style: italic;
  font-size: 24px;
  line-height: 1.35;
  color: var(--ink);
}

.case-v2 .case-quote__cite { font-family: var(--sans); color: var(--ink-60); }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  /* the 12 columns collapse to one; everything spans the full width */
  .case-v2 .case2,
  .case-v2 .case-media,
  .case-v2 .case-quote { grid-template-columns: minmax(0, 1fr); }

  .case-v2 .case2__side,
  .case-v2 .case2__hero,
  .case-v2 .case2__intro,
  .case-v2 .case2__award,
  .case-v2 .case2__brief,
  .case-v2 .case2__rule,
  .case-v2 .case2__stats,
  .case-v2 .case-media > *,
  .case-v2 .case-quote blockquote { grid-column: 1 / -1; }

  /* No row gap: each block carries its own margin, so the two don't stack —
     that was giving 80px between everything. Desktop's 48px becomes 32px,
     24px becomes 16px. */
  .case2 {
    row-gap: 0;
    column-gap: 0;
    padding-top: 48px;
  }

  .case-v2 .case2__hero { margin-top: 32px; }

  .case-v2 .case2__intro,
  .case-v2 .case2__award,
  .case-v2 .case2__brief,
  .case-v2 .case2__rule,
  .case-v2 .case2__stats { margin-top: 32px; }

  .case-v2 .case2__brief { gap: 24px; }
  .case-v2 .case2__stats { gap: 24px 16px; padding-bottom: 32px; }
  .case-v2 main > .case-media:last-child { padding-bottom: 40px; }

  /* one column on phones: at 16px "CREATIVE DIRECTION" is 186px wide, so two
     columns need 396px and don't fit even a 430px phone */

  .case-v2 .as-h3, .case-v2 h3 { font-size: 30px; }
  .case-v2 .case2__figure { font-size: 40px; }
  .case-v2 .as-h4, .case-v2 h4, .case-v2 .case-quote__text,
  .case-v2 .case2__award { font-size: 20px; }

  .case2__brief { grid-template-columns: 1fr; gap: 32px; }
  .case2__stats { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}