/* ===================================
   RIVEX Mobile Viewport Scaling
   Desktop layout scaled proportionally for mobile
   =================================== */

/* Set a minimum viewport width to prevent layout breaking */
@media (max-width: 1024px) {
    /* Force desktop layout width */
    body {
        min-width: 1440px;
    }
    
    /* Scale down the entire page */
    html {
        /* Calculate scale based on viewport width */
        /* For 375px mobile: 375/1440 = 0.26 */
        /* For 768px tablet: 768/1440 = 0.53 */
    }
    
    /* Let browser handle the scaling via viewport meta tag */
    /* This is controlled by the viewport meta tag in HTML head */
}

/* Ensure videos and images scale properly */
video,
img {
    max-width: 100%;
    height: auto;
}

/* Fix for iOS Safari viewport height */
@supports (-webkit-touch-callout: none) {
    .swiper-slide {
        min-height: -webkit-fill-available;
    }
}

/* Ensure touch scrolling works smoothly */
.overflow-y-auto,
.swiper-slide {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Improve tap targets for touch devices */
@media (hover: none) and (pointer: coarse) {
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }
}