/* ============================================================
   case-study.css — Case-study layout for the editorial-ochre system.

   Consumes the shared design tokens defined in landing-theme.css
   (color, type ramp --text-*, spacing ladder --space-*, motion
   --dur-*/--ease-*, radius, weight). Depends only on
   landing.css + landing-theme.css.

   A few values are intentionally OFF the fixed scale and kept literal:
     - clamp() display sizes (fluid, not ladder steps)
     - 1.0625rem body copy (sits between --text-base and --text-lg)
     - 0.9375rem aside (between --text-sm and --text-base)
     - 44px number badge + icon sizes (component dimensions, not spacing)
   ============================================================ */

/* Honor the legacy is-visible end-state too (landing.css drives .reveal.in) */
.reveal.is-visible{ opacity:1; transform:none; }

/* ---- Page layout ----
   landing.css gives <main> no gutter; the .nav is sticky/in-flow, so
   content below it needs only breathing room (no nav-height offset). */
.cs{
  max-width:1140px;
  margin:0 auto;
  padding:var(--space-16) var(--space-8) var(--space-24);
}
@media (max-width: 600px){
  .cs{ padding:var(--space-10) var(--space-5) var(--space-16); }
}

/* ---- Back link ---- */
.cs-back{
  display:inline-flex; align-items:center; gap:var(--space-2); white-space:nowrap;
  font-family:var(--font-meta);
  font-size:var(--text-sm); font-weight:var(--weight-label); color:var(--muted);
  letter-spacing:0.04em; text-transform:uppercase;
  margin-bottom:var(--space-12);
  transition:color var(--dur-base) var(--ease-out), gap var(--dur-base) var(--ease-out);
}
.cs-back svg{ width:16px; height:16px; transition:transform var(--dur-base) var(--ease-out); }
.cs-back:hover{ color:var(--ink); }
.cs-back:hover svg{ transform:translateX(-3px); }

/* ---- Top bar: back link (left) + next project (right) ---- */
.cs-topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--space-4); margin-bottom:var(--space-12);
}
.cs-topbar .cs-back{ margin-bottom:0; }
.cs-next{
  display:inline-flex; align-items:center; gap:var(--space-2); white-space:nowrap;
  font-family:var(--font-meta);
  font-size:var(--text-sm); font-weight:var(--weight-label); color:var(--muted);
  letter-spacing:0.04em; text-transform:uppercase; text-align:right;
  transition:color var(--dur-base) var(--ease-out);
}
.cs-next svg{ width:16px; height:16px; transition:transform var(--dur-base) var(--ease-out); }
.cs-next:hover{ color:var(--ink); }
.cs-next:hover svg{ transform:translateX(3px); }

/* ---- Inline prose link ---- */
.cs-textlink{
  color:var(--ink); font-weight:var(--weight-label);
  transition:color var(--dur-base) var(--ease-out);
}
/* opt out of the inline-prose underline (.cs-section__body p a) — higher specificity */
.cs-section__body p a.cs-textlink{ text-decoration:none; }
.cs-textlink__arrow{ display:inline-block; color:var(--accent); transition:color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.cs-textlink:hover{ color:var(--accent); }
.cs-textlink:hover .cs-textlink__arrow{ color:var(--accent); transform:translateX(4px); }

/* ---- App store badges (standard black store badges) ---- */
.cs-stores{ display:flex; flex-wrap:wrap; gap:var(--space-3); margin-top:var(--space-6); }
.cs-store-badge{
  display:inline-flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-4); min-height:48px;
  border:var(--border-w) solid #000; border-radius:var(--radius-btn);
  background:#000; color:#fff;
  transition:opacity var(--dur-base) var(--ease-out);
}
.cs-store-badge:hover{ opacity:0.85; }
.cs-store-badge svg{ width:24px; height:24px; flex:none; }
.cs-store-badge__text{ display:flex; flex-direction:column; line-height:1.1; }
.cs-store-badge__sm{ font-family:var(--font-sans); font-size:10px; letter-spacing:0.01em; color:#fff; }
.cs-store-badge__lg{ font-family:var(--font-sans); font-size:var(--text-lg); font-weight:600; letter-spacing:0.01em; }

/* ---- Header ---- */
.cs-header{ max-width:680px; margin-bottom:var(--space-12); }
.cs-header__title{
  font-family:var(--font-display);
  font-size:clamp(2rem, 4.4vw, 3.25rem); font-weight:var(--display-weight);
  line-height:1.08; letter-spacing:var(--display-ls); color:var(--ink);
  margin-bottom:var(--space-5); text-wrap:balance;
}
.cs-header__tagline{
  font-size:clamp(1.1875rem, 1.6vw, 1.375rem); line-height:1.5; color:var(--muted);
}

/* ---- Hero media band ---- */
.cs-hero-media{
  position:relative; width:100%; aspect-ratio:21/9; overflow:hidden;
  border-radius:var(--radius-card);
  background:var(--surface-2); border:var(--border-w) solid var(--line);
  box-shadow:var(--tile-shadow);
  margin-bottom:var(--space-14);
}

/* ---- Meta grid ---- */
.cs-meta{
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-6);
  padding:0; margin-bottom:var(--space-14);
}
.cs-meta__label{
  font-family:var(--font-meta);
  font-size:var(--text-xs); font-weight:var(--weight-label); letter-spacing:0.06em;
  text-transform:uppercase; color:var(--muted); margin-bottom:var(--space-2);
}
.cs-meta__value{ font-size:var(--text-base); font-weight:var(--display-weight); color:var(--ink); line-height:1.45; }

