/* Nasconde la barra di scorrimento ma permette lo scroll */
.scroll-nascosto {
    -ms-overflow-style: none;  /* IE e Edge */
    scrollbar-width: none;  /* Firefox */
}
.scroll-nascosto::-webkit-scrollbar {
    display: none; /* Chrome, Safari e Opera */
}

/* --- EFFETTO HOVER FRECCIA: FADE IN SLIDE DA SINISTRA --- */

@media (min-width: 1024px) {
    
    /* Stato iniziale (nascosta e spostata a SINISTRA di 30 pixel) */
    .freccia-hover {
        opacity: 0;
        visibility: hidden;
        transform: translateX(-80px); /* Valore negativo: parte da sinistra */
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    /* Stato finale (quando il mouse è sul contenitore padre) */
    .wrapper-scroll:hover .freccia-hover {
        opacity: 1;
        visibility: visible;
        transform: translateX(0); /* Ritorna alla posizione originale */
    }
}

/* --- EFFETTO HOVER: IMMAGINE SCOMPARE, APPARE IL VIDEO --- */

/* Applica la sfumatura morbida all'immagine */
.img-copertina {
    transition: opacity 1.5s ease !important;
}

/* Solo per schermi con il mouse (Desktop/Tablet grandi) */
@media (min-width: 1024px) {
    /* Quando passi il mouse sul contenitore, l'immagine diventa invisibile */
    .card-video-hover:hover .img-copertina {
        opacity: 0 !important;
        pointer-events: none; /* Impedisce che l'immagine blocchi i clic mentre scompare */
    }
}
/* --- EFFETTO HOVER INCROCIATO --- */

/* 1. Impostiamo la transizione sulla scritta */
.scritta-evanescente {
    transition: opacity 0.4s ease-in-out !important;
    opacity: 1; /* Visibile di base */
}

/* 2. Quando passo il mouse sul BOX, la SCRITTA svanisce */
.box-artistico:hover .scritta-evanescente {
    opacity: 0 !important;
    visibility: hidden; /* Evita che il testo resti cliccabile se invisibile */
}
/* --- EFFETTO STICKY BARRA LATERALE --- */

/* Si attiva solo su Desktop e Tablet grandi (no smartphone) */
@media (min-width: 1024px) {
    .elemento-fisso {
        position: -webkit-sticky; /* Per compatibilità con Safari */
        position: sticky;
        
        /* Distanza dal tetto dello schermo (modifica se hai un menu alto) */
        top: 100px; 
        
        /* Assicura che resti sopra altri elementi in scorrimento */
        z-index: 10; 
        
        /* Aggiunge una transizione fluida se cambia stato */
        transition: all 0.3s ease;
    }
}
/* --- SOTTOLINEATURA ANIMATA FORZATA --- */

/* 1. Colpisce esattamente i link nel widget Editor di Testo */
.linkanimation a {
    position: relative !important;
    text-decoration: none !important;
    box-shadow: none !important; /* Astra a volte usa l'ombra come sottolineatura */
}

/* 2. La riga animata */
.linkanimation a::after {
    content: '' !important;
    position: absolute !important;
    width: 100% !important;
    height: 2px !important;
    bottom: -1px !important;
    left: 0 !important;
    background-color: #2B6F82 !important; /* Blu */
    
    transform: scaleX(0);
    transform-origin: bottom right;
    transition: transform 0.3s ease-out !important;
    pointer-events: none; /* Evita che la riga blocchi il clic del mouse */
}

/* 3. L'espansione al passaggio del mouse */
.linkanimation a:hover::after {
    transform: scaleX(1) !important;
    transform-origin: bottom left !important;
}
/* --- GRAFICA TIMER DI LETTURA --- */
.timer-lettura {
    display: inline-block;
    background-color: #F0CEC4; /* Sfondo crema chiarissimo */
    color: #2B6F82; /* Testo scuro per leggibilità */
    font-size: 14px;
    font-weight: 500;
    padding: 6px 15px; /* Spazio interno per creare un "bottone" */
    border-left: 3px solid #2B6F82; /* Bordo laterale Oro Antico */
    border-radius: 4px; /* Angoli leggermente smussati */
    margin-bottom: 20px; /* Spazio sotto il timer */
    font-family: fahkwang; /* Usa lo stesso font del testo del tuo sito */
}

/* Layout affiancato per /* --- FORZA EA POST GRID IN LISTA ORIZZONTALE (Versione Aggiornata) --- */

/* 1. Colpiamo il contenitore INTERNO corretto */
.griglia-orizzontale .eael-grid-post-holder-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 30px !important;
    width: 100% !important;
}

