/*------------------------------------*\
    
    Contained Image + Text Block Customizations - Global Styling

    The styles you add to this file will be applied to the 'Contained Image + Text' block. 
    If there is any reasons why you would need to style them separately,
    please create a block-specific stylesheet for it (don't forget to register that block-specific stylesheet in acf-start-blocks.php)

\*------------------------------------*/

.flex-row {
    display: flex;
    flex-wrap: wrap;
}

.image-text .flex-row {
    align-items: center
}
.flex-row.flex-start {
    align-items: flex-start;
}

.image-text .flex-stretch {
    align-items: stretch
}

.image-text__img__wrap {
    position: relative;
    height: 203px;
}

.half-and-half--slider .image-text__img__wrap {
    height: auto;
}

.image-text__img__wrap img {
    border-radius: var(--image-border-radius);
}

.top-left-rounded {
    position: absolute;
    top: 0;
    left: 0;
    width: 58px;
    height: 58px;
    background: var(--white);
    border-radius: 0 0 var(--image-border-radius) 0;
}

.bg-light .top-left-rounded {
    background: var(--light);
}

.bg-medium .top-left-rounded {
    background: var(--medium);
}

.bg-dark .top-left-rounded {
    background: var(--dark);
}

.top-left-rounded-content {
    width: 49px;
    height: 49px;
    background: var(--secondary-color);
    border-radius: var(--image-box-border-radius);
    position: relative;
    z-index: 1;
}

.top-left-rounded::before {
    position: absolute;
    content: "";
    top: 0;
    right: calc(-1 * var(--image-border-radius));
    background: none;
    width: var(--image-border-radius);
    height: var(--image-border-radius);
    border-top-left-radius: var(--image-border-radius);
    box-shadow: -5px -5px 0 5px var(--white);
}

.top-left-rounded::after {
    position: absolute;
    content: "";
    bottom: calc(-1 * var(--image-border-radius));
    left: 0px;
    background: none;
    width: var(--image-border-radius);
    height: var(--image-border-radius);
    border-top-left-radius: var(--image-border-radius);
    box-shadow: -5px -5px 0 5px var(--white);
}

.bg-light .top-left-rounded::before,
.bg-light .top-left-rounded::after {
    box-shadow: -5px -5px 0 5px var(--light);
}

.bg-medium .top-left-rounded::before,
.bg-medium .top-left-rounded::after {
    box-shadow: -5px -5px 0 5px var(--medium);
}

.bg-dark .top-left-rounded::before,
.bg-dark .top-left-rounded::after {
    box-shadow: -5px -5px 0 5px var(--dark);
}

.bottom-right-rounded {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 86px;
    height: 86px;
    background: var(--white);
    border-radius: var(--image-border-radius) 0 0 0;
}

.bg-light .bottom-right-rounded {
    background: var(--light);
}

.bg-medium .bottom-right-rounded {
    background: var(--medium);
}

.bg-dark .bottom-right-rounded {
    background: var(--dark);
}

.bottom-right-rounded-content {
    width: 78px;
    height: 78px;
    background: var(--secondary-color);
    border-radius: var(--image-box-border-radius);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    line-height: 1em;
    color: var(--white);
    margin: 8px 0 0 8px;
}

.bottom-right-rounded-content svg {
    width: 46px;
    height: auto;
    fill: var(--white);
}

.bottom-right-rounded::before {
    position: absolute;
    content: "";
    top: calc(-1 * var(--image-border-radius));
    right: 0px;
    background: none;
    width: var(--image-border-radius);
    height: var(--image-border-radius);
    border-bottom-right-radius: var(--image-border-radius);
    box-shadow: 5px 5px 0 5px var(--white);
}

.bottom-right-rounded::after {
    position: absolute;
    content: "";
    bottom: 0px;
    left: calc(-1 * var(--image-border-radius));
    background: none;
    width: var(--image-border-radius);
    height: var(--image-border-radius);
    border-bottom-right-radius: var(--image-border-radius);
    box-shadow: 5px 5px 0 5px var(--white);
}

.bg-light .bottom-right-rounded::before,
.bg-light .bottom-right-rounded::after {
    box-shadow: 5px 5px 0 5px var(--light);
}

