/* Jeux de cartes — la page d'un jeu et son impression : les cartes dans l'ordre, chacune ses faces, son
   état et ses gestes ; les formulaires d'un jeu ; la feuille imprimée, ses rectos et ses versos sur la
   grille du format (_direction/FD3_applications/kernevia/design/conteneurs-et-donnees.md,
   § Jeu de cartes ; kernevia #28-mise-en-service/impression). */

@layer components {
    .print-sheets {
        --print-sheet-width: 210mm;
        --print-sheet-height: 297mm;
        --print-card-width: 105mm;
        --print-card-height: 74.25mm;
        --print-columns: 2;
        --print-rows: 4;
    }

    .deck-cards {
        padding-left: 0;
    }
    .deck-face > * + * {
        margin-top: var(--canon-space-3);
    }
    .deck-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--canon-space-2);
    }
    .deck-form {
        display: grid;
        gap: var(--canon-space-5);
    }
    .deck-form > .button {
        justify-self: start;
    }
    .print-sheets {
        display: grid;
        justify-content: center;
        gap: var(--canon-space-10);
        overflow-x: auto;
    }
    .print-sheet {
        display: grid;
        grid-template-columns: repeat(var(--print-columns), var(--print-card-width));
        grid-template-rows: repeat(var(--print-rows), var(--print-card-height));
        align-content: start;
        justify-content: center;
        width: var(--print-sheet-width);
        height: var(--print-sheet-height);
    }
    .print-card {
        overflow: hidden;
        padding: 5mm;
    }
    .print-card > * + * {
        margin-top: var(--canon-space-2);
    }
    @media print {
        .print-sheets {
            display: block;
        }
        .print-sheet {
            break-after: page;
        }
    }

    .print-sheet {
        background-color: var(--canon-theme-raised);
    }
    .print-card {
        outline: var(--canon-line-width) dashed var(--canon-theme-line);
        outline-offset: calc(-1 * var(--canon-line-width));
    }

    .deck-cards {
        list-style: none;
    }
    .print-card {
        font-size: var(--local-size-card);
        line-height: var(--canon-leading-body);
    }
}