/* ==================================================
   Event-Details – Frontend
   Modern Dark × Community
   Datei: frontend-event-details.css
================================================== */

/* =========================
   Seitencontainer
========================= */

.frontend-event-details {
    display: flex;
    flex-direction: column;
    gap: 3.2rem; /* etwas mehr Grundluft */

    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* =========================
   HERO
========================= */

.frontend-event-details-hero {
    position: relative;
    padding: 3rem 1.5rem 4.6rem; /* ⬅️ deutlich mehr Platz nach unten */

    background:
        radial-gradient(
            700px 260px at 50% 0%,
            rgba(120, 64, 255, 0.28),
            transparent 70%
        );

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}

.frontend-event-details-header {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.frontend-event-details-header h1 {
    font-size: 2.2rem;
    line-height: 1.2;
    margin: 0;
    color: #ffffff;
}

/* 18+ Badge */
.frontend-badge.is-18plus {
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 999px;
    background: rgba(180, 60, 60, 0.3);
    color: #ffb3b3;
}

/* =========================
   Status
========================= */

.frontend-event-status {
    margin: 1.2rem auto 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    font-size: 0.95rem;
    font-weight: 600;
}

.frontend-event-status .status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.frontend-event-status.status-open .status-dot { background: #4dffb3; }
.frontend-event-status.status-planned .status-dot { background: #ffd966; }
.frontend-event-status.status-closed .status-dot { background: #ff8c8c; }

/* =========================
   CTA im Hero
========================= */

.frontend-event-cta-top {
    margin-top: 2.6rem;
    display: flex;
    justify-content: center;
}

/* Button selbst */
.frontend-event-cta-top .frontend-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 14px 32px;
    font-size: 1.05rem;
    font-weight: 600;

    border-radius: 999px;
    text-decoration: none;

    background: linear-gradient(
        135deg,
        rgba(120, 64, 255, 0.95),
        rgba(90, 80, 255, 0.95)
    );

    color: #ffffff;

    box-shadow:
        0 8px 28px rgba(120, 64, 255, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.15);

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
}

.frontend-event-cta-top .frontend-button:hover {
    transform: translateY(-2px);
    box-shadow:
        0 14px 38px rgba(120, 64, 255, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.frontend-event-cta-top .frontend-button.disabled {
    opacity: 0.65;
    pointer-events: none;
    filter: none;
}

/* =========================
   Öffentliche Beschreibung (Intro)
========================= */

.frontend-event-description-intro {
    margin-top: -2.4rem;   /* leicht ins Hero gezogen */
    margin-bottom: 3.6rem; /* ⬅️ klarer Abstand zu den Kacheln */
}

/* =========================
   Content Wrapper
========================= */

.frontend-event-details-content {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* ⬅️ kompakter, aber noch luftig */
}

/* =========================
   Meta Grid
========================= */

.frontend-event-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;

    margin-top: 0.6rem;
    margin-bottom: 1.6rem;
}

.frontend-event-meta {
    background: linear-gradient(
        180deg,
        rgba(22, 26, 42, 0.85),
        rgba(14, 16, 24, 0.85)
    );

    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;

    padding: 22px 24px;

    font-size: 0.95rem;
    line-height: 1.45;

    display: flex;
    flex-direction: column;
    gap: 8px;
}

.frontend-event-meta h4 {
    margin-bottom: 6px;
    font-size: 0.95rem;
    opacity: 0.8;
}

.frontend-event-meta strong {
    display: block;
    margin-bottom: 2px;
    color: #ffffff;
}

/* =========================
   Event-Tage
========================= */

.frontend-event-days {
    background: linear-gradient(
        180deg,
        rgba(22, 26, 42, 0.75),
        rgba(14, 16, 24, 0.75)
    );

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 20px;
}

.frontend-event-days {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}


/* =========================
   Beschreibung (normal)
========================= */

.frontend-event-description-card {
    background: linear-gradient(
        180deg,
        rgba(22, 26, 42, 0.75),
        rgba(14, 16, 24, 0.75)
    );

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px 26px;
}

/* =========================
   Countdown Styling
========================= */

#registration-countdown {
    letter-spacing: 0.3px;
}

#registration-countdown span {
    font-variant-numeric: tabular-nums;
}

#registration-countdown.countdown-soon {
    background: linear-gradient(
        135deg,
        rgba(255, 200, 80, 0.95),
        rgba(255, 170, 60, 0.95)
    );
    color: #2a1a00;
}

#registration-countdown.countdown-urgent {
    animation: pulse-soft 1.8s ease-in-out infinite;
}

#registration-countdown.countdown-critical {
    animation: pulse-strong 1.2s ease-in-out infinite;
}

