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

.filterable-system {
    /* Text-Only component styling */
    & .filterable-card[data-type="text-only"] {
        position: relative;
        overflow: hidden;
        padding: var(--spacing-md);
        border:solid 1px var(--color-yellow);
        
        /* Yellow gradient overlay - same as large-text-promo */
        &::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;
        }
        
        & .card-content {
            position: relative;
            z-index: 2;
            height: 100%;
            width: 100%;
        }
        
        & .text-only-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            height: 100%;
          
        }
    }
}