/* ===== Photogallery Slider – base ===== */
.photogallery-slider-w1100 {
    --gap: 32px;
    --active-w: 1100px;
    --active-h: 690px;
    --side-w: 980px;
    --side-h: 614px;
    --ctrl-bg: rgba(0,0,0,0.55);
    --ctrl-color: #fff;
    --ctrl-radius: 10px;
    --ctrl-pad: 6px 10px;
    --ctrl-gap: 4px;

    position: relative;
    width: 100%;
    overflow: hidden;
    touch-action: pan-y;
}

.photogallery-slider-w1100:focus {
    outline: 2px solid #5b9dd9;
    outline-offset: 2px;
}

/* Track: usa la tua .ul come “binario” */
.photogallery-slider-w1100 .ul {
    display: flex;
    align-items: center;               /* allineamento verticale al centro */
    gap: var(--gap);                   /* spazio 32px tra le immagini */
    will-change: transform;
    transition: transform 400ms ease;
}

/* Singola slide */
.photogallery-slider-w1100 .slide {
    flex: 0 0 auto;
    position: relative;
    display: block;
    overflow: hidden;
    background: #f6f6f6;
    aspect-ratio: 980/614;
}

/* Immagine (o <picture> > img) */
.photogallery-slider-w1100 .slide img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

/* Stato “attiva” (centrale) vs laterali su desktop */
.photogallery-slider-w1100 .slide,
.photogallery-slider-w1100 .slide.is-side {
    width: var(--side-w);
    opacity: 0.9;
}

.photogallery-slider-w1100 .slide.is-active {
    width: var(--active-w);
    aspect-ratio: 1100/690;

}

/* Overlay controlli in basso a destra sopra la slide attiva */
.photogallery-slider-w1100 .controls {
    position: absolute;
    bottom: 12px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: var(--ctrl-gap);
    color: var(--ctrl-color);
}

/* ===== Mobile / < 1100px: una immagine per volta ===== */
@media (max-width: 1100px) {
    .photogallery-slider-w1100 {
        --active-w: 100%;
        --active-h: auto; /* altezza calcolata via ratio box sotto */
    }

    /* Per mantenere ratio su mobile usiamo un ratio wrapper */
    .photogallery-slider-w1100 .slide {
        width: 100vw;   /* prende viewport (puoi cambiare in 100%) */
        max-width: 100%;
        height: auto;
        aspect-ratio: 1100 / 690; /* stessa ratio della principale */
    }
    .photogallery-slider-w1100 .slide.is-active,
    .photogallery-slider-w1100 .slide.is-side {
        width: 100vw;
        aspect-ratio: 1100 / 690;
        height: auto;
    }

    .photogallery-slider-w1100 .controls {
        right: 10px;
        bottom: 10px;
        padding: 6px 8px;
    }
}

/* ===== Effetti “drag” ===== */
.photogallery-slider-w1100.is-dragging .ul {
    transition: none !important;
    cursor: grabbing;
}
.photogallery-slider-w1100 .slide {
    cursor: grab;
}
.photogallery-slider-w1100 .slide:active {
    cursor: grabbing;
}

.photogallery-slider-w1100 .photogallery__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #333;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.photogallery-slider-w1100 .photogallery__button:focus {
    outline: 2px solid #005fcc;
    outline-offset: 2px;
}

.photogallery-slider-w1100 .photogallery__pagination{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    border: none;
    background: #333;
    color: #fff;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5rem;
    word-wrap: break-word

}


/*
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: 1100px) {

    .photogallery-slider-w1100 .slide{
        opacity: 0.5;
        transition: 0.5s all ease-in;
    }

    .photogallery-slider-w1100 .slide.is-active {
        opacity: 1;
        transition: 0.5s all ease-out;
    }

    .photogallery-slider-w1100 .controls {
        position: relative;
        justify-content: center;
        margin-top: 16px;
    }

}


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

}


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

}