/**
 * Multi Column Lists with CTA component styles
 * Follows the JPK theme's design system
 */

.multi-column-lists-with-cta {

    .intro-content {
        margin-bottom: var(--spacing-md);

        h2 {
            margin-bottom: var(--spacing-sm);
        }

        p {
            max-width: 50%;
            margin-bottom: var(--spacing-md);
            
            @media (max-width: 768px) {
                max-width: 100%;
            }
        }
    }

    .cta-button {
        margin-bottom: var(--spacing-md);
    }

    .opioid-list-box {
        max-width: 75%;
        padding: var(--spacing-lg);
        background: linear-gradient(to bottom, #000000 0%, #181818 100%);
        border-radius: var(--border-radius-primary);
        margin-bottom: var(--spacing-lg);

        @media (max-width: 768px) {
            max-width: 100%;
        }
    }

    .opioid-list-columns {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--spacing-md);

        @media (max-width: 992px) {
            grid-template-columns: repeat(2, 1fr);
        }

        @media (max-width: 576px) {
            grid-template-columns: 1fr;
        }

        ul {
            list-style: none;
            padding: 0;
            margin: 0;

            li {
                margin-bottom: 4px;
                color: #ffffff;
                position: relative;
                padding-left: 0;
                padding-top: 0;
                padding-bottom: 0;
                line-height: 1.3;
                
                &::before {
                    display: none;
                }
            }
        }
    }
}