/* ============================================
   HOMEPAGE TOP BONUSES - Блок топовых бонусов главной страницы
   Version: 1.1.0
   Description: Адаптивная сетка 6 колонок с независимыми карточками бонусов
   Dependencies: theme-vars.css, content-blocks.css, buttons.css
   ============================================ */

/* =============================================================
   1. КОНТЕЙНЕР БЛОКА
   ============================================================= */

.homepage-top-bonuses {
    padding: 24px;
}
   
.homepage-top-bonuses__inner {
    display: flex;
    flex-direction: column;
/*    gap: var(--spacing-lg);*/
}

/* =============================================================
   2. ЗАГОЛОВОК СЕКЦИИ
   ============================================================= */

.homepage-top-bonuses__heading {
    font-family: var(--font-headings);
    font-size: var(--h2-size);
    font-weight: var(--font-bold);
    line-height: var(--h2-line-height);
    color: var(--text-primary);
    text-transform: uppercase;
    border-bottom: 3px solid var(--info);
    padding-bottom: var(--spacing-sm);
    margin: 0 !important;
    text-align: center;
}

/* =============================================================
   3. АДАПТИВНАЯ СЕТКА КАРТОЧЕК (6 колонок на десктопе)
   ============================================================= */

.homepage-top-bonuses__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-md, 16px);
    width: 100%;
    align-items: stretch;
    padding-top: 14px; /* Место для статус-бейджей первого ряда */
    margin-bottom: var(--spacing-lg);
}

/* Элемент сетки */
.homepage-top-bonuses__item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Растягиваем карточку на всю высоту ячейки */
.homepage-top-bonuses__item .bonus-homepage-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* =============================================================
   4. КАРТОЧКА БОНУСА (bonus-homepage-card)
   ============================================================= */

.bonus-homepage-card {
    --bhc-bg:         #252538;
    --bhc-border:     var(--border-color);
    --bhc-radius:     var(--radius-lg);
    --bhc-transition: var(--transition-base);

    position:       relative;
    background:     var(--bhc-bg);
    border:         1px solid var(--bhc-border);
    border-radius:  var(--bhc-radius);
    overflow:       visible; /* КРИТИЧНО: статус-бейдж выступает за границы */
    margin-top:     12px;    /* Место для статус-бейджа */
    transition:     var(--bhc-transition);
    height:         calc(100% - 12px); /* Компенсируем margin-top */
    box-shadow:     var(--shadow-sm);
    animation:      bonusHomepageFadeInUp 0.4s ease forwards;
}

.bonus-homepage-card:hover {
    transform:    translateY(-3px);
    box-shadow:   0 10px 25px rgba(0, 0, 0, 0.25);
    border-color: var(--primary);
}

@keyframes bonusHomepageFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================================
   5. СТАТУС / ТИП БОНУСА (над карточкой)
   ============================================================= */

.bonus-homepage-card__status {
    position:       absolute;
    top:            -12px;
    left:           14px;
    z-index:        10;
    padding:        3px 12px;
    border-radius:  12px;
    font-size:      10px;
    font-weight:    800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space:    nowrap;
    box-shadow:     0 3px 8px rgba(0, 0, 0, 0.3);
    line-height:    1.4;
}

/* Цвета типов бонусов */
.bonus-homepage-card__status--welcome,
.bonus-homepage-card__status--deposit {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
}

.bonus-homepage-card__status--no-deposit,
.bonus-homepage-card__status--no_deposit {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff;
}

.bonus-homepage-card__status--freespins,
.bonus-homepage-card__status--free-spins,
.bonus-homepage-card__status--free_spins {
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    color: #fff;
}

