/* gallery (templates/components/gallery.html) and the search results grid.
 * The gallery's columns are fluid: as many as fit tiles at least --tile-min wide,
 * and never fewer than two (site.css sets it, templates retune it). The results'
 * come from --results-cols, which site.css widens per breakpoint. From 900px the
 * gallery is wide (site.css, "Wide"). */

.gallery { position: relative; }
.gallery__title { margin-bottom: 12px; }
.gallery__empty { padding-top: 24px; padding-bottom: 24px; }

/* Download all; its parts: downloads.css. */
.gallery__download { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; margin-bottom: 12px; }
.gallery__download-btn { width: auto; min-height: 44px; padding: 0 16px; gap: 8px; }
.downloads__count { color: var(--muted); font-weight: 500; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 50% - var(--gallery-gap) / 2), 1fr));
  gap: var(--gallery-gap);
}
.grid--results { grid-template-columns: repeat(var(--results-cols), minmax(0, 1fr)); gap: 8px; }

.thumb {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--r-thumb);
  background: var(--tile);
}
.grid--portrait .thumb { aspect-ratio: 4 / 5; }
.grid--landscape .thumb { aspect-ratio: 4 / 3; }
.grid--results .thumb { aspect-ratio: 3 / 4; border-radius: var(--r-tile); }
/* Mosaic: the first of every eight tiles is a 2x2 feature. `dense` backfills
   the holes, so the grid reflows at any column count. Tiles are counted among the
   photos only (`of .thumb`): the evening sponsor's card between them doesn't shift it. */
.grid--mosaic { grid-auto-flow: dense; }
.grid--mosaic .thumb:nth-child(8n + 1 of .thumb) { grid-column: span 2; grid-row: span 2; }

/* Captioned: the photo keeps its ratio and the caption sits under it. */
.grid--captioned .thumb { aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; }
.grid--captioned .thumb img { height: auto; aspect-ratio: 1; border-radius: var(--r-thumb); background: var(--tile); }
.grid--captioned.grid--portrait .thumb img { aspect-ratio: 4 / 5; }
.grid--captioned.grid--landscape .thumb img { aspect-ratio: 4 / 3; }
.grid--captioned .thumb:hover img { transform: none; opacity: 0.9; }
.thumb__caption {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.thumb:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .thumb img { transition: none; } }
/* A guest's own photo (c.guest_upload): a small label in the top corner (the bottom
   ones are the results' moment chip, the debug badge and a bib search's tag), on a
   scrim so it reads over any photo. */
.thumb__guest {
  position: absolute;
  top: 6px;
  left: 6px;
  max-width: calc(100% - 12px);
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--scrim-strong);
  color: var(--on-scrim);
  font: 600 11px/1.3 var(--sans);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
/* Its "Report" flag, in the opposite corner: lightbox.js opens the report page on a tap
   (it is aria-hidden; the lightbox carries the same action as a real link). */
.thumb__guest { max-width: calc(100% - 52px); }
.thumb__report {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--scrim-strong);
  color: var(--on-scrim);
  cursor: pointer;
}
.thumb__report:hover { background: var(--scrim); }
.thumb__badge {
  position: absolute;
  left: 6px; bottom: 6px;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--badge-bg);
  color: var(--on-scrim);
  font: 12px/1.2 ui-monospace, monospace;
}

/* Moments (grid--moments): a heading row where each moment begins. In a mosaic
   each moment opens on its feature tile, and the grid fills in order (no dense
   backfilling), so no photo lands above its own moment's heading. */
.moment-head {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 10px;
  min-width: 0;
  padding: 20px 0 8px;
}
.moment-head:first-child { padding-top: 4px; }
/* A hidden moment: its photos set apart by a rule, without a heading. */
.moment-head--quiet { padding: 0; margin: 12px 0; height: 1px; background: var(--border); }
.moment-head--quiet:first-child { margin-top: 0; }
.moment-head__name {
  margin: 0;
  min-width: 0;
  font: var(--heading-weight) 18px/1.25 var(--display);
  text-transform: var(--heading-case);
  letter-spacing: var(--heading-tracking);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.moment-head__meta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.grid--mosaic.grid--moments { grid-auto-flow: row; }
.grid--mosaic.grid--moments .thumb:nth-child(8n + 1 of .thumb) { grid-column: auto; grid-row: auto; }
.grid--mosaic.grid--moments .moment-head + .thumb { grid-column: span 2; grid-row: span 2; }

.gallery__more { margin-top: 12px; }
@media (min-width: 900px) {
  .gallery__more { max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* "New photos appear automatically." under the grid (the gallery's poll adds them). */
.gallery__auto { margin: 12px var(--gutter) 0; font-size: 13px; line-height: 1.4; color: var(--muted); text-align: center; }