/* Mobile Optimization CSS for About Page */

/* Base mobile styles */
@media (max-width: 768px) {
    /* Improve touch targets */
    button, a, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better text readability */
    body {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }
    
    /* Optimize images */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Improve scrolling */
    html {
        -webkit-overflow-scrolling: touch;
    }
}

/* Small mobile devices */
@media (max-width: 480px) {
    .tw-text-lg {
        font-size: 1rem;
    }
    
    .tw-text-xl {
        font-size: 1.125rem;
    }
    
    .tw-px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .tw-gap-4 {
        gap: 1rem;
    }
}

/* Medium mobile devices */
@media (min-width: 481px) and (max-width: 768px) {
    .tw-text-lg {
        font-size: 1.125rem;
    }
    
    .tw-text-xl {
        font-size: 1.25rem;
    }
}

/* Landscape orientation */
@media (max-width: 768px) and (orientation: landscape) {
    .tw-min-h-[250px] {
        min-height: 180px;
    }
    
    .tw-h-[180px] {
        height: 120px;
    }
    
    .tw-py-6 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover effects on touch devices */
    .hover\:tw-bg-\[#0c2a43\]\/90:hover {
        background-color: #0c2a43;
    }
    
    .group:hover .group-hover\:tw-translate-x-1 {
        transform: none;
    }
    
    .group:hover .group-hover\:-tw-translate-x-40 {
        transform: none;
    }
    
    /* Add active states for touch */
    button:active, a:active, [role="button"]:active {
        transform: scale(0.98);
    }
}

/* Performance optimizations */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    .tw-transition-all {
        transition: all 0.2s ease;
    }
    
    /* Optimize shadows for mobile */
    .tw-shadow-xl {
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }
    
    .tw-shadow-2xl {
        box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.06);
    }
}

/* Accessibility improvements */
@media (max-width: 768px) {
    /* Ensure sufficient color contrast */
    .tw-text-gray-700 {
        color: #374151;
    }
    
    /* Improve focus indicators */
    a:focus, button:focus {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }
}

/* Loading optimizations */
@media (max-width: 768px) {
    /* Lazy loading for images */
    img[loading="lazy"] {
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    img[loading="lazy"].loaded {
        opacity: 1;
    }
}

/* Print styles */
@media print {
    .tw-bg-white {
        background: white !important;
    }
    
    .tw-shadow-xl,
    .tw-shadow-2xl {
        box-shadow: none !important;
    }
    
    .tw-transition-all {
        transition: none !important;
    }
}