/**
 * Container System
 * Responsive container variations based on design system
 * 
 * @package Ashrey_Natural
 * @version 1.0.0
 */

/* ========================================
   Base Container
   ======================================== */
.container {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

/* ========================================
   Container Variations
   ======================================== */
.container-fluid {
    width: 100%;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.container-narrow {
    width: 100%;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.container-wide {
    width: 100%;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
}

.container-full {
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

/* ========================================
   Content Width Controls
   ======================================== */
.content-width-xs {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

.content-width-sm {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.content-width-md {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

.content-width-lg {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
}

.content-width-xl {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   Section Spacing
   ======================================== */
.section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
}

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

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

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

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

/* ========================================
   Responsive Container Padding - Tablet
   ======================================== */
@media (max-width: 1024px) {
    .container,
    .container-fluid,
    .container-narrow,
    .container-wide {
        padding-left: var(--spacing-md);
        padding-right: var(--spacing-md);
    }
    
    .section {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
    
    .section-lg {
        padding-top: var(--spacing-2xl);
        padding-bottom: var(--spacing-2xl);
    }
}

/* ========================================
   Responsive Container Padding - Mobile
   ======================================== */
@media (max-width: 768px) {
    .container,
    .container-fluid,
    .container-narrow,
    .container-wide {
        padding-left: var(--spacing-sm);
        padding-right: var(--spacing-sm);
    }
    
    .section {
        padding-top: var(--spacing-lg);
        padding-bottom: var(--spacing-lg);
    }
    
    .section-sm {
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }
    
    .section-lg {
        padding-top: var(--spacing-xl);
        padding-bottom: var(--spacing-xl);
    }
}

/* ========================================
   RTL Support
   ======================================== */
[dir="rtl"] .container,
[dir="rtl"] .container-fluid,
[dir="rtl"] .container-narrow,
[dir="rtl"] .container-wide {
    /* Padding already symmetric, no changes needed */
    direction: rtl;
}