/* NQ Tenpin Booking System - Responsive Breakpoints */

/* Extra Small: < 640px (Mobile) */
@media (max-width: 639px) {
    :root {
        --header-height: 64px;
    }
    
    .container {
        padding: 0 var(--space-4);
    }
    
    .section {
        padding: var(--space-12) 0;
    }
    
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
    
    .display-text {
        font-size: var(--text-4xl);
    }
    
    .hide-xs { display: none !important; }
    .show-xs { display: block !important; }
    .show-xs-flex { display: flex !important; }
}

/* Small: 640px - 767px (Large Mobile / Small Tablet) */
@media (min-width: 640px) and (max-width: 767px) {
    .hide-sm { display: none !important; }
    .show-sm { display: block !important; }
    .show-sm-flex { display: flex !important; }
}

/* Medium: 768px - 1023px (Tablet) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-md { display: none !important; }
    .show-md { display: block !important; }
    .show-md-flex { display: flex !important; }
}

/* Large: 1024px - 1279px (Small Desktop) */
@media (min-width: 1024px) and (max-width: 1279px) {
    .hide-lg { display: none !important; }
    .show-lg { display: block !important; }
    .show-lg-flex { display: flex !important; }
}

/* Extra Large: 1280px+ (Desktop) */
@media (min-width: 1280px) {
    .hide-xl { display: none !important; }
    .show-xl { display: block !important; }
    .show-xl-flex { display: flex !important; }
}

/* Mobile First Responsive Grids */
@media (max-width: 767px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) and (max-width: 1279px) {
    .grid-cols-4,
    .grid-cols-5,
    .grid-cols-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile text alignment */
@media (max-width: 767px) {
    .text-left-mobile { text-align: left !important; }
    .text-center-mobile { text-align: center !important; }
}

/* Stack buttons on mobile */
@media (max-width: 640px) {
    .btn-group:not(.btn-group--no-stack) {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group:not(.btn-group--no-stack) .btn {
        width: 100%;
    }
}

/* Mobile padding adjustments */
@media (max-width: 767px) {
    .card {
        padding: var(--space-4);
    }
    
    .modal__content {
        margin: var(--space-4);
        max-height: calc(100vh - var(--space-8));
    }
}

/* Touch-friendly targets */
@media (hover: none) and (pointer: coarse) {
    .btn--sm {
        min-height: 44px;
    }
    
    .form-input,
    .form-select {
        min-height: 48px;
    }
    
    .nav__link {
        padding: var(--space-3) var(--space-2);
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo__icon {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Print styles */
@media print {
    * {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .header,
    .footer,
    .sidebar,
    .nav,
    .btn,
    .no-print {
        display: none !important;
    }
    
    .container {
        max-width: 100% !important;
        padding: 0 !important;
    }
    
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
    }
}

/* Landscape orientation */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--space-8) var(--space-4);
    }
    
    .modal__content {
        max-height: 90vh;
    }
}

/* Safe area insets for notched devices */
@supports (padding: env(safe-area-inset-top)) {
    .header {
        padding-top: env(safe-area-inset-top);
    }
    
    .footer {
        padding-bottom: env(safe-area-inset-bottom);
    }
    
    .sidebar {
        padding-left: env(safe-area-inset-left);
    }
}