/* Timeline CSS Adjusted */

:root {
    --color-t1: #EA8A00;
    --color-t2: #EF889D;
    --color-t3: #ACDDE7;
    --color-t4: #B7B7D7;
    --color-t5: #B9BF6F;
}

.timeline {
    display: flex;
    flex-direction: column;
    margin: 20px auto;
    position: relative;
    max-width: 1000px;
}

/* Central Line */
.timeline::after {
    content: '';
    position: absolute;
    width: 4px;
    /* Thinner line */
    background-color: var(--color-border);
    /* Changed to theme border var */
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -2px;
    z-index: 0;
}

.timeline__event {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    margin: 20px 0;
    border-radius: 6px;
    align-self: center;
    width: 50vw;
    z-index: 1;
    /* Above lines */
}

/* --- Color Types --- */
/* Type 1: Orange */
.timeline__event--type1 .timeline__event__date {
    background: var(--color-t1);
    color: var(--color-primary-foreground, #fff);
}

.timeline__event--type1 .timeline__event__icon {
    background: var(--color-t1);
    color: #fff;
    box-shadow: 0 0 0 4px var(--color-background), 0 0 0 8px var(--color-t1);
}

.timeline__event--type1 .timeline__event__title {
    color: var(--color-t1);
}

/* Type 2: Pink */
.timeline__event--type2 .timeline__event__date {
    background: var(--color-t2);
    color: var(--color-primary-foreground, #fff);
}

.timeline__event--type2 .timeline__event__icon {
    background: var(--color-t2);
    color: #fff;
    box-shadow: 0 0 0 4px var(--color-background), 0 0 0 8px var(--color-t2);
}

.timeline__event--type2 .timeline__event__title {
    color: var(--color-t2);
}

/* Type 3: Light Blue */
.timeline__event--type3 .timeline__event__date {
    background: var(--color-t3);
    color: var(--color-foreground);
    /* Text color adapted */
}

.timeline__event--type3 .timeline__event__icon {
    background: var(--color-t3);
    color: #555;
    box-shadow: 0 0 0 4px var(--color-background), 0 0 0 8px var(--color-t3);
}

.timeline__event--type3 .timeline__event__title {
    color: var(--color-foreground);
}

/* Darker text for readability */

/* Type 4: Lavender */
.timeline__event--type4 .timeline__event__date {
    background: var(--color-t4);
    color: var(--color-primary-foreground, #fff);
}

.timeline__event--type4 .timeline__event__icon {
    background: var(--color-t4);
    color: #fff;
    box-shadow: 0 0 0 4px var(--color-background), 0 0 0 8px var(--color-t4);
}

.timeline__event--type4 .timeline__event__title {
    color: var(--color-t4);
}

/* Type 5: Greenish */
.timeline__event--type5 .timeline__event__date {
    background: var(--color-t5);
    color: var(--color-primary-foreground, #fff);
}

.timeline__event--type5 .timeline__event__icon {
    background: var(--color-t5);
    color: #fff;
    box-shadow: 0 0 0 4px var(--color-background), 0 0 0 8px var(--color-t5);
}

.timeline__event--type5 .timeline__event__title {
    color: var(--color-t5);
}


/* Content Box */
.timeline__event__content {
    padding: 20px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    background: var(--color-card, #fff);
    color: var(--color-card-foreground, #333);
    width: calc(40vw - 84px);
    border-radius: 0 6px 6px 0;
}

.timeline__event__title {
    font-size: 1.2rem;
    line-height: 1.4;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.timeline__event__date {
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0 20px;
    border-radius: 6px 0 0 6px;
    width: 150px;
    /* Fixed width for date */
}

.timeline__event__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    margin: 0 20px;
    border-radius: 100%;
    width: 40px;
    height: 40px;
    position: relative;
    z-index: 2;
}

.timeline__event__icon i {
    font-size: 1.5rem;
}

.timeline__event__description {
    flex-basis: 60%;
}


/* --- Orientation & Layout --- */

/* Normal (Right side content, Left side date) - Defaults from above */

/* Reverse (Left side content, Right side date) */
.timeline__event:nth-child(2n + 1) {
    flex-direction: row-reverse;
}

.timeline__event:nth-child(2n + 1) .timeline__event__date {
    border-radius: 0 6px 6px 0;
}

.timeline__event:nth-child(2n + 1) .timeline__event__content {
    border-radius: 6px 0 0 6px;
}

/* Connecting lines */
/* Horizontal line connecting icon to center */
.timeline__event__icon:before {
    display: none;
    /* Removing the old messy ones */
}

.timeline__event__icon:after {
    display: none;
}


@media (max-width: 786px) {
    .timeline::after {
        left: 31px;
        /* Align line with icon on mobile */
    }

    .timeline__event {
        flex-direction: column;
        align-self: center;
        width: 100%;
        margin-bottom: 40px;
    }

    .timeline__event:nth-child(2n + 1) {
        flex-direction: column;
    }

    .timeline__event__content {
        width: 100%;
        border-radius: 0 0 6px 6px;
    }

    .timeline__event__icon {
        border-radius: 50%;
        /* Keep circular */
        box-shadow: 0 0 0 4px var(--color-background), 0 0 0 8px currentColor;
        /* Maintain ring effect */
        margin: 0 0 0 11px;
        /* Align check */
    }

    .timeline__event__date {
        border-radius: 6px 6px 0 0;
        padding: 10px;
        width: 100%;
        justify-content: flex-start;
    }

    .timeline__event:nth-child(2n + 1) .timeline__event__date {
        border-radius: 6px 6px 0 0;
    }
}