/* ==========================================================================
   case-study.css — Fluid Engine grid system for case study pages
   Loaded alongside style.css. Do not duplicate nav/footer/header rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Color tokens (legacy case-study scoped — kept stable for existing rules)
   -------------------------------------------------------------------------- */
:root {
  /* Remapped onto the V2 system (style.css :root) so case-study pages inherit
     the warm-paper canvas in light mode and the warm near-black canvas in dark,
     rather than the old cool-navy trial palette. --cs-navy stays a fixed blue:
     the .cs-section--navy phase banners pair it with hardcoded light text, so
     it must read as a distinct dark band in both modes. */
  --cs-cream: var(--bg);
  --cs-white: var(--surface);
  --cs-navy: #1A1815;   /* warm ink-dark, aligned with --fx-navy */
  --cs-pink: var(--surface-sunken);
  --cs-text-dark: var(--ink);
  --cs-text-light: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
body {
  background: var(--cs-cream);
  color: var(--cs-text-dark);
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  color: var(--cs-text-dark);
}

h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  color: var(--cs-text-dark);
}

h1 { font-size: var(--t-h1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--t-h2); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
h3 { font-size: var(--t-h3); line-height: var(--leading-snug); letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--t-h4); line-height: var(--leading-snug); }

.cs-body,
p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.8;
}

.cs-small,
.cs-caption { font-size: var(--t-body-lg); line-height: 1.6; }

/* Accordion summary text follows body-text rhythm — and ALWAYS reads in
   navy on the white accordion card, even when the card sits inside a
   navy section. */
.cs-container .accordion summary,
.cs-section .accordion summary {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-body-lg);
  line-height: 1.6;
  color: var(--cs-text-dark);
}
.cs-section--navy .accordion summary,
.cs-section--navy .accordion summary::after,
.cs-section--navy .accordion .accordion-content,
.cs-section--navy .accordion .accordion-content * {
  color: var(--cs-text-dark);
}

/* Body-text consistency — all paragraphs inside a .cs-container default to
   the 22.4px body size unless they explicitly opt into .cs-caption or
   .cs-display. Keeps reading rhythm consistent across the case studies. */
.cs-container p:not(.cs-caption):not(.cs-display) {
  font-size: var(--t-body-lg);
  line-height: 1.8;
}

em, i { font-family: var(--font-heading); font-style: italic; }

/* --------------------------------------------------------------------------
   Section backgrounds (Fluid Engine "section" wrapper)
   -------------------------------------------------------------------------- */
.cs-section { padding: 0; margin: 0; position: relative; }
.cs-section--white { background: var(--cs-white); color: var(--cs-text-dark); }
.cs-section--navy  { background: var(--cs-navy);  color: var(--cs-text-light); }
.cs-section--cream { background: var(--cs-cream); color: var(--cs-text-dark); }
.cs-section--pink  { background: var(--cs-pink);  color: var(--cs-text-dark); }

/* Section that uses an image as full-bleed background (e.g. hero phone montage).
   Applied via inline style: <section class="cs-section cs-section--bg-image" style="background-image: url(...);"> */
.cs-section--bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 70vh;
  padding-top: 96px; /* clear the fixed/absolute .site-header */
}
.cs-section--bg-image .cs-grid { min-height: calc(70vh - 96px); }

/* Give the site-header a subtle backdrop when sitting over a case study so the
   nav links stay legible against the hero phone-montage background. */
body:has(.cs-section--bg-image) .site-header {
  background: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.6) 70%, rgba(255,255,255,0) 100%);
  backdrop-filter: blur(6px);
}

.cs-section--navy h1,
.cs-section--navy h2,
.cs-section--navy h3,
.cs-section--navy h4 {
  color: var(--cs-text-light);
}

/* --------------------------------------------------------------------------
   Fluid Engine grid
   - 26 columns total: 1 outer gutter + 24 content + 1 outer gutter
   - Rows are a fixed 30px so block heights can be authored as row spans
   -------------------------------------------------------------------------- */
