/* =========================================================
   PAGE — Case study (Koto-style deep dive)
   Full-bleed cover, challenge intro with meta sidebar,
   alternating media+text, pull quote, results stats, gallery,
   and bidirectional next-case navigation. Scoped .case-body.
   ========================================================= */

.case-body .pr-section {
  padding: var(--space-section-y-fluid) 0;
}

.case-wrap {
  width: var(--shell);
  margin-inline: auto;
}

.case-narrow {
  width: var(--shell-case);
  margin-inline: auto;
}

/* ---- Hero ---- */
.case-body .case-hero {
  padding: var(--space-section-y-loose) 0 var(--space-stack-xl);
}

.case-hero .case-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-lg);
}

.case-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-row-xs) var(--space-row-md);
  margin: 0;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--pr-rocket);
}

.case-eyebrow span:not(:first-child) {
  color: color-mix(in srgb, currentColor, transparent 40%);
}

.case-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-page-hero);
  line-height: var(--leading-display-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.case-cover {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--pr-graphite);
}

.case-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-slower) var(--ease);
}

.case-cover:hover img {
  transform: scale(1.03);
}

/* ---- Intro: challenge + meta ---- */
.case-intro {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: var(--space-grid-lg);
  align-items: start;
}

.case-intro h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-md);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading-soft);
}

.case-meta {
  display: grid;
  gap: var(--space-row-md);
  border-top: var(--border-width-rule) solid color-mix(in srgb, var(--page-fg), transparent 78%);
  padding-top: var(--space-indent);
}

.case-meta div {
  display: grid;
  gap: calc(var(--space-row-xs) / 2);
}

.case-meta dt {
  font-size: var(--type-tiny);
  letter-spacing: var(--tracking-meta);
  text-transform: uppercase;
  opacity: 0.5;
}

.case-meta dd {
  margin: 0;
  font-weight: 600;
}

/* ---- Body blocks ---- */
.case-narrative-section {
  padding-bottom: var(--space-section-y-tight);
}

.case-narrative {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-grid-lg);
  align-items: start;
}

.case-block {
  display: grid;
  gap: var(--space-form-pad);
  max-width: 64ch;
}

.case-narrative .case-block {
  max-width: none;
  padding-top: var(--space-row-lg);
  border-top: var(--border-width-rule) solid color-mix(in srgb, var(--page-fg), transparent 78%);
}

.case-block .case-kicker {
  margin: 0;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--pr-rocket);
}

.case-block h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-md);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading-soft);
}

.case-block p {
  margin: 0;
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
  opacity: 0.8;
}

.case-figure {
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-media);
  aspect-ratio: 16 / 9;
  background: color-mix(in srgb, var(--page-fg), transparent 88%);
}

.case-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.case-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-grid-md);
}

.case-duo .case-figure {
  aspect-ratio: 4 / 5;
}

/* ---- Gallery ---- */
.case-gallery-section {
  padding-top: var(--space-section-y-tight);
}

.case-gallery-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-row-lg);
  margin-bottom: var(--space-section-head);
}

.case-gallery-head .case-kicker {
  margin: 0;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--pr-rocket);
}

.case-gallery-head h2 {
  margin: 0;
  max-width: 10ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-section-sm);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
  text-align: right;
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-row-md);
}

.case-gallery figure {
  margin: 0;
  grid-column: span 4;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--page-fg), transparent 88%);
}

.case-gallery figure:nth-child(5n + 1) {
  grid-column: span 7;
  aspect-ratio: 16 / 9;
}

.case-gallery figure:nth-child(5n + 2) {
  grid-column: span 5;
  aspect-ratio: 4 / 5;
}

.case-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-reveal) var(--ease), filter var(--duration-reveal) var(--ease);
}

.case-gallery figure:hover img {
  transform: scale(1.035);
  filter: saturate(1.08);
}

/* ---- Pull quote ---- */
.case-quote {
  text-align: center;
}

.case-quote blockquote {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-heading-lg);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
}

.case-quote blockquote[data-scroll-highlight] {
  max-width: 24ch;
  font-size: var(--type-section);
  letter-spacing: var(--tracking-display-tight);
}

.case-cta {
  margin: var(--space-rule-offset) 0 0;
}

/* ---- Results ---- */
.case-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-hairline);
  background: color-mix(in srgb, var(--page-fg), transparent 84%);
  border: var(--border-width-hairline) solid color-mix(in srgb, var(--page-fg), transparent 84%);
}

.case-results div {
  background: var(--page-bg);
  padding: var(--space-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-row-sm);
}

.case-results strong {
  font-family: var(--font-display);
  font-size: var(--type-section-sm);
  font-weight: 800;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--pr-rocket);
}

.case-results span {
  opacity: 0.7;
  line-height: var(--leading-body-tight);
  max-width: 26ch;
}

/* ---- Next case (bidirectional nav) ---- */
.case-next a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-row-sm) var(--space-row-lg);
  text-decoration: none;
  color: inherit;
  border-top: var(--border-width-rule) solid color-mix(in srgb, var(--page-fg), transparent 70%);
  padding-top: var(--space-rule-offset);
  transition: padding-left var(--duration-medium) var(--ease);
}

.case-next a:hover,
.case-next a:focus-visible {
  padding-left: var(--space-form-pad);
}

.case-next .case-next-label {
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  opacity: 0.55;
}

.case-next .case-next-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-section);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
  flex-basis: 100%;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  .case-intro {
    grid-template-columns: 1fr;
    gap: var(--space-stack-lg);
  }

  .case-results {
    grid-template-columns: 1fr;
  }

  .case-duo {
    grid-template-columns: 1fr;
  }

  .case-narrative {
    grid-template-columns: 1fr;
    gap: var(--space-stack-xl);
  }

  .case-gallery-head {
    align-items: start;
    flex-direction: column;
  }

  .case-gallery-head h2 {
    text-align: left;
  }

  .case-gallery {
    grid-template-columns: 1fr;
  }

  .case-gallery figure,
  .case-gallery figure:nth-child(5n + 1),
  .case-gallery figure:nth-child(5n + 2) {
    grid-column: auto;
    aspect-ratio: 4 / 3;
  }
}