/**
 * Responsive Layout Utilities
 * 
 * Advanced responsive utilities specifically designed for grid and flex layouts.
 * This system provides responsive variants of layout-specific properties that
 * complement the base grid and flex systems with breakpoint-aware functionality.
 * 
 * @layer layout.responsive-utilities
 * @version 2.0
 * @author Design System Team
 * 
 * FEATURES:
 * - Responsive grid column and row utilities
 * - Responsive flexbox direction and alignment
 * - Responsive gap and spacing controls
 * - Mobile-first responsive design approach
 * - Consistent breakpoint system across all utilities
 * - Optimized CSS output with minimal redundancy
 * - Semantic class naming for better maintainability
 * - Performance-optimized media queries
 * 
 * BREAKPOINT SYSTEM:
 * - Base: 0 and up (mobile-first)
 * - sm: 640px and up (small tablets)
 * - md: 768px and up (tablets)
 * - lg: 1024px and up (laptops)
 * - xl: 1280px and up (desktops)
 * - 2xl: 1536px and up (large desktops)
 * 
 * RESPONSIVE GRID UTILITIES:
 * - sm:grid-cols-{1-12}: Responsive grid columns
 * - md:col-span-{1-12}: Responsive column spans
 * - lg:row-span-{1-6}: Responsive row spans
 * - xl:grid-auto-fit: Responsive auto-fit layouts
 * - 2xl:grid-subgrid: Responsive subgrid layouts
 * 
 * RESPONSIVE FLEX UTILITIES:
 * - sm:flex-row: Responsive flex direction
 * - md:flex-col: Responsive flex direction
 * - lg:items-center: Responsive item alignment
 * - xl:justify-between: Responsive content justification
 * - 2xl:flex-wrap: Responsive flex wrapping
 * 
 * RESPONSIVE SPACING:
 * - sm:gap-{size}: Responsive gap utilities
 * - md:space-x-{size}: Responsive horizontal spacing
 * - lg:space-y-{size}: Responsive vertical spacing
 * 
 * USAGE EXAMPLES:
 * 
 * Responsive Grid Layout:
 * <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
 *   <!-- 1 column on mobile, 2 on tablet, 3 on laptop, 4 on desktop -->
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 *   <div>Item 3</div>
 *   <div>Item 4</div>
 * </div>
 * 
 * Responsive Flex Direction:
 * <div class="flex flex-col md:flex-row gap-4">
 *   <!-- Vertical on mobile, horizontal on tablet+ -->
 *   <main class="flex-1">Main content</main>
 *   <aside class="md:w-64">Sidebar</aside>
 * </div>
 * 
 * Responsive Column Spans:
 * <div class="grid grid-cols-12 gap-4">
 *   <div class="col-span-12 md:col-span-8 lg:col-span-9">
 *     <!-- Full width on mobile, 8/12 on tablet, 9/12 on laptop -->
 *     Main content
 *   </div>
 *   <div class="col-span-12 md:col-span-4 lg:col-span-3">
 *     <!-- Full width on mobile, 4/12 on tablet, 3/12 on laptop -->
 *     Sidebar
 *   </div>
 * </div>
 * 
 * Responsive Alignment:
 * <div class="flex flex-col items-start md:flex-row md:items-center lg:justify-between">
 *   <!-- Different alignment at each breakpoint -->
 *   <h1>Title</h1>
 *   <nav>Navigation</nav>
 * </div>
 * 
 * Responsive Card Grid:
 * <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 lg:gap-6">
 *   <!-- Responsive columns with responsive gaps -->
 *   <div class="card">Card 1</div>
 *   <div class="card">Card 2</div>
 *   <div class="card">Card 3</div>
 * </div>
 * 
 * Complex Responsive Layout:
 * <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
 *   <header class="col-span-1 lg:col-span-4">Header</header>
 *   <main class="col-span-1 lg:col-span-3">Main</main>
 *   <aside class="col-span-1">Sidebar</aside>
 *   <footer class="col-span-1 lg:col-span-4">Footer</footer>
 * </div>
 * 
 * BROWSER SUPPORT:
 * - CSS Grid: All modern browsers (IE 11+ with -ms- prefix)
 * - Flexbox: All modern browsers (IE 11+ with -ms- prefix)
 * - Media Queries: All modern browsers (IE 9+)
 * - Gap Property: Chrome 84+, Firefox 63+, Safari 14.1+
 * - Subgrid: Firefox 71+, Safari 16+, Chrome 117+
 * 
 * PERFORMANCE NOTES:
 * - Mobile-first approach reduces CSS payload for mobile devices
 * - Uses min-width media queries for optimal performance
 * - Consolidated media queries reduce CSS file size
 * - Efficient selector specificity prevents cascade conflicts
 * - Gap properties are more performant than margin utilities
 * 
 * ACCESSIBILITY:
 * - Responsive layouts maintain semantic HTML structure
 * - Grid and flex layouts preserve document flow for screen readers
 * - Responsive changes don't affect keyboard navigation order
 * - Visual layout changes don't impact assistive technology
 * - Ensure content remains accessible at all breakpoints
 * 
 * INTEGRATION:
 * - Extends layout/grid-system.css with responsive variants
 * - Complements layout/flex-layouts.css with responsive variants
 * - Works with layout/spacing.css for responsive spacing
 * - Compatible with layout/containers.css for responsive containers
 * - Enhanced by layout/responsive.css for display utilities
 * 
 * BEST PRACTICES:
 * - Start with mobile-first design approach
 * - Use semantic breakpoint names (sm, md, lg, xl, 2xl)
 * - Test layouts across all target breakpoints
 * - Combine grid and flex utilities for complex layouts
 * - Use consistent spacing scales across breakpoints
 * - Avoid excessive responsive variants that create maintenance overhead
 * - Consider performance impact of complex responsive layouts
 * 
 * DEBUGGING:
 * Add responsive debug utilities:
 * .debug-responsive::before {
 *   content: 'mobile';
 *   position: fixed;
 *   top: 0%;
 *   right: 0%;
 *   background: red;
 *   color: white;
 *   padding: 0.25rem;
 * }
 * @media (min-width: 640px) {
 *   .debug-responsive::before { content: 'sm'; }
 * }
 * 
 * MIGRATION:
 * From older responsive systems:
 * - .col-md-6 → .col-span-6.md:col-span-6
 * - .flex-sm-row → .flex-col.sm:flex-row
 * - .d-lg-block → .hidden.lg:block
 */

