/*------------------------------------*\
    
    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)

\*------------------------------------*/
.image-text {
    position: relative;
    z-index: 1;
}

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

.image-text__half {
    width: 100%;
}

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

.image-text.curve-bottom {
    padding-top: var(--section-margins);
    padding-bottom: calc(12.133333vw + 3.25rem);
}

.image-text.curve-bottom + .fx-accordion {
    padding-top: 0;
}

.image-text.curve-bottom:has(+ .curve-top) .bottom-shape {
    display: none;
}

.image-text.curve-bottom:has(+ .curve-top) {
    padding-bottom: 0;
}

.stats.curve-bottom + .image-text {
    padding-top: var(--section-margins);
}

.single .image-text.curve-bottom {
    padding-top: var(--section-margins);
}

.image-text__img__wrap {
    position: relative;
    z-index: 1;
}

.image-text__img__wrap--border-radius:has(.object-fit--contain) {
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-text__img__wrap--border-radius:has(.object-fit--contain) img {
    height: auto;
}

.image-text__img__wrap--border-radius img {
    border-radius: 1.25rem;
}

.image-text__img__wrap.video::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgb(100,100,100,.5)
}

.video-overlay__trigger {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    display: block;
    line-height: 0;
    cursor: pointer;
    border-radius: 50%;
}

.video-overlay__trigger .video-overlay__icon {
    position: static;
    transform: none;
    transition: transform 0.25s ease, filter 0.25s ease;
    transform-origin: center;
}

.video-overlay__trigger:hover .video-overlay__icon,
.video-overlay__trigger:focus-visible .video-overlay__icon {
    transform: scale(1.08);
    filter: brightness(1.08) drop-shadow(0 0.375rem 1rem rgba(0, 0, 0, 0.2));
}

.video-overlay__trigger:focus-visible {
    outline: 0.125rem solid var(--white, #fff);
    outline-offset: 0.25rem;
}

@media (prefers-reduced-motion: reduce) {
    .video-overlay__trigger .video-overlay__icon {
        transition: none;
    }

    .video-overlay__trigger:hover .video-overlay__icon,
    .video-overlay__trigger:focus-visible .video-overlay__icon {
        transform: none;
        filter: none;
    }
}

.video-overlay__icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

.image-text__img__shape {
    position: absolute;
    width: 18.5625rem;
    height: auto;
    bottom: -2.1875rem;
    left: 0;
    z-index: -1;
    transform: rotate(-121.043deg);
}

.bg-white .image-text__img__shape {
    fill: var(--pink);
}

.bg-grey .image-text__img__shape {
    fill: var(--light-teal);
}

.bg-light-pink .image-text__img__shape {
    fill: var(--yellow);
}

.bg-light-blue .image-text__img__shape {
    fill: var(--light-teal);
}

.bg-dark-blue .image-text__img__shape {
    fill: var(--teal);
}

.image-text__text__wrap {
    margin-top: 1.25rem;
    position: relative;
}

.with-button-action {
    position: relative;
    display: inline-block;
}

.btn-action {
    color: var(--heading-color);
    text-align: center;
    font-family: "Caveat", cursive;
    font-size: 1.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 0.9em;
    position: absolute;
    right: -2.125rem;
    bottom: -0.6875rem;
    transform: rotate(-11.14deg);
    width: 12.1875rem;
}

.btn-action img,
.btn-action svg {
    position: absolute;
    left: -4.375rem;
    top: -3.4375rem;
    transform: rotate(-11.176deg);
    transform-origin: center;
}

.bg-grey .btn-action svg path,
.bg-light-blue .btn-action svg path {
    fill: #F9B0AC;
}

.bg-light-pink .btn-action svg path {
    fill: #1BA69C;
}

.bg-dark-blue .btn-action svg path,
.bg-white .btn-action svg path {
    fill: #F8DD9F;
}

.btn-group--arrow {
    margin-bottom: 0;
}

.image-text.bg-dark-blue .sub-heading {
    color: var(--pink);
}

.image-text.bg-dark-blue .sub-heading::before {
    background: var(--pink);
}

.bg-dark-blue .btn-action {
    color: var(--white);
}

.image-text.curve-bottom + .stats {
    padding-top: 0;
}

/* Logos */
.image-text__logo {
    width: auto;
    height: 2.25rem;
    object-fit: contain;
}

@media (min-width: 768px) {
    .image-text.curve-bottom {
        padding-top: var(--section-margins);
        padding-bottom: calc(8.658854vw + 1.5rem);
    }

    .masthead + .image-text {
        padding-top: calc( var(--section-margins) - 1.875rem );
    }

    .curve-bottom + .image-text.curve-bottom {
        /* padding-top: 1rem; */
    }

    .with-button-action .btn-action {
        top: 1.0625rem;
        right: -17.375rem;
    }    

    .image-text__img__wrap {
        width: 39.5rem;
        margin: 0 auto;
    }

    .image-text__img__shape {
        width: 32.0625rem;
        bottom: -3.4375rem;
        left: -1.0625rem;
        transform: rotate(-120deg);
    }

    .image-text__text__wrap {
        margin: 3.5rem auto 0;
        width: 32rem;
    }

    .image-text--left .image-text__img__shape {
        left: auto;
        bottom: -4.9375rem;
        right: -1.0625rem;
        transform: rotate(-121.043deg);
    }

    .single .image-text.curve-bottom {
        padding-top: var(--section-margins);
    }
    
    .stats.curve-bottom + .image-text {
        padding-top: var(--section-margins);
    }    

    .image-text.curve-bottom + .stats {
        padding-top: 0;
    }

}


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

    .image-text.curve-bottom {
        padding-top: var(--section-margins);
        padding-bottom: calc(5.833333vw + 3.25rem);
    }

    .masthead + .image-text {
        padding-top: calc( var(--section-margins) - 1.875rem );
    }    

    .curve-bottom + .image-text.curve-bottom {
        padding-top: 2.9375rem;
    }

    .single .image-text.curve-bottom {
        padding-top: var(--section-margins);
    }    

    .image-text__img {
        width: 39.5rem;
        min-height: 31.25rem;
        max-height: 38.125rem;
        display: flex;
    }

    .half-and-half.form .image-text__img {
        width: 50%;
    }

    .image-text__text {
        width: calc(100% - 39.5rem);
        padding: 0 6.125rem;
    }

    .half-and-half.form .image-text__text {
        width: 50%;
    }

    .image-text__img__wrap {
        width: 100%;
    }

    .image-text__img__wrap img {
        min-height: 28.125rem;
    }

    .image-text__img__wrap.image-text__img__wrap--border-radius:has(.object-fit--contain) img {
        min-height: unset;
    }

    .image-text__img__shape {
        bottom: -0.125rem;
        left: -3.625rem;
    }

    .image-text--left .image-text__img__shape {
        left: auto;
        bottom: -1.6875rem;
        right: -3.1875rem;
        transform: rotate(-58.96deg);
    }

    .image-text__text__wrap {
        margin: 0;
        width: 100%;
    }


    .btn-action {
        right: auto;
        left: 22.8125rem;
        bottom: -2.9375rem;
    }

    .btn-action img,
    .btn-action svg {
        left: -2.5rem;
        top: -4.6875rem;
        transform: rotate(11deg);
    }

    .image-text--small-padding {
        padding: 8rem 0;
    }

    .image-text.image-text--padding {
        padding-bottom: 14.375rem;
    }

    .image-text--top-bottom-padding {
        margin: 2.1875rem 0 0;
        padding-bottom: 5rem;
    }

    .stats.curve-bottom + .image-text {
        padding-top: var(--section-margins);
    }
    
    .image-text.curve-bottom + .stats {
        padding-top: 0;
    }

    .with-button-action .btn-action {
        right: -16.25rem;
        left: auto;
    }

    .image-text--right .with-button-action .btn-action {
        top: 4.25rem;
    }

    
}


