/**
 * mod_lametinocorrelati — correlati + ultime notizie.
 * Pensato per la sidebar destra (aside.lam-content-sidebar, 340px):
 * lista verticale compatta con thumb a sinistra, come il vecchio J3.
 * Se il contenitore è largo (es. main-bottom) una container query
 * passa da sola alla griglia di card; senza supporto @container resta
 * la lista, che è comunque corretta ovunque.
 * Specificità bassa, tutto namespaced .lam-correlati: override da user.css
 * o dal CSS del child template senza !important.
 * Accent color personalizzabile: --lam-correlati-accent.
 */

.lam-correlati {
    clear: both;
    container-type: inline-size;
    margin: 1.5rem 0 1rem;
    /* usa i design token del template Lametino quando esistono
       (--lam-blue = blu titoli/menu del sito), con fallback standalone */
    --lam-correlati-accent: var(--lam-blue, #00386b);
    --lam-correlati-title: var(--lam-blue, #00386b);
}

.lam-correlati__block + .lam-correlati__block {
    margin-top: 1.75rem;
}

.lam-correlati__heading {
    font-size: 1.15rem;
    line-height: 1.2;
    margin: 0 0 0.85rem;
    padding-left: 0.6rem;
    border-left: 4px solid var(--lam-correlati-accent);
}

/* --- layout base: lista da sidebar --- */

.lam-correlati__grid {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.lam-correlati__card {
    margin: 0;
}

.lam-correlati__card + .lam-correlati__card {
    border-top: 1px solid #ececec;
    padding-top: 0.85rem;
}

.lam-correlati__link {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 0.7rem;
    align-items: start;
    color: inherit;
    text-decoration: none;
}

/* solo neutralizzazione colore del template (a:visited rosso): niente
   proprietà strutturali qui — :active a specificità maggiore
   sovrascriverebbe il layout della container query durante il click */
.lam-correlati__link:visited,
.lam-correlati__link:active {
    color: inherit;
    text-decoration: none;
}

.lam-correlati__link:hover .lam-correlati__title,
.lam-correlati__link:focus-visible .lam-correlati__title {
    text-decoration: underline;
}

.lam-correlati__link:focus-visible {
    outline: 2px solid var(--lam-correlati-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

/* aspect-ratio riserva lo spazio prima del load: niente CLS anche senza
   width/height note (le immagini arrivano dal corpo articolo) */
.lam-correlati__thumb {
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 6px;
    background: #e9e9e9;
}

.lam-correlati__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lam-correlati__thumb--empty {
    background: #e9e9e9 center / 46% no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23bdbdbd'%3E%3Cpath d='M22 3H2v16a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V3zM4 5h16v14H4V5zm2 2v4h5V7H6zm7 0v2h5V7h-5zm0 4v2h5v-2h-5zM6 13v2h12v-2H6zm0 4v2h12v-2H6z'/%3E%3C/svg%3E");
}

.lam-correlati__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.lam-correlati__cat {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--lam-correlati-accent);
}

.lam-correlati__title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.32;
    color: var(--lam-correlati-title);
}

.lam-correlati__date {
    font-size: 0.72rem;
    color: #666;
}

/* --- contenitore largo (es. main-bottom): griglia di card --- */

@container (min-width: 560px) {
    .lam-correlati__grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.5rem 1rem;
    }

    .lam-correlati__card + .lam-correlati__card {
        border-top: 0;
        padding-top: 0;
    }

    .lam-correlati__link {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
        height: 100%;
    }

    .lam-correlati__thumb {
        width: 100%;
    }

    .lam-correlati__heading {
        font-size: 1.3rem;
    }

    .lam-correlati__title {
        font-size: 0.95rem;
    }
}

@media print {
    .lam-correlati {
        display: none;
    }
}