/*---*\
Half & Half Image + Text Section
Full-height split layout with media (image/video) on one side and content on the other
Includes diagonal angle design for visual interest

KEY FEATURES:
- Image ALWAYS displays first on mobile/tablet (uses flexbox order)
- Diagonal angle transitions: bottom (mobile/tablet), side (desktop)
- Responsive: stacked < 1200px, side-by-side >= 1200px
- Reversible layout on desktop only
- Background colors: white, gray, pale blue

IMPLEMENTATION NOTES:
- Uses ::after for mobile/tablet diagonal (bottom of image)
- Uses ::before for desktop diagonal (side of image)
- Flexbox order ensures proper display regardless of HTML order
- clip-path creates diagonal angle effect
\*---*/

/* ==========================================================================
   BASE STYLES - MOBILE FIRST (Image always first on mobile/tablet)
   ========================================================================== */

.half-and-half {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
}

/* Media Column - Always first on mobile/tablet */
.half-and-half__media-col {
    position: relative;
    width: 100%;
    height: 375px;
    overflow: visible;
    order: 1; /* Image first */


    &:before {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--color-secondary-light);

    }
}

.half-and-half__img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0% 100%);
            clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0% 100%);
}

.half-and-half--image-left {
    .half-and-half__media-col::before,
    .half-and-half__img {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0% 100%);
                clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0% 100%);
    }
}

.half-and-half--image-right {
    .half-and-half__media-col::before,
    .half-and-half__img {
        -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 60px));
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 60px));
    }
}


/* Cyan diagonal accent - Mobile/Tablet (bottom, follows the angle) */

/* Content Column - Second on mobile/tablet */
.half-and-half__content-col {
    padding: var(--section-margins) var(--container-padding);
    order: 2; /* Content second */
}

/* Content wrapper - constrained width */
.half-and-half__content-col .wysiwyg__content {
    max-width: 100%;
    width: 100%;
}

/* Video Button - Block-specific border-radius overrides (uses global .video-bttn styles) */

.half-and-half .video-bttn {
    background: transparent;
}

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

.half-and-half--image-right .video-bttn {
    border-radius: 10px 0 0 10px;
}

/* Background Color Modifiers */
.half-and-half--bg-white {
    background-color: var(--color-bg-white);
}

.half-and-half--bg-gray {
    background-color: var(--color-bg-gray);
}

.half-and-half--bg-blue {
    background-color: var(--color-bg-light-blue);
}

/* Background color needs to be applied to pseudo-element */
.half-and-half--bg-white .half-and-half__media-col::after {
    background-color: var(--color-bg-white);
}

.half-and-half--bg-gray .half-and-half__media-col::after {
    background-color: var(--color-bg-gray);
}

.half-and-half--bg-blue .half-and-half__media-col::after {
    background-color: var(--color-bg-light-blue);
}

/* ==========================================================================
   TABLET BREAKPOINT (768px+) - Keep stacked, image first
   ========================================================================== */

@media (min-width: 768px) {
    /* Keep stacked layout */
    .half-and-half {
        flex-direction: column;
    }
    
    /* Media stays first */
    .half-and-half__media-col {
        height: 512px;
        order: 1;
    }
    
    /* Content stays second */
    .half-and-half__content-col {
        padding: var(--section-margins) 50px;
        order: 2;
    }
    
    /* Constrain content width on tablet */
    .half-and-half__content-col .wysiwyg__content {
        max-width: 664px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   DESKTOP BREAKPOINT (1200px+) - Side by side with diagonal angle
   ========================================================================== */

@media (min-width: 1200px) {
    .half-and-half {
        flex-direction: row;
        align-items: stretch;
    }
    
    /* Default Layout: Content Left, Image Right */
    .half-and-half__content-col {
        width: calc(50% + 125px);
        /* flex: 0 0 50%; */
        padding: var(--section-margins) 80px;
        gap: var(--spacing-lg);
        order: 1;
        display: flex;
        align-items: center;
    }
    
    /* Constrain content width on desktop - keeps content from stretching */
    .half-and-half__content-col .wysiwyg__content {
        max-width: 678px;
        width: 100%;
        margin: 0 0 0 auto;
    }

    .half-and-half--image-left .half-and-half__content-col .wysiwyg__content {
        margin: 0 auto 0 0;

    }
    
    .half-and-half__media-col {
        /* flex: 0 0 50%; */
        width: calc(50% - 125px);
        min-height: 700px;
        order: 2;
        overflow: visible;
        height: auto;
        position: relative;
    }
    
    
    /* Reversed Layout: Image Left, Content Right */
    .half-and-half--flex-row-reverse {
        flex-direction: row-reverse;
    }
    
    /* When reversed, content aligns to the left */
    .half-and-half--flex-row-reverse .half-and-half__content-col {
        justify-content: flex-start;
    }
    
    .half-and-half--image-right {
        .half-and-half__media-col::before,
        .half-and-half__img {
            -webkit-clip-path: polygon(190px 0, 100% 0, 100% 100%, 0 100%);
                    clip-path: polygon(190px 0, 100% 0, 100% 100%, 0 100%);
        }

        .half-and-half__media-col::before {
            bottom: 0;
            left: -10px;
        }
    }
    
    .half-and-half--image-left {
        flex-direction: row-reverse;

        .half-and-half__media-col::before,
        .half-and-half__img {
            -webkit-clip-path: polygon(0 0, calc(100% - 190px) 0, 100% 100%, 0 100%);
                    clip-path: polygon(0 0, calc(100% - 190px) 0, 100% 100%, 0 100%);
        }

        .half-and-half__media-col::before {
            bottom: 0;
            left: auto;
            right: -10px;
        }


    }
}

/* ==========================================================================
   LARGE DESKTOP BREAKPOINT (1367px+)
   ========================================================================== */

@media (min-width: 1367px) {

}