/* ══════════════════════════════════════════
   CASE STUDY · Layout system
   Used on all /work/* pages.
══════════════════════════════════════════ */

.cs { padding-inline: var(--pad) }
.cs-section { padding-block: clamp(34px, 5vh, 64px) }
.cs-section.tight { padding-block: clamp(22px, 3vh, 40px) }

/* eyebrow label */
.cs-eyebrow {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: clamp(20px, 3vh, 34px);
  font-family: var(--mono);
  font-size: var(--ts-label-m-fs);
  letter-spacing: var(--ts-label-m-ls);
  color: var(--mute);
}
.cs-eyebrow::before { content: ""; width: 30px; height: 1px; background: var(--mute) }

/* ── Hero ── */
.cs-hero {
  height: auto;
  min-height: 0;
  padding-top: clamp(58px, 6.5vh, 88px);
  padding-bottom: 0;
  overflow: hidden;
}
.cs-hero .ttl {
  font-family: var(--display);
  font-weight: var(--disp-weight);
  text-transform: uppercase;
  /* Same Grotesk/weight/tracking as springsummer.dk — the divergence was colour +
     composition. Their display sits in warm red at ~75% width with deliberate right-side
     negative space, not edge-to-edge near-black. Pull the scale back from the full-bleed
     --ts-h1 so even the longest title (MOMENTOUS) leaves air, and colour it accent. */
  font-size: clamp(2.8rem, 9vw, 10.5rem);
  line-height: var(--ts-h1-lh);
  letter-spacing: var(--ts-h1-ls);
  color: var(--accent);
  max-width: 14ch;
}
.cs-hero-kicker {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 26px);
  margin-bottom: clamp(22px, 3.4vh, 42px);
}
.cs-hk-label {
  font-family: var(--mono);
  font-size: var(--ts-label-m-fs);
  letter-spacing: var(--ts-label-m-ls);
  text-transform: uppercase;
  color: var(--mute);
  white-space: nowrap;
}
.cs-hk-rule { flex: 1; height: 1px; background: var(--line) }

.cs-hero-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: start;
  margin-top: clamp(22px, 3.5vh, 44px);
}
.cs-hero-credits {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(22px, 3vw, 44px);
}
.cs-hero-credits .k {
  display: block;
  margin-bottom: 8px;
  color: var(--mute);
  font-family: var(--mono);
  font-size: var(--ts-label-m-fs);
  letter-spacing: var(--ts-label-m-ls);
  text-transform: uppercase;
}
.cs-hero-credits .v { font-size: clamp(11px, 0.7vw, 13px); line-height: 1.4; color: var(--cream) }
.cs-hero-label {
  font-family: var(--mono);
  font-size: var(--ts-label-m-fs);
  letter-spacing: var(--ts-label-m-ls);
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 14px;
}
.cs-hero-desc {
  font-size: var(--ts-body-menu-fs);
  line-height: var(--ts-body-menu-lh);
  letter-spacing: var(--ts-body-menu-ls);
  color: var(--cream);
  max-width: 34ch;
}

/* ── Media containers ── */
.cs-figure {
  position: relative;
  border-radius: var(--br);
  overflow: hidden;
}
.cs-figure.bleed { width: 100vw; margin-left: calc(50% - 50vw); border-radius: 0 }
.cs-figure.hero-contained { margin-inline: var(--pad); border-radius: 7px }
.cs-figure.hero-media .imgph { aspect-ratio: 16/9 }

.cs-cap {
  margin-top: 12px;
  padding-inline: var(--pad);
  font-family: var(--mono);
  font-size: var(--ts-label-s-fs);
  letter-spacing: var(--ts-label-s-ls);
  color: var(--mute);
}

.cs-figure .ghost,
.cs-work-grid .ghost { color: hsla(0 0% 100% / .32); font-size: clamp(1.3rem, 3vw, 2.4rem) }

.cs-media-box {
  width: 100%;
  background: var(--bg2);
  border-radius: inherit;
}
.cs-media-box > img,
.cs-media-box > video {
  width: 100%;
  height: auto;
  display: block;
}
.cs-figure.hero-portrait { display: flex; justify-content: center; margin-inline: 0 }
.cs-figure.hero-portrait .cs-media-box {
  width: auto;
  max-width: 100%;
  border-radius: 0;
}
.cs-work-grid .cs-media-box { aspect-ratio: 4/5 }
.cs-work-grid .cell.ar169 .cs-media-box { aspect-ratio: 16/9 }
.cs-work-grid .cell.ar916 .cs-media-box { aspect-ratio: 9/16 }

