/**
 * Component (solo CSS): news-card
 * Stile della card di anteprima news (immagine in cornice + tag/data, titolo, excerpt).
 * Usato dal widget blog/archive e blog/archive-category.
 *
 * HTML atteso:
 * <... class="news-card">
 *   <a class="news-card-link" href="...">
 *     <span class="news-card-media">
 *       <picture>…</picture> | <img class="news-card-img">
 *       <span class="news-card-tags"><span class="news-card-tag">…</span></span>
 *     </span>
 *     <span class="news-card-body">
 *       <span class="news-card-title">…</span>
 *       <span class="news-card-excerpt">…</span>
 *     </span>
 *   </a>
 * </...>
 */

.news-card { list-style: none; min-width: 0; }
.news-card-link {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: var(--website-color-txt-title, #3D3D3D);
}
.news-card-media {
    position: relative;
    padding: 10px;
    background: var(--website-color-secondary, #E9DEC7);
    border-radius: 12px;
}
.news-card-img,
.news-card-media picture {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
}
.news-card-img { object-fit: cover; transition: transform .5s ease; }
.news-card-media picture { overflow: hidden; }
.news-card-link:hover .news-card-img { transform: scale(1.03); }
.news-card-tags {
    position: absolute;
    top: 20px;
    left: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 40px);
}
.news-card-tag {
    background: var(--website-color-light, #FFFAF0);
    color: var(--website-color-txt-title, #3D3D3D);
    font-family: 'Erode', serif;
    font-size: .8rem;
    padding: 6px 10px;
    border-radius: 8px;
    line-height: 1;
}
.news-card-body { display: flex; flex-direction: column; gap: 8px; }
.news-card-title { font-family: 'Erode', serif; font-size: 1.25rem; line-height: 1.25; color: var(--website-color-txt-title, #3D3D3D); }
.news-card-excerpt { color: var(--website-color-txt-body, #4D5359); font-size: .9rem; line-height: 1.55; }