/*
 * Structural layout primitives. Theme-neutral.
 */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.container--narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-block: var(--space-9);
}

.section--tight {
  padding-block: var(--space-7);
}

.section--hero {
  padding-block: var(--space-10) var(--space-9);
  position: relative;
  overflow: hidden;
}

.section--dark {
  background: var(--surface-board-dark);
  color: var(--text-on-dark);
}

.section--light {
  background: var(--surface-ivory);
  color: var(--text-on-light);
}

.section--alt {
  background: var(--surface-ivory-alt);
  color: var(--text-on-light);
}

.stack > * + * {
  margin-top: var(--space-4);
}

.stack--lg > * + * {
  margin-top: var(--space-6);
}

.grid {
  display: grid;
  gap: var(--space-5);
}

.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.grid--videos {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .grid--videos { grid-template-columns: repeat(3, 1fr); }
}

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.flow > * + * {
  margin-top: var(--space-4);
}

.center-text {
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--brand-orange);
  margin-bottom: var(--space-3);
}

.section--dark .eyebrow {
  color: var(--brand-sky);
}

.section-title {
  font-size: var(--text-h2);
  margin-bottom: var(--space-3);
}

.section-lede {
  max-width: 58ch;
  color: var(--text-on-light-muted);
  font-size: calc(var(--text-body) * 1.1);
}

.section--dark .section-lede {
  color: var(--text-on-dark-muted);
}