/* ============================================================
   CASE STUDY PAGE
   ============================================================ */


/* ============================================================
   CASE STUDY — HEADING + BODY (mobile-first)
   ============================================================ */

.cs-study {
  padding: 40px max(24px, calc((100% - 700px) / 2));
}

.cs-study__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Heading row: client name at all sizes.
   Project title only appears here at Desktop HD — hidden on mobile/desktop. */
.cs-study__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cs-study__client {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 4rem;        /* 64px — Display-L SemiBold */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 64;
  line-height: 1;
  margin-left: -4px;      /* optical alignment with metadata below */
  color: var(--color-text-primary);
}

/* Shared type style for both placements of the project title */
.cs-study__project-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;        /* 32px mobile — Display-S SemiBold; scales to 40px at Desktop */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
  line-height: 1.1;
  color: var(--color-text-primary);
}

/* In-heading version: hidden until Desktop HD */
.cs-study__project-title--hd {
  display: none;
}

/* In-body version: visible on mobile + desktop; hidden at Desktop HD */
.cs-study__project-title--body {
  display: block;
}

/* Body: stacked on mobile */
.cs-study__body {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* Left col (HD) / full-width: meta + impact */
.cs-study__summary {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Meta: Role, Services */
.cs-study__meta {
  display: flex;
  flex-direction: column;
  gap: 24px;             /* 24px mobile; 32px at Desktop */
}

.cs-study__caption {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cs-study__caption-label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;        /* 16px — Label-S Bold */
  line-height: 1.3;
  color: var(--color-text-primary);
}

.cs-study__caption-value {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem;        /* 16px — Label-S Regular */
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* Impact: single col on mobile */
.cs-study__impact {
  display: flex;
  flex-direction: column;
  gap: 24px;             /* 24px mobile; 32px at Desktop */
}

/* 4 figures: 2-col on mobile (ecosia) */
.cs-study__impact--desktop-4col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  gap: 24px;
}

/* 6 figures: 2-col on mobile (vam) */
.cs-study__impact--desktop-6col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 24px;
}

.cs-study__impact-figure {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-study__stat {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.5rem;      /* 40px mobile — Display-M SemiBold */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.cs-study__stat-caption {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem;        /* 16px — Label-S Regular */
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* Right col (HD) / full-width: project title + writeup */
.cs-study__paragraph {
  display: flex;
  flex-direction: column;
  gap: 32px;             /* 32px mobile; 40px at Desktop */
}

.cs-study__writeup {
  display: flex;
  flex-direction: column;
  gap: 40px;             /* 40px mobile; 48px at Desktop */
}

.cs-study__section {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cs-study__section-heading {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;      /* 32px — Display-S SemiBold */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.cs-study__body-copy {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;     /* 20px — Body-L */
  line-height: 1.3;
  color: var(--color-text-primary);
}

/* Collapsed extra paragraphs */
.cs-study__writeup-more {
  display: none;
  flex-direction: column;
  gap: 40px;             /* 40px mobile; 48px at Desktop */
}

.cs-study__writeup-more.is-visible {
  display: flex;
}

/* Continue reading / show less toggle */
.cs-study__read-more {
  display: inline-block;
  background-color: var(--color-bg-secondary);
  border: none;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem;         /* 16px — Label-S Regular */
  line-height: 1.3;
  color: var(--color-text-primary);
  white-space: nowrap;
  align-self: flex-start;
}


/* ============================================================
   CASE STUDY — IMAGES
   ============================================================ */

.cs-images {
  padding: 40px max(24px, calc((100% - 700px) / 2));
}

.cs-study:has(+ .cs-images) {
  padding-bottom: 0;
}

.cs-study + .cs-images {
  padding-top: 48px;
}

.cs-images:has(+ .cs-callout) {
  padding-bottom: 0;
}

.cs-images__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Portrait pair: stacked (1-per-row) on mobile */
.cs-images__pair {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.cs-images__placeholder {
  background-color: #D9D9D9;
  width: 100%;
}

.cs-images__placeholder--wide {
  aspect-ratio: 3 / 2;
}

/* Mobile: full-width portrait keeps its 3:4 ratio */
.cs-images__placeholder--tall {
  aspect-ratio: 3 / 4;
}

/* Actual media elements replacing placeholders */
.cs-images__full video,
.cs-images__full img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.cs-images__pair video,
.cs-images__pair img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}


/* ============================================================
   CASE STUDY — CALLOUT / QUOTE
   ============================================================ */

.cs-callout {
  padding: 48px max(24px, calc((100% - 700px) / 2));
}

.cs-callout__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;             /* 32px mobile; 48px at Desktop */
}

.cs-callout__quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 2rem;        /* 32px mobile; 40px Desktop; 64px Desktop HD */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
  line-height: 1.23;
  /* text-indent equals the glyph width of " in Fraunces Light at display sizes.
     Back-calculated from browser rendering: " ≈ 0.28em wide, so O lands flush
     with lines 2+. (-0.45em drifted right; -0.50em drifted left 14px → " ≈ 18px
     wide at 64px = 0.28em) */
  text-indent: -0.28em;
  color: var(--color-text-primary);
}

.cs-callout__quote--sm {
  font-size: 2rem;         /* 32px — Display-S Light */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
}

.cs-callout__attribution {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;         /* 16px — Label-S Bold */
  line-height: 1.3;
  color: var(--color-text-primary);
}


/* ============================================================
   CASE STUDY — MORE WORK
   ============================================================ */

.cs-more {
  background-color: var(--color-bg-secondary);
  padding: 48px max(24px, calc((100% - 700px) / 2));
}

.cs-more__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.cs-more__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;   /* 21px — Display-XS SemiBold */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 21;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.cs-more__row {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.cs-more__card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-decoration: none;
  color: inherit;
}

.cs-more__thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.cs-more__caption {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cs-more__client {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;   /* 21px — Display-XS SemiBold */
  font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 21;
  line-height: 1.1;
  color: var(--color-text-primary);
}

.cs-more__headline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1.25rem;     /* 20px — Body-L */
  line-height: 1.3;
  color: var(--color-text-primary);
}


/* ============================================================
   CASE STUDY — IMAGE CREDIT
   ============================================================ */

.cs-credit {
  padding: 0;
}

.cs-credit__text {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1rem;         /* 16px — Label-S Regular */
  line-height: 1.3;
  color: var(--color-text-primary);
}

.cs-credit__link {
  color: var(--color-text-primary);
}


/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* Desktop: 830px – 1023px
   Single column; impact numbers in 2-column grid; project title above writeup */
@media (min-width: 830px) {

  .cs-study {
    padding: 64px;
  }

  .cs-study__inner {
    gap: 48px;
  }

  .cs-study__client {
    font-size: 6rem;      /* 96px — Display-XL SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 96;
  }

  .cs-study__project-title {
    font-size: 2.5rem;    /* 40px — Display-M SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  }

  .cs-study__body {
    gap: 64px;             /* summary → paragraph section */
  }

  .cs-study__meta {
    gap: 24px;
  }

  .cs-study__summary {
    gap: 48px;
  }

  .cs-study__impact {
    gap: 32px;
  }

  .cs-study__stat {
    font-size: 4rem;      /* 64px — Display-L SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 96;
  }

  .cs-images {
    padding: 64px;
  }

  .cs-study:has(+ .cs-images) {
    padding-bottom: 0;
  }

  .cs-study + .cs-images {
    padding-top: 96px;
  }

  .cs-images:has(+ .cs-callout) {
    padding-bottom: 0;
  }

  /* Portrait pair: side by side at desktop */
  .cs-images__pair {
    flex-direction: row;
  }

  .cs-images__placeholder--tall {
    flex: 1;
    aspect-ratio: 3 / 4;
  }

  .cs-images__pair video,
  .cs-images__pair img {
    flex: 1;
    min-width: 0;
    width: auto;
  }

  .cs-study__impact-figure {
    gap: 16px;
  }

  .cs-study__paragraph {
    gap: 32px;
  }

  .cs-study__writeup,
  .cs-study__writeup-more {
    gap: 48px;
  }

  .cs-study__read-more {
    font-size: 1rem;      /* 16px — Label-S Regular */
    padding: 24px;
  }

  .cs-callout {
    padding: 96px 64px;
  }

  .cs-callout__inner {
    gap: 32px;
  }

  .cs-callout__quote {
    font-size: 2.5rem;    /* 40px — Display-M Light */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  }

  .cs-callout__quote--sm {
    font-size: 2.5rem;    /* 40px — Display-M Light */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 40;
  }

  .cs-callout__attribution {
    font-size: 1.125rem;  /* 18px — Label Bold */
  }

  .cs-more {
    padding: 96px 64px;
  }

  .cs-more__label {
    font-size: 2rem;      /* 32px — Display-S SemiBold */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 32;
  }

  .cs-more__row {
    flex-direction: row;
    gap: 24px;
  }

  .cs-more__card {
    flex: 1;
  }
}

/* Mobile only: paragraph first, summary hidden until expanded
   ============================================================ */
@media (max-width: 829px) {
  .cs-study__paragraph {
    order: 1;
  }

  .cs-study__summary {
    display: none;
    order: 2;
  }

  .cs-study__summary.is-visible {
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
}


/* Desktop HD: 1024px+
   2-col heading (client | project title); 2-col body (summary | paragraph) */
@media (min-width: 1024px) {

  /* Full-bleed sections, centred content */
  .cs-study,
  .cs-images,
  .cs-callout,
  .cs-more {
    padding-inline: max(64px, calc((100% - 1480px) / 2 + 64px));
  }

  /* Quote: Display-L at Desktop HD */
  .cs-callout__quote {
    font-size: 4rem;      /* 64px — Display-L Light */
    font-variation-settings: 'SOFT' 0, 'WONK' 1, 'opsz' 64;
  }

  /* Heading: client name + project title side by side, baseline-aligned */
  .cs-study__heading {
    flex-direction: row;
    align-items: flex-end;
    gap: 64px;
  }

  .cs-study__title {
    flex: 1;
  }

  /* Show project title in heading, hide it in body */
  .cs-study__project-title--hd {
    display: block;
    flex: 1;
  }

  .cs-study__project-title--body {
    display: none;
  }

  /* Body: 2 columns, top-aligned */
  .cs-study__body {
    flex-direction: row;
    align-items: flex-start;
    gap: 64px;
  }

  .cs-study__summary {
    flex: 1;
    gap: 48px;
  }

  /* Impact: back to single column in the left summary column */
  .cs-study__impact {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }

  /* 4 figures: restore 2-col grid at Desktop HD (ecosia) */
  .cs-study__impact--desktop-4col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 32px;
  }

  /* 6 figures: restore 2-col grid at Desktop HD (vam) */
  .cs-study__impact--desktop-6col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 32px;
  }

  .cs-study__paragraph {
    flex: 1;
  }
}

/* Desktop only: 830px – 1023px
   2-column meta (Role + Services) and 2-column impact grid */
@media (min-width: 830px) and (max-width: 1023px) {

  /* Role and Services side by side */
  .cs-study__meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 24px;
    column-gap: 24px;
  }

  /* 2 figures side by side (foe, ovo) */
  .cs-study__impact--desktop-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* 3 figures: first two left, third right (ecosia, hackaball) */
  .cs-study__impact--desktop-3col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .cs-study__impact--desktop-3col .cs-study__impact-figure:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .cs-study__impact--desktop-3col .cs-study__impact-figure:nth-child(2) {
    grid-column: 1;
    grid-row: 2;
  }

  .cs-study__impact--desktop-3col .cs-study__impact-figure:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  /* 4 figures: 2 left, 2 right (ecosia) */
  .cs-study__impact--desktop-4col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(2, auto);
    grid-auto-flow: column;
    gap: 32px;
  }

  /* 6 figures: 3 left, 3 right (vam) */
  .cs-study__impact--desktop-6col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    gap: 32px;
  }
}