@layer layout.responsive-utilities {
    /* ================= RESPONSIVE GRID UTILITIES ================= */

    /* Small screens (640px and up) */
    @media (min-width: 640px) {
        .sm\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

        .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

        .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

        .sm\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

        .sm\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

        .sm\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

        .sm\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

        .sm\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

        .sm\:col-span-1 { grid-column: span 1; }

        .sm\:col-span-2 { grid-column: span 2; }

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

        .sm\:col-span-4 { grid-column: span 4; }

        .sm\:col-span-6 { grid-column: span 6; }

        .sm\:col-span-12 { grid-column: span 12; }

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

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

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

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

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

        .sm\:row-span-5 { grid-row: span 5; }

        .sm\:row-span-6 { grid-row: span 6; }

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

    /* Medium screens (768px and up) */
    @media (min-width: 768px) {
        .md\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

        .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

        .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

        .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

        .md\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

        .md\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

        .md\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

        .md\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

        .md\:col-span-1 { grid-column: span 1; }

        .md\:col-span-2 { grid-column: span 2; }

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

        .md\:col-span-4 { grid-column: span 4; }

        .md\:col-span-6 { grid-column: span 6; }

        .md\:col-span-12 { grid-column: span 12; }

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

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

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

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

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

        .md\:row-span-5 { grid-row: span 5; }

        .md\:row-span-6 { grid-row: span 6; }

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

    /* Large screens (1024px and up) */
    @media (min-width: 1024px) {
        .lg\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

        .lg\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

        .lg\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

        .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

        .lg\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

        .lg\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

        .lg\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

        .lg\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

        .lg\:col-span-1 { grid-column: span 1; }

        .lg\:col-span-2 { grid-column: span 2; }

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

        .lg\:col-span-4 { grid-column: span 4; }

        .lg\:col-span-6 { grid-column: span 6; }

        .lg\:col-span-12 { grid-column: span 12; }

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

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

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

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

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

        .lg\:row-span-5 { grid-row: span 5; }

        .lg\:row-span-6 { grid-row: span 6; }

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

    /* Extra large screens (1280px and up) */
    @media (width >= 1280px) {
        .xl\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

        .xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

        .xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

        .xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

        .xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

        .xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

        .xl\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

        .xl\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

        .xl\:col-span-1 { grid-column: span 1; }

        .xl\:col-span-2 { grid-column: span 2; }

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

        .xl\:col-span-4 { grid-column: span 4; }

        .xl\:col-span-6 { grid-column: span 6; }

        .xl\:col-span-12 { grid-column: span 12; }

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

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

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

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

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

        .xl\:row-span-5 { grid-row: span 5; }

        .xl\:row-span-6 { grid-row: span 6; }

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

    /* 2X large screens (1536px and up) */
    @media (width >= 1536px) {
        .\32xl\:grid-cols-1 { grid-template-columns: repeat(1, 1fr); }

        .\32xl\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }

        .\32xl\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }

        .\32xl\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

        .\32xl\:grid-cols-6 { grid-template-columns: repeat(6, 1fr); }

        .\32xl\:grid-cols-12 { grid-template-columns: repeat(12, 1fr); }

        .\32xl\:grid-auto-fit { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }

        .\32xl\:grid-auto-fill { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

        .\32xl\:col-span-1 { grid-column: span 1; }

        .\32xl\:col-span-2 { grid-column: span 2; }

        .\32xl\:col-span-3 { grid-column: span 3; }

        .\32xl\:col-span-4 { grid-column: span 4; }

        .\32xl\:col-span-6 { grid-column: span 6; }

        .\32xl\:col-span-12 { grid-column: span 12; }

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

        .\32xl\:row-span-1 { grid-row: span 1; }

        .\32xl\:row-span-2 { grid-row: span 2; }

        .\32xl\:row-span-3 { grid-row: span 3; }

        .\32xl\:row-span-4 { grid-row: span 4; }

        .\32xl\:row-span-5 { grid-row: span 5; }

        .\32xl\:row-span-6 { grid-row: span 6; }

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