/*
|--------------------------------------------------------------------------
| Veranstaltungsübersicht
|--------------------------------------------------------------------------
*/

.events-hero {
    margin-bottom: var(--spacing-12);

    border:
        var(--border-width)
        solid
        var(--border-color);

    background:
        linear-gradient(
            135deg,
            rgba(37, 99, 235, 0.16),
            rgba(15, 23, 42, 0.88)
        );

    box-shadow: var(--shadow-lg);

    backdrop-filter: blur(8px);
}

.events-hero .content-hero-content {
    max-width: 900px;
}

.events-hero .content-hero-text {
    max-width: 760px;
}


/*
|--------------------------------------------------------------------------
| Filterbereich
|--------------------------------------------------------------------------
*/

.events-filter-section {
    margin-bottom: var(--spacing-12);
}

.events-filter-section .event-filter {
    border:
        var(--border-width)
        solid
        var(--border-color);

    border-radius: var(--radius-xl);

    background: var(--background-surface);

    box-shadow: var(--shadow-md);
}

.events-filter-section .event-filter__header {
    padding:
        var(--spacing-7)
        var(--spacing-8);

    border-bottom:
        var(--border-width)
        solid
        var(--border-color);
}

.events-filter-section .event-filter__content {
    padding:
        var(--spacing-8)
        var(--spacing-8);
}

.events-filter-section .event-filter__fields {
    gap: var(--spacing-6);
}

.events-filter-section .event-filter__actions {
    gap: var(--spacing-4);

    margin-top: var(--spacing-8);
}


/*
|--------------------------------------------------------------------------
| Veranstaltungsbereich
|--------------------------------------------------------------------------
*/

.events-overview {
    margin-bottom: var(--spacing-12);
}

.events-overview-header {
    display: flex;

    justify-content: space-between;

    align-items: flex-end;

    gap: var(--spacing-6);

    margin-bottom: var(--spacing-8);
}

.events-overview-heading {
    max-width: 760px;
}

.events-overview-eyebrow {
    display: block;

    margin-bottom: var(--spacing-3);

    color: var(--color-primary);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.events-overview-title {
    margin:
        0
        0
        var(--spacing-4);

    color: var(--text-primary);
}

.events-overview-description {
    margin: 0;

    color: var(--text-secondary);

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Veranstaltungskarten
|--------------------------------------------------------------------------
*/

.events-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    align-items: stretch;

    gap: var(--spacing-8);
}

.events-grid .card-event {
    height: 100%;

    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

.events-grid .card-event:hover {
    transform: translateY(-4px);

    border-color: var(--color-primary);

    box-shadow: var(--shadow-lg);
}

.events-grid .card-event-content {
    padding: var(--spacing-7);
}

.events-grid .card-event-meta {
    margin-top: var(--spacing-5);
    margin-bottom: var(--spacing-5);
}

.events-grid .card-body p {
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Leerer Zustand
|--------------------------------------------------------------------------
*/

.events-empty {
    padding:
        var(--spacing-12)
        var(--spacing-8);

    border:
        var(--border-width)
        solid
        var(--border-color);

    border-radius: var(--radius-xl);

    background: var(--background-surface);

    text-align: center;

    box-shadow: var(--shadow-md);
}

.events-empty-eyebrow {
    display: block;

    margin-bottom: var(--spacing-3);

    color: var(--color-primary);

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.08em;

    text-transform: uppercase;
}

.events-empty-title {
    margin:
        0
        0
        var(--spacing-4);

    color: var(--text-primary);
}

.events-empty-text {
    max-width: 620px;

    margin:
        0
        auto
        var(--spacing-6);

    color: var(--text-secondary);

    line-height: 1.7;
}

.events-empty-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding:
        var(--spacing-3)
        var(--spacing-5);

    border-radius: var(--radius-md);

    background: var(--color-primary);

    color: #ffffff;

    font-size: var(--font-size-sm);

    font-weight: var(--font-weight-semibold);

    text-decoration: none;

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.events-empty-link:hover {
    transform: translateY(-1px);

    box-shadow: var(--shadow-md);
}


/*
|--------------------------------------------------------------------------
| Abschlussbereich
|--------------------------------------------------------------------------
*/

.events-cta {
    margin-top: var(--spacing-8);
    margin-bottom: var(--spacing-8);

    box-shadow: var(--shadow-lg);
}

.events-cta .content-cta-text {
    max-width: 760px;

    margin-right: auto;
    margin-left: auto;
}

.events-cta .content-cta-actions {
    gap: var(--spacing-4);
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 1100px) {

    .events-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: var(--spacing-7);
    }

}


/*
|--------------------------------------------------------------------------
| Mobil
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {

    .events-hero {
        margin-bottom: var(--spacing-10);
    }

    .events-filter-section {
        margin-bottom: var(--spacing-10);
    }

    .events-filter-section .event-filter__header {
        padding:
            var(--spacing-6)
            var(--spacing-5);
    }

    .events-filter-section .event-filter__content {
        padding:
            var(--spacing-6)
            var(--spacing-5);
    }

    .events-filter-section .event-filter__fields {
        gap: var(--spacing-5);
    }

    .events-filter-section .event-filter__actions {
        align-items: stretch;

        flex-direction: column;

        gap: var(--spacing-3);

        margin-top: var(--spacing-6);
    }

    .events-filter-section .event-filter__actions a,
    .events-filter-section .event-filter__actions button {
        width: 100%;
    }

    .events-overview {
        margin-bottom: var(--spacing-10);
    }

    .events-overview-header {
        align-items: flex-start;

        flex-direction: column;

        margin-bottom: var(--spacing-6);
    }

    .events-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: var(--spacing-6);
    }

    .events-grid .card-event-content {
        padding: var(--spacing-6);
    }

    .events-empty {
        padding:
            var(--spacing-9)
            var(--spacing-5);
    }

    .events-cta {
        margin-top: var(--spacing-6);
        margin-bottom: var(--spacing-6);
    }

    .events-cta .content-cta-actions {
        align-items: stretch;

        flex-direction: column;

        gap: var(--spacing-3);
    }

    .events-cta .content-cta-actions .button {
        width: 100%;
    }

}