/* ============================================================
   Casinoay — блок «Другие казино» на странице обзора.

   Отдельный компонент, а не переиспользование .cay-related с
   провайдеров: карточка несёт другие данные (рейтинг, лицензия,
   бонус вместо года основания и RTP), а тащить ради неё стили
   шапки провайдера значило бы грузить неиспользуемый CSS.

   Цвета и отступы — те же токены темы, поэтому тёмная тема
   свапается вместе с остальным сайтом.
   ============================================================ */

.cay-rc {
    margin: var(--space-7) 0 var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.cay-rc__title {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
    margin: 0 0 var(--space-5);
}

/* Карточек всегда ровно три — колонки заданы явно, чтобы auto-fit
   не разложил их на четыре и не оставил дыру справа. */
.cay-rc__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 700px) {
    .cay-rc__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Блочная обёртка: карточка внутри тянется на всю высоту ячейки. */
.cay-rc__cell {
    display: flex;
}

.cay-rc__card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--accent-tint);
    border: 1px solid var(--accent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    text-decoration: none;
    /* Градиент разрешён точечно (tokens.css) — тонкая полоса сверху. */
    background-image: var(--grad);
    background-repeat: no-repeat;
    background-size: 100% 4px;
    background-position: 0 0;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.cay-rc__card:hover,
.cay-rc__card:focus-visible {
    transform: translateY(-2px);
    background-color: color-mix(in srgb, var(--accent) 14%, var(--accent-tint));
    box-shadow: var(--shadow-float);
}

.cay-rc__card:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

.cay-rc__name {
    font-family: var(--font-display);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    color: var(--ink);
}

.cay-rc__rating {
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: 1;
    color: var(--accent-strong);
}

.cay-rc__rating-max {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--muted);
}

.cay-rc__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--muted);
}

.cay-rc__bonus {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text);
}

/* Вся карточка кликабельна, поэтому это span со стрелкой, а не вложенная ссылка. */
.cay-rc__cta {
    margin-top: auto;
    padding-top: var(--space-3);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--accent-strong);
}

.cay-rc__cta::after {
    content: ' \2192';
    display: inline-block;
    transition: transform .18s ease;
}

.cay-rc__card:hover .cay-rc__cta::after {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .cay-rc__card,
    .cay-rc__cta::after {
        transition: none;
    }
    .cay-rc__card:hover,
    .cay-rc__card:focus-visible {
        transform: none;
    }
}