/* ============================================
   HOMEPAGE TOP CASINOS - Блок топ казино главной страницы
   Version: 1.0.1 - Исправлены звёзды и статус orange
   Description: Адаптивная сетка карточек казино для блока homepage_top_casinos
   Dependencies: theme-vars.css, content-blocks.css, buttons.css
   ============================================ */

/* =============================================================
   1. КОНТЕЙНЕР БЛОКА
   ============================================================= */
   
.homepage-top-casinos {
    padding: 24px;  
}  
   
.homepage-top-casinos__inner {
    display: flex;
    flex-direction: column;
/*    gap: var(--spacing-lg);*/
}

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

.homepage-top-casinos__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-casinos__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--spacing-md, 16px);
    width: 100%;
    align-items: stretch;
    margin-bottom: var(--spacing-lg);
    padding-top: 14px;               /* ДОБАВЛЕНО: место для плашек первого ряда */
}

/* Элементы сетки растягиваются на полную высоту */
.homepage-top-casinos__grid > article,
.homepage-top-casinos__grid > .casino-top-card {
    height: 100%;
}

/* =============================================================
   4. КАРТОЧКА КАЗИНО (casino-top-card)
   ============================================================= */

.casino-top-card {
    --ctc-bg:         #252538;
    --ctc-border:     var(--border-color);
    --ctc-radius:     var(--radius-lg);
    --ctc-transition: var(--transition-base);

    display:        flex;
    flex-direction: column;
    background:     var(--ctc-bg);
    border:         1px solid var(--ctc-border);
    border-radius:  var(--ctc-radius);
/*    overflow:       hidden;*/
    overflow:       visible; 
    transition:     var(--ctc-transition);
    height:         100%;
    position:       relative;
    box-shadow:     var(--shadow-sm);
    animation:      casinoTopFadeInUp 0.4s ease forwards;
    margin-top:     12px;               /* ДОБАВЛЕНО: отступ для плашки */
}

.casino-top-card:hover {
    transform:    translateY(-3px);
    border-color: var(--primary);
    box-shadow:   var(--shadow-lg);
}

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

/* =============================================================
   5. ИЗОБРАЖЕНИЕ / ЛОГОТИП (ОБНОВЛЕНО)
   ============================================================= */

.casino-top-card__image-wrapper {
    position:      relative;
    width:         100%;
    /* Современный способ задать пропорции */
    aspect-ratio:  5 / 3;              /* Соотношение 5:3 (как было с padding-top: 60%) */
    /* Fallback для старых браузеров */
    padding-top:   60%;                /* Убрать если не нужна поддержка IE */
    overflow:      hidden;
    background:    #1e1e2e;
    border-radius: var(--ctc-radius) var(--ctc-radius) 0 0;
    flex-shrink:   0;
    /* Flexbox для идеального центрирования */
    display:       flex;
    align-items:   center;
    justify-content: center;
}

/* Убираем padding-top для браузеров с поддержкой aspect-ratio */
@supports (aspect-ratio: 1) {
    .casino-top-card__image-wrapper {
        padding-top: 0;
    }
}

.casino-top-card__image-link {
    /* Для браузеров с aspect-ratio — обычный flex */
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
/*    height:          100%;*/
    text-decoration: none;
/*    padding:         12px; */             /* Отступы от краёв */
    
    /* Fallback: для старых браузеров с padding-top трюком */
    position:        absolute;
    top:             0;
    left:            0;
    z-index:         1;
}

/* Убираем absolute для современных браузеров */
@supports (aspect-ratio: 1) {
    .casino-top-card__image-link {
        position: static;
    }
}

.casino-top-card__image {
    /* Картинка занимает 100% доступной ширины */
    width:      100%;
    height:     auto;                   /* Сохраняет пропорции */
    max-height: 100%;                   /* Не выходит за границы контейнера */
    object-fit: contain;                /* Логотип помещается целиком без обрезки */
    display:    block;
    transition: transform 0.35s ease;
}

.casino-top-card__image-link:hover .casino-top-card__image {
    transform: scale(1.05);
}