/* 2. La foto al 40% bloccata a sinistra */
.griglia-orizzontale .eael-entry-media {
    width: 40% !important;
    flex-shrink: 0 !important;
    margin: 0 !important; /* Disattiva blocchi nascosti di EA */
    float: none !important;
}

/* 3. Il blocco testo al 60% bloccato a destra */
.griglia-orizzontale .eael-entry-wrapper {
    width: 60% !important;
    margin: 0 !important;
    float: none !important;
}

/* 4. Su Smartphone torna tutto in verticale per la leggibilità */
@media (max-width: 768px) {
    .griglia-orizzontale .eael-grid-post-holder-inner {
        flex-direction: column !important;
        gap: 15px !important;
    }
    
    .griglia-orizzontale .eael-entry-media,
    .griglia-orizzontale .eael-entry-wrapper {
        width: 100% !important;
    }
}

/* --- TRASFORMA EA POST GRID IN SCORRIMENTO ORIZZONTALE --- */

/* 1. Il contenitore diventa una riga continua che non va a capo */
.griglia-scorrevole .eael-post-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 20px !important; /* Spazio tra gli articoli */
    padding-bottom: 25px !important; /* Spazio per la barra spaziatrice */
    scroll-snap-type: x mandatory; /* Attiva l'effetto calamita */
    -webkit-overflow-scrolling: touch; /* Scorrimento fluido su smartphone */
}

/* 2. Blocca la larghezza di ogni singola "Card" */
/* Se non lo facciamo, il browser cercherà di schiacciarle tutte nello schermo */
.griglia-scorrevole .eael-grid-post {
    flex: 0 0 300px !important; /* Larghezza fissa di 300px per card */
    max-width: 300px !important;
    margin: 0 !important; /* Disattiva i margini base del plugin */
    scroll-snap-align: start; /* Allinea la card alla calamita */
}

/* 3. Personalizzazione della Barra di Scorrimento (Opzionale ma elegante) */
.griglia-scorrevole .eael-post-grid::-webkit-scrollbar {
    height: 8px; /* Spessore della barra */
}

.griglia-scorrevole .eael-post-grid::-webkit-scrollbar-track {
    background: #FDF5E6; /* Sfondo della traccia (es. il tuo Crema) */
    border-radius: 10px;
}

.griglia-scorrevole .eael-post-grid::-webkit-scrollbar-thumb {
    background: #FCEDB6; /* Colore del "cursore" (es. Oro Antico) */
    border-radius: 10px;
}

/* 4. Su Smartphone rendiamo le card leggermente più strette per mostrarne un "pezzetto" della successiva */
@media (max-width: 768px) {
    .griglia-scorrevole .eael-grid-post {
        flex: 0 0 85% !important; 
        max-width: 85% !important;
    }
}
/* --- LAYOUT DIARIO A TRITTICO (30 - 40 - 30) --- */

/* 1. Creiamo la griglia personalizzata sul contenitore principale */
.griglia-diario .eael-post-appender {
    display: grid !important;
    /* Ecco la magia: 3 frazioni, 4 frazioni, 3 frazioni */
    grid-template-columns: 3fr 4fr 3fr !important; 
    gap: 25px !important; /* Lo spazio tra un post e l'altro */
}

/* 2. Resettiamo i blocchi imposti da Essential Addons */
.griglia-diario .eael-grid-post {
    width: 100% !important; /* Riempie la sua colonna della griglia */
    max-width: 100% !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important; 
}

/* 3. Aumentiamo leggermente il testo o il titolo del post centrale (Opzionale per enfatizzarlo) */
.griglia-diario .eael-grid-post:nth-child(2) .eael-entry-title {
    font-size: 1.2em; /* Fa risaltare il titolo centrale */
}

/* 4. Gestione Tablet: lo trasformiamo in 2 colonne (1 grande sopra, 2 piccole sotto) */
@media (max-width: 1024px) {
    .griglia-diario .eael-post-appender {
        grid-template-columns: 1fr 1fr !important; 
    }
    /* Il post centrale diventa il primo e prende tutta la larghezza */
    .griglia-diario .eael-grid-post:nth-child(2) {
        grid-column: 1 / -1; 
        order: -1; /* Lo spinge in cima */
    }
}