/* ── 12-column row system ── */
.cs-row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(14px, 1.6vw, 28px);
  row-gap: clamp(20px, 3vh, 38px);
}
.cs-row .meta-col { grid-column: 1 / span 3 }
.cs-row .body-col { grid-column: 5 / span 7 }
.cs-row .wide-col { grid-column: 1 / span 9 }

.cs-label {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--ts-label-m-fs);
  letter-spacing: var(--ts-label-m-ls);
  color: var(--mute);
  margin: 0 0 clamp(14px, 2vh, 20px);
}
.cs-meta-lines { font-size: var(--ts-body-s-fs); line-height: var(--ts-body-s-lh); color: var(--cream) }
.cs-lede {
  font-size: var(--ts-body-menu-fs);
  line-height: var(--ts-body-menu-lh);
  letter-spacing: var(--ts-body-menu-ls);
  color: var(--cream);
}
.cs-body { font-size: var(--ts-body-l-fs); line-height: var(--ts-body-l-lh); color: var(--dim) }
.cs-body p + p { margin-top: 1em }

/* role ownership list */
.cs-role-list {
  list-style: none;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 18px;
  row-gap: 14px;
  margin-top: 4px;
}
.cs-role-list li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 7em 1fr;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.cs-role-list .rk {
  font-family: var(--mono);
  font-size: var(--ts-label-s-fs);
  letter-spacing: var(--ts-label-s-ls);
  color: var(--mute);
  white-space: nowrap;
}
.cs-role-list .rv { font-size: var(--ts-body-l-fs); line-height: var(--ts-body-l-lh); color: var(--cream) }

/* big statement */
.cs-statement {
  font-family: var(--sans-serif);
  font-weight: 400;
  font-size: var(--ts-body-xl-fs);
  line-height: var(--ts-body-xl-lh);
  letter-spacing: var(--ts-body-xl-ls);
  color: var(--cream);
  max-width: 19ch;
}

/* work image grid */
.cs-work-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(14px, 1.6vw, 26px);
  margin-top: clamp(20px, 3vh, 34px);
}
.cs-work-grid .cell { grid-column: span 3 }
.cs-work-grid .cell.wide { grid-column: span 4 }
.cs-work-grid .cell.narrow { grid-column: span 2 }
.cs-work-grid .imgph { aspect-ratio: 4/5 }
.cs-work-grid .cell.wide .imgph { aspect-ratio: 4/3 }
.cs-work-grid .cell.full { grid-column: 1 / -1 }
.cs-work-grid .cell.full .cs-media-box { aspect-ratio: auto }
.cs-work-grid .cell.full .cs-media-box > img,
.cs-work-grid .cell.full .cs-media-box > video {
  position: static;
  width: 100%;
  height: auto;
}

/* impact metrics */
.cs-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 48px);
  margin-top: clamp(8px, 2vh, 20px);
}
.cs-metric .num {
  font-family: var(--display);
  font-weight: var(--disp-weight);
  text-transform: uppercase;
  font-size: var(--ts-number-fs);
  line-height: var(--ts-number-lh);
  letter-spacing: var(--ts-number-ls);
  color: var(--cream);
}
.cs-metric .lbl { margin-top: 10px; font-size: var(--ts-body-s-fs); line-height: var(--ts-body-s-lh); color: var(--dim); max-width: 26ch }
.cs-metric .lbl .src {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: var(--ts-labelsm-fs);
  color: var(--mute);
}

/* trusted logos strip */
.trusted-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(20px, 4vw, 56px);
}
.trusted-logos span {
  font-family: var(--font-disp);
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: hsla(var(--text-color) / .35);
  transition: color var(--dur-fast);
}
.trusted-logos span:hover { color: hsla(var(--text-color) / .7) }

