/* ==========================================================================
   CONTENITORE SCROLL ORIZZONTALE
   ========================================================================== */
.modern-scroll-wrapper-avvisi {
    display: flex !important;                         /* Attiva il modello Flexbox per disporre gli elementi in linea */
    flex-wrap: nowrap !important;                     /* Impedisce tassativamente agli elementi di andare a capo su più righe */
    overflow-x: auto !important;                      /* Abilita lo scorrimento orizzontale automatico se i contenuti eccedono lo spazio */
    overflow-y: hidden !important;                    /* Nasconde e blocca qualsiasi scorrimento verticale indesiderato */
    scroll-snap-type: x mandatory !important;         /* Attiva l'effetto magnete (ancoraggio vincolante) sull'asse orizzontale */
    -webkit-overflow-scrolling: touch !important;      /* Forzatura dell'accelerazione hardware per uno swipe fluido su iOS */
    padding-bottom: 15px !important;                  /* Crea spazio inferiore per ospitare la scrollbar senza coprire le card */
    padding-top: 5px !important;                       /* Distanza di sicurezza dal bordo superiore per ombreggiature (shadow) */
    margin: 0 !important;                             /* Annulla i margini esterni predefiniti della riga Bootstrap */
    gap: 16px !important;                             /* Imposta una distanza fissa di 16px tra una card e l'altra */
}

/* ==========================================================================
   RESPONSIVE DESIGN & LARGHEZZE CARD
   ========================================================================== */

/* SMARTPHONE: Layout ottimizzato per il touch */
.modern-scroll-item-avvisi {
    flex: 0 0 85% !important;                         /* Imposta la larghezza base all'85% dello schermo (non cresce, non cala) */
    max-width: 85% !important;                        /* Vincola la larghezza massima assoluta all'85% */
    flex-shrink: 0 !important;                        /* Impedisce al Flexbox di comprimere la card per farla stare nello schermo */
    scroll-snap-align: start !important;              /* Definisce il bordo sinistro della card come punto di aggancio del magnete */
    box-sizing: border-box !important;                /* Include padding e bordi nel calcolo della larghezza totale dell'elemento */
}

/* TABLET (da 768px in su): Layout intermedio */
@media (min-width: 768px) {
    .modern-scroll-item-avvisi {
        flex: 0 0 47% !important;                     /* Porta la larghezza al 47% per mostrare due card e un pezzo della terza */
        max-width: 47% !important;                    /* Blocca la larghezza massima al 47% su tablet */
    }
}

/* DESKTOP (da 992px in su): Calcolo matematico perfetto per 3 elementi */
@media (min-width: 992px) {
    .modern-scroll-item-avvisi {
        flex: 0 0 calc((100% - 32px) / 3) !important; /* Sottrae lo spazio totale dei gap (16px * 2) e divide il resto esattamente per 3 */
        max-width: calc((100% - 32px) / 3) !important;/* Applica la stessa formula matematica alla larghezza massima consentita */
    }
}

/* ==========================================================================
   STILIZZAZIONE INTERNA DELLE CARD (ALTEZZA FISSA 125PX)
   ========================================================================== */
.compact-horizontal-card {
    height: 125px !important;                         /* Blocca l'altezza della card a 125px per uniformità in Homepage */
    overflow: hidden;                                 /* Taglia qualsiasi contenuto che tenti di uscire dai 125px di altezza */
    background: #ffffff;                              /* Imposta lo sfondo della card su bianco puro */
    border: 1px solid #eaeaea !important;             /* Applica un bordo sottile grigio chiaro */
    border-radius: 6px !important;                    /* Arrotonda gli angoli della card con un raggio di 6px */
    width: 100% !important;                           /* Estende la card fino a coprire tutto lo spazio fornito dal contenitore */
}

/* Wrapper dell'immagine per centrarla e bloccarne l'altezza */
.card-img-left-wrapper {
    height: 125px;                                    /* Allinea l'altezza del contenitore immagine ai 125px della card */
    overflow: hidden;                                 /* Nasconde le parti dell'immagine in eccesso durante lo zoom */
    display: flex;                                    /* Attiva Flexbox per gestire il posizionamento dell'immagine */
    align-items: center;                              /* Centra l'immagine verticalmente nel suo riquadro */
    justify-content: center;                          /* Centra l'immagine orizzontalmente nel suo riquadro */
    background-color: #f8f9fa;                        /* Colore grigio chiarissimo di sfondo in attesa del caricamento immagine */
}

