/**
 * CTA With Video Layout Styles
 */

.text-with-video-wrapper {
    display: flex;
    flex-direction: column;
    .text-section {
        margin-bottom: 2.4rem;
    }
    @media (min-width: 992px) {
        flex-direction: row;
        .video-container, .text-section {
            flex-basis: 50%;
        }
        .text-section {
            margin-bottom: 0;
            padding-right: 1.5rem;
        }
    }
    
    /* At 1200px and below, make text full width */
    @media (max-width: 1200px) {
        flex-direction: column;
        .text-section {
            flex-basis: 100%;
            max-width: 100%;
            margin-bottom: 2.4rem;
            padding-right: 0; /* Remove right padding when stacked */
        }
        .video-container {
            flex-basis: 100%;
            max-width: 100%;
        }
    }
    
    /* When no video is present, make text section 75% width */
    &.no-video {
        /* The title should be full width */
        .title-underline {
            width: 100%;
            max-width: 100%;
        }
        
        .text-section {
            flex-basis: 75%;
            max-width: 75%;
            margin-left: 0;
            margin-right: auto;
            text-align: left;
            
            /* Ensure all text content stays left-aligned */
            * {
                text-align: left;
            }
        }
        
        /* Override for 1200px and below - always full width regardless of video */
        @media (max-width: 1200px) {
            .text-section {
                flex-basis: 100%;
                max-width: 100%;
            }
        }
    }
}