.cee-post-timeline {
    --cee-timeline-line-color: #d8d8d8;
    --cee-timeline-line-width: 2px;
    --cee-timeline-line-style: solid;
    --cee-timeline-dot-size: 16px;
    --cee-timeline-dot-top: 30px;
    --cee-timeline-dot-color: #1e5c62;
    --cee-timeline-dot-hover-color: #fff691;
    --cee-timeline-dot-border-color: #fff;
    --cee-timeline-dot-border-width: 3px;
    --cee-timeline-column-gap: 72px;
    --cee-timeline-row-gap: 44px;
    --cee-timeline-card-width: 100%;
    --cee-timeline-hover-y: -4px;
    --cee-timeline-duration: 300ms;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--cee-timeline-row-gap);
    width: 100%;
    isolation: isolate;
}


.cee-post-timeline__item {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--cee-timeline-column-gap);
    width: 100%;
    min-width: 0;
}

/*
 * Keskjoon on jupitatud postituste kaupa, et selle esimene ja viimane
 * ots oleksid täpselt esimese ja viimase punkti keskmes.
 */
.cee-post-timeline__item:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--cee-timeline-dot-top);
    bottom: calc(0px - var(--cee-timeline-row-gap) - var(--cee-timeline-dot-top));
    left: 50%;
    width: 0;
    border-left-width: var(--cee-timeline-line-width);
    border-left-style: var(--cee-timeline-line-style);
    border-left-color: var(--cee-timeline-line-color);
    transform: translateX(calc(var(--cee-timeline-line-width) / -2));
    pointer-events: none;
}

/* Horisontaalne ühendusjoon punkti keskelt kaardi sisemise servani. */
.cee-post-timeline__item::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: var(--cee-timeline-dot-top);
    width: calc(var(--cee-timeline-column-gap) / 2);
    height: 0;
    border-top-width: var(--cee-timeline-line-width);
    border-top-style: var(--cee-timeline-line-style);
    border-top-color: var(--cee-timeline-line-color);
    transform: translateY(calc(var(--cee-timeline-line-width) / -2));
    pointer-events: none;
}

.cee-post-timeline--first-left .cee-post-timeline__item:nth-child(odd)::before,
.cee-post-timeline--first-right .cee-post-timeline__item:nth-child(even)::before {
    right: 50%;
}

.cee-post-timeline--first-left .cee-post-timeline__item:nth-child(even)::before,
.cee-post-timeline--first-right .cee-post-timeline__item:nth-child(odd)::before {
    left: 50%;
}

.cee-post-timeline__card {
    display: block;
    width: min(var(--cee-timeline-card-width), 100%);
    max-width: 100%;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    transition:
        transform var(--cee-timeline-duration) cubic-bezier(.2,.8,.2,1),
        background-color var(--cee-timeline-duration) ease,
        border-color var(--cee-timeline-duration) ease,
        box-shadow var(--cee-timeline-duration) ease;
    will-change: transform;
}

.cee-post-timeline--first-left .cee-post-timeline__item:nth-child(odd) .cee-post-timeline__card,
.cee-post-timeline--first-right .cee-post-timeline__item:nth-child(even) .cee-post-timeline__card {
    grid-column: 1;
    justify-self: end;
}

.cee-post-timeline--first-left .cee-post-timeline__item:nth-child(even) .cee-post-timeline__card,
.cee-post-timeline--first-right .cee-post-timeline__item:nth-child(odd) .cee-post-timeline__card {
    grid-column: 2;
    justify-self: start;
}

.cee-post-timeline--side-align.cee-post-timeline--first-left .cee-post-timeline__item:nth-child(odd) .cee-post-timeline__card,
.cee-post-timeline--side-align.cee-post-timeline--first-right .cee-post-timeline__item:nth-child(even) .cee-post-timeline__card {
    text-align: right !important;
}

.cee-post-timeline--side-align.cee-post-timeline--first-left .cee-post-timeline__item:nth-child(even) .cee-post-timeline__card,
.cee-post-timeline--side-align.cee-post-timeline--first-right .cee-post-timeline__item:nth-child(odd) .cee-post-timeline__card {
    text-align: left !important;
}

