/* =============================================================================
   halls.css — listing/search page layout
   ============================================================================= */

.halls-header { background: var(--color-blush); padding: var(--space-lg) 0; }
.halls-header h1 { font-size: 1.9rem; }
.halls-layout { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-lg); align-items: start; padding: var(--space-xl) 0; }
.filters-panel { position: sticky; top: calc(var(--header-height) + var(--space-md)); }
.results-count { font-family: var(--font-mono); font-size: 0.85rem; color: var(--color-taupe); }
.hall-results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.hall-results-grid.list-mode { display: block; }
.load-more-wrap { text-align: center; margin-top: var(--space-lg); }
.mobile-filter-trigger { display: none; }

/* The mobile filter drawer's backdrop must be taken out of normal/grid flow
   at all viewport widths (not just under the mobile breakpoint) — otherwise
   it becomes an unintended third item in the 2-column .halls-layout grid on
   desktop, shoving the filters panel and results grid into the wrong
   columns. It only ever becomes visible via JS when the mobile "Filters"
   button is used, so it's safe to always float above the page like this. */
.filters-overlay { position: fixed; inset: 0; background: rgba(42, 36, 32, 0.5); z-index: 1240; display: none; }
.filters-overlay.show { display: block; }

@media (max-width: 1080px) {
  .hall-results-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .halls-layout { grid-template-columns: 1fr; }
  .mobile-filter-trigger { display: inline-flex; }
  .filters-panel {
    position: fixed; inset: 0 0 0 auto; width: min(340px, 88vw); z-index: 1250;
    border-radius: 0; overflow-y: auto; transform: translateX(100%); transition: transform 0.25s ease;
  }
  .filters-panel.filters-panel--open { transform: translateX(0); }
}
@media (max-width: 600px) {
  .hall-results-grid { grid-template-columns: 1fr; }
}