/* ==========================================
   CRITICAL VIEWPORT AND IMAGE FIXES
   This file ensures nothing breaks the viewport
   =========================================== */

/* Force viewport constraints on everything */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
}

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

/* Critical: Prevent any element from causing horizontal scroll */
* {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Exception for elements that need full width */
html,
body,
.row,
[class*="col-"] {
    max-width: 100vw !important;
}

/* Force all images to be responsive (mobile only for aggressive sizing) */
@media screen and (max-width: 768px) {
    img,
    picture,
    video,
    canvas,
    svg {
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        display: block;
    }

    /* Tailwind and custom image classes */
    .w-full img,
    .hero-image,
    .split-image,
    .gallery-item,
    [class*="image"] {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* Container safety (mobile only; desktop uses normal layout widths) */
@media screen and (max-width: 768px) {
    .container,
    .container-fluid,
    [class*="container"],
    main,
    section,
    div {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* Grid layouts must not overflow */
[class*="grid"],
.grid,
[class*="flex"],
.flex {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Tailwind width classes safety */
.w-screen {
    max-width: 100vw !important;
}

.max-w-full {
    max-width: 100% !important;
}

/* Removed: global margin clamping (breaks desktop layouts) */

/* Safe margins for containers */
.container,
[class*="container"],
.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Responsive images on all devices */
@media screen and (max-width: 1920px) {
    img, picture, video, canvas, svg {
        max-width: 100% !important;
    }
}

/* Mobile specific */
@media screen and (max-width: 768px) {
    * {
        max-width: 100vw !important;
    }
    
    img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
    }
    
    .container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* Tablet specific */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    img {
        max-width: 100% !important;
    }
}

/* Prevent absolute positioned elements from causing overflow */
[class*="absolute"] {
    max-width: 100%;
}

/* Fixed positioning safety */
[class*="fixed"] {
    max-width: 100vw;
}