.bg-medium .bottom-right-rounded::before,
.bg-medium .bottom-right-rounded::after {
    box-shadow: 5px 5px 0 5px var(--medium);
}

.bg-dark .bottom-right-rounded::before,
.bg-dark .bottom-right-rounded::after {
    box-shadow: 5px 5px 0 5px var(--dark);
}



.top-right-rounded {
    position: absolute;
    top: 0;
    right: 0;
    width: 58px;
    height: 58px;
    background: var(--white);
    border-radius: 0 0 0 var(--image-border-radius);
}

.bg-light .top-right-rounded {
    background: var(--light);
}

.bg-medium .top-right-rounded {
    background: var(--medium);
}

.bg-dark .top-right-rounded {
    background: var(--dark);
}

.top-right-rounded-content {
    width: 49px;
    height: 49px;
    background: var(--secondary-color);
    border-radius: var(--image-box-border-radius);
    position: relative;
    z-index: 1;
    margin: 0 0 0 8px;
}

.top-right-rounded::before {
    position: absolute;
    content: "";
    top: 0;
    left: calc(-1 * var(--image-border-radius));
    background: none;
    width: var(--image-border-radius);
    height: var(--image-border-radius);
    border-top-right-radius: var(--image-border-radius);
    box-shadow: 5px -5px 0 5px var(--white);
}

.top-right-rounded::after {
    position: absolute;
    content: "";
    bottom: calc(-1 * var(--image-border-radius));
    right: 0px;
    background: none;
    width: var(--image-border-radius);
    height: var(--image-border-radius);
    border-top-right-radius: var(--image-border-radius);
    box-shadow: 5px -5px 0 5px var(--white);
}

.bg-light .top-right-rounded::before,
.bg-light .top-right-rounded::after {
    box-shadow: 5px -5px 0 5px var(--light);
}

.bg-medium .top-right-rounded::before,
.bg-medium .top-right-rounded::after {
    box-shadow: 5px -5px 0 5px var(--medium);
}

.bg-dark .top-right-rounded::before,
.bg-dark .top-right-rounded::after {
    box-shadow: 5px -5px 0 5px var(--dark);
}

.bottom-left-rounded {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 86px;
    height: 86px;
    background: var(--white);
    border-radius: 0 var(--image-border-radius) 0 0;
}

.bg-light .bottom-left-rounded {
    background: var(--light);
}

.bg-medium .bottom-left-rounded {
    background: var(--medium);
}

.bg-dark .bottom-left-rounded {
    background: var(--dark);
}
 
.bottom-left-rounded-content {
    width: 78px;
    height: 78px;
    background: var(--secondary-color);
    border-radius: var(--image-box-border-radius);
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 46px;
    line-height: 1em;
    color: var(--white);
    margin: 8px 0 0 0;
}

.bottom-left-rounded-content svg {
    width: 46px;
    height: auto;
    fill: var(--white);
}

.bottom-left-rounded::before {
    position: absolute;
    content: "";
    top: calc(-1 * var(--image-border-radius));
    left: 0px;
    background: none;
    width: var(--image-border-radius);
    height: var(--image-border-radius);
    border-bottom-left-radius: var(--image-border-radius);
    box-shadow: -5px 5px 0 5px var(--white);
}

.bottom-left-rounded::after {
    position: absolute;
    content: "";
    bottom: 0px;
    right: calc(-1 * var(--image-border-radius));
    background: none;
    width: var(--image-border-radius);
    height: var(--image-border-radius);
    border-bottom-left-radius: var(--image-border-radius);
    box-shadow: -5px 5px 0 5px var(--white);
}

.bg-light .bottom-left-rounded::before,
.bg-light .bottom-left-rounded::after {
    box-shadow: -5px 5px 0 5px var(--light);
}

.bg-medium .bottom-left-rounded::before,
.bg-medium .bottom-left-rounded::after {
    box-shadow: -5px 5px 0 5px var(--medium);
}

.bg-dark .bottom-left-rounded::before,
.bg-dark .bottom-left-rounded::after {
    box-shadow: -5px 5px 0 5px var(--dark);
}

.image-text__text {
    margin-bottom: 24px;
}

.hightlight {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: var(--paragraph-spacing);
}

