/* ========================================
   CONTAINER & WRAPPER LAYOUTS
   ======================================== */

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

/* Narrow container for content-focused sections */
.container-narrow {
  width: 100%;
  max-width: var(--container-narrow-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* Full width container */
.container-fluid {
  width: 100%;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

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

.section-sm {
  padding-top: var(--spacing-8);
  padding-bottom: var(--spacing-8);
}

.section-lg {
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-16);
}

.section-xl {
  padding-top: var(--spacing-20);
  padding-bottom: var(--spacing-20);
}

/* No padding sections */
.section-flush {
  padding-top: 0;
  padding-bottom: 0;
}

/* Background variants */
.section-bg-primary {
  background-color: var(--color-primary);
  color: white;
}

.section-bg-secondary {
  background-color: var(--color-background-secondary);
}

.section-bg-tertiary {
  background-color: var(--color-background-tertiary);
}

/* Content wrapper for centered content */
.content-wrapper {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section {
    padding-top: var(--spacing-8);
    padding-bottom: var(--spacing-8);
  }
  
  .section-lg {
    padding-top: var(--spacing-12);
    padding-bottom: var(--spacing-12);
  }
  
  .section-xl {
    padding-top: var(--spacing-16);
    padding-bottom: var(--spacing-16);
  }
}