/* ============================================================
   Case detail page styles. Sits on top of the main styles.css.
   ============================================================ */

.case-page { background: var(--c-bg); }

.case-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  max-width: var(--max-w);
  margin: 0 auto;
  font-size: var(--t-small);
}
.case-nav__back, .case-nav__filter a {
  color: var(--c-text-muted);
  font-weight: 500;
  white-space: nowrap; /* keep each label and its arrow on one line */
}
.case-nav__back:hover, .case-nav__filter a:hover { color: var(--c-accent); }
/* The back link is just an arrow — give it a comfortable tap target without
   nudging the layout. Labels are short now ("←" and "Next case →"), so they sit
   side by side at every width; no wrapping, identical regardless of language. */
.case-nav__back {
  padding: 6px 10px;
  margin: -6px -10px;
}

.case-detail {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: var(--s-7) var(--s-6) var(--s-10);
}

.case-detail__head {
  display: grid;
  gap: var(--s-4);
  margin-bottom: var(--s-8);
}
.case-detail__kicker {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
}
.case-detail__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: "opsz" 64, "wdth" 100;
  font-size: var(--t-h1);
  line-height: 1.05;
  letter-spacing: -0.022em;
  color: var(--c-text);
  max-width: 20ch;
}
.case-detail__dek {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  line-height: 1.35;
  letter-spacing: -0.012em;
  color: var(--c-text-muted);
  max-width: 50ch;
  margin-top: var(--s-3);
}

.case-detail__facts {
  display: grid;
  gap: 0;
  margin-top: var(--s-7);
  border-top: 1px solid var(--c-border-soft);
}
.case-detail__facts > div {
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--s-5);
  align-items: baseline;
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--c-border-soft);
}
.case-detail__facts dt {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-text-soft);
  padding-top: 0.15em;
}
.case-detail__facts dd {
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text);
}

/* Hero media container, ready for img / video / mp4 hypermotion assets */
.case-detail__hero-visual {
  margin-bottom: var(--s-9);
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-surface);
}
.case-detail__hero-visual > video,
.case-detail__hero-visual > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.case-detail__hero-visual > video.is-loaded,
.case-detail__hero-visual > img.is-loaded { opacity: 1; }

/* Placeholder card sits inside the aspect-locked container */
.case-detail__hero-visual .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  aspect-ratio: auto;
  border-radius: 0;
}

/* Reduced motion: hide autoplay video, fall back to poster image if provided */
@media (prefers-reduced-motion: reduce) {
  .case-detail__hero-visual > video {
    display: none;
  }
}

/* Inline figure: container is plain. Inner media wrapper (.case-detail__media)
   provides the aspect-ratio and fade-in. Figcaption sits naturally below. */
.case-detail__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: var(--c-surface);
  margin-bottom: var(--s-3);
}
.case-detail__media > video,
.case-detail__media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.case-detail__media > video.is-loaded,
.case-detail__media > img.is-loaded { opacity: 1; }
.case-detail__media .placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  aspect-ratio: auto;
  border-radius: 0;
}
@media (prefers-reduced-motion: reduce) {
  .case-detail__media > video { display: none; }
}

.case-detail__section { margin-bottom: var(--s-8); }
.case-detail__section h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h2);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--c-text);
  margin-bottom: var(--s-5);
  max-width: 22ch;
}
.case-detail__section p {
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--c-text);
  max-width: var(--max-w-reading);
  margin-bottom: var(--s-4);
}
.case-detail__section strong { font-weight: 600; }

/* Numbered list with hanging numbers (fixed bulletproof layout) */
.case-detail__numbered {
  display: grid;
  gap: var(--s-4);
  margin: var(--s-5) 0;
  max-width: var(--max-w-reading);
  counter-reset: numbered;
  list-style: none;
  padding-left: 3rem;
}
.case-detail__numbered li {
  position: relative;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--c-text);
}
.case-detail__numbered li::before {
  counter-increment: numbered;
  content: counter(numbered, decimal-leading-zero);
  position: absolute;
  left: -3rem;
  top: 0.1em;
  font-family: var(--font-mono);
  font-size: var(--t-small);
  color: var(--c-contra);
  letter-spacing: 0.04em;
}

