/**
 * SimpleGrid.css - A lightweight, flexible 12-column CSS grid system
 * v3.0.0
 * Author: Eduardo Vega 
 * 
 * FEATURES:
 * - Clean 12-column responsive grid layout
 * - Fluid and fixed width containers
 * - Mobile-first responsive design
 * - Customizable gutters
 * - Simplified structure for better performance
 */

/* ==============================
   1. CONTAINERS
   ============================== */

/* Fluid container (100% width) */
.container-fluid {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
}

/* Fixed width container (responsive) */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
}

/* ==============================
   2. GRID SYSTEM
   ============================== */

/* Row - Base grid container that holds columns */
.grid-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    width: 100%;
    box-sizing: border-box;
}

/* Base column styles */
[class*="col-"] {
    min-width: 0; /* Prevents overflow issues */
}

/* Column span classes (1-12) - Default for all screen sizes */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* ==============================
   3. RESPONSIVE BREAKPOINTS
   ============================== */

/* Large screens (desktops) */
@media (max-width: 1200px) {
    /* Adjust row gap */
    .grid-row {
        gap: 20px;
    }
    
    /* Large screen column spans */
    .lg-col-1 { grid-column: span 1 !important; }
    .lg-col-2 { grid-column: span 2 !important; }
    .lg-col-3 { grid-column: span 3 !important; }
    .lg-col-4 { grid-column: span 4 !important; }
    .lg-col-5 { grid-column: span 5 !important; }
    .lg-col-6 { grid-column: span 6 !important; }
    .lg-col-7 { grid-column: span 7 !important; }
    .lg-col-8 { grid-column: span 8 !important; }
    .lg-col-9 { grid-column: span 9 !important; }
    .lg-col-10 { grid-column: span 10 !important; }
    .lg-col-11 { grid-column: span 11 !important; }
    .lg-col-12 { grid-column: span 12 !important; }
}

/* Medium screens (tablets) */
@media (max-width: 1024px) {
    /* Adjust row gap */
    .grid-row {
        gap: 15px;
    }
    
    /* Medium screen column spans */
    .md-col-1 { grid-column: span 1 !important; }
    .md-col-2 { grid-column: span 2 !important; }
    .md-col-3 { grid-column: span 3 !important; }
    .md-col-4 { grid-column: span 4 !important; }
    .md-col-5 { grid-column: span 5 !important; }
    .md-col-6 { grid-column: span 6 !important; }
    .md-col-7 { grid-column: span 7 !important; }
    .md-col-8 { grid-column: span 8 !important; }
    .md-col-9 { grid-column: span 9 !important; }
    .md-col-10 { grid-column: span 10 !important; }
    .md-col-11 { grid-column: span 11 !important; }
    .md-col-12 { grid-column: span 12 !important; }
}

/* Small screens (mobile) */
@media (max-width: 768px) {
    /* Adjust row gap */
    .grid-row {
        gap: 10px;
    }
    
    /* Small screen column spans */
    .sm-col-1 { grid-column: span 1 !important; }
    .sm-col-2 { grid-column: span 2 !important; }
    .sm-col-3 { grid-column: span 3 !important; }
    .sm-col-4 { grid-column: span 4 !important; }
    .sm-col-5 { grid-column: span 5 !important; }
    .sm-col-6 { grid-column: span 6 !important; }
    .sm-col-7 { grid-column: span 7 !important; }
    .sm-col-8 { grid-column: span 8 !important; }
    .sm-col-9 { grid-column: span 9 !important; }
    .sm-col-10 { grid-column: span 10 !important; }
    .sm-col-11 { grid-column: span 11 !important; }
    .sm-col-12 { grid-column: span 12 !important; }
}

/* ==============================
   4. GAP UTILITIES
   ============================== */

/* Custom gap sizes that can be applied to any grid */
.gap-0 { gap: 0 !important; }
.gap-10 { gap: 10px !important; }
.gap-20 { gap: 20px !important; }
.gap-30 { gap: 30px !important; }
.gap-40 { gap: 40px !important; }

/* ==============================
   5. ADDITIONAL UTILITIES
   ============================== */

/* Auto columns - let content determine width */
.col-auto { 
    grid-column: auto; 
}

/* Column start position utilities */
.col-start-1 { grid-column-start: 1; }
.col-start-2 { grid-column-start: 2; }
.col-start-3 { grid-column-start: 3; }
.col-start-4 { grid-column-start: 4; }
.col-start-5 { grid-column-start: 5; }
.col-start-6 { grid-column-start: 6; }
.col-start-7 { grid-column-start: 7; }
.col-start-8 { grid-column-start: 8; }
.col-start-9 { grid-column-start: 9; }
.col-start-10 { grid-column-start: 10; }
.col-start-11 { grid-column-start: 11; }
.col-start-12 { grid-column-start: 12; }

/* Hide on specific screen sizes */
@media (max-width: 1200px) {
    .hide-lg { display: none !important; }
}

@media (max-width: 1024px) {
    .hide-md { display: none !important; }
}

@media (max-width: 768px) {
    .hide-sm { display: none !important; }
}

/* Stretch items to fill container height */
.stretch { height: 100%; }

/* Alignment utilities */
.align-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

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

/* Nested grid support */
.nested-grid {
    display: grid;
    gap: inherit;
}