/**
 * Mobile Optimizations
 *
 * Performance optimizations for mobile devices
 *
 * @package Vaelobag
 */

/* ========================================
   Container Queries Support
   ======================================== */

@supports (container-type: inline-size) {
    /* Product card container */
    .product-card {
        container-type: inline-size;
        container-name: product-card;
    }

    @container product-card (max-width: 300px) {
        .product-title {
            font-size: 14px;
        }

        .product-price {
            font-size: 16px;
        }
    }

    /* Hero section container */
    .hero-section {
        container-type: inline-size;
        container-name: hero;
    }

    @container hero (max-width: 400px) {
        .hero-title {
            font-size: 24px;
        }

        .hero-subtitle {
            font-size: 14px;
        }
    }
}

/* ========================================
   Mobile Performance Optimizations
   ======================================== */

/* Reduce reflows and repaints */
@media (max-width: 768px) {
    * {
        backface-visibility: hidden;
        transform: translateZ(0);
    }

    /* Optimize animations */
    * {
        will-change: transform, opacity;
    }

    /* Remove unused animations on mobile */
    .animate-fade-in,
    .animate-slide-up {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Optimize touch targets */
@media (max-width: 768px) {
    .btn,
    button,
    a,
    input[type="button"],
    input[type="submit"],
    input[type="reset"] {
        min-height: 44px;
        min-width: 44px;
    }

    .nav-link {
        padding: 12px 16px;
    }
}

/* ========================================
   Critical CSS - Above the Fold
   ======================================== */

/* Preload critical styles */
.critical-above-fold {
    display: block;
}

/* ========================================
   Typography Optimizations
   ======================================== */

@media (max-width: 768px) {
    /* Use system fonts for faster rendering */
    body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Optimize font loading */
    h1, h2, h3, h4, h5, h6 {
        font-display: swap;
    }
}

/* ========================================
   Image Optimizations
   ======================================== */

/* Lazy load placeholder */
img.lazy-load {
    background-color: #f0f0f0;
    min-height: 100px;
    transition: opacity 0.3s ease;
}

img.lazy-load.loaded {
    opacity: 1;
}

/* ========================================
   Layout Optimizations
   ======================================== */

@media (max-width: 480px) {
    .container {
        padding: 0 12px;
    }

    .section-padding {
        padding: 40px 0;
    }

    /* Grid optimizations */
    .grid-3,
    .grid-4 {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   Navigation Optimizations
   ======================================== */

@media (max-width: 768px) {
    /* Sticky header */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        will-change: transform;
    }

    /* Mobile menu */
    .mobile-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: #fff;
        transition: right 0.3s ease;
        z-index: 9999;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-menu.active {
        right: 0;
    }

    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        z-index: 9998;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }
}

/* ========================================
   Form Optimizations
   ======================================== */

@media (max-width: 480px) {
    input,
    textarea,
    select {
        font-size: 16px; /* Prevent iOS zoom */
        padding: 12px;
    }
}

/* ========================================
   Performance Hints
   ======================================== */

/* Content visibility for long lists */
.product-list,
.blog-list {
    content-visibility: auto;
    contain-intrinsic-size: 0 500px;
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
    .no-print {
        display: none !important;
    }

    * {
        text-shadow: none !important;
        color: #000 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
}