/* ENTRY GALLERY (render/entry-gallery.ts): the four-ways-in gallery shared by Who it's for and Start Here (founder,
   2026-10-17: one component, so the layout is solved once). The Foundations Production Checklist gallery, value for value
   (assets/production-checklist.css, .pc-grid / .pc-item, on foundations/production-checklist; move to shared classes
   when both land): 16:9 thumbnails with a hairline edge, no card box, the purple ring and a lift in brightness on hover,
   the title underlined. Two across and two rows at the full content width, one on phones (founder, 2026-10-17). On a
   desktop the whole page fits the window: the thumbnails keep the full column width and their height is capped so both
   rows fit, which makes them wider than 16:9 on shorter windows (cropped by object-fit, never stretched). */

.eg-wrap { container-type: inline-size; }
.eg-gal { list-style: none; margin: 0; padding: 0; display: grid; column-gap: var(--s4); grid-template-columns: 1fr; }
@container (min-width: 28rem) { .eg-gal { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s5); } } /* 2 × 13rem + gap */
/* the cards share their rows (subgrid), so titles, lines and Explore sit level across a row however the words wrap;
   the space between rows of cards is the item's own margin, as subgrid tracks carry no gap */
.eg-gal > li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; min-width: 0; margin-bottom: var(--s6); }
.eg-gal > li:last-child { margin-bottom: 0; }
@container (min-width: 28rem) { .eg-gal > li:nth-last-child(-n+2) { margin-bottom: 0; } }
.eg-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; color: var(--ink); text-decoration: none; border-radius: var(--r-soft); }
.ia .eg-card { color: var(--ink); }
.eg-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.eg-card__pic { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-soft); background: var(--paper-3);
  outline: 1px solid var(--rule); outline-offset: -1px; }
.eg-card__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: filter .2s ease;
  /* per photo (set by the page's data): where the crop centres, and a zoom for a subject that's small in frame */
  object-position: var(--eg-focal, 50% 30%); transform: scale(var(--eg-zoom, 1)); transform-origin: var(--eg-focal, 50% 30%); }
.eg-card:is(:hover, :focus-visible) img { filter: brightness(1.12); }
.eg-card:is(:hover, :focus-visible) .eg-card__pic { outline: 2px solid var(--brand); outline-offset: -2px; }
.eg-card__name { margin: var(--s3) 0 0; font: 600 var(--t-md)/1.25 var(--ui); letter-spacing: -.005em; color: var(--ink); text-wrap: balance; }
.eg-card:is(:hover, :focus-visible) .eg-card__name { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.eg-card__meta { margin-left: var(--s2); font: 400 var(--t-sm)/1 var(--mono); color: var(--ink-3); white-space: nowrap; } /* a fact beside the title (Workshops' durations) */
.eg-card__line { margin-top: var(--s1); font: var(--t-base)/1.45 var(--ui); color: var(--ink-2); max-width: 36ch; text-wrap: pretty; }
.eg-card__go { align-self: end; padding-top: var(--s2); font: 600 var(--t-sm)/1 var(--ui); color: var(--brand); }
@media (prefers-reduced-motion: reduce) { .eg-card__pic img { transition: none; } }

/* ONE SCREEN on desktop: each thumbnail is at most half of what the window has left once the title block (~9rem),
   two caption blocks (~6.5rem each), the gap between rows and the bottom padding (~3rem) are taken: 26.5rem in all.
   Never shorter than 10rem. Tablets and phones keep 16:9 and scroll. */
@media (min-width: 64rem) {
  main:has(.eg-gal) { padding-bottom: var(--s5); }
  .eg-gal > li { margin-bottom: var(--s5); }
  .eg-gal > li:nth-last-child(-n+2) { margin-bottom: 0; }
  /* the column's own width (100cqi is the gallery) sets the 16:9 height; the window caps it, and the width stays full */
  @container (min-width: 28rem) {
    .eg-card__pic { aspect-ratio: auto; width: 100%;
      height: min((100cqi - var(--s5)) / 2 * 9 / 16, max(10rem, (100dvh - 26.5rem) / 2)); }
  }
}