.casino-top-card__image-placeholder {
    position:        absolute;
    top:             0;
    left:            0;
    width:           100%;
    height:          100%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       24px;
    font-weight:     800;
    color:           #ffffff;
    background:      linear-gradient(135deg, var(--primary), var(--info, #00ccff));
    text-transform:  uppercase;
    letter-spacing:  1px;
}


/* =============================================================
   6. СТАТУС КАЗИНО
   ============================================================= */

/* =============================================================
   6. СТАТУС КАЗИНО (ПЛАШКА НАД КАРТОЧКОЙ)
   ============================================================= */

.casino-top-card__status {
    position:       absolute;
    top:            -12px;              /* "Вылезает" над карточкой */
    left:           14px;               /* Отступ от левого края */
    z-index:        10;                 /* Поверх всех элементов */
    padding:        3px 12px;           /* Как в bonus-sidebar-card */
    border-radius:  12px;               /* Округлые углы */
    font-size:      10px;
    font-weight:    800;                /* Жирнее чем было */
    text-transform: uppercase;
    letter-spacing: 0.5px;              /* Увеличенный межбуквенный интервал */
    white-space:    nowrap;
    line-height:    1.4;
    box-shadow:     0 3px 8px rgba(0, 0, 0, 0.3);  /* Тень как в примере */
}

/* Цвета статусов */
.casino-top-card__status--green  { background: var(--success, #22c55e); color: #fff; }
.casino-top-card__status--red    { background: var(--danger,  #ef4444); color: #fff; }
.casino-top-card__status--yellow { background: var(--warning, #f59e0b); color: #000; }
.casino-top-card__status--blue   { background: var(--info,    #3b82f6); color: #fff; }
.casino-top-card__status--orange { background: #f97316;                 color: #fff; }

/* =============================================================
   7. КОНТЕНТ: РЕЙТИНГ + БОНУС
   ============================================================= */

.casino-top-card__content {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    padding:        12px 10px 0 10px;
    gap:            8px;
    flex:           1 1 auto;
    text-align:     center;
}

/* ── Рейтинг ── */

.casino-top-card__rating {
    display:     flex;
    align-items: center;
    gap:         6px;
}

/* ИСПРАВЛЕНИЕ: Стили для FontAwesome звёзд (как в Hero-блоке) */
.casino-top-card__stars {
    display:     flex;
    align-items: center;
    gap:         2px;
    color:       #fbbf24; /* Золотой цвет звёзд */
    font-size:   13px;
}

.casino-top-card__rating-number {
    font-size:   13px;
    font-weight: 700;
    color:       #ff9500;
    line-height: 1;
    white-space: nowrap;
}

/* ── Бонус ── */

.casino-top-card__bonus {
    font-size:   13px;
    font-weight: 600;
    color:       var(--text-primary);
    line-height: 1.4;
    word-break:  break-word;
}

.casino-top-card__bonus--empty {
    opacity:     0.6;
    font-style:  italic;
    font-weight: 400;
    color:       var(--text-secondary);
}

/* =============================================================
   8. КНОПКА ИГРАТЬ
   ============================================================= */

.casino-top-card__actions {
    padding:     0 8px 8px;
    flex-shrink: 0;
}

.casino-top-card__btn-play {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           100%;
    min-width:       0;
    font-size:       12px;
    padding:         8px 6px;
    text-align:      center;
    white-space:     nowrap;
}

.casino-top-card__btn-play--disabled {
    opacity:        0.5;
    cursor:         not-allowed;
    pointer-events: none;
}

/* =============================================================
   9. SEO ТЕКСТ (под сеткой)
   ============================================================= */

.homepage-top-casinos__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-casinos__content p {
    margin-bottom: var(--spacing-sm);
    color:         var(--text-secondary);
}

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

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

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

/* =============================================================
   10. КНОПКИ БЛОКА (общие CTA под текстом)
   ============================================================= */

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

/* =============================================================
   11. АДАПТИВНОСТЬ (как в slot-card.css)
   ============================================================= */

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

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

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

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

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

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

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

    .casino-top-card__image-wrapper {
/*        padding-top: 65%;*/
    }

    .casino-top-card__content {
        padding: 8px 6px;
        gap: 6px;
    }

    .casino-top-card__bonus {
        font-size: 12px;
    }

    .casino-top-card__btn-play {
        font-size: 11px;
        padding:   7px 5px;
    }
}

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

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

    .casino-top-card__content {
        padding: 8px 6px;
        gap:     6px;
    }

    .casino-top-card__rating-number {
        font-size: 12px;
    }

    .casino-top-card__bonus {
        font-size: 11px;
    }
}