/**
 * EventHub Responsive Styles
 *
 * Media Queries, Accessibility, Dark Mode und Print.
 * Phase 7.8: Erweiterte Responsive-Styles und Accessibility.
 *
 * @package EventHub
 * @since 1.0.0
 */

/* ==========================================================================
   ACCESSIBILITY - SCREEN READER ONLY
   ========================================================================== */

/**
 * Versteckt Elemente visuell, aber macht sie für Screen Reader zugänglich.
 * Verwendung: Labels für Icons, zusätzliche Kontext-Informationen.
 */
.eventhub-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/**
 * Screen Reader Only mit Focus-Sichtbarkeit.
 * Verwendung: Skip-Links, die bei Focus sichtbar werden.
 */
.eventhub-sr-only--focusable:focus,
.eventhub-sr-only--focusable:active {
    position: static;
    width: auto;
    height: auto;
    padding: var(--eventhub-spacing-sm) var(--eventhub-spacing-md);
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: var(--eventhub-color-primary);
    color: var(--eventhub-color-text-light);
    z-index: 100000;
}

/* ==========================================================================
   ACCESSIBILITY - SKIP LINKS
   ========================================================================== */

.eventhub-skip-link {
    display: block;
    text-decoration: none;
    font-weight: 600;
}

.eventhub-skip-link:focus {
    position: fixed;
    top: var(--eventhub-spacing-sm);
    left: var(--eventhub-spacing-sm);
    border-radius: var(--eventhub-border-radius);
}

/* ==========================================================================
   ACCESSIBILITY - FOCUS STYLES
   ========================================================================== */

/**
 * Einheitlicher Focus-Ring für alle interaktiven Elemente.
 * :focus-visible verhindert Focus-Ring bei Mausklick.
 */

/* Basis Focus-Style (Utility-Klasse) */
.eventhub-focus-ring:focus-visible {
    outline: 2px solid var(--eventhub-color-primary);
    outline-offset: 2px;
    border-radius: var(--eventhub-border-radius);
}

/* Event Cards (Medium/Large) - Links */
.eventhub-event-card__title a:focus-visible,
.eventhub-event-card__ticket-button:focus-visible,
.eventhub-event-card__category:focus-visible,
.eventhub-event-card__series-link:focus-visible {
    outline: 2px solid var(--eventhub-color-primary);
    outline-offset: 2px;
    border-radius: var(--eventhub-border-radius);
}

/* Card Small - Links */
.eventhub-card--small a:focus-visible,
.eventhub-card__title a:focus-visible,
.eventhub-card__category:focus-visible {
    outline: 2px solid var(--eventhub-color-primary);
    outline-offset: 2px;
    border-radius: var(--eventhub-border-radius);
}

/* Card Banner - Links */
.eventhub-card-banner__title a:focus-visible,
.eventhub-card-banner a:focus-visible {
    outline: 2px solid var(--eventhub-color-primary);
    outline-offset: 2px;
    border-radius: var(--eventhub-border-radius);
}

/* List Item - Links */
.eventhub-list-item__title:focus-visible,
.eventhub-list-item__category:focus-visible {
    outline: 2px solid var(--eventhub-color-primary);
    outline-offset: 2px;
    border-radius: var(--eventhub-border-radius);
}

/* Day Section - Links */
.eventhub-day-section a:focus-visible {
    outline: 2px solid var(--eventhub-color-primary);
    outline-offset: 2px;
    border-radius: var(--eventhub-border-radius);
}

/* Pagination Links */
.eventhub-wrapper nav a:focus-visible,
.page-numbers:focus-visible {
    outline: 2px solid var(--eventhub-color-primary);
    outline-offset: 2px;
    border-radius: var(--eventhub-border-radius);
}

/* Fallback für ältere Browser ohne :focus-visible Support */
@supports not selector(:focus-visible) {
    .eventhub-event-card__title a:focus,
    .eventhub-event-card__ticket-button:focus,
    .eventhub-event-card__category:focus,
    .eventhub-event-card__series-link:focus,
    .eventhub-card--small a:focus,
    .eventhub-card__title a:focus,
    .eventhub-card-banner__title a:focus,
    .eventhub-list-item__title:focus,
    .eventhub-list-item__category:focus {
        outline: 2px solid var(--eventhub-color-primary);
        outline-offset: 2px;
    }
}

