/* ========================================
   ROBUST GRID SYSTEM
   Usage: Add class to container
   - .grid-1col (single column)
   - .grid-2col (two columns)
   - .grid-3col (three columns)
   - .grid-auto (responsive, fills available space)
======================================== */

/* Base Grid Container */
.grid {
    display: grid;
    gap: 40px;
    width: 100%;
}

/* 1 Column Layout */
.grid-1col {
    grid-template-columns: 1fr;
}

/* 2 Column Layout */
.grid-2col {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 Column Layout */
.grid-3col {
    grid-template-columns: repeat(3, 1fr);
}

/* Auto-fit Responsive Layout (fills space automatically) */
.grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Compact version (smaller min-width for more columns on smaller screens) */
.grid-auto-compact {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Gap Variations */
.grid-gap-sm { gap: 20px; }
.grid-gap-md { gap: 40px; }
.grid-gap-lg { gap: 60px; }
.grid-gap-xl { gap: 80px; }

/* ========================================
   RESPONSIVE BREAKPOINTS
   Mobile First Approach
======================================== */

/* Tablet (768px and up) */
@media (max-width: 768px) {
    /* 3-col becomes 2-col on tablet */
    .grid-3col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Optional: make 2-col stay 2-col on tablet */
    .grid-2col {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Reduce gaps on smaller screens */
    .grid {
        gap: 30px;
    }
}

/* Mobile (480px and up) */
@media (max-width: 480px) {
    /* Everything becomes 1 column on mobile */
    .grid-2col,
    .grid-3col {
        grid-template-columns: 1fr;
    }
    
    /* Smaller gaps on mobile */
    .grid {
        gap: 24px;
    }
    
    .grid-gap-sm { gap: 16px; }
    .grid-gap-md { gap: 24px; }
    .grid-gap-lg { gap: 32px; }
    .grid-gap-xl { gap: 40px; }
}

/* ========================================
   GRID ITEM UTILITIES
   Apply to individual grid items
======================================== */

/* Span multiple columns */
.col-span-2 {
    grid-column: span 2;
}

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

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

/* Span multiple rows */
.row-span-2 {
    grid-row: span 2;
}

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

/* ========================================
   RESPONSIVE GRID UTILITIES
   Control column count at specific breakpoints
======================================== */

/* Desktop only overrides */
@media (min-width: 1024px) {
    .grid-desktop-4col {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Tablet specific */
@media (min-width: 768px) and (max-width: 1023px) {
    .grid-tablet-2col {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile specific */
@media (max-width: 767px) {
    .grid-mobile-1col {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   ALIGNMENT UTILITIES
======================================== */

/* Horizontal alignment of grid items */
.grid-items-start { justify-items: start; }
.grid-items-center { justify-items: center; }
.grid-items-end { justify-items: end; }
.grid-items-stretch { justify-items: stretch; }

/* Vertical alignment of grid items */
.grid-items-top { align-items: start; }
.grid-items-middle { align-items: center; }
.grid-items-bottom { align-items: end; }

/* Horizontal alignment of grid container */
.grid-justify-start { justify-content: start; }
.grid-justify-center { justify-content: center; }
.grid-justify-end { justify-content: end; }
.grid-justify-between { justify-content: space-between; }

/* ========================================
   EXAMPLE USAGE
======================================== */

/*
<!-- Single Column -->
<div class="grid grid-1col">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

<!-- Two Columns -->
<div class="grid grid-2col">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

<!-- Three Columns -->
<div class="grid grid-3col">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Auto-responsive (fills space) -->
<div class="grid grid-auto">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Custom gap size -->
<div class="grid grid-2col grid-gap-lg">
    <div>Item 1</div>
    <div>Item 2</div>
</div>

<!-- Item spanning full width -->
<div class="grid grid-3col">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div class="col-span-full">This spans all columns</div>
</div>

<!-- Item spanning 2 columns -->
<div class="grid grid-3col">
    <div class="col-span-2">Wide item</div>
    <div>Normal item</div>
</div>
*/

/* ========================================
   UPDATE YOUR EXISTING GALLERY
======================================== */

/* Replace your current .artwork-gallery with: */
.artwork-gallery-x {
    display: grid;
    grid-template-columns: 1fr;  /* Default: 1 column */
    gap: 40px;
    max-width: 100%;
}

/* Or use the new system by adding a class: */
/* <div id="artworkGallery" class="grid grid-2col"> */