/* ============================================
   cases — node 4:220 (mobile 390, DRAWN). Desktop 1024–1920 INVENTED (mobile-only-mode):
   title `stack` + cards `grid-2` (BA-INV-CASES-1); tablet 768–1023 `grid-2` (BA-INV-CASES-2).
   Pattern A (.container on the section, no bg). Fluid values: brief/cases.md §2
   (anchor 390, --vw-base 1440 INVENTED). Not interactive (BA-LINK-C1).
============================================ */

/* Section-scoped spacing — mobile (DRAWN @390): gap 40 / 16 / 10 */
.cases {
  --cases-gap-40: clamp(33px, calc(40px + (var(--max-vw) - 390px) * 0.015), 60px);
  --cases-gap-16: clamp(13px, calc(16px + (var(--max-vw) - 390px) * 0.015), 24px);
  --cases-gap-10: clamp(8px, calc(10px + (var(--max-vw) - 390px) * 0.015), 15px);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: var(--cases-gap-40);                       /* 4:221 gap 40 (title → grid) */
  /* longhands only — never a padding shorthand on .container */
  padding-top: clamp(41px, calc(50px + (var(--max-vw) - 390px) * 0.015), 100px);
  padding-bottom: clamp(41px, calc(50px + (var(--max-vw) - 390px) * 0.015), 100px);
}

/* Title 4:222 — token h2 (Oswald 600, 48 @390, lh 0.88, ls -0.04em, UPPER) */
.cases__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: left;
}

/* Grid 4:223 — mobile: one column, gap 40 */
.cases__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--cases-gap-40);
  align-items: start;                                 /* D5 / D-CASES-7: natural heights */
}

/* Card 4:224 / 4:230 — column, image → meta gap 16 */
.cases__card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  row-gap: var(--cases-gap-16);
  min-width: 0;
}

/* Image 4:225 / 4:231 — 16:9 box, composed Figma render, #D9D9D9 while loading */
.cases__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background-color: var(--color-img-placeholder);
}

/* Meta 4:226 / 4:232 — column, gap 10 (title → result → result) */
.cases__meta {
  display: flex;
  flex-direction: column;
  row-gap: var(--cases-gap-10);
}

/* Card title 4:227 / 4:233 — token card-title (Oswald 600, 32 @390, lh 1.1, ls 0, UPPER) */
.cases__card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-card-title);
  line-height: var(--lh-card-title);
  letter-spacing: var(--ls-card-title);
  text-transform: uppercase;
  color: var(--color-ink);
  text-align: left;
}

/* Results list — reset (bullets already off in base.css) */
.cases__results {
  display: flex;
  flex-direction: column;
  row-gap: var(--cases-gap-10);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Result line 4:228/229/234/235/236 — token title-m (Onest 600, 16 @390, lh 1.2, ls -0.03em), JUSTIFIED as drawn */
.cases__result {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-title-m);
  line-height: var(--lh-title-m);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  text-align: justify;
}

/* PSEUDO-TABLET 768–1023 (no tablet layer): M-767 + (vw-768)*0.025 · cards grid-2 (BA-INV-CASES-2) */
@media (min-width: 768px) {
  .cases {
    --cases-gap-40: clamp(45.66px, calc(45.66px + (var(--max-vw) - 768px) * 0.025), 60px);
    --cases-gap-16: clamp(21.66px, calc(21.66px + (var(--max-vw) - 768px) * 0.025), 24px);
    --cases-gap-10: 15px;

    padding-top: clamp(55.66px, calc(55.66px + (var(--max-vw) - 768px) * 0.025), 100px);
    padding-bottom: clamp(55.66px, calc(55.66px + (var(--max-vw) - 768px) * 0.025), 100px);
  }

  .cases__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* DESKTOP 1024–1920 (INVENTED D-base @1440): D-base * vw/1440 · cards grid-2 (BA-INV-CASES-1) */
@media (min-width: 1024px) {
  .cases {
    --cases-gap-40: clamp(43px, calc(60px * (var(--max-vw) / var(--vw-base))), 80px);
    --cases-gap-16: clamp(17px, calc(24px * (var(--max-vw) / var(--vw-base))), 32px);
    --cases-gap-10: clamp(11px, calc(15px * (var(--max-vw) / var(--vw-base))), 20px);

    padding-top: clamp(71px, calc(100px * (var(--max-vw) / var(--vw-base))), 133px);
    padding-bottom: clamp(71px, calc(100px * (var(--max-vw) / var(--vw-base))), 133px);
  }
}