/* ============================================
   MOBILE RESPONSIVE FIXES - PRODUCTION READY
   ============================================ */

/* TABLET (481px - 768px) - Keep carousel horizontal with smaller cards */
@media (min-width: 481px) and (max-width: 768px) {
    
    /* ===== TESTIMONIALS SECTION - TABLET ===== */
    
    .testimonials-carousel-container {
        height: 350px !important;
        overflow: hidden !important;
    }
    
    .testimonials-carousel {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.5rem !important;
        animation: testimonialsSlide 50s linear infinite !important;
    }
    
    .testimonial-card {
        flex: 0 0 280px !important;
        min-width: 280px !important;
        width: 280px !important;
        padding: 1.25rem !important;
    }
    
    .testimonial-avatar {
        width: 50px !important;
        height: 50px !important;
    }
    
    .testimonial-name {
        font-size: 1rem !important;
    }
    
    .testimonial-position {
        font-size: 0.875rem !important;
    }
    
    .testimonial-text {
        font-size: 0.875rem !important;
    }
    
    /* ===== WHY CHOOSE US SECTION - TABLET ===== */
    
    .why-choose-carousel-container {
        height: 380px !important;
        overflow: hidden !important;
    }
    
    .why-choose-carousel {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.5rem !important;
        animation: whyChooseSlide 45s linear infinite !important;
    }
    
    .why-choose-card {
        flex: 0 0 280px !important;
        min-width: 280px !important;
        width: 280px !important;
        padding: 1.25rem !important;
    }
    
    .why-choose-card div[style*="font-size: 48px"] {
        font-size: 40px !important;
    }
    
    .why-choose-card h3 {
        font-size: 1.125rem !important;
    }
    
    .why-choose-card p {
        font-size: 0.875rem !important;
    }
}

/* MOBILE (max-width: 480px) - Keep carousel horizontal with even smaller cards */
@media (max-width: 480px) {
    
    /* ===== TESTIMONIALS SECTION - MOBILE ===== */
    
    .testimonials-carousel-container {
        height: 320px !important;
        overflow: hidden !important;
    }
    
    .testimonials-carousel {
        display: flex !important;
        flex-direction: row !important;
        gap: 1rem !important;
        animation: testimonialsSlide 50s linear infinite !important;
    }
    
    .testimonial-card {
        flex: 0 0 260px !important;
        min-width: 260px !important;
        width: 260px !important;
        padding: 1rem !important;
    }
    
    .testimonial-avatar {
        width: 45px !important;
        height: 45px !important;
    }
    
    .testimonial-name {
        font-size: 0.875rem !important;
    }
    
    .testimonial-position {
        font-size: 0.75rem !important;
    }
    
    .testimonial-text {
        font-size: 0.8125rem !important;
        line-height: 1.5 !important;
    }
    
    /* ===== WHY CHOOSE US SECTION - MOBILE ===== */
    
    .why-choose-carousel-container {
        height: 350px !important;
        overflow: hidden !important;
    }
    
    .why-choose-carousel {
        display: flex !important;
        flex-direction: row !important;
        gap: 1rem !important;
        animation: whyChooseSlide 45s linear infinite !important;
    }
    
    .why-choose-card {
        flex: 0 0 260px !important;
        min-width: 260px !important;
        width: 260px !important;
        padding: 1rem !important;
    }
    
    .why-choose-card div[style*="font-size: 48px"] {
        font-size: 36px !important;
    }
    
    .why-choose-card h3 {
        font-size: 1rem !important;
    }
    
    .why-choose-card p {
        font-size: 0.8125rem !important;
    }
}

/* ALL MOBILE DEVICES - Common fixes */
@media (max-width: 768px) {
    
    /* ===== ENSURE CAROUSELS STAY HORIZONTAL ===== */
    
    /* Force testimonials carousel to stay horizontal */
    .testimonials-carousel-container {
        position: relative !important;
        overflow: hidden !important;
    }
    
    .testimonials-carousel {
        display: flex !important;
        flex-direction: row !important;
        will-change: transform !important;
    }
    
    /* Force why choose carousel to stay horizontal */
    .why-choose-carousel-container {
        position: relative !important;
        overflow: hidden !important;
    }
    
    .why-choose-carousel {
        display: flex !important;
        flex-direction: row !important;
        will-change: transform !important;
    }
    
    /* ===== GOOGLE MAPS CENTER FIX ===== */
    
    /* Ensure maps iframe is centered and full width */
    #hubungi-kami iframe[src*="google.com/maps"] {
        width: 100% !important;
        max-width: 100% !important;
        height: 300px !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    /* Maps container wrapper */
    #hubungi-kami div[style*="border-radius"][style*="overflow: hidden"] {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* Maps parent container */
    #hubungi-kami > div > div > div[style*="position: relative"] {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }
    
    /* ===== PREVENT HORIZONTAL SCROLL ===== */
    
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        position: relative !important;
    }
    
    * {
        max-width: 100% !important;
    }
    
    /* Ensure all sections don't overflow */
    section {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    /* ===== CONTACT SECTION GRID FIX ===== */
    
    /* Contact cards grid - single column */
    #hubungi-kami div[style*="grid-template-columns: repeat(2, 1fr)"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Contact main layout - stack vertically */
    #hubungi-kami > div > div[style*="grid-template-columns: 1fr 1fr"] {
        display: flex !important;
        flex-direction: column !important;
        gap: 2rem !important;
    }
}

/* SMALL PHONES - Additional fixes */
@media (max-width: 480px) {
    
    /* Smaller maps on very small screens */
    #hubungi-kami iframe[src*="google.com/maps"] {
        height: 250px !important;
    }
}

/* LANDSCAPE ORIENTATION FIX */
@media (max-width: 768px) and (orientation: landscape) {
    
    /* Reduce maps height in landscape */
    #hubungi-kami iframe[src*="google.com/maps"] {
        height: 250px !important;
    }
}