/* =====================================================================
   GALLERY GENERALE E GALLERY DEGLI EVENTI (ottobre 2026)
   File separato da style.css: si carica solo in gallery.html e nel
   pannello (admin/index.html), così le altre pagine non cambiano.
   Dipende dalle variabili di colore definite in css/style.css (:root),
   che va quindi caricato prima di questo file.
   ===================================================================== */

/* ---------- Pagina pubblica ---------- */

/* Indice degli album: pillole che portano alla gallery scelta */
.gallery-indice {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0 0 32px;
}
.gallery-indice a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 8px 16px;            /* area di tocco comoda su smartphone */
  border: 1px solid var(--bordo); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--bianco); text-decoration: none; font-size: 0.85rem;
}
.gallery-indice a:hover,
.gallery-indice a:focus-visible { border-color: var(--rosso); background: rgba(225, 15, 36, 0.18); }
/* La prima pillola (Gallery generale) è evidenziata */
.gallery-indice a:first-child { border-color: var(--rosso); }

/* Gallery generale: riquadro in evidenza in cima alla pagina */
.album-generale {
  padding: 20px 16px;
  border: 1px solid var(--bordo); border-radius: var(--raggio);
  background: linear-gradient(180deg, rgba(225, 15, 36, 0.10), rgba(0, 0, 0, 0) 70%);
}
@media (min-width: 760px) { .album-generale { padding: 28px; } }
.album-intro { color: var(--grigio); margin: -4px 0 16px; }

/* Titolo della sezione "Le gallery degli eventi" */
.gallery-sezione {
  font-size: clamp(1.2rem, 4vw, 1.7rem);
  margin: 0 0 24px; padding-top: 32px;
  border-top: 1px solid var(--bordo);
}

/* Il titolo dell'album funge da ancora: lascia spazio sotto l'header fisso */
.album { scroll-margin-top: calc(var(--altezza-header) + 16px); }

/* Le miniature oltre l'anteprima restano nascoste finché non si preme "Vedi tutte"
   (serve perché .foto-mini in style.css imposta display: block) */
.foto-mini[hidden] { display: none; }

/* Pulsante "Vedi tutte le N foto" / "Mostra meno" */
.album-azioni { display: flex; justify-content: center; margin-top: 16px; }

/* ---------- Pannello admin ---------- */

/* Tendina "Album" sotto ogni foto: sposta la foto da una gallery all'altra.
   16px evita lo zoom automatico di iOS; 44px di altezza per il tocco */
.admin-foto .corpo select {
  width: 100%; min-height: 44px; padding: 8px 10px;
  font: inherit; font-size: 16px;
  color: var(--bianco); background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--bordo); border-radius: 6px;
}
.admin-foto .corpo .etichetta-album { color: var(--grigio); font-size: 0.75rem; }

/* Se manca la Gallery generale, la sezione eventi è in cima: niente linea sopra */
.gallery-eventi:first-child .gallery-sezione,
.gallery-indice + .gallery-eventi .gallery-sezione { border-top: 0; padding-top: 0; }