/* ── RESPONSIVE STYLES ───────────────────────────────────────── */



/* Tablet (768px to 1199px) */
@media (max-width: 1199px) {
    :root {
        --font-h1: 32px;
        --font-h2: 24px;
        --font-h3: 20px;
    }

    .page-wrap {
        padding: var(--space-2);
        gap: var(--space-3);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .featured-section .section-title {
        font-size: 28px;
    }

    .quick-filters-bar {
        flex-wrap: wrap;
        gap: 10px;
    }

    .filter-select-wrap,
    .filter-search-wrap {
        flex: 1 1 calc(33.33% - 10px);
        max-width: none;
    }

    #locationMultiSelectWrap .multi-select-dropdown {
        right: 0;
        left: auto;
    }

    .quick-filters-bar .sort-wrap {
        margin-left: 0;
    }

    .quick-filters-bar .btn-secondary#resetQuickFilters {
        flex: 1 1 100%;
        justify-content: center;
    }

    
    .tour-grid[data-view="list"] .tour-card-thumb-wrap {
        width: 150px;
    }
}

/* Mobile (Below 768px) */
@media (max-width: 767px) {
    :root {
        --font-h1: 24px;
        --font-h2: 20px;
        --font-h3: 18px;
        --font-body: 14px;
        --font-small: 13px;
        --header-height: 60px;
    }

    .featured-section .section-title {
        font-size: 24px;
    }



    .header-brand .header-title {
        font-size: var(--font-h3);
    }

    .header-logo {
        height: 28px;
    }

    .header-search-wrap {
        display: none; /* Hide global search in header on mobile */
    }



    /* Stats Section on Mobile - Slide Carousel list */
    .stats-grid {
        display: flex;
        overflow-x: auto;
        gap: var(--space-2);
        padding-bottom: var(--space-1);
        scrollbar-width: none; /* Firefox */
    }

    .stats-grid::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

    .stat-card {
        flex: 0 0 160px;
        scroll-snap-align: start;
    }


    /* Featured section: Carousel behavior */
    .featured-grid {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        padding: 8px 16px;
        margin: 0 -16px;
        scrollbar-width: none;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .featured-grid::-webkit-scrollbar {
        display: none;
    }

    .featured-card {
        flex: 0 0 290px;
        scroll-snap-align: start;
        height: auto;
    }

    .featured-title {
        font-size: var(--font-body);
    }

    .featured-desc {
        font-size: var(--font-xs);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Grid Toolbar adjustments */
    .grid-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .quick-filters-bar {
        flex-wrap: wrap;
        padding: 8px;
        gap: 8px;
    }

    .filter-select-wrap {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        max-width: none;
    }

    .multi-select-dropdown {
        min-width: 200px;
        max-width: 260px;
        width: auto;
    }

    #categoryMultiSelectWrap .multi-select-dropdown {
        left: 0;
        right: auto;
    }

    #locationMultiSelectWrap .multi-select-dropdown {
        right: 0;
        left: auto;
    }

    .filter-search-wrap {
        flex: 1 1 100%;
    }

    .quick-filters-bar .sort-wrap {
        margin-left: 0;
        flex: 1 1 calc(50% - 4px);
    }

    .quick-filters-bar .btn-secondary {
        flex: 1 1 100%;
        text-align: center;
    }

    /* Card Grid to 1-column on mobile */
    .tour-grid[data-view="grid"], 
    .tour-grid[data-view="compact"] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    /* List View card remains horizontal row on mobile */
    .tour-grid[data-view="list"] .tour-card {
        flex-direction: row;
        height: 120px;
        align-items: center;
        gap: 12px;
        padding: 8px;
    }

    .tour-grid[data-view="list"] .tour-card-thumb-wrap {
        width: 110px;
        height: 104px;
        flex-shrink: 0;
        border-radius: 8px;
        overflow: hidden;
    }

    .tour-grid[data-view="list"] .tour-card-thumb-wrap .card-badges-float {
        display: none; /* Hide floating badges to keep the 110px thumbnail clean */
    }

    .tour-grid[data-view="list"] .tour-card-thumb-wrap .favorite-toggle-btn {
        width: 24px;
        height: 24px;
        right: 4px;
        top: 4px;
    }

    .tour-grid[data-view="list"] .tour-card-thumb-wrap .favorite-toggle-btn svg {
        width: 12px;
        height: 12px;
    }

    .tour-grid[data-view="list"] .tour-card-body {
        flex: 1;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        height: 104px;
        padding: 0 4px 0 0;
        gap: 4px;
        min-width: 0; /* Prevents text overflow */
    }

    .tour-grid[data-view="list"] .tour-info-main {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-width: 0;
        width: 100%;
    }

    .tour-grid[data-view="list"] .tour-card-title {
        font-size: 13px;
        font-weight: 600;
        line-height: 1.3;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
    }

    .tour-grid[data-view="list"] .tour-card-client {
        font-size: 10px;
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: 0.5px;
    }

    .tour-grid[data-view="list"] .tour-card-loc {
        font-size: 10px;
        color: var(--c-text-secondary);
        display: flex;
        align-items: center;
        gap: 2px;
    }

    .tour-grid[data-view="list"] .card-action-bar {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: auto;
        border-top: none;
        padding-top: 0;
    }

    .tour-grid[data-view="list"] .card-action-bar .btn-primary {
        padding: 5px 10px;
        font-size: 10px;
        border-radius: var(--r-input);
        height: 28px;
        line-height: 1;
    }

    .tour-grid[data-view="list"] .card-action-bar .card-icon-actions {
        display: flex;
        gap: 4px;
    }

    .tour-grid[data-view="list"] .card-action-bar .btn-icon {
        width: 28px;
        height: 28px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .tour-grid[data-view="list"] .card-action-bar .btn-icon svg {
        width: 14px;
        height: 14px;
    }

    /* Bottom Sheet Filter Panel for Mobile */
    .filter-panel {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 80vh;
        border-left: none;
        border-top: 1px solid var(--c-border);
        border-radius: var(--r-card) var(--r-card) 0 0;
        transform: translateY(100%);
    }

    .filter-panel.open {
        transform: translateY(0);
    }

    /* Fullscreen Modal overlay on Mobile */
    .tour-modal {
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .modal-content {
        width: 100%;
        height: 100dvh;
        border-radius: 0;
        border: none;
    }

    .close-modal {
        width: 44px;
        height: 44px;
        top: calc(10px + env(safe-area-inset-top, 0px));
        right: 10px;
        background: rgba(15, 23, 42, 0.75);
    }

    .modal-info {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom, 12px)) var(--space-2);
    }

    .tour-modal-info h3 {
        font-size: var(--font-body);
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .external-link-btn {
        width: 100%;
        justify-content: center;
        padding: 12px;
    }

    /* Ensure touch targets are at least 44px */
    .ctrl-btn, .modal-action-btn, .view-btn, .filter-close, #modalClose {
        min-height: 44px;
        min-width: 44px;
    }
}