/* =================================================================
   CSS GRID UTILITIES
   ================================================================= */

/* Grid containers */
.grid {
    display: grid;
}

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

/* Grid column span utilities (1-12 columns for 12-column system) */
.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-7 { grid-column: span 7 / span 7; }
.col-span-8 { grid-column: span 8 / span 8; }
.col-span-9 { grid-column: span 9 / span 9; }
.col-span-10 { grid-column: span 10 / span 10; }
.col-span-11 { grid-column: span 11 / span 11; }
.col-span-12 { grid-column: span 12 / span 12; }

/* Starting column utilities for offset positioning */
.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; }

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

/* Grid row spans */
.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; }

/* Grid flow direction */
.grid-flow-row { grid-auto-flow: row; }
.grid-flow-col { grid-auto-flow: column; }
.grid-flow-dense { grid-auto-flow: dense; }
.grid-flow-row-dense { grid-auto-flow: row dense; }
.grid-flow-col-dense { grid-auto-flow: column dense; }

/* Grid alignment */
.place-items-center {
    place-items: center;
}

.items-start { align-items: start; }
.items-end { align-items: end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

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

.justify-items-start { justify-items: start; }
.justify-items-end { justify-items: end; }
.justify-items-center { justify-items: center; }
.justify-items-stretch { justify-items: stretch; }

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

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

/* Grid gap and spacing system */
.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); }

/* Horizontal gap utilities */
.gap-x-1 { column-gap: var(--spacing-1); }
.gap-x-2 { column-gap: var(--spacing-2); }
.gap-x-3 { column-gap: var(--spacing-3); }
.gap-x-4 { column-gap: var(--spacing-4); }
.gap-x-5 { column-gap: var(--spacing-5); }
.gap-x-6 { column-gap: var(--spacing-6); }

/* Vertical gap utilities */
.gap-y-1 { row-gap: var(--spacing-1); }
.gap-y-2 { row-gap: var(--spacing-2); }
.gap-y-3 { row-gap: var(--spacing-3); }
.gap-y-4 { row-gap: var(--spacing-4); }
.gap-y-5 { row-gap: var(--spacing-5); }
.gap-y-6 { row-gap: var(--spacing-6); }

