/**
 * Ticketa Theme — assets/css/responsive.css
 *
 * RESPONSIBILITY:
 *   ALL media queries in a single file, loaded last.
 *   This is the only file that may override styles from other CSS files.
 *
 * BREAKPOINTS:
 *   --bp-sm:  480px   (large mobile)
 *   --bp-md:  768px   (tablet)
 *   --bp-lg:  1024px  (small desktop)
 *   --bp-xl:  1280px  (large desktop)
 *
 * MOBILE-FIRST approach: base styles target mobile; media queries add desktop.
 * However, since our site is desktop-heavy, most breakpoints scale DOWN.
 *
 * @package Ticketa
 * @since   1.0.0
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BELOW 1024px — TABLET
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {

    /* Wizard: reduce sidebar width */
    :root {
        --ticketa-sidebar-width: 280px;
    }

    /* Events grid: 2 columns */
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-6);
    }

    /* Wizard room controls: stack to 2 columns */
    .room-block__controls {
        grid-template-columns: 1fr 1fr;
    }

    /* Checkout form: keep 2 columns */
    .checkout-form {
        grid-template-columns: 1fr 1fr;
    }

    /* Wizard step content: reduce padding */
    .wizard-step-content {
        padding: var(--space-8);
    }

    .wizard-stepper {
        padding: var(--space-8) var(--space-8) var(--space-6);
    }

    /* Stepper label: hide on tablet to save space */
    .wizard-stepper__label {
        display: none;
    }

    .wizard-stepper__connector {
        margin-bottom: calc(18px / 2);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BELOW 768px — MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Header ──────────────────────────────────────────────────────────── */

    :root {
        --header-height: var(--header-height-mobile);
    }

    /* Hide primary desktop nav */
    .site-nav {
        display: none;
    }

    /* Show hamburger toggle */
    .menu-toggle {
        display: flex;
    }

    /* Hide desktop CTA in header actions (shown in mobile nav instead) */
    .header-cta {
        display: none;
    }

    /* ── Events archive ───────────────────────────────────────────────────── */

    .events-grid {
        grid-template-columns: 1fr;
        gap: var(--space-5);
        padding: 0 var(--space-4);
    }

    .section-heading {
        padding: var(--space-10) 0 var(--space-8);
    }

    .section-heading__title {
        font-size: clamp(var(--text-3xl), 14vw, var(--text-5xl));
    }

    /* Filter bar: scrollable without wrapping */
    .filter-bar {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        padding: 0 var(--space-4) var(--space-8);
        scrollbar-width: none; /* Hide scrollbar Firefox */
        -ms-overflow-style: none;
    }
    .filter-bar::-webkit-scrollbar {
        display: none;
    }

    .filter-btn {
        font-size: var(--text-xs);
        padding: var(--space-2) var(--space-3);
    }

    /* ── Wizard ───────────────────────────────────────────────────────────── */

    /* Stack: main content on top, sidebar becomes bottom bar */
    .wizard-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        min-height: unset;
    }

    /* Sidebar on mobile: bottom sticky bar */
    .wizard-sidebar {
        position: fixed;
        bottom: 0;
        inset-inline: 0;
        top: auto;
        height: auto;
        width: 100%;
        min-height: unset;
        max-height: 50vh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
        overflow-y: auto;
        z-index: var(--z-overlay);
        transform: translateY(calc(100% - 80px)); /* Collapsed: shows only CTA */
        transition: transform var(--transition-base);
    }

    /* Expanded sidebar (class toggled by JS) */
    .wizard-sidebar.is-expanded {
        transform: translateY(0);
    }

    /* Hide large poster in mobile sidebar */
    .wizard-sidebar__poster {
        display: none;
    }

    /* Add drag handle at top of mobile sidebar */
    .wizard-sidebar::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: var(--radius-pill);
        margin: var(--space-3) auto var(--space-2);
    }

    /* Main content: add bottom padding to avoid sidebar overlap */
    .wizard-main {
        padding-bottom: 100px; /* clearance for collapsed sidebar */
    }

    /* Step content: reduce padding */
    .wizard-step-content {
        padding: var(--space-6) var(--space-4);
    }

    /* Room controls: single column */
    .room-block__controls {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .room-block {
        padding: var(--space-5);
    }

    /* Checkout form: single column */
    .checkout-form {
        grid-template-columns: 1fr;
    }

    .checkout-form__full {
        grid-column: 1;
    }

    /* Stepper: 3 small diamonds only */
    .wizard-stepper {
        padding: var(--space-5) var(--space-4) var(--space-4);
    }

    .wizard-stepper__list {
        gap: var(--space-2);
    }

    /* ── Hotel cards on event page ────────────────────────────────────────── */

    .hotels-grid {
        grid-template-columns: 1fr;
    }

    /* ── Single event page ────────────────────────────────────────────────── */

    /* Shorter hero on mobile */
    .event-hero {
        min-height: 55vh;
    }

    .event-hero__title {
        font-size: clamp(var(--text-2xl), 9vw, var(--text-4xl));
    }

    .event-hero__cta-row .btn {
        width: 100%;
        text-align: center;
    }

    /* Show sticky bottom CTA on mobile so the buy button is always visible */
    .event-sticky-cta {
        display: block;
    }

    /* Add padding so content isn't hidden behind sticky CTA */
    .single-event .event-hotels {
        padding-bottom: calc(var(--space-24) + 72px);
    }

    /* ── Add-on cards ─────────────────────────────────────────────────────── */

    .addons-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BELOW 480px — SMALL MOBILE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {

    /* Even tighter section headings */
    .section-heading__title {
        font-size: clamp(var(--text-2xl), 16vw, var(--text-4xl));
    }

    /* Buttons full-width in very small screens */
    .btn--full-mobile {
        width: 100%;
    }

    /* Wizard sidebar body less padding */
    .wizard-sidebar__body {
        padding: var(--space-4);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {

    /* Show light backgrounds for readability */
    body {
        background: #fff;
        color: #000;
    }

    /* Hide navigation, CTAs, wizard UI on print */
    .site-header,
    .site-footer,
    .filter-bar,
    .menu-toggle,
    .wizard-sidebar__cta {
        display: none !important;
    }

    /* Wizard sidebar: always visible for order summary printing */
    .wizard-sidebar {
        position: static !important;
        box-shadow: none !important;
        border: 1px solid #ddd;
        transform: none !important;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
        font-size: 0.8em;
        color: #555;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION (Accessibility)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}