@media (min-width: 1600px) {

    .image-text.curve-bottom {
        padding-top: var(--section-margins);
    }

    .masthead + .image-text {
        padding-top: calc( var(--section-margins) - 3.125rem );
    }    

    .image-text.curve-bottom + .stats {
        padding-top: 0;
    }

    .curve-bottom + .image-text.curve-bottom {
        padding-top: 2rem;
    }

    .image-text.curve-bottom:has(+ .curve-top) {
        padding-bottom: 3.25rem;
    }

    .image-text__text {
        padding: 0 7.75rem;
    }


    .image-text__img__shape {
        left: -6.6875rem;
    }

    .image-text--left .image-text__img__shape {
        left: auto;
        bottom: -1.8125rem;
        right: -6.125rem;
    }

    .btn-action {
        right: auto;
        bottom: -4.25rem;
        left: 22.8125rem;
    }

    .half-and-half.accordion .btn-action {
        left: 25.8125rem;
    }

    .btn-action img,
    .btn-action svg {
        left: -2.5rem;
        top: -4.6875rem;
        transform: rotate(11deg);
    }

    .image-text--left .btn-action {
        right: auto;
        bottom: -0.5rem;
        left: 22rem;
    }

    .image-text--left .btn-action img,
    .image-text--left .btn-action svg {
        left: -2.5rem;
        top: -3.3125rem;
        transform: rotate(-13deg);
    }

    .image-text.image-text--padding {
        padding-bottom: 14.375rem;
    }

    .image-text--left .btn-action.btn-action-margin {
        bottom: -4.1875rem;
        left: 22rem;
    }

    .image-text--left .btn-action.btn-action-margin img,
    .image-text--left .btn-action.btn-action-margin svg {
        left: -2.25rem;
        top: -4.75rem;
        transform: rotate(15deg);
    }

    .stats.curve-bottom + .image-text {
        padding-top: var(--section-margins);
    }
}