/* --- CONTENITORE SEZIONE --- */
section, .section-clearfix {
    overflow: hidden;
    position: relative;
}
.section-clearfix.is-zoomed-sect,
section.is-zoomed-sect {
    overflow: visible;
}
.clearfix {
    clear: both;
    height: 0;
    visibility: hidden;
}

/* --- WRAPPER PRINCIPALE (Nearby) --- */
.nearby-wrapper {
    float: left;
    margin: 0px 0.5rem 10px 0px;
    /* Usiamo variabili che il JS può sovrascrivere per ogni istanza */
    width: var(--nearby-w, 150px);
    height: var(--nearby-h, 100px);
     height: auto;
     aspect-ratio: 1 / var(--nearby-ratio, 0.66);  /* ← usa variabile JS */

    max-width: 90%; /* Impedisce alla finestra di occupare più di metà schermo su mobile */
    padding-top: 0; /* Rimuoviamo il padding-top a favore di height fissa */

    position: relative;
    z-index: 2;
    cursor: pointer;
    overflow: hidden;
    border-radius: 5px;
    border: 2px solid rgb(158, 162, 173);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.4s ease;
    transform-origin: left center;
}

@media (max-width: 768px) {
    .nearby-wrapper {
       /* Legge il valore passato nell'HTML (es. 50vw), fallback a 95vw solo se manca */
        width: var(--nearby-mobile-w, 95vw) ;

        /* Calcola l'altezza usando ESCLUSIVAMENTE le variabili iniettate dal JS */
        height: calc(var(--nearby-mobile-w) * var(--nearby-ratio)) ;
        /* float: none ; */
        margin:  0.1rem;
        max-width: 98%;
        /* padding: 0.5rem ; */
    }
}

.nearby-wrapper:hover,
.nearby-wrapper:focus {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
    transform: scale(1.03);
    outline: none;
}

/* --- STATO ZOOMATO --- */
.nearby-wrapper.is-zoomed {
position: fixed;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Usiamo le variabili passate dal costruttore JS */
    width: var(--nearby-zoom-w, 800px);

    height: auto;
    aspect-ratio: 1 / var(--nearby-ratio, 0.66);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
    overflow: visible;
}

.nearby-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assicura che l'immagine riempia il box senza deformarsi */
    display: block;
}

@media (max-width: 768px) {
    .nearby-wrapper.is-zoomed {
       width: 95vw ;
        height: calc(95vw * var(--nearby-ratio)) ;

        /* Centratura assoluta */
        /* position: fixed ; */
        top: 50% ;
        left: 50% ;
        transform: translate(-50%, -50%) ;

        margin: 0 ;
        z-index: 1000 ;
        /* float: none ; */
    }

}

/* --- INNER E IMMAGINI (Cross-fade) --- */
.nearby-inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
    border-radius: 5px;
}

.nearby-img-1, .nearby-img-2 {
position: absolute;
    top: 0; left: 0;
    /* Rimuoviamo ogni vincolo che impedisce alle variabili JS di comandare */
    width: var(--scaledWidth, 100%);
    height: var(--scaledHeight, 100%);
    max-width: none ;
    max-height: none ;
    object-fit: fill;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    /* Punto di partenza: centrato */
    transform: translate(calc(var(--maxTranslateX) * -0.5), calc(var(--maxTranslateY) * -0.5));
    transition: opacity 1s ease-in-out;
    display: block;
}

.nearby-img-1.is-active, .nearby-img-2.is-active {
    opacity: 1;
    z-index: 3;
}

/* Reset per cambio rapido immagine */
.no-transition .nearby-img-1,
.no-transition .nearby-img-2 {
    transition: none ;
}

/* --- DIDASCALIA (Title) --- */
.nearby-title {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    z-index: 100;
    /* background: rgba(15, 62, 116, 0.9); */
    background-color: rgba(250, 235, 215, 0.571);
    /* color: #f8ecc6; */
    font-size: 0.8em;
    font-weight:lighter;
    text-align: center;
    padding: 2px 0;
    opacity: 0.8;
    transition: opacity 0.3s ease;
    /* transform: translateX(1%) translateY(50%); */
}

@media (max-width: 768px) { .nearby-title { font-size: 0.6rem; } }

