/**
 * lucalevi.com/gallery — solo la galleria.
 *
 * Carica dopo styles.css e ne usa i token: qui dentro non c'e' nessun colore
 * nuovo. Le uniche cose a colori della pagina sono le fotografie, che sono
 * il contenuto: la regola della scala di grigi vale per il sito, non per loro.
 *
 * La griglia e' gia' scritta nell'HTML da strumenti/genera.py; le misure
 * delle righe le mette assets/galleria-righe.js prima del disegno.
 */

.container-largo {
  margin-inline: auto;
  width: 100%;
  max-width: 96rem;
  padding-inline: 1rem;
}
@media (min-width: 640px) { .container-largo { padding-inline: 2rem; } }
@media (min-width: 1024px) { .container-largo { padding-inline: 3rem; } }

/* ---------------------------------------------------------------- testata */
.galleria-testata { padding-block: 3.5rem 2.5rem; }
@media (min-width: 1024px) { .galleria-testata { padding-block: 5rem 3.5rem; } }

.galleria-h1 {
  margin-top: 1rem;
  font-size: clamp(2.25rem, 6vw, 4rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
}
.galleria-lede {
  margin-top: 1.5rem;
  max-width: 56ch;
  font-size: clamp(1rem, 1.1vw, 1.0625rem);
  line-height: 1.65;
  color: hsl(var(--muted-foreground));
}

/* ---------------------------------------------------------------- griglia */
/* Le righe giustificate le calcola assets/galleria-righe.js prima che la
   pagina si disegni, e scrive larghezza e altezza di ogni fotografia.
   Qui sotto il ripiego per chi non ha JavaScript: righe giustificate col
   solo flexbox. Ogni fotografia parte larga quanto serve per essere alta
   --h e cresce in proporzione al suo rapporto, cosi' in una riga crescono
   tutte della stessa altezza; l'ultima riga non si stira (lo spazio se lo
   prende ::after). --h e' tre quarti dell'altezza voluta perche' le righe,
   crescendo, ci arrivano. */
.griglia {
  --h: 142px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}
@media (min-width: 560px) { .griglia { --h: 180px; gap: 10px; } }
@media (min-width: 900px) { .griglia { --h: 218px; } }
@media (min-width: 1400px) { .griglia { --h: 248px; } }
.griglia::after {
  content: "";
  flex: 1000000000 1 0px;
}

.foto {
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: hsl(var(--muted));
  flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--h));
  min-width: 0;
  aspect-ratio: var(--r);
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-editorial), opacity 300ms var(--ease-editorial);
}
.foto:hover img,
.foto:focus-visible img { transform: scale(1.035); }

/* Le poche immagini animate si segnalano da sole, senza scritte sopra. */
.foto-animata { position: relative; }
.foto-animata::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: hsl(0 0% 100% / 0.85);
  box-shadow: 0 0 0 1px hsl(0 0% 0% / 0.25);
}

.galleria-stato {
  padding-block: 3rem 5rem;
  text-align: center;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* --------------------------------------------------------------- lightbox */
/* `display: flex` batte la regola del browser per [hidden], e il riquadro
   resterebbe invisibile ma sopra la pagina, mangiandosi i clic. */
.lightbox[hidden] { display: none; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
  background: hsl(var(--ink) / 0.97);
  animation: comparsa 220ms var(--ease-editorial);
}
@keyframes comparsa { from { opacity: 0; } to { opacity: 1; } }

.lightbox-figura {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.lightbox-figura img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.lightbox button {
  appearance: none;
  border: 1px solid hsl(var(--ink-foreground) / 0.25);
  background: hsl(var(--ink) / 0.6);
  color: hsl(var(--ink-foreground));
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-sans);
  line-height: 1;
  transition: border-color 180ms var(--ease-editorial), background-color 180ms var(--ease-editorial);
}
.lightbox button:hover { border-color: hsl(var(--ink-foreground)); background: hsl(var(--ink)); }

.lightbox-passo {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  font-size: 1.1rem;
}
.lightbox-chiudi {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
}

.lightbox-conta {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  translate: -50% 0;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  color: hsl(var(--ink-muted));
}

/* Sul telefono le frecce coprirebbero l'immagine: si scorre col dito, e la
   tastiera resta per chi ce l'ha. */
/* Sul telefono le frecce non stanno ai lati (coprirebbero l'immagine):
   scendono in basso, ai due lati del contatore. Restano, perche' lo
   scorrimento col dito non puo' essere l'unico modo (WCAG 2.5.1). */
@media (max-width: 640px) {
  .lightbox-passo { position: absolute; bottom: 0.75rem; z-index: 2; }
  .lightbox-prec { left: 1rem; }
  .lightbox-succ { right: 1rem; }
  .lightbox { padding-bottom: 4.5rem; }
}

/* Fermare l'animazione: in alto a sinistra, di fronte alla chiusura. */
.lightbox-movimento {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
  min-height: 44px;
  padding: 0 1rem;
  font-size: 0.875rem;
}

.senza-scorrimento { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox { animation: none; }
  .foto:hover img, .foto:focus-visible img { transform: none; }
}

/* Lo spazio della barra di scorrimento e' sempre riservato: cosi'
   galleria-righe.js, che misura la finestra prima che la pagina esista,
   ottiene la stessa larghezza che avra' la griglia (sui sistemi con la barra
   classica, Windows e Linux, altrimenti sbaglierebbe di 15-17 px). */
html { scrollbar-gutter: stable; }