/* --- NUOVO FONDINO GRIGIO CTA --- */

/* Applica il colore e la struttura alla riga con ID "sezione-cta-grigia" */
#sezione-cta-grigia {
    background-color: #f2f2f2 !important; 
    padding: 50px 40px !important;       
    margin-top: 40px !important;          
    margin-bottom: 40px !important;       
    max-width: 1200px !important;         
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Allineamento verticale tra testo e immagine */
#sezione-cta-grigia > .uk-grid {
    align-items: center !important;
}

/* Rimuove i "fantasmi" delle vecchie immagini di sfondo nelle colonne */
#sezione-cta-grigia .uk-first-column, 
#sezione-cta-grigia div[class*="uk-width"] {
    background-image: none !important;
    background-color: transparent !important;
}

/* Mantiene l'immagine pulita e centrata */
#sezione-cta-grigia .el-image {
    width: auto !important;
    max-width: 100% !important;
    display: block;
    margin: 0 auto !important;
}

#sezione-cta-grigia {
    display: flex !important;
    align-items: center !important; /* Centra verticalmente il contenuto delle colonne */
    justify-content: center !important; /* Opzionale: centra tutto il blocco orizzontalmente */

	
/* --- OTTIMIZZAZIONE MOBILE GLOBALE E SEZIONI PERSONALIZZATE --- */

@media (max-width: 959px) {
    /* 1. Forza i fondini (Azzurro e Grigio) a occupare tutto lo spazio senza buchi laterali */
    #sezione-cta-grigia, 
    .sezione-boxed-azzurra,
    .uk-container {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. Allineamento Testo e Immagini: impila gli elementi verticalmente */
    #sezione-cta-grigia {
        flex-direction: column !important;
        text-align: center !important;
        padding: 30px 15px !important;
    }

    #sezione-cta-grigia .el-image {
        margin-top: 20px !important;
        width: 80% !important; /* Riduce l'immagine su mobile per non soffocare il testo */
    }

    /* 3. Gestione Tabelle: abilita lo scorrimento orizzontale per evitare che escano dai bordi */
    .uk-overflow-auto, 
    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 4. Uniformità dei divisori (Linee Nere) */
    .divisore-nero-stratos, 
    hr {
        max-width: 90% !important;
        margin-top: 30px !important;
        margin-bottom: 30px !important;
    }

    /* 5. Riduzione font per titoli grandi che potrebbero rompersi su schermi stretti */
    h2, .uk-h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
}