/**
 * Responsive Utilities
 * Additional responsive helpers and performance optimizations
 * @package StreamBox
 */

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

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile,
    .desktop-only {
        display: none !important;
    }
}

/* Hide on tablet */
@media (min-width: 768px) and (max-width: 991px) {
    .hide-tablet,
    .mobile-only {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 992px) {
    .hide-desktop,
    .mobile-only,
    .tablet-only {
        display: none !important;
    }
}

/* Show only on mobile */
@media (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

/* Show only on tablet */
@media (max-width: 767px), (min-width: 992px) {
    .tablet-only {
        display: none !important;
    }
}

/* Show only on desktop */
@media (max-width: 991px) {
    .desktop-only {
        display: none !important;
    }
}

/* ============================================
   RESPONSIVE TEXT UTILITIES
   ============================================ */

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

@media (min-width: 768px) {
    .text-center-tablet {
        text-align: center !important;
    }
}

/* ============================================
   RESPONSIVE SPACING UTILITIES
   ============================================ */

@media (max-width: 767px) {
    .mb-mobile-0 { margin-bottom: 0 !important; }
    .mb-mobile-1 { margin-bottom: 0.5rem !important; }
    .mb-mobile-2 { margin-bottom: 1rem !important; }
    .mb-mobile-3 { margin-bottom: 1.5rem !important; }
    
    .p-mobile-0 { padding: 0 !important; }
    .p-mobile-1 { padding: 0.5rem !important; }
    .p-mobile-2 { padding: 1rem !important; }
}

/* ============================================
   RESPONSIVE FLEX UTILITIES
   ============================================ */

@media (max-width: 767px) {
    .flex-column-mobile {
        flex-direction: column !important;
    }
    
    .flex-wrap-mobile {
        flex-wrap: wrap !important;
    }
    
    .justify-center-mobile {
        justify-content: center !important;
    }
    
    .items-center-mobile {
        align-items: center !important;
    }
}

/* ============================================
   RESPONSIVE WIDTH UTILITIES
   ============================================ */

@media (max-width: 767px) {
    .w-full-mobile {
        width: 100% !important;
    }
    
    .max-w-full-mobile {
        max-width: 100% !important;
    }
}

/* ============================================
   TABLET LANDSCAPE (768px - 1023px)
   ============================================ */

@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 0 20px;
    }
    
    .content-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================
   SMALL TABLETS (600px - 767px)
   ============================================ */

@media (min-width: 600px) and (max-width: 767px) {
    .content-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    
    .section-title-modern {
        font-size: 1.3rem;
    }
}

/* ============================================
   LARGE PHONES (480px - 599px)
   ============================================ */

@media (min-width: 480px) and (max-width: 599px) {
    .content-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .section-title-modern {
        font-size: 1.2rem;
    }
}

/* ============================================
   SMALL PHONES (below 480px)
   ============================================ */

@media (max-width: 479px) {
    .content-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .section-header-modern {
        padding: 0 10px;
    }
    
    .section-title-modern {
        font-size: 1.1rem;
    }
    
    .section-title-modern svg {
        width: 20px;
        height: 20px;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce animations on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* GPU acceleration for smooth scrolling */
.carousel-track,
.swiper-wrapper {
    will-change: transform;
    -webkit-overflow-scrolling: touch;
}

/* Optimize images */
img {
    content-visibility: auto;
}

/* ============================================
   LANDSCAPE MOBILE
   ============================================ */

@media (max-width: 896px) and (orientation: landscape) {
    .hero-section,
    .hero-cinematic {
        min-height: 100vh;
        height: 100vh;
    }
    
    .hero-content {
        padding-bottom: 20px;
    }
    
    .modal-dialog {
        max-height: 95vh;
        overflow-y: auto;
    }
}

/* ============================================
   HIGH DPI / RETINA DISPLAYS
   ============================================ */

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    /* Theme is already dark, no changes needed */
}

/* ============================================
   HOVER MEDIA QUERY
   Only apply hover styles on devices that support it
   ============================================ */

@media (hover: hover) and (pointer: fine) {
    .media-card:hover {
        transform: translateY(-4px);
    }
    
    .btn:hover {
        transform: translateY(-2px);
    }
}

/* Touch devices - no hover effects */
@media (hover: none) {
    .media-card:hover {
        transform: none;
    }
}

/* ============================================
   SAFE AREA INSETS (iPhone X and newer)
   ============================================ */

@supports (padding: max(0px)) {
    .site-header {
        padding-left: max(15px, env(safe-area-inset-left));
        padding-right: max(15px, env(safe-area-inset-right));
    }
    
    .site-footer {
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
}