/* ============================================================================
 * 1236 SHARED·KEEPSAKEPHOTOS — her photos of a phase, at the level she has.
 * ============================================================================
 * claims/card-1236.md. WHAT IT IS. The photo block of the phase report card
 * (1237 HOME·PHASE-REPORT) and the keepsake's other consumers: her photos from
 * these weeks, laid out by ONE dated rule — never a "best photo" guess, never
 * a nag (grid phase-report-photos.md, Andrew "Agree" 2026-09-19; pictures
 * redraw-1..5 signed 2026-10-03).
 *
 * THE LEVEL RULE IS THE CARD. The renderer picks the level from what she has;
 * a consumer never chooses a look:
 *   · many photos (3+) — the newest MILESTONE photo big (4:3) with its tag
 *     ("First smile · Wk 10"), start · middle · end beneath as 1:1 thumbs with
 *     "Week N" under each;
 *   · photos, none of them milestone photos — the LAST photo of the phase big,
 *     tagged "Week N", same strip beneath;
 *   · one or two photos — those photos large, side by side, week under each,
 *     no strip;
 *   · no photos — the phase's own drawing, no message (the drawing comes from
 *     the caller; WHICH drawing belongs to each phase is an OPEN ruling, not
 *     this card's).
 *
 * NOT 1161 SHARED·HEROPICTURE: that card's on-picture chip is an ACTION
 * (pencil+CHANGE / camera+ADD PHOTO, bottom-right) on HER hero — it invites a
 * tap. This block's tag is a LABEL (what/when, bottom-left, display face,
 * cream on ink) on a keepsake photo — it states, it never invites. Different
 * job; named in the build report.
 *
 * 🔴 SaMD: dates only. "Picked by date, same rule for everyone." No prop
 * exists for quality, favourites, or "best of"; the renderer renders only what
 * the caller passes, ordered by her own dates.
 *
 * TOKENS ONLY. Photo corners --radius-card (12). Tag ink is the dark
 * translucent of the signed pictures (rgba token-exception, pmc precedent);
 * tag text --cream-50. white-space: nowrap keeps a tag on one line at thumb
 * size (the 3901 fix to the 3898 fault, kept).
 * ============================================================================
 * STATES (cards.json): milestone-hero · photo-hero · few · drawing — the four
 * levels, all reachable from the same markup the renderer emits.
 */

.php {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}
/* the big picture — 4:3, the drawing wears the same box with no tag */
.php-hero {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-sunken);
}
.php-hero img,
.php-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* the label pinned bottom-left: what the picture is, or when it was */
.php-tag {
  position: absolute;
  left: var(--space-12);
  bottom: var(--space-12);
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-12);
  border-radius: var(--radius-pill);
  background: rgba(26, 58, 48, 0.72); /* token-exception */
  color: var(--cream-50);
  font-family: var(--font-display);
  font-size: var(--text-caption);
  font-weight: var(--weight-500);
  white-space: nowrap;
}
/* the row beneath the hero: the start·middle·end strip, or the one-two-large
 * pair — the count decides the size, the markup is one grammar */
.php-row {
  display: flex;
  gap: var(--space-8);
}
.php-cell {
  flex: 1;
  min-width: 0;
}
.php-thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface-sunken);
}
.php-wl {
  margin: var(--space-4) 0 0;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--leading-150);
  color: var(--ink-600);
}