/* /responsible-gambling — регуляторный документ на тёмном фоне.
 *
 * Числа из макета:
 *   десктоп   — baqqybet-responsible-gambling-desktop (2:3410), 1440;
 *   мобильный — baqqybet-responsible-gambling-mobile (89:2), 390.
 *
 * Оба фрейма набраны Inter (--font-ui), поэтому семейство в ветке 767 не
 * переключается — меняются только кегли, межстрочные и шаги.
 */

/* ── интро ────────────────────────────────────────────────────────────── */
/* Макет: FRAME page-intro 46:249 — pad 56/48/48/48, gap 14, заливки НЕТ
   (фон даёт тёмный фрейм страницы, поэтому background здесь не задаётся). */
.rgp-hero { padding-block: 56px var(--space-48); }   /* 56 — число из макета */
.rgp-hero__inner { display: flex; flex-direction: column; gap: 14px; }   /* gap 14 из макета */

.rgp-hero__eyebrow {
  width: fit-content;
  font-size: var(--fs-2xs); font-weight: 600; line-height: 13.31px; letter-spacing: .14em;
  color: var(--color-accent);
}
.rgp-hero__title {
  font-size: var(--fs-d3); font-weight: 900; line-height: 54px;
  color: var(--color-text-strong);
}
/* Абзацы интро в макете набраны в колонку 800, а не на всю ширину 1344. */
.rgp-hero__lead {
  max-width: 800px;
  font-size: var(--fs-md); line-height: 24px;
  color: var(--color-text);
}

/* ── тело статьи ──────────────────────────────────────────────────────── */
/* Макет: FRAME article-master-grid 46:254 — pad 16/48/64/48; внутри
   FRAME article 46:267 — колонка без зазора: шаг дают паддинги секций. */
.rgp-body { padding-block: var(--space-16) var(--space-64); }
.rgp-article { display: flex; flex-direction: column; }

/* Разделители: ROUNDED_RECTANGLE 1344×1, fill #1f2a3a. */
.rgp-rule { height: 1px; margin: 0; border: 0; background: var(--color-border); }

/* ── секция ───────────────────────────────────────────────────────────── */
/* Макет: FRAME section-0N — AL column, gap 16, pad 48/0/48/0. */
.rgp-section {
  display: flex; flex-direction: column; gap: var(--space-16);
  padding-block: var(--space-48);
  scroll-margin-top: 96px;   /* шапка sticky 88 + запас */
}
.rgp-section__num {
  font-size: var(--fs-body); font-weight: 600; line-height: 17px; letter-spacing: .07em;
  color: var(--color-accent);
}
.rgp-section__title {
  font-size: var(--fs-h3); font-weight: 700; line-height: 34px;
  color: var(--color-text-strong);
}
.rgp-sub {
  font-size: var(--fs-h6); font-weight: 600; line-height: 26px;
  color: var(--color-text-strong);
}
.rgp-p {
  font-size: var(--fs-md); line-height: 24px;
  color: var(--color-text);
}
/* Строки «BetStop — 1800 238 786»: в макете они белые и полужирные. */
.rgp-contact {
  font-size: var(--fs-md); font-weight: 600; line-height: 24px;
  color: var(--color-text-strong);
}
/* Телефон Gambling Help Online: Inter Bold 20/24.2 → 24. */
.rgp-phone {
  font-size: var(--fs-h5); font-weight: 700; line-height: 24px;
  color: var(--color-text-strong);
}

/* Телефоны и внешние ссылки внутри абзацев остаются текстом макета, но кликают. */
.rgp-p a, .rgp-contact a, .rgp-phone a {
  color: inherit;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.rgp-p a:hover, .rgp-contact a:hover, .rgp-phone a:hover {
  color: var(--color-accent); text-decoration-color: currentColor;
}
.rgp-p a:focus-visible, .rgp-contact a:focus-visible, .rgp-phone a:focus-visible {
  outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);
}

/* ── списки ───────────────────────────────────────────────────────────── */
/* Макет: FRAME bullet-list 46:272 — gap 6, pad 0/8/0/8; numbered-list — gap 8.
   Маркер в макете входит в текстовый узел; здесь он вынесен в span, чтобы
   вторая строка не подтекала под маркер. */
.rgp-list {
  display: flex; flex-direction: column; gap: var(--space-6);
  margin: 0; padding-inline: var(--space-8);
  list-style: none;
}
.rgp-list--numbered { gap: var(--space-8); }
/* В макете маркер и текст лежат в одном узле, поэтому типографика строки
   списка повторяет типографику текста — иначе сверка видит наследование. */
