/* ============================================
   TAMBOWASI MOBILE OPTIMIZATION
   Fix Horizontal Overflow & Performance
   ============================================ */

/* OPTIMIZE LAYOUT SHIFTS - ALL SCREENS */
img[loading="lazy"] {
    min-height: 200px;
    background: rgba(44, 62, 48, 0.05);
}

/* Mobile-specific fixes - ONLY APPLY ON MOBILE */
@media (max-width: 768px) {
    /* PREVENT HORIZONTAL OVERFLOW - AGGRESSIVE (MOBILE ONLY) */
    html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
        position: relative;
    }

    /* Ensure all containers respect viewport width */
    *,
    *::before,
    *::after {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Prevent images from exceeding container */
    img {
        max-width: 100% !important;
        height: auto;
    }

    /* Prevent iframes from exceeding container */
    iframe {
        max-width: 100% !important;
    }

    /* Prevent specific problematic elements */
    .container,
    .container-modern,
    .section-modern,
    section,
    div,
    nav,
    header,
    footer {
        max-width: 100% !important;
    }
    
    /* Continue with mobile-specific fixes */
    /* Prevent any element from causing horizontal scroll */
    body,
    html,
    .container,
    .container-modern,
    section,
    main,
    article,
    aside,
    header,
    footer,
    nav {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
    }
    
    /* Force all rows and columns to respect viewport */
    .row,
    .col,
    [class*="col-"],
    .grid,
    .flex {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* Prevent margins from causing overflow */
    body {
        margin: 0 !important;
    }
    
    /* Fix any element with negative margins */
    * {
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Fix retreat cards */
    .retreat-card {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Fix retreat gallery */
    .retreat-gallery-grid {
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .retreat-gallery-item {
        max-width: 100%;
    }
    
    .retreat-gallery-item img {
        width: 100%;
        max-width: 100%;
    }
    
    /* Fix forms */
    .tambowasi-form-container,
    .retreat-form-container {
        max-width: 100%;
        padding: 1.5rem 1rem;
    }
    
    /* Fix modals */
    .retreat-modal-content,
    .modal-modern-content {
        max-width: 95vw;
        margin: 1rem auto;
    }
    
    /* Fix buttons and inputs */
    button,
    input,
    select,
    textarea {
        max-width: 100%;
    }
    
    /* Fix WhatsApp split container */
    .whatsapp-split-container {
        max-width: 100%;
        flex-wrap: nowrap;
    }
    
    .whatsapp-country-code {
        flex-shrink: 0;
    }
    
    .whatsapp-number {
        flex-grow: 1;
        min-width: 0;
    }
    
    /* Fix navigation */
    .nav-submenu,
    .mobile-nav {
        max-width: 100vw;
    }
    
    /* Fix hero section */
    .hero-modern,
    .hero-slide {
        max-width: 100vw;
    }
    
    /* Fix video container */
    .video-container-modern {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 1rem !important;
        margin: 2rem auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        display: block !important;
    }
    
    .video-wrapper-modern {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        position: relative !important;
        padding-bottom: 56.25% !important; /* 16:9 aspect ratio */
        height: 0 !important;
        overflow: hidden !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
        background: #000 !important;
        display: block !important;
    }
    
    .video-wrapper-modern iframe {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        border: 0 !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Ensure Meet Tambo section displays correctly */
    .founder-modern-layout {
        max-width: 100% !important;
        display: block !important;
        grid-template-columns: 1fr !important;
        padding: 0 1rem !important;
        gap: 2rem !important;
    }
    
    .founder-photo-column,
    .founder-content-column {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto 2rem auto !important;
        position: relative !important;
        top: 0 !important;
    }
    
    .founder-image-frame {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
    
    .founder-image-frame img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        object-fit: cover;
    }
    
    .founder-stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .stat-card {
        max-width: 100% !important;
    }
    
    /* Fix About Carousel layout */
    .about-carousel-container {
        grid-template-columns: 1fr !important;
        padding: 0 1rem !important;
    }
    
    .about-grid-layout {
        grid-template-columns: 1fr !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .about-carousel-column {
        position: relative !important;
        top: 0 !important;
        margin-bottom: 2rem;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
    }
    
    .vertical-carousel-container {
        height: 400px !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
        position: relative !important;
        z-index: 1 !important;
        background: #f5efe7 !important;
    }
    
    .vertical-carousel {
        width: 100% !important;
        height: 100% !important;
        position: relative !important;
    }
    
    .vertical-carousel .carousel-item {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        top: 0 !important;
        left: 0 !important;
        opacity: 0 !important;
        transition: opacity 0.5s ease-in-out !important;
    }
    
    .vertical-carousel .carousel-item.active {
        opacity: 1 !important;
        z-index: 10 !important;
    }
    
    .vertical-carousel .carousel-item img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
        visibility: visible !important;
    }
    
    /* Fix specific problematic grids */
    .modern-style-3 .team-grid,
    .testimonial-grid,
    .location-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Extra small devices */
@media (max-width: 375px) {
    /* Ensure WhatsApp fields fit */
    .whatsapp-country-code {
        flex: 0 0 110px;
        min-width: 110px;
    }
    
    .whatsapp-country-code select {
        font-size: 14px;
        padding: 0.875rem 0.25rem;
        padding-right: 1.25rem;
    }
}

/* PERFORMANCE: Reduce animations on low-end devices */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}