.timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 600px;
    margin: 0 auto;
    padding-top: 1.5rem;
}

/* vertical line */
.timeline::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    height: 100%;
    width: 2px;
    background: #ccc;
}

.timeline-event {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

/* dot marker */
.timeline-event::before {
    content: "";
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #4a90d9;
    position: relative;
}

.timeline-event time {
    font-weight: 700;
    white-space: nowrap;
}

.timeline-event p {
    margin-top: 0.25rem;
    line-height: 1.4;
}

/* Desktop: center the line, alternate sides */
@media (min-width: 640px) {
    .timeline { max-width: 700px; }
    .timeline::before { left: 50%; margin-left: -1px; }

    .timeline-event { gap: 0; }

    /* dot sits in the center via order */
    .timeline-event::before {
    order: 1;
    position: relative;
    }

    /* content takes exactly one half */
    .timeline-event .timeline-content {
    width: 50%;
    padding: 0 1rem;
    }

    /* left-side: content first (order 0), dot second (order 1), empty space fills the rest */
    .timeline-event.timeline-left .timeline-content { text-align: right; }
    .timeline-event.timeline-left::before { left: -6px; }

    /* right-side: row-reverse flips it so content goes right, dot stays in the center */
    .timeline-event.timeline-right { flex-direction: row-reverse; }
    .timeline-event.timeline-right::before { left: 6px; }
}