/* ---------- Case study: full page over the map (content in js/case-studies.js) ---------- */
.case {
  position: fixed; inset: 0; z-index: 260; overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); color: var(--ink); transition: opacity .3s ease, visibility 0s;
}
.case:not(.open) { opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s .25s; }
.case .case-close { position: fixed; z-index: 1; top: calc(16px + var(--safe-t)); right: max(16px, var(--safe-r)); background: var(--hud); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.cs-inner {
  box-sizing: border-box; width: min(1100px, 100%); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px;
  padding: calc(72px + var(--safe-t)) max(24px, var(--safe-r)) calc(96px + var(--safe-b)) max(24px, var(--safe-l));
}
.cs-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.cs-kicker { margin: 0; font: 600 12px/1.4 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hot); }
.cs-title { overflow-wrap: break-word; margin: 0; font-family: var(--f-display); font-weight: 900; font-stretch: 125%; font-size: clamp(30px, 8.5vw, 92px); line-height: .92; text-transform: uppercase; text-wrap: balance; }
.cs-title:focus { outline: none; }

.cs-sec { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.cs-h { margin: 0; display: flex; align-items: baseline; gap: 14px; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; }
.cs-h b { font: 600 13px/1 var(--f-mono); letter-spacing: .14em; color: var(--hot); }
.cs-sub { margin: 0 0 8px; font: 600 11px/1 var(--f-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.cs-sec p { margin: 0 0 12px; max-width: 68ch; font-size: 17px; line-height: 1.55; }
.cs-lede { font-size: 20px !important; }
.cs-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.cs-cols.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cs-list li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 16px; line-height: 1.45; }
.cs-list li::before { content: ""; width: 8px; height: 8px; margin-top: 7px; border-radius: 2px; background: var(--accent); transform: rotate(45deg); }
.cs-tech-title { margin: 0; font-size: 22px; font-weight: 700; }

/* problem → cause → alternatives → solution → result */
.cs-steps { margin: 0; display: grid; gap: 1px; background: var(--hud-line); border: 1px solid var(--hud-line); border-radius: 14px; overflow: hidden; }
.cs-steps div { display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 16px 20px; background: var(--bg-2); }
.cs-steps dt { font: 600 11px/1.6 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.cs-steps dd { margin: 0; font-size: 16px; line-height: 1.5; }

/* media: big enough to judge, always with a caption */
.cs-media { margin: 0; display: grid; gap: 10px; }
.cs-media img, .cs-media video, .cs-missing { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: var(--bg-2); display: block; }
.cs-media figcaption { font-size: 14px; color: var(--ink-dim); }
.cs-missing { box-sizing: border-box; display: grid; place-content: center; gap: 6px; text-align: center; border: 2px dashed var(--hud-line); font: 600 12px/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.cs-missing small { letter-spacing: 0; text-transform: none; }
.cs-pair, .cs-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.case .ins-tools .tool { cursor: var(--cur-default); }
.case .ins-link { justify-self: start; min-width: min(420px, 100%); }

/* placeholders still to fill: impossible to miss in preview */
.todo { padding: 1px 6px; border-radius: 5px; background: color-mix(in srgb, var(--hot) 18%, transparent); color: var(--hot); font-style: normal; }

@media (max-width: 760px) {
  .cs-inner { gap: 56px; padding-top: calc(80px + var(--safe-t)); }
  .cs-cols, .cs-cols.three, .cs-pair, .cs-gallery { grid-template-columns: 1fr; gap: 20px; }
  .cs-steps div { grid-template-columns: 1fr; gap: 6px; }
}