/* =========================
   CTA – zweizeilig im Button
========================= */

.frontend-button-multiline {
    flex-direction: column;
    line-height: 1.2;
}

.frontend-button-multiline .cta-main {
    font-size: 1.05rem;
    font-weight: 600;
}

.frontend-button-multiline .cta-sub {
    margin-top: 4px;
    font-size: 0.8rem;
    opacity: 0.85;
    letter-spacing: 0.2px;
}

/* =========================
   Animationen
========================= */

@keyframes pulse-soft {
    0% { box-shadow: 0 0 0 rgba(255, 180, 60, 0.6); }
    50% { box-shadow: 0 0 18px rgba(255, 180, 60, 0.9); }
    100% { box-shadow: 0 0 0 rgba(255, 180, 60, 0.6); }
}

@keyframes pulse-strong {
    0% { box-shadow: 0 0 0 rgba(255, 90, 90, 0.7); }
    50% { box-shadow: 0 0 26px rgba(255, 90, 90, 1); }
    100% { box-shadow: 0 0 0 rgba(255, 90, 90, 0.7); }
}

/* =========================
   Responsive
========================= */

@media (max-width: 700px) {
    .frontend-event-meta-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .frontend-event-details-hero {
        padding: 2.5rem 1rem 3.6rem;
    }

    .frontend-event-details-header h1 {
        font-size: 1.9rem;
    }

    .frontend-event-description-intro {
        margin-top: -1.6rem;
        margin-bottom: 2.8rem;
    }
}

/* =========================
   Feinschliff Abstände
========================= */

/* Mehr Luft unter dem CTA */
.frontend-event-cta-top {
    margin-bottom: 3.2rem;
}

/* Öffentliche Beschreibung klar vom Hero trennen */
.frontend-event-description-intro {
    margin-top: 0;
    margin-bottom: 4rem;
}

/* Meta-Kacheln nicht an Beschreibung kleben lassen */
.frontend-event-meta-grid {
    margin-top: 0;
    margin-bottom: 3.6rem;
}

/* Mobile etwas kompakter */
@media (max-width: 600px) {
    .frontend-event-cta-top {
        margin-bottom: 2.6rem;
    }

    .frontend-event-description-intro {
        margin-bottom: 3rem;
    }

    .frontend-event-meta-grid {
        margin-bottom: 3rem;
    }
}

/* =========================
   Teilnehmer – Übersicht
========================= */

.frontend-event-participants {
    margin-top: 3rem;
}

.frontend-event-participant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* Karte */
.frontend-event-participant-card {
    background: linear-gradient(
        180deg,
        rgba(22, 26, 42, 0.75),
        rgba(14, 16, 24, 0.75)
    );
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 18px;
}

/* Header */
.participant-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.participant-card-header h4 {
    margin: 0;
    font-size: 1rem;
}

.participant-count {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Badges */
.participant-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.participant-badge {
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    background: rgba(120, 64, 255, 0.25);
    color: #fff;
}

.participant-badge.anonym {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.75);
}

/* =========================
   NEU: Teilnehmer-Kacheln
   volle Breite & untereinander
========================= */

/* Grid deaktivieren → vertikale Liste */
.frontend-event-participant-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Karten sollen volle Breite nutzen */
.frontend-event-participant-card {
    width: 100%;
}

/* =========================
   Teilnehmer pro Tag – Anzeige
========================= */

.frontend-event-day {
    display: flex;
    flex-direction: column;
    gap: 6px;

    padding: 8px 0;      /* nur Luft, keine Linie */
}




.event-day-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 0.8rem;   /* ⬅️ ruhiger */
}


.event-day-date {
    font-weight: 600;
}

.event-day-count {
    opacity: 0.75;
    font-size: 0.8rem;
}

/* Fortschrittsbalken */
.event-day-bar {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.event-day-bar-fill {
    height: 100%;
    background: linear-gradient(
        90deg,
        rgba(120, 64, 255, 0.9),
        rgba(90, 80, 255, 0.9)
    );
    border-radius: 999px;
}

.frontend-event-days-list {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Abstand zwischen Tagen */
}

.event-day-bar-fill.low {
    background: linear-gradient(90deg, #4dffb3, #2ecc71);
}

.event-day-bar-fill.medium {
    background: linear-gradient(90deg, #ffd966, #ffb347);
}

.event-day-bar-fill.high {
    background: linear-gradient(90deg, #ff8c8c, #e74c3c);
}