/**
 * Le Mag' — articles.
 *
 * Préfixe : .lenain-pages-liees
 * Deux modes : --selection (bas de page métier) et --hub (page du Mag').
 * Section sans fond : le rythme vertical vient du système d'espacement global.
 */

.lenain-pages-liees__inner {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/*
 * Sur la page hub, l'article à la une et la liste sont deux blocs distincts de
 * la maquette : l'espace qui les sépare est celui de deux sections resserrées.
 */
.lenain-pages-liees--hub .lenain-pages-liees__inner {
    gap: var(--lp-section-gap-sm);
}

.lenain-pages-liees__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lenain-pages-liees__kicker {
    margin: 0;
    color: var(--wp--preset--color--kicker);
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--xxs);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.lenain-pages-liees__title {
    margin: 0;
    max-width: 420px;
}

/* ------------------------------------------------------------ Article à la une */

/*
 * Maquette : image à gauche sur 1,4 part, texte à droite sur 1 part, le tout
 * dans un aplat clair aux angles arrondis. La carte entière est cliquable.
 */
.lenain-pages-liees__featured {
    /* Ancre du lien-titre étiré : toute la carte est la zone de clic. */
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    border-radius: var(--lp-radius-lg);
    background: var(--wp--preset--color--bg);
    color: var(--wp--preset--color--text);
    overflow: hidden;
}

.lenain-pages-liees__featured-media {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 440px;
    overflow: hidden;
}

.lenain-pages-liees__featured-media .lenain-pages-liees__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lenain-pages-liees__featured-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    padding: 56px;
    min-width: 0;
}

.lenain-pages-liees__featured-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: var(--wp--preset--font-size--xxs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lenain-pages-liees__badge {
    padding: 6px 14px;
    border-radius: var(--lp-radius-pill);
    background: var(--wp--preset--color--rose);
    color: var(--wp--preset--color--white);
    font-weight: 700;
    line-height: 1.2;
}

.lenain-pages-liees__featured-pilier {
    color: var(--wp--preset--color--kicker);
    font-weight: 600;
}

.lenain-pages-liees__featured-title {
    margin: 0;
    color: var(--wp--preset--color--titre);
    font-size: var(--wp--preset--font-size--xl-2);
    line-height: 1.4;
}

.lenain-pages-liees__featured-excerpt {
    display: block;
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.7;
}

.lenain-pages-liees__featured-cta {
    margin-top: 8px;
}

/* ------------------------------------------------------------------ Cartes */

/*
 * Grille en sous-grille : chaque carte reprend les rangées de la grille, si
 * bien que les visuels, les titres, les résumés et les liens s'alignent d'une
 * carte à l'autre, quelle que soit la longueur des textes.
 */
.lenain-pages-liees--selection .lenain-pages-liees__grid {
    grid-template-rows: auto auto auto auto;
    gap: 16px 32px;
}

.lenain-pages-liees--selection .lenain-pages-liees__card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    align-content: start;
}

.lenain-pages-liees__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
}

/* La maquette aère davantage les rangées de la page hub. */
.lenain-pages-liees--hub .lenain-pages-liees__grid {
    gap: 48px 32px;
}

