/* ═══════════════════════════════════════════════════════════════════
 * Desktop Filters Collapsible
 *
 * On desktop (>768px), the .sort-filter-bar collapses to just the
 * toggle button by default. Clicking the button reveals all filter
 * sections. Mobile behavior is handled in components/mobile.css and is
 * untouched.
 *
 * Driven by frontend/js/mobile_filters.js — the same script handles
 * both viewports. Class `.mobile-expanded` is reused on desktop too
 * (semantic name kept for backwards-compat with existing JS/CSS).
 * ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {

    /* The bar itself: stack toggle button + (when expanded) sections. */
    .sort-filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm, 8px);
        padding: 8px 12px;
    }

    /* Show the toggle button on desktop too. */
    .sort-filter-bar .mobile-filters-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 8px 14px;
        background: linear-gradient(135deg, #6366f1, #8b5cf6);
        color: #fff;
        border: none;
        border-radius: 8px;
        font-family: inherit;
        font-weight: 700;
        font-size: 0.85rem;
        cursor: pointer;
        min-height: 38px;
        transition: filter 0.15s ease, transform 0.08s ease;
    }

    .sort-filter-bar .mobile-filters-toggle:hover {
        filter: brightness(1.08);
    }

    .sort-filter-bar .mobile-filters-toggle:active {
        transform: scale(0.99);
        filter: brightness(0.95);
    }

    .sort-filter-bar.mobile-expanded .mobile-filters-toggle {
        background: linear-gradient(135deg, #ef4444, #dc2626);
    }

    .mft-caret {
        margin-inline-start: auto;
        font-size: 0.85rem;
        opacity: 0.85;
    }

    /* Collapsed by default: hide all filter/sort sections + the divider. */
    .sort-filter-bar > .sort-section,
    .sort-filter-bar > .filter-section,
    .sort-filter-bar > .sort-divider {
        display: none;
    }

    /* Expanded: show them back, using the original desktop layout
       (horizontal flex with wrap). */
    .sort-filter-bar.mobile-expanded > .sort-section,
    .sort-filter-bar.mobile-expanded > .filter-section {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
    }

    .sort-filter-bar.mobile-expanded > .sort-divider {
        display: block;
        width: 100%;
        height: 1px;
        background: var(--border-strong);
        margin: 4px 0;
    }
}