/* ============================================================
   Galleria a scorrimento (card-stack). Ogni fascia è alta quanto la sua foto
   (mai tagliata) e si aggancia solo quando il bordo inferiore tocca il fondo
   dello schermo: la foto scorre tutta, poi la successiva le sale sopra.
   Le proporzioni (--ar, o --ar1/--ar2 per le doppie) arrivano dal PHP.
   ============================================================ */

.gallery {
  position: relative;
  background: var(--c-navy);
}

.gallery__row {
  position: sticky;
  top: min(0px, calc(100svh - 100vw / var(--ar)));
  aspect-ratio: var(--ar);
  background: var(--c-navy);
  overflow: hidden;   /* senza questo l'altezza intrinseca della foto vince sull'aspect-ratio */
}

/* Fascia doppia: colonne a metà esatta, così il confine resta allineato da una
   fascia all'altra. Se le due foto hanno proporzioni diverse il ritaglio si
   divide tra le due (altezza = media geometrica, calcolata nel PHP). */
.gallery__row--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100%;   /* le celle seguono la fascia, non l'altezza intrinseca della foto */
}
.gallery__row--split .gallery__img { object-fit: cover; }

/* Proporzioni non ricavabili: la foto detta l'altezza, nessun aggancio. */
.gallery__row--auto {
  position: static;
  aspect-ratio: auto;
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.gallery__row--auto .gallery__img { height: auto; }