/* Shortcode [flip_documents] — grille de cards documents officiels / techniques.
   Le bouton .flip-btn--join est stylé globalement dans style.css ; ce fichier ne
   porte que la mise en page de la grille et l'override d'alignement du bouton. */

.flip-documents {
    --flip-documents-cols: 3;
    --flip-documents-gap: var(--Spacing-bloc, 32px);

    &:where([data-cols="1"]) { --flip-documents-cols: 1; }
    &:where([data-cols="2"]) { --flip-documents-cols: 2; }
    &:where([data-cols="3"]) { --flip-documents-cols: 3; }
    &:where([data-cols="4"]) { --flip-documents-cols: 4; }

    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: var(--flip-documents-gap);
    align-self: stretch;

    .flip-document-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        gap: 24px;
        align-self: stretch;
        padding: var(--Spacing-bloc, 32px) var(--Spacing-bloc, 32px) var(--Spacing-l, 20px) var(--Spacing-bloc, 32px);
        background: #fff;
        border-radius: 16px;
        box-sizing: border-box;
        flex: 0 0 calc((100% - (var(--flip-documents-cols) - 1) * var(--flip-documents-gap)) / var(--flip-documents-cols));
        max-width: calc((100% - (var(--flip-documents-cols) - 1) * var(--flip-documents-gap)) / var(--flip-documents-cols));
    }

    .flip-document-card__body {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Spacing-s, 12px);
        align-self: stretch;
    }

    .flip-document-card__title {
        margin: 0;
        color: var(--Neutral-Main-neutral-900, #232529);
        font-family: var(--font-family-body, "DM Sans");
        font-size: var(--font-size-h6, 20px);
        font-weight: 600;
        line-height: 155%;
    }

    .flip-document-card__meta {
        margin: 0;
        color: var(--Neutral-Main-neutral-600, #6a6f78);
        font-family: var(--font-family-body, "DM Sans");
        font-size: 14px;
        font-weight: 400;
        line-height: 150%;
    }

    /* La card aligne ses enfants à droite (align-items: flex-end) mais le bouton
       doit rester à gauche → override individuel. */
    .flip-document-card__btn {
        align-self: flex-start;
    }

    @media (max-width: 1280px) {
        --flip-documents-cols: 2;
        --flip-documents-gap: var(--Spacing-l, 20px);

        .flip-document-card {
            padding: var(--Spacing-l, 20px);
            gap: var(--Spacing-l, 20px);
        }
    }

    @media (max-width: 700px) {
        --flip-documents-cols: 1;
        --flip-documents-gap: var(--Spacing-l, 20px);

        .flip-document-card {
            padding: var(--Spacing-m, 16px);
            gap: var(--Spacing-m, 16px);
        }

        .flip-document-card__title {
            font-size: 17px;
        }
    }
}