/* ==========================================================================
   CASE STUDY PAGES
   A sticky side menu on desktop, and a set of reusable blocks:
   hero, section statement, need pair, phase cards, method cards, insights,
   callout, numbered steps, figures, outcomes, and "more to explore".
   Everything reads from tokens.css.
   ========================================================================== */


/* ---------------NEW HERO -------------------*/

/* SPLIT HERO: the text panel stays in place while all the images scroll past on the right. */

.cs-hero__split .cs-back { display: inline-flex; margin-bottom: var(--space-5); }
.cs-hero__mid { margin-top: var(--space-7); }
.cs-hero__split .cs-hero__overview p { font-size: var(--step-0); }
.cs-hero__split .cs-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
  margin: var(--space-6) 0 0;
}
.cs-hero__split .cs-facts div:nth-child(3) { grid-column: 1 / -1; }
.cs-hero__split .cs-facts dd { margin: 0; font-size: var(--step-0); }
.cs-hero__bottom { margin-top: var(--space-6); }
.cs-hero__bottom .cs-notice { margin-top: 0; border-radius: var(--radius-m); }
.cs-hero__bottom .cs-scrollcue { margin-top: var(--space-4); }
.cs-hero__split .cs-hero__images { margin-top: var(--space-6); }

/* Desktop: two columns, sticky text panel */
@media (min-width: 1100px) {
  .cs-hero { padding-block: 0; }

  .cs-hero__split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);   /* text | images */
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }

  .cs-hero__panel {
    position: sticky;
    top: var(--header-h);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    padding-block: var(--space-6);
  }
  .cs-hero__split .cs-hero__title { max-width: none; font-size: var(--step-4); }
  .cs-hero__mid,
  .cs-hero__bottom { margin-top: 0; }
  .cs-hero__bottom { padding-top: var(--space-4); border-top: 1px solid var(--color-line); }

  .cs-hero__split .cs-hero__images {
    margin-top: 0;
    padding-block: var(--space-6);
    /* To let the images run to the right edge of the screen, add:
       margin-right: calc(-1 * var(--gutter)); */
  }
}




/* ---------- Hero ---------- */
.cs-hero { padding-block: var(--space-8) var(--space-7); }

.cs-back {
  display: none;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--color-muted);
  text-decoration: none;
}
.cs-back:hover { color: var(--color-accent); }

.cs-hero__name {
  margin-bottom: var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--color-accent);
}
.cs-hero__title { max-width: 22ch; font-size: var(--step-5); line-height: 1.04; }

.cs-hero__meta {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-line);
}
.cs-hero__overview { display: grid; gap: var(--space-4); align-content: start; }
.cs-hero__overview p { font-size: var(--step-1); line-height: 1.5; }
.cs-facts { margin: 0; }
.cs-facts dt { font-size: var(--step--1); color: var(--color-muted); }
.cs-facts dd { margin: 0 0 var(--space-5); font-size: var(--step-1); line-height: 1.35; }

.cs-notice {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: var(--step--1);
  color: var(--color-muted);
}
.cs-notice svg { width: 14px; height: 14px; flex: none; }

.cs-scrollcue {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
  font-size: var(--step--1);
  color: var(--color-muted);
}
.cs-scrollcue svg { width: 16px; height: 16px; }

.cs-hero__images { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.cs-hero__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

/* ---------- Page layout: side menu + content ---------- */
.cs-layout { display: block; }
.cs-rail { display: none; }

@media (min-width: 1100px) {
  .cs-layout {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }
  .cs-rail {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + var(--space-6));
    padding-top: var(--space-6);
  }
}
@media (max-width: 1099px) {
  .cs-back { display: inline-flex; }
  .cs-hero__meta { grid-template-columns: 1fr; gap: var(--space-6); }
}

.cs-rail ul { list-style: none; margin: var(--space-5) 0; padding: 0; }
.cs-rail a {
  display: block;
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid var(--color-line);
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--color-muted);
  text-decoration: none;
  transition: color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.cs-rail a:hover { color: var(--color-ink); }
.cs-rail a[aria-current="true"] { color: var(--color-ink); border-left-color: var(--color-accent); font-weight: 500; }
.cs-rail .cs-rail__edge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  font-weight: 500;
}
.cs-rail .cs-rail__edge:hover { color: var(--color-accent); }

/* ---------- Sections ---------- */
.cs-main > .cs-section { padding-block: clamp(3rem, 7vw, 6rem); scroll-margin-top: var(--header-h); }
.cs-main > .cs-section + .cs-section { border-top: 1px solid var(--color-line); }
.cs-main > .cs-section:first-child { padding-top: var(--space-6); }

