/**
 * @file
 * Layout utilities — container, sections, grid helpers.
 */

/* ── Main content background ── */
#main-content {
  background: var(--color-surface);
}

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

/* ── Sections ── */
.section {
  padding-block: var(--section-space-lg);
}

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

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

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

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

/* ── Section backgrounds ── */
.section--cream {
  background: var(--color-background);
}

.section--warm {
  background: var(--color-background-alt);
}

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

/* ── Section header ── */
.section__header {
  text-align: center;
  margin-bottom: var(--space-5xl);
}

.section__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-h2);
}

.section__subtitle {
  margin-top: var(--space-base);
  font-size: var(--font-size-body-lg);
  color: var(--color-text-secondary);
}

/* ── Grid utilities ── */
.grid {
  display: grid;
  gap: var(--grid-gap-md);
}

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

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

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

/* ── Two-column layout ── */
.layout-two-col {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: var(--grid-gap-lg);
  align-items: start;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .layout-two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  :root {
    --page-gutter: var(--page-gutter-mobile);
  }

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

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

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