.block-milestones-timeline {
    --ml-dot-size: 1.25rem;
    --ml-pill-height: 2.375rem;
    --ml-pill-ring: 2px;
    --ml-marker-label-size: 1.25rem;

    --ml-glow-width: 8.4375rem;
    --ml-glow-height: 8.5rem;
    --ml-glow-blur: 16px;
    --ml-glow-overhang: 1.5rem;

    --ml-header-gap: 2.5rem;
    --ml-marker-gap: 3.3125rem;
    --ml-marker-offset: 0.625rem;

    --ml-year-gap: 2.5rem;
    --ml-column-gap: 6rem;
    --ml-text-width: 19rem;

    --ml-year-size: clamp(2.75rem, 12vw, 4rem);
    --ml-title-size: 1.3125rem;

    --ml-gutter: var(--spacing-container, 1rem);

    --ml-line-thickness: 2px;
    --ml-line-color: var(--color-gray-200);
    --ml-marker-bg: var(--color-accent);
    --ml-marker-color: var(--color-black);
    --ml-headline-color: var(--color-text-dark);
    --ml-intro-color: var(--color-gray-500);
    --ml-year-color: var(--color-black);
    --ml-title-color: var(--color-text-dark);
    --ml-description-color: var(--color-gray-500);

    --ml-dim-color: rgb(0 0 0 / 60%);

    position: relative;
    padding-block: var(--spacing-20) var(--spacing-16);
}

.block-milestones-timeline.has-bg-black {
    --ml-line-color: var(--color-gray-700);
    --ml-headline-color: var(--color-white);
    --ml-intro-color: var(--color-gray-200);
    --ml-year-color: var(--color-white);
    --ml-title-color: var(--color-white);
    --ml-description-color: var(--color-gray-200);
    --ml-dim-color: rgb(255 255 255 / 60%);

    background-color: var(--color-black);
    color: var(--color-white);
}

.block-milestones-timeline.has-dotted-bg::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: url(/app/themes/imagemakers-foundation/public/repeat-dot-dark.webp)
        repeat center top;
    background-size: 0.75rem auto;
    opacity: 0.1;
    pointer-events: none;
}

.block-milestones-timeline.has-bg-black.has-dotted-bg::before {
    background-image: url(/app/themes/imagemakers-foundation/public/repeat-dot.webp);
    opacity: 0.15;
}

.block-milestones-timeline__header {
    position: relative;
    z-index: 1;
    margin-block-end: var(--ml-header-gap);
}

.block-milestones-timeline__headline {
    max-width: 33.8125rem;
    margin: 0;
    color: var(--ml-headline-color);
    font-family: var(--font-family-heading);
    font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.625rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1.0952;
}

.block-milestones-timeline__intro {
    max-width: 38rem;
    margin: var(--spacing-4) 0 0;
    color: var(--ml-intro-color);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: 1.625;
}

.block-milestones-timeline__timeline {
    position: relative;
    z-index: 1;
}

.block-milestones-timeline__line {
    display: none;
}

.block-milestones-timeline__track {
    position: relative;
    z-index: 1;
    padding-inline: var(--ml-gutter);
}

.block-milestones-timeline__track:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 4px;
}

@media (width >= 48rem) {
    .block-milestones-timeline {
        --ml-gutter: var(--spacing-container-md, 2rem);
    }
}

@media (width >= 80rem) {
    .block-milestones-timeline {
        --ml-gutter: var(--spacing-container-lg, 3rem);
    }
}

.block-milestones-timeline__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.block-milestones-timeline__milestone {
    position: relative;
    display: grid;
    grid-template-columns: var(--ml-dot-size) minmax(0, 1fr);
    grid-template-areas:
        "marker year"
        ".      body";
    column-gap: var(--spacing-5);
    row-gap: var(--spacing-3);
    padding-block-end: var(--spacing-10);
}

.block-milestones-timeline__milestone:last-child {
    padding-block-end: 0;
}

.block-milestones-timeline__milestone::before {
    content: "";
    position: absolute;
    inset-block: calc(
        var(--ml-marker-offset) + var(--ml-dot-size) + var(--spacing-2)
    ) 0;
    inset-inline-start: calc(var(--ml-dot-size) / 2);
    width: var(--ml-line-thickness);
    background-color: var(--ml-line-color);
    transform: translateX(calc(var(--ml-line-thickness) / -2));
}

.block-milestones-timeline__milestone:last-child::before {
    content: none;
}

.block-milestones-timeline__marker {
    position: relative;
    grid-area: marker;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--ml-dot-size);
    block-size: var(--ml-dot-size);
    margin-block-start: var(--ml-marker-offset);
    border: 1px solid var(--ml-line-color);
    border-radius: var(--radius-full);
    background-color: var(--ml-marker-bg);
}

.block-milestones-timeline__marker-label {
    display: none;
}

.block-milestones-timeline__year {
    grid-area: year;
    margin: 0;
    color: var(--ml-year-color);
    font-family: var(--font-family-heading);
    font-size: var(--ml-year-size);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: 0.9;
}

.block-milestones-timeline__body {
    grid-area: body;
}

.block-milestones-timeline__title {
    margin: 0;
    color: var(--ml-title-color);
    font-family: var(--font-family-heading);
    font-size: var(--ml-title-size);
    font-weight: var(--font-weight-semibold);
    line-height: 1.2381;
}

.block-milestones-timeline__description {
    margin: var(--spacing-3) 0 0;
    color: var(--ml-description-color);
    font-family: var(--font-family-sans);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    line-height: 1.625;
}

.block-milestones-timeline__controls {
    display: none;
}

