/* =============================================================================
   ODUEX — /work/cutting-edge/ page stylesheet. Layout only.
   Every component here is core.css untouched. This file lays out the fact list,
   sets the aspect of the real exports, centres the handover split, and marks
   the one block still waiting on the client.
   ============================================================================= */

/* Four checkable facts under the hero. A <dl> because that is what it is. */
.page-case-study .case-facts{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6) var(--space-8);
  max-width: var(--measure);
  margin-top: var(--space-10);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
@media (max-width: 559px){
  .page-case-study .case-facts{ grid-template-columns: minmax(0, 1fr); }
}
/* Label reuses .eyebrow; only the gap closes, so term and value read as one. */
.page-case-study .case-facts dt{ margin-bottom: var(--space-2); }
.page-case-study .case-facts dd{ color: var(--ink); }

/* The "before" export is the salon's old site captured full page. The frame
   defaults to 16/10, which would crop a strip off the top and bottom of it. */
.page-case-study .case-shot{ --ratio: 3 / 2; }

/* A figure needs more air than the paragraph rhythm gives, or its caption reads
   as more body copy. Same spacing wherever a block follows a run of prose. */
.page-case-study .case-figure{ margin-top: var(--space-12); }

/* Handover: copy beside the photograph. .grid-2 collapses itself below 760px,
   so centring is the only thing left to say. */
.page-case-study .case-split{ align-items: center; }

/* The one unfinished block on the page. Dashed rather than solid so it reads as
   a deliberate gap before the label inside it is even read. It is a written,
   honest blank, not a placeholder the guard script can catch, so it needs
   replacing by hand the day the owner signs her words off. */
.page-case-study .case-slot{ border: 1px dashed var(--line-strong); }

/* The H1 steps down on a narrow phone, because a masked line that wraps reveals
   as one block. --fs-hero bottoms out at its 2.90rem floor while the column
   keeps shrinking, so the longest line overruns below 390px. Same step, and
   the same reason, as the homepage and teardown heroes. */
@media (max-width: 400px){
  .page-case-study h1.display-hero{ font-size: var(--fs-4xl); }
}