/**
 * ============================================================================
 * NANOVIEW GALLERY - FRONTEND STYLES
 * ============================================================================
 */

/* ========================================
   1. GALLERIA CONTAINER
   ======================================== */
.nanoview-gallery {
    width: 100%;
    margin: 40px auto;
    padding: 0;
    box-sizing: border-box;
}

/* ========================================
   2. GALLERIA ITEM
   ======================================== */
.nanoview-gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background: #f1f5f9;
    box-shadow: var(--nv-shadow, none);
}

/* ============================================================================
   NANOVIEW GALLERY - AGGIORNAMENTO SEZIONE IMMAGINI (ANTI-CONFLITTO)
   ============================================================================ */

/* ========================================
   3. IMMAGINI
   ======================================== */
.nanoview-gallery-item img {
    /* Forza le dimensioni per riempire sempre il contenitore in modo corretto */
    width: 100% !important;
    height: 100% !important;
    
    /* Reset difensivo per azzerare margini e padding imposti globalmente dai temi */
    margin: 0 !important;
    padding: 0 !important;
    
    /* Comportamento blocco e adattamento immagine per evitare deformazioni */
    display: block !important;
    object-fit: cover !important;
    
    /* Disattiva limiti di altezza massima che i temi usano per schiacciare le foto */
    max-height: none !important;
}

.nanoview-blur {
    /* Posizionamento assoluto per sovrapporsi allo sfondo */
    position: absolute;
    top: 0; left: 0;
    
    /* Forza le dimensioni a coprire tutto lo spazio disponibile */
    width: 100%; height: 100%;
    
    /* Effetto sfocatura e trasparenza per l'ombra/sfondo */
    object-fit: cover;
    filter: blur(20px);
    opacity: 0.5;
    z-index: 0;
}

/* ========================================
   4. IMMAGINE SINGOLA
   ======================================== */
.nanoview-single-image {
    display: block;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.nanoview-single-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========================================
   5. RESPONSIVE (Grid & Carousel) - INTATTO
   ======================================== */
@media (max-width: 768px) {
    .nanoview-gallery.grid-4,
    .nanoview-gallery.grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .nanoview-gallery.carousel .nanoview-gallery-item {
        flex: 0 0 calc(50% - 5px) !important;
        min-width: calc(50% - 5px) !important;
        max-width: calc(50% - 5px) !important;
    }
}

/* ========================================
   6. MASONRY (Progressive Enhancement)
   ======================================== */
/* Regola originale preservata */
.nanoview-gallery.masonry .nanoview-gallery-item img {
    height: auto !important;
    object-fit: unset !important;
}

/* Fallback CSS: griglia visibile se il JS è bloccato dal server */
.nanoview-gallery.masonry {
    display: flex;
    flex-wrap: wrap;
    gap: var(--nv-gap, 10px);
}
.nanoview-gallery.masonry .nanoview-gallery-item {
    width: calc(33.333% - (var(--nv-gap, 10px) * 2 / 3));
    opacity: 1 !important;
    visibility: visible !important;
    display: block;
}
.nanoview-gallery.masonry .nanoview-masonry-filler {
    display: flex;
    align-items: center;
    justify-content: center;
}
.nanoview-gallery.masonry .nanoview-masonry-filler img {
    max-width: 60%;
    max-height: 60%;
    object-fit: contain;
    opacity: 0.6;
}

/* Quando il JS si sveglia (al movimento del mouse) e prende il controllo */
.nanoview-gallery.masonry.nv-js-active {
    display: block; 
}
.nanoview-gallery.masonry.nv-js-active .nanoview-gallery-item {
    position: absolute; 
}

/* Responsive per il Fallback Masonry */
@media (max-width: 768px) {
    .nanoview-gallery.masonry .nanoview-gallery-item {
        width: calc(50% - (var(--nv-gap, 10px) / 2));
    }
}
@media (max-width: 480px) {
    .nanoview-gallery.masonry .nanoview-gallery-item {
        width: 100%;
    }
}