/*
 * Section Cartes horizontales — Figma node 2644:69850.
 *
 * Cadrage de la maquette : en-tête bridé à 888 et centré, puis une rangée de cartes séparées de
 * 48 sur la largeur de contenu. Chaque carte : visuel de 150 x 184 à rayon 4, gap 24, puis le
 * texte et le libellé alignés à droite.
 */

.section-link-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 51 dans la maquette, ramené au pas de la grille : la valeur n'est pas un token et l'écart
       d'un pixel et demi ne se voit pas. */
    gap: var(--space-xl);
    /* La maquette pose 168 en haut, valeur de cadrage de sa frame. Toutes les sections du thème
       sont symétriques en 96. */
    padding-block: var(--section-space);
}

.section-link-cards__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    /* 888px dans la maquette. */
    width: min(888px, 100% - 2 * var(--container-gutter));
    text-align: center;
}

.section-link-cards__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    /* 61px sur 49px */
    line-height: 1.245;
    color: var(--color-secondary-950);
}

.section-link-cards__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-secondary-800);
}

/* ---- Rangée ---- */

.section-link-cards__list {
    /*
     * Nombre de cartes par rangée piloté par une seule variable, comme la section « Cartes » :
     * le répéteur n'a pas de maximum, on ne dessine donc pas une grille par cas de figure.
     */
    --link-cards-per-row: 3;

    display: flex;
    flex-wrap: wrap;
    /* Une rangée incomplète se centre au lieu de laisser un vide à droite. */
    justify-content: center;
    gap: var(--space-xl);
    width: min(var(--container-content-width), 100% - 2 * var(--container-gutter));
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-link-cards__item {
    /*
     * flex-grow à 0 : une carte orpheline garde la largeur des autres et se centre. À 1, la
     * quatrième d'une série de quatre s'étirerait seule sur toute la ligne.
     */
    flex: 0 1 calc(
        (100% - (var(--link-cards-per-row) - 1) * var(--space-xl)) / var(--link-cards-per-row)
    );
    display: flex;
    /*
     * La carte ne s'étire PAS à la hauteur de la rangée.
     *
     * La maquette centre le visuel et le texte l'un par rapport à l'autre. Étirée, une carte au
     * texte court se retrouvait centrée dans une rangée dictée par sa voisine la plus bavarde :
     * son contenu flottait au milieu du vide, loin du haut de la rangée. Sans étirement, chaque
     * carte fait la hauteur de son propre contenu — au minimum celle du visuel — et le
     * centrage de la maquette redevient celui qu'elle montre.
     */
    align-self: flex-start;
}

/* ---- Une carte ---- */

.section-link-cards__card {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-list);
    width: 100%;
    /* min-width à 0 : sans lui, la largeur intrinsèque du texte empêcherait la carte de se
       réduire et ferait déborder la rangée. */
    min-width: 0;
}

.section-link-cards__media {
    /* 150 x 184 dans la maquette. En rapport plutôt qu'en tailles fixes, le visuel se réduit
       avec la carte. min-height à 0 : sans lui, la hauteur intrinsèque de l'image l'emporterait
       sur le rapport. */
    width: 150px;
    max-width: 40%;
    aspect-ratio: 150 / 184;
    min-height: 0;
    flex: none;
    overflow: hidden;
    border-radius: var(--radius-xxs);
    /*
     * Aucun fond : la boîte n'est là que pour réserver la place quand une carte n'a pas de
     * visuel et que ses voisines en ont. Peinte, elle se voyait comme un rectangle beige vide au
     * milieu de la rangée — un trou dessiné plutôt qu'un trou discret.
     */
}

.section-link-cards__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-link-cards__body {
    display: flex;
    flex-direction: column;
    /* Le libellé est aligné à droite du bloc de texte, comme la maquette. */
    align-items: flex-end;
    gap: var(--space-m);
    flex: 1 1 auto;
    min-width: 0;
    /*
     * 24 à droite dans la maquette sur les deux premières cartes, rien sur la troisième. Repris
     * partout : l'écart n'est manifestement pas voulu, et une rangée dont la dernière carte
     * cadre différemment des autres se remarque.
     */
    padding-inline-end: var(--space-list);
}

.section-link-cards__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-compact);
    width: 100%;
}

.section-link-cards__card-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-secondary-900);
}

.section-link-cards__link {
    color: inherit;
    text-decoration: none;
}

/*
 * Zone cliquable étendue à toute la carte depuis le lien du titre. C'est ce qui permet de n'avoir
 * QU'UN lien par carte tout en gardant la carte entière cliquable.
 */
.section-link-cards__link::after {
    content: "";
    position: absolute;
    inset: 0;
}

.section-link-cards__description {
    /* 13px et interlignage 1,2 dans la maquette : c'est un texte de service, pas du courant. */
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    color: var(--color-secondary-700);
}

/*
 * « Découvrir » : l'habillage du bouton Secondary / md / plain de la maquette, sur un libellé et
 * non sur un lien — la carte entière est déjà cliquable via son titre.
 */
.section-link-cards__cta {
    flex: none;
    padding: var(--space-compact) var(--space-m);
    border-radius: var(--radius-xxxs);
    background-color: var(--color-secondary);
    font-size: var(--font-size-p);
    line-height: var(--line-height-tight);
    color: var(--color-secondary-900);
    white-space: nowrap;
    transition: background-color 140ms ease-out;
}

/* La carte entière réagit au survol du lien : c'est elle qui est cliquable. */
.section-link-cards__card:has(.section-link-cards__link:hover) .section-link-cards__cta,
.section-link-cards__card:has(.section-link-cards__link:focus-visible) .section-link-cards__cta {
    background-color: var(--color-secondary-400);
}

.section-link-cards__card:has(.section-link-cards__link:hover) .section-link-cards__card-title,
.section-link-cards__card:has(.section-link-cards__link:focus-visible) .section-link-cards__card-title {
    text-decoration-color: currentColor;
}

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .section-link-cards {
        --container-gutter: var(--space-bloc);
        gap: var(--space-large);
        padding-block: var(--section-space);
    }

    .section-link-cards__list {
        --link-cards-per-row: 2;
        gap: var(--space-bloc);
    }

    .section-link-cards__item {
        flex-basis: calc(
            (100% - (var(--link-cards-per-row) - 1) * var(--space-bloc)) / var(--link-cards-per-row)
        );
    }

    .section-link-cards__body {
        padding-inline-end: 0;
    }
}

@media (max-width: 768px) {
    .section-link-cards {
        --container-gutter: var(--space-m);
    }

    .section-link-cards__list {
        --link-cards-per-row: 1;
    }

    .section-link-cards__card {
        gap: var(--space-m);
    }

    .section-link-cards__media {
        /* Un visuel de 150 sur une carte de 343 mangerait la moitié de la largeur du texte. */
        width: 110px;
    }

    .section-link-cards__body {
        /* Le libellé passe à gauche avec le reste : aligné à droite d'une carte étroite, il
           semblerait détaché du texte qu'il accompagne. */
        align-items: flex-start;
        gap: var(--space-s);
    }
}