/*
 * ═══════════════════════════════════════════════════
 *  MOBILE PERFORMANCE OPTIMIZATION
 *  Critical fixes for slow mobile loading
 * ═══════════════════════════════════════════════════
 */

/* ─────────────────────────────────────
   1. CRITICAL: Reduce Initial Paint Time
   ───────────────────────────────────── */

/* Force GPU acceleration for smoother scrolling on mobile */
@media (max-width: 767px) {
    body {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}

/* ─────────────────────────────────────
   2. HERO IMAGE OPTIMIZATION
   ───────────────────────────────────── */

/* Lazy load hero background on mobile - don't block initial render */
@media (max-width: 767px) {
    .hero-container,
    div[style*="background-image: url('images/house.jpg')"] {
        /* Use a lightweight gradient placeholder first */
        background-image: linear-gradient(135deg, #064b67 0%, #0a5c7a 100%) !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    /* Load actual image after page is interactive */
    .hero-container.loaded,
    div[style*="background-image: url('images/house.jpg')"].loaded {
        background-image: url('images/house.jpg') !important;
    }
}

/* ─────────────────────────────────────
   3. IMAGE LOADING OPTIMIZATION
   ───────────────────────────────────── */

/* Force lazy loading for all non-critical images on mobile */
@media (max-width: 767px) {
    /* Product images should lazy load */
    .aspect-square img:not([loading="eager"]),
    .grid img:not([loading="eager"]),
    section img:not([loading="eager"]) {
        loading: lazy;
        content-visibility: auto;
    }
    
    /* No blur-up effect — removed because .loaded class is never applied,
       which leaves all lazy images permanently blurred on mobile. */
}

/* ─────────────────────────────────────
   4. REDUCE LAYOUT SHIFTS (CLS)
   ───────────────────────────────────── */

/* Reserve space for images to prevent layout shift */
@media (max-width: 767px) {
    /* Product card images */
    .aspect-square {
        position: relative;
        width: 100%;
        padding-bottom: 100%; /* 1:1 aspect ratio */
        overflow: hidden;
    }
    
    .aspect-square img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    /* Category icons */
    .grid a .w-16,
    .grid a .md\:w-32 {
        min-height: 3.5rem;
        min-width: 3.5rem;
    }
}

/* ─────────────────────────────────────
   5. REDUCE JAVASCRIPT EXECUTION
   ───────────────────────────────────── */

/* Disable expensive animations on mobile */
@media (max-width: 767px) {
    /* Remove hover effects that don't work on touch */
    *:hover {
        transition: none !important;
    }
    
    /* Simplify transitions */
    .transition-all,
    .transition-transform,
    .transition-colors {
        transition-duration: 0.15s !important;
        transition-timing-function: ease-out !important;
    }
    
    /* Disable scale animations on mobile - they're expensive */
    .hover\:scale-105,
    .hover\:scale-110,
    .active\:scale-95 {
        transform: none !important;
    }
}

/* ─────────────────────────────────────
   6. OPTIMIZE FONT LOADING
   ───────────────────────────────────── */

/* Use system fonts on mobile for instant rendering */
@media (max-width: 767px) {
    body,
    html {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                     "Helvetica Neue", Arial, sans-serif !important;
        font-display: swap;
    }
}

/* ─────────────────────────────────────
   7. REDUCE REPAINTS & REFLOWS
   ───────────────────────────────────── */

/* Contain layout changes to specific elements */
@media (max-width: 767px) {
    /* Product cards */
    .grid > a,
    .products-grid > a {
        contain: layout style paint;
        content-visibility: auto;
    }
    
    /* Navigation */
    nav {
        contain: layout style;
    }
    
    /* Footer */
    footer {
        contain: layout style paint;
    }
}

/* ─────────────────────────────────────
   8. OPTIMIZE SCROLLING PERFORMANCE
   ───────────────────────────────────── */

@media (max-width: 767px) {
    /* Use passive event listeners for scroll */
    * {
        touch-action: pan-y pinch-zoom;
    }
    
    /* Optimize overflow scrolling */
    .overflow-x-scroll,
    .overflow-y-auto {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        will-change: scroll-position;
    }
    
    /* Reduce scroll jank — keep overscroll natural so page doesn't feel stuck */
    body {
        overscroll-behavior-x: none; /* prevent horizontal overscroll only */
    }
}

/* ─────────────────────────────────────
   9. CRITICAL CSS INLINING HELPERS
   ───────────────────────────────────── */

/* Above-the-fold content should render immediately */
@media (max-width: 767px) {
    /* Navigation bar */
    nav.sticky-nav {
        min-height: 60px;
        background-color: #f3f4f6;
    }
    
    /* Hero section placeholder */
    .hero-container {
        min-height: 220px;
        background-color: #064b67;
    }
    
    /* Product grid skeleton */
    .grid.grid-cols-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* ─────────────────────────────────────
   10. REDUCE NETWORK REQUESTS
   ───────────────────────────────────── */

/* Combine small icons into CSS instead of loading images */
@media (max-width: 767px) {
    /* Use CSS shapes for simple icons where possible */
    .icon-placeholder {
        display: inline-block;
        width: 1.5rem;
        height: 1.5rem;
        background-color: currentColor;
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
    }
}

/* ─────────────────────────────────────
   11. DEFER OFF-SCREEN CONTENT
   ───────────────────────────────────── */

@media (max-width: 767px) {
    /* Footer and below-fold sections */
    footer,
    section:nth-of-type(n+3) {
        content-visibility: auto;
        contain-intrinsic-size: 0 500px;
    }
}

/* ─────────────────────────────────────
   12. OPTIMIZE THIRD-PARTY RESOURCES
   ───────────────────────────────────── */

/* Reduce impact of external resources */
@media (max-width: 767px) {
    /* Social media embeds */
    iframe,
    embed,
    object {
        loading: lazy;
        content-visibility: auto;
    }
}

/* ─────────────────────────────────────
   13. REDUCE MEMORY USAGE
   ───────────────────────────────────── */

@media (max-width: 767px) {
    /* Limit shadow complexity */
    .shadow-lg,
    .shadow-xl,
    .shadow-2xl {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Simplify gradients */
    .bg-gradient-to-t,
    .bg-gradient-to-br,
    .bg-gradient-to-r {
        background-image: none !important;
        background-color: rgba(0, 0, 0, 0.5) !important;
    }
}

/* ─────────────────────────────────────
   14. OPTIMIZE RENDERING LAYERS
   ───────────────────────────────────── */

@media (max-width: 767px) {
    /* Promote frequently animated elements to their own layer */
    .mobile-menu-overlay,
    nav.sticky-nav,
    nav.fixed.bottom-0 {
        will-change: transform;
        transform: translateZ(0);
    }
    
    /* But don't promote everything - it uses memory */
    .grid > *,
    .products-grid > * {
        will-change: auto;
    }
}

/* ─────────────────────────────────────
   15. CRITICAL: REDUCE INITIAL CSS SIZE
   ───────────────────────────────────── */

/* Hide ONLY explicitly desktop-only containers on mobile.
   NOTE: Do NOT use [class*="lg:"] or [class*="xl:"] — these selectors
   would hide product cards, headings, and any element that uses
   a responsive Tailwind utility like lg:text-sm, lg:grid-cols-5, etc. */
@media (max-width: 767px) {
    /* Elements that are hidden on mobile AND only shown on lg/md screens */
    .hidden.lg\:block,
    .hidden.lg\:flex,
    /* Filter sidebar — desktop only */
    .hidden.md\:block.md\:col-span-1 {
        display: none !important;
    }
}

/* ─────────────────────────────────────
   16. OPTIMIZE PAINT COMPLEXITY
   ───────────────────────────────────── */

@media (max-width: 767px) {
    /* Reduce border-radius complexity */
    .rounded-lg,
    .rounded-xl,
    .rounded-2xl,
    .rounded-3xl {
        border-radius: 0.5rem !important;
    }
    
    /* Simplify backdrop filters - they're expensive */
    .backdrop-blur-md,
    .backdrop-blur-lg {
        backdrop-filter: none !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
}

/* ─────────────────────────────────────
   17. REDUCE JAVASCRIPT BLOCKING
   ───────────────────────────────────── */

/* Ensure interactive elements work without JS */
@media (max-width: 767px) {
    /* Make links and buttons always clickable */
    a, button {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}

/* ─────────────────────────────────────
   18. OPTIMIZE WEB VITALS
   ───────────────────────────────────── */

/* Improve Largest Contentful Paint (LCP) */
@media (max-width: 767px) {
    /* Hero section is usually LCP element */
    .hero-container h1 {
        font-display: swap;
        contain: layout style paint;
    }
}

/* Improve First Input Delay (FID) */
@media (max-width: 767px) {
    /* Ensure buttons are immediately interactive */
    button,
    a,
    input,
    select,
    textarea {
        touch-action: manipulation;
    }
}

/* Improve Cumulative Layout Shift (CLS) */
@media (max-width: 767px) {
    /* Reserve space for dynamic content */
    [class*="svelte-"] {
        min-height: fit-content;
    }
}