/* =============================================================================
   CASE STUDIES  ·  page layout only (tokens + skeletons live in styles.css)
   One real case (Cario) + an honest empty slot. Cards use the problem /
   built / shipped / numbers anatomy.
   ========================================================================== */

.cases-intro { padding-bottom: var(--s-7); }

.cases-intro__line {
  font: 400 var(--fs-h4) var(--font-sans);
  color: var(--ink-2);
  max-width: 38rem;
  margin-top: var(--s-4);
}

.case {
  background: var(--bg-elev);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-6);
}

.case + .case { margin-top: var(--s-6); }

.case__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-3);
}

.case__num {
  font: 400 0.75rem var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-3);
  text-transform: uppercase;
}

.case__name {
  font: 500 var(--fs-h3) var(--font-sans);
  letter-spacing: var(--ls-tight);
}

.case__status {
  font: 400 0.6875rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill);
}

.case__grid {
  margin-top: var(--s-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
}

.case__block h3 {
  font: 400 0.75rem var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-top: 1px solid var(--line-strong);
  padding-top: var(--s-2);
}

.case__block p {
  margin-top: var(--s-2);
  font-size: var(--fs-small);
  color: var(--ink-2);
}

.case__numbers {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  border-top: 1px solid var(--line);
  padding-top: var(--s-4);
}

.case__stat { min-width: 8rem; }

.case__stat b {
  display: block;
  font: 500 var(--fs-h4) var(--font-sans);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
}

.case__stat span {
  font: 400 0.75rem var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.case__links {
  margin-top: var(--s-5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
}

.case__src {
  margin-top: var(--s-4);
  font: 400 0.6875rem var(--font-mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* the honest empty slot */
.case--empty {
  background: transparent;
  border: 1.5px dashed var(--line-strong);
}

.case--empty p { max-width: 40rem; color: var(--ink-2); margin-top: var(--s-3); }

@media (max-width: 60em) {
  .case__grid { grid-template-columns: 1fr; }
}