/* ===========================================================================
   case-study.css — the shared layout for /case-studies/<slug>/ pages.
   ---------------------------------------------------------------------------
   Extracted from the Excellens page's inline <style> when the second case
   study landed. Four pages each carrying their own near-identical copy of
   these rules is how a design system drifts: someone fixes the gallery on one
   page, nobody back-ports it, and two case studies quietly stop matching.
   One file, every case study.

   Theme note: these ride the shared paper/ink tokens (var(--paper*), --ink,
   --accent). The only place --accent is used as text is .cs-r-n, which is
   2rem/700 display type — large-text contrast, not body copy. Do not reuse
   --accent for small foreground text here; on paper it fails WCAG AA.
   See _internal/docs/DESIGN-GUIDE-LIGHT-MODE.md.
   =========================================================================== */

.cs-hero { padding: 4rem 0 3rem; }

.cs-hero-img {
  aspect-ratio: 16/9;
  border-radius: 10px;
  overflow: hidden;
  background: var(--paper-3);
  margin-top: 2.4rem;
  border: 1px solid var(--rule);
}
.cs-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* ---------- Facts strip ---------- */
.cs-facts {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 2.4rem;
  padding: 1.6rem;
  background: var(--paper-2);
  border-radius: 8px;
}
.cs-fact .cs-fact-l {
  font-family: var(--ff-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}
.cs-fact .cs-fact-v { font-size: 1rem; font-weight: 500; line-height: 1.3; }
.cs-fact .cs-fact-v code {
  font-family: var(--ff-mono);
  font-size: 0.85rem;
  background: var(--paper-3);
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
}

/* ---------- Body ---------- */
.cs-body p { font-size: 1rem; line-height: 1.7; margin: 0 0 1.2rem; }
.cs-body p strong { color: var(--text); }
.cs-body h3.display { margin: 2.5rem 0 0.8rem; font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.cs-body ul { margin: 0 0 1.5rem; padding-left: 1.5rem; line-height: 1.7; }
.cs-body ul li { margin-bottom: 0.5rem; }

/* A quote pulled from the SOURCE (a schema comment, a runbook, a doc) — not
   from a person. Anything attributed to a human needs their sign-off. */
.cs-pull {
  margin: 1.5rem 0;
  padding: 1.2rem 1.4rem;
  background: var(--paper-2);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--text-soft);
}
.cs-pull code { font-family: var(--ff-mono); font-size: 0.85rem; }

/* ---------- Stack pills ---------- */
.cs-stack {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin: 1.5rem 0;
}
.cs-stack-pill {
  background: var(--paper-2);
  padding: 0.6rem 0.9rem;
  border-radius: 6px;
  font-family: var(--ff-mono);
  font-size: 0.82rem;
  text-align: center;
  border-left: 3px solid var(--accent);
}

/* ---------- Results ---------- */
.cs-results {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin: 2rem 0;
}
.cs-result-card {
  background: var(--paper-2);
  padding: 1.4rem 1.5rem;
  border-radius: 8px;
  border-top: 3px solid var(--accent);
}
.cs-result-card .cs-r-n {
  font-family: var(--ff-display);
  font-size: 2rem;
  color: var(--accent);
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.5rem;
}
.cs-result-card .cs-r-l { font-size: 0.9rem; line-height: 1.4; color: var(--text-soft); }

/* ---------- Screenshot gallery ---------- */
/* 16:9 because these are desktop product captures. The tiles link to the full
   image rather than opening a lightbox — a case study is a read, not an app. */
.cs-gallery {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 1.5rem 0 2rem;
}
.cs-gallery .cs-g-img {
  display: block;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  transition: border-color 0.15s, transform 0.15s;
}
.cs-gallery .cs-g-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.cs-gallery .cs-g-img:hover { border-color: var(--accent); transform: translateY(-2px); }

@media (max-width: 640px) {
  .cs-hero { padding: 2.5rem 0 2rem; }
  .cs-facts { padding: 1.1rem; }
}