/*
    Shared index-filter visibility.
    768px and below uses the Mobile list. 769px and above uses the Desktop list.
    Classes are added only on index-filter items, so theme styling stays intact.
*/

@media (max-width: 768px) {
    .index-filter-desktop-only {
        display: none !important;
    }
}

@media (min-width: 769px) {
    .index-filter-mobile-only {
        display: none !important;
    }
}

.index-filter-hidden {
    display: none !important;
}

.index-filter-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

/* Themes that place filters in one row from the large breakpoint. */
@media (min-width: 769px) {
    .index-filter-grid {
        grid-template-columns: repeat(var(--index-filter-md-cols, 2), minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .index-filter-grid:not(.index-filter-grid--pair):not(.index-filter-grid--theme17) {
        grid-template-columns: repeat(var(--index-filter-cols, 6), minmax(0, 1fr));
    }
}

/* Themes that stay at two columns on desktop. */
@media (min-width: 769px) {
    .index-filter-grid--pair {
        grid-template-columns: repeat(var(--index-filter-md-cols, 2), minmax(0, 1fr));
    }
}

/* Theme 17: one column on small phones, two on wider phones, three from 769px, one row from 1280px. */
.index-filter-grid--theme17 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 640px) and (max-width: 768px) {
    .index-filter-grid--theme17 {
        grid-template-columns: repeat(var(--index-filter-mobile-sm, 2), minmax(0, 1fr));
    }
}

@media (min-width: 769px) {
    .index-filter-grid--theme17 {
        grid-template-columns: repeat(var(--index-filter-desktop-md, 3), minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .index-filter-grid--theme17 {
        grid-template-columns: repeat(var(--index-filter-cols, 7), minmax(0, 1fr));
    }
}