/**
 * Responsive Display & Visibility System
 * 
 * A comprehensive responsive utility system for controlling element visibility,
 * display properties, and responsive behavior across different screen sizes.
 * This system provides mobile-first responsive design utilities with semantic
 * class names and consistent breakpoint management.
 * 
 * @layer layout.responsive
 * @version 2.0
 * @author Design System Team
 * 
 * FEATURES:
 * - Mobile-first responsive design approach
 * - Display utilities for all CSS display values
 * - Visibility controls for showing/hiding elements
 * - Responsive variants for all major breakpoints
 * - Print-specific utilities for print media
 * - Screen reader utilities for accessibility
 * - Consistent breakpoint system across all utilities
 * - Performance-optimized CSS with minimal specificity
 * 
 * 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)
 * 
 * DISPLAY UTILITIES:
 * - .block: Block-level element
 * - .inline-block: Inline block element
 * - .inline: Inline element
 * - .flex: Flexbox container
 * - .inline-flex: Inline flexbox container
 * - .grid: CSS Grid container
 * - .inline-grid: Inline grid container
 * - .table: Table display
 * - .table-cell: Table cell display
 * - .table-row: Table row display
 * - .hidden: Hide element (display: none)
 * 
 * VISIBILITY UTILITIES:
 * - .visible: Element is visible
 * - .invisible: Element is invisible but takes space
 * - .sr-only: Screen reader only (visually hidden)
 * - .not-sr-only: Remove screen reader only styling
 * 
 * RESPONSIVE VARIANTS:
 * All display utilities are available with responsive prefixes:
 * - sm:block, md:flex, lg:grid, xl:hidden, etc.
 * - Example: .hidden.md:block (hidden on mobile, block on tablet+)
 * 
 * PRINT UTILITIES:
 * - .print:block: Show as block in print
 * - .print:hidden: Hide in print
 * - .print:inline: Show as inline in print
 * 
 * USAGE EXAMPLES:
 * 
 * Responsive Navigation:
 * <nav class="hidden md:block">
 *   <!-- Hidden on mobile, visible on tablet+ -->
 *   <ul>Navigation items</ul>
 * </nav>
 * 
 * Mobile Menu Toggle:
 * <button class="block md:hidden">
 *   <!-- Visible on mobile, hidden on tablet+ -->
 *   Menu Toggle
 * </button>
 * 
 * Responsive Layout:
 * <div class="block lg:flex">
 *   <!-- Block layout on mobile/tablet, flex on desktop -->
 *   <main class="lg:flex-1">Content</main>
 *   <aside class="lg:flex-none">Sidebar</aside>
 * </div>
 * 
 * Progressive Enhancement:
 * <div class="grid-fallback block sm:grid">
 *   <!-- Block fallback, grid on small screens+ -->
 *   <div>Item 1</div>
 *   <div>Item 2</div>
 * </div>
 * 
 * Accessibility:
 * <span class="sr-only">
 *   Screen reader description
 * </span>
 * <button aria-describedby="description">
 *   <span class="sr-only">Close dialog</span>
 *   ×
 * </button>
 * 
 * Print Optimization:
 * <div class="print:hidden">
 *   <!-- Hidden when printing -->
 *   <button>Interactive element</button>
 * </div>
 * 
 * <div class="hidden print:block">
 *   <!-- Only visible when printing -->
 *   <p>Print-specific content</p>
 * </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+)
 * - CSS Custom Properties: All modern browsers (IE 11+ with fallbacks)
 * 
 * PERFORMANCE NOTES:
 * - Mobile-first approach reduces CSS payload for mobile devices
 * - Uses min-width media queries for better performance
 * - Minimal CSS specificity prevents cascade conflicts
 * - Print styles are separated to avoid render blocking
 * 
 * ACCESSIBILITY:
 * - .sr-only provides content for screen readers while hiding visually
 * - Maintains semantic HTML structure regardless of display changes
 * - Responsive visibility changes don't affect tab order
 * - Print utilities ensure important content is available in print
 * 
 * INTEGRATION:
 * - Works seamlessly with layout/grid-system.css
 * - Compatible with layout/flex-layouts.css
 * - Enhanced by layout/responsive-utilities.css for layout-specific responsive variants
 * - Supports layout/containers.css responsive containers
 * 
 * BEST PRACTICES:
 * - Use mobile-first approach: start with mobile styles, enhance for larger screens
 * - Combine with semantic HTML for better accessibility
 * - Test responsive behavior across all target breakpoints
 * - Use .sr-only for important context that should be available to screen readers
 * - Consider print styles for content-heavy applications
 * - Avoid excessive responsive variants that create maintenance overhead
 * 
 * DEBUGGING:
 * Add temporary borders to debug responsive layouts:
 * .debug * { border: 1px solid red !important; }
 * 
 * MIGRATION:
 * From older responsive systems:
 * - .show-sm → .hidden.sm:block
 * - .hide-md → .block.md:hidden
 * - .visible-lg → .hidden.lg:block
 */