.bonus-homepage-card__status--cashback {
    background: linear-gradient(135deg, #d97706, #f59e0b);
    color: #fff;
}

.bonus-homepage-card__status--reload {
    background: linear-gradient(135deg, #0891b2, #22d3ee);
    color: #fff;
}

.bonus-homepage-card__status--exclusive {
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    color: #fff;
}

/* Универсальный фолбэк */
.bonus-homepage-card__status:not([class*="--"]) {
    background: linear-gradient(135deg, #1d4ed8, #3b82f6);
    color: #fff;
}

/* =============================================================
   6. ОСНОВНОЙ БЛОК КАРТОЧКИ
   ============================================================= */

.bonus-homepage-card__inner {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        10px;
    height:         100%;
}

/* =============================================================
   7. ЛОГОТИП КАЗИНО
   ============================================================= */

.bonus-homepage-card__logo {
    margin-top:     10px;
    margin-bottom:  12px;
    height:         40px;
    display:        flex;
    align-items:    center;
    justify-content: center;
}

.bonus-homepage-card__logo img {
    max-height: 100%;
    max-width:  120px;
    object-fit: contain;
}

.bonus-homepage-card__logo-placeholder {
    font-size:      18px;
    font-weight:    800;
    color:          #fff;
    background:     linear-gradient(135deg, var(--primary), var(--info));
    padding:        8px 16px;
    border-radius:  var(--radius-md);
    text-transform: uppercase;
}

/* =============================================================
   8. ИНФОРМАЦИЯ О БОНУСЕ
   ============================================================= */

.bonus-homepage-card__info {
    margin-bottom: 15px;
    width:         100%;
    flex:          1 1 auto; /* Растягиваем для выравнивания кнопок */
    display:       flex;
    flex-direction: column;
    justify-content: center;
}

.bonus-homepage-card__title {
    font-family:   var(--font-primary);
    font-size:     16px;
    font-weight:   700;
    color:         #93c5fd; /* Голубоватый как на скриншоте */
    line-height:   1.3;
    margin-bottom: 6px;
}

.bonus-homepage-card__summary {
    font-family: var(--font-primary);
    font-size:   16px;
    font-weight: 600;
    color:       var(--text-primary);
    line-height: 1.3;
}

/* =============================================================
   9. БЛОК С ПУНКТИРОМ И КНОПКОЙ
   ============================================================= */

.bonus-homepage-card__action {
    width:       100%;
    padding-top: 10px;
    border-top:  1px dashed rgba(255, 255, 255, 0.15);
    position:    relative;
    margin-top:  auto; /* Прижимаем к низу */
}

/* Ножницы как на скриншоте */
.bonus-homepage-card__action::before {
    content:   '✂';
    position:  absolute;
    top:       -9px;
    left:      -5px;
    font-size: 12px;
    color:     #d97706; /* Оранжевый цвет ножниц */
    transform: rotate(-90deg);
}

.bonus-homepage-card__btn.gt-button {
    width:      100%;
    padding:    2px !important;
    min-width:  0 !important;
    background: linear-gradient(135deg, #3735ff42 0%, #42ffaa 100%);
}

.bonus-homepage-card__btn-inner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    height:          100%;
    padding:         8px 12px;
    border:          1px solid rgba(255, 255, 255, 0.5);
    border-radius:   5px;
    font-size:       13px;
    font-weight:     800;
    text-transform:  uppercase;
    letter-spacing:  0.5px;
}

/* =============================================================
   10. SEO ТЕКСТ
   ============================================================= */

.homepage-top-bonuses__content {
    font-family: var(--font-primary);
    font-size:   var(--font-base);
    line-height: var(--line-height-relaxed);
    color:       var(--text-secondary);
    padding-top: var(--spacing-md);
    border-top:  1px solid var(--border-color);
}

.homepage-top-bonuses__content p {
    margin-bottom: var(--spacing-sm);
    color:         var(--text-secondary);
}

.homepage-top-bonuses__content h2,
.homepage-top-bonuses__content h3,
.homepage-top-bonuses__content h4 {
    font-family:   var(--font-headings);
    color:         var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-weight:   var(--font-bold);
}

.homepage-top-bonuses__content a {
    color:           var(--info);
    text-decoration: underline;
    transition:      var(--transition-base);
}

.homepage-top-bonuses__content a:hover {
    color: var(--primary);
}

/* =============================================================
   11. КНОПКИ БЛОКА
   ============================================================= */

.homepage-top-bonuses__actions {
    display:         flex;
    gap:             var(--spacing-md);
    flex-wrap:       wrap;
    justify-content: flex-start;
}

/* =============================================================
   12. АДАПТИВНОСТЬ (как у homepage-top-casinos.css)
   ============================================================= */

/* Средние десктопы — 4 колонки */
@media (max-width: 1280px) {
    .homepage-top-bonuses__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
    }
}

/* Планшеты — 3 колонки */
@media (max-width: 992px) {
    .homepage-top-bonuses__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }

    .homepage-top-bonuses__heading {
        font-size: var(--h2-size-tablet, var(--h2-size));
    }

    .homepage-top-bonuses__actions {
        flex-direction: column;
    }

    .homepage-top-bonuses__actions .gt-button {
        width:           100%;
        justify-content: center;
    }

    .bonus-homepage-card__title   { font-size: 15px; }
    .bonus-homepage-card__summary { font-size: 14px; }
}

/* Мобильные — 2 колонки */
@media (max-width: 767px) {
    .homepage-top-bonuses__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .homepage-top-bonuses__heading {
        font-size: var(--h2-size-mobile, var(--h2-size));
    }

    .bonus-homepage-card__inner {
        padding: 8px;
    }

    .bonus-homepage-card__logo {
        height:        32px;
        margin-bottom: 8px;
    }

    .bonus-homepage-card__title   { font-size: 14px; }
    .bonus-homepage-card__summary { font-size: 13px; }

    .bonus-homepage-card__action {
        padding-top: 8px;
    }

    .bonus-homepage-card__btn-inner {
        padding:   7px 8px;
        font-size: 12px;
    }

    .bonus-homepage-card__status {
        left:      10px;
        padding:   2px 10px;
        font-size: 9px;
    }
}

/* Маленькие мобильные — 2 колонки */
@media (max-width: 480px) {
    .homepage-top-bonuses__inner {
/*        gap: var(--spacing-md);*/
    }

    .homepage-top-bonuses__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .bonus-homepage-card__title   { font-size: 13px; }
    .bonus-homepage-card__summary { font-size: 12px; }

    .bonus-homepage-card__btn-inner {
        padding:   6px 6px;
        font-size: 11px;
    }
}



/* =============================================================
   ДИНАМИЧЕСКИЕ СТИЛИ КАРТОЧЕК ПО СТАТУСУ
   Используем селектор :has() для адаптации фона и обводки
   ============================================================= */

/* Эксклюзивный бонус (красный) */
.bonus-homepage-card:has(.bonus-homepage-card__status--exclusive) {
    --bhc-bg: rgba(239, 68, 68, 0.08);
    --bhc-border: #ef4444;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.15);
}

/* Welcome bonus и депозитный (зеленый) */
.bonus-homepage-card:has(.bonus-homepage-card__status--welcome),
.bonus-homepage-card:has(.bonus-homepage-card__status--deposit) {
    --bhc-bg: rgba(34, 197, 94, 0.08);
    --bhc-border: #22c55e;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

/* Бездепозитные бонусы (синий) */
.bonus-homepage-card:has(.bonus-homepage-card__status--no-deposit),
.bonus-homepage-card:has(.bonus-homepage-card__status--no_deposit) {
    --bhc-bg: rgba(59, 130, 246, 0.08);
    --bhc-border: #3b82f6;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.15);
}

/* Бонусы на пополнение (голубой) */
.bonus-homepage-card:has(.bonus-homepage-card__status--reload) {
    --bhc-bg: rgba(34, 211, 238, 0.08);
    --bhc-border: #22d3ee;
    box-shadow: 0 0 12px rgba(34, 211, 238, 0.15);
}

/* Фриспины (фиолетовый) */
.bonus-homepage-card:has(.bonus-homepage-card__status--freespins),
.bonus-homepage-card:has(.bonus-homepage-card__status--free-spins),
.bonus-homepage-card:has(.bonus-homepage-card__status--free_spins) {
    --bhc-bg: rgba(167, 139, 250, 0.08);
    --bhc-border: #a78bfa;
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.15);
}

/* Кэшбэк (оранжевый) */
.bonus-homepage-card:has(.bonus-homepage-card__status--cashback) {
    --bhc-bg: rgba(245, 158, 11, 0.08);
    --bhc-border: #f59e0b;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}


/* Hover-эффекты с сохранением цветовой схемы статуса */
.bonus-homepage-card:has(.bonus-homepage-card__status--exclusive):hover {
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.3);
    border-color: #f87171;
}

.bonus-homepage-card:has(.bonus-homepage-card__status--welcome):hover,
.bonus-homepage-card:has(.bonus-homepage-card__status--deposit):hover {
    box-shadow: 0 10px 25px rgba(34, 197, 94, 0.3);
    border-color: #4ade80;
}

.bonus-homepage-card:has(.bonus-homepage-card__status--no-deposit):hover,
.bonus-homepage-card:has(.bonus-homepage-card__status--no_deposit):hover {
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    border-color: #60a5fa;
}

.bonus-homepage-card:has(.bonus-homepage-card__status--reload):hover {
    box-shadow: 0 10px 25px rgba(34, 211, 238, 0.3);
    border-color: #67e8f9;
}