/*------------------------------------*\
    
    Half Video Half Text Block Customizations - Global Styling

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

\*------------------------------------*/
.half-video-text {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.half-video-text--video-on-left {
    flex-direction: row-reverse;
}

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

.half-video-text-image__image {
    height: 100%;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    -o-object-fit: cover;
}

.half-video-text-image__wrap {
    clip-path: polygon(50% 12%, 100% 0, 100% 100%, 0 100%, 0 0);
}

.half-video-text-text {
    padding: 70px 22px 48px;
}

.half-video-text-text__wrapper .btn {
    margin-top: 10px;
}

.half-video-text-image__wrap {
    height: 288px;
    position: relative;
}

/* .half-video-text-image__wrap::after {
    content: '';
    position: absolute;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    background-color: #E0D8BC;
    top: -1px;
    left: 0;
    width: 100%;
    height: 43px;
    z-index: 1;
}

.dark-bg .half-video-text-image__wrap::after {
    background-color: #17130C;
} */

.half-video-text-image__wrap::before {
    content: '';
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom,  rgba(6,18,10,0.25) 0%,rgba(6,18,10,1) 100%);
    z-index: 1;
}

.video-btn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    border: none;
}

.video-btn .half-video-text-image__play {
    width: 81px;
    height: auto;
    transition: all .3s;
}

@media (min-width: 768px) {
    .half-video-text-text {
        padding: 100px 52px;
    }

    .half-video-text-image__wrap {
        height: 515px;
    }

    .video-btn .half-video-text-image__play {
        width: 124px;
    }

    .half-video-text-image__wrap {
        clip-path: polygon(50% 8%, 100% 0, 100% 100%, 0 100%, 0 0);
    }
}

@media (min-width: 1200px) {

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

    .half-video-text-image, 
    .half-video-text-text {
        width: 50%;
    }

    .half-video-text-text {
        padding: 122px 0;
    }

    .half-video-text--video-on-left .half-video-text-text {
        padding-left: 16px;
        padding-right: var(--bs-gutter-x,63px);
    }

    .half-video-text--video-on-right .half-video-text-text {
        padding-right: 16px;
    }

    .half-video-text-text__wrapper {
        max-width: 646px;
    }

    .half-video-text--video-on-right .half-video-text-text__wrapper {
        margin-left: auto;
    }

    .half-video-text--video-on-left .half-video-text-image {
        padding-right: 100px;
    }

    .half-video-text--video-on-right .half-video-text-image {
        padding-left: 100px;
    }

    .half-video-text-image__wrap {
        height: 100%;

    }

    .half-video-text--video-on-left .half-video-text-image__wrap {
        clip-path: polygon(100% 0, 95% 50%, 100% 100%, 0 100%, 0 0);
    }

    .half-video-text--video-on-right .half-video-text-image__wrap {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 5% 50%);
    }

    .half-video-text-image__image {
        position: absolute;
    }

    .video-btn:hover {
        border: none;
    }

    .video-btn:hover .half-video-text-image__play {
        transform: scale(1.1);
    }
}