/* ============================================================
   CASE STUDY PAGES — gold editorial system
   Pairs with portfolio.css (tokens, nav, footer, buttons, fonts).
   ============================================================ */

.cs-main { }

/* ── HERO ─────────────────────────────────────────────────── */
.cs-hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: var(--nav-h);
}
.cs-hero-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.cs-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top,
    rgba(10,10,10,0.90) 0%, rgba(10,10,10,0.55) 42%, rgba(10,10,10,0.30) 100%);
}
.cs-hero-inner {
  position: relative; z-index: 2; width: 100%;
  max-width: var(--max-w); margin-inline: auto;
  padding: 0 var(--gutter) clamp(2.5rem, 5vw, 4rem);
}
.cs-tagrow { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.25rem; }
.cs-pill {
  display: inline-block; padding: 0.32rem 0.85rem; border-radius: var(--radius-pill);
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  background: rgba(255,255,255,0.14); color: #fff; border: 1px solid rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.cs-title {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(38px, 6vw, 74px); line-height: 1.02; color: #fff;
  max-width: 17ch; margin-bottom: 1.25rem;
}
.cs-lede {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem); line-height: 1.55;
  color: rgba(255,255,255,0.86); max-width: 60ch; margin-bottom: 1.6rem;
}
.cs-scope {
  font-style: italic; font-size: 0.95rem; line-height: 1.55;
  color: rgba(255,255,255,0.78); max-width: 60ch;
  margin: -0.6rem 0 1.6rem;
  border-left: 2px solid var(--gold-mid, rgba(196,146,42,0.6));
  padding-left: 1rem;
}
.cs-scope strong { color: #fff; font-style: normal; font-weight: 600; }
.cs-meta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cs-meta-pill {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  padding: 0.45rem 0.95rem; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  font-size: 0.85rem; color: #fff;
}
.cs-meta-pill .lbl {
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-mid);
}

/* ── SECTIONS ─────────────────────────────────────────────── */
.cs-section { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.cs-section.alt { background: var(--gold-warm); }
.cs-section.surface { background: var(--surface); border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.cs-eyebrow {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.9rem;
}
.cs-h2 {
  font-family: var(--ff-display); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 46px); line-height: 1.08; color: var(--ink);
}
.cs-lead { margin-top: 1.1rem; font-size: 1.0625rem; line-height: 1.7; color: var(--ink-mid); max-width: 62ch; }
.cs-p { font-size: 1rem; line-height: 1.7; color: var(--ink-mid); margin-top: 1rem; }
.cs-p strong { color: var(--ink); font-weight: 600; }

.cs-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cs-split.text-lead { grid-template-columns: 0.92fr 1.08fr; }
.cs-split.media-lead { grid-template-columns: 1.08fr 0.92fr; }

.cs-figure { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: var(--gold-warm); }
.cs-figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-figure.tall { aspect-ratio: 4 / 5; }
.cs-figure.wide { aspect-ratio: 16 / 10; }
.cs-figure.square { aspect-ratio: 1 / 1; }

/* Inset note pair (used for insight call-outs) */
.cs-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.75rem; }
.cs-note { border-left: 2px solid var(--gold-mid); padding-left: 1.1rem; }
.cs-note h4 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.45rem; }
.cs-note p { font-size: 0.95rem; line-height: 1.55; color: var(--ink-mid); }

/* ── CARD GRID ────────────────────────────────────────────── */
.cs-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; }
.cs-cards.two  { grid-template-columns: repeat(2, 1fr); }
.cs-cards.four { grid-template-columns: repeat(4, 1fr); }
.cs-card {
  background: var(--surface); border: 1px solid var(--divider); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 1.75rem; transition: box-shadow .3s ease, transform .3s ease;
}
.cs-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); }
.cs-card-kicker { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); margin-bottom: 0.65rem; }
.cs-card h3 { font-family: var(--ff-display); font-weight: 700; font-size: 1.3rem; line-height: 1.15; color: var(--ink); margin-bottom: 0.5rem; }
.cs-card p { font-size: 0.92rem; line-height: 1.6; color: var(--ink-mid); }

