/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*------------------------------------*\
    
    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: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.image-text .flex-center {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center
}

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

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

.image-text__img {
    position: relative;
    max-width: 400px;
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
}

.image-text__img img {
    border-radius: 20px;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.object-fit--contain{
    -o-object-fit: contain;
       object-fit: contain;
    width: auto !important; 
    height: 100%;
    max-height: 320px;
}

.image-text__img--cutout {
    border-radius: 20px;
    overflow: hidden;
    border-radius: 20px;
    background: -o-linear-gradient(315deg,  var(--primary-color) 0%, var(--dark-blue) 50%, var(--blue) 100%);
    background: linear-gradient(135deg,  var(--primary-color) 0%, var(--dark-blue) 50%, var(--blue) 100%);
    padding-left: 39px;
    padding-top: 20px;
}

.image-text__img--cropped {
    width: 100%;
    max-width: 100%;
}

.image-text__img--cropped img,
.image-text__img--cropped .object-fit--cover {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    -o-object-fit: cover !important;
       object-fit: cover !important;
    border-radius: 20px;
    display: block;
}

.image-text__img--cutout img {
    display: block;
    margin-left: auto;
}

.image-text--option .image-text__text {
    margin-bottom: 0;
    margin-top: 32px
}

.masthead .image-text__img {
    height: 320px;
}

.image-text__img {
    height: 320px;
}

.image-text__img--cutout {
    height: auto;
}

.image-text__img .object-fit-width{
    max-width: 100%;
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    -o-object-fit: fill !important;

    @media( max-width : 767px ) {
        object-fit: cover !important;
    }
}

.image-text__text.image-text__text--full-width{
    max-width: 100%;
}  


@media (min-width: 768px) {
    .image-text__img--cutout {
        padding-left: 67px;
        padding-top: 35px;
    }

    .masthead .image-text__img {
        height: 377px;
    }

    .image-text__img {
        height: auto;
        max-width: 50%;
        width: 100%;
        margin: 0 auto;
    }

    .object-fit--contain{
        -o-object-fit: contain;
           object-fit: contain;
        width: 100% !important;
        height: 100%;
        max-height: unset;
    }
}

@media (min-width: 1200px) {

    .flex-opposite {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
            -ms-flex-direction: row-reverse;
                flex-direction: row-reverse;
    }

    /*
     * Desktop: one row, two columns -> same height for text and image.
     * Stretch beats .image-text .flex-center (align-items: center) on the row.
     */
    .image-text .container > .row.flex-row,
    .image-text .container > .row.flex-row.flex-center {
        -webkit-box-align: stretch !important;
            -ms-flex-align: stretch !important;
                align-items: stretch !important;
    }

    .image-text .container > .row.flex-row.flex-center > .image-text__half {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .image-text .container > .row.flex-row > .image-text__half {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        -ms-flex-item-align: stretch;
            -ms-grid-row-align: stretch;
            align-self: stretch;
        min-height: 0;
    }

    .image-text .container > .row.flex-row > .image-text__half:has(.image-text__text) {
        justify-content: center;
    }

    .image-text__text {
        margin-bottom: 0;
        max-width: 547px;
        -webkit-box-flex: 0;
            -ms-flex: 0 0 auto;
                flex: 0 0 auto;
    }

    .image-text__img {
        max-width: 100%;        
        min-height: 400px !important;
        height: 100% !important;
        width: 100% !important;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

    .image-text__img:not(.image-text__img--cutout) {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
    }

    .image-text__img img {
        max-height: 100%;
    }

    .image-text--left .image-text__text {
        margin-left: auto;
    }

    .image-text__img--cutout {
        padding-left: 87px;
        padding-top: 53px;
        position: sticky;
        top: 135px;
        left: 0;
    }

    .image-text--option .image-text__text {
        margin-bottom: 0;
        margin-top: 0
    }

    .masthead .image-text__img {
        height: auto !important;
        min-height: 0;
    }

    .masthead__row {
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    .masthead__row > .image-text__half {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }

    .masthead__row > .image-text__half--image-only {
        min-height: 0;
    }

    .masthead__row .image-text__half--image-only .image-text__img {
        -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
                flex: 1 1 auto;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
        position: relative;
    }

    .masthead__row .image-text__half--image-only .image-text__img img {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100% !important;
        -o-object-fit: cover;
           object-fit: cover;
    }

    /* Half Text + Half Media: contain inside the full column height. */
    .image-text__img .object-fit-width,
    .image-text__img .object-fit--contain {
        max-width: 100%;
        width: 100% !important;
        height: 100% !important;
        min-height: 400px !important;
        max-height: 100% !important;
        object-fit: cover !important;
        -o-object-fit: cover !important;
    }

    /* Masthead / cover utility: fill the stretched frame. */
    .image-text__img img.object-fit {
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: cover;
        -o-object-fit: cover;
    }

}