/* ============================================================
   CSS per una galleria di immagini con Flexbox
   ------------------------------------------------------------
   Questo foglio di stile crea una galleria responsive:
   - Le immagini si dispongono in righe grazie a Flexbox.
   - Al passaggio del cursore (hover) l’immagine si ingrandisce,
     appare una cornice perimetrale e compare un testo descrittivo
     in basso a sinistra con effetto fade-in.
   ============================================================ */


/* ===============================
   GALLERIA con FLEXBOX
   =============================== */
.gallery {
  display: flex;              /* Attiva Flexbox per il contenitore */
  flex-wrap: wrap;            /* Permette agli elementi di andare a capo */
  justify-content: center;    /* Centra gli elementi orizzontalmente */
  max-width: 1100px;          /* Larghezza massima della galleria */
  margin: 0 auto;             /* Centra la galleria nella pagina */
  padding-top: 145px;         /* Spazio superiore (es. per header fisso) */
  padding-bottom: 10px;       /* Spazio inferiore */
}

/* ===============================
   OGNI ELEMENTO DELLA GALLERIA
   =============================== */
.gallery-item {
  position: relative;         /* Necessario per posizionare overlay assoluto */
  overflow: hidden;           /* Nasconde parti eccedenti dell’immagine */
  flex: 1 1 360px;            /* Base 360px, può crescere o ridursi */
  max-width: 367px;           /* Larghezza massima di ogni item */
  margin: 0;                  /* Nessuno spazio tra gli elementi */
}

.gallery-item img {
  width: 100%;                /* Immagine occupa tutta la larghezza del box */
  height: 360px;              /* Altezza fissa per uniformità */
  object-fit: cover;          /* Ritaglia l’immagine mantenendo proporzioni */
  display: block;             /* Elimina spazi indesiderati */
  transition: transform 1.5s ease; /* Effetto zoom fluido */
}

/* ===============================
   OVERLAY (TESTO)
   =============================== */
.overlay {
  position: absolute;         /* Sovrapposto all’immagine */
  top: 0; left: 0; right: 0; bottom: 0; /* Copre tutta l’area */
  display: flex;              /* Usa Flexbox per posizionare il testo */
  align-items: flex-end;       /* Testo in basso */
  justify-content: flex-start; /* Testo sulla sinistra */
  padding: 1rem;              /* Spazio interno */
  font-family: 'Poppins', sans-serif; /* Font elegante */
  font-size: 18px;            /* Dimensione testo */
  font-weight: 600;           /* Testo marcato */
  color: darkslategray;       /* Colore leggibile e raffinato */
  opacity: 0;                 /* Invisibile di default */
  transform: translateY(-20px); /* Parte leggermente più in alto */
  transition: 
    opacity 1.0s ease 0.3s,   /* Fade-in con ritardo */
    transform 1.0s ease 0.3s; /* Scorrimento dall’alto con ritardo */
}

/* ===============================
   EFFETTO HOVER
   =============================== */
.gallery-item:hover img {
  transform: scale(1.03);     /* Leggero zoom sull’immagine */
}

.gallery-item:hover .overlay {
  opacity: 1;                 /* Testo diventa visibile */
  transform: translateY(0);   /* Si posiziona correttamente in basso */
}

.gallery-item:hover {
  outline: 3px solid rgba(71, 80, 80, 0.4); /* Cornice chiara attorno all’immagine */
  outline-offset: -3px;       /* Cornice aderente al bordo */
}


/* Effetti attivi anche su dispositivi touch */
.gallery-item:active img,
.gallery-item:focus img {
  transform: scale(1.03);
}

.gallery-item:active .overlay,
.gallery-item:focus .overlay {
  opacity: 1;
  transform: translateY(0);
}