/**
 * Questions to Ask Component Styles
 * 
 * Displays a section with questions to ask medical professionals about opioids
 * and a video about opioid alternatives
 */

.questions-to-ask {
    background-color: #000;
    color: #fff;
    
    & .questions-intro-wrapper {
        display: flex;
        flex-wrap: wrap;
        & .image-column {
            flex: 0 0 30%;
            padding-right: var(--spacing-md);
            
            @media (max-width: 768px) {
                flex: 0 0 100%;
                padding-right: 0;
                margin-bottom: var(--spacing-md);
                display: flex;
                justify-content: center;
                
                & img {
                    max-width: 400px;
                    width: 100%;
                }
            }
            
            & img {
                width: 100%;
                height: auto;
                border-radius: var(--border-radius-secondary);
            }
        }
        
        & .content-column {
            flex: 0 0 70%;
            
            @media (max-width: 768px) {
                flex: 0 0 100%;
                margin-top: var(--spacing-md);
            }
            
            & h2 {
                margin-bottom: var(--spacing-md);
                
                @media (max-width: 768px) {
                    font-size: 1.75rem;
                }
            }
            
            & .questions-columns {
                display: flex;
                flex-wrap: wrap;
                gap: var(--spacing-lg);
                margin-bottom: var(--spacing-xl);
                
                @media (max-width: 768px) {
                    gap: 0;
                }
                
                & .questions-column {
                    flex: 0 0 calc(50% - var(--spacing-lg) / 2);
                    
                    @media (max-width: 768px) {
                        flex: 0 0 100%;
                        margin: 0;
                        
                        & ul {
                            margin: 0;
                        }
                    }
                    & ul {
                        list-style: none;
                        padding-left: 0;
                        margin-left: 0;
                        
                        & li {
                            margin-bottom: calc(var(--spacing-xs) / 2);
                            line-height: 1.4;
                            margin-left: 2rem;
                            position: relative;
                            
                            &:last-child {
                                margin-bottom: 0;
                            }
                            
                            @media (max-width: 768px) {
                                &:last-child {
                                    margin-bottom: calc(var(--spacing-xs) / 2);
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    
    & .questions-to-ask-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: var(--spacing-md);
        
        @media (max-width: 768px) {
            flex-wrap: wrap;
        }
    }
    
    /* Video Section Styles */
    & .video-section {
        flex: 0 0 70%;
        
        @media (max-width: 768px) {
            flex: 0 0 100%;
            margin-bottom: var(--spacing-md);
        }
    }
    
    & .video-container {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: var(--border-radius-secondary);
        overflow: hidden;
    }
    
    & .video-thumbnail {
        position: relative;
        width: 100%;
        height: 100%;
        
        & img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: var(--border-radius-secondary);
        }
    }
    
    & .play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        z-index: 2;
        
        &:hover {
            transform: translate(-50%, -50%) scale(1.1);
            transition: transform 0.2s ease;
        }
    }
    
    & .video-iframe-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        
        & iframe {
            width: 100%;
            height: 100%;
            border-radius: var(--border-radius-secondary);
        }
    }
    
    /* Questions Box Styles */
    & .questions-box {
        flex: 0 0 calc(30% - var(--spacing-md));
        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);
        
        @media (max-width: 768px) {
            flex: 0 0 100%;
        }
        
        
        & .yellow-text {
            color: var(--color-yellow);
        }
        
        & p {
            line-height: .5;
           
            text-align: left;
            
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}