/* === Container === */
.container {
  width: 100%;
  max-inline-size: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--space-8);
  }
}

@media (min-width: 1200px) {
  .container {
    padding-inline: var(--space-12);
  }
}

/* === Sections === */
.section {
  padding-block: var(--section-padding-block-mobile);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--section-padding-block);
  }
}

/* Alternating section backgrounds for visual rhythm */
.section:nth-child(even) {
  background-color: var(--color-bg-section-alt);
}

/* Hero section gets extra padding to account for sticky nav */
.section--hero {
  padding-block-start: calc(var(--nav-height) + var(--space-12));
  min-block-size: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
}

/* === Grid utilities for future use === */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid--2 {
  grid-template-columns: 1fr;
}

.grid--3 {
  grid-template-columns: 1fr;
}

.grid--4 {
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* === Text alignment utilities === */
.text-center { text-align: center; }
.text-start  { text-align: start; }
.text-end    { text-align: end; }

/* === Spacing utilities === */
.mb-4 { margin-block-end: var(--space-4); }
.mb-6 { margin-block-end: var(--space-6); }
.mb-8 { margin-block-end: var(--space-8); }