/* Bullets with hanging arrow (same pattern) */
.case-detail__bullets {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-5) 0;
  max-width: var(--max-w-reading);
  list-style: none;
  padding-left: 1.5rem;
}
.case-detail__bullets li {
  position: relative;
  font-size: var(--t-body);
  line-height: 1.65;
  color: var(--c-text);
}
.case-detail__bullets li::before {
  content: "→";
  position: absolute;
  left: -1.5rem;
  top: 0;
  color: var(--c-contra);
}

.case-detail__figure { margin: var(--s-7) 0; }
.case-detail__figure figcaption {
  margin-top: var(--s-3);
  font-size: var(--t-small);
  color: var(--c-text-muted);
  font-style: italic;
  max-width: 50ch;
}

/* Outcome section: full-bleed panel */
.case-detail__section--outcome {
  background: var(--c-surface);
  border-block: 1px solid var(--c-border-soft);
  padding: var(--s-8) var(--s-6);
  margin: var(--s-9) calc(50% - 50vw);
}
/* All direct children: centered column within the full-bleed section */
.case-detail__section--outcome > * {
  max-width: var(--max-w-narrow);
  margin-inline: auto;
}

/* Paragraphs: same LEFT edge as the metrics list, readable width.
   Problem solved: > * centers by max-width, so narrow <p> elements get
   bigger left margins than the metrics (760px). Fix: explicit left
   margin matching the column position, right margin 0 (left-aligned). */
.case-detail__section--outcome > p {
  margin-left: max(0px, calc((100% - var(--max-w-narrow)) / 2));
  margin-right: 0;
  max-width: var(--max-w-reading);
}

/* Title: kicker-style label — small, uppercase, muted */
.case-detail__section--outcome h2 {
  font-family: var(--font-body);
  font-size: var(--t-micro);
  font-weight: 500;
  font-variation-settings: normal;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-text-muted);
  margin-bottom: var(--s-4);
  line-height: 1;
}

/* Context sentence: muted, sets scene */
.outcome__context {
  font-size: var(--t-small);
  color: var(--c-text-muted);
  letter-spacing: 0.01em;
  margin-block: 0 var(--s-4);
}

/* Closing line: display font, slightly larger than body, clear top space */
.outcome__close {
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: 500;
  font-variation-settings: "opsz" 20, "wdth" 100;
  line-height: 1.4;
  letter-spacing: -0.012em;
  color: var(--c-text);
  margin-top: var(--s-6);
}

/* ---- Metrics: vertical list, label left — figures right ----
   One metric per row. Label flexible left, numbers anchored right.
   Before value: small + muted. After value: monumental + accent.
   Proportional on every screen size, safe for dynamic content. */
.case-detail__metrics {
  list-style: none;
  padding: 0;
  margin-block: var(--s-5) 0;
  border-top: 1px solid var(--c-border-soft);
}

.case-detail__metrics li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--c-border-soft);
}

/* Label: left, readable, muted */
.metric__label {
  font-family: var(--font-body);
  font-size: var(--t-small);
  font-weight: 400;
  color: var(--c-text-muted);
  line-height: 1.4;
  flex: 1;
}

/* Figures: right-aligned column, consistent width for visual evenness */
.metric__figures {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-shrink: 0;
  justify-content: flex-end;
  min-width: 148px;
}

/* Before value: clearly inferior — smaller, lighter */
.metric__value {
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 1.5vw, 1rem);
  font-weight: 400;
  font-variation-settings: "opsz" 12, "wdth" 100;
  letter-spacing: -0.01em;
  color: var(--c-text-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: center;
}

