/*--------------------------------------------------------------
# Vertical Timeline - Final Polish
--------------------------------------------------------------*/

/* Main container */
.vertical-timeline-container {
    width: 90%;
    max-width: 1170px;
    margin: 50px auto;
    position: relative;
    --timeline-progress-stop: 0%; /* Default value for the gradient stop */
}

/* Central vertical line */
.vertical-timeline-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    width: 4px;
    /* Updated background to use a gradient based on a CSS variable */
    background: linear-gradient(
        to bottom,
        gold 0%,
        gold var(--timeline-progress-stop),
        #e9ecef var(--timeline-progress-stop),
        #e9ecef 100%
    );
    z-index: 1;
}

/* Block for each item, using Flexbox */
.timeline-block {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 2em 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.timeline-block.is-visible { opacity: 1; transform: translateY(0); }
.timeline-block:first-child { margin-top: 0; }

/* Reverse direction for even items */
.timeline-block:nth-child(even) {
    flex-direction: row-reverse;
}

/* Spacer and Card take up ~45% width */
.timeline-spacer, .timeline-card {
    width: 45%;
}

/* Card styles */
.timeline-card {
    position: relative;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e9ecef;
    box-shadow: 0 3px 8px rgba(0,0,0,0.05);
    padding: 20px;
}

/* Arrow pointing to the timeline */
.timeline-card::before {
    content: '';
    position: absolute;
    top: 20px;
    width: 0;
    height: 0;
    border-style: solid;
}

/* Arrow for cards on the LEFT (odd blocks) */
.timeline-block:nth-child(odd) .timeline-card::before {
    right: -12px;
    border-width: 10px 0 10px 12px;
    border-color: transparent transparent transparent #fff;
}

/* Arrow for cards on the RIGHT (even blocks) */
.timeline-block:nth-child(even) .timeline-card::before {
    left: -12px;
    border-width: 10px 12px 10px 0;
    border-color: transparent #fff transparent transparent;
}

/* Circular marker on the central line */
.timeline-marker {
    position: absolute;
    top: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #ced4da; /* Default gray border */
    z-index: 2;
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth transition */
}

/* Style for markers of completed events */
.timeline-block.completed .timeline-marker {
    background-color: gold;
    border-color: gold;
}

/* Content inside the card */
.timeline-card .timeline-date {
    display: block;
    font-weight: 600;
    color: #6c757d;
    font-size: 0.85em;
    margin-bottom: 8px;
}

.timeline-card h4 {
    margin: 0 0 10px 0;
    font-size: 1.25em;
    color: #343a40;
}

.timeline-card p {
    margin: 0;
    font-size: 0.95em;
    line-height: 1.6;
    color: #495057;
}

/* --- Responsive Adjustments --- */
@media screen and (max-width: 768px) {
    .vertical-timeline-container::before { left: 8px; }
    .timeline-marker { left: 8px; }
    
    .timeline-block, .timeline-block:nth-child(even) {
        flex-direction: row;
        margin: 2em 0;
    }

    .timeline-spacer { display: none; }

    .timeline-card {
        width: calc(100% - 40px);
        margin-left: 32px;
    }

    .timeline-card::before {
        left: -12px;
        border-width: 10px 12px 10px 0;
        border-color: transparent #fff transparent transparent;
        right: auto;
    }
}