/* Filters page specific styles — minimal and complementary to base.css */

.filters-hero { padding-block: var(--space-16) var(--space-12); }
.hero-grid { display: grid; gap: var(--space-8); grid-template-columns: 1.2fr 1fr; align-items: center; }
.hero-copy .hero-cta { margin-top: var(--space-4); display: flex; gap: var(--space-3); flex-wrap: wrap; }
.hero-media { min-height: 260px; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } .hero-media { order: -1; } }

.filters-search { margin-top: var(--space-4); }

.filters-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-4); }
@media (max-width: 1200px) { .filters-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 920px) { .filters-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .filters-grid { grid-template-columns: 1fr; } }

.filter-list { display: grid; gap: 10px; margin-top: var(--space-3); }
.filter-item[hidden] { display: none !important; }
.category-card[hidden] { display: none !important; }

.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }

.advanced-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 920px) { .advanced-grid { grid-template-columns: 1fr; } }

.settings-grid { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.settings-actions { grid-column: 1 / -1; display: flex; gap: var(--space-3); margin-top: var(--space-2); }
@media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } }

.tips-list, .updates-list { display: grid; gap: 10px; }

.extra-media { margin: 43px 0; margin-top: var(--space-6); min-height: 200px; }

/* Tweak details summary for clearer affordance */
details > summary { cursor: pointer; padding: 8px 0; list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* Range alignment */
input[type=range] { width: 100%; }