/* 🚀 assets/gallery-styles.css (Correzione per Dimensione Originale Desktop) 🚀 */

/* ============================== */
/* === 💻 LAYOUT DESKTOP/GENERALE === */
/* ============================== */

/* Contenitore Flexbox - GESTIONE AFFIANCAMENTO */
.gps-gallery-container {
    display: flex !important; 
    flex-wrap: wrap !important; /* Le immagini vanno a capo se non c'è spazio */
    gap: 20px !important; 
    margin: 20px 0 !important;
    justify-content: flex-start !important; 
}

/* Elemento Immagine - IMPOSTATO SU 3 COLONNE */
.gps-gallery-container .gps-gallery-item {
    /* Calcolo: 33.333% meno una parte del gap per far stare 3 elementi in riga */
    flex: 0 0 calc(33.333% - 13.4px) !important; 
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* Immagine */
.gps-gallery-container .gps-gallery-item img {
    /* L'immagine ora occupa tutto il contenitore (1/3 dello schermo) */
    width: 100% !important; 
    height: auto !important; 
    display: block !important;
    
    /* Estetica */
    object-fit: cover !important; /* Riempie lo spazio armoniosamente anche con altezze diverse */
    border-radius: 4px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 🎯 Didascalia */
.gps-gallery-container .gps-gallery-item .gps-gallery-caption {
    margin-top: 8px !important;
    font-size: 0.9em !important;
    color: #FFF !important;
    font-style: italic !important;
    padding: 0 5px !important;
    text-align: center !important; 
    /* La didascalia prende la larghezza dell'elemento contenitore */
    width: 100% !important; 
}


/* =========================== */
/* === 📱 LAYOUT MOBILE (<768px) === */
/* =========================== */
@media (max-width: 768px) {
    .gps-gallery-container .gps-gallery-item {
        /* Su mobile, l'immagine torna a occupare l'intera larghezza */
        flex: 1 1 100% !important; 
    }
}