/**
 * Techmenas.lt - Mobile Optimizations
 * Critical mobile-first styles for performance and usability
 * Breakpoints: 320px, 375px, 414px, 480px, 768px
 */

/* ============================================
   MOBILE-FIRST BASE STYLES
   ============================================ */

/* Prevent horizontal scroll on mobile */
html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* Ensure all containers respect viewport width */
* {
    box-sizing: border-box;
}

.container,
.max-w-7xl,
.max-w-6xl,
.max-w-5xl,
.max-w-4xl,
.max-w-3xl,
.max-w-2xl,
.max-w-xl,
.max-w-lg {
    max-width: 100% !important;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Prevent any element from causing horizontal scroll */
@media (max-width: 768px) {
    section,
    div,
    article,
    main {
        max-width: 100vw;
        overflow-x: hidden;
    }
}

/* ============================================
   MOBILE TYPOGRAPHY
   ============================================ */

/* Base font size for mobile readability */
@media (max-width: 768px) {
    html {
        font-size: 16px; /* Minimum for mobile readability */
    }
    
    body {
        font-size: 16px;
        line-height: 1.6;
    }
    
    h1 {
        font-size: 2rem; /* 32px */
        line-height: 1.2;
    }
    
    h2 {
        font-size: 1.75rem; /* 28px */
        line-height: 1.3;
    }
    
    h3 {
        font-size: 1.5rem; /* 24px */
        line-height: 1.4;
    }
    
    h4 {
        font-size: 1.25rem; /* 20px */
        line-height: 1.4;
    }
    
    p {
        font-size: 1rem; /* 16px */
        line-height: 1.6;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 1.75rem; /* 28px */
    }
    
    h2 {
        font-size: 1.5rem; /* 24px */
    }
    
    h3 {
        font-size: 1.25rem; /* 20px */
    }
}

/* ============================================
   MOBILE TOUCH TARGETS (Minimum 44x44px)
   ============================================ */

@media (max-width: 768px) {
    /* All buttons minimum 44px height */
    button,
    .btn,
    .btn-primary,
    .btn-secondary,
    a.button,
    input[type="submit"],
    input[type="button"] {
        min-height: 44px;
        min-width: 44px;
        padding: 12px 20px;
        font-size: 16px;
    }
    
    /* Navigation links */
    nav a,
    .nav-link {
        min-height: 44px;
        padding: 12px 16px;
        display: inline-flex;
        align-items: center;
    }
    
    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        min-height: 44px;
        padding: 12px;
        font-size: 16px; /* Prevents iOS zoom on focus */
    }
    
    textarea {
        min-height: 100px;
    }
}

/* ============================================
   MOBILE HERO SECTION
   ============================================ */

@media (max-width: 768px) {
    /* Hero section adjustments - remove min-h-screen */
    #home {
        min-height: auto !important;
        padding: 80px 0 40px !important;
    }

    /* Stack hero content vertically - remove min-h-screen */
    #home .grid {
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        min-height: auto !important;
    }

    /* Hero text content - reduce spacing */
    #home .space-y-8 {
        gap: 1.5rem !important;
        padding: 0 !important;
    }

    /* Spline container wrapper - limit width */
    #home .flex.justify-center {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Spline container - reduce size */
    #home .relative.w-full {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Spline aspect ratio container - reduce min-height */
    #home .relative[style*="aspect-ratio"] {
        min-height: 280px !important;
        max-height: 320px !important;
    }

    /* Hero headings */
    #home h1 {
        font-size: 1.75rem !important;
        line-height: 1.2 !important;
    }

    #home h2 {
        font-size: 1.25rem !important;
        line-height: 1.3 !important;
    }

    #home p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Stats grid - make more compact */
    #home .grid-cols-3 {
        gap: 0.5rem !important;
        padding: 1rem 0 !important;
    }

    /* CTA buttons - stack on mobile */
    #home .sm\:flex {
        flex-direction: column !important;
        gap: 1rem !important;
    }
}

/* ============================================
   MOBILE SPLINE 3D OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
    /* Reduce Spline container size on mobile */
    #spline-hero-scene {
        max-height: 320px !important;
        min-height: 280px !important;
        width: 100% !important;
    }

    /* Simplify glow effects on mobile for performance */
    .blur-3xl,
    .blur-2xl {
        opacity: 0.3 !important; /* Further reduce for mobile */
        display: none; /* Hide on mobile for better performance */
    }

    /* Reduce drop shadow complexity */
    spline-viewer {
        filter: drop-shadow(0 0 12px rgba(0, 191, 255, 0.3)) !important;
    }
}

