/**
 * @file
 * Basic Grid Component
 * 
 * A responsive, full-width grid container with smart layout logic.
 * Cards always stretch to fill the full row width.
 * 
 * USAGE:
 * ------
 * <div class="basic-grid">
 *   <div class="basic-card">...</div>
 *   <div class="basic-card">...</div>
 *   <div class="basic-card">...</div>
 * </div>
 * 
 * RESPONSIVE BEHAVIOR:
 * --------------------
 * - Mobile (< 640px):  1 card per row (full width)
 * - Tablet (640-1023px): 2 cards per row (each 50%)
 * - Laptop (1024-1399px): 3 cards per row (each 33%)
 * - Desktop (1400px+): 4 cards per row (each 25%)
 * 
 * SMART GRID LOGIC:
 * -----------------
 * Cards ALWAYS stretch to fill full row width:
 * - 1 card: 100% width
 * - 2 cards: 50% each
 * - 3 cards: 33% each
 * - 4 cards on laptop: 2x2 layout (50% each)
 * 
 * GAP OPTIONS:
 * ------------
 * Default gap: 1.5rem (24px)
 * Add class for different gaps:
 *   - basic-grid-gap-sm (0.75rem)
 *   - basic-grid-gap-lg (2rem)
 *   - basic-grid-gap-xl (2.5rem)
 */

/* ==========================================================================
   BASIC GRID - Container
   ========================================================================== */

.basic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

/* ==========================================================================
   BASIC GRID - Responsive Breakpoints
   ========================================================================== */