/* ---- Body / sections ---- */
.cs-body{ max-width:680px; }
.cs-section{
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-7);
  padding-top:var(--space-12);
}
.cs-section:first-child{ padding-top:0; }
.cs-section__header{ position:sticky; top:var(--space-24); align-self:start; }
.cs-section__number{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:9999px;
  font-family:var(--font-meta); font-size:var(--text-sm); font-weight:var(--weight-label);
  color:var(--bg); background:var(--accent);
}
.cs-section__body :is(h2,h3){ scroll-margin-top:var(--space-24); }
.cs-section__title{
  font-family:var(--font-display); font-size:var(--text-2xl); font-weight:var(--display-weight);
  line-height:1.2; letter-spacing:var(--display-ls); color:var(--ink);
  margin-bottom:var(--space-4);
}
.cs-section__body p{
  font-size:1.0625rem; line-height:1.7; color:var(--ink-soft);
  margin-bottom:var(--space-4);
}
.cs-section__body p:last-child{ margin-bottom:0; }
.cs-figure{ margin-top:var(--space-7); }
.cs-figure__frame{
  position:relative; width:100%; aspect-ratio:16/9; overflow:hidden;
  border-radius:var(--radius-card);
  background:var(--surface-2); border:var(--border-w) solid var(--line);
}
.cs-figure__caption{ margin-top:var(--space-3); font-size:var(--text-sm); color:var(--muted); }

/* Real image filling a hero/figure frame (replaces the striped .ph placeholder) */
.cs-media__img{
  position:absolute; inset:0; display:block;
  width:100%; height:100%; object-fit:cover;
  /* Round to match the frame: overflow:hidden alone doesn't reliably clip an
     absolutely-positioned child at the corners, so the image's square edge
     can peek past the curve (visible against dark surfaces). */
  border-radius:inherit;
}

/* ---- Case-study footer CTA ("Get in touch") ---- */
.cs-footer{ margin-top:var(--space-12); }
.cs-footer__link{
  display:inline-flex; align-items:center; gap:var(--space-3);
  font-family:var(--font-display); font-size:var(--text-2xl); font-weight:var(--display-weight);
  letter-spacing:var(--display-ls); color:var(--ink);
  transition:color var(--dur-base) var(--ease-out), gap var(--dur-base) var(--ease-out);
}
.cs-footer__link svg{ width:22px; height:22px; color:var(--accent); transition:transform var(--dur-base) var(--ease-out); }
.cs-footer__link:hover{ color:var(--accent); gap:var(--space-4); }
.cs-footer__link:hover svg{ transform:translateX(4px); }
.cs-footer__aside{ margin-top:var(--space-5); font-size:0.9375rem; line-height:1.5; }
.cs-footer__aside a{
  color:var(--muted); text-decoration:underline; text-underline-offset:3px;
  text-decoration-thickness:1px; transition:color var(--dur-base) var(--ease-out);
}
.cs-footer__aside a:hover{ color:var(--accent); }

/* ---- Striped placeholder (case-study mockups) ---- */
.ph{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background-image:repeating-linear-gradient(135deg,
    color-mix(in srgb, var(--ink) 4%, transparent) 0 10px,
    transparent 10px 20px);
}
.ph span{
  font-family:var(--font-meta);
  font-size:var(--text-xs); letter-spacing:0.04em; color:var(--muted);
  background:var(--surface); padding:var(--space-2) var(--space-3);
  border-radius:9999px; border:var(--border-w) solid var(--line);
}

/* ---- Click-to-enlarge body figures (lightbox) ---- */
/* JS adds .is-zoomable to any figure frame holding a real image. */
.cs-figure__frame.is-zoomable{ cursor:zoom-in; }
.cs-figure__frame.is-zoomable:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

.cs-lightbox{
  position:fixed; inset:0; z-index:100;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--space-5); padding:var(--space-10) var(--space-8);
  background:var(--scrim);
  opacity:0; visibility:hidden; cursor:zoom-out;
  transition:opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
}
.cs-lightbox.is-open{ opacity:1; visibility:visible; transition:opacity var(--dur-slow) var(--ease-out); }
.cs-lightbox__img{
  max-width:min(1100px, 92vw); max-height:80vh; width:auto; height:auto;
  object-fit:contain; border-radius:var(--radius-card);
  background:var(--surface); box-shadow:var(--card-hover-shadow);
  transform:scale(.96); transition:transform var(--dur-slow) var(--ease-out);
}
.cs-lightbox.is-open .cs-lightbox__img{ transform:scale(1); }
.cs-lightbox__cap{
  max-width:min(1100px, 92vw); text-align:center;
  font-family:var(--font-meta); font-size:var(--text-sm); line-height:1.5;
  color:var(--scrim-ink);
}
.cs-lightbox__close{
  position:absolute; top:var(--space-5); right:var(--space-5);
  width:44px; height:44px; padding:0; display:flex; align-items:center; justify-content:center;
  color:var(--scrim-ink); background:transparent;
  border:var(--border-w) solid var(--scrim-ink); border-radius:var(--radius-pill);
  cursor:pointer; opacity:.75;
  transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.cs-lightbox__close:hover{ opacity:1; }
.cs-lightbox__close:active{ transform:scale(.94); }
.cs-lightbox__close svg{ width:20px; height:20px; }
@media (prefers-reduced-motion:reduce){
  .cs-lightbox,
  .cs-lightbox__img{ transition:opacity var(--dur-base) linear; }
  .cs-lightbox__img{ transform:none; }
}

/* ---- Responsive ---- */
@media (max-width: 760px){
  .cs-section{ grid-template-columns:1fr; gap:var(--space-3); }
  .cs-section__header{ position:static; }
  .cs-meta{ grid-template-columns:1fr; gap:var(--space-5); }
}