/**
 * EventHub View-Switcher – Styling
 *
 * Toggle-Navigation zwischen Kacheln, Karte und Merkliste.
 * Kompakte Pill-Navigation, responsive, theme-kompatibel.
 *
 * @package EventHub
 * @since 1.2.0
 */

/* ==========================================================================
   View-Switcher Container
   ========================================================================== */

.eventhub-view-switcher {
    display: flex;
    justify-content: flex-end;
    margin-bottom: var(--eventhub-spacing-md, 1rem);
}

.eventhub-view-switcher__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
    border: 1px solid var(--eventhub-color-border, #ddd);
    border-radius: var(--eventhub-border-radius, 4px);
    background: var(--eventhub-color-bg, transparent);
}

.eventhub-view-switcher__item {
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* Trennlinie zwischen Items */
.eventhub-view-switcher__item + .eventhub-view-switcher__item {
    border-left: 1px solid var(--eventhub-color-border, #ddd);
}

/* ==========================================================================
   Links / Aktive Elemente
   ========================================================================== */

.eventhub-view-switcher__link {
    display: inline-flex;
    align-items: center;
    gap: var(--eventhub-spacing-xs, 0.25rem);
    padding: var(--eventhub-spacing-xs, 0.25rem)
        var(--eventhub-spacing-sm, 0.5rem);
    font-family: inherit;
    font-size: var(--eventhub-font-size-sm, 0.875rem);
    line-height: var(--eventhub-line-height, 1.5);
    color: var(--eventhub-color-text-muted, #666);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        background var(--eventhub-transition, 0.2s ease),
        color var(--eventhub-transition, 0.2s ease);
}

/* Hover (nur für Links, nicht active span) */
a.eventhub-view-switcher__link:hover,
a.eventhub-view-switcher__link:focus-visible {
    color: var(--eventhub-color-primary, #0073aa);
    background: var(--eventhub-color-bg-alt, #f9f9f9);
}

/* Aktiver Zustand */
.eventhub-view-switcher__link--active {
    font-weight: 700;
    color: var(--eventhub-color-primary, #0073aa);
    background: var(--eventhub-color-bg-alt, #f9f9f9);
    cursor: default;
}

/* ==========================================================================
   Icon
   ========================================================================== */

.eventhub-view-switcher__icon {
    flex-shrink: 0;
    width: 1em;
    height: 1em;
}

/* ==========================================================================
   Favoriten-Count Badge
   ========================================================================== */

.eventhub-view-switcher__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3em;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: var(--eventhub-color-primary, #0073aa);
    border-radius: 999px;
    vertical-align: middle;
    margin-left: 0.125rem;
}

/* Wenn count hidden ist, kein Platz einnehmen */
.eventhub-view-switcher__count[hidden] {
    display: none;
}

/* ==========================================================================
   Responsive: Labels auf sehr kleinen Screens ausblenden
   ========================================================================== */

@media (max-width: 480px) {
    .eventhub-view-switcher__label {
        /* Visuell verstecken, für Screen-Reader erhalten */
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .eventhub-view-switcher__link {
        padding: var(--eventhub-spacing-sm, 0.5rem);
    }

    .eventhub-view-switcher__icon {
        width: 1.25em;
        height: 1.25em;
    }
}