/**
 * EventHub – Visibility Sections & Collapse Styles
 *
 * Styles für hierarchische Tagesstruktur mit Visibility-Gruppierung.
 * Highlights → Featured → Weitere (Collapsed)
 *
 * @package EventHub
 * @since 1.0.0
 */

/* ==========================================================================
   VISIBILITY SECTIONS
   ========================================================================== */

.eventhub-visibility-section {
    margin-bottom: var(--eventhub-spacing-lg, 1.5rem);
}

.eventhub-visibility-section:last-child {
    margin-bottom: 0;
}

/* Section Title - Layout-spezifische Styles (Basis-Styling in eventhub-base.css) */
.eventhub-visibility-section__title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eventhub-spacing-sm, 0.5rem);
}

.eventhub-visibility-section__icon {
    flex-shrink: 0;
    font-size: 1.1em;
}

.eventhub-visibility-section__title-text {
    flex-shrink: 0;
}

.eventhub-visibility-section__count {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.9em;
}

/* ==========================================================================
   GRIDS FÜR VERSCHIEDENE VISIBILITY-STUFEN
   ========================================================================== */

.eventhub-visibility-section__grid {
    display: grid;
    gap: var(--eventhub-spacing-md, 1rem);
}

/* Highlights: 2 Spalten, große Cards */
.eventhub-visibility-section__grid--large {
    grid-template-columns: repeat(2, 1fr);
}

/* Featured: 3 Spalten, mittlere Cards */
.eventhub-visibility-section__grid--medium {
    grid-template-columns: repeat(3, 1fr);
}

/* Normal: 4 Spalten, kleine Cards */
.eventhub-visibility-section__grid--small {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--eventhub-spacing-sm, 0.5rem);
}

/* Banner-Container (Typ B Events) */
.eventhub-visibility-section__banners {
    display: flex;
    flex-direction: column;
    gap: var(--eventhub-spacing-sm, 0.5rem);
    margin-top: var(--eventhub-spacing-md, 1rem);
}

/* Wenn nur Banner (keine Typ A Events) → kein margin-top */
.eventhub-visibility-section__content
    > .eventhub-visibility-section__banners:first-child {
    margin-top: 0;
}

/* ==========================================================================
   COLLAPSE / AKKORDEON
   ========================================================================== */

.eventhub-collapse__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    padding: 0.25rem 0.75rem;
    background: transparent;
    border: 1px solid currentColor;
    border-color: var(--eventhub-color-border);
    border-radius: var(--eventhub-border-radius, 4px);
    font-family: inherit;
    font-size: var(--eventhub-font-size-xs);
    font-weight: var(--eventhub-font-weight-medium);
    color: inherit;
    cursor: pointer;
    transition:
        background-color var(--eventhub-transition),
        border-color var(--eventhub-transition);
}

.eventhub-collapse__trigger:hover {
    background: var(--eventhub-color-surface);
    border-color: var(--eventhub-color-border);
}

.eventhub-collapse__trigger:focus-visible {
    outline: 2px solid var(--eventhub-color-primary, #0073aa);
    outline-offset: 2px;
}

.eventhub-collapse__trigger-text {
    /* Text kann via JS geändert werden */
}

.eventhub-collapse__trigger-icon {
    font-size: 0.75em;
    transition: transform var(--eventhub-transition);
}

/* Expanded State */
.eventhub-collapse--open
    .eventhub-collapse__trigger[aria-expanded='true']
    .eventhub-collapse__trigger-icon {
    transform: rotate(180deg);
}

/* Content Hidden */
.eventhub-collapse__content[hidden] {
    display: none;
}

/* Content Visible mit Animation */
.eventhub-collapse__content:not([hidden]) {
    animation: eventhub-slide-down 0.25s ease-out;
}

@keyframes eventhub-slide-down {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Reduzierte Animation für Nutzer die sie nicht mögen */
@media (prefers-reduced-motion: reduce) {
    .eventhub-collapse__content:not([hidden]) {
        animation: none;
    }

    .eventhub-collapse__trigger-icon {
        transition: none;
    }
}

/* ==========================================================================
   DAY SECTION ERWEITERT
   ========================================================================== */

/* Erweiterung der bestehenden day-section Styles */
.eventhub-day-section__content {
    /* Enthält jetzt visibility-sections oder normales Grid */
}

/* Normales Event-Grid (Standard-Ansicht ohne Visibility-Gruppierung) */
.eventhub-day-section__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--eventhub-spacing-md, 1rem);
}

