/**
 * EventHub List-Item Component
 *
 * Einzeilige Listen-Darstellung für kompakte Übersichten.
 * Reihenfolge: Datum/Zeit → Titel (fett) → Venue → Kategorie
 * Minimales CSS – maximale Theme-Kompatibilität.
 *
 * @package EventHub
 * @since 1.0.0
 */

/* ==========================================================================
   LIST-ITEM CONTAINER
   ========================================================================== */

.eventhub-list-item {
    display: flex;
    align-items: baseline;
    gap: var(--eventhub-spacing-sm);
    padding: var(--eventhub-spacing-xs) 0;
    list-style: none;
    border-bottom: 1px solid var(--eventhub-color-border, #eee);
}

.eventhub-list-item:last-child {
    border-bottom: none;
}

.eventhub-list-item--cancelled {
    opacity: 0.6;
}

.eventhub-list-item--cancelled .eventhub-list-item__title {
    text-decoration: line-through;
}

/* ==========================================================================
   DATE (Wochentag + Datum)
   ========================================================================== */

.eventhub-list-item__date {
    display: flex;
    gap: 0.3em;
    flex-shrink: 0;
    min-width: 5.5em;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
    white-space: nowrap;
}

.eventhub-list-item__weekday {
    font-weight: 600;
    color: var(--eventhub-color-primary, currentColor);
}

.eventhub-list-item__day {
    /* Datum etwas dezenter */
}

/* ==========================================================================
   TIME
   ========================================================================== */

.eventhub-list-item__time {
    flex-shrink: 0;
    min-width: 4.5em;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
    white-space: nowrap;
}

/* ==========================================================================
   TITLE (Hauptelement, fett)
   ========================================================================== */

.eventhub-list-item__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eventhub-list-item__title:hover {
    text-decoration: underline;
}

/* ==========================================================================
   SEPARATOR - Zwischen Ort und Kategorie anzeigen, vor Ort ausblenden
   ========================================================================== */

.eventhub-list-item__separator {
    flex-shrink: 0;
    color: var(--eventhub-color-border);
    font-size: var(--eventhub-font-size-sm);
}

/* Separator vor Venue (nach Titel) ausblenden */
.eventhub-list-item__title + .eventhub-list-item__separator {
    display: none;
}

/* ==========================================================================
   VENUE
   ========================================================================== */

.eventhub-list-item__venue {
    flex-shrink: 0;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

a.eventhub-list-item__venue:hover {
    text-decoration: underline;
}

/* ==========================================================================
   CATEGORY
   ========================================================================== */

.eventhub-list-item__category {
    flex-shrink: 0;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.eventhub-list-item__category:hover {
    text-decoration: underline;
}

/* ==========================================================================
   BADGE (small variant)
   ========================================================================== */

.eventhub-badge--small {
    padding: 0.1em 0.4em;
    font-size: var(--eventhub-font-size-sm);
    margin-left: auto;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Desktop < 1200px: Zweizeiliges Layout mit CSS Grid
   Zeile 1: Datum, Zeit, Titel
   Zeile 2: Ort und Kategorie (linksbündig) */
@media (max-width: 1199px) {
    .eventhub-list-item {
        display: grid;
        grid-template-columns: auto auto 1fr auto auto;
        grid-template-rows: auto auto;
        gap: 2px var(--eventhub-spacing-sm);
        align-items: baseline;
    }

    /* Zeile 1: Datum, Zeit, Titel */
    .eventhub-list-item__date {
        grid-column: 1;
        grid-row: 1;
        min-width: auto;
    }

    .eventhub-list-item__time {
        grid-column: 2;
        grid-row: 1;
        min-width: auto;
    }

    .eventhub-list-item__title {
        grid-column: 3 / -1;
        grid-row: 1;
    }

    /* Alle Separatoren im Grid ausblenden */
    .eventhub-list-item__separator {
        display: none;
    }

    /* Zeile 2: Venue und Kategorie linksbündig */
    .eventhub-list-item__venue {
        grid-column: 1 / 3;
        grid-row: 2;
    }

    /* Trennpunkt zwischen Venue und Kategorie */
    .eventhub-list-item__venue::after {
        content: ' · ';
        color: var(--eventhub-color-border);
    }

    .eventhub-list-item__category {
        grid-column: 3;
        grid-row: 2;
        justify-self: start;
    }
}

/* Tablet < 768px: Venue/Kategorie ausblenden, zurück zu Flex */
@media (max-width: 768px) {
    .eventhub-list-item {
        display: flex;
        flex-wrap: wrap;
        gap: var(--eventhub-spacing-xs) var(--eventhub-spacing-sm);
    }

    .eventhub-list-item__venue,
    .eventhub-list-item__category,
    .eventhub-list-item__separator {
        display: none;
    }

    .eventhub-list-item__date {
        min-width: auto;
    }

    .eventhub-list-item__time {
        min-width: auto;
    }

    .eventhub-list-item__title {
        flex: 1 1 auto;
    }
}

/* Mobile < 576px: Zweizeiliges Layout - Titel in eigene Zeile */
@media (max-width: 576px) {
    .eventhub-list-item__title {
        flex-basis: 100%;
        order: 10;
        white-space: normal;
    }
}