/* ============================================
   MOBILE OPTIMIZATIONS
   Focus on mobile performance and UX
   ============================================ */

/* Image Loading States - Mobile Focus */
@media screen and (max-width: 1024px) {
    /* Image error state */
    img[onerror] {
        opacity: 0.7;
        filter: grayscale(20%);
    }

    /* Smooth image load */
    img {
        transition: opacity 0.3s ease;
    }

    img:not([src]) {
        opacity: 0;
    }
}

/* Touch Target Sizes - Mobile (Minimum 44x44px) */
@media screen and (max-width: 1024px) {
    /* Buttons - ensure minimum touch target */
    button,
    .btn,
    .careers-apply-btn,
    .mobile-menu-toggle,
    .scroll-arrow,
    .team-slider-nav,
    .careers-department-tab,
    .careers-job-tab,
    .nav-link,
    .apply-popup-close,
    .btn-submit,
    .btn-cancel {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 12px 16px !important;
    }

    /* Small buttons need extra padding */
    .mobile-menu-toggle {
        padding: 12px !important;
    }

    /* Scroll arrows - ensure touch-friendly size */
    .scroll-arrow {
        width: 44px !important;
        height: 44px !important;
        font-size: 20px !important;
    }

    /* Navigation links - touch-friendly */
    .nav-link {
        padding: 14px 16px !important;
        min-height: 48px !important;
    }

    /* Department and job tabs - touch-friendly */
    .careers-department-tab,
    .careers-job-tab {
        padding: 14px 18px !important;
        min-height: 48px !important;
    }

    /* Apply button - touch-friendly */
    .careers-apply-btn {
        padding: 14px 24px !important;
        min-height: 48px !important;
    }

    /* File input label - touch-friendly */
    .file-input-label {
        min-height: 48px !important;
        padding: 14px 16px !important;
    }
}

/* Responsive Typography - Mobile Focus */
@media screen and (max-width: 1024px) {
    /* Main headings - responsive with clamp */
    .main-heading .line1 {
        font-size: clamp(18px, 4vw, 28px) !important;
    }

    .main-heading .line2 {
        font-size: clamp(28px, 6vw, 48px) !important;
    }

    /* Project titles */
    .projects-main-title {
        font-size: clamp(32px, 8vw, 64px) !important;
    }

    /* Client titles */
    .clients-main-title {
        font-size: clamp(32px, 8vw, 64px) !important;
    }

    /* Careers titles */
    .careers-main-title {
        font-size: clamp(40px, 10vw, 80px) !important;
    }

    /* About team title */
    .about-team-title h1 {
        font-size: clamp(40px, 10vw, 120px) !important;
    }

    /* Description text */
    .description {
        font-size: clamp(12px, 2.5vw, 16px) !important;
        line-height: clamp(1.5, 2vw, 1.7) !important;
    }

    /* Job titles */
    .careers-job-title {
        font-size: clamp(16px, 4vw, 24px) !important;
    }

    /* Department tab headers */
    .department-tab-header {
        font-size: clamp(13px, 3vw, 18px) !important;
    }

    /* Job tab titles */
    .job-tab-title {
        font-size: clamp(12px, 2.5vw, 16px) !important;
    }

    /* Scope content */
    .scope-content {
        font-size: clamp(12px, 2.5vw, 14px) !important;
        line-height: clamp(1.5, 2vw, 1.6) !important;
    }

    /* Contact form labels */
    .form-group label {
        font-size: clamp(13px, 2.5vw, 15px) !important;
    }

    /* Contact form inputs */
    .form-group input,
    .form-group textarea {
        font-size: clamp(14px, 3vw, 16px) !important;
        padding: clamp(10px, 2vw, 14px) clamp(12px, 2.5vw, 16px) !important;
    }
}

/* Video Optimization - Mobile */
@media screen and (max-width: 1024px) {
    /* Reduce video quality on mobile */
    video {
        max-width: 100% !important;
        height: 450px !important;
    }

    /* Optimize video loading */
    video[preload="metadata"] {
        /* Only load metadata on mobile to save bandwidth */
    }

    /* Video poster images */
    video[poster] {
        background-size: cover;
        background-position: center;
    }

    /* Vimeo iframes - optimize for mobile */
    iframe[src*="vimeo"] {
        max-width: 100% !important;
    }
}

/* Performance Optimizations - Mobile */
@media screen and (max-width: 1024px) {
    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.6s !important;
        transition-duration: 0.3s !important;
    }

    /* Disable expensive effects on mobile */
    .swiper-slide {
        will-change: auto !important;
    }

    /* Optimize scroll performance */
    .projects-gallery-container,
    .clients-logos-grid,
    .careers-jobs-list,
    .scope-content {
        contain: layout style paint;
        transform: translateZ(0);
    }

    /* Reduce backdrop blur on mobile for performance */
    .mobile-menu-overlay,
    .apply-popup-overlay {
        backdrop-filter: blur(5px) !important;
    }
}

/* Image Aspect Ratio - Mobile */
@media screen and (max-width: 1024px) {
    /* Maintain aspect ratios */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Project images */
    .project-masonry-image {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    /* Client logos */
    .client-logo-image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Team member images */
    .team-member-image {
        width: 100%;
        height: auto;
        object-fit: contain;
    }
}

/* Loading States - Mobile */
@media screen and (max-width: 1024px) {
    /* Loading spinner for async operations */
    .loading-spinner {
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 2px solid rgba(78, 205, 196, 0.3);
        border-top-color: #4ecdc4;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }

    /* Loading overlay */
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10000;
    }
}

/* Small Mobile (≤ 480px) - Extra Optimizations */
@media screen and (max-width: 480px) {
    /* Even smaller touch targets on very small screens */
    .scroll-arrow {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    /* Reduce padding on very small screens */
    .careers-department-tab,
    .careers-job-tab {
        padding: 12px 14px !important;
    }

    /* Optimize font sizes for very small screens */
    .main-heading .line1 {
        font-size: clamp(16px, 5vw, 20px) !important;
    }

    .main-heading .line2 {
        font-size: clamp(24px, 7vw, 38px) !important;
    }
}