@media (max-width: 480px) {
    /* Further reduce on small mobile */
    #home {
        padding: 70px 0 30px !important;
    }

    #spline-hero-scene {
        max-height: 280px !important;
        min-height: 240px !important;
    }

    /* Spline aspect ratio container - smaller on tiny screens */
    #home .relative[style*="aspect-ratio"] {
        min-height: 240px !important;
        max-height: 280px !important;
    }

    /* Simplify drop shadows on very small screens */
    spline-viewer {
        filter: drop-shadow(0 0 8px rgba(0, 191, 255, 0.2)) !important;
    }

    /* Hero headings - smaller on tiny screens */
    #home h1 {
        font-size: 1.5rem !important;
    }

    /* Stats - smaller text */
    #home .grid-cols-3 .text-2xl {
        font-size: 1.5rem !important;
    }
}

@media (max-width: 375px) {
    /* iPhone SE and smaller */
    #home {
        padding: 60px 0 20px !important;
    }

    #spline-hero-scene {
        max-height: 250px !important;
        min-height: 220px !important;
    }

    /* Spline aspect ratio container - even smaller */
    #home .relative[style*="aspect-ratio"] {
        min-height: 220px !important;
        max-height: 250px !important;
    }

    /* Hero headings - even smaller */
    #home h1 {
        font-size: 1.375rem !important;
    }

    #home p {
        font-size: 0.9375rem !important;
    }
}

/* Only hide Spline on VERY small screens (< 320px) */
@media (max-width: 319px) {
    #spline-hero-scene {
        display: none;
    }

    #spline-loading {
        display: block !important;
        z-index: 1 !important;
    }
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

@media (max-width: 768px) {
    /* Hide desktop navigation */
    nav ul {
        display: none;
    }
    
    /* Show hamburger menu */
    .hamburger {
        display: flex !important;
    }
    
    /* Mobile menu full width */
    .mobile-menu {
        width: 100%;
        max-width: 100%;
    }
    
    /* Mobile menu items */
    .mobile-menu a {
        font-size: 1.125rem;
        padding: 16px 20px;
        min-height: 56px;
    }
}

/* ============================================
   MOBILE GRID LAYOUTS
   ============================================ */

@media (max-width: 768px) {
    /* Force single column on mobile */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .lg\\:grid-cols-2,
    .lg\\:grid-cols-3,
    .md\\:grid-cols-2 {
        grid-template-columns: 1fr !important;
    }
    
    /* Reduce gap on mobile */
    .gap-12 {
        gap: 2rem !important;
    }
    
    .gap-8 {
        gap: 1.5rem !important;
    }
}

/* ============================================
   MOBILE SPACING
   ============================================ */

@media (max-width: 768px) {
    /* Reduce padding on sections */
    section {
        padding: 3rem 1rem !important;
    }
    
    /* Reduce margin on headings */
    .space-y-8 > * + * {
        margin-top: 1.5rem !important;
    }
    
    .space-y-6 > * + * {
        margin-top: 1rem !important;
    }
    
    .space-y-4 > * + * {
        margin-top: 0.75rem !important;
    }
}

/* ============================================
   MOBILE PERFORMANCE - DISABLE HEAVY ANIMATIONS
   ============================================ */

@media (max-width: 768px) {
    /* Disable pulse animations on mobile */
    .animate-pulse {
        animation: none !important;
    }
    
    /* Simplify transitions */
    * {
        transition-duration: 0.2s !important;
    }
    
    /* Disable parallax effects */
    [data-parallax] {
        transform: none !important;
    }
}

/* ============================================
   MOBILE CARDS & COMPONENTS
   ============================================ */

@media (max-width: 768px) {
    .card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    /* Ensure cards don't overflow */
    .card,
    .terminal-window,
    .modal {
        max-width: 100%;
        width: 100%;
    }
}

/* ============================================
   MOBILE MODALS
   ============================================ */

@media (max-width: 768px) {
    .modal,
    .terminal-window {
        width: 95% !important;
        max-width: 95% !important;
        margin: 1rem auto;
        max-height: 90vh;
    }
    
    .modal-content {
        padding: 1rem;
    }
}

/* ============================================
   MOBILE IMAGES
   ============================================ */

@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Prevent SVG overflow */
    svg {
        max-width: 100%;
        height: auto;
    }
}