/* ─── Container ─── */
.container {
  max-width: var(--container-max);
  padding-inline: var(--container-padding);
  margin-inline: auto;
  width: 100%;
}

/* ─── Section base ─── */
.section {
  padding-block: var(--space-xl);
}

.section--lg {
  padding-block: var(--space-2xl);
}

/* ─── Grid systems — mobile-first (1fr default, expanded in responsive.css) ─── */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* ─── Asymmetric layouts — stack on mobile ─── */
.grid-60-40 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

.grid-40-60 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: start;
}

/* ─── Flex utilities ─── */
.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col     { display: flex; flex-direction: column; }
.gap-sm       { gap: var(--space-sm); }
.gap-md       { gap: var(--space-md); }
.gap-lg       { gap: var(--space-lg); }

/* ─── Section header ─── */
.section-header {
  margin-bottom: var(--space-lg);
}

.section-label {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent-primary);
  margin-bottom: var(--space-xs);
}