/* ============================================================
 * site.css — точечные правки визуала Riobet поверх кита.
 * Грузится ПОСЛЕ bundle.css. Не трогает сам кит (правки на уровне сайта).
 * ========================================================== */

/* 1 · ЗАГОЛОВКИ под длинные русские слова.
   Было --t-display 40-72px (рвало слова в узких hero-колонках) → компактнее. */
html[data-skin="midnight-crypto"] {
  --t-display: clamp(1.7rem, 3.6vw, 2.35rem);  /* ~27-37px: длинные RU-слова влезают */
  --t-h1:      clamp(1.55rem, 3.2vw, 2.2rem);  /* ~25-35px */
}
/* hero-brand-profile: дать заголовку больше ширины (уже media/aside) — ТОЛЬКО десктоп,
   чтобы не сломать мобильный collapse блока (его @media ≤980 остаётся за нами). */
@media (min-width: 981px) {
  .casino-hero { --ch-media: 232px; grid-template-columns: var(--ch-media) minmax(0, 1.7fr) minmax(206px, 0.52fr); }
}
/* Перенос по слогам (lang=ru) + не рвать слова посередине + балансировать строки */
h1, h2, h3,
.ch-title, .hero-editorial-cover :is(h1,.cover__hed),
[class*="hero"] :is(h1,h2) {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
  word-break: normal;
  text-wrap: balance;
}

/* 2 · HOVER кнопок: ghost/outline на тёмном фоне заливаем brand + белый текст,
   чтобы надпись была однозначно читаема при наведении. */
.btn--ghost:hover,
.btn--outline:hover {
  background: var(--brand);
  color: var(--on-brand);
  border-color: var(--brand);
}
/* Ссылки в тексте: на hover подчёркивание + цвет акцента (видно, что кликабельно) */
.prose a:hover, .footer-block__link:hover, .header-nav__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 3 · МОБАЙЛ: hero ещё компактнее, аккуратные отступы */
@media (max-width: 640px) {
  html[data-skin="midnight-crypto"] {
    --t-display: clamp(1.5rem, 6.4vw, 2rem);   /* ~24-32px */
    --t-h1:      clamp(1.5rem, 6vw, 1.95rem);
  }
}

/* 4 · Переключатель языка RU/EN — сегментированный контрол в шапке (десктоп + мобайл) */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}
.lang-switch__opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; height: 26px; padding: 0 9px; border-radius: 999px;
  font-weight: 600; font-size: .8rem; line-height: 1; letter-spacing: .02em;
  color: var(--text-mute); text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.lang-switch__opt:hover { color: var(--text); text-decoration: none; }
.lang-switch__opt.is-active,
.lang-switch__opt.is-active:hover { background: var(--brand); color: var(--on-brand); }
@media (max-width: 640px) {
  .lang-switch { padding: 2px; }
  .lang-switch__opt { min-width: 30px; height: 24px; padding: 0 8px; font-size: .78rem; }
}