.lenain-pages-liees__card {
    /* Ancre du lien-titre étiré : toute la carte est la zone de clic. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    color: var(--wp--preset--color--text);
}

/* Repliée par le rendu serveur, dépliée par view.js au clic sur « charger plus ». */
.lenain-pages-liees__card--folded {
    display: none;
}

.lenain-pages-liees__media {
    display: block;
    height: 260px;
    border-radius: var(--lp-radius-md);
    overflow: hidden;
    background: var(--wp--preset--color--bg);
}

.lenain-pages-liees__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.lenain-pages-liees__card:hover .lenain-pages-liees__image,
.lenain-pages-liees__card:focus-within .lenain-pages-liees__image,
.lenain-pages-liees__featured:hover .lenain-pages-liees__image,
.lenain-pages-liees__featured:focus-within .lenain-pages-liees__image {
    transform: scale(1.03);
}

.lenain-pages-liees__meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0;
    color: var(--wp--preset--color--kicker);
    font-size: var(--wp--preset--font-size--xxs);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.lenain-pages-liees__meta-pilier {
    color: var(--wp--preset--color--rose);
    font-weight: 700;
}

.lenain-pages-liees__card-title {
    margin: 0;
    color: color-mix(in srgb, var(--wp--preset--color--titre) 90%, transparent);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 500;
    letter-spacing: 0.12em;
}

/*
 * Le titre est l'ancre de la carte. Il garde sa couleur, survol compris :
 * le retour visuel vit sur la carte entière (zoom du visuel, flèche),
 * comme avant la migration du lien.
 */
.lenain-pages-liees__card-link {
    color: inherit;
    text-decoration: none;
}

.lenain-pages-liees__card-title .lenain-pages-liees__card-link:hover,
.lenain-pages-liees__featured-title .lenain-pages-liees__card-link:hover {
    color: inherit;
}

/* La zone de clic : le lien du titre s'étire sur toute la carte. */
.lenain-pages-liees__hit {
    position: absolute;
    inset: 0;
}

.lenain-pages-liees__excerpt {
    margin: 0;
    color: var(--wp--preset--color--text-soft);
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.65;
}

/*
 * Le lien reprend l'anatomie de .leb-cta (pastille + flèche) sans la pilule :
 * seules les variables changent, la structure reste celle des boutons du site.
 *
 * Les feuilles de blocs sont imprimées AVANT buttons.css : à spécificité égale
 * .leb-cta l'emporterait. On chaîne les deux classes pour reprendre la main,
 * plutôt que de forcer chaque déclaration.
 */
.leb-cta.lenain-pages-liees__link {
    /*
     * Libellé décoratif peint au-dessus du lien-titre étiré (.leb-cta est
     * positionné) : les clics doivent le traverser pour atteindre le lien.
     */
    pointer-events: none;

    --lp-cta-bg: transparent;
    --lp-cta-bg-hover: transparent;
    --lp-cta-text: var(--wp--preset--color--titre);
    --lp-cta-text-hover: var(--wp--preset--color--rose);
    --lp-cta-dot: var(--wp--preset--color--border);
    --lp-cta-arrow: var(--wp--preset--color--anthracite);
    --lp-cta-inset: 0px;

    align-self: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding: 0;
    border: 0;
    letter-spacing: 0.14em;
}

/* Le libellé décoratif suit le survol de la carte : rose et flèche levée. */
.lenain-pages-liees__card:hover .lenain-pages-liees__link,
.lenain-pages-liees__card:focus-within .lenain-pages-liees__link,
.lenain-pages-liees__featured:hover .lenain-pages-liees__featured-cta,
.lenain-pages-liees__featured:focus-within .lenain-pages-liees__featured-cta {
    color: var(--lp-cta-text-hover);
}

.lenain-pages-liees__card:hover .lenain-pages-liees__link::after,
.lenain-pages-liees__card:focus-within .lenain-pages-liees__link::after,
.lenain-pages-liees__featured:hover .lenain-pages-liees__featured-cta::after,
.lenain-pages-liees__featured:focus-within .lenain-pages-liees__featured-cta::after {
    transform: translateY(-50%) rotate(-45deg);
}

/* --------------------------------------------------------- Charger plus */

.lenain-pages-liees__list {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

/* La maquette écarte nettement ce groupe de la dernière rangée de cartes. */
.lenain-pages-liees__more-bar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
}

.lenain-pages-liees__count {
    margin: 0;
    color: var(--wp--preset--color--kicker);
    font-size: var(--wp--preset--font-size--xs);
    letter-spacing: 0.08em;
}

/*
 * Bouton à contour discret : seules les variables de .leb-cta changent, la
 * pilule et la pastille restent celles du système. Le contour gris se referme
 * en anthracite au survol — c'est le seul mouvement du bouton.
 */
.leb-cta.lenain-pages-liees__more {
    --lp-cta-bg: var(--wp--preset--color--white);
    --lp-cta-bg-hover: var(--wp--preset--color--white);
    --lp-cta-text: var(--wp--preset--color--anthracite);
    --lp-cta-text-hover: var(--wp--preset--color--anthracite);
    --lp-cta-dot: var(--wp--preset--color--border);
    --lp-cta-arrow: var(--wp--preset--color--anthracite);
    --lp-cta-border: var(--lp-border-strong);
    --lp-cta-border-hover: var(--wp--preset--color--anthracite);

    padding-right: 26px;
}

/* La flèche du système pointe à droite ; ici elle invite à descendre. */
.lenain-pages-liees__more.leb-cta::after {
    transform: translateY(-50%) rotate(90deg);
}

/* Plus rien à charger : view.js pose la classe et l'attribut hidden. */
.lenain-pages-liees__more.lenain-pages-liees__more--done {
    display: none;
}

/* -------------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
    .lenain-pages-liees__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .lenain-pages-liees__media {
        height: 220px;
    }

    .lenain-pages-liees__featured {
        grid-template-columns: minmax(0, 1fr);
    }

    .lenain-pages-liees__featured-media {
        min-height: 320px;
    }

    .lenain-pages-liees__featured-body {
        padding: 40px;
    }
}

@media (max-width: 640px) {
    .lenain-pages-liees__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /*
     * En colonne, la sous-grille n'a plus de raison d'être : elle sert à
     * aligner les visuels, les titres et les liens d'une carte à l'autre quand
     * elles sont côte à côte. Empilées, il n'y a plus rien à aligner, et ses
     * rangées communes imposaient à chaque carte la hauteur de la plus haute —
     * d'où les blancs entre le résumé et le lien.
     *
     * Les cartes reprennent donc la disposition de base, en colonne simple, et
     * l'écart entre elles passe de 16 à 40px : empilées, elles se touchaient
     * presque.
     */
    .lenain-pages-liees--selection .lenain-pages-liees__grid {
        grid-template-rows: none;
        gap: 40px;
    }

    .lenain-pages-liees--selection .lenain-pages-liees__card {
        display: flex;
        grid-template-rows: none;
        grid-row: auto;
    }

    .lenain-pages-liees__inner {
        gap: 32px;
    }

    .lenain-pages-liees__featured-media {
        min-height: 240px;
    }

    .lenain-pages-liees__featured-body {
        padding: 28px 20px;
    }

    .lenain-pages-liees__list {
        gap: 40px;
    }
}

/* --------------------------------------------------- Sans JavaScript */

/*
 * Le repli est un confort de lecture, pas une pagination : sans script, tous
 * les articles sont visibles et le bouton disparaît.
 */
@media (scripting: none) {
    .lenain-pages-liees__card--folded {
        display: flex;
    }

    .lenain-pages-liees__more-bar {
        display: none;
    }
}