/* =========================================================
   STADIUM DAYLIGHT — page layout helpers
   Source of truth: DESIGN.md §"Layout"
   Canonical reference: /design-system (app/views/design_system/index.html.erb)
   Breakpoints match PRD §"Responsive grid behavior".
   ========================================================= */

.page {
  width: 100%;
  padding: var(--space-md);
}
@media (min-width: 640px)  { .page { padding: var(--space-lg); } }
@media (min-width: 1024px) { .page { padding: var(--space-xl); } }

.section {
  width: 100%;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  border-top: 1px solid var(--border);
}
.section:first-child { border-top: 0; padding-top: var(--space-lg); }

.section-header {
  margin-bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 80ch;
}
.section-header p { margin: 0; color: var(--slate); }

.cols {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}