/* ============================================================================
 * EXPO BOOTH RESERVATION PAGE — MOBILE RESPONSIVE OVERRIDES
 * Always loaded alongside expo-booths.css.
 * All rules scoped under .expo-booths-page for specificity.
 * ============================================================================ */

/* --- Tablet (max-width: 900px) --- */
@media (max-width: 900px) {
    /* Sidebar collapses full-width above the booth grid */
    .expo-booths-page {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem 0;
    }

    .expo-booths-page.search-right {
        flex-direction: column;
    }

    .expo-booths-page .expo-booths-sidebar {
        flex: none;
        position: static;
        width: 100%;
        margin-top: 0;
    }

    /* Package filters flow like chips; each accordion block keeps full width
       so the expanded items stay readable (agenda category scheme) */
    .expo-booths-page .expo-booths-package-filters {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .expo-booths-page .expo-booths-filter-package {
        width: 100%;
        margin-top: 0.25rem;
    }

    .expo-booths-page .expo-booths-filter-item {
        border-right: none;
        border-bottom: 3px solid transparent;
        padding: 0.375rem 0.5rem;
    }

    /* Section headers slightly tighter on tablet */
    .expo-booths-page .expo-booths-section-header {
        margin: 1rem auto 0.5rem;
    }

    .expo-booths-page .expo-booths-cards {
        justify-content: center;
    }
}

/* --- Mobile (max-width: 768px) --- */
@media (max-width: 768px) {
    .expo-booths-page {
        padding: 0.75rem 0;
    }

    /* Booth cards go full-width on mobile */
    .expo-booths-page .expo-booths-card {
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    /* Booth name smaller */
    .expo-booths-page .expo-booths-card-name {
        font-size: 1.05rem;
    }

    /* Filter panel full width */
    .expo-booths-page .expo-booths-sidebar-inner {
        padding: 1rem;
        border-radius: 8px;
    }

    /* Section headers compact on mobile */
    .expo-booths-page .expo-booths-section-header {
        margin: 0.75rem auto 0.375rem;
        padding: 0.2rem 0.625rem;
    }

    /* No hover lift on touch screens */
    .expo-booths-page .expo-booths-card.free:hover {
        transform: none;
    }

    /* Booking flow: postal/town/province stack on mobile */
    .expo-booths-page .expo-booth-form-row {
        grid-template-columns: 1fr;
    }
}

/* --- Small Mobile (max-width: 480px) --- */
@media (max-width: 480px) {
    /* Tighter card padding */
    .expo-booths-page .expo-booths-card {
        padding: 0.875rem;
        border-radius: 8px;
    }

    /* Smaller status chip */
    .expo-booths-page .expo-booths-card-status {
        font-size: 0.625rem;
        padding: 0.125rem 0.375rem;
    }

    /* Section headers minimal on small screens */
    .expo-booths-page .expo-booths-section-header {
        margin: 0.5rem auto 0.25rem;
        padding: 0.2rem 0.5rem;
        font-size: 0.65rem;
    }

    /* Occupant row compact */
    .expo-booths-page .expo-booths-card-occupant-logo {
        width: 24px;
        height: 24px;
    }
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .expo-booths-page .expo-booths-card,
    .expo-booths-page .expo-booths-filter-item,
    .expo-booths-page .expo-booths-filter-expand,
    .expo-booths-page .expo-booths-filter-chevron,
    .expo-booths-page .expo-booths-filter-clear {
        transition: none;
    }

    .expo-booths-page .expo-booths-card.free:hover {
        transform: none;
    }
}