/* Date cards: a row of schedule cards with a countdown, filled in by /public/js/components/date-cards.mjs.
   Pages restyle them through the --date-card-* custom properties. */
@layer custom {
    .date-cards {
        display: flex;
        gap: 12px;
    }

    .date-cards[hidden],
    .date-card[hidden] {
        display: none;
    }

    .date-card {
        position: relative;
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 16px 18px;
        border-radius: var(--date-card-radius, 14px);
        background: var(--date-card-bg, var(--bs-bg-body));
        color: var(--date-card-fg, var(--bs-fg-body));
        box-shadow: var(--date-card-shadow, 0 0 0 1px var(--bs-border-color));
    }

    a.date-card {
        padding-right: 44px;
        color: var(--date-card-fg, var(--bs-fg-body)) !important;
        text-decoration: none !important;
        transition: transform 0.18s ease, box-shadow 0.18s ease;
    }

    a.date-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--date-card-shadow-hover, var(--bs-box-shadow-sm));
    }

    a.date-card:active {
        transform: scale(0.96);
    }

    .date-card-label {
        font-family: var(--date-card-label-font, inherit);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--date-card-muted, var(--bs-fg-2));
    }

    .date-card-range {
        font-family: var(--date-card-heading-font, inherit);
        font-size: 20px;
        font-weight: 800;
        line-height: 1.15;
    }

    .date-card-days {
        font-size: 13px;
        line-height: 1.45;
        color: var(--date-card-muted, var(--bs-fg-2));
    }

    /* Auto top margin lines the countdowns up when the day lists differ in length */
    .date-card-countdown {
        width: fit-content;
        margin-top: auto;
    }

    a.date-card > .bi {
        position: absolute;
        right: 18px;
        bottom: 16px;
        color: var(--date-card-accent, var(--bs-primary-base));
        transition: transform 0.16s ease;
    }

    a.date-card:hover > .bi {
        transform: translateX(3px);
    }

    @media (max-width: 576px) {
        .date-cards {
            flex-direction: column;
        }
    }
}