/*
|--------------------------------------------------------------------------
| Event-Detailseite
|--------------------------------------------------------------------------
*/

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

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

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

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

    backdrop-filter: blur(8px);
}

.event-detail-hero .content-hero-content {
    max-width: 960px;
}

.event-detail-hero .content-hero-text {
    max-width: 780px;
}


/*
|--------------------------------------------------------------------------
| Seitenlayout
|--------------------------------------------------------------------------
*/

.event-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(300px, 380px);

    align-items: start;

    gap: var(--spacing-10);

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

.event-detail-main,
.event-detail-sidebar {
    min-width: 0;
}

.event-detail-sidebar-sticky {
    position: sticky;

    top: var(--spacing-6);

    display: flex;

    flex-direction: column;

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


/*
|--------------------------------------------------------------------------
| Kerndaten
|--------------------------------------------------------------------------
*/

.event-detail-facts {
    display: grid;

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

    gap: var(--spacing-5);

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

.event-detail-fact {
    display: flex;

    flex-direction: column;

    gap: var(--spacing-2);

    min-height: 120px;

    padding: var(--spacing-6);

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

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

    background: var(--background-surface);

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

.event-detail-fact-label {
    color: var(--text-secondary);

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

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

    text-transform: uppercase;
}

.event-detail-fact-value {
    margin-top: auto;

    color: var(--text-primary);

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

    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Inhaltsbereiche
|--------------------------------------------------------------------------
*/

.event-detail-section {
    margin-bottom: var(--spacing-10);

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

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

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

    background: var(--background-surface);

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

.event-detail-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-detail-section-title {
    margin:
        0
        0
        var(--spacing-6);

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

.event-detail-description {
    color: var(--text-secondary);

    line-height: 1.8;

    overflow-wrap: anywhere;
}


/*
|--------------------------------------------------------------------------
| Veranstaltungstage
|--------------------------------------------------------------------------
*/

.event-detail-days {
    display: flex;

    flex-direction: column;

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

.event-detail-day {
    display: grid;

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

    align-items: center;

    gap: var(--spacing-5);

    padding: var(--spacing-5);

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

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

    background: var(--background-page);
}

.event-detail-day-number {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 74px;

    min-height: 40px;

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

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

    background: rgba(37, 99, 235, 0.14);

    color: var(--color-primary);

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

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

.event-detail-day-content {
    display: flex;

    flex-direction: column;

    gap: var(--spacing-1);

    min-width: 0;
}

.event-detail-day-date {
    color: var(--text-primary);
}

.event-detail-day-capacity {
    color: var(--text-secondary);

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


/*
|--------------------------------------------------------------------------
| Treffpunkt
|--------------------------------------------------------------------------
*/

.event-detail-meeting {
    display: grid;

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

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

.event-detail-meeting-item {
    display: flex;

    flex-direction: column;

    gap: var(--spacing-2);

    padding: var(--spacing-5);

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

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

    background: var(--background-page);

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

.event-detail-meeting-label {
    color: var(--text-secondary);

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

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


/*
|--------------------------------------------------------------------------
| Anmeldung
|--------------------------------------------------------------------------
*/

.event-detail-registration {
    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-lg);
}

.event-detail-registration--open {
    border-color: var(--color-primary);
}

.event-detail-registration-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-detail-registration-title {
    margin:
        0
        0
        var(--spacing-4);

    color: var(--text-primary);

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

.event-detail-registration-text {
    margin:
        0
        0
        var(--spacing-6);

    color: var(--text-secondary);

    line-height: 1.7;
}

.event-detail-registration-row {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: var(--spacing-4);

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

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

    color: var(--text-secondary);

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

.event-detail-registration-row strong {
    color: var(--text-primary);

    text-align: right;
}

.event-detail-registration-button {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 48px;

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

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

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

    background: var(--color-primary);

    color: #ffffff;

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

    text-decoration: none;

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

.event-detail-registration-button:hover {
    transform: translateY(-1px);

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


/*
|--------------------------------------------------------------------------
| Zusammenfassung
|--------------------------------------------------------------------------
*/

.event-detail-summary {
    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-detail-summary-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-detail-summary-title {
    margin:
        0
        0
        var(--spacing-5);

    color: var(--text-primary);

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

.event-detail-summary-list {
    margin: 0;
}

.event-detail-summary-item {
    display: grid;

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

    gap: var(--spacing-4);

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

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

.event-detail-summary-item dt {
    color: var(--text-secondary);

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

.event-detail-summary-item dd {
    margin: 0;

    color: var(--text-primary);

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

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

    text-align: right;

    overflow-wrap: anywhere;
}


/*
|--------------------------------------------------------------------------
| Fehlerzustand
|--------------------------------------------------------------------------
*/

.event-detail-error {
    max-width: 760px;

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

    padding:
        var(--spacing-10)
        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-detail-error-title {
    margin:
        0
        0
        var(--spacing-4);

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

.event-detail-error-text {
    margin:
        0
        0
        var(--spacing-6);

    color: var(--text-secondary);

    line-height: 1.7;
}

.event-detail-error-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-weight: var(--font-weight-semibold);

    text-decoration: none;
}


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

@media (max-width: 1050px) {

    .event-detail-layout {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, 340px);

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

}


/*
|--------------------------------------------------------------------------
| Kleine Tablets
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {

    .event-detail-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .event-detail-sidebar-sticky {
        position: static;

        display: grid;

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

}


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

@media (max-width: 768px) {

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

    .event-detail-layout {
        gap: var(--spacing-8);

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

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

        gap: var(--spacing-4);

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

    .event-detail-fact {
        min-height: 105px;

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

    .event-detail-section {
        margin-bottom: var(--spacing-8);

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

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

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

    .event-detail-day-number {
        justify-self: start;
    }

    .event-detail-meeting {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .event-detail-sidebar-sticky {
        grid-template-columns:
            minmax(0, 1fr);

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

    .event-detail-registration,
    .event-detail-summary {
        padding: var(--spacing-6);
    }

    .event-detail-error {
        padding:
            var(--spacing-8)
            var(--spacing-5);
    }

}