/* Mobile-First Responsive Styles */

/* Base Mobile Styles (320px and up) */
@media (max-width: 640px) {
    /* Header adjustments */
    nav {
        padding: 1rem 1.5rem !important;
    }
    
    nav .flex {
        align-items: center;
    }
    
    nav span {
        font-size: 1.5rem !important;
        margin-left: 0.5rem !important;
    }
    
    nav img {
        height: 3rem !important;
        width: 3rem !important;
    }
    
    /* Hero section mobile optimization */
    #hero-content h1 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        padding: 0 1rem;
    }
    
    #hero-content p {
        font-size: 1.125rem !important;
        margin-bottom: 2rem !important;
        padding: 0 1rem;
    }
    
    #hero-content a {
        font-size: 1rem !important;
        padding: 0.875rem 1.5rem !important;
        margin: 0 1rem;
    }
    
    /* Section padding adjustments */
    .py-24 {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
    
    .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .pt-32 {
        padding-top: 6rem !important;
    }
    
    /* Text size adjustments */
    .text-6xl {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
    }
    
    .text-5xl {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .text-4xl {
        font-size: 1.875rem !important;
        line-height: 1.2 !important;
    }
    
    .text-3xl {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    .text-2xl {
        font-size: 1.25rem !important;
        line-height: 1.4 !important;
    }
    
    .text-xl {
        font-size: 1.125rem !important;
        line-height: 1.5 !important;
    }
    
    /* Container padding */
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Gallery grid mobile optimization */
    .grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .grid-cols-3 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .gap-8 {
        gap: 1rem !important;
    }
    
    /* Filter buttons mobile optimization */
    .flex-wrap {
        justify-content: center !important;
    }
    
    .filter-btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        margin: 0.25rem !important;
    }
    
    /* Contact form mobile optimization */
    .max-w-2xl {
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
    
    /* Blog post mobile optimization */
    .prose {
        padding: 0 1rem !important;
    }
    
    .prose h1 {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }
    
    .prose h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
    }
    
    /* Mobile menu improvements */
    #mobile-menu {
        background-color: rgba(255, 251, 247, 0.98) !important;
        backdrop-filter: blur(10px);
        border: none;
        border-radius: 0;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    #mobile-menu a {
        padding: 1rem 1.5rem !important;
        border-bottom: 1px solid rgba(183, 110, 121, 0.1);
        transition: all 0.3s ease;
    }
    
    #mobile-menu a:hover {
        background-color: var(--color-secondary) !important;
        transform: translateX(0.25rem);
    }
    
    /* Lightbox mobile optimization */
    #lightbox {
        padding: 1rem !important;
    }
    
    #lightbox-img,
    #lightbox-video {
        max-width: 95vw !important;
        max-height: 80vh !important;
    }
    
    #close-lightbox {
        top: 1rem !important;
        right: 1rem !important;
        font-size: 2rem !important;
    }
    
    #prev-lightbox,
    #next-lightbox {
        font-size: 2rem !important;
        left: 0.5rem !important;
        right: 0.5rem !important;
    }
    
    #next-lightbox {
        left: auto !important;
        right: 0.5rem !important;
    }
    
    /* Image aspect ratio preservation */
    .gallery-item img {
        width: 100% !important;
        height: 200px !important;
        object-fit: cover !important;
        border-radius: 0.5rem !important;
    }
    
    /* About page mobile optimization */
    .grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        gap: 2rem !important;
    }
    
    /* Footer mobile optimization */
    footer .grid {
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
        text-align: center !important;
        gap: 2rem !important;
    }
    
    /* Scroll to top button mobile */
    #scroll-to-top {
        bottom: 1rem !important;
        right: 1rem !important;
        width: 3rem !important;
        height: 3rem !important;
    }
}

/* Tablet Styles (641px to 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    /* Hero adjustments for tablet */
    #hero-content h1 {
        font-size: 3.5rem !important;
        line-height: 1.1 !important;
    }
    
    #hero-content p {
        font-size: 1.25rem !important;
    }
    
    /* Gallery grid for tablet */
    .grid-cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .gallery-item img {
        height: 250px !important;
    }
}

/* Small Desktop (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Container max width */
    .container {
        max-width: 95% !important;
    }
    
    /* Hero fine-tuning */
    #hero-content h1 {
        font-size: 4.5rem !important;
    }
    
    .gallery-item img {
        height: 280px !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    button,
    .filter-btn,
    a {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Remove hover effects on touch devices */
    .hover\:scale-105:hover {
        transform: none !important;
    }
    
    .hover\:shadow-lg:hover {
        box-shadow: none !important;
    }
    
    /* Make gallery items more touch-friendly */
    .gallery-item {
        padding: 0.25rem !important;
    }
}

/* Landscape phone optimization */
@media (max-height: 500px) and (orientation: landscape) {
    #hero-section {
        height: 100vh !important;
        padding: 2rem 0 !important;
    }
    
    #hero-content h1 {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    #hero-content p {
        font-size: 1rem !important;
        margin-bottom: 1rem !important;
    }
    
    #hero-content a {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* High DPI screen optimization */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Ensure images look crisp on retina displays */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}