/**
 * Enhanced Mobile Responsive Design
 * Ensures optimal display across all screen sizes (320px - 4K)
 */

/* Ensure images and media are fully responsive */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

iframe, video {
    max-width: 100%;
    height: auto;
}

/* EXTRA SMALL DEVICES (320px - 380px) */
@media (max-width: 380px) {
    /* Carousel buttons stack vertically */
    .carousel-buttons {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .carousel-buttons .theme-btn {
        width: 100%;
        display: block;
        font-size: 12px;
        padding: 10px 18px;
    }
    
    .carousel-buttons .mr-3 {
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* Better spacing for sections */
    .section-title {
        padding: 0 8px;
    }
    
    .section-title h2 {
        font-size: 20px !important;
        line-height: 1.2 !important;
    }
    
    .section-title p {
        font-size: 13px !important;
    }
    
    /* Gallery improvements */
    .gallery-section {
        padding: 60px 0 80px !important;
    }
    
    .gallery-item {
        margin-bottom: 16px !important;
    }
    
    .gallery-img-wrapper {
        height: 180px !important;
    }
    
    .gallery-content {
        padding: 14px !important;
    }
    
    .gallery-content h5 {
        font-size: 15px !important;
        margin-bottom: 8px !important;
    }
    
    .gallery-content p {
        font-size: 12px !important;
        line-height: 1.4 !important;
    }
    
    h3.text-center {
        font-size: 18px !important;
        margin-top: 20px !important;
        margin-bottom: 12px !important;
    }
    
    /* Improve form input sizing */
    input[type="text"],
    input[type="email"],
    input[type="phone"],
    textarea {
        font-size: 16px; /* Prevent zoom on iOS */
    }
    
    /* Carousel control sizing */
    .carousel-section-wrapper .carousel-control {
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    
    /* Container padding */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* SMALL DEVICES (381px - 480px) */
@media (min-width: 381px) and (max-width: 480px) {
    .carousel-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: center;
    }
    
    .carousel-buttons .theme-btn {
        font-size: 13px;
        padding: 10px 20px;
    }
    
    .section-title {
        padding: 0 12px;
    }
    
    .section-title h2 {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }
    
    .section-title p {
        font-size: 14px !important;
    }
    
    /* Gallery improvements */
    .gallery-section {
        padding: 70px 0 90px !important;
    }
    
    .gallery-item {
        margin-bottom: 18px !important;
    }
    
    .gallery-img-wrapper {
        height: 200px !important;
    }
    
    .gallery-content {
        padding: 16px !important;
    }
    
    .gallery-content h5 {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }
    
    .gallery-content p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }
    
    h3.text-center {
        font-size: 19px !important;
        margin-top: 24px !important;
        margin-bottom: 12px !important;
    }
    
    p.text-center {
        font-size: 13px !important;
    }
    
    /* Better contact form spacing */
    .contact-form-wrapper {
        padding: 20px 18px !important;
    }
    
    .contact-form-wrapper input,
    .contact-form-wrapper textarea {
        padding: 12px 18px;
        margin-bottom: 15px;
        font-size: 16px;
    }
    
    /* Container padding */
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* MEDIUM SMALL DEVICES (481px - 640px) */
@media (min-width: 481px) and (max-width: 640px) {
    .gallery-section {
        padding: 80px 0 100px !important;
    }
    
    .gallery-item {
        margin-bottom: 20px !important;
    }
    
    .gallery-img-wrapper {
        height: 220px !important;
    }
    
    .gallery-content {
        padding: 18px !important;
    }
    
    .gallery-content h5 {
        font-size: 17px !important;
    }
    
    h3.text-center {
        font-size: 20px !important;
        margin-top: 28px !important;
        margin-bottom: 14px !important;
    }
    
    /* Stack contact items on smaller tablets */
    .contact-section .contact-item-wrapper .row {
        flex-direction: column;
    }
    
    .contact-section .contact-item {
        margin-bottom: 15px;
    }
    
    .row.g-4 {
        gap: 1.25rem !important;
    }
}

/* MEDIUM DEVICES (641px - 768px) */
@media (min-width: 641px) and (max-width: 768px) {
    .carousel-buttons {
        gap: 12px;
    }
    
    .contact-section .contact-item-wrapper {
        margin-bottom: 25px;
    }
}

/* TABLETS & SMALL LAPTOPS (769px - 991px) */
@media (min-width: 769px) and (max-width: 991px) {
    /* Already handled by Bootstrap breakpoints */
}

/* LARGE DEVICES & UP (992px+) */
@media (min-width: 992px) {
    /* Desktop optimizations */
}

/* UNIVERSAL TOUCH IMPROVEMENTS */
@media (max-width: 768px) {
    /* Better gap spacing on mobile grids */
    .row.g-4 {
        gap: 1rem !important;
    }
    
    .row.g-4 > [class*="col-"] {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
    
    /* Ensure all interactive elements are at least 44px (Apple recommendation) */
    .theme-btn,
    button,
    a[role="button"],
    input[type="button"],
    input[type="submit"],
    .nav-link,
    .navbar-toggler {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better tap targets for links */
    a {
        padding: 8px 4px;
    }
    
    /* Improve spacing around interactive elements */
    button, input[type="button"], input[type="submit"] {
        margin: 5px;
    }
    
    /* Section title improvements */
    .section-title {
        margin-bottom: 30px !important;
    }
    
    .section-title span {
        display: inline-block;
        margin-bottom: 8px !important;
    }
    
    /* Better gallery styling on mobile */
    .gallery-section {
        padding-top: 60px !important;
        padding-bottom: 80px !important;
    }
    
    .mb-60 {
        margin-bottom: 30px !important;
    }
    
    /* Reduce section padding on mobile */
    .pt-130, .pt-100 { padding-top: 60px !important; }
    .pb-100, .pb-150 { padding-bottom: 80px !important; }
}

/* PREVENT TEXT ZOOM ON INPUT FOCUS (iOS) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    font-size: 16px;
}

/* Better responsive container handling */
@media (max-width: 576px) {
    .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    
    /* Single column for grid on very small screens */
    [class*="col-"] {
        width: 100%;
        flex-basis: 100%;
        max-width: 100%;
        padding-left: 6px;
        padding-right: 6px;
    }
}

/* LANDSCAPE ORIENTATION FIXES */
@media (max-height: 500px) and (orientation: landscape) {
    .carousel-section-wrapper .carousel-section,
    .carousel-section-wrapper .carousel-inner,
    .carousel-section-wrapper .carousel-inner .carousel-item {
        min-height: 300px;
    }
    
    /* Reduce padding for landscape mode */
    .carousel-buttons {
        margin-top: 10px;
        gap: 5px;
    }
}

/* VERY HIGH RESOLUTION & WIDE SCREENS (4K, Ultra-wide) */
@media (min-width: 1920px) {
    .container {
        max-width: 1500px;
    }
}

/* ENSURE PROPER SCALING FOR ALL DEVICES */
* {
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

/* Flexible container max-widths */
@media (min-width: 1024px) and (max-width: 1199px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .container {
        max-width: 1140px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

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

/* HIGH CONTRAST MODE SUPPORT */
@media (prefers-contrast: more) {
    body {
        letter-spacing: 0.05em;
    }
    
    .theme-btn {
        border-width: 2px;
    }
}

/* DARK MODE SUPPORT (Optional) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here if needed */
}