/* ══════════════════════════════════════════════════════════════════
   photo-grid.css — uniform squares.

   The column COUNT is never written down. Figma draws four widths and
   they resolve to four different answers:

     mobile    345 content → 2 columns, cell 162.5   (51:1232)
     pane      573 content → 2 columns, cell 275.5   (51:1175)
     pane 1728 1021 content → 3 columns, cell 325.7  (52:1572)
     expanded  1224 content → 4 columns, cell 289.5  (52:1326)

   Cell size ranges 162 → 326, so there is no fixed cell to lay out
   against; what IS fixed is the gap (22, and 20 on mobile — the same
   drop css/photo-linear.css makes from 44 to 40) and a floor on how
   small a cell may get before a column is dropped.

   auto-fill + minmax expresses exactly that, and recomputes on resize
   and on the expand toggle without any JS: the browser fits
   floor((W + gap) / (min + gap)) tracks and shares the remainder.

   The floor is 250, not the 275 the pane frame might suggest. At 275
   the pane case lands on (573+22)/297 = 2.003 — true by three
   thousandths, so a window three pixels narrower than the 1280 frame
   would drop the pane to a SINGLE column. 250 reproduces all three
   desktop frames (2.19, 3.83, 4.58 → 2, 3, 4) with room on both
   sides of every boundary.

   Mobile is a deliberate exception rather than a consequence of the
   rule: 345 content would fit only one 250 track, and Sandy's frame
   draws two. Below the breakpoint the count is stated outright.
══════════════════════════════════════════════════════════════════ */

.photo-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  gap:22px;
  width:100%;
}

@media (max-width:719px){
  .photo-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
}

/* Square container, image CONTAINED inside it — a portrait shows
   background to its left and right, a landscape above and below, and
   nothing is ever cropped (Sandy, 2026-08-13). This is the one place
   a photograph's own `kind` is ignored entirely: linear sizes its box
   FROM the kind, the grid gives every photograph the same box
   regardless of it.

   js/photo-progressive.js reads this object-fit back off the element
   and prints its cells into the same contained rectangle, so the
   canvas and the image agree — scaling the source to the square
   instead would stretch a portrait sideways while it printed and
   snap it back at the swap. */
/* height:auto is load-bearing, not tidiness. js/photo-layouts.js sets
   the width/height ATTRIBUTES on every photograph so the browser has
   a ratio to reserve before the file lands, and those attributes
   arrive as a presentational height (100px for a square, 200px for a
   landscape). aspect-ratio only gets to decide an axis that is auto,
   so without this the cell keeps the attribute's height and comes out
   132x100 instead of square — which is exactly what it did. */
img.photo-cell{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  cursor:pointer;                 /* click opens the loupe */
}

/* Same treatment as css/photo-linear.css's — see its comment for why
   a photograph gets a focus ring at all (the loupe restores focus
   here on close, and a visitor who closed with Escape has to be able
   to see where they landed). */
img.photo-cell:focus-visible{
  outline:1px solid var(--fg);
  outline-offset:2px;
}