/* ======================================================================
   Sauce Pantry Home Carousel  —  v1.6.0
   Widget: sauce-pantry-carousel
   Shares the position:sticky horizontal-scroll engine (Founder/Why Us).
   Two card types: image_bg (full background image) and color_bg.
   ====================================================================== */

.sauce-pantry-carousel {
    --spc-card-h:      560px;
    --spc-img-card-w:  720px;   /* image card (≈ double the colour card) */
    --spc-color-card-w:380px;
    --spc-gap:          24px;
    --spc-inset:         0px;
    --spc-top-pad:     100px;
    --spc-radius:        0px;
    --spc-voffset:      80px;   /* alternating up/down offset (like Founders) */
    --spc-color-img-h: 210px;   /* image height inside colour cards */

    width: 100vw;
    margin-left: calc(-50vw + 50%);
    /* No background on the widget itself — set it on the Elementor container. */
    background: transparent;
    padding: var(--spc-top-pad) 0 var(--spc-voffset);
    position: relative;
    box-sizing: border-box;
    cursor: default;
}
.sauce-pantry-carousel.is-dragging { cursor: grabbing; }

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

/* Stage / Track */
.spc__stage { overflow: visible; }
.spc__track {
    display: flex;
    align-items: stretch;
    gap: var(--spc-gap);
    padding-left:  var(--spc-inset);
    padding-right: var(--spc-inset);
    width: max-content;
    will-change: transform;
    box-sizing: content-box;
}

/* ── Card (link wrapper) ─────────────────────────────────────────────── */
.spc__card {
    position: relative;
    flex-shrink: 0;
    height: var(--spc-card-h);
    overflow: hidden;
    border-radius: var(--spc-radius);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

/* Widths by type */
.spc__card--image_bg { width: var(--spc-img-card-w); }
.spc__card--color_bg { width: var(--spc-color-card-w); }

/* Alternating vertical offset (reverse of Founders): 2nd down, 4th up. */
.spc__track .spc__card:nth-child(4n + 2) { transform: translateY(var(--spc-voffset)); }
.spc__track .spc__card:nth-child(4n + 0) { transform: translateY(calc(-1 * var(--spc-voffset))); }

/* ── Image-bg card: full background photo + bottom gradient ──────────── */
.spc__card--image_bg .spc__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.spc__card--image_bg .spc__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.spc__card--image_bg:hover .spc__bg img { transform: scale(1.04); }

.spc__card--image_bg .spc__grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.15) 45%, rgba(0,0,0,0) 70%);
    pointer-events: none;
}
.spc__card--image_bg .spc__body {
    position: relative;
    z-index: 2;
    margin-top: auto;          /* push content to the bottom */
    padding: 40px;
    color: #ffffff;
}

/* ── Color-bg card: solid colour, image inside, text placement ──────── */
.spc__card--color_bg {
    /* background-color is set inline from ACF card_background_color */
    padding: 36px 32px 32px;
}
.spc__card--color_bg .spc__title {
    margin: 0 0 24px;
}
.spc__card--color_bg .spc__inner-img {
    width: 100%;
    flex: 0 0 auto;
    margin-top: auto;          /* push image + body to the bottom */
    margin-bottom: 20px;
    overflow: hidden;
}
.spc__card--color_bg .spc__inner-img img {
    width: 100%;
    height: auto;
    display: block;
}
.spc__card--color_bg .spc__body {
    margin-top: 0;
}

/* ── Shared text bits ────────────────────────────────────────────────── */
.spc__title  { margin: 0 0 16px; }
.spc__byline { margin: 0 0 14px; white-space: pre-line; }
.spc__meta {
    display: flex;
    align-items: center;
    gap: 9px;
    text-transform: uppercase;
}
.spc__meta::before {
    content: '';
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--sauce-hot-sauce, #FF5338);
    flex-shrink: 0;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .sauce-pantry-carousel { cursor: grab; }
}