/* ─────────────────────────────────────────────────────────────
   Mo-Hi lost-pet poster — fixed print canvas.
   Two classes on .poster drive all four states:
     lang-zh | lang-en   → A4 (210×297mm) | US Letter (8.5×11in)
     photos-2 | photos-1 → two 1:1 stacked | one 2:3 portrait
   Nothing here is responsive: the canvas is a sheet of paper.
   ───────────────────────────────────────────────────────────── */

:root {
  --ink:      #1a1a1a;
  --rule:     #222222;
  --red:      rgb(177, 35, 35);
  --muted:    #6b6b6b;
  --hairline: #c9c9c9;
  --rule-gap: 4.5mm;
}

/* .poster itself must be included, or its 12mm padding is added to the sheet size */
.poster, .poster * { box-sizing: border-box; }
.poster * { margin: 0; padding: 0; }

.poster {
  position: relative;
  overflow: hidden;
  background: #ffffff;
  color: var(--ink);
  /* Self-contained: a host page's text-align/line-height must not leak in */
  text-align: left;
  line-height: normal;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  padding: 12mm 12mm 10mm;
  /* Column layout so .p-body simply takes whatever the head and subtitle leave.
     A hardcoded height calc here would silently overflow the moment any spacing
     above it changes. */
  display: flex;
  flex-direction: column;
}
.poster.lang-zh { width: 210mm; height: 297mm; font-family: 'Noto Sans SC', 'IBM Plex Sans', sans-serif; }
.poster.lang-en { width: 8.5in; height: 11in; }

/* ── 1. Title band ── */
.p-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6mm; height: 30mm; flex: 0 0 auto;
}
.p-title { flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; }
/* Both dimensions capped => always proportional, never stretched */
.p-title img { max-width: 100%; max-height: 100%; width: auto; height: auto; display: block; }
.p-qr { flex: 0 0 auto; text-align: center; }
.p-qr img { width: 24mm; height: 24mm; display: block; background: #fff; padding: 1.5mm; }
.p-qr figcaption { font-size: 8.5pt; color: var(--muted); margin-top: 1mm; }

/* ── 2. Subtitle ── */
.p-subtitle {
  text-align: center; font-weight: 700; font-size: 36pt; line-height: 1.1;
  margin-top: 4mm; margin-bottom: 5mm; white-space: nowrap; flex: 0 0 auto;
}
/* Only the pet's name is underlined. border-bottom rather than text-decoration:
   the PNG rasteriser drops underline-offset/thickness, and this matches the
   rule technique used for field values below. */
.p-subtitle .pet-name {
  display: inline-block; border-bottom: 2px solid currentColor;
  padding-bottom: 1px; line-height: 1;
}

/* ── 3. Two columns with a divider ── */
.p-body { display: flex; align-items: stretch; flex: 1; min-height: 0; }
.p-left  { flex: 0 0 52%; display: flex; flex-direction: column; padding-right: var(--rule-gap); }
.p-right { flex: 0 0 48%; padding-left: var(--rule-gap); border-left: 0.5mm solid var(--rule); }

.p-photos { display: flex; flex-direction: column; gap: 2mm; }
.p-photos figure { position: relative; overflow: hidden; border: 0.35mm solid var(--rule); }
.p-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photos-2 .p-photos figure { aspect-ratio: 1 / 1; }
.photos-1 .p-photos figure { aspect-ratio: 2 / 3; }
.photos-1 .p-photos figure + figure { display: none; }

.p-notes {
  margin-top: auto; padding-top: 2.5mm; font-size: 9pt; line-height: 1.45; color: var(--muted);
  /* Two stacked squares can never fill the column height (they are width-bound),
     so the leftover space is unavoidable — this rule makes it read as a deliberate
     separation above the platform footer rather than a hole. */
  border-top: 0.3mm solid var(--hairline);
}
.p-notes strong { color: var(--ink); font-weight: 700; }

/* ── 4. Right column ── */
.field { margin-bottom: 0.2em; }
.field-label { font-weight: 700; font-size: 18pt; line-height: 1; display: block; }
/* The rule belongs to the container, not the text, so every line shares one grid */
.field-value {
  display: block; width: 100%; border-bottom: 1px solid var(--rule);
  font-weight: 400; font-size: 18pt; line-height: 1.18;   /* wrapped values need air */
  padding-bottom: 1mm; margin-bottom: 1.5mm; word-break: break-word;
}

/* US Letter is 18mm shorter than A4 and this record does not fit it at A4 metrics.
   Per spec, type may shrink a limited amount rather than overflow — 18pt -> 17pt is
   about 5%, still comfortably readable at arm's length on a printed sheet. */
.lang-en .p-subtitle { margin-top: 2mm; }
.lang-en .field-label,
.lang-en .field-value { font-size: 17pt; }
.lang-en .field-value { line-height: 1.06; }
.lang-en .field { margin-bottom: 0.12em; }
.lang-en .p-contact-title,
.lang-en .contact-label,
.lang-en .contact-value { font-size: 18pt; }

.p-reward { margin-top: 2mm; }
.p-reward .field-label { font-size: 20pt; }
.p-reward .field-value { font-size: 28pt; font-weight: 700; color: var(--red); line-height: 1.05; }

.p-contact { margin-top: 2mm; }
.p-contact-title { font-weight: 700; font-size: 20pt; line-height: 1; margin-bottom: 1.5mm; }
/* Fixed label column => Tel and Email rules share start and end points exactly */
.contact-row { display: flex; align-items: baseline; gap: 2mm; margin-bottom: 1.5mm; }
.contact-label { flex: 0 0 18mm; font-size: 20pt; font-weight: 400; line-height: 1; }
.contact-value {
  flex: 1 1 auto; border-bottom: 1px solid var(--rule);
  font-size: 20pt; line-height: 1; padding-bottom: 1mm; word-break: break-all;
}

/* ── Print ── */
@page { margin: 0; }
@media print {
  body { background: #fff; padding: 0; margin: 0; display: block; }
  .poster { box-shadow: none; margin: 0; }
  .poster.print-hide { display: none !important; }
  .no-print { display: none !important; }
}