/* Carte — modèle canonique ; son emploi : canon_card.md. */

@layer components {
    .card {
        display: flex;
        flex-direction: column;
        gap: var(--card-space, var(--canon-space-3));
        padding: var(--card-padding, var(--canon-space-5));
        overflow: var(--card-overflow, visible);
    }
    .card:hover {
        transform: translateY(calc(-1 * var(--card-offset-hover, 0px)));
    }
    .card-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--card-actions-space, var(--canon-space-2));
        margin-block-start: auto;
        padding-block-start: var(--card-actions-offset, 0px);
    }

    .card {
        border: var(--card-line-width, var(--canon-line-width)) solid var(--card-line, var(--canon-theme-line));
        border-block-start: var(--card-accent-width, var(--card-line-width, var(--canon-line-width))) solid var(--card-accent, var(--card-line, var(--canon-theme-line)));
        border-radius: var(--card-radius, var(--canon-radius-card));
        background-color: var(--card-surface, var(--canon-theme-surface));
        background-image: linear-gradient(170deg, transparent, var(--card-gradient, transparent));
        box-shadow: var(--card-shadow, none);
        backdrop-filter: var(--card-backdrop, none);
    }
    .card:hover {
        box-shadow: var(--card-shadow-hover, var(--card-shadow, none));
    }
    .card:focus-visible {
        box-shadow: var(--card-shadow, 0 0 #0000), var(--canon-focus-halo);
    }
    .card:is(:any-link, [role="option"], button):hover {
        border-color: var(--card-line-hover, var(--canon-theme-line-hover));
        background-color: var(--card-surface-hover, var(--canon-theme-highlight));
        background-image: linear-gradient(170deg, var(--card-gradient-hover, transparent), transparent);
        filter: var(--card-filter-hover, none);
    }
    .card:is([aria-selected="true"], [aria-pressed="true"]) {
        border-color: var(--card-line-selected, var(--canon-theme-action));
        background-color: var(--card-surface-selected, var(--canon-theme-surface-selected));
        box-shadow: var(--card-shadow-selected, var(--card-shadow, none));
    }

    .card:is(:any-link, button) {
        font: inherit;
        text-align: start;
        text-decoration-line: none;
        color: inherit;
    }
    .card-title {
        overflow-wrap: anywhere;
    }

    .card {
        transition: border-color var(--canon-duration-state), background-color var(--canon-duration-state),
            box-shadow var(--canon-duration-state), filter var(--canon-duration-state), transform var(--canon-duration-state);
    }
    .card:is(:any-link, [role="option"], button) {
        cursor: pointer;
    }
}

@layer components {
    .card--nested {
        padding: var(--canon-space-4);
    }

    .card--nested {
        border-width: 0;
        border-inline-start-width: var(--card-line-width, var(--canon-line-width));
        border-radius: 0;
        background-color: transparent;
    }
}

@layer utilities {
    .l-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-item-width, 16rem), 100%), 1fr));
        gap: var(--canon-space-4);
    }
}

/* Part locale — les réglages que l'app pose sur cet objet, contexte par contexte. */

@layer tokens {
    .deck-card {
        --card-padding: var(--canon-space-5) 0;
        --card-line-width: 0px;
        --card-accent-width: var(--canon-line-width);
        --card-radius: 0px;
        --card-surface: transparent;
    }
    .deck-card:first-child {
        --card-accent-width: 0px;
    }
}