/* After value: monumental — the win */
.metric__value--after {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  font-variation-settings: "opsz" 48, "wdth" 100;
  letter-spacing: -0.035em;
  color: var(--c-accent-deep);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

/* CSS-drawn arrow: thin line + arrowhead */
.metric__sep {
  flex-shrink: 0;
  align-self: center;
  display: block;
  width: 18px;
  height: 1px;
  background: var(--c-border);
  position: relative;
  margin-inline: 2px;
}
.metric__sep::after {
  content: '';
  position: absolute;
  right: -4px;
  top: -3px;
  width: 0;
  height: 0;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 5px solid var(--c-border);
}

/* Solo metric: same monumental treatment as --after */
.metric--solo .metric__value {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  font-weight: 800;
  font-variation-settings: "opsz" 48, "wdth" 100;
  color: var(--c-accent-deep);
  letter-spacing: -0.035em;
  line-height: 1;
  align-self: baseline;
}

/* Footer block */
.case-detail__footer {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--s-9);
  padding-top: var(--s-7);
  border-top: 1px solid var(--c-border);
}
.case-detail__named, .case-detail__toolkit {
  display: grid;
  gap: var(--s-3);
  max-width: var(--max-w-reading);
}
.case-detail__named p, .case-detail__toolkit p {
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--c-text-muted);
}
.case-detail__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border-soft);
}

/* ============================================================
   Case page animation states — gated by html.js class
   ============================================================ */

.js .case-nav {
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 420ms var(--ease-out-quint), transform 420ms var(--ease-out-quint);
}
.js .case-nav.is-entered { opacity: 1; transform: none; }

.js .case-detail__kicker {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 380ms var(--ease-out-quint), transform 380ms var(--ease-out-quint);
}
.js .case-detail__kicker.is-entered { opacity: 1; transform: none; }

.js .case-detail__title {
  clip-path: inset(0 0 100% 0);
  transform: translateY(8px);
  transition: clip-path 680ms var(--ease-out-quint), transform 680ms var(--ease-out-quint);
}
.js .case-detail__title.is-entered { clip-path: inset(0 0 0% 0); transform: none; }

.js .case-detail__dek {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms var(--ease-out-quint), transform 500ms var(--ease-out-quint);
}
.js .case-detail__dek.is-entered { opacity: 1; transform: none; }

.js .case-detail__facts > div {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 380ms var(--ease-out-quint), transform 380ms var(--ease-out-quint);
  transition-delay: calc(var(--fact-i, 0) * 70ms);
}
.js .case-detail__facts > div.is-entered { opacity: 1; transform: none; }

.js .case-detail__hero-visual {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 640ms var(--ease-out-quint), transform 640ms var(--ease-out-quint);
}
.js .case-detail__hero-visual.is-entered { opacity: 1; transform: none; }

/* Scroll-reveal for section headings */
.js .case-section-head {
  clip-path: inset(0 0 100% 0);
  transform: translateY(6px);
  transition: clip-path 560ms var(--ease-out-quint), transform 560ms var(--ease-out-quint);
}
.js .case-section-head.is-visible { clip-path: inset(0 0 0% 0); transform: none; }

/* Scroll-reveal for body content (paragraphs, lists, figures) */
.js .case-body-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 480ms var(--ease-out-quint), transform 480ms var(--ease-out-quint);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .case-body-reveal.is-visible { opacity: 1; transform: none; }

/* Metrics — staggered per item */
.js .case-detail__metrics li {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 480ms var(--ease-out-quint), transform 480ms var(--ease-out-quint);
  transition-delay: var(--metric-i, 0ms);
}
.js .case-detail__metrics li.is-visible { opacity: 1; transform: none; }

/* Footer blocks */
.js .case-footer-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 440ms var(--ease-out-quint), transform 440ms var(--ease-out-quint);
  transition-delay: var(--footer-i, 0ms);
}
.js .case-footer-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .case-nav,
  .js .case-detail__kicker,
  .js .case-detail__title,
  .js .case-detail__dek,
  .js .case-detail__facts > div,
  .js .case-detail__hero-visual,
  .js .case-section-head,
  .js .case-body-reveal,
  .js .case-detail__metrics li,
  .js .case-footer-reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}