/* ═══════════════════════════════════════════════════════════════════
   BRANDLINGS — CASE STUDY DESIGN SYSTEM
   css/case-study.css

   GRID
   ────
   Max width:   1160px centred
   Padding:     0 64px desktop / 0 32px tablet / 0 24px mobile
   Two-column:  240px label | 56px gap | 1fr content
   Tablet:      180px label | 32px gap | 1fr content
   Mobile:      single column — label stacks above content, smaller

   BREAKPOINTS
   ───────────
   --bp-lg:  1200px  (wide desktop)
   --bp-md:  1024px  (tablet landscape)
   --bp-sm:   768px  (tablet portrait / large mobile)
   --bp-xs:   480px  (mobile)

   TYPE SCALE
   ──────────
   display:      F37Atlantic 700, 48px / lh 1.0  (hero title)
   label:        F37Atlantic 700, 36px / lh 1.1  (section labels, left col)
   h2:           F37Atlantic 700, 28px / lh 1.2
   body-lg:      Nunito 400, 18px / lh 1.8       (lead/intro)
   body:         Nunito 400, 16px / lh 1.75
   caption:      Nunito 300, 13px / lh 1.6 / #888
   tag-label:    Nunito 700, 11px / uppercase / ls 0.1em / #aaa
   tag-value:    Nunito 400, 14px / #444

═══════════════════════════════════════════════════════════════════ */

/* ── Reset and base ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
html, body {
  font-family:'Nunito',sans-serif;
  background:#fff; color:#2a2a2a;
  overflow-x:hidden;
}
img { display:block; width:100%; height:auto; }

/* ── Custom properties ── */
:root {
  --max-w:      1160px;
  --pad-x:      64px;
  --label-w:    240px;
  --col-gap:    56px;
  --section-gap:88px;
  --img-gap:    20px;
  --radius:     16px;
  --nav-h:      68px;

  --c-dark:     #1a1a1a;
  --c-body:     #444;
  --c-muted:    #888;
  --c-line:     #e8e8e8;
  --c-tag:      #aaa;
}

/* ── Nav ── */
.cs-nav {
  position:fixed; top:0; left:0; right:0; height:var(--nav-h);
  display:flex; align-items:center; justify-content:center;
  background:#fff; z-index:100;
  border-bottom:1px solid transparent;
  transition:border-bottom-color 0.3s;
}
.cs-nav.scrolled { border-bottom-color:var(--c-line); }
.cs-nav-logo {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:1.2rem; letter-spacing:-0.02em; color:var(--c-dark);
  text-decoration:none;
}

/* ── Page shell ── */
.cs-page {
  max-width:var(--max-w);
  margin:0 auto;
  padding:calc(var(--nav-h) + 56px) var(--pad-x) 140px;
}

/* ── Floating back button ── */
.cs-back {
  position:fixed; bottom:32px; left:50%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:8px;
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:0.95rem; letter-spacing:-0.01em;
  color:var(--c-dark); text-decoration:none;
  background:#fff; border:1.5px solid #e0e0e0;
  border-radius:100px; padding:11px 22px;
  box-shadow:0 4px 20px rgba(0,0,0,0.10);
  transition:box-shadow 0.2s, border-color 0.2s;
  z-index:200; white-space:nowrap;
}
.cs-back:hover { box-shadow:0 6px 28px rgba(0,0,0,0.15); border-color:#bbb; }

/* ══════════════════════════════════════
   HERO / INTRO
══════════════════════════════════════ */

.cs-hero {
  display:grid;
  grid-template-columns:1fr auto;
  gap:32px;
  padding-bottom:64px;
  border-bottom:1px solid var(--c-line);
  margin-bottom:var(--section-gap);
}

.cs-hero-title {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:clamp(1.8rem, 4vw, 2.8rem); line-height:1.05;
  color:var(--c-dark); margin-bottom:16px;
}
.cs-hero-intro {
  font-size:1.05rem; line-height:1.75; color:var(--c-body); font-weight:300;
  max-width:560px;
}

/* Metadata block (top-right) */
.cs-meta {
  display:flex; flex-direction:column; gap:20px;
  min-width:160px; flex-shrink:0;
  padding-top:4px;
}
.cs-meta-item {}
.cs-meta-label {
  font-size:0.68rem; font-weight:700; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--c-tag);
  margin-bottom:4px;
}
.cs-meta-value {
  font-size:0.88rem; line-height:1.5; color:var(--c-body);
}

/* ══════════════════════════════════════
   TWO-COLUMN EDITORIAL GRID
   .cs-row = one editorial row
   .cs-label = left label column
   .cs-content = right content column
══════════════════════════════════════ */

.cs-row {
  display:grid;
  grid-template-columns:var(--label-w) 1fr;
  column-gap:var(--col-gap);
  margin-bottom:var(--section-gap);
  align-items:start;
}

.cs-label {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:clamp(1.5rem, 2.8vw, 2.25rem); line-height:1.1;
  color:var(--c-dark);
  /* Sticky so label stays visible while long content scrolls past */
  position:sticky; top:calc(var(--nav-h) + 24px);
}

