/* Grid System */
.container {
    max-width: var(--container-max-width);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

@media (min-width: 576px) {
    .container {
        padding: 0 var(--container-padding-sm);
    }
}

@media (min-width: 992px) {
    .container {
        padding: 0 var(--container-padding-lg);
    }
}

.container-fluid {
    width: 100%;
    padding: 0 var(--container-padding);
}

/* Grid Base */
.grid {
    display: grid;
    gap: var(--grid-gap);
}

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

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

/* Grid Columns */
.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

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

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

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

.grid-cols-5 {
    grid-template-columns: repeat(5, 1fr);
}

.grid-cols-6 {
    grid-template-columns: repeat(6, 1fr);
}

.grid-cols-12 {
    grid-template-columns: repeat(12, 1fr);
}

/* Grid Rows */
.grid-rows-1 {
    grid-template-rows: repeat(1, 1fr);
}

.grid-rows-2 {
    grid-template-rows: repeat(2, 1fr);
}

.grid-rows-3 {
    grid-template-rows: repeat(3, 1fr);
}

.grid-rows-4 {
    grid-template-rows: repeat(4, 1fr);
}

/* Grid Item Utilities */
.col-span-1 {
    grid-column: span 1 / span 1;
}

.col-span-2 {
    grid-column: span 2 / span 2;
}

.col-span-3 {
    grid-column: span 3 / span 3;
}

.col-span-4 {
    grid-column: span 4 / span 4;
}

.col-span-5 {
    grid-column: span 5 / span 5;
}

.col-span-6 {
    grid-column: span 6 / span 6;
}

.col-span-full {
    grid-column: 1 / -1;
}

.row-span-1 {
    grid-row: span 1 / span 1;
}

.row-span-2 {
    grid-row: span 2 / span 2;
}

.row-span-3 {
    grid-row: span 3 / span 3;
}

.row-span-4 {
    grid-row: span 4 / span 4;
}

.row-span-full {
    grid-row: 1 / -1;
}

/* Flexbox Utilities */
.flex {
    display: flex;
}

.flex-inline {
    display: inline-flex;
}

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

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

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

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

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

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

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

/* Justify Content */
.justify-start {
    justify-content: flex-start;
}

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

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

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

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

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

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

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

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

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

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

/* Align Content */
.content-start {
    align-content: flex-start;
}

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

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

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

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

.content-evenly {
    align-content: space-evenly;
}

/* Align Self */
.self-auto {
    align-self: auto;
}

.self-start {
    align-self: flex-start;
}

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

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

.self-stretch {
    align-self: stretch;
}

.self-baseline {
    align-self: baseline;
}

/* Flex Properties */
.flex-1 {
    flex: 1 1 0%;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-initial {
    flex: 0 1 auto;
}

.flex-none {
    flex: none;
}

.flex-grow {
    flex-grow: 1;
}

.flex-grow-0 {
    flex-grow: 0;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

/* Gap Utilities */
.gap-0 {
    gap: 0;
}

.gap-1 {
    gap: var(--spacing-1);
}

.gap-2 {
    gap: var(--spacing-2);
}

.gap-3 {
    gap: var(--spacing-3);
}

.gap-4 {
    gap: var(--spacing-4);
}

.gap-5 {
    gap: var(--spacing-5);
}

.gap-6 {
    gap: var(--spacing-6);
}

.gap-8 {
    gap: var(--spacing-8);
}

.gap-10 {
    gap: var(--spacing-10);
}

.gap-12 {
    gap: var(--spacing-12);
}

.gap-16 {
    gap: var(--spacing-16);
}

.gap-20 {
    gap: var(--spacing-20);
}

.gap-24 {
    gap: var(--spacing-24);
}

/* Responsive Grid */
@media (max-width: 475px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: 1fr;
    }
    
    .xs\:grid-cols-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .xs\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .xs\:flex-col {
        flex-direction: column;
    }
    
    .xs\:gap-4 {
        gap: var(--spacing-4);
    }
}

@media (max-width: 768px) {
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sm\:grid-cols-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .sm\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .sm\:flex-col {
        flex-direction: column;
    }
    
    .sm\:gap-4 {
        gap: var(--spacing-4);
    }
    
    .sm\:gap-6 {
        gap: var(--spacing-6);
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .md\:grid-cols-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .md\:flex-row {
        flex-direction: row;
    }
    
    .md\:flex-col {
        flex-direction: column;
    }
}

@media (min-width: 992px) {
    .lg\:grid-cols-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .lg\:grid-cols-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
    .lg\:grid-cols-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .lg\:flex-row {
        flex-direction: row;
    }
    
    .lg\:flex-col {
        flex-direction: column;
    }
}

/* Content Grid Patterns */
.content-grid {
    display: grid;
    gap: var(--grid-gap);
}

.content-grid.grid-cols-2 {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 768px) {
    .content-grid.grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* Auto-fit grids */
.grid-auto-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--grid-gap);
}

.grid-auto-fit-sm {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--grid-gap-sm);
}

.grid-auto-fit-lg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--grid-gap-lg);
}

/* Grid areas for complex layouts */
.grid-layout-main {
    display: grid;
    grid-template-areas: 
        "header header"
        "sidebar main"
        "footer footer";
    grid-template-columns: 250px 1fr;
    grid-template-rows: auto 1fr auto;
    gap: var(--grid-gap);
    min-height: 100vh;
}

.grid-area-header {
    grid-area: header;
}

.grid-area-sidebar {
    grid-area: sidebar;
}

.grid-area-main {
    grid-area: main;
}

.grid-area-footer {
    grid-area: footer;
}

@media (max-width: 768px) {
    .grid-layout-main {
        grid-template-areas: 
            "header"
            "main"
            "footer";
        grid-template-columns: 1fr;
    }
    
    .grid-area-sidebar {
        display: none;
    }
}