/* Rush EM — Layout primitives: containers, sections, grids. */

.container,
.container--wide {
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter-x);
}
.container--narrow { max-width: var(--container-narrow); }
.container--text   { max-width: var(--container-text); }
.container--bleed  { max-width: 100%; padding-inline: 0; }

/* Vertical rhythm */
.section {
  padding-block: var(--space-7);
}
.section--lg { padding-block: var(--space-8); }
.section--xl { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-5); }

.section + .section { border-top: 1px solid var(--color-hairline); }
.section--no-rule + .section,
.section + .section--no-rule { border-top: none; }

/* Surface variants */
.surface-1 { background: var(--color-surface-1s); }
.surface-2 { background: var(--color-surface-2); }

/* Stacks (vertical rhythm utilities) */
.stack > * + * { margin-top: var(--space-3); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-5); }
.stack-xl > * + * { margin-top: var(--space-7); }

/* Cluster (horizontal flex with wrap) */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Grids */
.grid {
  display: grid;
  gap: var(--space-5);
}
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* 12-col asymmetric (for "program at-a-glance" style sections) */
.grid-12 {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(12, 1fr);
}
.grid-12 > .col-7 { grid-column: span 12; }
.grid-12 > .col-5 { grid-column: span 12; }
@media (min-width: 900px) {
  .grid-12 > .col-7 { grid-column: span 7; }
  .grid-12 > .col-5 { grid-column: span 5; }
}

/* Full-bleed (escapes container, useful for image breaks) */
.bleed {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

/* Aspect-ratio helpers */
.aspect-16-9  { aspect-ratio: 16 / 9; }
.aspect-4-3   { aspect-ratio: 4 / 3; }
.aspect-1-1   { aspect-ratio: 1 / 1; }
.aspect-3-4   { aspect-ratio: 3 / 4; }

/* Cover media inside aspect boxes */
.media-cover { width: 100%; height: 100%; object-fit: cover; }