/* Large Desktop: 4 columns */
@media (min-width: 1400px) {
    .basic-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Laptop/Desktop: 3 columns (default) */
@media (min-width: 1024px) and (max-width: 1399px) {
    .basic-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

/* Mobile: 1 column */
@media (max-width: 639px) {
    .basic-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   BASIC GRID - Smart Layout Classes (Applied by JavaScript)
   Cards ALWAYS stretch to full row width
   ========================================================================== */

/* Single card - full width stretched */
.basic-grid.basic-grid-count-1 {
    grid-template-columns: 1fr;
}

/* 2 cards - each takes 50% */
.basic-grid.basic-grid-count-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* 3 cards - each takes 33% */
.basic-grid.basic-grid-count-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Tablet adjustments */
@media (min-width: 640px) and (max-width: 1023px) {
    .basic-grid.basic-grid-count-1 {
        grid-template-columns: 1fr;
    }
    
    .basic-grid.basic-grid-count-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .basic-grid.basic-grid-count-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile: always 1 column full width */
@media (max-width: 639px) {
    .basic-grid.basic-grid-count-1,
    .basic-grid.basic-grid-count-2,
    .basic-grid.basic-grid-count-3 {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   BASIC GRID - Smart Layout for Orphan Prevention
   Still stretches cards to full width
   ========================================================================== */

/* 4 cards on laptop: 2x2 instead of 3+1 (each row is full width) */
@media (min-width: 1024px) and (max-width: 1399px) {
    .basic-grid.basic-grid-smart-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 4 cards on desktop: 4 columns */
@media (min-width: 1400px) {
    .basic-grid.basic-grid-smart-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 5 cards on laptop: 3+2, last row stretches */
@media (min-width: 1024px) and (max-width: 1399px) {
    .basic-grid.basic-grid-smart-5 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .basic-grid.basic-grid-smart-5 .basic-card:nth-child(-n+3) {
        grid-column: span 2;
    }
    
    .basic-grid.basic-grid-smart-5 .basic-card:nth-child(4) {
        grid-column: 1 / span 3;
    }
    
    .basic-grid.basic-grid-smart-5 .basic-card:nth-child(5) {
        grid-column: 4 / span 3;
    }
}

/* 5 cards on desktop: 3+2 stretched */
@media (min-width: 1400px) {
    .basic-grid.basic-grid-smart-5 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .basic-grid.basic-grid-smart-5 .basic-card:nth-child(-n+3) {
        grid-column: span 2;
    }
    
    .basic-grid.basic-grid-smart-5 .basic-card:nth-child(4) {
        grid-column: 1 / span 3;
    }
    
    .basic-grid.basic-grid-smart-5 .basic-card:nth-child(5) {
        grid-column: 4 / span 3;
    }
}

/* 7 cards on laptop: 3+3+1 → 3+2+2 stretched */
@media (min-width: 1024px) and (max-width: 1399px) {
    .basic-grid.basic-grid-smart-7 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    /* First row: 3 cards */
    .basic-grid.basic-grid-smart-7 .basic-card:nth-child(-n+3) {
        grid-column: span 2;
    }
    
    /* Second row: 2 cards stretched */
    .basic-grid.basic-grid-smart-7 .basic-card:nth-child(4) {
        grid-column: 1 / span 3;
    }
    
    .basic-grid.basic-grid-smart-7 .basic-card:nth-child(5) {
        grid-column: 4 / span 3;
    }
    
    /* Third row: 2 cards stretched */
    .basic-grid.basic-grid-smart-7 .basic-card:nth-child(6) {
        grid-column: 1 / span 3;
    }
    
    .basic-grid.basic-grid-smart-7 .basic-card:nth-child(7) {
        grid-column: 4 / span 3;
    }
}

/* 8 cards on laptop: 3+3+2 stretched */
@media (min-width: 1024px) and (max-width: 1399px) {
    .basic-grid.basic-grid-smart-8 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    /* First 6 cards: 3 per row */
    .basic-grid.basic-grid-smart-8 .basic-card:nth-child(-n+6) {
        grid-column: span 2;
    }
    
    /* Last 2 cards: stretched */
    .basic-grid.basic-grid-smart-8 .basic-card:nth-child(7) {
        grid-column: 1 / span 3;
    }
    
    .basic-grid.basic-grid-smart-8 .basic-card:nth-child(8) {
        grid-column: 4 / span 3;
    }
}

/* 9 cards on desktop (4 cols): 4+4+1 → 3+3+3 */
@media (min-width: 1400px) {
    .basic-grid.basic-grid-smart-9 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 10 cards on laptop: 3+3+3+1 → 3+3+2+2 */
@media (min-width: 1024px) and (max-width: 1399px) {
    .basic-grid.basic-grid-smart-10 {
        grid-template-columns: repeat(6, 1fr);
    }
    
    /* First 6 cards: 3 per row */
    .basic-grid.basic-grid-smart-10 .basic-card:nth-child(-n+6) {
        grid-column: span 2;
    }
    
    /* Cards 7-8: stretched row */
    .basic-grid.basic-grid-smart-10 .basic-card:nth-child(7) {
        grid-column: 1 / span 3;
    }
    
    .basic-grid.basic-grid-smart-10 .basic-card:nth-child(8) {
        grid-column: 4 / span 3;
    }
    
    /* Cards 9-10: stretched row */
    .basic-grid.basic-grid-smart-10 .basic-card:nth-child(9) {
        grid-column: 1 / span 3;
    }
    
    .basic-grid.basic-grid-smart-10 .basic-card:nth-child(10) {
        grid-column: 4 / span 3;
    }
}

/* ==========================================================================
   BASIC GRID - Gap Variants
   ========================================================================== */

.basic-grid.basic-grid-gap-sm {
    gap: 0.75rem;
}

.basic-grid.basic-grid-gap-lg {
    gap: 2rem;
}

.basic-grid.basic-grid-gap-xl {
    gap: 2.5rem;
}

.basic-grid.basic-grid-gap-none {
    gap: 0;
}

/* ==========================================================================
   BASIC GRID - Alignment Options
   ========================================================================== */

/* Cards have equal heights within row */
.basic-grid {
    align-items: stretch;
}

/* Top-align cards (useful if heights vary) */
.basic-grid.basic-grid-align-start {
    align-items: start;
}

/* ==========================================================================
   BASIC GRID - Animation Stagger
   ========================================================================== */

/* Stagger animation for cards in grid */
.basic-grid .basic-card-animate:nth-child(1) { transition-delay: 0s; }
.basic-grid .basic-card-animate:nth-child(2) { transition-delay: 0.1s; }
.basic-grid .basic-card-animate:nth-child(3) { transition-delay: 0.2s; }
.basic-grid .basic-card-animate:nth-child(4) { transition-delay: 0.3s; }
.basic-grid .basic-card-animate:nth-child(5) { transition-delay: 0.4s; }
.basic-grid .basic-card-animate:nth-child(6) { transition-delay: 0.5s; }
.basic-grid .basic-card-animate:nth-child(7) { transition-delay: 0.6s; }
.basic-grid .basic-card-animate:nth-child(8) { transition-delay: 0.7s; }
.basic-grid .basic-card-animate:nth-child(9) { transition-delay: 0.8s; }
.basic-grid .basic-card-animate:nth-child(10) { transition-delay: 0.9s; }
.basic-grid .basic-card-animate:nth-child(11) { transition-delay: 1.0s; }
.basic-grid .basic-card-animate:nth-child(12) { transition-delay: 1.1s; }

/* Reset delay when card becomes visible (applied by JS) */
.basic-grid .basic-card-animate.basic-card-visible {
    transition-delay: 0s !important;
}

/* Use custom property for dynamic stagger */
.basic-grid .basic-card-animate {
    transition-delay: calc(var(--card-index, 0) * 0.1s);
}