/* ======================================================================
   Sauce Founder Carousel  —  v1.2.3
   Widget: sauce-founder-carousel
   ====================================================================== */

/* Per-instance custom property defaults (overridden by <style> tag in PHP
   so media queries can still win). */
.sauce-founder-carousel {
    --sfc-card-w:   310px;
    --sfc-card-h:   480px;
    --sfc-gap:       20px;
    --sfc-voffset:   80px;
    --sfc-inset:      0px;  /* distance from viewport left to first card  */
    --sfc-top-pad:  100px;  /* space between section top and cards        */
}

/* ── Outer section ───────────────────────────────────────────────────── */
/* Full-bleed: breaks out of Elementor column to span the full viewport.
   Left items bleed off the viewport left edge as the track scrolls.
   Right edge clips at the viewport right. */
.sauce-founder-carousel {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    padding: var(--sfc-top-pad) 0 0;   /* top space above cards; no horiz padding */
    position: relative;
    box-sizing: border-box;
    cursor: default;
}
.sauce-founder-carousel.is-dragging { cursor: grabbing; }

/* Editor: plain horizontal scroll so the panel remains usable */
.sauce-founder-carousel[data-editor="true"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sauce-founder-carousel[data-editor="true"] .sfc__stage {
    overflow: visible;
}

/* ── Stage ───────────────────────────────────────────────────────────── */
/* Vertical padding = voffset so up/down offset cards have breathing room
   and aren't clipped by the outer overflow:hidden. */
.sfc__stage {
    padding-top:    var(--sfc-voffset);
    padding-bottom: var(--sfc-voffset);
    overflow: visible;
}

/* ── Track ───────────────────────────────────────────────────────────── */
.sfc__track {
    display: flex;
    align-items: flex-start; /* translateY per card drives vertical offset */
    gap: var(--sfc-gap);
    /* First card aligns with --sfc-inset from viewport left.
       Padding-right gives breathing room so last card doesn't hit the edge. */
    padding-left:  var(--sfc-inset);
    padding-right: var(--sfc-inset);
    width: max-content;
    will-change: transform;
    box-sizing: content-box;
}

/* ── Card ────────────────────────────────────────────────────────────── */
.sfc__card {
    position: relative;
    flex-shrink: 0;
    width:  var(--sfc-card-w);
    height: var(--sfc-card-h);
    overflow: hidden;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* Alternating vertical offset, driven by the (responsive) --sfc-voffset var
   so it adapts per breakpoint. Pattern repeats every 4 cards:
   2nd/6th/10th move up, 4th/8th/12th move down, others stay. */
.sfc__track .sfc__card:nth-child(4n + 2) { transform: translateY(calc(-1 * var(--sfc-voffset))); }
.sfc__track .sfc__card:nth-child(4n + 0) { transform: translateY(var(--sfc-voffset)); }

/* Background photo */
.sfc__card-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.sfc__card-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    transition: transform 0.5s ease;
}
.sfc__card:hover .sfc__card-bg img {
    transform: scale(1.04);
}

/* Gradient overlay — default set here; overridable via Elementor style tab */
.sfc__card-grad {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(to top, rgba(0,0,0,0.76) 0%, rgba(0,0,0,0) 55%);
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.sfc__card:hover .sfc__card-grad { opacity: 0; }

/* Default info: name + designation at bottom */
.sfc__card-info {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    z-index: 2;
    transition: opacity 0.22s ease;
}
.sfc__card:hover .sfc__card-info {
    opacity: 0;
    pointer-events: none;
}

/* ── Hover overlay ───────────────────────────────────────────────────── */
.sfc__card-hover {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: var(--sauce-hot-sauce, #FF5338);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 28px 24px 24px;
    opacity: 0;
    transition: opacity 0.35s ease;
    box-sizing: border-box;
}
.sfc__card:hover .sfc__card-hover { opacity: 1; }

/* One-liner: fills the upper portion of the hover overlay */
.sfc__card-liner {
    color: #ffffff;
    margin: 0;
    flex: 1;
    display: block;
    padding-bottom: 20px;
}

/* ── Card name (h5) and designation ─────────────────────────────────── */
/* No font-size / font-weight / line-height / letter-spacing / text-transform
   defaults — all inherited from theme or set via Elementor style controls. */
h5.sfc__card-name,
.sfc__card-name {
    color: #ffffff;
    margin: 0 0 4px;
    padding: 0;
}
.sfc__card-desig {
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    padding: 0;
}

/* ── Mobile ──────────────────────────────────────────────────────────── */
/* Media query overrides the PHP-injected custom props because the <style>
   tag uses an attribute selector while this uses the class — specificity
   is equal so source order wins, but :root in media query is cleaner. */
@media (max-width: 767px) {
    /* !important ensures mobile values beat the per-instance inline <style>
       which is parsed later than the enqueued stylesheet. */
    .sauce-founder-carousel {
        cursor: grab;
    }
}

/* ── 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; }