@layer layout.responsive {
    /* ================= DISPLAY UTILITIES ================= */

    /* Basis-Display-Eigenschaften */
    .block { display: block; }

    .inline-block { display: inline-block; }

    .inline { display: inline; }

    .flex { display: flex; }

    .inline-flex { display: inline-flex; }

    .grid { display: grid; }

    .inline-grid { display: inline-grid; }

    .table { display: table; }

    .table-cell { display: table-cell; }

    .table-row { display: table-row; }

    .hidden { display: none; }

    /* ================= VISIBILITY UTILITIES ================= */

    /* Sichtbarkeits-Kontrollen */
    .visible { visibility: visible; }

    .invisible { visibility: hidden; }

    /* Screen Reader Only - für Barrierefreiheit */
    .sr-only {
        border: 0;
        clip: rect(0, 0, 0, 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .not-sr-only {
        border: initial;
        clip: initial;
        height: initial;
        margin: initial;
        overflow: initial;
        padding: initial;
        position: initial;
        white-space: initial;
        width: initial;
    }

    /* ================= RESPONSIVE BREAKPOINTS ================= */

    /* Small screens (640px and up) */
    @media (min-width: 640px) {
        .sm\:block { display: block; }

        .sm\:inline-block { display: inline-block; }

        .sm\:inline { display: inline; }

        .sm\:flex { display: flex; }

        .sm\:inline-flex { display: inline-flex; }

        .sm\:grid { display: grid; }

        .sm\:inline-grid { display: inline-grid; }

        .sm\:table { display: table; }

        .sm\:table-cell { display: table-cell; }

        .sm\:table-row { display: table-row; }

        .sm\:hidden { display: none; }
        
        .sm\:visible { visibility: visible; }

        .sm\:invisible { visibility: hidden; }
    }

    /* Medium screens (768px and up) */
    @media (min-width: 768px) {
        .md\:block { display: block; }

        .md\:inline-block { display: inline-block; }

        .md\:inline { display: inline; }

        .md\:flex { display: flex; }

        .md\:inline-flex { display: inline-flex; }

        .md\:grid { display: grid; }

        .md\:inline-grid { display: inline-grid; }

        .md\:table { display: table; }

        .md\:table-cell { display: table-cell; }

        .md\:table-row { display: table-row; }

        .md\:hidden { display: none; }
        
        .md\:visible { visibility: visible; }

        .md\:invisible { visibility: hidden; }
    }

    /* Large screens (1024px and up) */
    @media (min-width: 1024px) {
        .lg\:block { display: block; }

        .lg\:inline-block { display: inline-block; }

        .lg\:inline { display: inline; }

        .lg\:flex { display: flex; }

        .lg\:inline-flex { display: inline-flex; }

        .lg\:grid { display: grid; }

        .lg\:inline-grid { display: inline-grid; }

        .lg\:table { display: table; }

        .lg\:table-cell { display: table-cell; }

        .lg\:table-row { display: table-row; }

        .lg\:hidden { display: none; }
        
        .lg\:visible { visibility: visible; }

        .lg\:invisible { visibility: hidden; }
    }

    /* Extra large screens (1280px and up) */
    @media (width >= 1280px) {
        .xl\:block { display: block; }

        .xl\:inline-block { display: inline-block; }

        .xl\:inline { display: inline; }

        .xl\:flex { display: flex; }

        .xl\:inline-flex { display: inline-flex; }

        .xl\:grid { display: grid; }

        .xl\:inline-grid { display: inline-grid; }

        .xl\:table { display: table; }

        .xl\:table-cell { display: table-cell; }

        .xl\:table-row { display: table-row; }

        .xl\:hidden { display: none; }
        
        .xl\:visible { visibility: visible; }

        .xl\:invisible { visibility: hidden; }
    }

    /* 2X large screens (1536px and up) */
    @media (width >= 1536px) {
        .\32xl\:block { display: block; }

        .\32xl\:inline-block { display: inline-block; }

        .\32xl\:inline { display: inline; }

        .\32xl\:flex { display: flex; }

        .\32xl\:inline-flex { display: inline-flex; }

        .\32xl\:grid { display: grid; }

        .\32xl\:inline-grid { display: inline-grid; }

        .\32xl\:table { display: table; }

        .\32xl\:table-cell { display: table-cell; }

        .\32xl\:table-row { display: table-row; }

        .\32xl\:hidden { display: none; }
        
        .\32xl\:visible { visibility: visible; }

        .\32xl\:invisible { visibility: hidden; }
    }

    /* ================= PRINT UTILITIES ================= */

    /* Print-spezifische Stile */
    @media print {
        .print\:block { display: block !important; }

        .print\:inline-block { display: inline-block !important; }

        .print\:inline { display: inline !important; }

        .print\:hidden { display: none !important; }
        
        .print\:visible { visibility: visible !important; }

        .print\:invisible { visibility: hidden !important; }
    }
}