/* =============================================================================
   Widget "Ultimi articoli" — griglia di card (immagine in evidenza + titolo),
   ogni card è un link all'articolo. Solo CSS strutturale: colonne, distanze,
   colori, tipografia, raggi e bordi arrivano dai controlli Elementor
   (variabili --cp-lp-*). Fallback allineati ai token del tema.
   ============================================================================= */

.cp-latest-posts {
    display: grid;
    grid-template-columns: repeat(var(--cp-lp-cols, 4), minmax(0, 1fr));
    gap: var(--cp-lp-gap, 24px);
}

.cp-latest-posts__item {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cp-latest-posts__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Contenitore immagine: proporzioni fisse (dal controllo), immagine in cover. */
.cp-latest-posts__thumb {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3; /* override dal controllo "Proporzioni immagine" */
    background: var(--cp-muted, rgba(43, 36, 39, 0.12));
}

.cp-latest-posts__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--cp-t-normal, 220ms ease-out);
}

/* Placeholder quando un articolo non ha immagine in evidenza. */
.cp-latest-posts__thumb-empty {
    display: block;
    width: 100%;
    height: 100%;
}

/* Leggero zoom dell'immagine al passaggio del mouse sulla card. */
.cp-latest-posts__link:hover .cp-latest-posts__thumb img {
    transform: scale(1.04);
}

.cp-latest-posts__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.cp-latest-posts__date {
    display: block;
    margin-top: 12px;
    font-size: var(--cp-fs-small, 14px);
    color: var(--cp-muted, rgba(43, 36, 39, 0.55));
    letter-spacing: var(--cp-tracking-small, -0.28px);
}

.cp-latest-posts__title {
    margin: 12px 0 0;
    /* Font-family/peso arrivano da `.cp-h3` (classe brand, aggiunta in render) →
       coerenti col resto del sito. La DIMENSIONE invece è propria: il titolo di
       una card in griglia (4 colonne, ~330px) è una scala diversa da un
       sottotitolo di sezione. Prima ereditava `--cp-h3-fs`, ma dopo il
       consolidamento tipografico del 2026-07-23 quella variabile vale 54px
       (i titoli di sezione del sito) → le card erano diventate enormi.
       riportata alla scala-card che aveva prima. */
    color: inherit;
    text-wrap: balance;
}

/* Dimensione card propria (doppia classe = 0,2,0: batte il font-size di
   `.cp-h3` qualunque sia l'ordine di caricamento dei fogli). Fluida 21→26px,
   stessa curva del sito (min = 16 + (max−16)×0.5). */
.cp-latest-posts__title.cp-h3 {
    font-size: clamp(21px, calc(21px + 5 * (100vw - 390px) / 1050), 26px);
    line-height: 1.2;
}

/* Hover indipendente dallo sfondo: sottolineatura invece del cambio colore.
   Il vecchio hover verso l'accento spariva sulle sezioni con sfondo arancione. */
.cp-latest-posts__link:hover .cp-latest-posts__title {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 2px;
}

/* Avviso in editor quando non ci sono articoli pubblicati. */
.cp-latest-posts__empty {
    padding: 24px;
    text-align: center;
    color: var(--cp-muted, rgba(43, 36, 39, 0.55));
    border: 1px dashed var(--cp-muted, rgba(43, 36, 39, 0.35));
    border-radius: var(--cp-radius-md, 5px);
}