/* ============================================================================
   HOME PAGE — IMAGE PLACEHOLDERS (RR-authored, 2026-08-12)

   home-lab.css (verbatim copy of design-lab/assets/lab.css) styles real <img>
   elements for the hero portrait/scene, the about portrait, and the
   treatment cards. This site does NOT ship the design lab's photographs —
   they are AI-generated mockup crops with synthetic, unlicensed faces, and
   design-lab/index.html says outright they "NEVER deploy" (see that file's
   header comment). This stylesheet gives a neutral placeholder block the
   same box geometry the real <img> rules expect, so the layout/rhythm reads
   correctly until the Phase 2 shoot supplies real photography.
   ============================================================================ */

/* position:absolute + inset:0, matching how home-lab.css's own .hero__portrait
   img / .about__portrait img / .card img rules fill their (relative- or
   absolute-positioned) parent — a plain width/height:100% block would
   collapse in .about__portrait, whose height comes only from min-height. */
.ph-image {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    135deg,
    var(--color-surface),
    var(--color-surface) 10px,
    var(--color-surface-deep) 10px,
    var(--color-surface-deep) 20px
  );
  border: var(--hairline);
  /* text-muted, not text-subtle: the caption paints on BOTH hatch stripes,
     and --color-text-subtle (4.85:1 on Linen, the only surface it was ever
     measured against) computes 4.62:1 on --color-surface and 4.35:1 on
     --color-surface-deep — under the 4.5:1 AA floor at 12px on the darker
     stripe (defect D42, the third recurrence of the one-surface-token root
     cause after D23/D36). --color-text-muted measures 5.52:1 and 5.20:1 on
     the same stripes (5.80:1 on Linen, where the hero's masked hatch fades
     out). Rule of the class: a text token is only usable on surfaces it has
     a computed ratio for. */
  color: var(--color-text-muted);
  font-family: var(--font-ui);
  font-size: var(--font-size-xs);
  letter-spacing: var(--tracking-mid);
  text-align: center;
  padding: var(--space-1);
}

/* Treatment cards bottom-align their own type (.card__body), so a centred
   caption collides with the title once a description wraps to three lines
   (defect D05, bar M4). On cards the caption sits in the upper dead area,
   clear of the text block at every viewport. */
.card .ph-image {
  align-items: flex-start;
  padding-top: var(--space-2);
  /* Jet, not text-muted: this comment used to say the caption sits "above the
     scrim's reach", and that was the wrong model. .card__scrim is inset:0 — it
     covers the WHOLE card, including the caption; only its ALPHA falls off
     upward (0.9 at the foot → 0.12 at the head). At the caption's measured
     band (y19–34 of a 329px card) the scrim still carries α≈0.144–0.163, which
     darkens the hatch to rgb(217,207,195)…rgb(210,197,182) — and on THAT
     composite --color-text-muted is 3.70:1 and --color-text-subtle 3.09:1,
     both under the 4.5:1 AA floor at 12px. So the four card captions were
     failing before this run and kept failing after the .ph-image token swap,
     because both colours had been checked against the BARE hatch.
     --color-text measures 8.36:1 on the darkest composite and 10.97:1 on the
     lightest bare surface — it clears every backdrop this component can land
     on. Rule of the class, restated properly: a text token is only usable
     where it has a computed ratio against the FULL composite backdrop —
     every layer that paints between the surface and the glyph, not just the
     surface's own colour. (defect D42, class fix; the fourth recurrence of the
     one-surface-token root cause after D23 → D36 → D42-instance.) */
  color: var(--color-text);
}

/* The hero portrait's caption sits in the slot's own dead space, never on the
   H1's optical line (defect D28, bar M4): centred, it ended 13px short of
   TUDOMÁNYA on the same cap band (y≈320–360 at 1440) and read as a run-in to
   the headline. Moved to the hatch's upper zone with a 64px inset — measured
   at 1440 that puts the caption line at y≈176–191, ≈38px below where the
   header wash releases (≈138) and ≈73px above the eyebrow; at the tightest
   burger-tier widths (1200) the gap to the eyebrow is still ≈45px. 96px was
   tried first and left only 13px at 1200. ≤900px keeps the centred caption:
   there the portrait sits above the whole text stack and its centre IS dead
   space (that composition passed). */
@media (min-width: 901px) {
  .hero__portrait .ph-image {
    align-items: flex-start;
    padding-top: var(--space-5);
  }
}