/* === Container System === */

/* Base container class - 1280px minimum for all text content */
.container {
    max-width: var(--container-xl); /* 1280px */
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Container variants */
.container-sm {
    max-width: var(--container-sm);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-md {
    max-width: var(--container-md);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-lg {
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-xl {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-2xl {
    max-width: var(--container-2xl);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-3xl {
    max-width: var(--container-3xl);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--space-lg);
}

/* === Full-Bleed Background System === */

/* Full-bleed wrapper for sections with backgrounds */
.section-full-bleed {
    width: 100%;
    position: relative;
}

/* Hero sections with full-bleed backgrounds */
.hero-section {
    width: 100%;
    position: relative;
    background: var(--gradient-primary);
    color: var(--text-inverse);
}

.hero-section .container {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-lg);
}

/* Section layouts */
.section {
    padding: var(--space-3xl) 0;
}

.section-content {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

/* Background variants for full-bleed sections */
.section-bg-light {
    background-color: var(--bg-secondary);
    width: 100%;
    position: relative;
}

.section-bg-dark {
    background-color: var(--bg-dark);
    color: var(--text-inverse);
    width: 100%;
    position: relative;
}

.section-bg-gradient {
    background: var(--gradient-subtle);
    width: 100%;
    position: relative;
}

/* === Responsive Container Behavior === */

@media (max-width: 480px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-2xl,
    .container-3xl,
    .container-fluid {
        padding: 0 var(--space-md);
    }
    
    .section-content {
        padding: 0 var(--space-md);
    }
    
    .hero-section .container {
        padding: var(--space-2xl) var(--space-md);
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    .container,
    .container-md,
    .container-lg,
    .container-xl,
    .container-2xl,
    .container-3xl {
        padding: 0 var(--space-lg);
    }
    
    .section-content {
        padding: 0 var(--space-lg);
    }
    
    .hero-section .container {
        padding: var(--space-3xl) var(--space-lg);
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .container,
    .container-lg,
    .container-xl,
    .container-2xl,
    .container-3xl {
        padding: 0 var(--space-xl);
    }
    
    .section-content {
        padding: 0 var(--space-xl);
    }
}

@media (min-width: 1201px) {
    .container,
    .container-xl,
    .container-2xl,
    .container-3xl {
        padding: 0 var(--space-2xl);
    }
    
    .section-content {
        padding: 0 var(--space-2xl);
    }
}

/* === Content Width Enforcement === */
/* Ensure all text content has minimum 1280px constraint on large screens */
@media (min-width: 1400px) {
    .section-content,
    .container {
        min-width: 1280px;
    }
}

/* === Layout Utilities === */
.full-width {
    width: 100%;
}

.max-content {
    width: max-content;
}

.min-content {
    width: min-content;
}

/* Center alignment utilities */
.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}