/**
 * Layout System CSS
 * Structural layout properties only - NO COLORS
 * File: assets/css/layout-system.css
 * 
 * This file defines the structural layout system for all pages.
 * Colors are handled by theme files.
 */

/* ============================================
   CONTAINER SYSTEM
   ============================================ */

/* Standard Container - Uniform width across all pages */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

/* Container Size Variants */
.container-sm {
    max-width: 576px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

.container-md {
    max-width: 768px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

.container-lg {
    max-width: 992px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

.container-xl {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

.container-xxl {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

/* Fluid Container */
.container-fluid {
    width: 100%;
    padding: 0 1rem;
    margin: 0 auto;
}

/* ============================================
   PAGE LAYOUT SYSTEM
   ============================================ */

/* Page Wrapper - Standard structure for all pages */
.page-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Page Header Section */
.page-header {
    padding: 2rem 0;
    margin-bottom: 2rem;
    width: 100%;
}

.page-header h1 {
    margin-bottom: 0.5rem;
}

.page-header .lead {
    margin-bottom: 0;
}

/* Page Content Section */
.page-content {
    flex: 1;
    padding: 2rem 0;
    width: 100%;
}

/* Page Footer Section */
.page-footer {
    margin-top: auto;
    padding: 2rem 0;
    width: 100%;
}

/* ============================================
   CONTENT SECTIONS
   ============================================ */

/* Standard Content Section */
.content-section {
    margin-bottom: 3rem;
    width: 100%;
}

.content-section:last-child {
    margin-bottom: 0;
}

/* Section Title */
.section-title {
    margin-bottom: 2rem;
    position: relative;
    display: inline-block;
    width: 100%;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 50px;
    height: 3px;
    border-radius: 3px;
}

/* ============================================
   GRID SYSTEM ENHANCEMENTS
   ============================================ */

/* Ensure consistent row spacing */
.row {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
}

.row > * {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* Standard column spacing */
.col,
[class*="col-"] {
    margin-bottom: 1rem;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Mobile First - Base styles for mobile */
@media (max-width: 575.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding: 0 0.75rem;
    }
    
    .page-header {
        padding: 1.5rem 0;
        margin-bottom: 1.5rem;
    }
    
    .page-content {
        padding: 1.5rem 0;
    }
    
    .page-footer {
        padding: 1.5rem 0;
    }
}

/* Tablet */
@media (min-width: 576px) and (max-width: 991.98px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding: 0 1rem;
    }
}

/* Desktop */
@media (min-width: 992px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding: 0 1.5rem;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding: 0 2rem;
    }
}

/* ============================================
   LAYOUT UTILITIES
   ============================================ */

/* Full Width */
.full-width {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Centered Content */
.content-centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Flex Utilities */
.flex-row {
    display: flex;
    flex-direction: row;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

/* Alignment */
.align-start {
    align-items: flex-start;
}

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

.align-end {
    align-items: flex-end;
}

.justify-start {
    justify-content: flex-start;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.justify-between {
    justify-content: space-between;
}

.justify-around {
    justify-content: space-around;
}

/* ============================================
   SPACING SYSTEM
   (Using design-system.css variables)
   ============================================ */

/* Margin Utilities */
.mt-auto {
    margin-top: auto;
}

.mb-auto {
    margin-bottom: auto;
}

.ml-auto {
    margin-left: auto;
}

.mr-auto {
    margin-right: auto;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.my-auto {
    margin-top: auto;
    margin-bottom: auto;
}

/* ============================================
   WIDTH UTILITIES
   ============================================ */

.w-25 {
    width: 25%;
}

.w-50 {
    width: 50%;
}

.w-75 {
    width: 75%;
}

.w-100 {
    width: 100%;
}

/* ============================================
   MAX-WIDTH UTILITIES
   ============================================ */

.mw-100 {
    max-width: 100%;
}

.mw-25 {
    max-width: 25%;
}

.mw-50 {
    max-width: 50%;
}

.mw-75 {
    max-width: 75%;
}

/* ============================================
   POSITIONING
   ============================================ */

.position-relative {
    position: relative;
}

.position-absolute {
    position: absolute;
}

.position-fixed {
    position: fixed;
}

.position-sticky {
    position: sticky;
}

/* ============================================
   OVERFLOW
   ============================================ */

.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

.overflow-scroll {
    overflow: scroll;
}

.overflow-x-auto {
    overflow-x: auto;
}

.overflow-y-auto {
    overflow-y: auto;
}

/* ============================================
   DISPLAY UTILITIES
   ============================================ */

.d-block {
    display: block;
}

.d-inline {
    display: inline;
}

.d-inline-block {
    display: inline-block;
}

.d-flex {
    display: flex;
}

.d-grid {
    display: grid;
}

.d-none {
    display: none;
}

/* ============================================
   Z-INDEX LAYERS
   ============================================ */

.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}

.z-10 {
    z-index: 10;
}

.z-100 {
    z-index: 100;
}

.z-1000 {
    z-index: 1000;
}

/* ============================================
   IMPORTANT NOTES
   ============================================
   
   This file contains ONLY structural/layout properties:
   - Container widths and padding
   - Page layout structure
   - Flexbox/Grid layouts
   - Positioning
   - Display properties
   - Spacing (margins/padding)
   - Width/height
   - Z-index
   - Overflow
   
   NO COLORS should be defined in this file.
   All colors come from theme files.
 */