/* ==========================================================================
   Sauce Home Hero Brands Carousel  —  v1.2.0
   Widget: sauce-home-hero-carousel
   ========================================================================== */

:root { --sauce-hot-sauce: #FF5338; }

/* ── Full-bleed wrapper ────────────────────────────────────────────────────
   Breaks out of any Elementor column padding so the strip always fills
   the full viewport width.
   If the parent section is already 100vw with no padding, this is a no-op.
   ────────────────────────────────────────────────────────────────────────── */
.sauce-hero-carousel {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    /* Clip horizontally (the marquee) but allow vertical room so the hover
       scale is never cropped. Padding gives the scaled item breathing space. */
    overflow-x: clip;
    overflow-y: visible;
    padding-top: 28px;
    padding-bottom: 28px;
    position: relative;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
    touch-action: pan-y;
}
.sauce-hero-carousel.is-dragging { cursor: grabbing; }

/* ── Track ─────────────────────────────────────────────────────────────── */
.sauce-hc__track {
    display: flex;
    align-items: center;   /* vertically center items of varying heights */
    will-change: transform;
    position: relative;
    gap: 0;
}

/* ── Item ──────────────────────────────────────────────────────────────── */
.sauce-hc__item {
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    /* Scale from center so growth is symmetric and never clipped */
    transform-origin: center center;
    transition: transform 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Scale up on hover — suppressed while dragging */
.sauce-hero-carousel:not(.is-dragging) .sauce-hc__item:hover {
    transform: scale(1.07);
    z-index: 10 !important;
}

/* ── Image ─────────────────────────────────────────────────────────────── */
.sauce-hc__img-wrap {
    overflow: hidden;   /* clips parallax room + hover scale bleed */
    width: 100%;
    position: relative;
}

/* 110% wide so ±8px parallax shift doesn't show background at edges */
.sauce-hc__img-inner {
    width: 110%;
    margin-left: -5%;
    will-change: transform;
}

.sauce-hc__img-inner img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
}

/* ── Label (hidden; revealed on hover) ─────────────────────────────────── */
.sauce-hc__label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.28s ease, transform 0.28s ease;
    pointer-events: none;
    overflow: hidden;
}

.sauce-hero-carousel:not(.is-dragging) .sauce-hc__item:hover .sauce-hc__label {
    opacity: 1;
    transform: translateY(0);
}

.sauce-hc__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--sauce-hot-sauce, #FF5338);
    flex-shrink: 0;
}

.sauce-hc__name {
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(100% - 17px); /* dot + gap */
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .sauce-hc__item { width: 28vw !important; }
    .sauce-hc__dot  { width: 7px; height: 7px; }
    .sauce-hc__name { font-size: 10px; letter-spacing: 0.06em; }
}

@media (max-width: 480px) {
    .sauce-hc__item { width: 33vw !important; }
}