.cs-grid {
  display: grid;
  grid-template-columns: 169.625px repeat(24, 1fr) 169.625px;
  grid-auto-rows: minmax(30px, auto);
  max-width: 1486px;
  margin: 0 auto;
  padding: 32px 0;
  position: relative;
}

/* Section height modifiers */
.cs-grid--small  { padding: 48px 0; }
.cs-grid--medium { padding: 96px 0; }
.cs-grid--custom { padding: 32px 0; }

/* --------------------------------------------------------------------------
   Blocks — positioned per-instance via inline grid-column / grid-row
   -------------------------------------------------------------------------- */
.cs-block {
  position: relative;
  min-width: 0;
  overflow: visible;
}

.cs-block img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.cs-block ol,
.cs-block ul,
.cs-container ol,
.cs-container ul {
  padding-left: 1.25em;
  margin: 0.5em 0;
}
.cs-block ol,
.cs-container ol { list-style: decimal; }
.cs-block ul,
.cs-container ul { list-style: disc; }

.cs-block li,
.cs-container li {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body-lg);
  line-height: 1.8;
  margin-bottom: 8px;
}

.cs-block p { margin: 0 0 12px; }

.cs-block h1,
.cs-block h2,
.cs-block h3,
.cs-block h4 {
  margin: 0 0 16px;
}

.cs-block strong { font-weight: 700; }
.cs-block em     { font-style: italic; }

/* --------------------------------------------------------------------------
   Prev / next case-study nav
   -------------------------------------------------------------------------- */
.cs-nav {
  display: flex;
  justify-content: space-between;
  padding: 32px 16px;
  max-width: 1486px;
  margin: 0 auto;
}

.cs-nav a {
  color: var(--cs-text-dark);
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--t-body-lg);
}

.cs-nav a::after {
  content: " \2192";
}
.cs-nav a:first-child::after { content: ""; }
.cs-nav a:first-child::before { content: "\2190 "; }

.cs-nav a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Footer section (centered on cream)
   -------------------------------------------------------------------------- */
.cs-footer {
  background: var(--cs-cream);
  color: var(--cs-text-dark);
  text-align: center;
  padding: 64px 24px;
}

/* --------------------------------------------------------------------------
   First-section header clearance — when a case study page's first section is
   NOT a bg-image hero, push it down so the absolute-positioned site-header
   doesn't overlap the first row of content.
   -------------------------------------------------------------------------- */
main > .cs-section:first-child:not(.cs-section--bg-image) .cs-grid,
main > .cs-section:first-child:not(.cs-section--bg-image) .cs-container {
  padding-top: 144px;
}

/* Dark mode is inherited from the V2 tokens the --cs-* variables now reference
   (see :root above); no separate cool-navy override needed. */

/* --------------------------------------------------------------------------
   Clean v2 layout primitives — used for the proportionate rebuild that
   replaces the strict Fluid-Engine grid where it produced gaps/overlap.
   -------------------------------------------------------------------------- */
.cs-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 96px 32px;
}
.cs-container--narrow { max-width: 760px; }
.cs-container--wide   { max-width: 1280px; }

.cs-section--navy .cs-container,
.cs-section--navy .cs-container p,
.cs-section--navy .cs-container li,
.cs-section--navy .cs-container strong,
.cs-section--navy .cs-container em { color: var(--cs-text-light); }

.cs-section--pink p { color: var(--cs-text-dark); }

/* Two-column row: text and image (or text+text) side-by-side, equal width */
.cs-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.cs-row-2.cs-row-2--top    { align-items: start; }
.cs-row-2.cs-row-2--bottom { align-items: end; }
.cs-row-2 img             { width: 100%; height: auto; display: block; border-radius: 4px; }

/* Matched-aspect variant: both images share a 4:3 box and crop via cover so
   different source aspects align as a clean side-by-side pair. */
.cs-row-2.cs-row-2--matched { align-items: stretch; }
.cs-row-2.cs-row-2--matched img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

/* Same approach for a three-image row: lock all three to a shared landscape
   aspect and crop via cover. */
.cs-row-3.cs-row-3--matched { align-items: stretch; }
.cs-row-3.cs-row-3--matched img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