.hightlight__image {
    width: 82px;
    height: 82px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    border-bottom: 3px solid var(--secondary-color);
    background: var(--light);
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.05);
    font-size: 48px;
    line-height: 1em;
    color: var(--primary-color);
}

.bg-light .hightlight__image {
    background: var(--white);
}

.bg-medium .hightlight__image {
    background: var(--dark);
}

.bg-dark .hightlight__image {
    background: var(--medium);
}

.hightlight__details {
    width: calc(100% - 82px);
    padding-left: 12px;
}

.hightlight__details h2 {
    margin-bottom: 8px;
}

.hightlight__details h6 {
    color: var(--paragraph-text-color);
}

.bg-medium .hightlight__details h6,
.bg-dark .hightlight__details h6 {
    color: var(--white);
}

.video-bttn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--image-border-radius);
}

.video-bttn svg {
    width: 65px;
    height: auto;
    transition: all 0.3s;
}

.hightlight__details h6 {
    margin-bottom: 0;
}
.hightlight__image svg ,
.bottom-right-rounded-content svg{
    width: 60%;
    height: auto;
}
.bottom-right-rounded-content svg path{
    fill: var(--white);
}


@media (min-width: 768px) {
        
    .image-text__img__wrap {
        height: 408px;
    }

    .half-and-half--slider .image-text__img__wrap {
        height: auto;
    }

    .top-left-rounded,
    .top-right-rounded {
        width: 77px;
        height: 77px;
    }

    .top-left-rounded-content,
    .top-right-rounded-content {
        width: 66px;
        height: 66px;
    }

    .top-right-rounded-content {
        margin: 0 0 0 11px;
    }

    .bottom-right-rounded,
    .bottom-left-rounded {
        width: 130px;
        height: 130px;
    }

    .bottom-right-rounded-content {
        width: 117px;
        height: 117px;
        font-size: 69px;
        margin: 13px 0 0 13px;
    }

    .bottom-left-rounded-content {
        width: 117px;
        height: 117px;
        font-size: 69px;
        margin: 13px 0 0 0;
    }

    .bottom-right-rounded-content svg,
    .bottom-left-rounded-content svg  {
        width: 69px;
    }

    .image-text__text {
        margin-bottom: 32px;
    }

    .hightlight__image {
        width: 150px;
        height: 150px;
        border-radius: 24px;
        border-bottom: 5px solid var(--secondary-color);
        font-size: 89px;
    }

    .hightlight__details {
        width: calc(100% - 150px);
        max-width: 418px;
        padding-left: 24px;
    }    

    .video-bttn svg {
        width: 125px;
    }

}


@media (min-width: 1025px) {

    .flex-opposite {
        flex-direction: row-reverse;
    }

    .image-text__text {
        margin-bottom: 0;
    }
        
    .image-text__img__wrap {
        height: 100%;
    }

    .half-and-half--slider .image-text__img__wrap {
        height: auto;
    }


    .image-text .flex-stretch  .image-text__img__wrap img {
        position: absolute;
    }

    .top-left-rounded,
    .top-right-rounded  {
        width: 112px;
        height: 112px;
    }

    .top-left-rounded-content,
    .top-right-rounded-content {
        width: 95px;
        height: 95px;
    }

    .top-right-rounded-content {
        margin: 0 0 0 17px;
    }

    .bottom-right-rounded,
    .bottom-left-rounded {
        width: 208px;
        height: 208px;
    }

    .bottom-right-rounded-content {
        width: 188px;
        height: 188px;
        font-size: 111px;
        margin: 20px 0 0 20px;
    }

    .bottom-left-rounded-content {
        width: 188px;
        height: 188px;
        font-size: 111px;
        margin: 20px 0 0 0;
    }

    .bottom-right-rounded-content svg,
    .bottom-left-rounded-content svg {
        width: 111px;
    }

    .image-text__text {
        margin-bottom: 0;
    }

    .image-text--right .image-text__text__wrap {
        padding-right: 48px;
    }

    .image-text--left .image-text__text__wrap {
        padding-left: 48px;
    }

    .video-bttn:hover {
        background: rgba(0, 0, 0, 0.35);
    }

    .video-bttn:hover svg {
        transform: scale(1.1);
    }
    .image-contained {
        position: sticky;
        top: 250px;
    }

}