/**
 * Mobile-Specific Fixes and Enhancements
 * Additional mobile optimizations for better user experience
 */

/* Ensure touch targets are at least 44x44px for mobile */
@media (max-width: 768px) {
    button,
    a,
    [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Improve text readability on mobile */
    body {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    
    /* Prevent horizontal scroll */
    html,
    body {
        overflow-x: hidden;
        width: 100%;
    }
    
    /* Better spacing for mobile sections */
    section {
        scroll-margin-top: 60px; /* Account for fixed header */
    }
}

/* Small mobile devices (320px - 480px) */
@media (max-width: 480px) {
    /* Reduce padding on very small screens */
    .container,
    [class*="max-w-"] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Smaller text on tiny screens */
    h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
    }
    
    /* Better button spacing */
    .flex.gap-4 > * {
        margin-bottom: 0.5rem;
    }
}

/* Improve form inputs on mobile */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
        padding: 0.75rem;
        min-height: 44px;
    }
}

/* Better image handling on mobile */
@media (max-width: 768px) {
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Prevent images from breaking layout */
    video {
        width: 100%;
        height: auto;
    }
}

/* Improve timeline slider on mobile */
@media (max-width: 640px) {
    #hero-timeline-slider {
        margin: 0;
    }
    
    #hero-timeline-slider button {
        min-width: 24px;
        min-height: 24px;
    }
    
    /* Ensure year labels don't overlap with heading */
    #hero-timeline-slider {
        margin-top: 1rem;
    }
    
    /* Better spacing for dynamic content */
    #hero-year-content {
        margin-top: 1.5rem;
    }
}

/* Better grid layouts on mobile */
@media (max-width: 640px) {
    .grid {
        gap: 1rem;
    }
    
    /* Stack all grids on mobile */
    .grid.grid-cols-2,
    .grid.grid-cols-3,
    .grid.grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* Improve card padding on mobile */
@media (max-width: 640px) {
    .rounded-xl,
    .rounded-lg,
    .rounded-2xl {
        padding: 1rem !important;
    }
}

/* Better hero section on mobile */
@media (max-width: 640px) {
    .min-h-screen {
        min-height: 70vh;
    }
    
    /* Reduce bottom margin on mobile */
    .mb-12,
    .mb-16 {
        margin-bottom: 2rem !important;
    }
}