/* ==========================================================================
   FOGLIO DI STILE DEDICATO: LAYOUT BLOG EDITORIALE (JOOMLA & HELIX)
   ========================================================================== */

/* Contenitore principale del componente blog */
.editorial-blog-container {
    max-width: 1140px;                     /* Limita la larghezza massima in linea con la griglia Helix */
    margin: 0 auto;                        /* Centra il contenitore nella pagina */
    padding: 20px 15px;                    /* Spazio interno di sicurezza per i margini dello schermo */
}

/* Contenitore che racchiude l'elenco dei rettangoli degli articoli */
.editorial-blog-items {
    border-top: 1px solid #dee2e6;         /* Linea grigia superiore di inizio elenco */
    margin-top: 25px;                      /* Distanzia l'elenco dei contenuti dai titoli soprastanti */
}

/* Struttura del singolo rettangolo dell'articolo su Desktop (Altezza fissa) */
.editorial-item {
    border-bottom: 1px solid #dee2e6;      /* Linea grigia inferiore di separazione tra gli articoli */
    padding: 35px 20px;                    /* Spaziatura verticale ed orizzontale interna al rettangolo */
    display: block;                        /* Rende l'elemento un blocco solido */
    height: 220px;                         /* 150px di altezza immagine + 70px totali di padding (35px sopra + 35px sotto) */
    max-height: 220px;                     /* Impedisce tassativamente l'espansione verticale */
    overflow: hidden;                      /* Taglia e nasconde qualsiasi testo o titolo in eccesso */
    transition: background-color 0.25s ease-in-out, box-shadow 0.25s ease-in-out;
}

/* Effetto al passaggio del mouse sull'intero rettangolo */
.editorial-item:hover {
    background-color: #f8f9fa;             /* Sfondo grigio chiarissimo per evidenziare la selezione */
    cursor: pointer;                       /* Cambia il cursore in pointer su tutto il rettangolo */
}

/* Struttura interna a riga tabellare per l'allineamento orizzontale su Desktop */
.editorial-row {
    display: table;                        /* Simula il comportamento nativo di una riga di tabella */
    width: 100%;                           /* Sfrutta tutta la larghezza del contenitore padre */
    table-layout: fixed;                   /* Forza il rispetto millimetrico delle percentuali delle colonne */
    height: 150px;                         /* Pareggia l'altezza netta interna a quella dell'immagine */
}

/* Proprietà condivise dalle tre colonne del rettangolo su Desktop */
.editorial-meta-col,
.editorial-body-col,
.editorial-image-col {
    display: table-cell;                   /* Simula il comportamento di una cella di tabella */
    vertical-align: top;                   /* Allinea tutti i contenuti partendo dal margine superiore */
}

/* COLONNA SINISTRA DESKTOP (18%): Data di pubblicazione */
.editorial-meta-col {
    width: 18%;
    font-size: 0.95rem;
    color: #6c757d;
    font-weight: 500;
    padding-right: 15px;
}

/* COLONNA CENTRALE DESKTOP (52%): Titolo e Testo Introduzione */
.editorial-body-col {
    width: 52%;
    padding-right: 30px;
    overflow: hidden;
}

/* Stile del titolo dell'articolo */
.editorial-title {
    font-size: 1.35rem;
    margin: 0 0 12px 0;
    line-height: 1.4;
    font-weight: 600;
}

/* Collegamento ipertestuale del titolo */
.editorial-title a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.editorial-title a:hover {
    color: #0056b3;                        /* Cambia nel blu istituzionale Helix al passaggio del mouse */
}

/* Stile del testo dell'estratto (Introtext) - Limitato in altezza su Desktop */
.editorial-introtext {
    font-size: 0.95rem;
    color: #4a4a4a;
    line-height: 1.6;
    max-height: 72px;                      /* Limita lo spazio a circa 3 righe di testo */
    overflow: hidden;                      /* Impedisce al testo lungo di uscire dal rettangolo */
}

/* COLONNA DESTRA DESKTOP (30%): Blocco Immagine principale */
.editorial-image-col {
    width: 30%;
}

/* Scatola di contenimento dell'immagine con dimensioni e proporzioni bloccate */
.editorial-image-container {
    width: 100%;
    height: 150px;                         /* Altezza fissa su desktop */
    overflow: hidden;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Rendering dell'immagine interna con logica Object-Fit */
.editorial-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;                     /* Ritaglia l'immagine proporzionalmente senza distorcerla */
    object-position: center;               /* Centra l'inquadratura del ritaglio */
    transition: transform 0.3s ease;
}

/* Effetto micro-zoom dell'immagine quando l'utente passa il mouse sopra il rettangolo */
.editorial-item:hover .editorial-image-container img {
    transform: scale(1.03);
}

/* Segnaposto grafico utilizzato se l'articolo è privo di immagini */
.editorial-image-placeholder {
    width: 100%;
    height: 150px;
    background-color: #e9ecef;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #adb5bd;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Contenitore inferiore dedicato alla paginazione nativa */
.editorial-pagination-container {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}


/* ==========================================================================
   BREAKPOINT RESPONSIVE SPECIALE: RIGOROSAMENTE AFFIANCATO SU MOBILE
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Blocchiamo l'altezza totale del rettangolo anche su mobile (Data + Spazio Contenuti affiancati) */
    .editorial-item {
        padding: 15px 12px;
        height: 175px;                     /* VINCOLO MOBILE: Altezza totale inclusi i padding */
        max-height: 175px;                 /* Impedisce variazioni o allungamenti improvvisi dei rettangoli */
        overflow: hidden;
    }

    /* 2. Sganciamo la tabella ed attiviamo il motore Flexbox per dominare i flussi dei blocchi */
    .editorial-row {
        display: flex !important;
        flex-wrap: wrap;                   /* Permette alla data di posizionarsi sopra occupando il 100% */
        width: 100% !important;
        height: auto !important;
    }

    /* 3. COLONNA DATA: Diventa un tetto orizzontale a tutta larghezza (100%) in cima */
    .editorial-meta-col {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding-right: 0 !important;
        margin-bottom: 10px;               /* Distanzia la data dal binomio testo/foto sottostante */
        font-size: 0.85rem;
        color: #6c757d;
    }

    /* 4. COLONNA TESTO: Rimane a sinistra occupando stabilmente il 65% della riga mobile */
    .editorial-body-col {
        display: block !important;
        width: 65% !important;
        padding-right: 15px !important;    /* Spazio di sicurezza per non urtare l'immagine a destra */
        overflow: hidden;
    }

    /* Adattamento proporzionale dei testi nel box ridotto mobile */
    .editorial-title {
        font-size: 1.1rem;                 /* Titolo più compatto ed elegante per schermi piccoli */
        margin: 0 0 4px 0;
        line-height: 1.3;
    }

    .editorial-introtext {
        font-size: 0.85rem;
        line-height: 1.5;
        max-height: 52px !important;       /* Massimo 2 o 3 righe di testo prima del taglio netto geometrico */
        overflow: hidden;
    }

    /* 5. COLONNA IMMAGINE: Rimane a destra occupando stabilmente il 35% della riga mobile */
    .editorial-image-col {
        display: block !important;
        width: 35% !important;
    }

    /* Scatola immagine riproporzionata per mobile (Altezza fissa interna bloccata a 110px) */
    .editorial-image-container,
    .editorial-image-placeholder {
        height: 110px !important;          /* Vincolo assoluto per l'immagine su smartphone */
        width: 100% !important;
    }
}