/* Article en vignette (catégorie, date, visuel) : partagé par la liste du blog, l'article et les lectures
   proposées sur les autres pages (reading-list.css). */

/* Catégorie en capitales, puis date et temps de lecture. */
.post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    align-items: baseline;
    color: var(--text-secondary);
    font-size: var(--text-sm);
}

.post-meta__category {
    color: var(--text-primary);
    font-size: var(--text-xs);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

/* Visuel d'article : couverture, ou planche nuit relevée avec l'icône de la catégorie. */
.post-art {
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    transition: scale 0.6s var(--ease-out);
}

.post-art--drawn {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--color-champagne) 10%, transparent), transparent 60%),
        var(--color-night-high);
}

.post-art--drawn .icon-ring {
    width: 5rem;
    height: 5rem;
}

.post-art--drawn .icon-ring::after {
    width: 2rem;
    height: 2rem;
}