/* InfiNet patch for SP Page Builder carousel addon.
 *
 * Fixes three SPPB behaviors that misbehave out of the box:
 *
 *   1. Floated carousel items expand their parent container so the carousel
 *      JS reads a bloated outerWidth() and sizes items far larger than the
 *      viewport (feedback loop on resize). Clamp the wrapper chain. The
 *      `.sp-pagebuilder-addons / .sp-pagebuilder-addon` selectors target
 *      FEE-only wrappers; `.sppb-addon-wrapper` covers the public site.
 *
 *   2. When a carousel's total items already fit within items-per-view at
 *      the current breakpoint, SPPB still creates DOM clones and keeps
 *      autoplay cycling identical content. The companion JS tags such
 *      carousels with `.sppb-carousel-static`; the rules below neutralise
 *      the stage transforms, flex-stack the originals, and hide the clones.
 *
 *   3. On phones, items default to padding 15px 0 so testimonial text runs
 *      flush to the viewport edges. 20px horizontal gutter fixes that.
 *
 * Injected by plg_system_helixultimate when SPPB is detected on the page.
 * Companion JS: sppb-carousel.js (same folder).
 */

/* 1) Clamp the wrapper chain — both FEE-injected and public-site wrappers */
.sp-pagebuilder-addons,
.sp-pagebuilder-addon,
.sppb-addon-wrapper,
.sppb-addon-wrapper > .clearfix,
.sppb-addon.sppb-carousel-extended {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* 2a) Static carousel: undo inline transform/width, flex-lay remaining items */
.sppb-carousel-extended.sppb-carousel-static .sppb-carousel-extended-list,
.sppb-carousel-extended.sppb-carousel-static .sppb-carousel-extended-outer-stage {
    width: auto !important;
    max-width: 100% !important;
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
}
.sppb-carousel-extended.sppb-carousel-static .sppb-carousel-extended-outer-stage {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    overflow: visible !important;
}
.sppb-carousel-extended.sppb-carousel-static .sppb-carousel-extended-item {
    width: auto !important;
    float: none !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-right: 0 !important;
}
.sppb-carousel-extended.sppb-carousel-static .sppb-carousel-extended-item.clone {
    display: none !important;
}

/* 2b) Static carousel: hide dots + arrows — every item already visible */
.sppb-carousel-extended.sppb-carousel-static .sppb-carousel-extended-dots,
.sppb-carousel-extended.sppb-carousel-static .sppb-carousel-extended-nav-control {
    display: none !important;
}

/* 2d) Rotating (non-static) carousels: SPPB positions the dots with
       `position: absolute; bottom: N%`. Percentages are relative to the
       carousel's height, which changes per testimonial (short vs. long
       content) — so dots can overlap the testimonial name on long
       testimonials. Force the dots out of absolute flow and render them as
       a normal block below the content. This guarantees they never collide
       with variable-length content, regardless of what the SPPB
       `bullet_position_verti` admin field is set to. */
.sppb-carousel-extended:not(.sppb-carousel-static) .sppb-carousel-extended-dots {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    margin: 20px auto 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    text-align: center;
    z-index: 3;
}
/* Breathing room below the content so dots sit in their own row. */
.sppb-carousel-extended:not(.sppb-carousel-static) {
    padding-bottom: 20px !important;
}

/* 2c) Static carousel on phones (< tablet): 3-up side-by-side won't fit;
       give each item its own row. */
@media (max-width: 767.98px) {
    .sppb-carousel-extended.sppb-carousel-static .sppb-carousel-extended-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* 3) Mobile carousel item horizontal padding */
@media (max-width: 575.98px) {
    .sppb-carousel-extended-item {
        padding: 15px 20px !important;
        box-sizing: border-box;
    }
}

/* Port of SPPB's own local patch. SPPB ships position:relative;overflow:hidden
   on .sppb-carousel-extended-list; we just add the max-width clamp. */
.sppb-carousel-extended-list {
    max-width: 100% !important;
}