/* --- СТИЛИ ДЛЯ КАРТОЧЕК С ЭФФЕКТОМ ПРОЖЕКТОРА --- */

/* 1. Основные стили для "стеклянной" карточки с эффектом */
.program-card.spotlight {
    position: relative;
    overflow: hidden;

    /* Стили "стеклянной" карточки (glassmorphism) */
    background-color: rgba(255, 255, 255, 0.05); /* Полупрозрачный фон */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Тонкая светлая рамка */
    backdrop-filter: blur(10px); /* Эффект размытия фона */
    -webkit-backdrop-filter: blur(10px); /* Для поддержки Safari */

    /* Устанавливаем цвет свечения по умолчанию (белый) */
    --spotlight-color: rgba(255, 255, 255, 0.12);
}

/* 2. Определяем разные цвета свечения через классы-модификаторы */

/* --- Основные цвета --- */
.program-card.spotlight-green {
    --spotlight-color: rgba(75, 255, 100, 0.15); /* Зеленый */
}
.program-card.spotlight-blue {
    --spotlight-color: rgba(50, 150, 255, 0.15); /* Синий */
}
.program-card.spotlight-red {
    --spotlight-color: rgba(255, 70, 70, 0.15); /* Красный */
}
.program-card.spotlight-yellow {
    --spotlight-color: rgba(255, 215, 0, 0.18); /* Желтый (чуть плотнее) */
}

/* --- Дополнительные оттенки --- */
.program-card.spotlight-purple {
    --spotlight-color: rgba(180, 100, 255, 0.15); /* Фиолетовый */
}
.program-card.spotlight-orange {
    --spotlight-color: rgba(255, 165, 0, 0.15); /* Оранжевый */
}
.program-card.spotlight-pink {
    --spotlight-color: rgba(255, 105, 180, 0.15); /* Розовый */
}
.program-card.spotlight-cyan {
    --spotlight-color: rgba(0, 200, 220, 0.15); /* Бирюзовый / Циан */
}
.program-card.spotlight-gold {
    --spotlight-color: rgba(255, 191, 0, 0.2); /* Золотой (плотнее для насыщенности) */
}
.program-card.spotlight-lime {
    --spotlight-color: rgba(180, 255, 50, 0.15); /* Лаймовый */
}

/* 3. Стили для самого элемента "прожектора" */
.spotlight-effect {
    position: absolute;
    inset: 0; 
    pointer-events: none; 
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 8px;
    
    /* Используем CSS-переменную для цвета фона */
    background: radial-gradient(
        circle at var(--x) var(--y), 
        var(--spotlight-color), 
        transparent 40%
    );
}

/* 4. Показываем эффект при наведении */
.program-card.spotlight:hover > .spotlight-effect {
    opacity: 1;
}