/**
 * EventHub Banner-Card Component (Typ B)
 *
 * Kompakte horizontale Card für laufende Zeiträume/Ausstellungen.
 * Minimales CSS – erbt größtmöglich vom Theme.
 *
 * @package EventHub
 * @since 1.0.0
 */

/* ==========================================================================
   BANNER-CARD CONTAINER
   ========================================================================== */

.eventhub-card-banner {
    display: flex;
    align-items: center;
    gap: var(--eventhub-spacing-md);
    padding: var(--eventhub-spacing-sm) var(--eventhub-spacing-md);
    background: var(--eventhub-color-bg);
    border: 1px solid var(--eventhub-color-border);
    border-radius: var(--eventhub-border-radius);
}

/* Visibility-Modifier – dezente Akzente */
.eventhub-card-banner--highlight {
    border-left: 3px solid var(--eventhub-color-highlight);
}

/* Featured: Kein Strich mehr (klare Hierarchie) */
.eventhub-card-banner--featured {
    /* Kein border-left */
}

/* Normal: Kompaktes einzeiliges Layout ohne Bild */
.eventhub-card-banner--normal {
    padding: var(--eventhub-spacing-xs) var(--eventhub-spacing-md);
    min-height: auto;
}

.eventhub-card-banner--normal .eventhub-card-banner__thumbnail {
    display: none; /* Bild ausblenden */
}

.eventhub-card-banner--normal .eventhub-card-banner__content {
    flex-wrap: nowrap; /* Einzeilig */
    gap: var(--eventhub-spacing-sm); /* Weniger Abstand zwischen Elementen */
}

.eventhub-card-banner--normal .eventhub-card-banner__main {
    flex-direction: row; /* Titel und Info nebeneinander */
    align-items: center;
    gap: var(--eventhub-spacing-sm);
}

/* Titel bleibt in gleicher Größe wie bei anderen Bannern */
.eventhub-card-banner--normal .eventhub-card-banner__title {
    font-weight: 600;
    margin-bottom: 0; /* Kein Abstand nach unten */
}

.eventhub-card-banner--normal .eventhub-card-banner__info {
    font-size: var(
        --eventhub-font-size-sm
    ); /* Gleich wie bei anderen Bannern */
}

.eventhub-card-banner--normal .eventhub-card-banner__meta {
    gap: var(--eventhub-spacing-sm); /* Kompakter */
}

.eventhub-card-banner--cancelled {
    opacity: 0.6;
}

/* ==========================================================================
   THUMBNAIL
   ========================================================================== */

.eventhub-card-banner__thumbnail {
    flex-shrink: 0;
    width: var(--eventhub-thumbnail-size);
    height: var(--eventhub-thumbnail-size);
}

.eventhub-card-banner__thumbnail a {
    display: block;
    width: 100%;
    height: 100%;
}

.eventhub-card-banner__thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--eventhub-spacing-xs);
}

.eventhub-card-banner__thumbnail-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--eventhub-color-bg-alt);
    border-radius: var(--eventhub-spacing-xs);
    font-size: 1.5rem;
}

/* ==========================================================================
   CONTENT (Titel, Venue, Meta)
   ========================================================================== */

.eventhub-card-banner__content {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--eventhub-spacing-sm);
    min-width: 0; /* Für Text-Overflow */
}

.eventhub-card-banner__main {
    display: flex;
    flex-direction: column;
    gap: var(--eventhub-spacing-xs);
    min-width: 0;
}

/* ==========================================================================
   TITLE
   ========================================================================== */

.eventhub-card-banner__title {
    margin: 0;
    font-size: inherit;
    font-weight: var(--eventhub-font-weight-semibold);
    line-height: 1.3;
}

.eventhub-card-banner__title a {
    color: inherit;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eventhub-card-banner__title a:hover {
    text-decoration: underline;
}

/* ==========================================================================
   VENUE & INFO
   ========================================================================== */

.eventhub-card-banner__info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
}

.eventhub-card-banner__venue,
.eventhub-card-banner__category,
.eventhub-card-banner__separator {
    font-size: inherit;
    color: inherit;
}

/* Venue als Link */
a.eventhub-card-banner__venue,
a.eventhub-card-banner__category {
    text-decoration: none;
}

a.eventhub-card-banner__venue:hover,
a.eventhub-card-banner__category:hover {
    text-decoration: underline;
}

.eventhub-card-banner__separator {
    user-select: none;
}

/* ==========================================================================
   META (Countdown & Heute-Status)
   ========================================================================== */

.eventhub-card-banner__meta {
    display: flex;
    align-items: center;
    gap: var(--eventhub-spacing-md);
    flex-shrink: 0;
}

/* Countdown */
.eventhub-card-banner__countdown {
    font-size: var(--eventhub-font-size-sm);
    color: var(--eventhub-color-text-muted);
}

.eventhub-card-banner__countdown--last-day {
    font-weight: var(--eventhub-font-weight-semibold);
    color: var(--eventhub-color-cancelled);
}

/* Heute-Status */
.eventhub-card-banner__today-status {
    display: flex;
    align-items: center;
    gap: var(--eventhub-spacing-xs);
    font-size: var(--eventhub-font-size-sm);
}

.eventhub-card-banner__status-icon {
    flex-shrink: 0;
}

.eventhub-card-banner__status-hours,
.eventhub-card-banner__status-text {
    white-space: nowrap;
}

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

/* Nur Highlight und Featured werden auf Mobile gestapelt, Normal bleibt einzeilig */
@media (max-width: 768px) {
    .eventhub-card-banner--highlight,
    .eventhub-card-banner--featured {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 0;
        overflow: hidden;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__thumbnail,
    .eventhub-card-banner--featured .eventhub-card-banner__thumbnail {
        width: 100%;
        height: 180px;
        flex-shrink: 0;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__thumbnail a,
    .eventhub-card-banner--featured .eventhub-card-banner__thumbnail a,
    .eventhub-card-banner--highlight .eventhub-card-banner__thumbnail img,
    .eventhub-card-banner--featured .eventhub-card-banner__thumbnail img {
        border-radius: 0;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__content,
    .eventhub-card-banner--featured .eventhub-card-banner__content {
        width: 100%;
        padding: var(--eventhub-spacing-sm) var(--eventhub-spacing-md);
        flex-direction: column;
        align-items: flex-start;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__main,
    .eventhub-card-banner--featured .eventhub-card-banner__main {
        width: 100%;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__title a,
    .eventhub-card-banner--featured .eventhub-card-banner__title a {
        white-space: normal;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__info,
    .eventhub-card-banner--featured .eventhub-card-banner__info {
        flex-wrap: wrap;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__meta,
    .eventhub-card-banner--featured .eventhub-card-banner__meta {
        width: 100%;
        flex-wrap: wrap;
        gap: var(--eventhub-spacing-sm);
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__status-hours,
    .eventhub-card-banner--featured .eventhub-card-banner__status-hours,
    .eventhub-card-banner--highlight .eventhub-card-banner__status-text,
    .eventhub-card-banner--featured .eventhub-card-banner__status-text {
        white-space: normal;
    }
}

@media (min-width: 769px) {
    .eventhub-card-banner--highlight .eventhub-card-banner__title a,
    .eventhub-card-banner--featured .eventhub-card-banner__title a {
        white-space: nowrap;
    }

    /* Normal: Titel kann umbrechen wenn nötig */
    .eventhub-card-banner--normal .eventhub-card-banner__title a {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }
}