/* Events (public): the listing tabs, event cards and detail facts. Tokens only (var(--bfau-*), no
   fallback literals: the StyleRules architecture test bans any colour literal anywhere in this file),
   logical properties only (CLAUDE.md §11/§12); mirrors
   Bfau.Content.Web.Public/css/content-public.css's structure so the public site reads as one system. */

/* The "Upcoming events" section (Pages/Sections/_UpcomingEvents.cshtml) draws its cards on Huruma
   demo 3's own event-area-content markup. This is its only rule: a stand-in for .event-image's photo
   when an event has no cover, sized like the template's own image so the floating date badge and the
   bottom overlay still have something to sit on. */
/* A designed gradient, not a flat tint (templates.css's .bfau-card-placeholder does the same for
   article/listing cards) — a flat colour reads as broken, not "no picture yet". */
.bfau-event-image-fallback {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--bfau-primary) 18%, var(--bfau-surface)), color-mix(in srgb, var(--bfau-dark-section) 22%, var(--bfau-surface)));
    color: var(--bfau-primary-text);
}

.bfau-events-tabs {
    display: flex;
    gap: 0.5rem;
    border-block-end: 1px solid var(--bfau-border);
    padding-block-end: 0.5rem;
}

.bfau-events-tab {
    padding: 0.5rem 1rem;
    border-radius: var(--bfau-radius);
    color: var(--bfau-text);
    text-decoration: none;
}

.bfau-events-tab.active {
    background-color: var(--bfau-primary);
    color: var(--bfau-on-primary);
}

.bfau-event-card {
    display: block;
    border: 1px solid var(--bfau-border);
    border-radius: var(--bfau-radius);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    height: 100%;
    background-color: var(--bfau-surface);
    transition: box-shadow 0.15s ease-in-out;
}

.bfau-event-card:hover {
    box-shadow: var(--bfau-shadow);
}

.bfau-event-card img {
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}

.bfau-event-card-placeholder {
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    background-color: var(--bfau-body-bg);
    color: var(--bfau-text-muted);
}

.bfau-event-card-body {
    padding: 1rem;
}

.bfau-event-card-date {
    font-size: 0.85rem;
    color: var(--bfau-primary-text);
    font-weight: 600;
    margin-block-end: 0.25rem;
}

.bfau-event-card-location {
    color: var(--bfau-text-muted);
    font-size: 0.9rem;
}

.bfau-event-card-compact h3 {
    font-size: 1.05rem;
}

.bfau-events-pager {
    display: flex;
    gap: 0.35rem;
}

.bfau-events-pager a {
    padding: 0.35rem 0.75rem;
    border: 1px solid var(--bfau-border);
    border-radius: var(--bfau-radius);
    color: inherit;
    text-decoration: none;
}

.bfau-events-pager a.active {
    background-color: var(--bfau-primary);
    color: var(--bfau-on-primary);
    border-color: var(--bfau-primary);
}

.bfau-event-cover {
    inline-size: 100%;
    border-radius: var(--bfau-radius);
    margin-block-end: 1.5rem;
}

.bfau-event-facts {
    border: 1px solid var(--bfau-border);
    border-radius: var(--bfau-radius);
    padding: 1.25rem;
}

.bfau-event-fact {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-block-end: 1rem;
}

.bfau-event-fact i {
    font-size: 1.25rem;
    color: var(--bfau-primary-text);
}

.bfau-section-upcoming-events .bfau-section-more {
    display: inline-block;
    margin-block-start: 1rem;
    color: var(--bfau-primary-text);
}