/* ==========================================================================
   Case study page template
   Load AFTER design-system.css. Everything typographic comes from the shared
   tokens and roles there; this file only adds the case-study page base, layout,
   the story grid, image frames, and the structural elements that carry a role
   automatically (so existing markup stays clean):

     .sectionHeader h2            -> h2 role
     .sectionBody p / p.pull      -> body-lg / h3 roles
     .pull                        -> h3 role (also usable outside .sectionBody)
     .section-kicker              "01 · Context" label above a section heading
     .subsection-kicker           label above a sub-section heading
     .story-item                  number, h3/h4 title and p of a grid card
     .meta-value                  value in the role/product/focus/status strip
     .panel-title / .panel-note   header row inside an image frame
   ========================================================================== */

/* ---------- Page base ---------- */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
}
html, body { overflow-x: hidden; }
body {
  line-height: 1.6;
}
img, svg { max-width: 100%; height: auto; display: block; }

/* ---------- Layout ---------- */
:root { --max: 1320px; }

.wrap {
  max-width: var(--max);
  width: 100%;
  margin: auto;
  padding: 0 24px;
}
@media (min-width: 768px) {
  .wrap { padding: 0 56px; }
}

.section {
  padding: 104px 0;
  border-top: 1px solid var(--line);
}
.section.noborder { border-top: 0; }

.sectionHeader {
  display: grid;
  grid-template-columns: minmax(360px, 460px) minmax(0, 600px);
  gap: 72px;
  align-items: start;
}
@media (max-width: 1024px) {
  .sectionHeader { grid-template-columns: 1fr; gap: 32px; }
  .section { padding: 80px 0; }
}
@media (max-width: 640px) {
  .section { padding: 64px 0; }
}

/* ---------- Structural type ---------- */
.sectionHeader h2 {
  font: var(--type-h2);
  letter-spacing: var(--ls-h2);
  color: var(--ink);
  margin: 12px 0 0;
}

.sectionBody p {
  font: var(--type-body-lg);
  color: var(--muted);
  margin: 0 0 24px;
}
.sectionBody p:last-child { margin-bottom: 0; }
.sectionBody p strong { color: var(--ink); font-weight: var(--fw-semibold); }

.pull,
.sectionBody p.pull {
  font: var(--type-h3);
  letter-spacing: var(--ls-h3);
  color: var(--ink);
  margin: 4px 0 28px;
}
.design-question-card > .pull { margin-bottom: 0; }
.pull strong,
.sectionBody p.pull strong { color: inherit; font-weight: var(--fw-medium); }

.section-kicker {
  font: var(--type-section-label);
  letter-spacing: var(--ls-section-label);
  color: var(--ink);
  margin-bottom: 18px;
}
.subsection-kicker {
  font: var(--type-subsection-label);
  letter-spacing: var(--ls-subsection-label);
  color: var(--ink-soft);
  margin-bottom: 16px;
}

.meta-value {
  display: block;
  font: var(--type-meta);
  color: var(--ink);
}
.panel-title {
  font: var(--type-label);
  letter-spacing: var(--ls-panel-title);
  text-transform: uppercase;
  color: var(--ink);
}
.panel-note {
  font: var(--type-panel-note);
  color: var(--ink);
}

/* ---------- Story grid ----------
   Variants: .cols-2 .cols-3 .cols-4 .cols-5
             .has-images / .story-grid--image-led   open layout for image cards
             .story-grid--bordered                  editorial frame for text-only cards */
.story-grid {
  display: grid;
  gap: 0;
  margin-top: 64px;
  border: 1px solid var(--line-frame);
}
.story-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.story-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.story-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.story-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.story-item {
  padding: 28px 30px 30px;
  border-right: 1px solid var(--line-grid);
  border-bottom: 1px solid var(--line-grid);
}
/* Drop the inner rules that would double up with the outer frame. */
.story-grid.cols-2 .story-item:nth-child(2n) { border-right: 0; }
.story-grid.cols-2 .story-item:nth-last-child(-n+2) { border-bottom: 0; }
.story-grid.cols-3 .story-item:nth-child(3n) { border-right: 0; }
.story-grid.cols-3 .story-item:nth-last-child(-n+3) { border-bottom: 0; }
.story-grid.cols-4 .story-item:nth-child(4n) { border-right: 0; }
.story-grid.cols-4 .story-item:nth-last-child(-n+4) { border-bottom: 0; }
.story-grid.cols-5 .story-item:nth-child(5n) { border-right: 0; }
.story-grid.cols-5 .story-item:nth-last-child(-n+5) { border-bottom: 0; }

