/* css/page-case.css : case-1.html ... case-5.html (shared). Owner: wave D.
   Variant A (cases 1, 3, 5): mahwah-int/02 strict article (v2-specs/interiors-spec-case-A.md).
   Variant B (cases 2, 4): humphries-int/06 procedure rows (v2-specs/interiors-spec-case-B.md).
   Loaded LAST, after tokens.css + site.css + interior.css. Every selector is scoped to this page's own
   classes inside .sheet-body / .sheet-exit (or body[data-page]); the chassis is never restyled. */

/* ------------------------------------------------------------------ shared: byline + exit row */
.case-byline { margin: 0 0 18px; }
/* previous / next ride the exit row, pushed to the well's right edge (the pill keeps the left edge) */
.case-seq { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 32px; }

/* ------------------------------------------------------------------ variant A: paired figure */
/* mahwah-int/02: the page photo = 100% of the well. Two real photos, 4 px gutter; each half keeps one
   aspect so both halves are always the same height */
.case-pair { display: grid; grid-template-columns: 1fr 1fr; column-gap: 4px; margin: 0; }
.case-shot { margin-block: 0; min-width: 0; }   /* margin-inline stays free for the chassis .bleed */
.case-shot img {
  display: block; width: 100%; height: auto; border-radius: 0;
  aspect-ratio: 561.05 / 563.05; object-fit: cover;          /* a 2:1 pair at the 1126 well */
}
/* case 1: case_1a.jpg is 392 px tall, so the pair is 1126 x 392 (never above natural size; D-A2) */
body[data-page="case-1"] .case-shot img { aspect-ratio: 561.05 / 392; }
.case-shot figcaption { margin-top: 10px; font: 600 14px/20px var(--font-body); letter-spacing: 0.2px; color: var(--steel); }
.case-pair + .sheet-deck { margin-top: 29px; }

/* ------------------------------------------------------------------ variant B: procedure rows */
/* humphries-int/06: 520 x 293 photo left, term + paragraph right (20 gap), never alternating;
   hairline 45 below each photo, next photo 45 below the hairline; a hairline closes the last row */
.case-rows { margin-top: 14px; }                 /* byline 18 + 14 = the recipe's 32 before the first photo */
.case-row {
  display: grid; grid-template-columns: 520px minmax(0, 1fr); column-gap: 20px; align-items: start;
  padding: 45px 0; border-bottom: 1px solid var(--steel);
}
.case-row:first-child { padding-top: 0; }
.case-media { margin: 0; }
.case-photo {
  display: block; width: 520px; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: 0; box-shadow: var(--shadow-df);
}
/* case 4: the tall films CONTAINED on a neutral mat in the photo column, never cropped (D-B4) */
.case-mat {
  box-sizing: border-box; display: flex; justify-content: center;
  width: 520px; height: 520px; padding: 24px;
  background: #fff; box-shadow: var(--shadow-df);
}
.case-mat img { display: block; height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.case-term {
  margin: 0 0 16px; font: 400 25px/30px var(--font-display); letter-spacing: 0.5px;
  color: var(--steel-pale);
}
.case-text p { max-width: var(--measure); font: 400 16px/27.2px var(--font-body); color: var(--body-ink); }
/* the photo-less Treatment row: the term hangs in the photo column, the paragraph keeps the text axis */
.case-row--text .case-term { grid-column: 1; }
.case-row--text .case-text { grid-column: 2; }

/* ------------------------------------------------------------------ <= 1119: exit row + rows stack */
@media (max-width: 1119px) {
  .case-seq { margin-left: 0; flex-basis: 100%; }
  /* humphries: rows stack photo first (stated explicitly) */
  .case-row { grid-template-columns: minmax(0, 1fr); }
  .case-media { order: 0; }
  .case-text { order: 1; margin-top: 24px; }
  .case-row--text .case-term, .case-row--text .case-text { grid-column: 1; }
  .case-row--text .case-text { margin-top: 0; }
}

/* ------------------------------------------------------------------ phone (<= 600) */
@media (max-width: 600px) {
  /* variant A: one column, before then after, each full-bleed to the sheet's inner edges */
  .case-pair { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .case-shot { width: var(--sheet-inner); }
  /* case_1a is 561 px wide: never above natural size between 587 and 600 (sweep finding) */
  body[data-page="case-1"] .case-shot { max-width: 561px; }
  .case-shot figcaption { padding-inline: var(--well-inset-phone); }
  .case-pair + .sheet-deck { margin-top: 18px; }
  /* variant B: media full-bleed, articulation shadow deleted, row rhythm x0.6 */
  .case-row { padding: 27px 0; }
  .case-row:first-child { padding-top: 0; }
  .case-photo { width: var(--sheet-inner); max-width: none; box-shadow: none; }   /* site.css img max-width:100% would clamp it */
  .case-mat { width: var(--sheet-inner); height: var(--sheet-inner); box-shadow: none; }
  .case-text { margin-top: 18px; }
  .case-seq { flex-direction: column; align-items: flex-start; }
  /* variant B leads with the deck (no media): at 34 / 24 px the pale H1 and the pale deck merged into
     one heading at the chassis 13 px gap (self-review r1), so the deck takes 12 more */
  .sheet-body > .sheet-deck:first-child { margin-top: 12px; }
}