/* Case study template (/work/[slug]), one layout for every project. Shared pieces are in site.css.
   Everything in [brackets] waits for the client's real story and figures, used with their permission. */

/* ---------- 01 Hero: the story on the left, the headline numbers stacked on the right ---------- */
.case-hero { padding-top: calc(var(--sf-header-height) + clamp(40px, 6vw, 96px)); padding-bottom: clamp(120px, 14vw, 200px); }
/* Without the project window below it, the hero ends at the usual distance. */
.case-hero--plain { padding-bottom: clamp(64px, 8vw, 112px); }
/* The dark centre sits behind the copy on the left. */
.case-hero .hero__scrim { background: radial-gradient(ellipse 62% 70% at 28% 44%, rgb(var(--sf-scrim) / calc(0.82 * var(--sf-scrim-k))), rgb(var(--sf-scrim) / calc(0.45 * var(--sf-scrim-k))) 55%, rgb(var(--sf-scrim) / 0) 88%); }
@media (max-width: 1023px) {
  .case-hero .hero__scrim { background: radial-gradient(ellipse 110% 62% at 42% 30%, rgb(var(--sf-scrim) / calc(0.88 * var(--sf-scrim-k))), rgb(var(--sf-scrim) / calc(0.6 * var(--sf-scrim-k))) 60%, rgb(var(--sf-scrim) / 0) 96%); }
}
.case-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 64px); align-items: end; }
@media (min-width: 1024px) { .case-hero__grid { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; } }
.case-hero__meta { margin-top: 26px; }
.case-hero__title { margin-top: 14px; max-width: 18ch; font-size: clamp(2.5rem, 1.9rem + 2vw, 3.5rem); }
.case-hero__layers { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.case-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; }
@media (min-width: 560px) and (max-width: 1023px) { .case-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Glass cards over the aurora. The value reads first, the label under it. */
.case-hero .case-stat { background: color-mix(in srgb, var(--sf-bg-raised) 72%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.case-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; }
.case-stat dd { margin: 0; }

/* ---------- The project image: a browser window across the hero's edge ---------- */
/* flow-root stops the window's negative margin collapsing through, so the two-tone band starts where the hero ends. */
.case-shot { position: relative; display: flow-root; margin: 0; background: linear-gradient(to bottom, var(--case-band-top, var(--sf-midnight)) 50%, var(--case-band-bottom, var(--sf-off-white)) 50%); perspective: 1600px; }
.case-shot .sf-container { margin-top: calc(-1 * clamp(100px, 12vw, 170px)); }
.case-shot__window { position: relative; max-width: 1080px; margin-inline: auto; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--sf-radius-md); background: #10152A;
  box-shadow: 0 40px 80px -48px rgba(9, 11, 20, 0.75), 0 0 0 1px rgba(9, 11, 20, 0.2); transform-origin: 50% 100%; }
/* Print flattens a blurred shadow into a solid grey slab, so the window prints without one. */
@media print { .case-shot__window { box-shadow: none; } }
.case-shot__bar { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: #161C35; }
.case-shot__bar > span:not(.case-shot__url) { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.case-shot__url { margin-left: 14px; padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); font-size: 0.75rem; color: rgba(255, 255, 255, 0.72); }
.case-shot__screen { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
/* Where scroll-driven animation is supported, the window lies back and stands up as it scrolls into view. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .case-shot__window { animation: shot-stand linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes shot-stand { from { transform: rotateX(22deg) scale(0.92); } to { transform: none; } }
  }
}

/* ---------- 02 Summary ---------- */
.case-summary-band { padding-top: clamp(56px, 7vw, 96px); }
.case-summary { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 768px) { .case-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.case-summary__item { padding-top: 20px; border-top: 1px solid var(--sf-border-strong); }
.case-summary__item:first-child { border-image: var(--sf-gradient-brand) 1; border-top-width: 2px; }
.case-summary__text { margin-top: 12px; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); font-weight: var(--sf-fw-semibold); line-height: 1.4; }

/* ---------- 03 The challenge ---------- */
/* This colour holds in the dark theme only: in light the ink ladder in sarafi.css (0,3,0) makes the lead ink. */
.case-story .sf-lead { margin-top: 0; color: var(--sf-fg); }
.case-pull { margin: clamp(32px, 4vw, 48px) 0 0; padding-left: 24px; border-left: 2px solid; border-image: var(--sf-gradient-brand) 1; }
.case-pull p { font: italic 400 clamp(1.625rem, 1.3rem + 1.2vw, 2.25rem)/1.2 var(--sf-font-serif); }
.case-pull footer { margin-top: 14px; font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }

/* ---------- 04 What was disconnected ---------- */
.case-lead { margin-top: 18px; }
.findings { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
/* The same cards in a row of three, where they stand on their own under a section title. */
.findings--row { margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 1024px) { .findings--row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.finding__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* Two parts of the system with a gap in the line between them. On hover the gap opens a little wider. */
.finding__gap { width: 96px; height: 20px; overflow: visible; }
.finding__gap circle { fill: var(--sf-bg-raised); stroke: var(--sf-fg-accent); stroke-width: 2; }
.finding__half { fill: none; stroke: var(--sf-fg-muted); stroke-width: 2; stroke-linecap: round; transition: transform 400ms var(--sf-ease-out); }
.finding:hover .finding__half--a { transform: translateX(-3px); }
.finding:hover .finding__half--b { transform: translateX(3px); }
.finding__title { margin-top: 18px; font-size: 1.25rem; font-weight: var(--sf-fw-bold); }
.finding__text { margin-top: 6px; color: var(--sf-fg-body); }

/* ---------- 05 What we built: rows on the ribbon line ---------- */
.built { margin-top: clamp(40px, 5vw, 64px); }
.built .sf-ribbon__step { padding-bottom: 16px; }
.built .sf-ribbon__step:last-child { padding-bottom: 0; }
.built { --sf-ribbon-dot-top: 36px; }
.built-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
@media (min-width: 768px) { .built-row { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; } }
.built-row__title { margin-top: 12px; font-size: var(--sf-fs-h3); line-height: var(--sf-lh-h3); font-weight: var(--sf-fw-bold); letter-spacing: -0.01em; }
.built-row__text { margin-top: 10px; color: var(--sf-fg-body); }
.built-row__media { aspect-ratio: 16 / 10; margin: 0; border-radius: var(--sf-radius-sm); }
/* Phones: a narrower ribbon, so the cards keep their width. */
@media (max-width: 559px) {
  .built { padding-left: 36px; --sf-ribbon-dot-left: -36px; --sf-ribbon-dot-size: 20px; }
  .built .sf-ribbon__line { left: -10px; }
}

/* ---------- 06 Results ---------- */
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: clamp(32px, 4vw, 48px) 0 0; }
/* Narrow phones: one column, so a long figure is not cut off (gradient text is not painted past its box). */
@media (max-width: 399px) { .results { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 1024px) { .results { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.case-chart { position: relative; margin: 16px 0 0; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--sf-border); border-radius: var(--sf-radius-md); background: var(--sf-bg-raised); }
.case-chart__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.case-chart__title { font-size: 1.125rem; font-weight: var(--sf-fw-bold); }
.case-chart__legend { display: flex; gap: 18px; font-size: var(--sf-fs-small); color: var(--sf-fg-muted); }
.case-chart__key { display: inline-flex; align-items: center; gap: 8px; }
.case-chart__key::before { content: ""; width: 12px; height: 12px; border-radius: 3px; }
.case-chart__key--before::before { background: var(--sf-border-strong); }
.case-chart__key--after::before { background: var(--sf-gradient-brand); }
.case-chart__plot { display: block; width: 100%; height: clamp(160px, 20vw, 240px); margin-top: 20px; }
.case-chart__grid { fill: none; stroke: var(--sf-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.case-chart__bars--before { fill: var(--sf-border-strong); opacity: 0.7; }
.case-chart__bars--after { fill: url(#art-grad); opacity: 0.75; }
.case-chart__marker { fill: none; stroke: var(--sf-fg-muted); stroke-width: 1.5; stroke-dasharray: 4 5; vector-effect: non-scaling-stroke; }
.case-chart__axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.8125rem; color: var(--sf-fg-muted); }
.case-chart__start { font-weight: var(--sf-fw-semibold); color: var(--sf-fg); }
.case-chart__tag { left: auto; right: 14px; bottom: auto; top: -12px; }

/* The two-tone band behind the project image matches the hero above and the section below, in either theme
   (in light: the paper hero and the Cloud summary band). */
:root[data-theme="dark"] .case-shot { --case-band-top: var(--sf-midnight); --case-band-bottom: var(--sf-night-soft); }
:root[data-theme="light"] .case-shot { --case-band-top: var(--sf-white); --case-band-bottom: var(--sf-cloud); }
/* Light theme: the browser frame gets light chrome and becomes a level-3 sheet; the chart is a card at rest. */
:root[data-theme="light"] .case-shot__window { border-color: var(--sf-hairline); background: var(--sf-white); box-shadow: var(--sf-shadow-3); }
:root[data-theme="light"] .case-shot__bar { background: #F8F9FC; border-bottom-color: var(--sf-hairline); }
:root[data-theme="light"] .case-shot__bar > span:not(.case-shot__url) { background: var(--sf-hairline-strong); }
:root[data-theme="light"] .case-shot__url { background: var(--sf-white); box-shadow: inset 0 0 0 1px var(--sf-hairline); color: var(--sf-ink-muted); }
:root[data-theme="light"] .case-chart { box-shadow: var(--sf-shadow-1); }
/* The hero figures are Midnight (19.2:1), as on the homepage stats sheet. The results row keeps its gradient figures,
   the brand book's "data highlight". */
:root[data-theme="light"] .page-hero .sf-stat__value--gradient { background: none; color: var(--sf-fg); }
@media print { :root[data-theme="light"] :is(.case-shot__window, .case-chart) { box-shadow: none; } }