/**
 * Naloxone CTA Component Styles
 * 
 * Displays a full-width card with text content on the left and an image on the right
 * for the Naloxone page
 */

.naloxone-cta {
    background-color: #000;
    color: #fff;
    
    .container {
        gap: 30px;
    }
    .naloxone-cta-text {
        flex: 1;
        width: 33.333%;
        padding-right: 20px;

        @media (max-width: 1200px) {
            flex: none;
            width: 100%;
            padding-right: 0px;
        }
        .naloxone-cta-text-box {
            padding: 2.5rem;
            background: linear-gradient(to bottom, #000000 0%, #181818 100%);
            border: 1px solid rgba(255, 255, 255, .5);
            border-radius: var(--border-radius-secondary);
            height: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

            @media (max-width: 1200px) {
                padding: 1.5rem;
            }
            > div {
                width: 100%;
            }
            h3 {
                line-height: 1.3;

                @media (max-width: 1200px) {
                    font-size: 1.5rem;
                }
            }
        }
    }
    .naloxone-cta-card {
        flex: 2;
        width: 66.666%;

        @media (max-width: 1200px) {
            flex: none;
            width: 100%;
        }
    }
    & .card-wrapper {
        display: flex;
        border-radius: var(--border-radius-secondary);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .5);
    }
    
    & .content-column {
        width: 60%;
        padding: var(--spacing-lg);
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        & h2 {
            color: #ffffff;
            margin-bottom: var(--spacing-md);
        }
        
        & .description {
            color: #ffffff;
            margin-bottom: var(--spacing-md);
        }
    }
    
    & .image-column {
        width: 40%;
        
        & .card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            border-radius: 0 var(--border-radius-secondary) var(--border-radius-secondary) 0;
        }
    }
    
    & .cta-links {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
        
        & .btn {
            width: fit-content;
        }
    }
    
    /* Responsive styles */
    @media (max-width: 992px) {
        & .card-wrapper {
            flex-direction: column;
        }
        
        & .content-column,
        & .image-column {
            width: 100%;
        }
        
        & .image-column {
            height: 300px;
            
            & .card-image {
                border-radius: 0 0 var(--border-radius-secondary) var(--border-radius-secondary);
            }
        }
    }
}