/**
 * Grid System
 * 12-column responsive grid based on design system
 * 
 * @package Ashrey_Natural
 * @version 1.0.0
 */

/* ========================================
   Grid Container
   ======================================== */
.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-lg);
    width: 100%;
}

.grid-gap-sm {
    gap: var(--spacing-sm);
}

.grid-gap-md {
    gap: var(--spacing-md);
}

.grid-gap-lg {
    gap: var(--spacing-lg);
}

.grid-gap-xl {
    gap: var(--spacing-xl);
}

.grid-gap-2xl {
    gap: var(--spacing-2xl);
}

/* ========================================
   Grid Columns
   ======================================== */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

.col-auto { grid-column: auto; }

/* ========================================
   Grid Column Start/End
   ======================================== */
.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; }

.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; }
.col-end-13 { grid-column-end: 13; }

/* ========================================
   Grid Rows
   ======================================== */
.row-span-1 { grid-row: span 1; }
.row-span-2 { grid-row: span 2; }
.row-span-3 { grid-row: span 3; }
.row-span-4 { grid-row: span 4; }
.row-span-5 { grid-row: span 5; }
.row-span-6 { grid-row: span 6; }

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

/* ========================================
   Grid Template Columns Variations
   ======================================== */
.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-cols-12 { grid-template-columns: repeat(12, 1fr); }

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

/* ========================================
   Responsive Grid - Tablet (max-width: 1024px)
   ======================================== */
@media (max-width: 1024px) {
    .grid {
        gap: var(--spacing-md);
    }
    
    .tablet\:col-1 { grid-column: span 1; }
    .tablet\:col-2 { grid-column: span 2; }
    .tablet\:col-3 { grid-column: span 3; }
    .tablet\:col-4 { grid-column: span 4; }
    .tablet\:col-5 { grid-column: span 5; }
    .tablet\:col-6 { grid-column: span 6; }
    .tablet\:col-7 { grid-column: span 7; }
    .tablet\:col-8 { grid-column: span 8; }
    .tablet\:col-9 { grid-column: span 9; }
    .tablet\:col-10 { grid-column: span 10; }
    .tablet\:col-11 { grid-column: span 11; }
    .tablet\:col-12 { grid-column: span 12; }
    
    .tablet\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .tablet\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .tablet\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
    .tablet\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
    .tablet\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}

/* ========================================
   Responsive Grid - Mobile (max-width: 768px)
   ======================================== */
@media (max-width: 768px) {
    .grid {
        gap: var(--spacing-sm);
    }
    
    .mobile\:col-1 { grid-column: span 1; }
    .mobile\:col-2 { grid-column: span 2; }
    .mobile\:col-3 { grid-column: span 3; }
    .mobile\:col-4 { grid-column: span 4; }
    .mobile\:col-5 { grid-column: span 5; }
    .mobile\:col-6 { grid-column: span 6; }
    .mobile\:col-7 { grid-column: span 7; }
    .mobile\:col-8 { grid-column: span 8; }
    .mobile\:col-9 { grid-column: span 9; }
    .mobile\:col-10 { grid-column: span 10; }
    .mobile\:col-11 { grid-column: span 11; }
    .mobile\:col-12 { grid-column: span 12; }
    
    .mobile\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
    .mobile\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
    .mobile\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

/* ========================================
   RTL Support
   ======================================== */
[dir="rtl"] .grid {
    /* Grid inherently handles RTL, but explicit direction can help */
    direction: rtl;
}

[dir="rtl"] .col-start-1 { grid-column-start: 13; }
[dir="rtl"] .col-start-2 { grid-column-start: 12; }
[dir="rtl"] .col-start-3 { grid-column-start: 11; }
[dir="rtl"] .col-start-4 { grid-column-start: 10; }
[dir="rtl"] .col-start-5 { grid-column-start: 9; }
[dir="rtl"] .col-start-6 { grid-column-start: 8; }
[dir="rtl"] .col-start-7 { grid-column-start: 7; }
[dir="rtl"] .col-start-8 { grid-column-start: 6; }
[dir="rtl"] .col-start-9 { grid-column-start: 5; }
[dir="rtl"] .col-start-10 { grid-column-start: 4; }
[dir="rtl"] .col-start-11 { grid-column-start: 3; }
[dir="rtl"] .col-start-12 { grid-column-start: 2; }