/* Empathy map: source PNG has trailing text on the right edge and a shadow
   at the bottom. Crop to a square and anchor top-left so both get trimmed. */
.cs-empathy-square {
  display: block;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: left top;
  border-radius: 8px;
}

.cs-row-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* Theia design-process stage pills */
.theia-stages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.theia-stage {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  padding: 14px 30px;
  border: 1.5px solid var(--cs-text-dark);
  border-radius: 999px;
  background: transparent;
  color: var(--cs-text-dark);
  white-space: nowrap;
}

.theia-stage--active {
  background: oklch(0.78 0.05 140 / 0.55);
  border-color: oklch(0.55 0.06 140 / 0.55);
}

@media (max-width: 640px) {
  .theia-stages { gap: 10px; }
  .theia-stage { font-size: 0.85rem; padding: 10px 18px; }
}

/* Centered image with constrained max width */
.cs-image {
  display: block;
  margin: 32px auto;
  max-width: 100%;
  height: auto;
}
.cs-image--sm { max-width: min(420px, 100%); }
.cs-image--md { max-width: min(720px, 100%); }
.cs-image--lg { max-width: min(960px, 100%); }
.cs-image--xl { max-width: min(1080px, 100%); }

/* When a full-bleed-ish image sits inside a wide container, let it fill the
   container so text above/below shares its left/right edges. Avoids the
   misalignment of a centered 1080px image inside a 1280px text column. */
.cs-container--wide .cs-image--xl {
  max-width: 100%;
}

/* Section heading conventions */
.cs-eyebrow {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-h3);
  margin-bottom: 16px;
  display: block;
}

.cs-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.2;
  margin: 0 0 24px;
}

.cs-subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  margin: 0 0 16px;
}

/* Stat / insight pill cards */
.cs-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 32px 0;
}
.cs-card {
  background: var(--cs-navy);
  color: var(--cs-text-light);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
}
.cs-card h3,
.cs-card p { color: var(--cs-text-light); margin: 0; }
.cs-card h3 { font-size: var(--t-body-lg); font-weight: 500; line-height: 1.4; }

/* Italic problem-statement blockquotes — uses the h3 type scale so they sit
   one notch below section titles. Always centered. */
.cs-quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: 1.333;
  text-align: center;
  margin: 32px auto;
  max-width: 820px;
}
.cs-section--navy .cs-quote { color: var(--cs-text-light); }

/* Stat cards used inside white/cream sections (Kulcha market-forecast pills).
   Centered headline number + small caption. */
.cs-stat {
  background: var(--cs-pink);
  border-radius: 16px;
  padding: 48px;
  text-align: center;
}
.cs-stat__number {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: 1.2;
  margin: 0 0 8px;
}

/* Highlight pills (single-line statements on the dark sections) */
.cs-pill {
  background: var(--cs-navy);
  color: var(--cs-text-light);
  border-radius: 999px;
  padding: 24px 40px;
  font-family: var(--font-heading);
  font-size: var(--t-body-lg);
  font-weight: 500;
  display: block;
  margin: 16px auto;
  max-width: 800px;
  text-align: center;
}
.cs-section--navy .cs-pill { background: var(--cs-white); color: var(--cs-text-dark); }

/* Journey diagram: stages + emotions columns */
.cs-journey {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 64px;
  align-items: center;
  margin: 48px auto;
  max-width: 760px;
  text-align: center;
}
.cs-journey__col {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--t-body-lg);
  line-height: 1.8;
}
.cs-journey__col > div { padding: 4px 0; }
.cs-journey__arrow {
  font-size: var(--t-h2);
  font-weight: 600;
}

/* Video embed — block-level, always horizontally centred */
.cs-video {
  position: relative;
  display: block;
  width: min(960px, 100%);
  margin-left: auto;
  margin-right: auto;
  margin-top: 32px;
  margin-bottom: 32px;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(0,0,0,0.15);
}
.cs-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Persona block: circular icon + body text */
.cs-persona {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 48px;
  align-items: center;
  max-width: 820px;
  margin: 32px auto;
}
.cs-persona img { width: 100%; height: auto; }

