/* Страница /showdown. Числа из макета: playvestbet-showdown-desktop (1440)
 * и baqqybet-showdown-mobile (390). Класс дельты M0 — состав тот же, меняется
 * только компоновка, поэтому мобильная ветка живёт в медиазапросах рядом
 * со своей секцией.
 *
 * Расхождение макета, перенесённое как нарисовано: десктопный фрейм набран
 * Inter, мобильный — Geist. Семейство переключается в мобильном блоке.
 *
 * Значения, которых нет в tokens.css, стоят литералом с пометкой откуда.
 */

/* ── герой: hero-top (38:37) + hero-bottom (38:42) ────────────────────── */
/* hero-top (38:37) — только копия: паддинги 64/48. Правила и снимок лежат
   отдельной полосой hero-bottom (38:42) с нулевым вертикальным паддингом. */
.sd-hero { padding-block: var(--space-64) var(--space-48); background: var(--color-bg); }
.sd-hero-bottom { background: var(--color-bg); }

.sd-hero__copy { display: flex; flex-direction: column; gap: var(--space-16); }
.sd-hero__eyebrow {
  align-self: flex-start;              /* в макете бокс по тексту (HUG), не во всю ширину */
  font-size: var(--fs-xs); font-weight: 800; line-height: 15px; letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.sd-hero__title {
  font-size: var(--fs-d1); font-weight: 900; line-height: 77px; letter-spacing: -1.5px;   /* 38:39, letterSpacing в px */
  color: var(--color-text-strong);
}
.sd-hero__lead {
  font-size: var(--fs-h6); font-weight: 800; line-height: 22px;
  color: var(--color-text-strong);
}
.sd-hero__note {
  font-size: var(--fs-lg); font-weight: 400; line-height: 19px;
  color: var(--color-text);
}

.sd-hero__row { display: flex; align-items: flex-start; gap: var(--space-48); }

/* Правила продукта (38:43). Разделители в макете — отдельные полоски 1px,
   поэтому граница висит на следующем правиле, а не на предыдущем. */
.sd-rules { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; padding-bottom: var(--space-48); }
.sd-rule { display: flex; flex-direction: column; gap: var(--space-8); padding-block: var(--space-24); }
.sd-rule + .sd-rule { border-top: 1px solid var(--color-border); }
.sd-rule__num {
  font-size: var(--fs-h1); font-weight: 900; line-height: 53.25px;
  color: var(--color-accent);
}
.sd-rule__title { font-size: var(--fs-h6); font-weight: 900; line-height: 22px; color: var(--color-text-strong); }
.sd-rule__text  { font-size: var(--fs-body); font-weight: 400; line-height: 17px; color: var(--color-text); }

.sd-rules__cta { align-self: flex-start; padding-top: var(--space-24); }   /* бокс по кнопке (HUG) */
.sd-rules__btn {
  padding: 14px var(--space-28);                 /* 38:59 */
  border-radius: var(--radius-10);
  font-size: var(--fs-md); font-weight: 800; line-height: 18.15px; letter-spacing: normal;
}

/* Снимок героя (38:2). Поверх фотографии в макете лежит заливка
   rgba(11, 18, 32, .45) — в токенах такого затемнения нет. Значение стоит и
   заливкой бокса (её читает сверка), и слоем ::after поверх снимка. */
.sd-hero__media {
  --sd-scrim: rgba(11, 18, 32, .45);             /* 38:2, второй слой заливки */
  position: relative; flex: none;
  width: 600px; height: 480px;
  border-radius: var(--radius-14); overflow: hidden;
  background: var(--sd-scrim);
}
.sd-hero__media picture, .sd-hero__media img { width: 100%; height: 100%; object-fit: cover; }
/* В мобильном фрейме снимок — сам скруглённый прямоугольник с затемнением
   (81:37), а не картинка внутри маски: радиус и подложка стоят на нём. */
.sd-hero__media img { border-radius: var(--radius-14); background: var(--sd-scrim); }
.sd-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: var(--sd-scrim);
  pointer-events: none;
}

/* ── responsible wagering: общий компонент (includes/responsible-wagering.php)
   Здесь только страничные поправки геометрии — общий файл не правим.
   · В макете карточка шага — 800×136, а разделитель отдельная полоска 1px
     между карточками (16 + 1 + 16). Компонент рисует линию рамкой с
     паддингом, отчего бокс карточки на 17px выше макета.
   · У полосы поддержки обводка в макете INSIDE (strokeAlign), поэтому
     box-shadow, а не border: border поднимает габарит с 69 до 71. */
