/* ============================================================
   Il visore a schermo intero della galleria.

   Caricato solo dal template `galleria`. Dipende dai token:
   styles.css e site.css vengono prima.
   ============================================================ */

/* La miniatura si scurisce appena al passaggio: dice che è cliccabile senza
   aggiungere icone sopra la fotografia. */
.album__link {
  display: block;
  border-radius: inherit;
  overflow: hidden;
  cursor: zoom-in;
}
.album__link .album__foto { transition: transform 220ms ease, filter 220ms ease; }
.album__link:hover .album__foto,
.album__link:focus-visible .album__foto { transform: scale(1.03); filter: brightness(0.92); }
.album__link:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 3px; }

/* Con il visore aperto la pagina sotto non deve scorrere. */
body.visore-aperto { overflow: hidden; }

.visore {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(20, 12, 11, 0.94);
}
.visore[hidden] { display: none; }

.visore__figura {
  margin: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.visore__img {
  max-width: min(100%, 1400px);
  /* Lo spazio che resta tolti padding e didascalia. */
  max-height: calc(100vh - 140px);
  width: auto;
  height: auto;
  display: block;
  border-radius: var(--radius-md);
  background: var(--ink-900);
}

.visore__piede {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--space-2) var(--space-4);
  color: rgba(255, 255, 255, 0.82);
  font: var(--text-body-sm);
  text-align: center;
}
.visore__didascalia:empty { display: none; }
.visore__conta { font: var(--text-caption); color: rgba(255, 255, 255, 0.6); white-space: nowrap; }

/* I comandi: tondi, sobri, e abbastanza grandi da centrarli col pollice. */
.visore__nav,
.visore__chiudi {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  color: var(--white);
  cursor: pointer;
  line-height: 1;
}
.visore__nav { font-size: 2rem; }
.visore__chiudi { position: absolute; top: var(--space-4); right: var(--space-4); font-size: 1.75rem; }
.visore__nav:hover,
.visore__chiudi:hover { background: var(--color-brand); border-color: var(--color-brand); }
.visore__nav:focus-visible,
.visore__chiudi:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
.visore__nav[hidden] { display: none; }

/* Sul telefono le frecce laterali mangerebbero la fotografia: vanno sotto,
   accanto alla didascalia, e si può comunque sfogliare col dito. */
@media (max-width: 700px) {
  .visore { flex-wrap: wrap; padding: var(--space-3); align-content: center; }
  .visore__figura { order: 1; width: 100%; }
  .visore__nav--prima { order: 2; }
  .visore__nav--dopo  { order: 3; }
  .visore__img { max-height: calc(100vh - 220px); }
}

@media (prefers-reduced-motion: reduce) {
  .album__link .album__foto { transition: none; }
  .album__link:hover .album__foto { transform: none; }
}