/* Abstand zwischen Day-Sections */
.eventhub-day-section + .eventhub-day-section {
    margin-top: var(--eventhub-spacing-xl, 2rem);
}

/* ==========================================================================
   RESPONSIVE - EINHEITLICHE BREAKPOINTS
   ========================================================================== */

/* Tablet (≤992px): 2 Spalten */
@media (max-width: 992px) {
    .eventhub-day-section__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .eventhub-visibility-section__grid--large {
        grid-template-columns: repeat(2, 1fr);
    }

    .eventhub-visibility-section__grid--medium {
        grid-template-columns: repeat(2, 1fr);
    }

    .eventhub-visibility-section__grid--small {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile (≤576px): 1 Spalte */
@media (max-width: 576px) {
    .eventhub-day-section__grid {
        grid-template-columns: 1fr;
    }

    .eventhub-visibility-section__grid--large,
    .eventhub-visibility-section__grid--medium,
    .eventhub-visibility-section__grid--small {
        grid-template-columns: 1fr;
    }

    /* Collapse-Trigger auf Mobile etwas größer für Touch */
    .eventhub-collapse__trigger {
        padding: 0.375rem 0.875rem;
        font-size: 0.875rem;
    }
}

/* ==========================================================================
   VISIBILITY-SPEZIFISCHE MODIFIER
   ========================================================================== */

/* Highlights-Sektion: Optional etwas prominenter */
.eventhub-visibility-section--highlight {
    /* Kann für spezielle Hervorhebung verwendet werden */
}

/* Featured-Sektion */
.eventhub-visibility-section--featured {
    /* Standard-Styling */
}

/* Normal-Sektion */
.eventhub-visibility-section--normal {
    /* Standard-Styling */
}

/* ==========================================================================
   DARK MODE SUPPORT
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .eventhub-collapse__trigger {
        border-color: rgba(255, 255, 255, 0.2);
    }

    .eventhub-collapse__trigger:hover {
        background: rgba(255, 255, 255, 0.1);
        border-color: rgba(255, 255, 255, 0.3);
    }
}

/* ==========================================================================
   RUNNING EVENTS CHIPS (Laufende Zeiträume)
   ========================================================================== */

/**
 * Kompakte horizontale Darstellung für laufende Typ B Events.
 * Erscheint pro Tag als "Aktuell laufend: [Chip] [Chip] [Chip]"
 * Hierarchie via Styling: highlight (gold) → featured (dezent) → normal (grau)
 *
 * Verwendet natives HTML5 <details>/<summary> für Barrierefreiheit.
 */

.eventhub-running-events {
    margin-bottom: var(--eventhub-spacing-lg, 1.5rem);
}

/* Summary als Toggle (natives HTML5 details/summary) */
.eventhub-running-events__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--eventhub-spacing-sm, 0.5rem) 0 0 0;
    background: transparent;
    border: none;
    border-radius: var(--eventhub-border-radius, 4px);
    cursor: pointer;
    text-align: left;
    list-style: none; /* Entfernt den Standard-Pfeil von <summary> */
    transition: background-color 0.2s ease;
}

/* Entfernt den Standard-Pfeil in WebKit/Blink */
.eventhub-running-events__toggle::-webkit-details-marker {
    display: none;
}