/* 5. Gestione Smartphone: Colonna singola classica */
@media (max-width: 768px) {
    .griglia-diario .eael-post-appender {
        display: flex !important;
        flex-direction: column !important;
    }
    .griglia-diario .eael-grid-post {
        width: 100% !important;
    }
}

/* --- CARD RISORSA: DESATURAZIONE E REVEAL --- */

/* 1. Stato Normale della Card */
.card-risorsa {
    transition: all 0.5s ease-in-out !important;
    filter: grayscale(0%); /* Immagine a colori */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative;
}

/* 2. Nascondiamo il testo inizialmente */
.card-risorsa .elementor-widget-heading {
    opacity: 0;
    transform: translateY(20px); /* Leggero movimento dal basso */
    transition: all 0.4s ease-in-out;
    z-index: 2;
    text-align: center;
    padding: 20px;
}

/* 3. Aggiungiamo un velo scuro per far leggere meglio il testo (Overlay) */
.card-risorsa::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4); /* Velo nero semitrasparente */
    opacity: 0;
    transition: opacity 0.4s;
    z-index: 1;
}

/* --- EFFETTO HOVER --- */

.card-risorsa:hover {
    filter: grayscale(100%); /* L'immagine diventa in bianco e nero */
}

.card-risorsa:hover::before {
    opacity: 1; /* Appare il velo scuro */
}

.card-risorsa:hover .elementor-widget-heading {
    opacity: 1; /* Il testo appare */
    transform: translateY(0); /* Il testo torna in posizione */
}
/* --- SFONDO A FASCE DIAGONALI (Stile Immagine Riferimento) --- */

.sfondo-fasci-luce {
    /* Assicuriamoci che il contenitore riempia lo spazio in modo fluido */
    width: 100%;
    height: 100%;
    
    /* Il gradiente magico */
    background: linear-gradient(
        135deg, 
        rgba(198, 224, 221, 0.38823529411764707) 0%, 
        rgba(198, 224, 221, 0.38823529411764707) 45%,   /* Blocco grande in alto a sinistra */
        #FaFaFa 45%, 
        #FaFaFa 65%,   /* Prima fascia bianca larga */
        rgba(198, 224, 221, 0.38823529411764707) 65%, 
        rgba(198, 224, 221, 0.38823529411764707) 72%,   /* Striscia colorata media */
        #FaFaFa 72%, 
        #FaFaFa 90%,   /* Seconda fascia bianca */
        rgba(198, 224, 221, 0.38823529411764707) 90%, 
        rgba(198, 224, 221, 0.38823529411764707) 94%,   /* Striscia colorata sottilissima */
        #FaFaFa 94%, 
        #FaFaFa 100%   /* Angolino bianco in basso a destra */
    );
}

/* --- SISTEMA DI ILLUMINAZIONE REALISTICA --- */

/* La luce colpisce da in ALTO A DESTRA (L'ombra cade in basso a sinistra) */
.luce-da-destra {
    box-shadow: -10px 10px 10px rgba(27, 85, 101, 1) !important;
    transition: box-shadow 0.3s ease; /* Rende fluido il caricamento */
}
/* La luce colpisce da in centro A DESTRA (L'ombra cade in centro a sinistra) */
.luce-da-centrodestra {
    box-shadow: -10px 5px 10px rgba(27, 85, 101, 1) !important;
    transition: box-shadow 0.3s ease; /* Rende fluido il caricamento */
}

/* La luce colpisce da in ALTO A SINISTRA (L'ombra cade in basso a destra) */
.luce-da-sinistra {
    box-shadow: 10px 10px 10px rgba(27, 85, 101, 1) !important;
    transition: box-shadow 0.3s ease;
}

/* La luce colpisce dal CENTRO IN ALTO (L'ombra cade dritta in basso) */
.luce-dall-alto {
    box-shadow: 0px 15px 10px rgba(27, 85, 101, 1) !important;
    transition: box-shadow 0.3s ease;
}

/* La luce colpisce dal BASSO (L'ombra cade in alto, effetto drammatico) */
.luce-dal-basso {
    box-shadow: -10px -5px 10px rgba(27, 85, 101, 1) !important;
    transition: box-shadow 0.3s ease;
}

