/**
 * Grid Layout System
 * 
 * A comprehensive 12-column grid system with utility classes for modern web layouts.
 * This system provides flexible grid layouts using CSS Grid with semantic class names
 * and responsive capabilities.
 * 
 * @layer layout.grid
 * @version 2.0
 * @author Design System Team
 * 
 * FEATURES:
 * - 12-column grid system with flexible column spans
 * - Auto-fit and auto-fill grid layouts for responsive cards
 * - Subgrid support for nested layouts
 * - Semantic utility classes (.grid, .grid-cols-*, .col-span-*)
 * - CSS Grid native implementation (no flexbox fallbacks)
 * - Works with spacing.css for gap utilities
 * - Compatible with responsive-utilities.css for breakpoint variants
 * 
 * GRID CLASSES:
 * - .grid: Base grid container
 * - .grid-cols-{1-12}: Define number of columns
 * - .col-span-{1-12}: Span multiple columns
 * - .col-span-full: Span all available columns
 * - .row-span-{1-6}: Span multiple rows
 * - .grid-auto-fit: Auto-fit responsive layout
 * - .grid-auto-fill: Auto-fill responsive layout
 * 
 * LAYOUT VARIANTS:
 * - .layout-grid: Semantic grid with default gutter
 * - .layout-grid-{2,3,4,6}: Predefined column layouts
 * - .layout-grid-auto-fit: Responsive card layouts
 * 
 * SUBGRID SUPPORT:
 * - .grid-subgrid: Inherit parent grid columns
 * - .row-subgrid: Inherit parent grid rows
 * 
 * USAGE EXAMPLES:
 * 
 * Basic Grid:
 * <div class="grid grid-cols-3 gap-4">
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 *   <div>Item 3</div>
 * </div>
 * 
 * Responsive Card Layout:
 * <div class="grid-auto-fit gap-6">
 *   <div class="card">Card 1</div>
 *   <div class="card">Card 2</div>
 *   <div class="card">Card 3</div>
 * </div>
 * 
 * Complex Layout:
 * <div class="grid grid-cols-12 gap-4">
 *   <div class="col-span-8">Main content</div>
 *   <div class="col-span-4">Sidebar</div>
 *   <div class="col-span-full">Footer</div>
 * </div>
 * 
 * Subgrid Example:
 * <div class="grid grid-cols-4 gap-4">
 *   <div class="col-span-2 grid-subgrid gap-2">
 *     <div>Nested 1</div>
 *     <div>Nested 2</div>
 *   </div>
 * </div>
 * 
 * RESPONSIVE USAGE:
 * Use with responsive-utilities.css for breakpoint-specific layouts:
 * <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
 *   <!-- Responsive grid that adapts to screen size -->
 * </div>
 * 
 * BROWSER SUPPORT:
 * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)
 * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+
 * - Container Queries: Chrome 105+, Firefox 110+, Safari 16+
 * 
 * PERFORMANCE NOTES:
 * - CSS Grid is highly optimized for layout performance
 * - Subgrid reduces layout recalculations
 * - Auto-fit/auto-fill are efficient for responsive designs
 * - Use gap properties instead of margins for better performance
 * 
 * ACCESSIBILITY:
 * - Grid layouts maintain document flow for screen readers
 * - Use semantic HTML elements within grid containers
 * - Ensure logical tab order is preserved
 * - Test with keyboard navigation
 * 
 * INTEGRATION:
 * - Works seamlessly with layout/containers.css for container sizing
 * - Combines with layout/spacing.css for gap utilities
 * - Enhanced by layout/responsive-utilities.css for responsive variants
 * - Compatible with layout/flex-layouts.css for hybrid layouts
 */

@layer layout.grid {
    /* ================= GRID-LAYOUT-SYSTEM ================= */

    /* Basierend auf dem 12-Spalten-Grid-System, mit einheitlichen Abständen */
    .layout-grid {
        display: grid;
        gap: var(--grid-gutter, 1rem);
        grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
    }
    
    /* Varianten mit unterschiedlichen Spaltenanzahlen */
    .layout-grid-2 {
        display: grid;
        gap: var(--grid-gutter, 1rem);
        grid-template-columns: repeat(2, 1fr);
    }
    
    .layout-grid-3 {
        display: grid;
        gap: var(--grid-gutter, 1rem);
        grid-template-columns: repeat(3, 1fr);
    }
    
    .layout-grid-4 {
        display: grid;
        gap: var(--grid-gutter, 1rem);
        grid-template-columns: repeat(4, 1fr);
    }
    
    .layout-grid-6 {
        display: grid;
        gap: var(--grid-gutter, 1rem);
        grid-template-columns: repeat(6, 1fr);
    }
    
    /* Auto-Fit Grid für responsive Karten-Layouts */
    .layout-grid-auto-fit {
        display: grid;
        gap: var(--grid-gutter, 1rem);
        grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr));
    }

    /* ================= SUBGRID / NESTED ================= */

    /* Komponenten für verschachtelte Grid-Layouts mit Subgrid */
    .grid-subgrid {
        display: grid;
        grid-template-columns: subgrid;
    }

    .row-subgrid {
        display: grid;
        grid-template-rows: subgrid;
    }

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

    /* Grid-Spalten */
    .grid { display: grid; }
    
    .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-6 { grid-template-columns: repeat(6, 1fr); }
    
    .grid-cols-12 { grid-template-columns: repeat(12, 1fr); }
    
    .grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(var(--grid-auto-fit-min, 200px), 1fr)); }
    
    .grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(var(--grid-auto-fill-min, 200px), 1fr)); }

    /* Spaltenspannen für Grid-Items */
    .col-span-1 { grid-column: span 1; }
    
    .col-span-2 { grid-column: span 2; }
    
    .col-span-3 { grid-column: span 3; }
    
    .col-span-4 { grid-column: span 4; }
    
    .col-span-6 { grid-column: span 6; }
    
    .col-span-12 { grid-column: span 12; }
    
    .col-span-full { grid-column: 1 / -1; }

    /* Grid-Zeilen */
    .grid-rows-1 { grid-template-rows: repeat(1, 1fr); }

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

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

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

    .grid-rows-5 { grid-template-rows: repeat(5, 1fr); }

    .grid-rows-6 { grid-template-rows: repeat(6, 1fr); }

    /* Zeilen-Span */
    .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; }

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