/* ==========================================================================
   Grid Utilities
   ========================================================================== */

/* Grid Container */
.grid-container {
    display: grid;
    gap: var(--column-gap, var(--size-3));
}

.grid {
    display: grid;
}

/* Grid Columns */
.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-5 {
    grid-template-columns: repeat(5, 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 Rows */
.grid-rows-1 {
    grid-template-rows: repeat(1, minmax(0, 1fr));
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* Responsive Grid */
@media (min-width: 768px) {
    .grid-container:has(:nth-child(2):last-child) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    /* All grid columns collapse to 1 column on mobile by default */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6,
    .grid-cols-12 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    /* Mobile-specific grid columns */
    .mobile-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .mobile-grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}