.block-milestones-timeline__placeholder {
    padding: var(--spacing-12);
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-align: center;
}

.block-milestones-timeline.has-bg-black .block-milestones-timeline__placeholder {
    border-color: var(--color-gray-700);
    color: var(--color-gray-200);
}

@media (width >= 64rem) {
    .block-milestones-timeline {
        --ml-header-gap: 2.5rem;
        --ml-year-size: clamp(3.5rem, 6.25vw, 6.25rem);
        --ml-track-pad-start: max(
            var(--ml-gutter),
            calc((100vw - var(--content-max-width)) / 2 + var(--ml-gutter))
        );
    }

    .block-milestones-timeline__line {
        display: block;
        position: absolute;
        inset-inline: 0;
        inset-block-start: calc(
            var(--ml-glow-overhang) + var(--ml-pill-height) / 2 -
                var(--ml-line-thickness) / 2
        );
        height: var(--ml-line-thickness);
        background-color: var(--ml-line-color);
    }

    .block-milestones-timeline__track {
        padding-inline: 0;
        padding-block-start: var(--ml-glow-overhang);
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity;
        scroll-padding-inline-start: var(--ml-track-pad-start);
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .block-milestones-timeline__track::-webkit-scrollbar {
        display: none;
    }

    .block-milestones-timeline__list {
        display: flex;
        width: max-content;
        align-items: start;
        column-gap: var(--ml-column-gap);
        padding-inline: var(--ml-track-pad-start) var(--ml-gutter);
    }

    .block-milestones-timeline__milestone,
    .block-milestones-timeline__milestone:last-child {
        grid-template-columns: min-content var(--ml-text-width);
        grid-template-rows: var(--ml-pill-height) auto;
        grid-template-areas:
            "marker ."
            "year   body";
        flex: 0 0 auto;
        column-gap: var(--ml-year-gap);
        row-gap: var(--ml-marker-gap);
        padding-block-end: 0;
        scroll-snap-align: start;
    }

    .block-milestones-timeline__milestone::before {
        content: none;
    }

    .block-milestones-timeline__marker {
        align-self: center;
        justify-self: center;
        margin-block-start: 0;
        cursor: pointer;
    }

    .block-milestones-timeline__milestone.is-active .block-milestones-timeline__marker {
        inline-size: auto;
        block-size: var(--ml-pill-height);
        min-inline-size: 5rem;
        padding-inline: var(--spacing-4);
        border-width: var(--ml-pill-ring);
    }

    .block-milestones-timeline__milestone.is-active .block-milestones-timeline__marker::before {
        content: "";
        position: absolute;
        z-index: -1;
        inset-block-start: 50%;
        inset-inline-start: 50%;
        inline-size: var(--ml-glow-width);
        block-size: var(--ml-glow-height);
        border-radius: var(--radius-full);
        background-image: radial-gradient(
            closest-side,
            rgb(223 255 0 / 100%),
            rgb(223 255 0 / 0%)
        );
        filter: blur(var(--ml-glow-blur));
        transform: translate(-50%, -50%);
    }

    .block-milestones-timeline__milestone:not(.is-active) {
        --ml-year-color: var(--ml-dim-color);
        --ml-title-color: var(--ml-dim-color);
        --ml-description-color: var(--ml-dim-color);
    }

    .block-milestones-timeline__milestone.is-active .block-milestones-timeline__marker-label {
        display: block;
        color: var(--ml-marker-color);
        font-family: var(--font-family-heading);
        font-size: var(--ml-marker-label-size);
        font-weight: var(--font-weight-semibold);
        font-variant-numeric: tabular-nums;
        line-height: 1.2;
        white-space: nowrap;
    }

    .block-milestones-timeline__controls {
        position: absolute;
        inset: calc(var(--ml-glow-overhang) + var(--ml-pill-height)) 0 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-inline: clamp(
            1rem,
            calc((100vw - var(--content-max-width)) / 2 + .5rem),
            4rem
        );
        pointer-events: none;
    }

    .block-milestones-timeline__control {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 5.5rem;
        height: 4.125rem;
        border: 0;
        border-radius: var(--radius-full);
        background: rgb(3 126 185 / 0.65);
        backdrop-filter: blur(.25rem);
        color: var(--color-white);
        cursor: pointer;
        pointer-events: auto;
        filter: drop-shadow(0 18px 26px rgb(0 0 0 / 25%));
        transition:
            background-color .25s ease,
            transform .25s ease,
            opacity .25s ease;
    }

    .block-milestones-timeline__control svg {
        width: 1.75rem;
        height: auto;
    }

    .block-milestones-timeline__control:hover:not(:disabled) {
        background: var(--color-primary-dark);
        transform: scale(1.06);
    }

    .block-milestones-timeline__control:focus-visible {
        outline: 2px solid var(--color-primary);
        outline-offset: 3px;
    }

    .block-milestones-timeline__control:disabled {
        cursor: default;
    }

    .block-milestones-timeline__control[hidden] {
        display: inline-flex;
        visibility: hidden;
        pointer-events: none;
    }
}

@media (width >= 80rem) {
    .block-milestones-timeline__controls {
        padding-inline: clamp(
            2rem,
            calc((100vw - var(--content-max-width)) / 2 + 1rem),
            5rem
        );
    }
}

@media (forced-colors: active) {
    .block-milestones-timeline__line,
    .block-milestones-timeline__milestone::before {
        background-color: currentcolor;
        forced-color-adjust: none;
    }

    .block-milestones-timeline__milestone.is-active .block-milestones-timeline__marker::before {
        content: none;
    }
}