/*
 * Cards: <article class="card"> with optional .card-header, .card-body,
 * .card-footer and .card-media. Variants: card-flat (no shadow), card-link
 * (whole card clickable, hover effect).
 */
@layer components {
    .card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: var(--border-width-thin) solid var(--color-border);
        border-radius: var(--card-radius);
        background: var(--color-bg-surface);
        box-shadow: var(--card-shadow);
    }

    .card > :not(.card-header, .card-body, .card-footer, .card-media) {
        margin-inline: var(--card-padding);
    }

    .card-header,
    .card-body,
    .card-footer {
        padding: var(--card-padding);
    }

    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding-bottom: 0;
    }

    .card-header h2,
    .card-header h3 {
        margin: 0;
        font-size: var(--font-size-lg);
    }

    .card-body {
        flex: 1;
    }

    .card-body > :last-child {
        margin-bottom: 0;
    }

    .card-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-3);
        border-top: var(--border-width-thin) solid var(--color-border);
        background: var(--color-bg-subtle);
        padding-block: var(--space-3);
    }

    .card-media img {
        width: 100%;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .card-flat {
        box-shadow: none;
    }

    .card-link {
        position: relative;
        transition: box-shadow var(--duration-normal) var(--easing-standard), transform var(--duration-normal) var(--easing-standard);
    }

    .card-link:hover {
        box-shadow: var(--shadow-md);
        transform: translateY(-1px);
    }

    .card-link a {
        color: inherit;
        text-decoration: none;
    }

    /* The main link covers the card. */
    .card-link a::after {
        content: '';
        position: absolute;
        inset: 0;
    }
}