/* 
 * Mangazaar Responsive Adaptations (Ultrawide, 4K, Vertical)
 * Preserves GPU Optimizations (0% Idle Target)
 */

/* 1. New Breakpoints for Ultra-Large & Ultrawide Screens */
@media (min-width: 1600px) {
    .max-w-7xl { 
        max-width: 1550px !important; 
    }
}

@media (min-width: 1920px) {
    .max-w-7xl { 
        max-width: 1820px !important; 
    }
    .max-w-6xl { max-width: 1650px !important; }
    .max-w-5xl { max-width: 1500px !important; }
    .max-w-4xl { max-width: 1300px !important; }
    .max-w-3xl { max-width: 1000px !important; }
    
    /* Reader Topbar */
    .topbar-content { max-width: 1600px !important; }

    /* Increase Grid Columns for Library/Archive */
    #manga-grid { 
        grid-template-columns: repeat(8, minmax(0, 1fr)) !important; 
        gap: 1.5rem !important;
    }

    /* Search Results Grid scaling */
    #page-search-results { 
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important; 
    }
    #page-search-placeholder .grid {
        grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
    }

    /* Scale Hero Content */
    .lg\:h-\[800px\] { 
        height: 850px !important; 
    }
}

@media (min-width: 2560px) {
    .max-w-7xl { 
        max-width: 2400px !important; 
    }
    .max-w-6xl { max-width: 2200px !important; }
    .max-w-5xl { max-width: 2000px !important; }
    .max-w-4xl { max-width: 1750px !important; }
    .max-w-3xl { max-width: 1400px !important; }

    #manga-grid { 
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important; 
    }

    #page-search-results { 
        grid-template-columns: repeat(9, minmax(0, 1fr)) !important; 
    }
    #page-search-placeholder .grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    /* Scale Cards in Carousels */
    .carousel-draggable .w-\[160px\], 
    .carousel-draggable .md\:w-\[190px\] {
        width: 260px !important;
    }
    /* Scale Hero 3D Card */
    #heroCardContainer {
        width: 480px !important;
        height: 672px !important;
    }
    #heroCardElement {
        min-height: 672px !important;
    }
    /* Reader Topbar */
    .topbar-content { max-width: 2200px !important; }
}

@media (min-width: 3840px) {
    .max-w-7xl { 
        max-width: 3500px !important; 
    }
    .max-w-6xl { max-width: 3200px !important; }
    .max-w-5xl { max-width: 2900px !important; }
    .max-w-4xl { max-width: 2500px !important; }
    .max-w-3xl { max-width: 1800px !important; }

    /* Reader Topbar */
    .topbar-content { max-width: 3200px !important; }

    #manga-grid { 
        grid-template-columns: repeat(14, minmax(0, 1fr)) !important; 
    }

    #page-search-results { 
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important; 
    }
    #page-search-placeholder .grid {
        grid-template-columns: repeat(16, minmax(0, 1fr)) !important;
    }

    /* Even larger cards for 4K */
    .carousel-draggable .w-\[160px\], 
    .carousel-draggable .md\:w-\[190px\] {
        width: 320px !important;
    }
    /* Scale Hero 3D Card for 4K */
    #heroCardContainer {
        width: 600px !important;
        height: 840px !important;
    }
    #heroCardElement {
        min-height: 840px !important;
    }
}

/* 2. Vertical Monitor & Portrait Tablet Adaptations */
@media (max-width: 1440px) and (min-height: 1400px) {
    .max-w-7xl { 
        max-width: 92% !important; 
    }
    /* Ensure hero doesn't cut off on tall screens */
    header.min-h-screen {
        min-height: 60vh !important;
    }
    /* Add padding to sections for better vertical flow */
    section {
        padding-top: 6rem !important;
        padding-bottom: 6rem !important;
    }
}

/* 3. GPU Performance & Idle-Optimization */

/* 
 * Use 'contain' to isolate layout/paint calculations.
 * This prevents a change in one section from triggering a full page layout/repaint.
 */
section, header, footer, nav {
    contain: layout style paint;
}

/* 
 * GPU-Accelerated Backgrounds
 * Fixed background elements are kept on their own compositor layer.
 */
.fixed.inset-0.z-\[-1\] {
    transform: translateZ(0);
    will-change: transform;
    backface-visibility: hidden;
}

/* 
 * Optimize Carousels for large screens 
 * Ensure smooth scrolling without heavy CPU overhead
 */
.carousel-draggable {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    /* Isolate carousels as they are frequently interacted with */
    contain: layout style;
}

/* 
 * High-Resolution Performance Safeguard:
 * Backdrop-blur is extremely expensive on 4K resolutions.
 * If the screen is huge, we use a slightly more opaque background instead of blur 
 * to keep GPU at 0% idle while maintaining the aesthetic.
 */
@media (min-width: 2560px) {
    .backdrop-blur-md, 
    .backdrop-blur-xl, 
    .backdrop-blur-2xl {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    /* Fallback styles for the removed blur */
    .bg-black\/60 { background-color: rgba(0, 0, 0, 0.85) !important; }
    .bg-black\/80 { background-color: rgba(0, 0, 0, 0.95) !important; }
    .bg-white\/10 { background-color: rgba(255, 255, 255, 0.15) !important; }
    .bg-white\/5  { background-color: rgba(255, 255, 255, 0.08) !important; }
}

/* 
 * Ensure animations don't run when out of view 
 * (Handled by browser mostly, but we can help)
 */
.load-more-glow, .load-more-shimmer {
    content-visibility: auto;
}