/**
 * Hero Alternatives Component Styles
 *
 * @package JPK
 */

.hero-alternatives {
    background-color: #000;
    color: #fff;
    
    & .hero-alternatives-wrapper {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-lg);
        align-items: flex-start;
        
        @media (max-width: 768px) {
            gap: var(--spacing-md);
        }
    }
    
    & .hero-alternatives-text {
        flex: 0 0 calc(50% - (var(--spacing-lg) / 2));
        
        @media (max-width: 768px) {
            flex: 0 0 100%;
            order: 2;
        }
        
        & h2 {
            font-family: var(--font-heading-primary);
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: var(--spacing-md);
            
            @media (max-width: 768px) {
                font-size: 2rem;
            }
        }
        
        & p {
            margin-bottom: var(--spacing-md);
            line-height: 1.6;
        }
        
        & 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;
                
                &:last-child {
                    margin-bottom: 0;
                }
            }
        }
    }
    
    & .hero-alternatives-image {
        flex: 0 0 calc(50% - (var(--spacing-lg) / 2));
        
        @media (max-width: 768px) {
            flex: 0 0 100%;
            order: 1;
        }
        
        & .hero-image {
            width: 100%;
            height: auto;
            border-radius: var(--border-radius-secondary);
        }
    }
}