/* Mobile Optimization CSS for Eskel Group */

/* Universal Mobile Improvements */
@media (max-width: 768px) {
    /* Fix viewport issues on mobile */
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    body {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        /* Prevent horizontal scrolling */
        overflow-x: hidden;
    }
    
    /* Fix header on mobile devices */
    header {
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* Improve mobile menu interactions */
    .mobile-menu {
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix mobile hero sections */
    .hero-section,
    .hero-swiper {
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height */
        min-height: -webkit-fill-available;
    }
    
    /* Ensure content doesn't get cut off */
    .hero-content {
        padding: 1rem;
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Fix swiper containers on mobile */
    .swiper-container {
        touch-action: pan-y pinch-zoom;
        overflow: hidden;
    }
    
    /* Improve button touch targets */
    .btn,
    button,
    a[class*="btn"] {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
    }
    
    /* Fix form inputs on mobile */
    input,
    textarea,
    select {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        touch-action: manipulation;
    }
    
    /* Prevent zoom on focus for iOS */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea {
        font-size: 16px;
    }
    
    /* Fix sticky elements on mobile */
    .sticky,
    .fixed {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Improve image loading on mobile */
    img {
        max-width: 100%;
        height: auto;
        -webkit-user-select: none;
        user-select: none;
    }
    
    /* Fix navigation elements */
    .swiper-button-next,
    .swiper-button-prev {
        width: 35px !important;
        height: 35px !important;
        margin-top: -17.5px !important;
        touch-action: manipulation;
    }
    
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 16px !important;
    }
    
    .swiper-pagination-bullet {
        width: 8px !important;
        height: 8px !important;
        margin: 0 4px !important;
        touch-action: manipulation;
    }
}

/* Very small screens (phones in portrait) */
@media (max-width: 480px) {
    /* Reduce text sizes for better fit */
    h1 {
        font-size: 2rem;
        line-height: 1.1;
    }
    
    h2 {
        font-size: 1.5rem;
        line-height: 1.2;
    }
    
    /* Stack buttons vertically on small screens */
    .btn-group,
    .button-group {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .btn-group .btn,
    .button-group .btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Reduce padding on small screens */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Fix modals and overlays */
    .modal,
    .overlay {
        margin: 0.5rem;
        max-height: calc(100vh - 1rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section,
    .hero-swiper {
        height: 100vh;
        height: 100dvh;
    }
    
    /* Adjust hero content for landscape */
    .hero-content {
        padding: 0.5rem 1rem;
    }
    
    .hero-content h1 {
        font-size: 2rem;
    }
    
    .hero-content p {
        font-size: 0.9rem;
    }
}

/* Fix for iOS Safari viewport issues */
@supports (-webkit-touch-callout: none) {
    .hero-section,
    .hero-swiper {
        height: -webkit-fill-available;
    }
}

/* Fix for Android Chrome viewport issues */
@media screen and (max-width: 768px) {
    .hero-section,
    .hero-swiper {
        min-height: calc(var(--vh, 1vh) * 100);
    }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
    /* Ensure focus indicators are visible */
    *:focus {
        outline: 2px solid #d08700;
        outline-offset: 2px;
    }
    
    /* Better tap targets */
    a, button, input, select, textarea {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Improve readability */
    body {
        line-height: 1.6;
    }
    
    /* Better contrast on mobile */
    .text-gray-500 {
        color: #6b7280;
    }
}

/* Performance optimizations for mobile */
@media (max-width: 768px) {
    /* Reduce motion for better performance */
    * {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Optimize animations */
    .animate-fade-in,
    .animate-slide-up,
    .animate-fade-in-scale {
        animation-duration: 0.3s;
    }
    
    /* Reduce blur effects on low-end devices */
    @media (max-device-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
        .backdrop-blur-glass,
        [class*="backdrop-blur"] {
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
            background-color: rgba(255, 255, 255, 0.9);
        }
    }
}