/* ==========================================================================
   Layout — Container, grid, section spacing
   ========================================================================== */

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

/* Section spacing */
.section {
  padding-top: var(--space-64);
  padding-bottom: var(--space-64);
}

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

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

/* Background variants */
.section-tinted {
  background: var(--gradient-section);
}

.section-blue {
  background-color: var(--cci-blue-100);
}

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

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

/* Two-column with sidebar */
.grid-content-sidebar {
  display: grid;
  gap: var(--space-48);
  grid-template-columns: 1fr;
}