/* ======================================================================
   Sauce Timeline  —  v1.7.0
   Widget: sauce-timeline
   ====================================================================== */

.sauce-timeline {
    --stl-line-color:   rgba(255,255,255,0.45);
    --stl-dot-color:    rgba(255,255,255,0.7);
    --stl-active-color: var(--sauce-hot-sauce, #FF5338);
    --stl-year-color:   #ffffff;
    --stl-year-size:    30px;
    --stl-active-size:  44px;
    --stl-year-gap:     90px;
    --stl-left-pad:     0px;    /* where the active year settles from the left */
    --stl-edge-pad:     150px;  /* left/right padding so first/last year aren't cropped */
    --stl-dot-gap:      14px;   /* spacing between the dots on the line */
    --stl-dot-size:      3px;   /* diameter of each line dot */
    --stl-content-w:    1140px; /* Elementor content width for panels + nav */
    position: relative;
    width: 100%;
}

/* ── Rail (dotted line + scrolling years) ────────────────────────────── */
.stl__rail {
    position: relative;
    overflow: hidden;
    /* Full-bleed: the dotted line spans the full screen width, independent of
       the container the widget sits in. Panels + nav below stay at container
       width because they are not bled out. */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    box-sizing: border-box;
    /* Edge padding keeps the first and last year fully on screen. */
    padding-left:  var(--stl-edge-pad);
    padding-right: var(--stl-edge-pad);
}
/* The continuous dotted line sits static across the rail (spanning the
   padded edges too). */
.stl__rail::before {
    content: '';
    position: absolute;
    top: 14px;                 /* aligns with dot centres */
    left: 0;
    right: 0;
    height: var(--stl-dot-size);
    background-image: radial-gradient( circle,
        var(--stl-line-color) calc(var(--stl-dot-size) / 2),
        transparent           calc(var(--stl-dot-size) / 2) );
    background-size: var(--stl-dot-gap) var(--stl-dot-size);
    background-repeat: repeat-x;
    background-position: left center;
    z-index: 0;
}

.stl__track {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--stl-year-gap);
    position: relative;
    z-index: 1;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.1, 1);
    will-change: transform;
}

/* ── Year item ───────────────────────────────────────────────────────── */
.stl__year {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.stl__dot-wrap {
    height: 28px;              /* centre (14px) matches the rail line top */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.stl__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--stl-dot-color);
    transition: background 0.3s ease, width 0.3s ease, height 0.3s ease;
}
.stl__year.is-active .stl__dot {
    background: var(--stl-active-color);
    width: 16px;
    height: 16px;
}
.stl__year-label {
    margin: 0;
    padding: 0;
    color: var(--stl-year-color);
    font-size: var(--stl-year-size);
    line-height: 1;
    letter-spacing: 0.02em;
    transition: color 0.3s ease, font-size 0.3s ease;
    white-space: nowrap;
}
.stl__year.is-active .stl__year-label {
    color: var(--stl-active-color);
    font-size: var(--stl-active-size);
}

/* ── Arrow (advance) ─────────────────────────────────────────────────── */
.stl__arrow {
    position: absolute;
    right: calc(var(--stl-edge-pad) - 44px);
    top: 0;
    height: 28px;
    display: flex;
    align-items: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--stl-year-color);
    z-index: 2;
    padding: 0 4px;
}
.stl__arrow svg { width: 26px; height: 26px; display: block; }
.stl__arrow[disabled] { opacity: 0.3; pointer-events: none; }

/* ── Content panels ──────────────────────────────────────────────────── */
.stl__panels {
    position: relative;
    margin-top: 56px;
    max-width: var(--content-width, var(--stl-content-w));
    margin-left: auto;
    margin-right: auto;
}
.stl__panel { display: none; }
.stl__panel.is-active {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}
.stl__heading {
    margin: 0;
    color: var(--stl-year-color);
    text-transform: uppercase;
}
.stl__desc {
    margin: 0;
    color: var(--stl-year-color);
}
.stl__desc p { margin: 0 0 1em; }
.stl__desc p:last-child { margin-bottom: 0; }

/* ── Nav (Back / Next) ───────────────────────────────────────────────── */
.stl__nav {
    display: flex;
    gap: 32px;
    margin: 48px auto 0;
    max-width: var(--content-width, var(--stl-content-w));
}
.stl__btn {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--stl-year-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font: inherit;
    font-weight: 700;
    transition: opacity 0.2s ease;
}
.stl__btn svg { width: 16px; height: 16px; }
.stl__btn[disabled] { opacity: 0.35; pointer-events: none; }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .sauce-timeline {
        --stl-year-gap: 48px;
        --stl-year-size: 22px;
        --stl-active-size: 30px;
    }
    .stl__panel.is-active {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .stl__panels { margin-top: 40px; }
}