/*
|--------------------------------------------------------------------------
| Eventarchiv
|--------------------------------------------------------------------------
*/

.event-archive-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.9)
        );

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

    backdrop-filter: blur(8px);
}

.event-archive-hero .content-hero-content {
    max-width: 920px;
}

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


/*
|--------------------------------------------------------------------------
| Allgemeine Überschriften
|--------------------------------------------------------------------------
*/

.event-archive-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;
}


/*
|--------------------------------------------------------------------------
| Filter
|--------------------------------------------------------------------------
*/

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

.event-archive-filter {
    overflow: hidden;

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

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

    background: var(--background-surface);

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

.event-archive-filter-header {
    padding:
        var(--spacing-7)
        var(--spacing-8);

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

.event-archive-filter-title {
    margin: 0;

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

.event-archive-filter-grid {
    display: grid;

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

    gap: var(--spacing-6);

    padding:
        var(--spacing-8)
        var(--spacing-8)
        var(--spacing-6);
}

.event-archive-filter-field {
    min-width: 0;
}

.event-archive-filter-label {
    display: block;

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

    color: var(--text-primary);

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

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

.event-archive-filter-input,
.event-archive-filter-select {
    width: 100%;

    min-height: 46px;

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

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

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

    background: var(--background-page);

    color: var(--text-primary);

    font: inherit;

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

.event-archive-filter-input:focus,
.event-archive-filter-select:focus {
    outline: none;

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

    box-shadow:
        0 0 0 3px
        rgba(37, 99, 235, 0.16);
}

.event-archive-filter-actions {
    display: flex;

    align-items: center;

    gap: var(--spacing-4);

    padding:
        0
        var(--spacing-8)
        var(--spacing-8);
}

.event-archive-filter-submit,
.event-archive-filter-reset {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

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

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

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

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

    text-decoration: none;

    cursor: pointer;

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

.event-archive-filter-submit {
    border:
        var(--border-width)
        solid
        var(--color-primary);

    background: var(--color-primary);

    color: #ffffff;
}

.event-archive-filter-submit:hover {
    transform: translateY(-1px);
}

.event-archive-filter-reset {
    border:
        var(--border-width)
        solid
        var(--border-color);

    background: transparent;

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

.event-archive-filter-reset:hover {
    border-color: var(--color-primary);

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


/*
|--------------------------------------------------------------------------
| Statistik
|--------------------------------------------------------------------------
*/

.event-archive-statistics {
    display: grid;

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

    gap: var(--spacing-6);

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

.event-archive-statistic {
    display: flex;

    flex-direction: column;

    min-height: 180px;

    padding: var(--spacing-7);

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

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

    background: var(--background-surface);

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

.event-archive-statistic-label {
    margin-bottom: var(--spacing-4);

    color: var(--text-secondary);

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

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

    text-transform: uppercase;
}

.event-archive-statistic-value {
    margin-bottom: var(--spacing-3);

    color: var(--text-primary);

    font-size: clamp(
        2rem,
        5vw,
        3rem
    );

    line-height: 1;
}

.event-archive-statistic-description {
    margin-top: auto;

    color: var(--text-secondary);

    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Archivübersicht
|--------------------------------------------------------------------------
*/

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

.event-archive-overview-header {
    margin-bottom: var(--spacing-9);
}

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

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

.event-archive-overview-description {
    max-width: 760px;

    margin: 0;

    color: var(--text-secondary);

    line-height: 1.7;
}

.event-archive-years {
    display: flex;

    flex-direction: column;

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

.event-archive-year {
    min-width: 0;
}

.event-archive-year-header {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: var(--spacing-5);

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

    padding-bottom: var(--spacing-4);

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

.event-archive-year-title {
    margin: 0;

    color: var(--text-primary);

    font-size: clamp(
        2rem,
        4vw,
        3rem
    );

    line-height: 1;
}

.event-archive-year-count {
    color: var(--text-secondary);

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

    font-weight: var(--font-weight-medium);
}


/*
|--------------------------------------------------------------------------
| Archivkarten
|--------------------------------------------------------------------------
*/

.event-archive-list {
    display: flex;

    flex-direction: column;

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

.event-archive-card {
    display: grid;

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

    align-items: center;

    gap: var(--spacing-7);

    padding: var(--spacing-7);

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

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

    background: var(--background-surface);

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

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

.event-archive-card:hover {
    transform: translateY(-2px);

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

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

.event-archive-card-content {
    min-width: 0;
}

.event-archive-card-meta {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: var(--spacing-3);

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

.event-archive-card-category,
.event-archive-card-age {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

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

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

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

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

.event-archive-card-category {
    background: rgba(37, 99, 235, 0.14);

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

.event-archive-card-age {
    background: rgba(220, 38, 38, 0.14);

    color: var(--color-danger, #dc2626);
}

.event-archive-card-date {
    color: var(--text-secondary);

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

.event-archive-card-title {
    margin:
        0
        0
        var(--spacing-3);

    font-size: var(--font-size-xl);
}

.event-archive-card-title a {
    color: var(--text-primary);

    text-decoration: none;
}

.event-archive-card-title a:hover {
    color: var(--color-primary);
}

.event-archive-card-description {
    max-width: 820px;

    margin:
        0
        0
        var(--spacing-5);

    color: var(--text-secondary);

    line-height: 1.7;
}

.event-archive-card-details {
    display: flex;

    flex-wrap: wrap;

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

    color: var(--text-secondary);

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

.event-archive-card-details strong {
    color: var(--text-primary);
}

.event-archive-card-action {
    flex-shrink: 0;
}

.event-archive-card-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

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

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

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

    color: var(--text-primary);

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

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

    text-decoration: none;

    transition:
        border-color var(--transition-base),
        background-color var(--transition-base),
        color var(--transition-base);
}

.event-archive-card-link:hover {
    border-color: var(--color-primary);

    background: var(--color-primary);

    color: #ffffff;
}


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

.event-archive-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);
}

.event-archive-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;
}

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

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

.event-archive-empty-text {
    max-width: 620px;

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

    color: var(--text-secondary);

    line-height: 1.7;
}

.event-archive-empty-link {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    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;
}


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

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

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

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

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

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


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

@media (max-width: 1100px) {

    .event-archive-filter-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .event-archive-statistics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


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

@media (max-width: 768px) {

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

    .event-archive-filter-section {
        margin-bottom: var(--spacing-8);
    }

    .event-archive-filter-header {
        padding:
            var(--spacing-6)
            var(--spacing-5);
    }

    .event-archive-filter-grid {
        grid-template-columns:
            minmax(0, 1fr);

        gap: var(--spacing-5);

        padding:
            var(--spacing-6)
            var(--spacing-5);
    }

    .event-archive-filter-actions {
        align-items: stretch;

        flex-direction: column;

        gap: var(--spacing-3);

        padding:
            0
            var(--spacing-5)
            var(--spacing-6);
    }

    .event-archive-filter-submit,
    .event-archive-filter-reset {
        width: 100%;
    }

    .event-archive-statistics {
        grid-template-columns:
            minmax(0, 1fr);

        gap: var(--spacing-5);

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

    .event-archive-statistic {
        min-height: 150px;

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

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

    .event-archive-years {
        gap: var(--spacing-10);
    }

    .event-archive-year-header {
        align-items: flex-start;

        flex-direction: column;

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

    .event-archive-card {
        grid-template-columns:
            minmax(0, 1fr);

        gap: var(--spacing-5);

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

    .event-archive-card-action {
        width: 100%;
    }

    .event-archive-card-link {
        width: 100%;
    }

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

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

    .event-archive-cta .content-cta-actions {
        align-items: stretch;

        flex-direction: column;

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

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

}