/*------------------------------------*\
    
    Half & Half Image + Text Block Customizations - Global Styling

    The styles you add to this file will be applied to the 'Half & Half Image + Text' block. 
    If there is any reasons why you would need to style this 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;
}

.half-and-half-image, 
.half-and-half-text {
    position: relative;
    width: 100%;
}

.half-and-half-image {
    height: 235px;
}

.image-block-left .half-and-half-image {
    padding-right: 23px;
}

.image-block-right .half-and-half-image {
    padding-left: 23px;
}

.half-and-half-text {
    padding: 20px 23px;
}

@media (min-width: 768px) {
    .half-and-half.flex-opposite {
        flex-direction: row-reverse;
    }

    .half-and-half-image {
        width: 423px;
        height: auto;
    }

    .half-and-half-image img {
        position: absolute;
        top: 0;
        left: 0;
    }

    .half-and-half-text {
        width: calc(100% - 423px);
    }

    .image-block-left .half-and-half-image {
        padding-right: 0;
    }

    .image-block-right .half-and-half-image {
        padding-left: 0;
    }

    .half-and-half-text {
        padding: 30px 52px;
    }

    .image-block-left .half-and-half-text {
        padding-left: 39px;
    }

    .image-block-right .half-and-half-text {
        padding-right: 39px;
    }

}


@media (min-width: 1200px) {

    .half-and-half-image {
        width: calc(50% + 167px);
    }

    .half-and-half-text {
        width: calc(50% - 167px);
    }


    .half-and-half-text {
        padding: 96px 67px 100px;
    }

    .image-block-left .half-and-half-text {
        padding-left: 62px;
    }

    .image-block-right .half-and-half-text {
        padding-right: 62px;
    }

}

@media (min-width: 1600px) {
    .half-and-half-image {
        width: calc(50% + 15px);
    }

    .half-and-half-text {
        width: calc(50% - 15px);
    }

    .half-and-half-text ul {
        margin-bottom: 32px;
    }

    .half-and-half-text {
        padding: 96px 64px 100px;
    }

    .image-block-left .half-and-half-text {
        padding-left: 152px;
    }

    .image-block-right .half-and-half-text {
        padding-right: 152px;
    }
}

/*
    Large Image + Text Block Customizations - Global Styling

    The styles you add to this file will be applied to the 'Large 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)

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

.half-and-half-image-text {
    position: relative;
    z-index: 1;
    
    .half-and-half-image-text__content {
        padding: 20px;

        @media (min-width: 768px) {
            padding: 32px;
        }
        
        @media (min-width: 1200px) {
            padding: 50px;
            display: flex;
            align-items: center;
        }

        .content_wrapper {
            width: 100%;
        }
    }
}

.half-and-half-image-text__image {
    position: relative;
    padding: 0;

}
.half-and-half-image-text.image-cover {
    position: relative;
    padding-top: 0 !important;
}
.half-and-half-image-text.image-cover .half-image-text__image {
    position: relative;
}

.half-and-half-image-text__image img{
    position: relative;
    max-height: 174px;
}
.half-and-half-image-text__content{
    padding: 40px 19px;
}

.half-and-half-image-text.image-cover .container-fluid{ 
    padding: 0;
}
.half-and-half-image-text.image-cover img{ 
    height: 200px;
}
.half-and-half-image-text.image-cover .content_wrapper {
    padding: 22px 22px;
}
.half-and-half-image-text:has(+ .image-text-image ) {
    padding-bottom: 20px;
}
.half-and-half-image-text .flex-opposite {
    flex-direction: column-reverse;
}
.half-and-half-image-text .image-tall{
    border-radius: 0 3px 0 0;
    width: calc(100% - 22px);
}
.half-and-half-image-text .flex-opposite .half-and-half-image-text .image-tall{
    border-radius: 3px 0 0 3px;
}
.half-and-half-image-text.tall-image .half-image-text__image{
    display: flex;
}
.flex-opposite .half-image-text__image img{
    margin-left: auto;
}

.half-and-half-image-text + .half-and-half-image-text {
    padding-top: 0;
}

@media(min-width:768px) {
    .half-and-half-image-text:has(+ .image-text-image ) {
        padding-bottom: 0;
    }
    .half-and-half-image-text__image img{ 
        max-height: 350px;
    }
    .half-and-half-image-text__content{
        padding: 50px 58px;
        text-align: left;
    }
    .half-and-half-image-text.image-cover .half-image-text__image img {
        max-height: 100%;
        height: 100%;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .half-and-half-image-text.image-cover {
        margin: 0;
    }
    .half-and-half-image-text.image-cover .half-image-text__image ,
    .half-and-half-image-text.image-cover .half-image-text__content {
        padding: 0;
    }
    .half-and-half-image-text.image-cover .content_wrapper {
        padding: 75px 53px;
        padding-left: 33px;
    }
    .half-and-half-image-text .flex-opposite {
        flex-direction: row-reverse;
    }
    .half-and-half-image-text.image-cover.tall-image {
        margin-top: 75px;
        padding: 0 !important;
    }
    .half-and-half-image-text.tall-image img{
       max-height: unset !important;
       height: calc(100% + 75px) !important;
       transform: translateY(-75px);
       width: 100%;
       bottom: 0;
       right: 0;
       z-index: 2;
    }
    .half-and-half-image-text.image-cover .flex-opposite .content_wrapper{ 
        padding-right: 33px;
        padding-left: 53px;
    }
    .half-and-half-image-text.image-cover.tall-image .half-image-text__image::before {
        content: '';
        position: absolute;
        right: -25px;
        bottom: 0;
        border: 5px solid rgba(231, 231, 231, 1);
        width: 270px;
        height: 174px;
        transform: translateY(50px);
        z-index: 1;
        
    }
}

@media(min-width:1200px) {
    .half-and-half-image-text__image img{ 
        max-height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }
    .half-and-half-image-text__content{ 
        padding: 100px 69px;
    }
    .homepage-half-large-image::after{
        height: 50%;
    }
    .half-and-half-image-text.image-cover .content_wrapper {
        padding: 97px 64px 97px 78px;
    }
    .half-and-half-image-text.tall-image img{
        height: calc(100% + 100px) !important;
        transform: translateY(-100px);
    }
    .half-and-half-image-text.image-cover .flex-opposite .content_wrapper{
        padding-left: 64px;
        padding-right: 141px;

    }
    .half-and-half-image-text.image-cover.tall-image .half-image-text__image {
        width: 55%;
    }
    .half-and-half-image-text.image-cover.tall-image .half-image-text__content {
        width: 45%;
    }
    .half-and-half-image-text.tall-image + .half-and-half-image-text {
        padding-top: 100px;
    }
    .half-and-half-image-text.image-cover.tall-image .half-image-text__image::before {
      
        width: 586px;
        height: 342px;
        transform: translateY(100px);
    }
   
       
}

@media(min-width: 1500px) {
    .half-and-half-image-text.image-cover .content_wrapper {
        padding-left: 152px;
    }

    .half-and-half-image-text.image-cover.tall-image .half-image-text__image::before {
        right: -12px;
        width: 347px;
        height: 247px;
        transform: translateY(100px);
    }
    .half-and-half-image-text.image-cover.tall-image .half-image-text__image {
        width: 49%;
    }
    .half-and-half-image-text.image-cover.tall-image .half-image-text__content {
        width: 51%;
    }
}