/* =========================================================
   Charles Cuisine — Sommaire des rubriques (/rubriques.html)
   Liste éditoriale : une rubrique par ligne, titre large,
   description en italique, compteur discret à droite.
   À charger EN PLUS de category.css (qui fournit .cat-head,
   .cat-crumb, .cat-title, .cat-count).
   ========================================================= */

.rubriques-page {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 var(--s-md);
}

.rub-index {
    padding: clamp(var(--s-2xl), 6vw, var(--s-3xl)) 0;
}

.rub-list {
    display: flex;
    flex-direction: column;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
}

.rub-item {
    border-bottom: 1px dashed color-mix(in srgb, var(--ink) 15%, transparent);
    transition: background 0.3s var(--ease-out);
}

.rub-item:last-child { border-bottom: 0; }

.rub-item:hover {
    background: color-mix(in srgb, var(--rouge) 4%, transparent);
}

.rub-item a {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: baseline;
    gap: var(--s-2xs) var(--s-lg);
    padding: var(--s-lg) var(--s-sm);
}

.rub-title {
    font-family: var(--ff-serif);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
    grid-column: 1;
    grid-row: 1;
    transition: color 0.3s var(--ease-out);
}

.rub-item:hover .rub-title { color: var(--rouge); }

.rub-desc {
    font-family: var(--ff-serif);
    font-style: italic;
    font-size: 1rem;
    line-height: 1.45;
    color: var(--ink-soft);
    max-width: 62ch;
    grid-column: 1;
    grid-row: 2;
    text-wrap: balance;
}

.rub-count {
    font-family: var(--ff-sans);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ink-soft);
    white-space: nowrap;
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
    .rub-item a {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: var(--s-2xs);
        padding: var(--s-md) var(--s-sm);
    }
    .rub-count {
        grid-column: 1;
        grid-row: 3;
        margin-top: var(--s-2xs);
    }
}