/* next project link */
.cs-next { padding-block: clamp(28px, 4.5vh, 58px) }
.cs-next-link {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, 2.4vw, 42px);
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: clamp(26px, 4vh, 52px);
}
.cs-next-label {
  flex-basis: 100%;
  color: var(--mute);
  font-family: var(--mono);
  font-size: var(--ts-label-m-fs);
  letter-spacing: var(--ts-label-m-ls);
  text-transform: uppercase;
  margin-bottom: clamp(12px, 1.8vh, 22px);
}
.cs-next-title {
  font-family: var(--display);
  font-weight: var(--disp-weight);
  text-transform: uppercase;
  font-size: var(--ts-h2-fs);
  line-height: var(--ts-h2-lh);
  letter-spacing: var(--ts-h2-ls);
  color: var(--cream);
  transition: opacity .35s var(--easing);
}
.cs-next-arrow {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  line-height: .9;
  color: var(--cream);
  transition: transform var(--dur-normal) var(--easing);
}
@media (hover: hover) {
  .cs-next-link:hover .cs-next-title { opacity: .55 }
  .cs-next-link:hover .cs-next-arrow { transform: translateX(.28em) }
}

/* ══════════════════════════════════════════
   TEMPLATE SYSTEM · A / B / C
   Replaces cs-work-grid on all work pages.
══════════════════════════════════════════ */

/* Shared media cell */
.tpl-cell { position: relative; border-radius: 6px; overflow: hidden }

.tpl-media {
  width: 100%;
  border-radius: 0;
  background: transparent;
  aspect-ratio: unset !important;
}

.tpl-media > img,
.tpl-media > video {
  width: 100%;
  height: auto;
  display: block;
}

/* FPO overlay */
.tpl-fpo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}

.tpl-fpo-ar {
  font-family: var(--display);
  font-weight: var(--disp-weight);
  font-size: clamp(2.4rem, 5vw, 5.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: hsl(0 0% 18%);
}

.tpl-fpo-dims {
  font-family: var(--mono);
  font-size: var(--ts-label-s-fs);
  letter-spacing: var(--ts-label-s-ls);
  text-transform: uppercase;
  color: hsl(0 0% 24%);
}

.tpl-fpo-slot {
  position: absolute;
  bottom: 12px;
  left: 14px;
  font-family: var(--mono);
  font-size: var(--ts-label-s-fs);
  letter-spacing: var(--ts-label-s-ls);
  text-transform: uppercase;
  color: hsl(0 0% 22%);
}

.tpl-fpo-type {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--mono);
  font-size: var(--ts-label-s-fs);
  letter-spacing: var(--ts-label-s-ls);
  text-transform: uppercase;
  background: hsl(0 0% 13%);
  color: hsl(0 0% 36%);
  padding: 3px 7px;
  border-radius: 3px;
}

/* Template A, 3-column proof grid */
.cs-template-a {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 20px);
}

.cs-template-a .tpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  align-items: start;
}

/* Template B, 2×2 gallery */
.cs-template-b .tpl-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
}

/* Template C, cinematic alternating rows */
.cs-template-c {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 20px);
}

.cs-template-c .tpl-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  align-items: start;
}

.cs-template-c .tpl-row.rev { grid-template-columns: 1fr 2fr }

/* square edges on all imagery */
.cs-figure { border-radius: 0 }
.cs-figure.hero-contained { border-radius: 0 }
.cs-figure.hero-portrait .cs-media-box { border-radius: 0 }
.cs-media-box { border-radius: 0 }
.tpl-cell { border-radius: 0 }
.tpl-media { border-radius: 0 }

/* responsive */
@media (max-width: 880px) {
  .cs-hero-row { grid-template-columns: 1fr; gap: clamp(26px, 4vh, 40px) }
  .cs-row .meta-col,
  .cs-row .body-col,
  .cs-row .wide-col { grid-column: 1 / -1 }
  /* Hide scope/role meta labels on mobile — body col carries the section */
  .cs-section .cs-row .meta-col { display: none }
  .cs-row { row-gap: clamp(26px, 4vh, 44px) }
  .cs-work-grid { grid-template-columns: repeat(2, 1fr) }
  .cs-work-grid .cell,
  .cs-work-grid .cell.wide,
  .cs-work-grid .cell.narrow { grid-column: span 2 }
  .cs-metrics { grid-template-columns: 1fr; gap: 30px }
  .cs-role-list li { grid-template-columns: 1fr }
  /* Override inline grid styles on image templates for mobile */
  .cs-template-a .tpl-grid,
  .cs-template-b .tpl-grid { grid-template-columns: repeat(2, 1fr) !important }
  .cs-template-c .tpl-row,
  .cs-template-c .tpl-row.rev { grid-template-columns: 1fr }
}

/* Hero placeholder (FPO) — temporary, until real media is added */
.cs-media-box.is-fpo { background: hsl(0 0% 8%); }