/* =========================================================
   Beekom JOOOL Process Timeline
   v1.0.0
   ========================================================= */

.bk-jpt {
    --bk-jpt-bullet-size: 56px;
    --bk-jpt-line-width: 2px;
    --bk-jpt-step-gap: 56px;
    --bk-jpt-bullet-text-gap: 32px;

    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.bk-jpt *,
.bk-jpt *::before,
.bk-jpt *::after {
    box-sizing: border-box;
}

/* ---------- list ---------- */
.bk-jpt__list {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bk-jpt-step-gap);
    z-index: 2;
}

/* ---------- step ---------- */
.bk-jpt__step {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--bk-jpt-bullet-text-gap);
    margin: 0;
    padding: 0;
}

.bk-jpt__step::before { /* kill default ol marker if any theme reintroduces it */
    content: none;
}

/* ---------- bullet ---------- */
.bk-jpt__bullet-wrap {
    flex: 0 0 auto;
    width: var(--bk-jpt-bullet-size);
    height: var(--bk-jpt-bullet-size);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.bk-jpt__bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #0C1E3E;
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

/* ---------- body ---------- */
.bk-jpt__body {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: calc((var(--bk-jpt-bullet-size) - 1.2em) / 2); /* visually align title with bullet center */
}

.bk-jpt__title {
    margin: 0 0 16px 0;
    color: #0C1E3E;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
}

.bk-jpt__desc {
    color: #0C1E3E;
    font-size: 16px;
    line-height: 1.6;
}

.bk-jpt__desc :where(p, ul, ol) {
    margin: 0 0 0.75em 0;
}

.bk-jpt__desc :where(p, ul, ol):last-child {
    margin-bottom: 0;
}

.bk-jpt__desc ul,
.bk-jpt__desc ol {
    padding-left: 1.25em;
}

/* ---------- connecting line (absolute, behind bullets) ---------- */
.bk-jpt__line {
    position: absolute;
    top: 0;
    bottom: 0;
    /* horizontally centered on the bullet column */
    left: calc(var(--bk-jpt-bullet-size) / 2);
    transform: translateX(-50%);
    width: var(--bk-jpt-line-width);
    background-color: transparent; /* track invisible by default; we fake it via the fill */
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

/* the actual visible line (drawn segment) */
.bk-jpt__line-fill {
    display: block;
    width: 100%;
    height: 100%;
    background-color: #0C1E3E;
    transform-origin: top center;
}

/* ---------- ANIMATION ---------- */
/* Default (no animation OR all already revealed) — fully visible */
.bk-jpt__step {
    opacity: 1;
    transform: none;
    transition: opacity 600ms ease, transform 600ms ease;
}

/* Animated mode: hide steps until they become visible */
.bk-jpt--animate .bk-jpt__step {
    opacity: 0;
    transform: translateY(16px);
}

.bk-jpt--animate .bk-jpt__step.is-visible {
    opacity: 1;
    transform: none;
}

/* Animated line: start collapsed, JS sets the height progressively */
.bk-jpt--animate .bk-jpt__line-fill {
    height: 0;
    transition: height 400ms ease-out;
    will-change: height;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .bk-jpt__step,
    .bk-jpt--animate .bk-jpt__step,
    .bk-jpt--animate .bk-jpt__line-fill {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
    .bk-jpt--animate .bk-jpt__line-fill {
        height: 100% !important;
    }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
    .bk-jpt {
        --bk-jpt-bullet-size: 44px;
        --bk-jpt-step-gap: 40px;
        --bk-jpt-bullet-text-gap: 20px;
    }
    .bk-jpt__bullet {
        font-size: 14px;
    }
    .bk-jpt__title {
        font-size: 22px;
    }
    .bk-jpt__desc {
        font-size: 15px;
    }
}