.nearby-wrapper.is-zoomed .nearby-title {
    opacity: 1;
    width: 98%;
    transform: translateX(1%) translateY(100%);
    font-size: calc(1.1rem / var(--nearby-zoom-factor));
    z-index: 10;
    /* background: rgba(15, 62, 116, 0.9);
    color: #f8ecc6; */
    background-color: rgba(250, 235, 215);
    font-size: 1.1em;
    /* font-weight: bold; */
    text-align: center;
    padding: 2px 0;
    border-radius: 4px; /* Valore modificabile: 4px per un tocco leggero, 12px per più tondo */
    overflow: hidden;    /* Assicura che lo sfondo non "esca" dagli angoli */
    font-size: 1.2rem;
    @media (max-width: 768px) {font-size: 1rem;}
}

/* --- BOTTONI NAVIGAZIONE --- */
.nearby-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2000;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.3);
    color: rgb(146, 175, 233);
    border: none;
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    font-size: 3rem;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.2s;
    line-height: 1; /* Rimuove lo spazio extra del font */
    padding-bottom: 0.3rem; /* Sposta otticamente la freccia verso l'alto */
}

.nearby-wrapper.is-zoomed .nearby-nav-btn {
    opacity: 1;
    pointer-events: auto;
}

.nearby-nav-btn:hover { background: rgba(0, 0, 0, 0.6); }
.prev-btn { left: 0.2rem; }
.next-btn { right: 0.2rem; }

@media (max-width: 768px) {
    .nearby-wrapper.is-zoomed .nearby-nav-btn {
        width: 2rem;
        height: 2rem;
        font-size: 2rem;
    }
}

/* --- CONTATORE --- */
.nearby-counter {
    position: absolute;
    bottom: 2%;
    right: 2%;
    z-index: 20;
    background: rgba(0, 0, 0, 0.5);
    color: #ccc;
    padding: 0 5px;
    border-radius: 4px;
    font-size: calc(1.5rem / var(--nearby-zoom-factor));
    opacity: 0;
    transition: opacity 0.3s;
    @media (max-width: 768px) {font-size: 0.6rem;}
}

.nearby-wrapper.is-zoomed .nearby-counter {
    opacity: 1;
    cursor: pointer;
    pointer-events: auto;
}


/* AGGANCIO DELLE CLASSI ALLE ANIMAZIONI */
.nearby-img-1.scroll-h, .nearby-img-2.scroll-h {
    animation: scrollHorizontalTransform var(--scroll-duration, 16s) linear infinite ;
}

.nearby-img-1.scroll-v, .nearby-img-2.scroll-v {
    animation: scrollVerticalTransform var(--scroll-duration, 16s) linear infinite ;
}

/* --- ANIMAZIONI SCROLL (Keyframes invariati) --- */
@keyframes scrollHorizontalTransform {
    0%, 100% { transform: translate(calc(var(--maxTranslateX) * -0.5), calc(var(--maxTranslateY) * -0.5)); }
    25% { transform: translate(calc(var(--maxTranslateX) * -1.0), calc(var(--maxTranslateY) * -0.5)); }
    50% { transform: translate(calc(var(--maxTranslateX) * -0.5), calc(var(--maxTranslateY) * -0.5)); }
    75% { transform: translate(0px, calc(var(--maxTranslateY) * -0.5)); }
}

@keyframes scrollVerticalTransform {
    0%, 100% { transform: translate(calc(var(--maxTranslateX) * -0.5), calc(var(--maxTranslateY) * -0.5)); }
    /* 25% { transform: translate(calc(var(--maxTranslateX) * -0.5), calc(var(--maxTranslateY) * -1.0)); } */
    25% { transform: translate(calc(var(--maxTranslateX) * -0.5), calc(var(--maxTranslateY) * 0)); }
    50% { transform: translate(calc(var(--maxTranslateX) * -0.5), calc(var(--maxTranslateY) * -0.5)); }
    75% { transform: translate(calc(var(--maxTranslateX) * -0.5), 0px); }
}

.scroll-h { animation: scrollHorizontalTransform var(--scroll-duration, 16s) linear infinite ; }
.scroll-v { animation: scrollVerticalTransform var(--scroll-duration, 16s) linear infinite ; }