.eventhub-running-events__toggle:hover {
    background: var(--eventhub-color-bg-alt, #f9f9f9);
}

.eventhub-running-events__toggle:focus {
    outline: none;
}

.eventhub-running-events__toggle:focus-visible {
    background: rgba(0, 0, 0, 0.05);
    outline: 2px solid var(--eventhub-color-primary, #0073aa);
    outline-offset: 2px;
}

/* H2 Heading innerhalb von summary - Basis-Styling in eventhub-base.css */
.eventhub-running-events__heading {
    display: inline-flex;
    align-items: center;
    gap: var(--eventhub-spacing-xs, 0.375rem);
    /* font-size, font-weight, text-transform via zentrale Section-Titel-Regeln */
    line-height: 1.2;
}

.eventhub-running-events__count {
    font-weight: 400;
    font-size: var(--eventhub-font-size-base, 1rem);
    line-height: 1;
    color: var(--eventhub-color-text-muted, #666);
}

.eventhub-running-events__arrow {
    font-size: 0.75rem;
    color: var(--eventhub-color-text-muted, #666);
    transition: transform 0.3s ease;
}

/* Zugeklappter Zustand - Pfeil nach rechts */
.eventhub-running-events:not([open]) .eventhub-running-events__arrow {
    transform: rotate(-90deg);
}

/* Content-Container */
.eventhub-running-events__content {
    padding-top: var(--eventhub-spacing-sm, 0.5rem);
}

.eventhub-running-events__list {
    display: flex;
    flex-direction: column;
    gap: var(--eventhub-spacing-sm, 0.5rem);
}

/* Legacy-Klassen entfernen (nicht mehr benötigt mit details/summary) */
/*
.eventhub-running-events__content.is-collapsed {
    grid-template-rows: 0fr;
    opacity: 0;
}

.eventhub-running-events__content > .eventhub-running-events__list {
    overflow: hidden;
}
*/

/* Heading über dem Event-Grid (Kommende Veranstaltungen) - Basis-Styling in eventhub-base.css */
h2.eventhub-event-list__heading {
    display: inline-flex;
    align-items: center;
    gap: var(--eventhub-spacing-xs, 0.375rem);
    margin-bottom: var(--eventhub-spacing-lg, 1.5rem);
    /* font-size, font-weight, text-transform via zentrale Section-Titel-Regeln */
    line-height: 1.2;
}

.eventhub-event-list__heading-count {
    font-weight: 400;
    font-size: 1rem;
    color: var(--eventhub-color-text-muted, #666);
}

.eventhub-running-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eventhub-spacing-xs, 0.375rem);
    padding: var(--eventhub-spacing-sm, 0.5rem)
        var(--eventhub-spacing-md, 0.75rem);
    margin-bottom: var(--eventhub-spacing-md, 1rem);
    background: var(--eventhub-color-surface-alt, rgba(0, 0, 0, 0.02));
    border-radius: var(--eventhub-border-radius, 4px);
    font-size: 0.875rem;
}

/* Standalone-Variante (ganz oben im Archiv) */
.eventhub-running-chips--standalone {
    padding: var(--eventhub-spacing-md, 1rem)
        var(--eventhub-spacing-lg, 1.25rem);
    background: linear-gradient(
        135deg,
        rgba(255, 215, 0, 0.05) 0%,
        rgba(255, 184, 0, 0.05) 100%
    );
    border: 1px solid rgba(255, 184, 0, 0.15);
    border-radius: var(--eventhub-border-radius-lg, 8px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.eventhub-running-chips__label {
    color: var(--eventhub-color-text-muted, #666);
    font-weight: var(--eventhub-font-weight-medium);
    flex-shrink: 0;
    margin-right: var(--eventhub-spacing-xs, 0.25rem);
}

.eventhub-running-chips__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--eventhub-spacing-xs, 0.375rem);
}

/* === CHIP BASE === */
.eventhub-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: var(--eventhub-border-radius-pill); /* Pill-Shape */
    text-decoration: none;
    font-size: var(--eventhub-font-size-xs);
    font-weight: var(--eventhub-font-weight-medium);
    line-height: 1.3;
    white-space: nowrap;
    transition:
        transform var(--eventhub-transition-fast),
        box-shadow var(--eventhub-transition-fast);
}

.eventhub-chip:hover {
    transform: translateY(-1px);
    text-decoration: none;
}

.eventhub-chip:focus-visible {
    outline: 2px solid var(--eventhub-color-primary, #0073aa);
    outline-offset: 2px;
}

.eventhub-chip__icon {
    font-size: 0.9em;
    line-height: 1;
}

.eventhub-chip__star {
    font-size: 0.75em;
    line-height: 1;
}

.eventhub-chip__title {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* === CHIP VISIBILITY VARIANTS === */

/* Highlight: Gold/Primary – springt ins Auge */
.eventhub-chip--highlight {
    background: linear-gradient(
        135deg,
        var(--eventhub-color-highlight) 0%,
        #ffb800 100%
    );
    color: var(--eventhub-color-text-dark);
    box-shadow: 0 1px 3px rgba(255, 184, 0, 0.3);
}

.eventhub-chip--highlight:hover {
    box-shadow: 0 3px 8px rgba(255, 184, 0, 0.4);
    color: var(--eventhub-color-text-dark);
}

.eventhub-chip--highlight .eventhub-chip__star {
    color: var(--eventhub-color-highlight-dark);
}

/* Featured: Dezenter Rahmen, normale Farbe */
.eventhub-chip--featured {
    background: var(--eventhub-color-bg-input);
    color: var(--eventhub-color-text, #333);
    border: 1px solid var(--eventhub-color-primary, #0073aa);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.eventhub-chip--featured:hover {
    background: var(--eventhub-color-primary-light);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    color: var(--eventhub-color-text, #333);
}

/* Normal: Grau, dezent im Hintergrund */
.eventhub-chip--normal {
    background: var(--eventhub-color-bg-alt);
    color: var(--eventhub-color-text-muted, #666);
    border: 1px solid transparent;
}

.eventhub-chip--normal:hover {
    background: var(--eventhub-color-surface-hover);
    color: var(--eventhub-color-text, #333);
}

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

@media (max-width: 768px) {
    .eventhub-running-chips {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--eventhub-spacing-sm, 0.5rem);
    }

    .eventhub-running-chips__label {
        margin-right: 0;
        margin-bottom: 0.25rem;
    }

    .eventhub-chip__title {
        max-width: 150px;
    }
}

@media (max-width: 480px) {
    .eventhub-chip {
        font-size: 0.75rem;
        padding: 0.1875rem 0.5rem;
    }

    .eventhub-chip__title {
        max-width: 120px;
    }
}

/* === DARK MODE CHIPS === */

@media (prefers-color-scheme: dark) {
    .eventhub-running-chips {
        background: rgba(255, 255, 255, 0.05);
    }

    .eventhub-running-chips__label {
        color: rgba(255, 255, 255, 0.7);
    }

    .eventhub-chip--highlight {
        background: linear-gradient(135deg, #ffd700 0%, #e6a700 100%);
        color: #1a1a1a;
    }

    .eventhub-chip--featured {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
        border-color: var(--eventhub-color-primary, #4da6d9);
    }

    .eventhub-chip--featured:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #fff;
    }

    .eventhub-chip--normal {
        background: rgba(255, 255, 255, 0.08);
        color: rgba(255, 255, 255, 0.6);
    }

    .eventhub-chip--normal:hover {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

/* ==========================================================================
   EVENTS SECTION HEADER ROW
   Kalender-Button rechtsbündig neben "Kommende Veranstaltungen" für
   CPTs (Venues, Organizers, Series) und Taxonomien (Category, District, Tag).
   Nicht für das Haupt-Archiv (/veranstaltungen/).
   ========================================================================== */

/* ==========================================================================
   EVENTS SECTION LAYOUT (LEGACY - DEAKTIVIERT)
   Neues Layout verwendet .eventhub-events-section__header Container
   ========================================================================== */

/*
 * ALTES GRID-LAYOUT - nicht mehr nötig da wir jetzt __header Container nutzen
 *
.eventhub-events-section:has(.eventhub-calendar-subscribe--venue),
.eventhub-events-section:has(.eventhub-calendar-subscribe--organizer),
.eventhub-events-section:has(.eventhub-calendar-subscribe--series),
.eventhub-events-section:has(.eventhub-calendar-subscribe--category),
.eventhub-events-section:has(.eventhub-calendar-subscribe--district),
.eventhub-events-section:has(.eventhub-calendar-subscribe--tag) {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    row-gap: var(--eventhub-spacing-md, 1rem);
}

.eventhub-events-section:has(.eventhub-calendar-subscribe--venue) > h2,
.eventhub-events-section:has(.eventhub-calendar-subscribe--organizer) > h2,
.eventhub-events-section:has(.eventhub-calendar-subscribe--series) > h2,
.eventhub-events-section:has(.eventhub-calendar-subscribe--category) > h2,
.eventhub-events-section:has(.eventhub-calendar-subscribe--district) > h2,
.eventhub-events-section:has(.eventhub-calendar-subscribe--tag) > h2 {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    margin: 0;
}

.eventhub-events-section > .eventhub-calendar-subscribe--venue,
.eventhub-events-section > .eventhub-calendar-subscribe--organizer,
.eventhub-events-section > .eventhub-calendar-subscribe--series,
.eventhub-events-section > .eventhub-calendar-subscribe--category,
.eventhub-events-section > .eventhub-calendar-subscribe--district,
.eventhub-events-section > .eventhub-calendar-subscribe--tag {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 0;
}

.eventhub-events-section:has(.eventhub-calendar-subscribe--venue) > form,
.eventhub-events-section:has(.eventhub-calendar-subscribe--organizer) > form,
.eventhub-events-section:has(.eventhub-calendar-subscribe--series) > form,
.eventhub-events-section:has(.eventhub-calendar-subscribe--category) > form,
.eventhub-events-section:has(.eventhub-calendar-subscribe--district) > form,
.eventhub-events-section:has(.eventhub-calendar-subscribe--tag) > form {
    grid-column: 1 / -1;
    grid-row: 2;
}

.eventhub-events-section:has(.eventhub-calendar-subscribe--venue)
    > .eventhub-grid,
.eventhub-events-section:has(.eventhub-calendar-subscribe--organizer)
    > .eventhub-grid,
.eventhub-events-section:has(.eventhub-calendar-subscribe--series)
    > .eventhub-grid,
.eventhub-events-section:has(.eventhub-calendar-subscribe--category)
    > .eventhub-grid,
.eventhub-events-section:has(.eventhub-calendar-subscribe--district)
    > .eventhub-grid,
.eventhub-events-section:has(.eventhub-calendar-subscribe--tag)
    > .eventhub-grid {
    grid-column: 1 / -1;
}

.eventhub-events-section:has(.eventhub-calendar-subscribe--venue)
    > .eventhub-load-more,
.eventhub-events-section:has(.eventhub-calendar-subscribe--organizer)
    > .eventhub-load-more,
.eventhub-events-section:has(.eventhub-calendar-subscribe--series)
    > .eventhub-load-more,
.eventhub-events-section:has(.eventhub-calendar-subscribe--category)
    > .eventhub-load-more,
.eventhub-events-section:has(.eventhub-calendar-subscribe--district)
    > .eventhub-load-more,
.eventhub-events-section:has(.eventhub-calendar-subscribe--tag)
    > .eventhub-load-more {
    grid-column: 1 / -1;
}

@media (max-width: 600px) {
    .eventhub-events-section:has(.eventhub-calendar-subscribe--venue),
    .eventhub-events-section:has(.eventhub-calendar-subscribe--organizer),
    .eventhub-events-section:has(.eventhub-calendar-subscribe--series),
    .eventhub-events-section:has(.eventhub-calendar-subscribe--category),
    .eventhub-events-section:has(.eventhub-calendar-subscribe--district),
    .eventhub-events-section:has(.eventhub-calendar-subscribe--tag) {
        display: block;
    }

    .eventhub-events-section > .eventhub-calendar-subscribe--venue,
    .eventhub-events-section > .eventhub-calendar-subscribe--organizer,
    .eventhub-events-section > .eventhub-calendar-subscribe--series,
    .eventhub-events-section > .eventhub-calendar-subscribe--category,
    .eventhub-events-section > .eventhub-calendar-subscribe--district,
    .eventhub-events-section > .eventhub-calendar-subscribe--tag {
        margin-top: var(--eventhub-spacing-sm, 0.5rem);
        margin-bottom: var(--eventhub-spacing-md, 1rem);
    }
}
*/

/* ==========================================================================
   FILTER NOTICE (kontextabhängige Filterung)
   ========================================================================== */

.eventhub-filter-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--eventhub-spacing-xs, 0.25rem) var(--eventhub-spacing-sm, 0.5rem);
    margin-bottom: var(--eventhub-spacing-md, 1rem);
    font-size: 0.875rem;
    color: var(--eventhub-color-text-muted, #666);
}

.eventhub-filter-notice__label {
    color: inherit;
}

.eventhub-filter-notice__label strong {
    color: var(--eventhub-color-text, #333);
    font-weight: 600;
}

.eventhub-filter-notice__reset {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.eventhub-filter-notice__reset:hover {
    color: var(--eventhub-color-text, #333);
}