/*------------------------------------*\
    
    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 img {
    height: 100%;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    -o-object-fit: cover;
}

.half-and-half-text {
    padding: 60px 25px 50px 34px;
}


.half-and-half-image {
    height: 297px;
    position: relative;
}

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

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

.half-and-half-image::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 32px;
    bottom: -1px;
    left: 0;
    background: #F8B917;
    z-index: 1;
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.bg-white .half-and-half-image::after {
    background: var(--color-white);
}

.bg-lime .half-and-half-image::after {
    background: var(--color-lime);
}

.half-and-half-image::before {
    content: '';
    position: absolute;
    width: calc(100% + 32px);
    height: 4px;
    bottom: 37px;
    left: -16px;
    z-index: 2;
    transform: rotate(-5.24deg);
    background: linear-gradient(to right,  rgba(248,185,23,1) 0%,rgba(248,185,23,1) 50%,rgba(248,185,23,0) 51%,rgba(248,185,23,0) 100%) 0 0 repeat-x;
    background-size: 16px 100%;
}

.bg-white .half-and-half-image::before {
    background: linear-gradient(to right, rgb(255 255 255) 0%, rgb(255 255 255) 50%, rgba(22, 22, 22, 0) 51%, rgba(248, 185, 23, 0) 100%) 0 0 repeat-x;
    background-size: 16px 100%;         
}

.bg-lime .half-and-half-image::before {
    background: linear-gradient(to right, var(--color-lime) 0%, var(--color-lime) 50%, rgba(248, 185, 23, 0) 51%, rgba(248, 185, 23, 0) 100%) 0 0 repeat-x;
    background-size: 16px 100%;         
}


.half-and-half-text__wrapper p {
    color: var(--color-dark-brown);
    letter-spacing: 0.01em;
}

@media (min-width: 768px) {

    .half-and-half-text {
        padding: 91px 99px 76px 52px;
    }

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

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

    .half-and-half-image::after {
        height: 63px;
    }

    .half-and-half-image::before {
        bottom: 71px;
        transform: rotate(-5.1deg);
    }
}


@media (min-width: 1200px) {

    .flex-row.image-block-right {
        flex-direction: row-reverse;
    }
    
    .half-and-half-image {
        width: calc(50% - 17px);
        height: auto;
    }

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

    .half-and-half-text {
       width: calc(50% + 17px);
       padding: 99px 34px;
       min-height: 690px;
       display: flex;
       align-items: center;
    }

    .image-block-right .half-and-half-text {
       display: flex;
       justify-content: end;
    }    

    .half-and-half-image::after {
        height: 100%;
        width: 109px;
        left: auto;
        right: -1px;
    }

    .image-block-right .half-and-half-image::after {
        left: 0;
        right: auto;
        clip-path: polygon(0 0, 0 100%, 100% 100%);
    }

    .half-and-half-image::before {
        bottom: 0;
        left: auto;
        right: 70px;
        transform: rotate(9deg);
        width: 4px;
        height: 100%;
        background: linear-gradient(to bottom,  rgba(248,185,23,1) 0%,rgba(248,185,23,1) 50%,rgba(248,185,23,0) 51%,rgba(248,185,23,0) 100%) 0 0 repeat; 
        background-size: 100% 16px;
    }

    .bg-white .half-and-half-image::before {
        background: linear-gradient(to bottom, rgb(255 255 255) 0%, rgb(255 255 255) 50%, rgba(248, 185, 23, 0) 51%, rgba(248, 185, 23, 0) 100%) 0 0 repeat;
        background-size: 100% 16px;         
    }

    .bg-lime .half-and-half-image::before {
        background: linear-gradient(to bottom, var(--color-lime) 0%, var(--color-lime) 50%, rgba(248, 185, 23, 0) 51%, rgba(248, 185, 23, 0) 100%) 0 0 repeat;
        background-size: 100% 16px;         
    }

    .image-block-right .half-and-half-image::before {
        left: 70px;
        right: auto;
        transform: rotate(171deg);
    }

    .half-and-half-text__wrapper {
        max-width: 616px;
        max-height: 497px;
        overflow-y: auto;
    }

    /* Custom scrollbar styling for half-and-half-text__wrapper */
    .half-and-half-text__wrapper::-webkit-scrollbar {
        width: 22px;
    }

    .half-and-half-text__wrapper::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .bg-yellow .half-and-half-text__wrapper::-webkit-scrollbar-thumb {
        background: #F8B917;
        border-radius: 4px;
        transition: background 0.3s ease;
    }

    .bg-lime .half-and-half-text__wrapper::-webkit-scrollbar-thumb {
        background: var(--color-lime);
    }
    

    .half-and-half-text__wrapper::-webkit-scrollbar-thumb:hover {
        background: #e6a715;
    }

    /* Firefox scrollbar styling */
    .half-and-half-text__wrapper {
        scrollbar-width: medium;
        scrollbar-color: #F8B917 #f1f1f1;
    }

    .bg-lime .half-and-half-text__wrapper {
        scrollbar-color: var(--color-lime) #f1f1f1;
    }

    .video-bttn:hover svg {
        transform: scale(1.1);
    }
}