.rw__actions { gap: 33px; }
.rw__action  { position: relative; }
.rw__action + .rw__action { padding-top: 0; box-shadow: none; }
.rw__action + .rw__action::before {
  content: ""; position: absolute; left: 0; right: 0; top: -17px;
  height: 1px; background: var(--color-border-light);
}
.rw__support { min-height: 0; border: 0; box-shadow: inset 0 0 0 1px var(--color-border-light); }

/* Фокус на светлой секции: лайм по белому не читается. */
.rw :focus-visible { outline-color: var(--color-text-dark); }

/* ── планшет ──────────────────────────────────────────────────────────
   Порог 1359, а не 1199: десктопная шапка макета требует 1296px контента. */
@media (max-width: 1359px) {
  .sd-hero__title { font-size: var(--fs-d3); line-height: 58px; }
  .sd-hero__row { gap: var(--space-24); }
  .sd-hero__media { width: 420px; height: 400px; }

  .rw__grid { grid-template-columns: 1fr; }
}

/* ── мобильный фрейм макета, дельта M0 (81:6) ─────────────────────────
   Мобильный фрейм нарисован Geist — это расхождение макета, а не ошибка
   разбора: десктопный набран Inter. Переносится как нарисовано. */
@media (max-width: 767px) {

  /* Заголовкам семейство задаётся явно: base.css ставит h1–h4 --font-display
     правилом на теге, а оно перебивает наследование от секции. */
  .sd-hero, .sd-hero-bottom, .rw { font-family: var(--font-geist); }
  .sd-hero__title, .sd-rule__title,
  .rw__title, .rw__num, .rw__action-title { font-family: var(--font-geist); }

  /* герой (81:31 + 81:36) */
  .sd-hero__copy { gap: var(--space-16); }
  .sd-hero__eyebrow { line-height: 16px; }
  .sd-hero__title { font-size: var(--fs-h2); line-height: 35px; letter-spacing: -.03em; }
  .sd-hero__lead  { font-size: var(--fs-lg); font-weight: 700; line-height: 22px; }
  .sd-hero__note  { font-size: var(--fs-sm); line-height: 20px; }

  .sd-hero { padding-block: var(--space-32); }
  .sd-hero__row { flex-direction: column; gap: var(--space-32); }
  /* В мобильном фрейме снимок стоит между копией и правилами. */
  .sd-hero__media { order: -1; width: 100%; height: 220px; }

  /* правила (81:38). Паддингов у карточек нет, а разделитель — отдельная
     линия посреди 48px между ними (24 + 24). Рамкой её рисовать нельзя:
     бокс карточки стал бы на 25px выше макета. */
  .sd-rules { gap: var(--space-24); padding-bottom: var(--space-40); }
  .sd-rule { position: relative; padding-block: 0; }
  .sd-rule + .sd-rule { margin-top: var(--space-24); border-top: 0; }
  .sd-rule + .sd-rule::before {
    content: ""; position: absolute; left: 0; right: 0; top: calc(var(--space-24) * -1);
    height: 1px; background: var(--color-border);
  }
  .sd-rule__num   { font-size: 40px; line-height: 52px; }   /* 81:40 */
  .sd-rule__title { line-height: 23.4px; }
  .sd-rule__text  { line-height: 18.2px; }

  .sd-rules__cta { align-self: stretch; padding-top: var(--space-16); }
  .sd-rules__btn { display: flex; width: 100%; padding: 14px var(--space-24); line-height: 20px; }

  /* responsible wagering (81:56): числа мобильного фрейма поверх компонента */
  .rw { padding-block: var(--space-40); }
  .rw__rule { display: none; }            /* в мобильном фрейме полоски нет */
  .rw__left { gap: var(--space-12); }
  .rw__eyebrow { line-height: 16px; }
  .rw__title { font-size: var(--fs-h3); line-height: 31px; }
  .rw__lead  { font-size: var(--fs-body); line-height: 21px; }

  .rw__action { gap: var(--space-6); }
  .rw__num { font-size: var(--fs-h2); line-height: 42px; letter-spacing: -.03em; }
  .rw__action-title { font-size: var(--fs-lg); line-height: 21px; }
  .rw__action-text  { font-size: var(--fs-sm); line-height: 18px; }
  .rw__action-link  { line-height: 17px; }

  .rw__support { padding: var(--space-16); border-radius: var(--radius-12); }
  .rw__support-title { line-height: 18.2px; }
  .rw__support-note  { line-height: 18px; }
}