/* ==========================================================================
   CASE STUDIES — shared by every file in src/case-study/
   Hero · Cover · Facts · Sections · Gallery · Results · Quote · Next project
   ========================================================================== */

.cs-hero { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 44px); display: flex; flex-direction: column; gap: 18px; }
.back-link { font-size: 14px; font-weight: 500; }
.cs-title { font-weight: 700; font-size: clamp(40px, 6.6vw, 92px); line-height: 0.96; letter-spacing: -0.035em; max-width: 22em; }
.cs-lead { font-family: var(--font-display); font-weight: 500; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; color: var(--ink-700); max-width: 26em; text-wrap: pretty; }
.cs-link { font-size: 15px; font-weight: 500; }

.cs-cover { height: clamp(240px, 42vw, 520px); }
/* Image covers keep their own 2:1 shape so graphic text is never cropped */
.cs-cover--image { height: auto; aspect-ratio: 2 / 1; }

.cs-facts {
  padding-top: clamp(36px, 5vw, 56px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(20px, 3vw, 32px);
}
.fact { border-top: 1px solid var(--line-warm); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.fact-value { font-size: 16px; line-height: 1.55; color: var(--ink-600); }

.cs-section { padding-top: var(--section-y); }

/* Galleries: two per row; .gallery-wide takes the full row */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.gallery .well { height: clamp(220px, 30vw, 360px); }
.gallery-wide { grid-column: 1 / -1; }
.gallery-wide .well { height: clamp(240px, 38vw, 480px); }

/* Results: stat cards (the last one dark) and a quote panel */
.results { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.result-figure { font-family: var(--font-display); font-weight: 600; font-size: 46px; line-height: 1; color: var(--ink-900); }
.result p:not(.result-figure) { font-size: var(--size-body-sm); line-height: 1.6; color: var(--ink-600); }
.card--dark .result-figure { color: var(--violet-300); }
.card--dark.result p:not(.result-figure) { color: var(--ink-on-dark-strong); }
.quote-panel {
  margin-top: 20px; background: var(--surface-tint); border-radius: var(--radius-xl);
  padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; gap: 24px;
}
.quote-panel > p { font-family: var(--font-display); font-weight: 500; font-size: clamp(21px, 2.4vw, 28px); line-height: 1.4; color: var(--ink-900); max-width: 34em; }
.quote-panel footer { display: flex; align-items: center; gap: 12px; }
.quote-panel .monogram { background: var(--surface-card); }

/* "In progress" / "on request" panel */
.note-panel {
  border: 1px solid var(--line-warm); background: var(--surface-card); border-radius: var(--radius-lg);
  padding: clamp(24px, 3.5vw, 40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; align-items: center;
}
.note-panel h2 { font-size: clamp(24px, 2.4vw, 30px); }
.note-panel p { margin-top: 10px; font-size: 16px; line-height: 1.6; color: var(--ink-600); max-width: 36em; }
.note-panel .btn { justify-self: end; }

/* Next project card */
.cs-next { padding-top: var(--section-y); }
.next-card {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; align-items: center;
  background: var(--surface-card); border: 1px solid var(--line-warm); border-radius: var(--radius-lg); padding: 22px;
  color: var(--ink-900); transition: border-color var(--dur-fast) var(--ease);
}
.next-card:hover { border-color: var(--accent); color: var(--ink-900); }
.next-media { height: clamp(180px, 22vw, 260px); border-radius: var(--radius-md); }
.next-text { display: flex; flex-direction: column; gap: 8px; }
.next-text h2 { font-size: clamp(24px, 2.6vw, 34px); }
.read-more { color: var(--accent); font-weight: 500; margin-top: 8px; }