/* Layout primitives — container, section, grid */

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

section {
  padding-block: var(--section-py);
  position: relative;
}

.section--tight { padding-block: clamp(40px, 6vw, 80px); }

.stack > * + * { margin-top: var(--space-5); }
.stack--sm > * + * { margin-top: var(--space-3); }
.stack--lg > * + * { margin-top: var(--space-7); }

.center { text-align: center; }
.measure { max-width: 680px; margin-inline: auto; }
.measure--wide { max-width: 820px; margin-inline: auto; }
.measure--narrow { max-width: 560px; margin-inline: auto; }

.grid {
  display: grid;
  gap: var(--space-6);
}
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Section surface variants */
.surface { background: var(--bg-secondary); }
.surface--soft { background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%); }
.divider-top { border-top: 1px solid var(--border-soft); }
.divider-bottom { border-bottom: 1px solid var(--border-soft); }