/* Eyebrow text on dark navy */
.cs-section--navy .cs-eyebrow,
.cs-section--navy .cs-title,
.cs-section--navy .cs-subtitle { color: var(--cs-text-light); }

@media (max-width: 767px) {
  .cs-container { padding: 56px 20px; }
  .cs-row-2, .cs-row-3, .cs-cards { grid-template-columns: 1fr; gap: 24px; }
  .cs-persona { grid-template-columns: 1fr; gap: 16px; text-align: center; }
  .cs-journey { grid-template-columns: 1fr; gap: 24px; }
  .cs-title { font-size: var(--t-h2); }
  .cs-subtitle { font-size: var(--t-body-lg); }
}

/* --------------------------------------------------------------------------
   Mobile — collapse the 24-col grid to a simple stacked 8-col layout
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .cs-grid {
    grid-template-columns: 24px repeat(8, 1fr) 24px;
    padding: 48px 0;
  }

  .cs-block {
    grid-column: 2 / 10 !important;
  }

  .cs-block[data-mobile-row] {
    grid-row: auto !important;
  }

  h1 { font-size: var(--t-h2); }
  h2 { font-size: var(--t-h2); }
  h3 { font-size: 26px; }

  p,
  .cs-block li {
    font-size: 17px;
    line-height: 1.65;
  }
}

/* ===== Case-study lightbox (click any image to zoom) ===== */
.cs-zoomable {
  cursor: zoom-in;
  transition: opacity 200ms ease, transform 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .cs-zoomable:hover {
    opacity: 0.92;
  }
}

.cs-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: rgba(15, 20, 35, 0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 56px;
  animation: csLightboxFade 0.2s ease;
}

.cs-lightbox.is-open {
  display: flex;
}

.cs-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  cursor: zoom-out;
  border-radius: 6px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.cs-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #FFF;
  border: none;
  cursor: pointer;
  font-size: var(--t-h3);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 160ms ease;
}

.cs-lightbox__close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.cs-lightbox__hint {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.04em;
  pointer-events: none;
}

@keyframes csLightboxFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (max-width: 640px) {
  .cs-lightbox { padding: 24px; }
  .cs-lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: var(--t-body-lg); }
}

/* ===== AI moment callout (fintech + future case studies) ===== */
.case-callout--ai {
  border-left: 3px solid var(--rule);
  background: oklch(0 0 0 / 0.025);
  padding: 20px 24px;
  border-radius: 0 8px 8px 0;
  margin: 32px 0;
  max-width: 720px;
}

[data-theme="dark"] .case-callout--ai {
  background: oklch(1 0 0 / 0.04);
}

.case-callout__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  
  color: var(--ink-muted);
  margin-bottom: 8px;
}

.case-callout__body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
}

.case-callout__body + .case-callout__body {
  margin-top: 12px;
}

/* ===== Case study AI disclosure (older case studies) ===== */
.case-disclosure {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink-subtle);
  font-style: italic;
  max-width: 60ch;
  margin: 16px 0 32px;
  padding-left: 14px;
  border-left: 2px solid var(--rule);
}

/* Dark mode: navy phase banners recess below the near-black canvas,
   mirroring the fx-navy treatment. */
[data-theme="dark"] {
  --cs-navy: #100F0D;
}

/* --------------------------------------------------------------------------
   Imagery treatment — aligns legacy case-study screenshots with the framed,
   soft-cornered look of the newer recreated interfaces. The full-bleed
   background hero is unaffected (it's a background-image).
   -------------------------------------------------------------------------- */
.cs-container img {
  border-radius: var(--radius-md);
}

/* Flat artwork (diagrams, icon boards, micro-interaction GIFs) exported on a
   solid white canvas: blend the canvas away so they read as standalone art
   on the page. Light mode multiplies white into the paper; dark mode inverts
   the art and screens the black canvas out. Photos keep the framed look. */
.cs-img-flat {
  mix-blend-mode: multiply;
  border-radius: 0 !important;
}
[data-theme="dark"] .cs-img-flat {
  mix-blend-mode: screen;
  filter: invert(1) hue-rotate(180deg);
}