﻿/*#||###############################################*/
/*# STILI MULTISCHERMO #############################*/
/*#||###############################################*/

/* Stili per nascondere/mostrare il carosello durante l'inizializzazione */
.glide_lmnt_04 { /* Contenitore principale del tuo carosello */ opacity: 0; visibility: hidden; transition: opacity 0.4s ease-in-out; /* Per una comparsa fluida */ }

    .glide_lmnt_04.glide-initialized { /* Classe aggiunta via JS dopo il mount di Glide */ opacity: 1; visibility: visible; }

/* Resto del tuo CSS con correzione z-index e stili esistenti */
.glide--carousel { position: relative; }

.glide__track { /* z-index: 2; Vecchio valore */ z-index: 1; /* Track sotto le frecce se si sovrappongono */ position: relative; /* Necessario per z-index e posizionamento figli */ overflow: hidden; /* Importante per nascondere le slide fuori dalla vista iniziale */ transform: translateX(0); /* Potrebbe essere gestito da Glide, valuta se necessario qui */ }

.glide__arrows { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: auto; position: absolute; top: 50%; /* z-index: 1; Vecchio valore */ z-index: 2; /* Frecce sopra il track */ /* Assicurati che left: 0; o simile sia implicito o esplicito se top:50% da solo non basta */ /* Per centrare le frecce verticalmente e orizzontalmente potresti usare:
       left: 50%;
       transform: translate(-50%, -50%);
       Ma il tuo CSS originale per le singole frecce le sposta già.
    */ }

.glide__arrow { position: relative; cursor: pointer; padding: 1rem; border-radius: 1rem; color: #777777; background-color: #fff; box-shadow: 0 0.4rem 1.25rem rgba(0,0,0,0.25); }
    .glide__arrow i { transform: scale(1.2); }

.glide__arrow--left { transform: translateX(-100%); /* Questo sposta la freccia fuori dal contenitore .glide__arrows se è width 100% */ /* Considera se le frecce devono essere più vicine. */ }

.glide__arrow--right { transform: translateX(100%); /* Come sopra */ }

.glide__arrow:hover { border-radius: 0.5rem; }
    .glide__arrow:hover i { color: #034798; }

.glide__bullets { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,1rem); z-index: 2; /* Assicurati che i bullets siano sopra il track anche loro */ }

    .glide__bullets .glide__bullet { margin: 0 0.5rem; min-width: 4rem; /* Aggiungi stili per l'aspetto dei bullet, es. altezza, colore di sfondo */ /* height: 0.5rem; background-color: #ccc; border-radius: 0.25rem; */ }
    .glide__bullets .glide__bullet--active { background-color: #034798; }


.glide_peek_01 .glide__slide.glide__slide--clone { overflow: hidden; }

    .glide_peek_01 .glide__slide.glide__slide--clone img { filter: brightness(0.5) blur(2px); }

.fullscreen .glide__arrows { }
/* Già presente */

.fullscreen .glide__arrow--left { transform: none; }

.fullscreen .glide__arrow--right { transform: none; }

.glide__slide {
    transition-property: none;
}


.glide__slides { width: 100%; /* Assicura che le slide siano in linea orizzontale */ padding: 0; /* Rimuove padding predefiniti che potrebbero causare problemi */ margin: 0; /* Rimuove margini predefiniti */ list-style: none; /* Rimuove i punti elenco */ /* Glide.js aggiungerà display:flex qui e si occuperà dell'allineamento */ }

.glide__slide { flex-shrink: 0; /* Impedisce alle slide di ridursi */ width: 100%; /* Ogni slide occupa la larghezza del contenitore inizialmente, Glide la adatterà */ /* Aggiungi un'altezza minima o un aspect-ratio se il contenuto non definisce un'altezza,
       per evitare che il carosello collassi prima del caricamento delle immagini */ /* min-height: 200px; per esempio */ }

/*#||###############################################*/
/*#|Variabili estetiche per GLIDE PEEK 01|##########*/
.glide_peek_01 .glide__track ul { padding: 2rem 0; }
.glide_peek_01 .glide__slide { filter: blur(4px); }
    .glide_peek_01 .glide__slide.glide__slide--active { filter: none; }
.glide_peek_chisiamo .glide__track ul { padding: 2rem 0; }
.glide_peek_chisiamo .glide__slide { filter: blur(2px); }
    .glide_peek_chisiamo .glide__slide.glide__slide--active { filter: none; }
/*
 * KIT DI PRONTO SOCCORSO PER RISOLVERE IL "JITTER" DEI CAROSELLI
 * Applica queste regole allo slide del carosello.
*/

.glide__slide {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*- STILI Comuni: tutti gli schermi DESKTOP --------*/
@media (min-width: 769px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI Comuni: tutti gli schermi PORTABLE -------*/
@media (max-width: 768px) {
    /*#||###############################################*/
    .vetrina_wide.fullscreen.highlighted .glide__arrows { display: none; }
    /*#||###############################################*/
}
/*#||###############################################*/
/*--------------------------------------------------*/
/*#||###############################################*/
/*- STILI ESCLUSIVI GRANDI SCHERMI -----------------*/
@media (min-width: 1281px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI SCHERMI MEDI --------------------------*/
@media (min-width: 1025px) and (max-width: 1280px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI PICCOLI SCHERMI --------------------------*/
@media (min-width: 769px) and (max-width: 1024px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI TABLET -----------------------------------*/
@media (min-width: 481px) and (max-width: 768px) {
    /*#||###############################################*/
}
/*#||###############################################*/
/*- STILI MOBILE -----------------------------------*/
@media (max-width: 480px) {
    /*#||###############################################*/
    .glide__arrow--left { transform: translateX(-80%); }

    .glide__arrow--right { transform: translateX(80%); }
    /*#||###############################################*/
}
