/* gd-gallery-grid: justified rows (operator decision 2026-07-25, issue #3).
   Every photo keeps its natural aspect ratio; within a row, widths vary and
   HEIGHTS MATCH, so each row ends flush at both edges and no subject is ever
   cut off to fit a cell. (An aspect past the packer's clamp letterboxes
   inside its cell instead — whole photo, unfilled cell, never a crop.)
   Reading order runs left-to-right, then down.
   Selection-mode (not-mine) presentation is a property of the grid, not of
   one tile.

   CSS decides HOW MANY photos share a row; the component decides which ones
   and how wide each is (gallery-grid.js sets flex-grow per aspect ratio).
   `column-count` was the obvious way to do this and was wrong: engines
   balance multicol differently, and WebKit stacked a small gallery into one
   column with the rest of the screen empty. --cols is the contract between
   the two halves, so per-site tokens and breakpoints still live here. */
gd-gallery-grid {
  --cols: var(--gallery-columns, 2);
  display: flex;
  flex-direction: column;
  gap: var(--gap-grid);
  margin-top: var(--space-md);
}
@media (min-width: 640px) { gd-gallery-grid { --cols: var(--gallery-columns-md, 3); } }
@media (min-width: 900px) { gd-gallery-grid { --cols: var(--gallery-columns-lg, 4); } }
/* One row of the justified layout. The tiles' flex-grow (set per aspect by
   the component) divides the row's width; min-width 0 stops a wide photo
   claiming more than its share and breaking the flush edge. Row rhythm is
   the container's gap, so tiles carry no bottom margin of their own here. */
gd-gallery-grid .grow { display: flex; align-items: flex-start; gap: var(--gap-grid); }
gd-gallery-grid .grow > gd-photo-tile { min-width: 0; margin-bottom: 0; }

gd-gallery-grid.selecting gd-photo-tile::after { content: ''; position: absolute; inset: 0;
  border: 2px solid transparent; border-radius: var(--radius-photo); background: var(--dim-wash); }
gd-gallery-grid.selecting gd-photo-tile.marked::after { border-color: var(--garnet); background: var(--garnet-wash); }
gd-gallery-grid.selecting gd-photo-tile.marked::before { content: 'not mine'; position: absolute; z-index: 2;
  top: var(--space-xs); right: var(--space-xs); font: 700 11px/1 var(--font-ui); color: var(--ink);
  background: var(--garnet); padding: 5px 9px; border-radius: var(--radius-pill); }