/* --- LIBERARE LE OMBRE NEL POST GRID --- */

/* 1. Rimuoviamo il "taglio" (overflow) dal contenitore principale della griglia */
.eael-grid-post-holder,
.griglia-ombra .eael-post-grid, 
.griglia-orizzontale .eael-post-appender {
    overflow: visible !important;
}	
/* --- ELIMINAZIONE BARRA GRIGIA SU WRAPPER-SCROLL --- */

/* 1. Nasconde la barra su Chrome, Safari, Edge */
.wrapper-scroll::-webkit-scrollbar,
.wrapper-scroll *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* 2. Nasconde la barra su Firefox */
.wrapper-scroll,
.wrapper-scroll * {
    scrollbar-width: none !important;
}

/* 3. Forza l'overflow orizzontale pulito */
.wrapper-scroll {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -ms-overflow-style: none !important; /* Per Internet Explorer/Edge vecchio */
}

/* --- SFONDO LUCE ARCHITETTURALE (Stile Screenshot 2) --- */

.sfondo-luce-architettonica {
    width: 100%;
    height: 100%;
    
    /* Sovrapponiamo due gradienti: uno per le colonne e uno per le diagonali */
    background: 
        /* 1. Blocchi Verticali (Le "Colonne" laterali) */
        linear-gradient(90deg, 
            #C2DFD8 0%, #C2DFD8 12%,    /* Colonna sinistra */
            transparent 12%, transparent 88%, 
            #C2DFD8 88%, #C2DFD8 100%   /* Colonna destra */
        ),
        /* 2. Il pattern diagonale (Lo stesso stile di prima ma adattato) */
        linear-gradient(135deg, 
            #fafafa 0%, #fafafa 20%, 
            rgba(198, 224, 221, 0.38823529411764707) 20%, rgba(198, 224, 221, 0.38823529411764707) 25%,   /* Fascia verde sottile */
            #fafafa 25%, #fafafa 40%, 
            rgba(198, 224, 221, 0.38823529411764707) 40%, rgba(198, 224, 221, 0.38823529411764707) 60%,   /* Fascia verde larga */
            #fafafa 60%, #fafafa 75%,
            rgba(198, 224, 221, 0.38823529411764707) 75%, rgba(198, 224, 221, 0.38823529411764707) 80%,   /* Fascia verde sottile finale */
            #fafafa 80%, #fafafa 100%
        );

    /* Questo assicura che i due gradienti si fondano bene */
    background-blend-mode: multiply; 
    background-color: #fafafa;
}
/* --- EFFETTO HOVER TRIGGER --- */

/* 1. Stato iniziale: il box figlio è invisibile e leggermente spostato */
.box-trigger .box-nascosto {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Piccolo movimento fluido dal basso verso l'alto */
    transition: all 0.4s ease-in-out; /* Regola la velocità dell'effetto */
}

/* 2. Stato attivato: quando passo il mouse sul PADRE, il FIGLIO appare */
.box-trigger:hover .box-nascosto {
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Torna alla sua posizione originale */
}
/* --- RIPRISTINO VISIBILITÀ METASLIDER SU MOBILE --- */
@media (max-width: 767px) {
    .metaslider, 
    .metaslider .slides {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        min-height: 250px; /* Forzza un'altezza minima iniziale per lo smartphone */
    }
}

/* --- PROPORZIONE IMMAGINI PERSONALIZZATA --- */

/* Variante Quadrata (1:1) */
.proporzione-quadrata img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
}

/* Variante Rettangolare/Cinematografica (16:9) */
.proporzione-16-9 img {
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
}

/* Variante Verticale (Aura/Ritratti - 3:4) */
.proporzione-verticale img {
    aspect-ratio: 3 / 4 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: auto !important;
}
/* --- COMPORTAMENTO STICKY ESCLUSIVO PER TABLET --- */
@media (min-width: 768px) and (max-width: 1024px) {
    .barra-sticky-responsive {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 20px !important;
        z-index: 99 !important;
        
        /* Limita l'altezza per non far uscire i contenuti dallo schermo del tablet */
        max-height: calc(100vh - 40px) !important; 
        overflow-y: auto !important; 
        -webkit-overflow-scrolling: touch; 
    }
}