/* ── IMPACT STATS ─────────────────────────────────────────── */
.cs-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.25rem; margin-top: 2.5rem; }
.cs-stat-num { font-family: var(--ff-display); font-weight: 700; font-size: clamp(40px, 5vw, 62px); line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.cs-stat-num .suffix { color: var(--gold); }
.cs-stat-label { margin-top: 0.5rem; font-size: 0.96rem; line-height: 1.45; color: var(--ink-mid); }

/* ── VIDEO (16:9) ─────────────────────────────────────────── */
.cs-video { position: relative; padding-top: 56.25%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: #000; margin-top: 1.5rem; }
.cs-video iframe, .cs-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cs-video-cap { margin-top: 0.75rem; font-size: 0.85rem; color: var(--ink-mid); }

/* ── PULL QUOTE ───────────────────────────────────────────── */
.cs-quote { max-width: 820px; margin: 0 auto; text-align: center; }
.cs-quote blockquote { font-family: var(--ff-display); font-style: italic; font-weight: 700; font-size: clamp(22px, 3vw, 34px); line-height: 1.3; color: var(--ink); }
.cs-quote cite { display: block; margin-top: 1.25rem; font-style: normal; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-dark); }

/* ── PAGER (back / next) ──────────────────────────────────── */
.cs-pager { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; max-width: var(--max-w); margin-inline: auto; padding: 2.5rem var(--gutter); border-top: 1px solid var(--divider); }
.cs-pager a { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; font-weight: 500; color: var(--ink-mid); transition: gap .2s ease, color .2s ease; }
.cs-pager a:hover { color: var(--gold); gap: 0.7rem; }
.cs-pager .next { color: var(--gold-dark); }

@media (max-width: 860px) {
  .cs-split, .cs-split.text-lead, .cs-split.media-lead { grid-template-columns: 1fr; gap: 2rem; }
  .cs-cards, .cs-cards.two, .cs-cards.four { grid-template-columns: 1fr; }
  .cs-notes { grid-template-columns: 1fr; gap: 1.1rem; }
  .cs-stats { grid-template-columns: 1fr; gap: 1.6rem; }
  .cs-hero { min-height: 70vh; }
}
@media (min-width: 861px) and (max-width: 1024px) {
  .cs-cards.four { grid-template-columns: repeat(2, 1fr); }
}

/* Click-to-watch video frame (for clips whose owner has disabled inline embedding) */
.cs-video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.cs-video-link { display: block; cursor: pointer; }
.cs-video-link::after { content: ''; position: absolute; inset: 0; background: rgba(10, 10, 10, 0.16); transition: background 0.25s ease; z-index: 1; }
.cs-video-link:hover::after { background: rgba(10, 10, 10, 0.05); }
.cs-video-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2;
  width: 70px; height: 50px; border-radius: 13px; background: rgba(196, 146, 42, 0.95);
  display: grid; place-items: center; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s ease, background 0.2s ease;
}
.cs-video-play::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 15px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
.cs-video-link:hover .cs-video-play { transform: translate(-50%, -50%) scale(1.08); background: var(--gold); }


/* ═══════════════════════════════════════════════════════
   .cs-figure — wide image that renders at natural aspect ratio.
   Use instead of .cs-video when the asset is a still image whose
   shape shouldn't be forced into 16:9. Same rounded-corner +
   shadow treatment so it sits visually with other case-study cards.
   ═══════════════════════════════════════════════════════ */
.cs-figure {
  margin-top: 1.5rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface);
}
.cs-figure img {
  display: block;
  width: 100%;
  height: auto;
}


/* ═══════════════════════════════════════════════════════
   .cs-showcase — visual showcase block for case studies that have
   substantive output to display (video, device mockups, campaign
   creatives). Used on NTUC.
   ═══════════════════════════════════════════════════════ */
.cs-showcase { margin: 2.5rem 0 0; display: flex; flex-direction: column; gap: 2.5rem; }

/* Device mockups — a frame PNG on top, a GIF or image positioned within
   the screen area underneath. Pure CSS, no JS. */
.cs-devices { display: grid; grid-template-columns: 2.2fr 1fr; gap: 2.5rem; align-items: center; }
@media (max-width: 768px) { .cs-devices { grid-template-columns: 1fr; gap: 2rem; } }
.cs-device { position: relative; display: block; width: 100%; }
.cs-device .cs-device-frame { display: block; width: 100%; height: auto; position: relative; z-index: 2; pointer-events: none; }
.cs-device .cs-device-screen { position: absolute; z-index: 1; overflow: hidden; }
.cs-device .cs-device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Laptop frame — measured screen area is top 2%, side 10%, bottom 8.7% */
.cs-device--laptop .cs-device-screen {
  top: 2%; left: 10%; right: 10%; bottom: 8.7%;
  border-radius: 6px;
}

/* Mobile frame — measured screen area is top 3%, side 5%, bottom 3%,
   with rounded screen corners */
.cs-device--mobile .cs-device-screen {
  top: 3%; left: 5%; right: 5%; bottom: 3%;
  border-radius: 9%;
}

/* Pair of campaign creatives side-by-side. The left banner is held narrower
   so the wider three-panel set on the right shows in full, uncropped. Natural
   aspect ratios (no forced crop), centred against each other. */
.cs-creatives { display: grid; grid-template-columns: 0.65fr 1fr; gap: 1.5rem; align-items: center; }
@media (max-width: 768px) { .cs-creatives { grid-template-columns: 1fr; } }
.cs-creatives img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
}

/* HTML5 video wrapper, 16:9 */
.cs-video-native { position: relative; padding-top: 56.25%; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); background: #000; }
.cs-video-native video { position: absolute; inset: 0; width: 100%; height: 100%; }