.cee-post-timeline__dot {
    position: absolute;
    z-index: 3;
    top: var(--cee-timeline-dot-top);
    left: 50%;
    width: var(--cee-timeline-dot-size);
    height: var(--cee-timeline-dot-size);
    border: var(--cee-timeline-dot-border-width) solid var(--cee-timeline-dot-border-color);
    border-radius: 999px;
    background: var(--cee-timeline-dot-color);
    transform: translate(-50%, -50%);
    transition:
        background-color var(--cee-timeline-duration) ease,
        transform var(--cee-timeline-duration) cubic-bezier(.2,.8,.2,1);
    box-sizing: border-box;
    pointer-events: none;
}

.cee-post-timeline__item:has(.cee-post-timeline__card:hover) .cee-post-timeline__dot,
.cee-post-timeline__item:has(.cee-post-timeline__card:focus-visible) .cee-post-timeline__dot {
    background: var(--cee-timeline-dot-hover-color);
    transform: translate(-50%, -50%) scale(1.16);
}

@supports not selector(:has(*)) {
    .cee-post-timeline__item:hover .cee-post-timeline__dot,
    .cee-post-timeline__item:focus-within .cee-post-timeline__dot {
        background: var(--cee-timeline-dot-hover-color);
        transform: translate(-50%, -50%) scale(1.16);
    }
}

.cee-post-timeline__card:hover,
.cee-post-timeline__card:focus-visible {
    transform: translateY(var(--cee-timeline-hover-y));
}

.cee-post-timeline__card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.cee-post-timeline__title,
.cee-post-timeline__date,
.cee-post-timeline__excerpt {
    transition: color var(--cee-timeline-duration) ease;
}

.cee-post-timeline__title {
    margin-top: 0;
    margin-bottom: 8px;
}

.cee-post-timeline__date {
    display: block;
    margin-bottom: 10px;
}

.cee-post-timeline__excerpt {
    margin: 0;
}

.cee-post-timeline__empty {
    margin: 0;
    text-align: center;
}

@media (max-width: 767px) {
    .cee-post-timeline {
        --cee-timeline-mobile-line-x: calc(var(--cee-timeline-dot-size) / 2 + var(--cee-timeline-dot-border-width));
        padding-left: calc(var(--cee-timeline-dot-size) + 26px);
    }

    .cee-post-timeline__item {
        display: block;
    }

    .cee-post-timeline__item:not(:last-child)::after {
        left: var(--cee-timeline-mobile-line-x);
        transform: translateX(calc(var(--cee-timeline-line-width) / -2));
    }

    .cee-post-timeline__item::before,
    .cee-post-timeline--first-left .cee-post-timeline__item:nth-child(odd)::before,
    .cee-post-timeline--first-left .cee-post-timeline__item:nth-child(even)::before,
    .cee-post-timeline--first-right .cee-post-timeline__item:nth-child(odd)::before,
    .cee-post-timeline--first-right .cee-post-timeline__item:nth-child(even)::before {
        left: var(--cee-timeline-mobile-line-x);
        right: auto;
        width: calc(var(--cee-timeline-dot-size) / 2 + 26px - var(--cee-timeline-dot-border-width));
    }

    .cee-post-timeline__card,
    .cee-post-timeline--first-left .cee-post-timeline__item:nth-child(odd) .cee-post-timeline__card,
    .cee-post-timeline--first-left .cee-post-timeline__item:nth-child(even) .cee-post-timeline__card,
    .cee-post-timeline--first-right .cee-post-timeline__item:nth-child(odd) .cee-post-timeline__card,
    .cee-post-timeline--first-right .cee-post-timeline__item:nth-child(even) .cee-post-timeline__card {
        width: min(var(--cee-timeline-card-width), 100%);
        max-width: 100%;
    }

    .cee-post-timeline--side-align .cee-post-timeline__card {
        text-align: left !important;
    }

    .cee-post-timeline__dot {
        left: var(--cee-timeline-mobile-line-x);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cee-post-timeline__card,
    .cee-post-timeline__dot,
    .cee-post-timeline__title,
    .cee-post-timeline__date,
    .cee-post-timeline__excerpt {
        transition-duration: 0.01ms !important;
    }

    .cee-post-timeline__card:hover,
    .cee-post-timeline__card:focus-visible {
        transform: none;
    }
}