/* Layout grid, day headers, infinite-scroll sentinel, responsive @media
   (the map's own rules, the phone map view included, are in map.css). 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. */

/* 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%;
}

/* Day headers: the day name in Display 22px 800 sentence case, the date in
   secondary text and "N sessions" right-aligned (DESIGN.md > Session row >
   Grouping). They stick inside the list pane on desktop; band.css makes
   them scroll with the list on the phone. */
.date-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  gap: var(--spacing-sm);
  padding: 18px 4px var(--spacing-sm);
  background: var(--color-bg);
}
.date-group:first-child .date-header,
.earlier-loader + .date-group .date-header {
  padding-top: var(--spacing-sm);
}
.date-header-day {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--color-boards);
}
.date-header-date {
  font-size: 13.5px;
  color: var(--color-text-secondary);
}
.date-header-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* 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);
}

/* Responsive */
@media (max-width: 1023px) {
  .main-layout {
    flex-direction: column;
    height: auto;
  }
  .session-list-container {
    height: auto;
    overflow-y: visible;
  }
}

@media (max-width: 767px) {
  /* The band's padding is the band grid's alone (band.css); a padding on
     .site-header here doubled it and squeezed the location pill
     (x-listing-ui2 > band.bar). */
  .site-header h1 {
    font-size: var(--font-size-lg);
  }
  .session-list-container {
    padding: var(--spacing-md) var(--spacing-lg);
  }
  /* The session row's mobile overrides live at the end of components.css,
     after their base rules, so they win the cascade. */
}