/* Layout Utilities — Container, Grid, Flexbox, Sections */

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

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

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

/* Page Sections */
.section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

.section--sm {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

.section--lg {
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
}

.section--gray {
  background-color: var(--color-off-white);
}

.section--blue {
  background-color: var(--color-primary);
  color: var(--color-text-light);
}

.section--blue .section-title,
.section--blue .section-label,
.section--blue p {
  color: var(--color-text-light);
}

.section--blue .section-label {
  opacity: 0.85;
}

.section--dark {
  background-color: var(--color-text);
  color: var(--color-text-light);
}

.section--dark .section-title,
.section--dark .section-label,
.section--dark p {
  color: var(--color-text-light);
}

/* Grid System */
.grid {
  display: grid;
  gap: var(--space-8);
}

.grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Flexbox Utilities */
.flex {
  display: flex;
}

.flex--col { flex-direction: column; }
.flex--wrap { flex-wrap: wrap; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { justify-content: space-between; }
.flex--align-center { align-items: center; }
.flex--gap-2 { gap: var(--space-2); }
.flex--gap-4 { gap: var(--space-4); }
.flex--gap-6 { gap: var(--space-6); }
.flex--gap-8 { gap: var(--space-8); }

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Main content offset for sticky header */
main {
  padding-top: var(--header-height);
}