/* Prints: a plain catalogue. One entry per print: the photo, flat and uncropped, and its details on the
   same ruled label | content grid as the About list. Side by side on wide screens, stacked on a phone. */

.print-list { display: grid; gap: var(--s-48); }
.print-item { display: grid; gap: var(--gutter); align-items: start; }
@media (min-width: 1100px) {
  .print-item { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
/* the photo keeps its own shape: as wide as the column allows, never taller than most of the screen */
.print-figure { margin: 0; }
.print-figure img { width: auto; max-width: 100%; height: auto; max-height: 80vh; max-height: 80svh; }

/* the details: ruled rows; the first sits level with the top of the photo, with no rule above it.
   Beside a photo the label column is the narrow one phones use everywhere, so the details keep their room. */
.print-info { display: grid; }
.print-row {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: var(--s-16);
  padding: var(--s-16) 0; border-top: 1px solid var(--line);
}
.print-row:first-child { padding-top: 0; border-top: 0; }
.print-row:last-child { border-bottom: 1px solid var(--line); }
.print-row-body { display: grid; gap: var(--s-8); min-width: 0; }
.print-row:first-child .print-row-label, .print-row:first-child h3 { text-box: trim-start cap alphabetic; }
/* the controls' hit area is taller than a line: pull it back so their text sits on the row's first line */
.print-row-body > .acts { margin-block: calc((var(--lh) - var(--s-48)) / 2); }