/**
 * Two Blocks styling
 * ----------------------------------------------------------------------------
 */

.block--two-blocks {

    @include breakpoint(medium) {
        padding: 150px 0;
    }
    
    h1, h2, h3, h4, h5, h6 {
        font-size: rem-calc(24);
        margin-bottom: 1rem;
        @include breakpoint(medium) {
            font-size: rem-calc(30);
        }
    }

    .two-blocks__header {
        text-align: center;
        padding-bottom: 20px;

        @include breakpoint(medium) {
            padding-bottom: 80px;
        }
    }

    .block__title {
        margin-bottom: 0;
        font-size: rem-calc(28);

        @include breakpoint(medium) {
            font-size: rem-calc(34);
        }
    }

    .block__background-overlay {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 250px;
        bottom: 0;
        left: 0;
        background-image: url('src/svg/block-pattern.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 250%;

        @include breakpoint(medium) {
            height: 250px;
            background-size: 250%;
        }
        @include breakpoint(large) {
            height: 40%;
            background-size: 170%;
        }
    }

    .two-blocks__inner {
        position: relative;
        z-index: 2;
        //overflow: hidden;
    }

    .block__link:not(.button) {
        margin: $spacing 0 0;
    }
}

.block__half {
    position: relative;
    font-size: rem-calc(20);
    padding: $spacing--xlarge;
    background-color: $color-white;
    box-shadow: $shadow--wide;
    @include breakpoint(small only) {
        padding: $spacing--large $spacing--xlarge;
        font-size: rem-calc(16);
    }
}

.block__half--image {
    position: relative;
    padding: 0;
    background-size: cover;
    height: 100%;

    &[data-animated] {
        animation-delay: $duration;
    }

    .two-blocks__image {
        background-size: cover;
        background-position: center 25%;
        background-repeat: no-repeat;
        width: 100%;
        padding-bottom: 75%;

        @include breakpoint(medium) {
            background-position: center;
            padding-bottom: 0;
            height: calc(100% + 100px);
            min-height: 200px;
            top: -50px;
            position: relative;
        }
    }
}

.block__overlay-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.block__overlay-title--white {
    z-index: 1000;
    color: $color-white;
}
.block__mobile-title {
    display: none;
}

.block--two-blocks--rough {

    .block__overlay-wrapper {
        @include breakpoint(small only) {
            display: none;
        }
    }
    .block__overlay-title {
        @include breakpoint(small only) {
            display: none;
        }
    }

    .block__inner {
    }
    .column--image {
        position: relative;
        z-index: 1;
        @include breakpoint(medium) {
            padding-right: 0;
            z-index: z-index(positive);
            right: 0;
        }
        @include breakpoint(large) {
            top: auto;
            bottom: 0;
        }

        .block__half {
            background: transparent;
            box-shadow: none;

            @include breakpoint(small only) {
                img {
                    box-shadow: $shadow;
                }
            }
            @include breakpoint(medium) {
                padding: 0;
                box-shadow: $shadow;
            }
        }
    }
    .column--text {
        @include breakpoint(medium) {
            padding-left: 0;
        }
        .block__mobile-title {
            @include breakpoint(small only) {
                font-size: rem-calc(40);
                line-height: rem-calc(48);
                margin: 0 -33px rem-calc(52) -33px;
                display: block;
                text-align: center;
                width: calc(100% + 66px);
            }
        }
        .block__half {
            box-shadow: $shadow--mild;
            @include breakpoint(xlarge) {
                padding: $spacing--xxlarge $spacing--xxlarge $spacing--xxlarge $spacing--xxlarge;
            }
        }
    }
}

.block--two-blocks--inverted {

    .block__inner {
    }

    .column--image {
        position: relative;
        @include breakpoint(medium) {
            padding-left: 0;
            padding-right: 15px;
            order: 2;
        }

        .block__half {
            box-shadow: $shadow--mild;
        }

        img {
            width: 100%;
        }
    }

    .column--text {
        position: relative;

        @include breakpoint(medium) {
            padding-left: 15px;
            padding-right: 0;
            order: 1;
        }

        @include breakpoint(large) {
            right: 0;
            bottom: 0;
        }

        .block__half {
            box-shadow: $shadow;
        }
    }
}

.block--two-blocks + .block--two-blocks {
    padding-top: 0;
}

.block--text.block--spacing-normal.block--bg-color--none:not(.text--image) + .block--two-blocks {
    margin-top: -$spacing--xxlarge;
}

.block--text.block--spacing-large.block--bg-color--none:not(.text--image) + .block--two-blocks {
    margin-top: -$spacing--xxxlarge;
}
