/* ============================================================
   Gallery — justified photo grid + server-cut rows
   Loaded right after gallery.css: the --rows modifier must win
   the same-specificity cascade (extra_head renders too early).
   ============================================================ */

/* ---------- Justified photo grid (Google-Photos-like) ----------
   Each tile grows proportionally to its aspect ratio, so every row
   fills the container at a common height; ::after stops the last
   row from over-stretching. */
.gallery-photo-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.gallery-photo-grid::after {
  content: "";
  flex-grow: 1000000;
  flex-basis: 0;
}

.gallery-photo-card {
  margin: 0;
  --ratio: calc(var(--w, 4) / var(--h, 3));
  flex-grow: calc(var(--ratio) * 100);
  flex-basis: calc(var(--ratio) * 14rem);
  aspect-ratio: var(--w, 4) / var(--h, 3);
  min-width: 0;
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--surface-2);
  cursor: zoom-in;
  transition:
    box-shadow var(--dur) var(--ease-standard),
    filter var(--dur) var(--ease-standard);
}

.gallery-photo-card:hover {
  box-shadow: var(--shadow-md), var(--glow-accent);
  filter: brightness(1.06);
}

.gallery-photo-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .gallery-photo-card {
    flex-basis: calc(var(--ratio) * 9rem);
  }
}

/* ---------- Server-cut rows (public album only) ----------
   The server groups photos into complete rows (row_layout.py) and pages
   by whole rows, so a beforeend batch never reflows painted rows. The
   --partial tail row is stretched by its own ::after absorber; on mobile
   rows "unpack" (display: contents) and the flat feed of the base grid
   takes over. */
.gallery-photo-grid--rows { display: block; }
.gallery-photo-grid--rows .gallery-photo-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.gallery-photo-grid--rows .gallery-photo-row--partial::after {
  content: "";
  flex-grow: 1000000;
  flex-basis: 0;
}
@media (max-width: 768px) {
  .gallery-photo-grid--rows { display: flex; flex-wrap: wrap; gap: var(--space-2); }
  .gallery-photo-grid--rows .gallery-photo-row { display: contents; }
}