/* ==========================================================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --eventhub-transition: 0s;
    }

    /* Alle Komponenten: Keine Transitionen/Animationen */
    .eventhub-event-card,
    .eventhub-event-card--large,
    .eventhub-event-card__ticket-button,
    .eventhub-card,
    .eventhub-card--small,
    .eventhub-card-banner,
    .eventhub-list-item,
    .eventhub-day-section,
    .eventhub-collapse__content,
    .eventhub-grid,
    .eventhub-wrapper * {
        transition: none !important;
        animation: none !important;
    }
}

/* ==========================================================================
   RESPONSIVE - LARGE DESKTOP (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
    .eventhub-event-card--large {
        /* Maximale Breite für sehr große Screens */
        max-width: 100%;
    }
}

/* ==========================================================================
   RESPONSIVE - DESKTOP (992px - 1199px)
   ========================================================================== */

@media (max-width: 1199px) and (min-width: 993px) {
    :root {
        --eventhub-grid-columns: 3;
    }
}

/* ==========================================================================
   RESPONSIVE - TABLET (768px - 992px)
   ========================================================================== */

@media (max-width: 992px) {
    :root {
        --eventhub-grid-columns: 2;
    }

    /* Card Large - Tablet */
    .eventhub-event-card--large .eventhub-event-card__title {
        font-size: var(--eventhub-font-size-lg);
    }
}

/* ==========================================================================
   RESPONSIVE - TABLET PORTRAIT (576px - 767px)
   ========================================================================== */

