/**
 * archihub-mobile-fixes.css — targeted mobile-responsiveness fixes.
 *
 * Site-wide safety net plus specific fixes for defects found during the
 * Phase 0 beta-readiness mobile audit. Kept as a separate, developer-owned
 * stylesheet (not edited into Elementor's own generated CSS) so these
 * survive any future Elementor CSS regeneration.
 *
 * @package Archihub
 */

/* ── Site-wide safety net ────────────────────────────────────────────────
   A single stray element (a carousel, a fixed-width block, etc.) can push
   the whole page wider than the viewport and force horizontal scroll on
   mobile. This does not fix the underlying element — see the targeted
   fixes below for that — it just guarantees the page itself never scrolls
   sideways because of one. */

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

/* ── Elementor image-carousel (Swiper) overflow ──────────────────────────
   Several Elementor pages (e.g. the "Join Owners" partner-logo strip) use
   the image-carousel widget. On some mobile widths Swiper's own slide-
   width calculation runs ahead of a layout reflow and renders slides wider
   than the visible track, pushing the wrapper (and the page) past the
   viewport edge. Constraining the widget's own containers is the targeted
   fix; the safety net above is the backstop for any other instance of the
   same widget elsewhere on the site. */

@media ( max-width: 991px ) {
    .elementor-widget-image-carousel,
    .elementor-widget-image-carousel .elementor-image-carousel-wrapper,
    .elementor-widget-image-carousel .swiper {
        overflow: hidden;
        max-width: 100%;
    }
}

/* ── "Join Owners" closing statement — squeezed to one word per line ────
   This heading (Elementor element 72df7662, page 15532) has 150px of
   padding on every side with no mobile-breakpoint override. On a 375px
   screen that leaves ~75px for the actual text, wrapping it to a single
   narrow column. Elementor's own responsive controls were never set for
   this element; overriding here rather than in the builder since a CSS
   fix here survives regardless of who edits the page next in Elementor. */

@media ( max-width: 767px ) {
    .elementor-15532 .elementor-element.elementor-element-72df7662 {
        padding: 32px 20px !important;
    }
}