/*
    Block: Timeline
    Note: Selectors must start with .block-timeline
*/

@layer blocks {
    .block-timeline .sticky-content {
        position: sticky;
        top: calc(var(--header-height) + .5rem);
        -ms-flex-preferred-size: 34.25%;
            flex-basis: 34.25%;
        gap: 2.5rem;
    }

    .block-timeline :where(.wider-sticky) .sticky-content {
        -ms-flex-preferred-size: 42.58%;
            flex-basis: 42.58%;
    }
    
    .block-timeline .sticky-content .buttons {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }

    .block-timeline .sticky-content .popup-trigger {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        padding: 1.25rem;
        aspect-ratio: 1;
    }

    .block-timeline .sticky-content .popup-trigger .plus-circle-btn {
        --size: 2.75rem;
        --icon-size: 1rem;
        color: var(--c-white);
        opacity: 0;
    }

    .block-timeline .contents-wrapper {
        -ms-flex-preferred-size: 57.667%;
            flex-basis: 57.667%;
    }

    .block-timeline :where(.wider-sticky) .contents-wrapper {
        -ms-flex-preferred-size: 49.16%;
            flex-basis: 49.16%;
    }

    .block-timeline .timeline-items {
        gap: 0;
    }

    .block-timeline .timeline-item {
        gap: 5rem;
    }

    .block-timeline .timeline-item .item-sidebar {
        width: 1.375rem;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        gap: .625rem;
    }

    .block-timeline .timeline-item:not(:last-child) .item-sidebar {
        padding-bottom: .625rem;
    }

    .block-timeline .timeline-item .indicator {
        --transition-dur: 120ms;
        --transition-func: ease-in-out;
        position: relative;
        width: 1.375rem;
        height: 1.375rem;
        aspect-ratio: 1;
        border-radius: 50%;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        border: 1px solid rgb(from var(--c-blue) r g b / .15);
        background-color: rgb(from var(--c-blue) r g b / .05);
        color: var(--c-light-grey);
        -webkit-transition: color var(--transition-dur) var(--transition-func);
        transition: color var(--transition-dur) var(--transition-func);
    }

    .block-timeline .timeline-item .indicator.active {
        color: var(--c-orange);
    }

    .block-timeline .timeline-item .indicator::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
            -ms-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        display: block;
        width: .5rem;
        height: .5rem;
        aspect-ratio: 1;
        border-radius: 50%;
        background-color: currentColor;
    }

    .block-timeline .timeline-item .scroll-progress {
        position: relative;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        width: 1px;
        background-color: rgb(from var(--c-blue) r g b / .15);
        overflow: clip;
    }

    .block-timeline .timeline-item .scroll-progress::after {
        content: '';
        position: sticky;
        top: 0;
        display: block;
        width: 100%;
        height: 50vh;
        margin-top: -50vh;
        background-color: var(--c-blue);
    }

    .block-timeline .timeline-item .item-content {
        --transition-dur: 500ms;
        --transition-func: ease-in-out;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
        -webkit-transition: var(--transition-dur) var(--transition-func);
        transition: var(--transition-dur) var(--transition-func);
        -webkit-transition-property: opacity, -webkit-transform;
        transition-property: opacity, -webkit-transform;
        transition-property: opacity, transform;
        transition-property: opacity, transform, -webkit-transform;
    }

    .block-timeline .timeline-item:not(.show) .item-content {
        opacity: 0;
        -webkit-transform: translateX(100%);
            -ms-transform: translateX(100%);
                transform: translateX(100%);
    }

    .block-timeline .timeline-item:not(:last-child) .item-content {
        padding-bottom: 5rem;
    }

    .block-timeline .timeline-item:last-child .scroll-progress {
        display: none;
    }

    .block-timeline .timeline-item .text-content {
        --gap: 1.875rem;
    }

    .block-timeline .timeline-item .item-title {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        gap: .625rem;
    }

    .block-timeline .timeline-item .item-title svg {
        width: .6875rem;
        height: .6875rem;
    }

    .block-timeline :where(.main-wrapper:not(.wider-sticky)) .timeline-item .text-content > p {
        margin-right: 1.25rem;
    }

    .block-timeline .timeline-item .text-content :is(strong, b) {
        font-weight: 500;
        color: var(--c-blue);
    }

    .block-timeline .timeline-item .media-wrapper {
        margin-top: 2.8125rem;
        aspect-ratio: 1.84375;
    }

    .block-timeline .timeline-item .media-wrapper > img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
    }

    .block-timeline .contents-wrapper .buttons {
        margin-top: 2.8125rem;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        gap: 1.5625rem;
    }

    @media screen and (width > 920px) {
        .block-timeline .sticky-content .popup-trigger {
            --transition-dur: 150ms;
            --transition-func: ease-in-out;
        }

        .block-timeline .sticky-content .popup-trigger .media-wrapper::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(246.93deg, rgba(11, 22, 57, 0.25) 44.31%, rgba(11, 22, 57, 0) 88.04%);
            opacity: 0;
            mix-blend-mode: multiply;
            -webkit-transition: opacity var(--transition-dur) var(--transition-func);
            transition: opacity var(--transition-dur) var(--transition-func);
        }
        
        .block-timeline .sticky-content .popup-trigger:is(:hover, :focus) .media-wrapper::after {
            opacity: 1;
        }

        .block-timeline .sticky-content .popup-trigger .plus-circle-btn {
            -webkit-transition: var(--transition-dur) var(--transition-func);
            transition: var(--transition-dur) var(--transition-func);
            -webkit-transition-property: opacity, -webkit-transform;
            transition-property: opacity, -webkit-transform;
            transition-property: opacity, transform;
            transition-property: opacity, transform, -webkit-transform;
        }
        
        .block-timeline .sticky-content .popup-trigger:is(:hover, :focus) .plus-circle-btn {
            opacity: 1;
            -webkit-transform: rotate(90deg);
                -ms-transform: rotate(90deg);
                    transform: rotate(90deg);
        }
    }

    @media screen and (width <= 920px) {
        .block-timeline .sticky-content {
            -ms-flex-preferred-size: 35%;
                flex-basis: 35%;
            gap: 1.25rem;
        }

        .block-timeline .contents-wrapper {
            -ms-flex-preferred-size: 60%;
                flex-basis: 60%;
        }

        .block-timeline .timeline-item {
            gap: 1.25rem;
        }
    }

    @media screen and (width <= 620px) {
        .block-timeline .main-wrapper {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-align: stretch;
                -ms-flex-align: stretch;
                    align-items: stretch;
            gap: 5rem;
        }

        .block-timeline .sticky-content {
            position: static;
            gap: 1.875rem;
        }

        .block-timeline .main-wrapper.has-media .sticky-content .text-content {
            text-align: center;
        }

        .block-timeline .sticky-content .popup-trigger {
            aspect-ratio: 1.9;
        }

        .block-timeline .timeline-item {
            gap: 1.6875rem;
        }

        .block-timeline .timeline-item .item-sidebar {
            width: 1.125rem;
        }

        .block-timeline .timeline-item .indicator {
            width: 1.125rem;
            height: 1.125rem;
        }

        .block-timeline .timeline-item .indicator::after {
            width: .41rem;
            height: .41rem;
        }

        .block-timeline .timeline-item:not(:last-child) .item-content {
            padding-bottom: 3.75rem;
        }

        .block-timeline .timeline-item .text-content {
            --gap: 1.25rem;
        }

        .block-timeline .timeline-item .text-content > p {
            margin-right: 0;
        }

        .block-timeline .timeline-item .media-wrapper {
            margin-top: 1.875rem;
            aspect-ratio: 1.85625;
        }
    }
}