/* ======================================================================
   Sauce Why Us Cards  —  v1.4.0
   Widget: sauce-whyus-carousel
   Horizontal scroll engine shared with Founder Carousel.
   ====================================================================== */

.sauce-whyus-carousel {
    --swu-card-w:  640px;
    --swu-card-h:  420px;
    --swu-gap:      24px;
    --swu-inset:     0px;
    --swu-top-pad: 100px;
    --swu-card-bg: var(--sauce-sky, #D9E6ED);
    --swu-section-bg: var(--sauce-forest, #1B3E38);

    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    /* Opaque background so the section fully covers others while sticky. */
    background: var(--swu-section-bg);
    padding: var(--swu-top-pad) 0 0;
    position: relative;
    box-sizing: border-box;
    cursor: default;
}
.sauce-whyus-carousel.is-dragging { cursor: grabbing; }

/* Editor: plain horizontal scroll */
.sauce-whyus-carousel[data-editor="true"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sauce-whyus-carousel[data-editor="true"] .swu__stage {
    overflow: visible;
}

/* Stage */
.swu__stage {
    overflow: visible;
    padding-bottom: 40px;
}

/* Track */
.swu__track {
    display: flex;
    align-items: stretch;     /* equal-height cards */
    gap: var(--swu-gap);
    padding-left:  var(--swu-inset);
    padding-right: var(--swu-inset);
    width: max-content;
    will-change: transform;
    box-sizing: content-box;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.swu__card {
    position: relative;
    flex-shrink: 0;
    width:  var(--swu-card-w);
    height: var(--swu-card-h);
    background: var(--swu-card-bg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 48px;
    box-sizing: border-box;
}

/* Decorative image, sticks to the right edge of the card */
.swu__card-img {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
    max-height: 70%;
    width: auto;
    pointer-events: none;
    -webkit-user-drag: none;
}
.swu__card-img img {
    display: block;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

/* Heading — top of card */
.swu__card-head {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 60%;
}

/* Description — pushed to bottom */
.swu__card-desc {
    position: relative;
    z-index: 1;
    margin: auto 0 0;
    max-width: 56%;
}
.swu__card-desc p { margin: 0; }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .sauce-whyus-carousel {
        /* Card sizing controlled by responsive Elementor controls. */
        cursor: grab;
    }
    .swu__card { padding: 28px; }
    .swu__card-head,
    .swu__card-desc { max-width: 72%; }
    .swu__card-img  { right: 0; max-height: 50%; }
}

/* ── Pin stability ───────────────────────────────────────────────────── */
/* CSS smooth-scroll fights ScrollTrigger's scrubbed pin and causes vertical
   jitter. Force instant scroll resolution while this section is on the page. */
html { scroll-behavior: auto !important; }