.cs-label { margin-bottom: var(--space-4); font-size: var(--step--1); font-weight: 500; color: var(--color-muted); }
.cs-statement { max-width: 24ch; font-size: var(--step-4); font-weight: 500; line-height: 1.1; }
.cs-statement--wide { max-width: 30ch; }
.cs-lead { margin-top: var(--space-5); font-size: var(--step-1); line-height: 1.5; }
.cs-subhead { margin: var(--space-8) 0 var(--space-3); font-size: var(--step--1); font-weight: 500; color: var(--color-muted); }
.cs-h3 { max-width: 28ch; font-size: var(--step-3); font-weight: 500; line-height: 1.1; margin: var(--space-6) 0 var(--space-4); }
.cs-copy { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
.cs-copy p { font-size: var(--step-0); }
.cs-em { font-style: italic; }

/* ---------- Need pair ---------- */
.cs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-7); }
.cs-pair > div { padding-top: var(--space-4); border-top: 2px solid var(--color-accent); }
.cs-pair h3 { margin-bottom: var(--space-3); font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; letter-spacing: 0; }

/* ---------- Phase cards (side-scrolling) ---------- */
.cs-phases { margin-top: var(--space-7); }
.cs-phases__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.cs-phases__hint { font-size: var(--step--1); color: var(--color-muted); }
.cs-phases__nav { display: flex; gap: var(--space-2); }
.cs-phases__nav button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-line);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.cs-phases__nav button:hover:not(:disabled) { border-color: var(--color-accent); }
.cs-phases__nav button:disabled { opacity: 0.35; cursor: default; }
.cs-phases__nav svg { width: 18px; height: 18px; }

.cs-phases__track {
  display: flex;
  gap: var(--space-5);
  padding-bottom: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.cs-phase {
  flex: 0 0 min(22rem, 82%);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-m);
  background: var(--color-surface);
  scroll-snap-align: start;
}
.cs-phase__num { font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.cs-phase h3 { font-size: var(--step-2); font-weight: 500; line-height: 1.1; }
.cs-phase__time { font-size: var(--step--1); color: var(--color-accent); font-weight: 500; }
.cs-phase p { font-size: var(--step--1); line-height: 1.55; color: var(--color-muted); }
.cs-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: auto 0 0; padding: var(--space-3) 0 0; list-style: none; }
.cs-tags li { padding: 0.2rem 0.7rem; border: 1px solid var(--color-line); border-radius: 999px; font-size: 0.8rem; color: var(--color-muted); }

/* ---------- Method cards ---------- */
.cs-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-7); }
.cs-method { display: grid; gap: var(--space-4); align-content: start; }
.cs-method h3 { font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; letter-spacing: 0; }
.cs-method p { font-size: var(--step--1); line-height: 1.55; color: var(--color-muted); }
.cs-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--step--1); }

/* ---------- Insights ---------- */
.cs-insights { display: grid; gap: var(--space-8); margin-top: var(--space-7); }
.cs-insight { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-4); }
.cs-insight__num { font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--color-muted); padding-top: 0.6em; }
.cs-insight h3 { font-size: var(--step-3); font-weight: 500; line-height: 1.1; }
.cs-insight p { margin-top: var(--space-4); }
.cs-quote { margin: var(--space-5) 0 0; padding-left: var(--space-5); border-left: 2px solid var(--color-accent); }
.cs-quote p { margin: 0; font-family: var(--font-display); font-size: var(--step-1); line-height: 1.4; }
.cs-quote cite { display: block; margin-top: var(--space-3); font-size: var(--step--1); font-style: normal; color: var(--color-muted); }

/* ---------- Callout ---------- */
.cs-callout {
  margin-top: var(--space-6);
  padding: clamp(1.5rem, 4vw, 4rem);
  border-radius: var(--radius-l);
  background: var(--color-accent-soft);
}
.cs-callout p { max-width: 30ch; font-family: var(--font-display); font-size: var(--step-4); font-weight: 500; line-height: 1.12; letter-spacing: var(--track-display); }

/* ---------- Numbered steps ---------- */
.cs-steps { margin-top: var(--space-6); }
.cs-step { display: grid; gap: var(--space-5); padding-block: var(--space-6); border-top: 1px solid var(--color-line); }
.cs-step__head { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--space-4); }
.cs-step__num { font-size: var(--step--1); font-variant-numeric: tabular-nums; color: var(--color-muted); padding-top: 0.5em; }
.cs-step h4 { font-size: var(--step-2); font-weight: 500; line-height: 1.15; }
.cs-step p { max-width: var(--measure); margin-top: var(--space-3); }
.cs-step__media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.cs-step__media--single { grid-template-columns: 1fr; }

/* ---------- Figures and placeholders ---------- */
.cs-figure { margin: var(--space-6) 0 0; border-radius: var(--radius-m); overflow: hidden; }
.cs-figure img,
.cs-figure video {
  display: block;
  width: 100%;
  height: auto;
}
.cs-figure figcaption { padding-top: var(--space-3); font-size: var(--step--1); color: var(--color-muted); }
.cs-step__media .cs-figure,
.cs-methods .cs-figure,
.cs-hero__images .cs-figure,
.cs-hero__row .cs-figure { margin-top: 0; }

