/* ==========================================================================
   1. IMPOSTAZIONI GENERALI, BADGE E ICONE
   ========================================================================== */

.featured-article-badge {
    display: none !important;
}

/* Allinea il testo nel menu laterale off-canvas se visibile */
.offcanvas-menu .icona {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Ridimensiona le icone social nel menu laterale off-canvas */
.offcanvas-menu .icona img {
    width: 40px !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 5px 0;
}

/* ==========================================================================
   2. GRIGLIA DEGLI ARTICOLI (CARD IN COLONNA E COPERTINE)
   ========================================================================== */

/* Rende le colonne flessibili e tutte della stessa altezza */
.article-list .row {
    display: flex;
    flex-wrap: wrap;
}

.article-list .article {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid #f0f0f0; 
    background: #ffffff;
}

/* Uniforma le immagini delle card secondarie */
.article-intro-image img {
    width: 100%;
    height: 350px !important; 
    object-fit: cover !important;
    background-color: #fafafa;
}

/* Gestisce il corpo delle card spingendo il 'Leggi tutto' in basso */
.article-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 20px;
}

.article-body .readmore {
    margin-top: auto;
}

/* ==========================================================================
   3. STRUTTURA DEL TESTO E CONTROLLO TABELLE (VALIDO PER TUTTI)
   ========================================================================== */

/* Annulla l'altezza fissa delle tabelle per evitare che rompano i box */
.article-introtext table, 
.article-introtext tbody, 
.article-introtext tr, 
.article-introtext td {
    display: block !important;
    height: auto !important;
    width: 100% !important;
}

/* ==========================================================================
   4. TAGLIO TESTO DIFFERENZIATO (ARTICOLI IN GRIGLIA VS ARTICOLI PRINCIPALI)
   ========================================================================== */

/* A. Taglio drastico a 120px SOLO per gli articoli secondari disposti in griglia */
.article-list:not(.articles-leading) .article-introtext {
    max-height: 120px !important; 
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
}

.article-list:not(.articles-leading) .article-introtext::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) !important;
    pointer-events: none;
}

/* B. Taglio esteso a 280px SOLO per gli articoli principali (Leading) */
.articles-leading .article-introtext {
    max-height: 280px !important; 
    overflow: hidden !important;
    position: relative !important;
    display: block !important;
}

.articles-leading .article-introtext::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) !important;
    pointer-events: none;
}

/* /* ==========================================================================
   5. ARTICOLI PRINCIPALI (LEADING) - PAGINE SPECIFICHE
   ========================================================================== */

/* Gestione e pulizia dei box principali (Clearfix) */
.zoom-editoria .articles-leading .com-content-category-blog__item,
.strumenti-infanzia .articles-leading .com-content-category-blog__item {
    display: block !important;
    clear: both !important;
    overflow: hidden !important;
    margin-bottom: 30px !important;
    height: auto !important;
}

/* Posizionamento copertina a sinistra con larghezza fissa e allineamento al titolo */
.zoom-editoria .articles-leading .article-intro-image,
.strumenti-infanzia .articles-leading .article-intro-image {
    float: left !important;
    width: 250px !important; 
    margin-top: 25px !important; /* Spinge in basso l'immagine allineandola alla quota del titolo */
    margin-right: 25px !important;
    margin-left: 0 !important;
    margin-bottom: 15px !important;
}

/* Mantiene intatte le proporzioni delle copertine principali senza tagliarle */
.zoom-editoria .articles-leading .article-intro-image img,
.strumenti-infanzia .articles-leading .article-intro-image img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}