/**
 * Split Promo component styles for filterable components
 * Follows the JPK theme's design system
 */

.filterable-system {
    /* Split Promo component styling */
    & .filterable-card[data-type="split-promo"] {
        position: relative;
        overflow: hidden;
        padding:var(--spacing-md);
        background: linear-gradient(to bottom, #959595 0%, #ffffff 100%);
        
        .split-promo-content {
            @media (max-width: 1200px) {
                flex-direction: column-reverse;
            }
            .split-promo-text {
                width: 50%;
                padding-right: var(--spacing-sm);

                @media (max-width: 1200px) {
                    width: 100%;
                    padding-right: 0;
                }
                @media (max-width: 992px) {
                    text-align: center;
                }
                h2 {
                    color: #000;
                }
                .split-promo-button {
                    margin-bottom: var(--spacing-sm);

                    &:last-of-type {
                        margin-bottom: 0;
                    }
                }
            }
            .split-promo-image {
                width: 50%;

                @media (max-width: 1200px) {
                    width: 100%;
                    margin-bottom: var(--spacing-sm);
                }
                img {
                    width: 100%;
                    border-radius: var(--border-radius-secondary);
                }
            }
        }
    }
}