/* ============================================================================
   LAYOUT.CSS - Structural utilities for all pages
   
   Contains:
   - Container utilities
   - Spacing utilities (margin, padding)
   - Flexbox utilities
   - Grid utilities
   - Section defaults
   ============================================================================ */

/* === CONTAINERS === */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

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

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

/* === SPACING UTILITIES === */
/* Margin top */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* Margin bottom */
.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Margin left/right */
.mx-auto { margin-left: auto; margin-right: auto; }

/* Padding top/bottom */
.py-0 { padding-top: 0; padding-bottom: 0; }
.py-xs { padding-top: var(--space-xs); padding-bottom: var(--space-xs); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }

/* Padding left/right */
.px-0 { padding-left: 0; padding-right: 0; }
.px-xs { padding-left: var(--space-xs); padding-right: var(--space-xs); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.px-lg { padding-left: var(--space-lg); padding-right: var(--space-lg); }
.px-xl { padding-left: var(--space-xl); padding-right: var(--space-xl); }

/* === SECTIONS === */
section {
    padding: var(--space-lg) var(--space-md);
}

section.compact {
    padding: var(--space-sm) var(--space-md);
}

section.spacious {
    padding: var(--space-xl) var(--space-md);
}

section.centered {
    text-align: center;
}

/* === FLEXBOX UTILITIES === */
.flex {
    display: flex;
}

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

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

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

.flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

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

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

.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }

/* Gap utilities */
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* Flex sizing */
.flex-1 { flex: 1; }
.flex-auto { flex: auto; }
.flex-none { flex: none; }

/* Width utilities for flex children */
.w-20 { flex: 0 0 20%; }
.w-25 { flex: 0 0 25%; }
.w-30 { flex: 0 0 30%; }
.w-33 { flex: 0 0 33.333%; }
.w-40 { flex: 0 0 40%; }
.w-50 { flex: 0 0 50%; }
.w-60 { flex: 0 0 60%; }
.w-66 { flex: 0 0 66.666%; }
.w-70 { flex: 0 0 70%; }
.w-75 { flex: 0 0 75%; }
.w-80 { flex: 0 0 80%; }
.w-100 { flex: 0 0 100%; width: 100%; }

/* === GRID UTILITIES === */
.grid {
    display: grid;
    gap: var(--space-md);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-gap-sm { gap: var(--space-sm); }
.grid-gap-md { gap: var(--space-md); }
.grid-gap-lg { gap: var(--space-lg); }

/* === RESPONSIVE LAYOUT === */
@media (max-width: 768px) {
    .container,
    .container-narrow,
    .container-wide {
        padding: 0 var(--space-sm);
    }
    
    section {
        padding: var(--space-md) var(--space-sm);
    }
    
    /* Stack grids on mobile */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
    
    /* Stack flex rows on mobile */
    .flex-row.stack-mobile {
        flex-direction: column;
    }
    
    /* Full width on mobile */
    .w-20, .w-25, .w-30, .w-33,
    .w-40, .w-50, .w-60, .w-66,
    .w-70, .w-75, .w-80 {
        flex: 1 1 100%;
    }
}

@media (max-width: 480px) {
    .container,
    .container-narrow,
    .container-wide {
        padding: 0 1rem;
    }
    
    section {
        padding: var(--space-sm) 1rem;
    }
}