/**
 * CheckToBuild - Grid System
 * Sistema de grids flexible y responsive
 * 
 * @package CheckToBuild
 * @since 2.0.0
 */

/* ===========================
   GRID BASE
   =========================== */

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

/* Grid con gap pequeño */
.grid-sm {
    display: grid;
    gap: var(--grid-gap-sm);
}

/* Grid con gap grande */
.grid-lg {
    display: grid;
    gap: var(--grid-gap-lg);
}

/* ===========================
   GRID COLUMNS (Fixed)
   =========================== */

.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 AUTO-FIT (Responsive)
   =========================== */

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

/* Auto-fit con mínimo 300px */
.grid-auto-md {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--grid-gap);
}

/* Auto-fit con mínimo 320px */
.grid-auto-lg {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--grid-gap);
}

/* Auto-fit con mínimo 400px */
.grid-auto-xl {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--grid-gap);
}

/* ===========================
   GRID SPECIFIC LAYOUTS
   =========================== */

/* Grid 1:1 (dos columnas iguales) */
.grid-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-gap);
}

/* Grid 2:1 (dos columnas, primera doble ancho) */
.grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--grid-gap);
}

/* Grid 1:2 (dos columnas, segunda doble ancho) */
.grid-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--grid-gap);
}

/* Grid sidebar (300px sidebar + resto) */
.grid-sidebar {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--grid-gap);
}

/* Grid sidebar derecho */
.grid-sidebar-right {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: var(--grid-gap);
}

/* ===========================
   GRID GAP UTILITIES
   =========================== */

.gap-0 { gap: 0; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-12 { gap: var(--space-12); }

.column-gap-4 { column-gap: var(--space-4); }
.column-gap-6 { column-gap: var(--space-6); }
.column-gap-8 { column-gap: var(--space-8); }

.row-gap-4 { row-gap: var(--space-4); }
.row-gap-6 { row-gap: var(--space-6); }
.row-gap-8 { row-gap: var(--space-8); }

/* ===========================
   GRID ITEM UTILITIES
   =========================== */

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

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

/* ===========================
   GRID ALIGNMENT
   =========================== */

.place-items-start {
    place-items: start;
}

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

.place-items-end {
    place-items: end;
}

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

.place-content-start {
    place-content: start;
}

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

.place-content-end {
    place-content: end;
}

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

/* ===========================
   RESPONSIVE GRIDS
   =========================== */

/* Tablet (992px) */
@media (max-width: 992px) {
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .grid-2-1,
    .grid-1-2 {
        grid-template-columns: 1fr;
    }
    
    .grid-sidebar,
    .grid-sidebar-right {
        grid-template-columns: 1fr;
    }
    
    .grid-1-1 {
        grid-template-columns: 1fr;
    }
}

/* Mobile (768px) */
@media (max-width: 768px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-auto,
    .grid-auto-md,
    .grid-auto-lg {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: var(--grid-gap-sm);
    }
    
    .grid,
    .grid-sm,
    .grid-lg {
        gap: var(--grid-gap-sm);
    }
}

/* Small Mobile (480px) */
@media (max-width: 480px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: 1fr;
    }
    
    .grid-auto,
    .grid-auto-md,
    .grid-auto-lg,
    .grid-auto-xl {
        grid-template-columns: 1fr;
    }
    
    .col-span-2,
    .col-span-3,
    .col-span-4 {
        grid-column: span 1;
    }
}

/* ===========================
   FLEXBOX ALTERNATIVE
   =========================== */

/* Para casos donde flex es mejor que grid */
.flex-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-gap);
}

.flex-grid > * {
    flex: 1 1 calc(33.333% - var(--grid-gap));
    min-width: 250px;
}

@media (max-width: 768px) {
    .flex-grid > * {
        flex: 1 1 calc(50% - var(--grid-gap));
    }
}

@media (max-width: 480px) {
    .flex-grid > * {
        flex: 1 1 100%;
    }
}