:root {
    --timeline-width: 1px;
    --timeline-color: #009cbc;
    --timeline-dot-size: 16px;
    --timeline-dot-border-size: 4px;
    --timeline-dot-border-color: #fff;
    --timeline-gap: 8rem;
    --timeline-max-width: 960px;
    --row-gap: 0;
    --col-gap: 20px;
}

.timeline-container .kt-inside-inner-col {
    position:relative;
    display:flex;
    flex-direction:column;
    gap: var(--row-gap);
}

.timeline-container .kt-inside-inner-col::before {
    content: '';
    position: absolute;
    top: -50px;
    bottom: 0px;
    left: 50%;
    width: var(--timeline-width);
    background: var(--timeline-color, #009cbc);
    z-index: 1;
    transform: translateX(-50%);
}

.timeline-container .kt-inside-inner-col::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    height: 12px;
    width: 12px;
    background: var(--timeline-color, #009cbc);
    border-radius: 99vw;
    transform: translateX(-50%);
}

.timeline-block {
    position:relative;
    width: calc(50% - var(--col-gap));
}

.timeline-block:nth-child(odd) {
    align-self:flex-start;
}

.timeline-block:nth-child(even) {
    align-self:flex-end;
}

.timeline-block:nth-child(2) {
    margin-top: 20px;
}

.timeline-block:nth-child(odd) > * {
    text-align: right;
}

/* Dots */
.timeline-block::before {
    content: '';
    position: absolute;
    top: 32px;
    transform: translateY(-50%);
    width: var(--timeline-dot-size);
    height: var(--timeline-dot-size);
    background-color: var(--timeline-color);
    border: var(--timeline-dot-border-size) solid var(--timeline-dot-border-color);
    border-radius: 50%;
    z-index: 3;
}

.timeline-block:nth-child(odd)::before {
    right: calc(-1 * (var(--timeline-width, 3px) / 2 + 28px));
}

.timeline-block:nth-child(even)::before {
    left: calc(-1 * (var(--timeline-width, 3px) / 2 + 28px ));
}

/* Triangle (left blocks) */
.timeline-block:nth-child(odd)::after {
    content: '';
    position: absolute;
    top: 24px;
    right: -8px;
    width: 16px;
    height: 16px;
    background: var(--timeline-color);
    clip-path: polygon(0 0, 100% 100%, 100% 0);
    transform: rotate(45deg);
    border-radius: 0 4px 0 0;
    z-index: 999;
}

/* Triangle (right blocks) */
.timeline-block:nth-child(even)::after {
    content: '';
    position: absolute;
    top: 24px;
    left: -8px;
    width: 16px;
    height: 16px;
    background: var(--timeline-color);
    clip-path: polygon(0 0, 0 100%, 100% 0);
    transform: rotate(-45deg);
    border-radius: 4px 0 0 0;
    z-index: 10;
}

/* Responsive: single column stack */
/* ─── Mobile: stack ─────────────────────────────────────────── */
@media (max-width: 900px){
    :root {
        --timeline-gap: 20px;
    }
    /* reserve room for the spine */
    .timeline-container .kt-inside-inner-col {
        gap: var(--timeline-gap);
        padding-left: 20px; /* space for line + dots */
    }
    
    /* move spine to the left */
    .timeline-container .kt-inside-inner-col::before {
        top: 32px;
        left: 0px; /* spine x */
        transform: none;
    }
    .timeline-container .kt-inside-inner-col::after {
        left: 0px;
        transform: translateX(-50%);
    }
    
    /* each block full width, no alternating alignment */
    .timeline-block {
        width: 100%;
        align-self: stretch;
        margin: 0;
    }

     /* overrides nth-child(2) */
    .timeline-block + .timeline-block {
        margin-top: 0;
    }
    .timeline-block {
        margin: 0;
    }
    
    .timeline-block:nth-child(odd) > * {
        text-align: left;
    }
    
    /* dot always on the left (aligned with spine) */
    .timeline-block::before {
        left: -20px !important; /* equals padding-left - spine x */
        right: auto !important;
        transform: translate(-50%,-50%);
    }
    
    /* ear always on the left */
    .timeline-block::after {
        left: -8px !important;
        right: auto !important;
        transform: rotate(-45deg) !important;
        clip-path: polygon(0 0, 0 100%, 100% 0) !important;
        border-radius: 4px 0 0 0 !important;
    }
}