/* ============================================================
   Casinoay — Шапка провайдера + блок «Другие провайдеры»
   Страница /providers/{slug}/: hero сверху, перелинковка снизу.
   Те же токены темы, что и в provider-games.css, поэтому тёмная
   тема свапается вместе с остальным сайтом.
   ============================================================ */

/* ---------------------------------------------------------- hero */

/* Панель намеренно стоит на --surface-2, а плитки внутри — на --surface.
   Обратная пара «светлее снаружи, темнее внутри» даёт разделение в обеих темах:
   в тёмной панель #16264A против фона #081226, плитка #0F1E3A внутри неё;
   в светлой — #EFF1F9 против #F6F7FC и белые плитки. Один и тот же --surface
   и там и там сливался бы с фоном страницы. */
.cay-phero {
    margin: 0 0 var(--space-6);
    padding: var(--space-6);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    /* Градиент разрешён точечно (см. tokens.css) — hero как раз тот случай.
       Полоса сверху, а не заливка: белый текст на светлом конце градиента
       (--accent-2 #6E7BF7) не добирает 4.5:1, поэтому заливать панель нельзя. */
    background-image: var(--grad);
    background-repeat: no-repeat;
    background-size: 100% 6px;
    background-position: 0 0;
}

/* Названия провайдера в блоке нет намеренно: тема печатает эйбрау и <h1>
   прямо над ним, и дубль читался бы как ошибка вёрстки. Блок подписан
   через aria-label, поэтому в скринридере он не остаётся безымянным. */

/* Логотип приезжает шорткодом [cay_provider_logo]. Заполнен он не у всех студий —
   пустую обёртку убираем, чтобы не оставалось лишнего отступа. */
.cay-phero__brand:empty {
    display: none;
}

.cay-phero__brand {
    margin: 0 0 var(--space-5);
}

.cay-phero__logo {
    display: inline-block;
    /* Белая подложка обязательна: логотипы приходят прозрачными PNG и SVG,
       нарисованными под светлый фон, и на тёмной панели просто исчезают. */
    background: #fff;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.cay-phero__logo-img {
    display: block;
    block-size: 52px;
    inline-size: auto;
    max-inline-size: 260px;
    object-fit: contain;
}

.cay-phero__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.cay-phero__stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    /* Акцентный торец — самая дешёвая добавка контраста: плитка перестаёт быть
       просто прямоугольником другого оттенка. */
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-md);
}

/* «Основной стиль» — фраза, а не число: пусть занимает всю ширину,
   когда сетка переносит его на отдельную строку. */
.cay-phero__stat--wide {
    grid-column: 1 / -1;
}

.cay-phero__stat dt {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--accent-strong);
}

.cay-phero__stat dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: var(--fw-bold);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-tight);
    color: var(--ink);
}

.cay-phero__stat--wide dd {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    letter-spacing: normal;
    color: var(--text);
}

@media (min-width: 900px) {
    /* На широком экране четыре ячейки в ряд: «стиль» перестаёт быть отдельной строкой. */
    .cay-phero__stats {
        grid-template-columns: repeat(4, 1fr);
    }
    .cay-phero__stat--wide {
        grid-column: auto;
    }
}

/* ---------------------------------------------------------- related */

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

.cay-related__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-related__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

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

/* Ячейка сетки — блочная обёртка, которую не трогает wpautop;
   карточка внутри растягивается на всю её высоту. */
.cay-related__cell {
    display: flex;
}

/* Карточки цветные: подложка --accent-tint и градиентный торец сверху.
   Взята именно индиговая пара, а не --highlight-*: бирюзовый по tokens.css
   зарезервирован за карточками «топ выбор» в хабах, и повторять его здесь
   значило бы обещать читателю выделение, которого нет. */
.cay-related__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-related__card:hover,
.cay-related__card:focus-visible {
    transform: translateY(-2px);
    background-color: color-mix(in srgb, var(--accent) 14%, var(--accent-tint));
    box-shadow: var(--shadow-float);
}

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

.cay-related__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-related__meta {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--accent-strong);
}

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

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

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

.cay-related__card:hover .cay-related__cta::after {
    transform: translateX(3px);
}

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

@media (max-width: 480px) {
    .cay-phero {
        padding: var(--space-5);
    }
}