.cs-ph {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio, 4 / 3);
  padding: var(--space-4);
  text-align: center;
  font-size: var(--step--1);
  color: var(--color-muted);
}
.cs-r-wide { --ratio: 16 / 9; }
.cs-r-pano { --ratio: 21 / 9; }
.cs-r-tall { --ratio: 3 / 4; }
.cs-tone-1 { background: linear-gradient(135deg, var(--color-accent-soft), #bcd3c5); }
.cs-tone-2 { background: linear-gradient(135deg, #f6e3dd, #ecc0b4); }
.cs-tone-3 { background: linear-gradient(135deg, #e6ece8, #c9d4cd); }
.cs-tone-4 { background: linear-gradient(135deg, #f3ede2, #e0d3bd); }

/* ---------- Outcomes ---------- */
.cs-outcomes { counter-reset: outcome; list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.cs-outcomes li {
  counter-increment: outcome;
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.2;
}
.cs-outcomes li::before { content: counter(outcome, decimal-leading-zero); font-family: var(--font-body); font-size: var(--step--1); color: var(--color-muted); padding-top: 0.7em; }
/*.cs-outcomes li:last-child { border-bottom: 1px solid var(--color-line); }*/

/* ---------- More to explore ---------- */
.cs-more { border-top: 1px solid var(--color-line); }
.cs-more__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.cs-more__head h2 { font-size: var(--step-4); font-weight: 500; }
.cs-more__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.cs-card { display: grid; gap: var(--space-4); color: inherit; text-decoration: none; }
.cs-card:hover { text-decoration: none; }
.cs-card__title { font-family: var(--font-display); font-size: var(--step-3); font-weight: 500; line-height: 1.1; letter-spacing: var(--track-display); }
.cs-card p { font-size: var(--step-0); color: var(--color-muted); }
.cs-card .cs-figure { margin: 0; transition: transform var(--dur-base) var(--ease-out); }
.cs-card:hover .cs-figure { transform: translateY(-4px); }
.cs-card:hover .cs-card__title { color: var(--color-accent); }

/* ---------- Smaller screens ---------- */
@media (max-width: 1099px) {
  .cs-methods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 809px) {
  .cs-hero { padding-block: var(--space-7) var(--space-6); }
  .cs-pair,
  .cs-methods,
  .cs-more__grid,
  .cs-step__media { grid-template-columns: 1fr; }
  .cs-hero__row { grid-template-columns: 1fr; }
  .cs-insight,
  .cs-step__head,
  .cs-outcomes li { grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); }
  .cs-phases__hint { display: none; }
}


/* Lets images shrink to fit inside grid-based content blocks instead of overflowing */
.cs-copy,
.cs-step__head > div,
.cs-insight > div {
  min-width: 0;
}

/* ---------- Stat cards (e.g. Impact numbers, Evaluation findings) ---------- */
.cs-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.cs-stat {
  border-radius: var(--radius-l);
  background: var(--color-accent);
  color: var(--color-accent-ink);
  padding: var(--space-6);
  text-align: center;
  display: grid;
  gap: var(--space-2);
  align-content: center;
}
.cs-stat__num { font-family: var(--font-display); font-size: var(--step-5); font-weight: 600; line-height: 1; }
.cs-stat__caption { font-size: var(--step--1); line-height: 1.4; opacity: 0.92; }

@media (max-width: 809px) {
  .cs-stats { grid-template-columns: 1fr; }
}

/* Three images in a row inside a step (e.g. one mental model per user group) */



.cs-step__media--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;   /* lets each figure grow to match the tallest one in the row */
}
.cs-step__media--three .cs-figure {
  display: flex;
  flex-direction: column;
}
.cs-step__media--three .cs-figure img {
  flex: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;    /* keeps each card's own proportions, just scaled to fit */
}

@media (max-width: 809px) {
  .cs-step__media--three { grid-template-columns: 1fr; }
}

.cs-copy.cs-icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.cs-copy.cs-icon-list li img {
  flex: none;
  width: 48px;
  height: 48px;
  margin-top: 2px;
}

.cs-findings { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
.cs-finding {
  border: 1px solid var(--color-line);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  padding: var(--space-6);
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}
.cs-finding__image {
  margin: 0;
  border-radius: var(--radius-m);
  overflow: hidden;
}
.cs-finding__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs-finding__body { display: grid; gap: var(--space-4); align-content: start; }
.cs-finding__body h3 { font-family: var(--font-display); font-size: var(--step-1); font-weight: 600; }
.cs-finding__body > p { font-size: var(--step--1); color: var(--color-muted); margin: 0; }
.cs-finding__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-2); }
.cs-finding__col h4 { font-size: var(--step--1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 var(--space-3); }
.cs-finding__col h4 + h4 { margin-top: var(--space-5); }
.cs-finding__col ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--space-2); font-size: var(--step-0); }

@media (max-width: 809px) {
  .cs-finding { grid-template-columns: 1fr; }
  .cs-finding__cols { grid-template-columns: 1fr; }
}