/* ============================================================
   Casinoay — «Читайте дальше»: сквозной блок перелинковки.

   Один компонент на все типы страниц. Раньше похожих блоков было
   три: cay-related (провайдеры, статикой в контенте), cay-rc
   (казино, шаблоном) и ничего на слотах, хабах и статьях. Три
   реализации одного и того же расходятся тем быстрее, чем больше
   страниц, поэтому здесь остаётся одна.

   Вид карточки взят у cay-related без изменений: цветная подложка
   --accent-tint, торец --accent, градиентная полоса сверху. Это то
   оформление, которое уже утверждено на страницах провайдеров, и
   менять его заодно с расширением охвата было бы подменой задачи.

   Индиговая пара, а не --highlight-*: бирюзовый по tokens.css
   зарезервирован за карточками «топ выбор» в хабах.
   ============================================================ */

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

.cay-xlink__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);
}

/* Карточек здесь от трёх до шести, поэтому колонки не фиксируются жёстко,
   как в cay-related: там их всегда ровно три. minmax не даёт четвёртой
   колонке появиться на широком контейнере и оставить дыру справа. */
.cay-xlink__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

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

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

/* Ячейка — блочная обёртка, которую не трогает wpautop. Блок рендерится
   шаблоном, а не через the_content, но правило соблюдается: карточки
   провайдеров уже ломались ровно на этом, когда <a> оказывался прямым
   ребёнком сетки и между ними расставлялись <br>. */
.cay-xlink__cell {
    display: flex;
}

.cay-xlink__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;
    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-xlink__card:hover,
.cay-xlink__card:focus-visible {
    transform: translateY(-2px);
    background-color: color-mix(in srgb, var(--accent) 14%, var(--accent-tint));
    box-shadow: var(--shadow-float);
}

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

/* Тип страницы: без него смешанный блок (студия, слот, способ оплаты,
   статья в одной сетке) читается как случайная подборка. */
.cay-xlink__kind {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--accent-strong);
}

.cay-xlink__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-xlink__note {
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    color: var(--text);
}

/* Числовая приписка — рейтинг казино, RTP слота. Показывается только там,
   где значение проверено, поэтому у большинства карточек её нет. */
.cay-xlink__fact {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--muted);
}

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

/* Пробел перед стрелкой неразрывный: обычный съедается схлопыванием пробелов
   в content, и на рендере получается «Открыть→» без зазора. */
.cay-xlink__cta::after {
    content: '\00A0\2192';
    transition: transform .18s ease;
    display: inline-block;
}

.cay-xlink__card:hover .cay-xlink__cta::after {
    transform: translateX(3px);
}

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