/* Auto-fit and auto-fill responsive grids */
.grid-cols-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.grid-cols-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.grid-auto-fit-sm {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.grid-auto-fill-md {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.grid-auto-fit-lg {
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

/* =================================================================
   RESPONSIVE GRID VARIATION CLASSES
   ================================================================= */

/* Small breakpoint (640px and up) */
@media (min-width: 640px) {
    .sm\:grid {
        display: grid;
    }

    .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .sm\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .sm\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .sm\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .sm\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .sm\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .sm\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .sm\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .sm\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .sm\:col-span-1 { grid-column: span 1 / span 1; }
    .sm\:col-span-2 { grid-column: span 2 / span 2; }
    .sm\:col-span-3 { grid-column: span 3 / span 3; }
    .sm\:col-span-4 { grid-column: span 4 / span 4; }
    .sm\:col-span-5 { grid-column: span 5 / span 5; }
    .sm\:col-span-6 { grid-column: span 6 / span 6; }
    .sm\:col-span-7 { grid-column: span 7 / span 7; }
    .sm\:col-span-8 { grid-column: span 8 / span 8; }
    .sm\:col-span-9 { grid-column: span 9 / span 9; }
    .sm\:col-span-10 { grid-column: span 10 / span 10; }
    .sm\:col-span-11 { grid-column: span 11 / span 11; }
    .sm\:col-span-12 { grid-column: span 12 / span 12; }
}

/* Medium breakpoint (768px and up) */
@media (min-width: 768px) {
    .md\:grid {
        display: grid;
    }

    .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .md\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .md\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .md\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .md\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .md\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .md\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .md\:col-span-1 { grid-column: span 1 / span 1; }
    .md\:col-span-2 { grid-column: span 2 / span 2; }
    .md\:col-span-3 { grid-column: span 3 / span 3; }
    .md\:col-span-4 { grid-column: span 4 / span 4; }
    .md\:col-span-5 { grid-column: span 5 / span 5; }
    .md\:col-span-6 { grid-column: span 6 / span 6; }
    .md\:col-span-7 { grid-column: span 7 / span 7; }
    .md\:col-span-8 { grid-column: span 8 / span 8; }
    .md\:col-span-9 { grid-column: span 9 / span 9; }
    .md\:col-span-10 { grid-column: span 10 / span 10; }
    .md\:col-span-11 { grid-column: span 11 / span 11; }
    .md\:col-span-12 { grid-column: span 12 / span 12; }
}

/* Large breakpoint (1024px and up) */
@media (min-width: 1024px) {
    .lg\:grid {
        display: grid;
    }

    .lg\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .lg\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .lg\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .lg\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .lg\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .lg\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .lg\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .lg\:col-span-1 { grid-column: span 1 / span 1; }
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:col-span-3 { grid-column: span 3 / span 3; }
    .lg\:col-span-4 { grid-column: span 4 / span 4; }
    .lg\:col-span-5 { grid-column: span 5 / span 5; }
    .lg\:col-span-6 { grid-column: span 6 / span 6; }
    .lg\:col-span-7 { grid-column: span 7 / span 7; }
    .lg\:col-span-8 { grid-column: span 8 / span 8; }
    .lg\:col-span-9 { grid-column: span 9 / span 9; }
    .lg\:col-span-10 { grid-column: span 10 / span 10; }
    .lg\:col-span-11 { grid-column: span 11 / span 11; }
    .lg\:col-span-12 { grid-column: span 12 / span 12; }
}

/* Extra Large breakpoint (1280px and up) */
@media (min-width: 1280px) {
    .xl\:grid {
        display: grid;
    }

    .xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .xl\:col-span-1 { grid-column: span 1 / span 1; }
    .xl\:col-span-2 { grid-column: span 2 / span 2; }
    .xl\:col-span-3 { grid-column: span 3 / span 3; }
    .xl\:col-span-4 { grid-column: span 4 / span 4; }
    .xl\:col-span-5 { grid-column: span 5 / span 5; }
    .xl\:col-span-6 { grid-column: span 6 / span 6; }
    .xl\:col-span-7 { grid-column: span 7 / span 7; }
    .xl\:col-span-8 { grid-column: span 8 / span 8; }
    .xl\:col-span-9 { grid-column: span 9 / span 9; }
    .xl\:col-span-10 { grid-column: span 10 / span 10; }
    .xl\:col-span-11 { grid-column: span 11 / span 11; }
    .xl\:col-span-12 { grid-column: span 12 / span 12; }
}

/* 2XL breakpoint (1536px and up) */
@media (min-width: 1536px) {
    .2xl\:grid {
        display: grid;
    }

    .2xl\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .2xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .2xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .2xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .2xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .2xl\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .2xl\:grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .2xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .2xl\:grid-cols-9 { grid-template-columns: repeat(9, minmax(0, 1fr)); }
    .2xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); }
    .2xl\:grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
    .2xl\:grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }

    .2xl\:col-span-1 { grid-column: span 1 / span 1; }
    .2xl\:col-span-2 { grid-column: span 2 / span 2; }
    .2xl\:col-span-3 { grid-column: span 3 / span 3; }
    .2xl\:col-span-4 { grid-column: span 4 / span 4; }
    .2xl\:col-span-5 { grid-column: span 5 / span 5; }
    .2xl\:col-span-6 { grid-column: span 6 / span 6; }
    .2xl\:col-span-7 { grid-column: span 7 / span 7; }
    .2xl\:col-span-8 { grid-column: span 8 / span 8; }
    .2xl\:col-span-9 { grid-column: span 9 / span 9; }
    .2xl\:col-span-10 { grid-column: span 10 / span 10; }
    .2xl\:col-span-11 { grid-column: span 11 / span 11; }
    .2xl\:col-span-12 { grid-column: span 12 / span 12; }
}