/* ==========================================================================
   Case study detail
   ==========================================================================
   One template, one published case today (Sortlist). Ported from
   app/realisations/[slug]/page.tsx.

   Sections disappear rather than render a placeholder when we hold no content
   for them. Sortlist has no measured result yet, so the page ends its story at
   what we built rather than inventing an outcome. Result, stack and quote all
   behave the same way.

   overflow-x: clip on the page, not hidden: the gallery breaks out to full
   viewport width, and on a platform with classic scrollbars that is wider than
   the content box. `hidden` would make this a scroll container and stop the
   navbar inside it from sticking.
   ========================================================================== */

.case-detail {
  min-height: 100dvh;
  overflow-x: clip;
  background-color: var(--background);
}

.case-detail__inner {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  padding-top: 2rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 768px) {
  .case-detail__inner { gap: 5rem; padding-top: 2.5rem; padding-bottom: 5rem; }
}

/* The opening block is spaced tighter than the sections below it, so the
   banner, the client and the headline read as one thing that fits on a screen
   together rather than three separated by section gaps. */
.case-detail__open {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

@media (min-width: 768px) { .case-detail__open { gap: 2rem; } }

.case-detail__back {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--muted-foreground);
  transition: color 150ms ease;
}

.case-detail__back:hover { color: var(--foreground); }
.case-detail__back svg { width: 1rem; height: 1rem; }

@media (prefers-reduced-motion: reduce) { .case-detail__back { transition: none; } }

/* Hero banner, above the title. Six detail pages built from one template
   otherwise open identically, and this is what says which project you are on
   before a word of it is read. Column width, no plate behind it.

   Height is capped against the viewport rather than set in pixels, so the
   banner takes what a screen can spare and the headline and facts rail stay
   readable without scrolling on a short laptop and on a large display alike.
   Anchored to the top of the composition: what the cap crops off a mockup this
   shape is the bottom of a screenshot, while the client's own label sits in
   the top corner and is the half worth keeping. */
.case-detail__banner {
  max-height: 46vh;
  width: 100%;
  border-radius: var(--radius-2xl);
  object-fit: cover;
  object-position: top;
}

.case-detail__hero {
  display: grid;
  align-items: start;
  gap: 2.5rem;
}

@media (min-width: 1024px) {
  .case-detail__hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
    gap: 4rem;
  }
}

.case-detail__id { display: flex; flex-direction: column; gap: 1.5rem; }

/* The client's own lockup, not our brand colour: the case belongs to them.
   Named in text until a real wordmark lands. */
.case-detail__client {
  font-size: var(--text-h5-size);
  line-height: var(--text-h5-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
}

.case-detail__headline {
  font-size: var(--text-h1-size);
  line-height: var(--text-h1-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .case-detail__headline {
    font-size: var(--text-display-lg-size);
    line-height: var(--text-display-lg-line);
  }
}

/* Closed top and bottom, so the rail reads as a bounded block at three rows or
   at five. Same treatment as the stat rows, so the two read as one system. */
.case-detail__facts {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--border-subtle);
}

.meta-row {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  border-top: 1px solid var(--border-subtle);
  padding-block: 0.75rem;
}

.meta-row dt,
.meta-row__label {
  font-size: var(--text-label-sm-size);
  line-height: var(--text-label-sm-line);
  font-weight: var(--text-label-sm-weight);
  color: var(--muted-foreground);
}

.meta-row dd,
.meta-row__value {
  font-size: var(--text-label-lg-size);
  line-height: var(--text-label-lg-line);
  font-weight: var(--text-label-lg-weight);
  color: var(--foreground);
}

/* --------------------------------------------------------------------------
   Story stack. Stacked, not three columns: the blocks are one argument read in
   order (situation, what we shipped, what it produced), and side by side they
   read as three unrelated captions. The last beat waits until after the work
   has been seen.
   -------------------------------------------------------------------------- */
.case-detail__story { display: flex; flex-direction: column; gap: 2.5rem; }

.story-block { display: flex; flex-direction: column; gap: 0.75rem; }

/* The rule separates rows rather than opening the section: the metrics band
   above already closes with one, and two hairlines a gap apart read as a
   mistake. */
.story-block--divided {
  border-top: 1px solid var(--border-subtle);
  padding-top: 1.5rem;
}

.story-block__title,
.case-detail__section-title {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
}

/* Capped at 68 characters so a paragraph running the width of the container
   stays readable. */
.story-block__body {
  max-width: 68ch;
  font-size: var(--text-body-lg-size);
  line-height: var(--text-body-lg-line);
  font-weight: var(--text-body-lg-weight);
  color: var(--muted-foreground);
}

/* --------------------------------------------------------------------------
   Gallery breakout. Full bleed: inside the container the arc was sliced by the
   text column's edges, which reads as a clipping bug rather than a carousel
   running off the page.

   NOTE: renders on no page today. It needs a case holding two or more of its
   own images and every case holds one. See assets/js/webgl/circular-gallery.js.
   -------------------------------------------------------------------------- */
.case-detail__gallery {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

.case-detail__gallery canvas { display: block; width: 100%; height: 100%; }

/* -------------------------------------------------------------------------- */
.case-detail__stack { display: flex; flex-direction: column; gap: 1.25rem; }

.case-detail__stack ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 2rem;
  row-gap: 1rem;
}

.case-detail__stack li { display: flex; align-items: center; gap: 0.5rem; }
.case-detail__stack svg { width: 1rem; height: 1rem; color: var(--muted-foreground); }

.case-detail__stack span {
  font-size: var(--text-label-size);
  line-height: var(--text-label-line);
  font-weight: var(--text-label-weight);
  color: var(--muted-foreground);
}

.case-detail__quote {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-radius: var(--radius-2xl);
  background-color: var(--background-subtle);
  padding: 2rem;
}

@media (min-width: 768px) { .case-detail__quote { padding: 3rem; } }

.case-detail__quote blockquote {
  font-size: var(--text-h4-size);
  line-height: var(--text-h4-line);
  letter-spacing: -0.025em;
  font-weight: 500;
  color: var(--foreground);
  text-wrap: pretty;
}

.case-detail__quote figcaption {
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-line);
  font-weight: var(--text-body-sm-weight);
  color: var(--muted-foreground);
}

/* -------------------------------------------------------------------------- */
.case-detail__others {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-top: 1px solid var(--border-subtle);
  padding-top: 3rem;
}

.case-detail__others-grid { display: grid; gap: 1.5rem; }

@media (min-width: 768px) {
  .case-detail__others-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}