/* Revuteck frontend section responsive guard - 2026-08-21
   Purpose: prevent horizontal overflow and make dynamic/native sections behave consistently
   on tablets and phones without overriding each section's own visual design. */

@media (max-width: 991.98px) {
    html, body { max-width: 100%; }
    body { overflow-x: clip; }

    .rv-finoptiz-sections,
    .rv-finoptiz-single-section,
    .rvt-rvn-section,
    .rvt-project-gallery,
    .rvt-tech-scroll-section,
    .sd-section,
    .rvtpd-section {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .rv-finoptiz-sections,
    .rv-finoptiz-single-section,
    .sd-section,
    .rvtpd-section { overflow-x: clip; }

    .rv-finoptiz-sections *,
    .rv-finoptiz-single-section *,
    .rvt-rvn-section *,
    .rvt-project-gallery *,
    .rvt-tech-scroll-section *,
    .sd-section *,
    .rvtpd-section * {
        box-sizing: border-box;
        min-width: 0;
    }

    .rv-finoptiz-sections :where(img, video, iframe, canvas),
    .rv-finoptiz-single-section :where(img, video, iframe, canvas),
    .sd-section :where(img, video, iframe, canvas),
    .rvtpd-section :where(img, video, iframe, canvas) {
        max-width: 100%;
    }

    .rv-finoptiz-sections :where(h1,h2,h3,h4,h5,h6,p,a,span),
    .rv-finoptiz-single-section :where(h1,h2,h3,h4,h5,h6,p,a,span),
    .sd-section :where(h1,h2,h3,h4,h5,h6,p,a,span),
    .rvtpd-section :where(h1,h2,h3,h4,h5,h6,p,a,span) {
        overflow-wrap: break-word;
        word-break: normal;
    }

    .rv-finoptiz-sections :where(input,select,textarea,button),
    .rv-finoptiz-single-section :where(input,select,textarea,button),
    .sd-section :where(input,select,textarea,button),
    .rvtpd-section :where(input,select,textarea,button) {
        max-width: 100%;
    }

    .rv-finoptiz-sections table,
    .rv-finoptiz-single-section table,
    .sd-section table,
    .rvtpd-section table {
        max-width: 100%;
    }

    /* Service + portfolio native container guard. */
    .sd-section > .tf-container,
    .sd-section > .container,
    .rvtpd-section > .tf-container,
    .rvtpd-section > .container,
    .sd-section .tf-container,
    .rvtpd-section .tf-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Content + Lead Generation: guaranteed one-column layout on smaller screens. */
    .rv-finoptiz-sections .luma-content-lead-container {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: minmax(0,1fr) !important;
    }
    .rv-finoptiz-sections .luma-content-lead-copy,
    .rv-finoptiz-sections .luma-content-lead-form-card,
    .rv-finoptiz-sections .luma-content-lead-carousel { width: 100%; max-width: 100%; }

    /* Embedded video players should never create page-level horizontal overflow. */
    .rv-finoptiz-sections :where(.luma-video-player,.video-player,.media-player,[class*="video-wrap"],[class*="video-container"],[class*="media-wrap"]) {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .rv-finoptiz-sections,
    .rv-finoptiz-single-section { width: 100vw; max-width: 100%; }

    .rv-finoptiz-sections :where(.container,.container-fluid),
    .rv-finoptiz-single-section :where(.container,.container-fluid),
    .sd-section :where(.container,.tf-container),
    .rvtpd-section :where(.container,.tf-container) {
        max-width: 100% !important;
        padding-left: 14px;
        padding-right: 14px;
    }

    .rv-finoptiz-sections :where(form,.form-row,.row),
    .rv-finoptiz-single-section :where(form,.form-row,.row) { max-width: 100%; }

    .rv-finoptiz-sections :where(input,select,textarea),
    .rv-finoptiz-single-section :where(input,select,textarea) {
        width: 100%;
        min-width: 0;
    }

    .rv-finoptiz-sections table,
    .rv-finoptiz-single-section table,
    .sd-section table,
    .rvtpd-section table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Project Gallery */
    .rvt-project-gallery { padding-left: 12px !important; padding-right: 12px !important; }
    .rvt-project-gallery__inner,
    .rvt-project-gallery__grid { width: 100%; max-width: 100%; }
    .rvt-project-gallery__item,
    .rvt-project-gallery__item.is-full,
    .rvt-project-gallery__item.is-third { grid-column: 1 / -1 !important; width: 100%; }
    .rvt-project-gallery__media { width: 100%; min-height: 0; }
    .rvt-project-gallery__media.ratio-auto img,
    .rvt-project-gallery__media.ratio-auto video { min-height: 0; max-height: none; }
    .rvt-project-gallery__modal { padding: 12px; }
    .rvt-project-gallery__modal-box { width: min(100%, calc(100vw - 24px)); max-height: calc(100dvh - 24px); }

    /* Tech Scroll */
    .rvt-tech-scroll-section { padding-left: 8px !important; padding-right: 8px !important; }
    .rvt-tech-scroll-shell { width: 100%; max-width: 100%; }
    .rvt-tech-scroll-top { padding-left: 18px !important; padding-right: 18px !important; }
    .rvt-tech-scroll-stage { margin-left: 6px !important; margin-right: 6px !important; }
    .rvt-tech-scroll-marquee { max-width: 100%; }

    /* Content + Lead Generation */
    .rv-finoptiz-sections .luma-content-lead-section { padding-left: 12px !important; padding-right: 12px !important; }
    .rv-finoptiz-sections .luma-content-lead-container { padding-left: 14px !important; padding-right: 14px !important; }
    .rv-finoptiz-sections .luma-content-lead-form { grid-template-columns: minmax(0,1fr) !important; }
    .rv-finoptiz-sections .luma-content-lead-field,
    .rv-finoptiz-sections .luma-content-lead-field.is-half { grid-column: 1 / -1 !important; }
}

@media (max-width: 430px) {
    .rv-finoptiz-sections :where(.container,.container-fluid),
    .rv-finoptiz-single-section :where(.container,.container-fluid),
    .sd-section :where(.container,.tf-container),
    .rvtpd-section :where(.container,.tf-container) {
        padding-left: 12px;
        padding-right: 12px;
    }

    .rvt-project-gallery__header { margin-bottom: 22px; }
    .rvt-project-gallery__header h2 { font-size: clamp(30px, 10vw, 40px); }
    .rvt-tech-scroll-title { font-size: clamp(28px, 9.5vw, 38px) !important; }
}

/* Mobile section hardening - 2026-08-26
   Shared by Service, Sub-service, Portfolio and Landing dynamic sections. */
@media (max-width: 767.98px) {
    .rv-finoptiz-sections > *,
    .rv-finoptiz-single-section > * {
        max-width: 100%;
    }

    .rv-finoptiz-sections :where(
        [class$="-inner"],
        [class*="-inner "],
        [class$="-container"],
        [class*="-container "],
        [class$="-shell"],
        [class*="-shell "],
        [class$="-wrap"],
        [class*="-wrap "]
    ),
    .rv-finoptiz-single-section :where(
        [class$="-inner"],
        [class*="-inner "],
        [class$="-container"],
        [class*="-container "],
        [class$="-shell"],
        [class*="-shell "],
        [class$="-wrap"],
        [class*="-wrap "]
    ) {
        max-width: 100%;
        min-width: 0;
    }

    .rv-finoptiz-sections :where(img,video,iframe,canvas,svg),
    .rv-finoptiz-single-section :where(img,video,iframe,canvas,svg) {
        max-width: 100%;
    }

    .rv-finoptiz-sections :where(h1,h2,h3,h4,h5,h6,p),
    .rv-finoptiz-single-section :where(h1,h2,h3,h4,h5,h6,p) {
        max-width: 100%;
    }

    /* Full-service editing: phone = swipe rail, never a squeezed four-column grid. */
    .rv-finoptiz-sections .fse-grid,
    .rv-finoptiz-sections .fse-layout-short .fse-grid,
    .rv-finoptiz-sections .fse-layout-long .fse-grid {
        display: flex !important;
        grid-template-columns: none !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        width: calc(100% + 14px) !important;
        max-width: none !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        gap: 14px !important;
        margin-right: -14px !important;
        padding: 4px 18px 18px 2px !important;
        scroll-snap-type: x proximity;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .rv-finoptiz-sections .fse-grid::-webkit-scrollbar { display: none; }
    .rv-finoptiz-sections .fse-card-short_form,
    .rv-finoptiz-sections .fse-layout-short .fse-card {
        flex: 0 0 clamp(158px,44vw,205px) !important;
        width: clamp(158px,44vw,205px) !important;
        min-width: 158px !important;
        max-width: none !important;
        scroll-snap-align: start;
    }
    .rv-finoptiz-sections .fse-card-long_form,
    .rv-finoptiz-sections .fse-layout-long .fse-card {
        flex: 0 0 min(82vw,360px) !important;
        width: min(82vw,360px) !important;
        min-width: min(82vw,300px) !important;
        max-width: 360px !important;
        scroll-snap-align: start;
    }

    /* Prevent floating CTA/chat controls from becoming wider than the phone viewport. */
    .rv-finoptiz-sections :where(.fse-chat,.lfv-floating-chat,.veh-chat) {
        max-width: calc(100vw - 28px) !important;
    }

    /* Forms/buttons in dynamic sections should wrap instead of forcing horizontal overflow. */
    .rv-finoptiz-sections :where([class*="actions"],[class*="buttons"],[class*="cta-wrap"]) {
        max-width: 100%;
    }
    .rv-finoptiz-sections :where(a,button) {
        overflow-wrap: normal;
    }
}

@media (max-width: 430px) {
    .rv-finoptiz-sections .fse-card-short_form,
    .rv-finoptiz-sections .fse-layout-short .fse-card {
        flex-basis: clamp(154px,43vw,184px) !important;
        width: clamp(154px,43vw,184px) !important;
        min-width: 154px !important;
    }
    .rv-finoptiz-sections .fse-card-long_form,
    .rv-finoptiz-sections .fse-layout-long .fse-card {
        flex-basis: 84vw !important;
        width: 84vw !important;
        min-width: 280px !important;
    }
}