/**
 * Css for Widget
 */

.gallery-preview-lph {
    background-image: url('/wp-content/themes/theme-bs5-deverso-etg/assets/images/bkg-preview-gallery.png');
    background-repeat: no-repeat;
    background-position: top left;
    padding-top: var(--etg-padding-top-bottom);
    padding-bottom: var(--etg-padding-top-bottom);
}


.gallery-preview-lph ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery-preview-lph ul li{
    margin: 0;
    padding: 0;
}



    /* Stili per l'Immagine (Uguali per tutti i box) */
.gallery-preview-lph .box-content {
    /* Imposta il contenitore con overflow hidden e posizionamento per la centratura */
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Assicurati che l'aspect-ratio sia gestito dalle classi dei container */
}

.gallery-preview-lph .box-content img {
    /* La chiave: Riempie il contenitore, mantiene le proporzioni e ritaglia */
    object-fit: cover;

    /* Centra l'immagine sia orizzontalmente che verticalmente */
    object-position: center center;

    /* Forza l'immagine a occupare tutto lo spazio (100% x 100%) prima del cover */
    width: 100%;
    height: 100%;
    display: block;
}

/* -------------------------------------------------------------------- */
/* REGOLA 1: MOBILE (5 righe, 1 box/riga, Aspect Ratio 533/340)          */
/* -------------------------------------------------------------------- */

.gallery-preview-lph .box-container {
    /* MOBILE: Occupano sempre il 100% (12/12) e definiscono l'aspect-ratio */
    width: 100%;
    aspect-ratio: 533 / 340; /* Box orizzontale */
    padding: 12px;
}


/* -------------------------------------------------------------------- */
/* REGOLA 2: DESKTOP & TABLET (MD+)                                    */
/* -------------------------------------------------------------------- */

@media (min-width: 768px) {

    /* === PRIMA RIGA (2 Box uguali, Aspect 533/340) === */
    /* Box 1 e 2 devono occupare metà riga: 12 / 2 = 6 colonne */
    .gallery-preview-lph .box-container[data-item="1"],
    .gallery-preview-lph .box-container[data-item="2"] {
        width: 50%; /* 6/12 di larghezza */
        aspect-ratio: 533 / 340; /* Orizzontale */
        margin-bottom: 0; /* Rimuovi spazio extra tra righe */
    }

    /* === SECONDA RIGA (3 Box uguali, Aspect 340/533) === */
    /* Box 3, 4 e 5 devono occupare un terzo della riga: 12 / 3 = 4 colonne */
    .gallery-preview-lph .box-container[data-item="3"],
    .gallery-preview-lph .box-container[data-item="4"],
    .gallery-preview-lph .box-container[data-item="5"] {
        width: 33.3333%; /* 4/12 di larghezza */
        aspect-ratio: 340 / 533; /* Verticale */

        /* Forza l'andata a capo dopo i primi due box della prima riga */
        /* Questo è essenziale per il layout a due righe separate */
    }

}

.gallery-preview-lph a.goToGallery{
    margin-top: 24px;
/*
    display: inline-block;
    background-color: var(--etg-primary);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    text-decoration: none;
    padding: 20px 40px;

 */
}

.gallery-preview-lph .galleryDesktop{
    display: block;
}

.gallery-preview-lph .galleryMobile{
    display: none;
}

/*
xs      <576px      col-            smart-phone
sm      ≥576px 	    col-sm
md      ≥768px 	    col-md          ipad
lg      ≥992px 	    col-lg          ipad pro
xl      ≥1200px 	col-xl          desktop
xxl     ≥1400px     col-xxl
*/

/*============================================================
 *
 * XXL  desktop large
 *
 */
@media (min-width: 1400px) {

}

/*============================================================
 *
 * XL   desktop
 *
 */
@media (max-width: 1399px) {

}

/*============================================================
 *
 * LG   small desktop
 *
 */

@media (max-width: 1199px) {

}

/*============================================================
 *
 * LG   ipadpro
 *
 */
@media (pointer:coarse) and (max-width: 1199px) {

}


/*============================================================
 *
 *  MD  ipad
 *
 */
@media (max-width: 991px) {

}


/*============================================================
 *
 *  Container 1100
 */
@media (max-width: 1200px) {
    .gallery-preview-lph {
        padding-top: var(--etg-padding-top-bottom-mobile);
        padding-bottom: var(--etg-padding-top-bottom-mobile);
    }

    .gallery-preview-lph .galleryDesktop{
        display: none;
    }

    .gallery-preview-lph .galleryMobile{
        display: block;
        padding: 0 15px;
    }

    .gallery-preview-lph .goToGalleryContainer{
        padding: 0 15px;
    }

    .gallery-preview-lph a.goToGallery {
        margin-top: 64px;
        display: block;
        padding: 16px 0;
    }

    /*
    .gallery-preview-lph .previewGalleryMobile.accessible-slider-cycle{
        overflow: visible;
    }

     */

}

/*============================================================
 *
 *  SM smart-phone 576-767
 *  XS 0-567
 */
@media (max-width: 767px) {
}

/*============================================================
 *
 * XS   smartphone
 *
 */
@media (min-width: 10px)  and (max-width: 575px) {

}