/**
 * comai | Core – Events-Carousel [comai_events]
 * ConstructMedia – https://constructmedia.de
 */

.comai-events,
.comai-events * {
    box-sizing: border-box !important;
}

.comai-events {
    --comai-bordeaux: #8f444b;
    --comai-green:    #344633;
    --comai-text:     #131b14;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Noto Sans TC', Helvetica, Arial, sans-serif !important;
    color: var(--comai-text) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 28px !important;
}

/* ---------- Title ---------- */
.comai-events-title {
    font-family: 'Libre Baskerville', 'Baskerville', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 50px !important;
    line-height: 1.2 !important;
    color: #000 !important;
    text-align: center !important;
    margin: 0 !important;
}

/* ---------- Empty state ---------- */
.comai-events-empty {
    text-align: center !important;
    padding: 32px 16px !important;
    color: #555 !important;
    font-size: 18px !important;
}
.comai-events-empty p { margin: 0 !important; }

/* ---------- Carousel shell ---------- */
.comai-events-carousel {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
}

.comai-events-track {
    display: flex !important;
    gap: 20px !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 6px 4px 18px !important;
    /* Volle Breite des Containers; Karten füllen sie aus (s. .comai-event-card),
       bei vielen Karten entsteht Überlauf -> horizontales Scrollen. */
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    scrollbar-width: thin !important;
}
.comai-events-track::-webkit-scrollbar { height: 6px !important; }
.comai-events-track::-webkit-scrollbar-thumb {
    background: rgba(143, 68, 75, 0.4) !important;
    border-radius: 3px !important;
}

/* ---------- Card ---------- */
.comai-event-card {
    scroll-snap-align: start !important;
    /* Wächst, um die volle Container-Breite zu füllen; schrumpft nicht unter
       280px -> bei vielen Karten entsteht Überlauf und horizontales Scrollen. */
    flex: 1 0 280px !important;
    max-width: 100% !important;
    display: flex !important;
    gap: 16px !important;
    padding: 22px 20px !important;
    background: #fff !important;
    border: 1px solid rgba(143, 68, 75, 0.25) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 5px rgba(211, 107, 117, 0.15) !important;
}

.comai-event-date {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 64px !important;
    padding: 10px 8px !important;
    background: var(--comai-bordeaux) !important;
    color: #fff !important;
    text-align: center !important;
}
.comai-event-day {
    font-family: 'Libre Baskerville', Georgia, serif !important;
    font-size: 30px !important;
    line-height: 1 !important;
    font-weight: 700 !important;
}
.comai-event-month {
    font-size: 13px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin-top: 4px !important;
}

.comai-event-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    min-width: 0 !important;
}
.comai-event-weekday {
    font-size: 12px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    color: var(--comai-green) !important;
}
.comai-event-name {
    font-family: 'Libre Baskerville', Georgia, serif !important;
    font-weight: 400 !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    color: var(--comai-text) !important;
    margin: 0 !important;
}
.comai-event-time {
    font-size: 14px !important;
    color: #555 !important;
}
.comai-event-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 6px !important;
    color: var(--comai-bordeaux) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.comai-event-link:hover { color: var(--comai-green) !important; }

/* ---------- Nav buttons ---------- */
/* Höhere Spezifität (.comai-events …) + harte Box-Maße, damit Theme-Button-
   Styles (oft mit eigenem !important) die Buttons nicht zu Ellipsen quetschen. */
.comai-events .comai-events-nav {
    flex: 0 0 44px !important;
    align-self: center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    min-height: 44px !important;
    max-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
    border: 1px solid rgba(143, 68, 75, 0.3) !important;
    background: #fff !important;
    color: var(--comai-bordeaux) !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
.comai-events .comai-events-nav svg {
    display: block !important;
    width: 14px !important;
    height: 24px !important;
    flex: 0 0 auto !important;
}
.comai-events .comai-events-nav:hover {
    background: var(--comai-bordeaux) !important;
    color: #fff !important;
}
.comai-events .comai-events-nav:disabled {
    opacity: 0.35 !important;
    cursor: default !important;
}
.comai-events .comai-events-nav:disabled:hover {
    background: #fff !important;
    color: var(--comai-bordeaux) !important;
}

@media (max-width: 600px) {
    .comai-events { gap: 18px !important; }
    .comai-events .comai-events-title { font-size: 34px !important; }

    /* Nav-Buttons unter das Carousel in eine zentrierte Reihe legen, damit die
       Karte die volle Breite nutzt und nichts überdeckt wird. */
    .comai-events .comai-events-carousel {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 12px !important;
    }
    .comai-events .comai-events-track {
        order: 0 !important;
        flex: 1 1 100% !important;
        padding: 4px 0 14px !important;
        gap: 14px !important;
    }
    .comai-events .comai-events-nav--prev { order: 1 !important; }
    .comai-events .comai-events-nav--next { order: 2 !important; }
    .comai-events .comai-events-nav {
        flex: 0 0 44px !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;
    }
    .comai-events .comai-event-card {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        gap: 14px !important;
        padding: 18px 16px !important;
    }
    .comai-events .comai-event-date { min-width: 56px !important; padding: 8px 6px !important; }
    .comai-events .comai-event-day { font-size: 26px !important; }
    .comai-events .comai-event-name { font-size: 18px !important; }
}