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

.naloxone-info {
    background-color: #000;
    color: #fff;
    
    & .card-wrapper {
        display: flex;
        border-radius: var(--border-radius-secondary);
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .5);
        background: linear-gradient(to bottom, #000000 0%, #181818 100%);
    }
    
    & .content-column {
        width: 60%;
        padding: var(--spacing-lg);
        display: flex;
        flex-direction: column;
        justify-content: center;
        
        & h2 {
          
            margin-bottom: var(--spacing-md);
            
            @media (max-width: 768px) {
                font-size: 1.75rem;
            }
        }
        
        & .description {
            margin-bottom: var(--spacing-lg);
            line-height: 1.6;
        }
        
        & .cta-links {
            display: flex;
            flex-direction: column;
            gap: var(--spacing-md);
            margin-bottom: var(--spacing-lg);
            
            & .btn {
                width: fit-content;
            }
            
            @media (max-width: 768px) {
                & .btn {
                    width: 100%;
                }
            }
        }
        
        & .info-note-box {
            padding: var(--spacing-md);
            background: linear-gradient(to bottom, #000000 0%, #181818 100%);
            border: 1px solid rgba(255, 255, 255, .5);
            border-radius: var(--border-radius-secondary);
            
            & p {
                margin: 0;
                font-size: 0.875rem;
            }
        }
    }
    
    & .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;
        }
    }
    
    /* 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);
            }
        }
        
        & .content-column {
            padding: var(--spacing-md);
        }
    }
}