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

.filterable-system {
    /* Large Text Promo component styling */
    & .filterable-card[data-type="large-text-promo"] {
        position: relative;
        overflow: hidden;
        padding:var(--spacing-md);
        border:solid 1px var(--color-yellow);
        
        /* Gradient overlay from yellow to transparent */
        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to top, var(--color-yellow) 0%, transparent 100%);
            z-index: 1;
            opacity: 0.5;
            pointer-events: none;
        }
        .large-text-promo-content {
            @media (max-width: 992px) {
                text-align: center;
            }
        }
    }
}