/* Lectures proposées hors du blog (accueil, pages machines, investissement, fin d'article) : trois articles
   sous filets, jamais de carte. Sur mobile, une rangée par article, vignette à gauche ; dès 56rem, trois
   colonnes, visuel au-dessus. */
.reading-list__items {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5) var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.reading-list__items article {
    position: relative;
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    align-items: start;
    height: 100%;
    padding-top: var(--space-5);
    border-top: 1px solid var(--rule);
}

.reading-list__art {
    grid-row: span 2;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.reading-list__items .post-meta {
    margin: 0;
}

.reading-list__items h3 {
    font-size: var(--text-md);
    line-height: 1.35;
    text-wrap: pretty;
}

/* Tout l'article se clique ; le lien porte le titre, lu une seule fois par un lecteur d'écran. */
.reading-list__items h3 a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s var(--ease-out);
}

.reading-list__items h3 a::after {
    content: '';
    position: absolute;
    inset: 0;
}

.reading-list__items article:hover h3 a,
.reading-list__items h3 a:focus-visible {
    color: var(--text-link);
}

@media (prefers-reduced-motion: no-preference) {
    .reading-list__items article:hover .post-art {
        scale: 1.03;
    }
}

.reading-list__all {
    margin-top: var(--space-6);
}

@media (min-width: 56rem) {
    .reading-list__items {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .reading-list__items article {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
        gap: var(--space-3);
    }

    .reading-list__art {
        grid-row: auto;
        margin-bottom: var(--space-2);
        border-radius: var(--radius-md);
    }

    .reading-list__items h3 {
        font-size: var(--text-lg);
    }
}