/* Article Image Overlay */

.image-overlay {
    display: flex;
    align-items: flex-start;
    position: absolute;
    inset: 0;
    z-index: 20;
    &.no-events {
        pointer-events: none;
        & > * {
            pointer-events: auto;
        }
    }
}






/* Article */

.article ul:not(.list),
.article ol:not(.list) {
    padding-left: 16px;
}

.article p strong em,
.article p em strong {
    display: inline-block;
    font-style: normal;
    font-weight: 500;
    font-size: var(--font-size-large);
}

.article:not(.regular) > p:first-child:not(:has(+ p)) {
    margin-bottom: 5px;
}






/* Article Variations */

.article.italic {
    font-style: italic;
}

.article.slogan {
    font-size: 1.1rem;
    color: var(--theme-graying, #666);
}







/* Article Section */

.article-section {
    display: flex;
    position: relative;

    &.top {
        margin-top: var(--offset-article-card, 60px);
    }

    &:not(.no-image) {
        min-height: 400px;
    }

    @media all and (max-width: 991px) {
        &:not(.no-gap) {
            gap: var(--offset-article-gap, 30px 0);
        }
    }

    &.has-image .col-image {

        /*min-height: 200px;*/

        @media all and (min-width: 576px) and (max-width: 991px) {
            min-height: 500px;
        }

        @media all and (max-width: 991px) {
            order: 1;
        }
    }

    &.has-image.has-title-space .col-image {
        padding-top: 50px;
    }

    .col-content {
        display: flex;
        &.centered {
            align-items: center;
        }
    }

    .section-content {
        max-width: 100%;
    }

    .section-image {
        position: relative;

        &.max-height {
            max-height: 500px;
        }

        &:not(.auto-height) {
            height: 100%;
        }

        .article-section.fit-content & {
            height: fit-content !important;
            max-height: none !important;
        }


        .picture-wrap {
            position: relative;
            overflow: hidden;
            width: 100%;
            min-width: 100%;
            max-width: none;
            border-radius: 10px;

            &:not(.relative) {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
            }

            &:not(.auto-height) {
                height: 100%;
            }

            picture {
                height: 100%;
            }

            .col-image.order-2 & {
                left: 0;
                right: auto;
            }

            .article-section:not(.stay-inside) & {

                /*@media all and (min-width: 992px) and (max-width: 1680px) {*/
                /*    width: calc((var(--container-size) * var(--size-multiplier)) + var(--container-aside));*/
                /*    border-radius: 0 20px 20px 0;*/

                /*    .col-image.order-2 & {*/
                /*        border-radius: 20px 0 0 20px;*/
                /*    }*/

                /*}*/

            }

        }

        .image-overlay {
            padding: 20px;
            @media all and (min-width: 992px) {
                padding: 30px;
            }

            .col-image:not(.order-2) & {
                justify-content: flex-end;
            }
        }

        & { --size-multiplier: 0.5; }
        &.size-1 { --size-multiplier: 0.08333333; }
        &.size-2 { --size-multiplier: 0.16666666; }
        &.size-3 { --size-multiplier: 0.25; }
        &.size-4 { --size-multiplier: 0.33333333; }
        &.size-5 { --size-multiplier: 0.41666667; }
        &.size-6 { --size-multiplier: 0.5; }
        &.size-7 { --size-multiplier: 0.58333333; }
        &.size-8 { --size-multiplier: 0.66666666; }
        &.size-9 { --size-multiplier: 0.75; }
        &.size-10 { --size-multiplier: 0.83333333; }
        &.size-11 { --size-multiplier: 0.91666667; }
        &.size-12 { --size-multiplier: 1; }

    }


    &.row {
        margin-left: -20px;
        margin-right: -20px;
        & > div {
            padding-left: 20px;
            padding-right: 20px;
        }
    }
}







/* Article Lists */

[data-list] ul {
    list-style: none;
    padding: 0 !important;
    margin: 0;

    li {
        position: relative;
        padding-left: 30px;
    }

    li::before {
        content: ' ';
        position: absolute;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        aspect-ratio: 1;
        height: 24px;
        width: 24px;
        left: 0;
    }

}

[data-list="check"] ul > li::before {
    background-image: url('/images/svg/check.svg');
    background-size: 16px;
}


[data-list="checkmark"] ul > li::before {
    background-image: url('/images/svg/checkmark.svg');
    background-size: 16px;
}