.rgp-list__item {
  display: flex; align-items: flex-start; gap: var(--space-6);
  font-size: var(--fs-md); line-height: 24px; color: var(--color-text);
}
.rgp-list__dot {
  flex: none;
  font-size: var(--fs-md); line-height: 24px;
  color: var(--color-text);
}
.rgp-list--numbered .rgp-list__dot { width: 18px; }
.rgp-list__text { flex: 1; font-size: var(--fs-md); line-height: 24px; color: var(--color-text); }

/* ── ссылки-стрелки ───────────────────────────────────────────────────── */
/* Макет: Inter Semi Bold 13/16, letter-spacing 0.04em, fill #d9ff00. */
.rgp-links {
  display: flex; flex-wrap: wrap; gap: var(--space-24); margin: 0;
  font-size: var(--fs-sm); font-weight: 600; line-height: 16px; letter-spacing: .04em;
  color: var(--color-accent);
}
/* Одиночная ссылка стоит в потоке секции без обёртки. */
.rgp-link--solo { align-self: flex-start; }
.rgp-link {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--space-6);
  font-size: var(--fs-sm); font-weight: 600; line-height: 16px; letter-spacing: .04em;
  color: var(--color-accent);
  text-decoration: none;
  transition: gap var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.rgp-link:hover { gap: var(--space-10); color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.rgp-link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
/* Тап-зона 24px — псевдоэлементом, чтобы не сдвинуть раскладку. */
.rgp-link::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 100%; min-height: 24px;
}

/* ── строка «DEBIT CARDS ONLY» ────────────────────────────────────────── */
/* Макет: FRAME debit-badge 46:343 — row gap 12, pad 4/0/4/0; это текст,
   а не пилюля: заливки у узла нет. */
.rgp-badge-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12); margin: 0; padding-block: var(--space-4); }
.rgp-badge {
  font-size: var(--fs-2xs); font-weight: 600; line-height: 13px; letter-spacing: .14em;
  color: var(--color-accent);
}
.rgp-badge-note { font-size: var(--fs-sm); line-height: 16px; color: var(--color-text); }

/* ── планшет ──────────────────────────────────────────────────────────── */
/* Промежуточная ширина; в макете её нет — числа сведены между 1440 и 390. */
@media (max-width: 1359px) {
  .rgp-hero { padding-block: var(--space-48) var(--space-40); }
  .rgp-hero__title { font-size: var(--fs-h1); line-height: 48px; }
  .rgp-body { padding-block: var(--space-16) var(--space-48); }
  .rgp-section { padding-block: var(--space-40); }
}

/* ── мобильный фрейм макета (390) ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Интро: FRAME page-intro-mobile 89:27 — pad 40/16/40/16, gap 12. */
  .rgp-hero { padding-block: var(--space-40); }
  .rgp-hero__inner { gap: var(--space-12); }
  .rgp-hero__title { font-size: 34px; line-height: 38px; }   /* 34/38 из макета */
  .rgp-hero__lead { max-width: none; font-size: var(--fs-body); line-height: 17px; }

  /* Статья: FRAME article-content-mobile 89:32 — pad 0/16/0/16. */
  .rgp-body { padding-block: 0; }

  /* Секции: pad 32/0/32/0, gap 10. */
  .rgp-section { gap: var(--space-10); padding-block: var(--space-32); scroll-margin-top: 72px; }
  /* В мобильном фрейме у номера и бейджа трекинг другой, чем на десктопе. */
  .rgp-section__num { letter-spacing: normal; }
  .rgp-section__title { font-size: 22px; line-height: 27px; }   /* 22/27 из макета */
  .rgp-sub { font-size: var(--fs-lg); line-height: 19px; }
  .rgp-p { font-size: var(--fs-body); line-height: 17px; }
  .rgp-contact { font-size: var(--fs-body); line-height: 17px; }
  .rgp-phone { font-size: var(--fs-h6); line-height: 22px; }

  /* Списки: в мобильном фрейме без бокового отступа, шаг 10. */
  .rgp-list, .rgp-list--numbered { gap: var(--space-10); padding-inline: 0; }
  .rgp-list__item, .rgp-list__dot, .rgp-list__text { font-size: var(--fs-body); line-height: 17px; }
  .rgp-list--numbered .rgp-list__dot { width: 16px; }

  .rgp-links { flex-direction: column; gap: var(--space-12); }
  .rgp-link { letter-spacing: normal; }

  /* «DEBIT CARDS ONLY» и подпись в мобильном фрейме стоят в колонку. */
  .rgp-badge-row { flex-direction: column; align-items: flex-start; gap: var(--space-10); padding-block: 0; }
  .rgp-badge { line-height: 13.31px; letter-spacing: 1px; }   /* трекинг макета в px */
}