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

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

/* Base Flex Utilities */
.flex-row {
    display: flex;
    flex-wrap: wrap;
}

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


/*---*\
Half Media Half Text - Contained (Bleed to Edge)
Section padding comes from .section-padding utility class
Background colors come from .bg-white, .bg-gray, .bg-light-blue utility classes
Pattern follows home-half-and-half.css structure with .flex-row parent and width-based columns
\*---*/

/* Mobile Base Styles */
.image-text--half-bleed .image-text__content,
.image-text--half-bleed .image-text__media {
    position: relative;
    width: 100%;
}

.image-text__media {
    height: 235px;
    overflow: hidden;
}

.image-text--image-right .image-text__media {
    padding-left: var(--bs-gutter-x, 22px);
    border-radius: 10px 0 0 10px;
    img {
        border-radius: 10px 0 0 10px;
    }
}

.image-text--image-left .image-text__media {
    padding-right: var(--bs-gutter-x, 22px);
    border-radius: 0 10px 10px 0;
    img {
        border-radius: 0 10px 10px 0;
    }
}

.image-text--half-bleed .image-text__media-wrapper {
    position: relative;
    height: 100%;
}

.image-text--half-bleed .image-text__content {
    padding: 35px var(--bs-gutter-x, 22px) 0;
}

.image-text--half-bleed h2 {
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 15px;
}

.image-text--half-bleed .image-text__description {
    font-size: 16px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
}

.image-text--half-bleed .image-text__description p {
    margin: 0 0 20px 0;
}

.image-text--half-bleed .image-text__description p:last-child {
    margin-bottom: 0;
}

/* Video Button - Block-specific border-radius overrides (uses global .video-bttn styles) */
.image-text--image-right .video-bttn {
    border-radius: 10px 0 0 10px;
}

.image-text--image-left .video-bttn {
    border-radius: 0 10px 10px 0;
}

.sub-heading-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sub-heading-wrapper img {
    width: 30px;
    height: 26px;
    display: block;
    -o-object-fit: contain;
       object-fit: contain;
}

.sub-heading-wrapper .sub-heading {
    margin: 0;
}


/* Tablet Styles */
@media (min-width: 768px) {
    .image-text__media {
        height: 496px;
    }

    .image-text--image-right .image-text__media {
        padding-left: var(--bs-gutter-x, 52px);
    }

    .image-text--image-left .image-text__media {
        padding-right: var(--bs-gutter-x, 52px);
    }

    .image-text--half-bleed .image-text__content {
        padding: 50px var(--bs-gutter-x, 52px) 0 var(--bs-gutter-x, 52px);
    }

    .image-text--half-bleed h2 {
        font-size: 45px;
    }

    .image-text--half-bleed .image-text__description {
        font-size: 18px;
    }

    .sub-heading-wrapper img {
        width: 40px;
        height: 35px;
    }
}

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

    .image-text--half-bleed .image-text__media {
        width: calc(50% - 125px);
    }

    .image-text--image-right .image-text__content {
        width: calc(50% + 62px);
        padding: 0 75px 0 0;

        .image-text__content-wrapper {
            margin-left: auto;
        }
    }

    .image-text--image-left .image-text__content {
        width: calc(50% + 62px);
        padding: 0 0 0 75px;

        .image-text__content-wrapper {
            margin-right: auto;
        }
    }

    .image-text--half-bleed .image-text__media {
        padding: 0;
        height: auto;
    }

    .image-text--half-bleed .image-text__media-wrapper {
        position: absolute;
        width: 100%;
    }

    .image-text--half-bleed .image-text__content-wrapper {
        max-width: 681px;
    }

    .image-text--half-bleed .image-text__description {
        font-size: 20px;
    }
}

/* Large Desktop Styles */
@media (min-width: 1367px) {
    /* Maintain desktop styles, can adjust if needed for larger screens */
}

.single-dealer .image-text__media {
    overflow: visible;
}

.dealer-hero {

    .image-text__media {
        overflow: visible;
    }

    .image-text__content {
        text-align: center;
    }
    
}

.dealer-logo-wrapper {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: auto;
    z-index: 3;
    width: 210px;
    height: 130px;
    padding: 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 20px 0 rgba(1, 10, 25, 0.15);
    -webkit-backdrop-filter: blur(25px);
            backdrop-filter: blur(25px);
    overflow: hidden;
    text-align: center;

    img {
        width: auto;
        height: auto;
        max-height: 100%;
    }
}

.image-text--image-right .image-text__media img.dealer-logo {
    border-radius: 10px;
}

@media (min-width: 768px) {
    .dealer-logo-wrapper {
        left: 25px;
    }
}

@media (min-width: 1200px) {
    .dealer-hero {
        .image-text__content {
            text-align: left;
        }
    }

    .dealer-logo-wrapper {
        left: -77px;
        width: 327px;
        height: 165px;
        padding: 20px 30px;
        margin: 0;
    }
}