@media (max-width: 767px) {
    :root {
        --eventhub-grid-columns: 2;
    }

    /* Card Large - Tablet Portrait */
    .eventhub-event-card--large {
        /* Vollbreite auf kleineren Tablets */
    }

    .eventhub-event-card--large .eventhub-event-card__title {
        font-size: var(--eventhub-font-size-base);
    }

    /* Card Banner - Tablet Portrait */
    .eventhub-card-banner--highlight,
    .eventhub-card-banner--featured {
        flex-wrap: wrap;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__content,
    .eventhub-card-banner--featured .eventhub-card-banner__content {
        flex: 1 1 100%;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__meta,
    .eventhub-card-banner--featured .eventhub-card-banner__meta {
        margin-top: var(--eventhub-spacing-sm);
        flex-wrap: wrap;
        gap: var(--eventhub-spacing-xs);
    }
}

/* ==========================================================================
   RESPONSIVE - MOBILE (max 576px)
   ========================================================================== */

@media (max-width: 576px) {
    :root {
        --eventhub-grid-columns: 1;
    }

    .eventhub-wrapper {
        padding: var(--eventhub-spacing-sm);
    }

    /* === CARD MEDIUM - Mobile === */
    .eventhub-event-card__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--eventhub-spacing-sm);
    }

    .eventhub-event-card__title {
        font-size: var(--eventhub-font-size-base);
    }

    .eventhub-event-card__date {
        font-size: var(--eventhub-font-size-sm);
    }

    /* === CARD LARGE - Mobile === */
    .eventhub-event-card--large {
        /* Vollbreite auf Mobile */
        width: 100%;
    }

    .eventhub-event-card--large .eventhub-event-card__title {
        font-size: var(--eventhub-font-size-base);
        line-height: 1.3;
    }

    .eventhub-event-card--large .eventhub-event-card__image-wrapper {
        /* Reduzierte Höhe auf Mobile */
        max-height: 200px;
    }

    /* === CARD SMALL - Mobile === */
    .eventhub-card--small {
        /* Stack statt Inline auf Mobile */
        flex-direction: column;
        align-items: flex-start;
    }

    .eventhub-card--small .eventhub-card__image-wrapper {
        width: 100%;
        max-width: none;
        margin-bottom: var(--eventhub-spacing-sm);
    }

    .eventhub-card--small .eventhub-card__content {
        width: 100%;
    }

    .eventhub-card--small .eventhub-card__datetime {
        margin-top: var(--eventhub-spacing-xs);
    }

    /* === CARD BANNER - Mobile === */
    .eventhub-card-banner--highlight,
    .eventhub-card-banner--featured {
        flex-direction: column;
        align-items: stretch;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__thumbnail,
    .eventhub-card-banner--featured .eventhub-card-banner__thumbnail {
        width: 100%;
        max-width: none;
        margin-bottom: var(--eventhub-spacing-sm);
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__thumbnail img,
    .eventhub-card-banner--featured .eventhub-card-banner__thumbnail img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__content,
    .eventhub-card-banner--featured .eventhub-card-banner__content {
        flex-direction: column;
    }

    .eventhub-card-banner--highlight .eventhub-card-banner__main,
    .eventhub-card-banner--featured .eventhub-card-banner__main {
        margin-bottom: var(--eventhub-spacing-sm);
    }

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

    .eventhub-card-banner--highlight .eventhub-card-banner__title,
    .eventhub-card-banner--featured .eventhub-card-banner__title {
        font-size: var(--eventhub-font-size-base);
    }

    /* Normal bleibt kompakt einzeilig */
    .eventhub-card-banner--normal .eventhub-card-banner__title,
    .eventhub-card-banner--normal .eventhub-card-banner__info,
    .eventhub-card-banner--normal .eventhub-card-banner__meta {
        font-size: var(--eventhub-font-size-xs);
    }

    /* === LIST ITEM - Mobile === */
    .eventhub-list-item {
        flex-wrap: wrap;
        gap: var(--eventhub-spacing-xs);
        padding: var(--eventhub-spacing-sm) 0;
    }

    .eventhub-list-item__title {
        flex: 1 1 100%;
        order: 1;
    }

    .eventhub-list-item__bullet {
        display: none;
    }

    .eventhub-list-item__separator {
        display: none;
    }

    .eventhub-list-item__category,
    .eventhub-list-item__time {
        order: 2;
        font-size: var(--eventhub-font-size-sm);
    }

    .eventhub-list-item__category::before {
        content: '';
    }

    .eventhub-list-item__time::before {
        content: '· ';
    }

    /* === DAY SECTION - Mobile === */
    .eventhub-day-section__header {
        font-size: var(--eventhub-font-size-sm);
        flex-wrap: wrap;
    }

    .eventhub-day-section__label {
        font-size: var(--eventhub-font-size-sm);
    }

    .eventhub-day-section__date {
        font-size: var(--eventhub-font-size-sm);
    }

    /* === ARCHIVE HEADER - Mobile === */
    .eventhub-archive-header__title {
        font-size: var(--eventhub-font-size-lg);
    }

    /* === PAGINATION - Mobile === */
    .eventhub-wrapper nav {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* ==========================================================================
   RESPONSIVE - VERY SMALL MOBILE (max 375px)
   ========================================================================== */

@media (max-width: 375px) {
    .eventhub-wrapper {
        padding: var(--eventhub-spacing-xs);
    }

    .eventhub-event-card__title,
    .eventhub-card__title {
        font-size: var(--eventhub-font-size-sm);
    }

    .eventhub-card-banner__title {
        font-size: var(--eventhub-font-size-sm);
    }

    .eventhub-day-section__header {
        padding: var(--eventhub-spacing-xs) 0;
    }
}

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

@media (prefers-color-scheme: dark) {
    :root {
        --eventhub-color-bg-alt: #2d2d2d;
        --eventhub-color-border: #444;
        --eventhub-color-text-muted: #aaa;
    }

    .eventhub-debug,
    .eventhub-event-card__debug {
        background: #2d2d2d;
        border-color: #444;
        color: #e0e0e0;
    }

    .eventhub-debug pre {
        background: #1e1e1e;
        border-color: #444;
        color: #e0e0e0;
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .eventhub-grid {
        display: block;
    }

    .eventhub-event-card {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: var(--eventhub-spacing-md);
        box-shadow: none;
        border: 1px solid #000;
    }

    .eventhub-event-card__ticket-button {
        display: none;
    }

    .eventhub-debug,
    .eventhub-event-card__debug {
        display: none;
    }
}