/* Responsive Design Enhancements */

/* Base responsive utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Mobile-first responsive breakpoints */
@media (max-width: 480px) {
    .container {
        padding: 0 0.5rem;
    }
    
    /* Typography scaling */
    h1 { font-size: 1.8rem; line-height: 1.2; }
    h2 { font-size: 1.5rem; line-height: 1.3; }
    h3 { font-size: 1.2rem; line-height: 1.4; }
    
    /* Navigation adjustments */
    .nav ul {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .nav li {
        width: 100%;
        text-align: center;
    }
    
    /* Gallery grid responsive */
    .photo-grid,
    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Form improvements */
    .form-group input,
    .form-group textarea {
        font-size: 16px; /* Prevents zoom on iOS */
    }
    
    /* Button spacing */
    .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .btn {
        width: 100%;
        padding: 0.75rem;
    }
}

@media (min-width: 481px) and (max-width: 768px) {
    /* Tablet styles */
    .photo-grid,
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
    
    .hero-section h1 {
        font-size: 2.2rem;
    }
    
    .systems {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    /* Small desktop/large tablet */
    .photo-grid,
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .systems {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1025px) {
    /* Large desktop */
    .photo-grid,
    .gallery-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Touch improvements */
@media (hover: none) and (pointer: coarse) {
    /* Touch device optimizations */
    .btn,
    .cta-button,
    .prototype-link {
        min-height: 44px; /* Apple's recommended touch target */
        padding: 0.75rem 1.5rem;
    }
    
    .nav a {
        padding: 0.75rem 1rem;
    }
    
    /* Remove hover effects on touch devices */
    .prototype:hover,
    .btn:hover {
        transform: none;
    }
}

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

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a1a;
        --text-primary: #ffffff;
        --accent-color: #4a9eff;
    }
}

/* Print styles */
@media print {
    .nav,
    .cta-buttons,
    .modal {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .container {
        max-width: none;
        margin: 0;
        padding: 0;
    }
}