/* Immagine intro fluida con micro-effetto zoom */
.card-img-left-wrapper img {
    width: 100%;                                      /* Espande la larghezza dell'immagine al 100% del suo contenitore */
    height: 100%;                                     /* Espande l'altezza dell'immagine al 100% del suo contenitore */
    object-fit: cover;                                /* Ritaglia e adatta l'immagine riempiendo lo spazio senza deformarla */
    transition: transform 0.3s ease;                  /* Transizione fluida di 0.3 secondi per l'effetto di zoom progressivo */
}

/* Effetto Hover sull'immagine */
.card-img-left-wrapper img:hover {
    transform: scale(1.03);                           /* Ingrandisce leggermente l'immagine del 3% al passaggio del mouse */
}

/* ==========================================================================
   GESTIONE TIPOGRAFICA (TRONCAMENTO DELLE RIGHE CSS)
   ========================================================================== */

/* Titolo dell'avviso limitato a 2 righe */
.card-title-avvisi {
    font-size: 0.85rem !important;                    /* Dimensione del carattere compatta (circa 13.6px) */
    font-weight: 700 !important;                      /* Imposta il testo in grassetto marcato */
    line-height: 1.2 !important;                      /* Imposta l'altezza della riga per una corretta leggibilità ravvicinata */
    margin: 0 0 4px 0 !important;                     /* Applica un margine solo inferiore di 4px per staccarsi dal testo */
    display: -webkit-box;                             /* Richiesto per attivare il sistema di troncamento righe multi-linea */
    -webkit-line-clamp: 2;                            /* Blocca tassativamente il testo visibile a un massimo di 2 righe */
    -webkit-box-orient: vertical;                     /* Specifica l'orientamento verticale del blocco per il troncamento */
    overflow: hidden;                                 /* Nasconde il testo che va oltre la seconda riga */
}

/* Stile del link del titolo */
.card-title-avvisi a {
    color: #212529 !important;                        /* Imposta il colore del testo su un grigio scuro/nero antropomorfo */
}

/* Testo descrittivo limitato a 2 righe */
.card-text-avvisi {
    font-size: 0.75rem !important;                    /* Dimensione del carattere molto compatta (circa 12px) */
    line-height: 1.3 !important;                      /* Altezza riga leggermente più ariosa rispetto al titolo */
    color: #555555 !important;                        /* Colore grigio medio per differenziare gerarchicamente il testo dal titolo */
    display: -webkit-box;                             /* Richiesto per attivare il sistema di troncamento righe multi-linea */
    -webkit-line-clamp: 2;                            /* Taglia il testo introduttivo alla seconda riga */
    -webkit-box-orient: vertical;                     /* Specifica l'orientamento verticale per il taglio del testo */
    overflow: hidden;                                 /* Nasconde i caratteri e le parole eccedenti le 2 righe */
}

/* Pulsante Leggi di Più */
.btn-readmore-avvisi {
    font-size: 0.72rem !important;                    /* Dimensione microscopica controllata per il tasto di azione */
    font-weight: 600;                                 /* Testo in semi-grassetto per aumentarne la visibilità */
    text-transform: uppercase;                        /* Converte tutto il testo in lettere MAIUSCOLE */
    color: #0d6efd;                                   /* Colore blu primario di Bootstrap 5 */
    text-decoration: none;                            /* Rimuove la sottolineatura standard dei link */
    display: inline-block;                            /* Permette di gestire correttamente margini e spaziature del link */
}

/* Stato hover del pulsante */
.btn-readmore-avvisi:hover {
    text-decoration: underline;                       /* Mostra la sottolineatura solo quando il mouse passa sopra il link */
}

/* ==========================================================================
   PERSONALIZZAZIONE DELLA BARRA DI SCORRIMENTO (WEBKIT)
   ========================================================================== */

/* Dimensioni della scrollbar */
.modern-scroll-wrapper-avvisi::-webkit-scrollbar {
    height: 5px;                                      /* Imposta lo spessore della barra orizzontale a soli 5px per discrezione */
}

/* Binario di scorrimento (Sfondo della barra) */
.modern-scroll-wrapper-avvisi::-webkit-scrollbar-track {
    background: #f1f1f1;                              /* Colore di sfondo del binario grigio chiarissimo */
    border-radius: 10px;                              /* Arrotonda completamente le estremità del binario */
}

/* Cursore di scorrimento (L'elemento che si trascina) */
.modern-scroll-wrapper-avvisi::-webkit-scrollbar-thumb {
    background: #cccccc;                              /* Colore del cursore grigio pastello neutro */
    border-radius: 10px;                              /* Arrotonda completamente gli angoli del cursore */
}

/* Stato hover del cursore */
.modern-scroll-wrapper-avvisi::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;                              /* Scurisce il grigio del cursore quando l'utente ci passa sopra col mouse */
}