/* ======================================================================
   Sauce Home Featured Brands Carousel  —  v1.5.1
   Widget: sauce-featured-brands
   Shares the position:sticky horizontal-scroll engine with Why Us Cards.
   ====================================================================== */

.sauce-featured-brands {
    --sfb-card-w:   420px;
    --sfb-card-h:   620px;
    --sfb-gap:        0px;
    --sfb-inset:      0px;
    --sfb-top-pad:  100px;
    --sfb-section-bg: transparent;
    --sfb-divider:  rgba(27, 62, 56, 0.18);

    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    background: var(--sfb-section-bg);  /* transparent by default; set via Section style if needed */
    padding: var(--sfb-top-pad) 0 0;
    position: relative;
    box-sizing: border-box;
    cursor: default;
}
.sauce-featured-brands.is-dragging { cursor: grabbing; }

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

/* Stage */
.sfb__stage {
    overflow: visible;
    padding-bottom: 0;
}

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

/* Manual horizontal scroll (sticky toggle off): the track scrolls inside the
   widget instead of being pinned. */
.sauce-featured-brands.is-manual {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.sauce-featured-brands.is-manual .sfb__track {
    transform: none !important;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.sfb__card {
    position: relative;
    flex-shrink: 0;
    width:  var(--sfb-card-w);
    height: var(--sfb-card-h);
    display: flex;
    flex-direction: column;
    padding: 40px 32px 36px;
    box-sizing: border-box;
    /* Borders belong to each CARD (top, bottom, and the right divider).
       The first card also gets a left border to close the strip. */
    border-top:    1px solid var(--sfb-divider);
    border-bottom: 1px solid var(--sfb-divider);
    border-right:  1px solid var(--sfb-divider);
}
.sfb__card:first-child { border-left: 1px solid var(--sfb-divider); }

/* Brand logo (ACF brand_logo_color), top-left */
.sfb__logo {
    height: 40px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
}
.sfb__logo img {
    max-height: 100%;
    max-width: 70%;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Brand thumbnail (case_study_brand_carousel_thumbnail) */
.sfb__thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    margin-bottom: 28px;
    flex-shrink: 0;
}
.sfb__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Backed-since label */
.sfb__backed {
    margin: 0 0 14px;
    text-transform: uppercase;
}

/* Description */
.sfb__desc { margin: 0; }
.sfb__desc p { margin: 0; }

/* ── Mobile: 2-per-row static grid (no sticky / no drag) ─────────────── */
@media (max-width: 767px) {
    .sauce-featured-brands {
        cursor: default;
        padding-top: var(--sfb-top-pad);
    }
    /* Track becomes a 2-column grid; clear any horizontal transform. */
    .sfb__track {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        gap: 0;
        padding: 0;
        transform: none !important;
        /* Grid outer edges: top + left on the container, each cell draws
           its right + bottom, so lines never double up. */
        border-top:  1px solid var(--sfb-divider);
        border-left: 1px solid var(--sfb-divider);
    }
    .sfb__card {
        width: auto !important;
        height: auto !important;
        padding: 22px 18px 26px;
        border-top: 0;
        border-left: 0;
        border-right:  1px solid var(--sfb-divider);
        border-bottom: 1px solid var(--sfb-divider);
    }
    .sfb__card:first-child { border-left: 0; }
    .sfb__logo { height: 30px; margin-bottom: 18px; }
    .sfb__thumb { margin-bottom: 18px; }
}