/* Lofty Labz — case-study pages: hero, process scrollytelling, demo, gallery, results. */

.case-hero { padding: calc(var(--section-pad) * 0.7) var(--space-4); }
.breadcrumb { font-size: var(--step--1); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--accent); text-decoration: none; font-weight: 600; }
.breadcrumb [aria-current] { color: var(--text-soft); }
.case-category {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--case-accent, var(--accent));
  margin-bottom: var(--space-2);
}
.case-hero h1 { color: var(--white); max-width: 22ch; }
.case-outcome {
  font-size: var(--step-1);
  color: var(--text-soft);
  border-left: 3px solid var(--case-accent, var(--accent));
  padding-left: var(--space-3);
}

.case-brief .section-inner { max-width: 760px; }
.case-constraints {
  background: var(--lavender-2);
  border-left: 3px solid var(--purple);
  padding: var(--space-3) var(--space-4);
  font-size: var(--step--1);
}

/* ---------- process scrollytelling ---------- */
.case-process .section-inner { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-6); }
.case-process h2 { grid-column: 1 / -1; }
.process-nav {
  position: sticky;
  top: 96px;
  align-self: start;
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 2px solid var(--line);
}
.process-nav a {
  display: block;
  padding: 10px 0 10px 18px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--step--1);
  color: var(--text-soft);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: -2px;
}
.process-nav a.is-current {
  color: var(--purple);
  border-left-color: var(--case-accent, var(--purple));
}
.process-rail { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); }
.process-stage h3 { display: flex; align-items: baseline; gap: var(--space-3); }
.stage-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  color: var(--white);
  background: var(--purple);
  width: 30px;
  height: 30px;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-ctl);
  flex: none;
}
.process-stage > p { max-width: 58ch; }
.stage-artifact {
  margin: var(--space-4) 0 0;
  border: 1.5px solid var(--near-black);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--white);
}
.stage-artifact img { display: block; width: 100%; }
.stage-artifact figcaption {
  font-size: var(--step--1);
  color: var(--text-soft);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--line);
}
@media (max-width: 880px) {
  .case-process .section-inner { grid-template-columns: 1fr; }
  .process-nav { position: static; display: flex; flex-wrap: wrap; gap: 2px; border-left: 0; }
  .process-nav a { border-left: 0; border-bottom: 2px solid var(--line); padding: 8px 10px; }
  .process-nav a.is-current { border-bottom-color: var(--case-accent, var(--purple)); }
}

/* ---------- demo (Loop 3 C1: iframe on desktop, poster + CTA on small screens —
   nested-scrolling a 4,000px microsite inside a 200px letterbox helps no one) ---------- */
.case-demo .demo-open { margin-bottom: var(--space-4); }
.case-demo .demo-frame { margin: var(--space-2) 0 0; }
.case-demo .browser-frame { box-shadow: 6px 6px 0 0 #0d0717; }
.demo-poster { display: none; position: relative; text-decoration: none; }
.demo-poster img { display: block; width: 100%; height: auto; }
.demo-poster-cta {
  position: absolute;
  left: 50%;
  bottom: 18px;
  translate: -50% 0;
  background: var(--purple);
  color: var(--white);
  font-weight: 600;
  font-size: var(--step--1);
  padding: 12px 20px;
  border-radius: var(--radius-ctl);
  box-shadow: 4px 4px 0 0 var(--ink);
  white-space: nowrap;
}
@media (max-width: 880px) {
  /* compound selectors: must outrank site.css's `.demo-frame iframe` (0,1,1) */
  .demo-frame .demo-embed { display: none; }
  .demo-frame .demo-poster { display: block; }
}

/* ---------- gallery (generated-image slots) ---------- */
.case-gallery {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-4);
}
.case-gallery li { margin: 0; }
.case-gallery img {
  display: block;
  width: 100%;
  height: auto;
  /* Loop 6 A3: uniform display frame — mixed intrinsic ratios (4:3/1:1/16:9) made
     ragged rows. Renders of any ratio drop in; object-fit crops center. Zero-CLS holds. */
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border: 1.5px solid var(--near-black);
  border-radius: var(--radius-card);
  background: var(--lavender-2);
}

/* ---------- results ---------- */
.metric-cards {
  list-style: none;
  margin: var(--space-4) 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}
.metric-cards li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
  display: grid;
  gap: var(--space-1);
}
.metric-cards strong {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-3);
  color: var(--purple);
}
.metric-cards span { font-size: var(--step--1); color: var(--text-soft); }
.case-quote {
  margin: var(--space-5) 0 0;
  max-width: 56ch;
  border-left: 3px solid var(--case-accent, var(--purple));
  padding-left: var(--space-4);
}
.case-quote p { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); }
.case-quote cite { font-style: normal; font-size: var(--step--1); color: var(--text-soft); }

/* ---------- prev/next ---------- */
.case-next .section-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: var(--space-5);
}
.case-nav-link { font-weight: 600; text-decoration: none; }

/* ================= choreography pass (Loop 4) ================= */

/* rail fill: case.js sets --rail-progress 0..1 as the reader moves through the stages */
.process-nav {
  background: linear-gradient(
    to bottom,
    var(--case-accent, var(--purple)) calc(var(--rail-progress, 0) * 100%),
    var(--line) calc(var(--rail-progress, 0) * 100%)
  ) left / 2px 100% no-repeat;
  border-left: 0;
}
@media (max-width: 880px) {
  .process-nav { background: none; }
}

/* stage artifacts enter from the rail side (directional continuity) */
.js-reveal .process-stage .stage-artifact {
  transform: translateX(-16px);
}
.js-reveal .process-stage .stage-artifact.in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js-reveal .process-stage .stage-artifact { transform: none; }
}