/*
    Block: Flowing Text
    Note: Selectors must start with .block-flowing-text
*/

@layer blocks {
    .block-flowing-text .main-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .block-flowing-text .main-wrapper.wide {
        --page-size-wide: 1750px;
    }

    .block-flowing-text .main-wrapper:where(.wide) {
        padding-left: 1.25rem;
        padding-right: max(0px, calc(50vw - var(--page-size) / 2) - var(--offset));
    }

    .block-flowing-text .main-wrapper:where(.gap-small) {
        gap: 2.5rem;
    }

    .block-flowing-text .main-wrapper:where(.gap-large) {
        gap: 5rem;
    }

    .block-flowing-text .main-wrapper.has-additional--image {
        gap: 6.25rem;
    }

    .block-flowing-text .text-content--main {
        -ms-flex-preferred-size: 100%;
            flex-basis: 100%;
        -webkit-box-flex: 1;
            -ms-flex-positive: 1;
                flex-grow: 1;
    }

    .block-flowing-text .flex .buttons {
        -ms-flex-negative: 0;
            flex-shrink: 0;
    }

    .block-flowing-text .scroll-fill-text {
        -webkit-background-clip: text;
        background-clip: text;
        background-color: var(--c-light-grey);
        background-image: linear-gradient(90deg, var(--c-blue) 50%, var(--c-light-grey) calc(50% + 1ch));
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 0% 200%;
        color: transparent;
        display: inline;
        will-change: background-size;
        white-space: pre-wrap;
    }

    .block-flowing-text .buttons {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-align: end;
            -ms-flex-align: end;
                align-items: flex-end;
        gap: 1.25rem;
    }

    .block-flowing-text .additional-content {
        margin-left: auto;
    }

    .block-flowing-text .additional-content figure {
        margin: 0 !important;
    }

    .block-flowing-text .additional-content .image-wrapper img {
        aspect-ratio: 1.781;
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
        height: auto;
    }

    .block-flowing-text .additional-content .image-wrapper figcaption {
        margin-top: 1.4375rem;
        text-align: right;
    }

    @media screen and (width > 920px) {
        .block-flowing-text .buttons--mobile {
            display: none;
        }
    }

    @media screen and (width <= 920px) {
        .block-flowing-text .main-wrapper {
            gap: 2.5rem;
            padding-inline: .5625rem;
        }

        .block-flowing-text .main-wrapper > .flex {
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            gap: 2.125rem;
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
        }

        .block-flowing-text .main-wrapper:where(.has-button) {
            gap: 2.125rem;
        }

        .block-flowing-text .main-wrapper.has-additional--image {
            gap: 5rem;
        }

        .block-flowing-text .text-content {
            --gap: 1.5625rem;
        }

        .block-flowing-text .main-wrapper:where(.has-button) .text-content {
            --gap: 2.125rem;
        }

        .block-flowing-text .additional-content {
            margin-left: 0;
        }

        .block-flowing-text .main-wrapper:not(.has-button) .additional-content {
            margin-left: 2.8125rem;
        }

        .block-flowing-text .main-wrapper.has-additional--image .buttons--mobile {
            display: none;
        }

        .block-flowing-text .main-wrapper:not(.has-additional--image) .buttons--desktop {
            display: none;
        }

        .block-flowing-text .buttons {
            -webkit-box-align: start;
                -ms-flex-align: start;
                    align-items: flex-start;
        }
        
        .block-flowing-text .additional-content .image-wrapper img {
            aspect-ratio: 1.78125;
        }

        .block-flowing-text .additional-content .image-wrapper figcaption {
            max-width: 64.33%;
            margin-top: 1.25rem;
            margin-left: auto;
            text-align: left;
        }
    }
}