/*
=====================================================
 EF22 FRAMEWORK
 NEXT-EVENT.CSS
 Version 1.0
=====================================================
*/

/* ==========================================
   BEREICH
========================================== */

.next-event {
    margin-top:
        var(--space-xl);
}


/* ==========================================
   KARTE
========================================== */

.next-event-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
    width: 100%;
    max-width: 640px;
    padding:
        var(--space-lg);
    border:
        1px solid
        var(--color-primary-border);
    border-radius:
        var(--radius-xl);
    background:
        var(--color-background-dark);
    color:
        var(--color-text-on-dark);
    text-align: left;
    box-shadow:
        var(--shadow-lg);
}

.next-event-card [hidden] {
    display: none !important;
}

.next-event-card:focus-visible {
    outline:
        2px solid
        var(--color-primary);
    outline-offset: 3px;
}


/* ==========================================
   KATEGORIE
========================================== */

.next-event-badge {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding:
        0
        var(--space-md);
    border:
        2px solid
        var(--color-primary);
    border-radius: 999px;
    color:
        var(--color-primary);
    font-size:
        var(--font-size-xs);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* ==========================================
   TITEL
========================================== */

.next-event-title {
    margin:
        var(--space-xs)
        0;
    font-size:
        var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
    hyphens: auto;
}


/* ==========================================
   INFO
========================================== */

.next-event-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size:
        var(--font-size-md);
    font-weight: 500;
}

.next-event-info i {
    width: 20px;
    color:
        var(--color-primary);
    text-align: center;
}


/* ==========================================
   HINWEIS
========================================== */

.next-event-hint {
    align-self: center;
    margin-top:
        var(--space-sm);
    color:
        var(--color-text-muted-on-dark);
    font-size:
        var(--font-size-xs);
    font-weight: 600;
}


/* ==========================================
   KEIN TERMIN
========================================== */

.next-event-empty {
    margin: 0;
    color: inherit;
    opacity: .75;
}