/* ═══════════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIXES — Prevents horizontal scroll on all devices
   ═══════════════════════════════════════════════════════════════ */

/* ─── FOOTER: Nav + Services side by side on mobile ───────── */
@media (max-width: 767px) {
    .elementor.elementor-19 .elementor-element.elementor-element-36bf932 {
        gap: 20px !important;
    }
    .elementor.elementor-19 .elementor-element.elementor-element-4968390.e-con.e-parent,
    .elementor.elementor-19 .elementor-element.elementor-element-be5b7a7.e-con.e-parent {
        --width: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
    }
}

/* Global overflow prevention */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* Elementor containers — prevent overflow */
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner,
.elementor-widget-wrap,
.elementor-widget-container {
    max-width: 100% !important;
}

/* Fixed elements must not exceed viewport */
.coastal-nav,
.coastal-header {
    max-width: 100vw !important;
    overflow: hidden;
}

/* Hero bg scale should not cause overflow */
.coastal-hero {
    overflow: hidden !important;
    max-width: 100vw !important;
}

/* All sections max-width */
.coastal-stats-bar,
.coastal-promise,
.coastal-services-preview,
.coastal-why,
.coastal-gallery-strip,
.coastal-testimonials,
.coastal-cta-banner,
.coastal-process,
.coastal-portfolio,
.coastal-page-hero,
.coastal-about-story,
.coastal-pmc-section,
.coastal-service-detail,
.coastal-contact-info,
.coastal-contact-form {
    max-width: 100vw !important;
    overflow-x: hidden;
}

/* Footer overflow fix */
.elementor-location-footer,
.elementor-location-footer .elementor-widget-container {
    max-width: 100vw !important;
    overflow-x: hidden;
}

/* ─── TABLET (768-1024px) ─────────────────────────────────── */
@media (max-width: 1024px) {
    /* Reduce section padding */
    .coastal-promise,
    .coastal-about-story,
    .coastal-pmc-section,
    .coastal-service-detail {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    /* 2-column layouts go single column */
    .coastal-promise__inner,
    .coastal-about-story__inner,
    .coastal-pmc-section__inner,
    .coastal-service-detail__inner {
        grid-template-columns: 1fr !important;
        gap: 48px !important;
    }

    /* Footer columns wrap */
    .coastal-footer__top {
        grid-template-columns: 1fr 1fr !important;
    }
}

/* ─── MOBILE (< 768px) ───────────────────────────────────── */
@media (max-width: 768px) {
    .coastal-promise,
    .coastal-about-story,
    .coastal-pmc-section,
    .coastal-service-detail,
    .coastal-portfolio,
    .coastal-contact-info,
    .coastal-contact-form {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }

    /* Single column everything */
    .coastal-promise__inner,
    .coastal-about-story__inner,
    .coastal-pmc-section__inner,
    .coastal-service-detail__inner {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    /* Contact: stack columns */
    .e-con--row {
        flex-direction: column !important;
    }

    .e-con--row > .e-con {
        width: 100% !important;
    }

    /* Footer: force row container to wrap, nav+services side by side */
    .elementor-location-footer .e-con[data-id="36bf932"] {
        flex-wrap: wrap !important;
        flex-direction: row !important;
    }

    /* All footer columns default to full width */
    .elementor-location-footer .e-con[data-id="36bf932"] > .e-con {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Reduce gap on mobile footer */
    .elementor-element.elementor-element-36bf932 {
        gap: 20px !important;
    }

    /* Nav + Services: side by side using Elementor unique class selectors */
    .elementor-element.elementor-element-4968390,
    .elementor-element.elementor-element-be5b7a7 {
        --width: calc(50% - 10px) !important;
        width: calc(50% - 10px) !important;
        max-width: calc(50% - 10px) !important;
        flex: 0 0 calc(50% - 10px) !important;
    }

    /* Page hero smaller text */
    .coastal-page-hero__heading {
        font-size: clamp(36px, 8vw, 56px) !important;
    }
}