/* Mobile Overflow Fixes */

/* Fix 1: Ensure tag groups wrap on mobile */
.tags-group,
.tag-group {
    flex-wrap: wrap;
    max-width: 100%;
}

/* Fix 2: Allow tag text to wrap instead of truncating */
.tag {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Fix 3: Ensure containers don't overflow on mobile */
@media screen and (max-width: 991px) {

    .container-large,
    .container-medium,
    .container-small,
    .container-large-2 {
        max-width: 100%;
        overflow-x: hidden;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-wrapper-2,
    .main-wrapper {
        overflow-x: hidden;
        max-width: 100vw;
    }

    /* Ensure tag groups wrap properly on tablet */
    .tags-group,
    .tag-group {
        flex-wrap: wrap;
    }
}

/* Fix 4: Mobile portrait specific fixes */
@media screen and (max-width: 479px) {

    /* Ensure tags have proper spacing when wrapping */
    .tag {
        min-width: 0;
        padding: 0.5rem 0.75rem;
    }

    /* Ensure hero blocks don't overflow */
    .hero_block-tags,
    .hero_block-inner {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Fix any flex containers that might overflow */
    .cases_inner,
    .cases_inner-2,
    .cases_inner-3 {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Ensure images respect container width */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Fix 5: Prevent horizontal scroll on body */
body {
    overflow-x: hidden;
    max-width: 100vw;
}

html {
    overflow-x: hidden;
    max-width: 100vw;
}