.cs-content {}
.cs-content p {
  font-size:1rem; line-height:1.8; color:var(--c-body);
  font-weight:300; margin-bottom:16px;
}
.cs-content p:last-child { margin-bottom:0; }
.cs-content p strong { font-weight:700; color:var(--c-dark); }
.cs-content ul {
  padding-left:20px; margin-bottom:16px;
}
.cs-content ul li {
  font-size:1rem; line-height:1.8; color:var(--c-body);
  font-weight:300; margin-bottom:4px;
}

/* ══════════════════════════════════════
   FULL-WIDTH IMAGE BLOCK
   spans both columns — sits outside .cs-row
══════════════════════════════════════ */

.cs-img-block {
  margin-bottom:var(--section-gap);
}

/* Full-width single image */
.cs-img-full img, .cs-img-full video {
  width:100%; border-radius:var(--radius);
  object-fit:cover;
}

/* 2-col image grid */
.cs-img-2 {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--img-gap);
}
.cs-img-2 img, .cs-img-2 video {
  border-radius:var(--radius); object-fit:cover; height:100%;
}

/* 3-col image grid */
.cs-img-3 {
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:var(--img-gap);
}
.cs-img-3 img, .cs-img-3 video {
  border-radius:var(--radius); object-fit:cover; height:100%;
}

/* 2+1 mixed grid: wide left, two stacked right */
.cs-img-mixed {
  display:grid; grid-template-columns:1.6fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:var(--img-gap); height:480px;
}
.cs-img-mixed .cs-img-span {
  grid-row:1 / 3;
}
.cs-img-mixed img {
  border-radius:var(--radius); object-fit:cover;
  width:100%; height:100%;
}

/* Placeholder coloured image block (for layouts without real images) */
.cs-img-placeholder {
  border-radius:var(--radius);
  background:var(--cs-accent, #f0f0f0);
  aspect-ratio:16/9;
  display:flex; align-items:center; justify-content:center;
  color:rgba(0,0,0,0.2); font-family:'F37Atlantic',sans-serif;
  font-size:0.8rem; letter-spacing:0.08em; text-transform:uppercase;
}

/* Caption beneath image block */
.cs-caption {
  font-size:0.78rem; color:var(--c-muted); margin-top:10px;
  font-weight:300; line-height:1.5;
}

/* ══════════════════════════════════════
   HIGHLIGHT / PULL QUOTE
══════════════════════════════════════ */

.cs-pullquote {
  margin-bottom:var(--section-gap);
  padding:40px 48px;
  background:#f7f7f5;
  border-radius:var(--radius);
  border-left:4px solid var(--cs-accent, #2a2a2a);
}
.cs-pullquote p {
  font-family:'F37Atlantic',sans-serif; font-weight:400;
  font-size:clamp(1.2rem, 2.2vw, 1.6rem); line-height:1.45;
  color:var(--c-dark);
}

/* ══════════════════════════════════════
   COLOUR ACCENT TILES
   (like the Rhythm / Physical play tiles)
══════════════════════════════════════ */

.cs-tiles {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
  gap:var(--img-gap);
  margin-bottom:var(--section-gap);
}
.cs-tile {
  border-radius:var(--radius);
  padding:32px 24px;
  min-height:160px;
  display:flex; align-items:flex-end;
}
.cs-tile-label {
  font-family:'F37Atlantic',sans-serif; font-weight:700;
  font-size:1.4rem; line-height:1.15; color:#fff;
}
/* Dark text variant */
.cs-tile.dark .cs-tile-label { color:var(--c-dark); }

/* ══════════════════════════════════════
   DIVIDER
══════════════════════════════════════ */

.cs-divider {
  border:none; border-top:1px solid var(--c-line);
  margin:0 0 var(--section-gap);
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */

/* Tablet landscape */
@media(max-width:1024px){
  :root {
    --pad-x:    40px;
    --label-w:  180px;
    --col-gap:  36px;
    --section-gap:64px;
  }
  .cs-hero { grid-template-columns:1fr; }
  .cs-meta { flex-direction:row; flex-wrap:wrap; gap:24px 40px; }
}

/* Tablet portrait */
@media(max-width:768px){
  :root {
    --pad-x:    24px;
    --section-gap:52px;
  }
  .cs-row {
    grid-template-columns:1fr;
    row-gap:16px;
  }
  .cs-label {
    position:static;
    font-size:1.35rem;
  }
  .cs-img-2 { grid-template-columns:1fr; }
  .cs-img-3 { grid-template-columns:1fr 1fr; }
  .cs-img-mixed { grid-template-columns:1fr; height:auto; }
  .cs-img-mixed .cs-img-span { grid-row:auto; }
  .cs-pullquote { padding:28px 24px; }
}

/* Mobile */
@media(max-width:480px){
  .cs-img-3 { grid-template-columns:1fr; }
  .cs-tiles { grid-template-columns:1fr 1fr; }
  .cs-hero-title { font-size:1.6rem; }
  .cs-label { font-size:1.2rem; }
}