/* Layout grid, sticky elements, infinite-scroll sentinel, mobile map toggle,
   responsive @media. Extracted from arenas/templates/arenas/base.html on
   2026-05-03. The site-wide responsive @media blocks live here even though
   they include a few chrome and component selector overrides — keeping the
   @media intact preserves cascade behavior and avoids duplication. */

/* Prevent body scroll when sheet is open */
body.sheet-open {
  overflow: hidden;
}

/* Main layout */
.main-layout {
  display: flex;
  gap: 0;
  min-height: calc(100vh - 120px);
}
.session-list-container {
  flex: 1;
  padding: var(--spacing-lg) var(--spacing-xl);
}
.map-container {
  width: 42%;
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
  isolation: isolate;
}
.map-container #map {
  width: 100%;
  height: 100%;
}

/* Date group headers */
.date-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-bg);
  padding: var(--spacing-sm) 0;
  margin-top: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-rink-blue);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.date-header:first-child {
  margin-top: 0;
}

/* Infinite scroll */
.scroll-sentinel {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.empty-state {
  text-align: center;
  padding: 60px var(--spacing-xl);
  color: var(--color-text-muted);
}

/* Locate-me button */
.locate-btn:hover { background: #f4f4f4 !important; }

/* Map toggle (mobile) — lives in .filter-bar, right side, same styling as .filters-trigger */
.map-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 7px 12px;
  background: var(--color-accent-light);
  color: var(--color-accent-hover);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.map-toggle:hover {
  background: var(--color-accent);
  color: #fff;
}
.map-toggle-icon {
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1023px) {
  .main-layout {
    flex-direction: column;
    height: auto;
  }
  .map-container {
    width: 100%;
    height: 300px;
    position: relative;
    order: -1;
  }
  .map-container.collapsed {
    display: none;
  }
  .map-toggle {
    display: inline-flex;
  }
  .session-list-container {
    height: auto;
    overflow-y: visible;
  }
}

@media (max-width: 767px) {
  .site-header {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  .site-header h1 {
    font-size: var(--font-size-lg);
  }
  .filter-bar {
    padding: var(--spacing-sm) var(--spacing-lg);
  }
  .session-list-container {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  /* Note: .session-card padding and .card-details gap mobile overrides
     live at the end of components.css. Their base rules are in
     components.css (loaded 5th), so a same-specificity override in
     layout.css (loaded 3rd) would lose the cascade and the mobile
     padding would be dead. Keeping the override in the same file as
     the base rule (later in source order within that file) is the
     simplest cascade-safe fix. */
}