.story-item .story-number {
  font: var(--type-item-number);
  letter-spacing: var(--ls-item-number);
  color: var(--text-muted);
  margin-bottom: 20px;
}
.story-item h3,
.story-item h4 {
  font: var(--type-item-title);
  color: var(--ink);
  margin: 0 0 10px;
}
.story-item p {
  font: var(--type-body-sm);
  color: var(--muted);
  margin: 0;
}
.story-item p strong { color: var(--ink); font-weight: var(--fw-semibold); }

/* Image-led grids: open layout, no frame */
.story-grid.has-images,
.story-grid.story-grid--image-led {
  border: 0;
  column-gap: 56px;
  row-gap: 72px;
}
.story-grid.has-images .story-item,
.story-grid.story-grid--image-led .story-item {
  border: 0;
  padding: 0;
  min-width: 0;
}
.story-grid.has-images .case-study-image-placeholder,
.story-grid.story-grid--image-led .case-study-image-placeholder {
  margin-bottom: 28px;
}
.story-grid--image-led + .story-grid--image-led { margin-top: 72px; }

/* Information-only grid with an editorial frame */
.story-grid.story-grid--bordered {
  border-top-color: var(--line);
  border-bottom-color: var(--line);
}
.story-grid.story-grid--bordered .story-item {
  padding: 36px 40px;
  border-right-color: var(--line);
}
.story-grid.story-grid--bordered .story-item:last-child { border-right: 0; }

@media (max-width: 1024px) {
  .story-grid.cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story-grid.cols-5 .story-item:nth-child(5n) { border-right: 1px solid var(--line-grid); }
  .story-grid.cols-5 .story-item:nth-child(3n) { border-right: 0; }
  .story-grid.cols-5 .story-item:nth-last-child(-n+5) { border-bottom: 1px solid var(--line-grid); }
  .story-grid.cols-5 .story-item:nth-last-child(-n+3) { border-bottom: 0; }

  .story-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .story-grid.cols-4 .story-item:nth-child(4n) { border-right: 0; }
  .story-grid.cols-4 .story-item:nth-child(2n) { border-right: 0; }
  .story-grid.cols-4 .story-item:nth-last-child(-n+4) { border-bottom: 1px solid var(--line-grid); }
  .story-grid.cols-4 .story-item:nth-last-child(-n+2) { border-bottom: 0; }
}
@media (max-width: 900px) {
  .story-grid.has-images,
  .story-grid.story-grid--image-led { column-gap: 40px; row-gap: 56px; }
  .story-grid--image-led + .story-grid--image-led { margin-top: 56px; }
  .story-grid.story-grid--bordered .story-item { padding: 32px; }
}
@media (max-width: 768px) {
  .story-grid.cols-2,
  .story-grid.cols-3,
  .story-grid.cols-4,
  .story-grid.cols-5 { grid-template-columns: 1fr; }
  .story-grid .story-item { border-right: 0; border-bottom: 1px solid var(--line-grid); }
  .story-grid .story-item:last-child { border-bottom: 0; }
  .story-grid.story-grid--bordered .story-item { border-bottom-color: var(--line); }
  .story-grid.has-images .story-item,
  .story-grid.story-grid--image-led .story-item { border: 0; }
}
@media (max-width: 640px) {
  .story-grid.has-images,
  .story-grid.story-grid--image-led { row-gap: 48px; }
}

/* ---------- Images ---------- */
.case-study-image-placeholder {
  width: 100%;
  min-height: 300px;
  border: 1px dashed rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  background: #f7f7f8;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 32px;
  color: var(--text-muted);
  font-family: var(--font-sans);
}
.case-study-image-placeholder strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  margin-bottom: 6px;
}
.case-study-image-placeholder span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
}
.case-study-image-placeholder.image-real {
  min-height: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
}
.case-study-image-placeholder.image-real img {
  width: 100%;
  height: auto;
  display: block;
  cursor: pointer;
}