/**
 * Container System
 * Centralized max-width containers with responsive padding
 * Implements specifications from TECHTRONIC_DESIGN_SYSTEM.md Section 4
 *
 * @package Techtronic_Learning
 * @since 1.0.0
 */

/* ==========================================================================
   Base Container
   ========================================================================== */

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

@media (min-width: 768px) {
	.container {
		padding-left: var(--container-padding-desktop);
		padding-right: var(--container-padding-desktop);
	}
}

/* ==========================================================================
   Container Width Variants
   ========================================================================== */

/* Full Width Container (no max-width constraint) */
.container--full {
	max-width: var(--container-full);
}

/* Wide Container (Course grids, dashboards) */
.container--wide {
	max-width: var(--container-wide);
}

/* Standard Container (Default - most content) */
.container--standard {
	max-width: var(--container-standard);
}

/* Narrow Container (Articles, long-form content) */
.container--narrow {
	max-width: var(--container-narrow);
}

/* Compact Container (Auth forms, modals) */
.container--compact {
	max-width: var(--container-compact);
}

/* ==========================================================================
   Container Padding Variants
   ========================================================================== */

/* No Padding Container (for edge-to-edge layouts) */
.container--no-padding {
	padding-left: 0;
	padding-right: 0;
}

/* Small Padding (Reduced spacing) */
.container--padding-sm {
	padding-left: var(--spacing-md);
	padding-right: var(--spacing-md);
}

@media (min-width: 768px) {
	.container--padding-sm {
		padding-left: var(--spacing-lg);
		padding-right: var(--spacing-lg);
	}
}

/* Large Padding (Extra spacing) */
.container--padding-lg {
	padding-left: var(--spacing-xl);
	padding-right: var(--spacing-xl);
}

@media (min-width: 768px) {
	.container--padding-lg {
		padding-left: var(--spacing-4xl);
		padding-right: var(--spacing-4xl);
	}
}

/* ==========================================================================
   Section Wrappers
   ========================================================================== */

/**
 * Section wrappers provide vertical spacing between major page sections
 * Use these for consistent section rhythm
 */

.section {
	padding-top: var(--section-padding-mobile);
	padding-bottom: var(--section-padding-mobile);
}

@media (min-width: 768px) {
	.section {
		padding-top: var(--section-padding-desktop);
		padding-bottom: var(--section-padding-desktop);
	}
}

/* Section Padding Variants */
.section--padding-sm {
	padding-top: var(--spacing-xl);
	padding-bottom: var(--spacing-xl);
}

@media (min-width: 768px) {
	.section--padding-sm {
		padding-top: var(--spacing-3xl);
		padding-bottom: var(--spacing-3xl);
	}
}

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

@media (min-width: 768px) {
	.section--padding-lg {
		padding-top: var(--spacing-6xl);
		padding-bottom: var(--spacing-6xl);
	}
}

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

@media (min-width: 768px) {
	.section--padding-xl {
		padding-top: var(--spacing-7xl);
		padding-bottom: var(--spacing-7xl);
	}
}

/* No Top/Bottom Padding */
.section--no-padding-top {
	padding-top: 0;
}

.section--no-padding-bottom {
	padding-bottom: 0;
}

/* ==========================================================================
   Section Background Variants
   ========================================================================== */

/* Dark Section (75% of interface) */
.section--dark {
	background: var(--surface-0);
	color: var(--text-body-dark);
}

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

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

/* Light Section (25% of interface - content areas) */
.section--light {
	background: var(--surface-light-0);
	color: var(--text-body-light);
}

.section--light-1 {
	background: var(--surface-light-1);
	color: var(--text-body-light);
}

/* ==========================================================================
   Content Width Utilities
   ========================================================================== */

/**
 * Use these to constrain content width within containers
 * Useful for typography-focused sections
 */

.content-width {
	max-width: var(--container-narrow);
	margin-left: auto;
	margin-right: auto;
}

.content-width--compact {
	max-width: var(--container-compact);
	margin-left: auto;
	margin-right: auto;
}

.content-width--standard {
	max-width: var(--container-standard);
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   Centered Content Utilities
   ========================================================================== */

.centered {
	text-align: center;
}

.centered-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* ==========================================================================
   Hero Container (Special case for landing pages)
   ========================================================================== */

.hero-container {
	width: 100%;
	max-width: var(--container-wide);
	margin-left: auto;
	margin-right: auto;
	padding: var(--spacing-6xl) var(--container-padding-mobile);
}

@media (min-width: 768px) {
	.hero-container {
		padding: var(--spacing-7xl) var(--container-padding-desktop);
	}
}

/* ==========================================================================
   Fluid Container (No max-width, just padding)
   ========================================================================== */

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

@media (min-width: 768px) {
	.container-fluid {
		padding-left: var(--container-padding-desktop);
		padding-right: var(--container-padding-desktop);
	}
}

/* ==========================================================================
   Wrapper (Full-width sections with inner container)
   ========================================================================== */

/**
 * Wrapper pattern for full-width backgrounds with centered content
 * Example: <div class="wrapper"><div class="container">...</div></div>
 */

.wrapper {
	width: 100%;
}

.wrapper--dark {
	background: var(--surface-0);
	color: var(--text-body-dark);
}

.wrapper--dark-1 {
	background: var(--surface-1);
	color: var(--text-body-dark);
}

.wrapper--light {
	background: var(--surface-light-0);
	color: var(--text-body-light);
}

/* ==========================================================================
   Breakout (Content that breaks out of container)
   ========================================================================== */

/**
 * Use within a container to make content full-width
 * Requires parent container with position: relative
 */

.breakout {
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}

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

/* Mobile (< 768px) */
@media (max-width: 767px) {
	.container,
	.container--wide,
	.container--standard,
	.container--narrow,
	.container--compact {
		padding-left: var(--spacing-lg);
		padding-right: var(--spacing-lg);
	}

	.hero-container {
		padding-top: var(--spacing-4xl);
		padding-bottom: var(--spacing-4xl);
	}
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
	.container--narrow,
	.container--compact {
		max-width: 90%;
	}
}

/* Desktop (992px+) */
@media (min-width: 992px) {
	/* Default widths apply */
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.container,
	.container--wide,
	.container--standard,
	.container--narrow {
		max-width: 100%;
		padding-left: 0;
		padding-right: 0;
	}

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

	.breakout {
		width: 100%;
		margin-left: 0;
	}
}

/* ==========================================================================
   Utility: Remove Container Constraints
   ========================================================================== */

.no-container {
	max-width: none;
	padding-left: 0;
	padding-right: 0;
}

/* ==========================================================================
   Utility: Prevent Horizontal Overflow (Apply to specific sections only)
   ========================================================================== */

.overflow-x-hidden {
	overflow-x: hidden;
	overflow-y: visible;
}

/* Main site wrapper - DO NOT add overflow-x here, it breaks position: sticky */
#page {
	width: 100%;
	/* overflow-x: hidden removed - breaks sticky positioning on all child elements */
}