/* Правовые страницы: /terms-and-conditions, /privacy-policy, /cookie-policy.
 *
 * Числа из макета:
 *   десктоп — baqqybet-terms-and-conditions-desktop, baqqybet-privacy-policy-desktop,
 *             baqqybet-cookie-policy-desktop (все три 1440);
 *   мобильный — article-content (термы), baqqybet-privacy-policy-mobile,
 *               baqqybet-cookie-policy-mobile (все три 390).
 *
 * У трёх страниц одна типографика длинной статьи, поэтому файл общий:
 * различается только шаг между блоками секции и мелочи интро — они внизу,
 * отдельными секциями «своё у страницы».
 *
 * Важное отличие двух фреймов: на десктопе статья набрана Archivo (--font-text),
 * на мобильном — Inter (--font-ui). Семейство переключается в ветке 767.
 */

/* ── интро: тёмная шапка страницы ─────────────────────────────────────── */
/* Макет: FRAME intro 1440×209…241, pad 64/48/48/48, gap 16, fill #0b0f14. */
.legal-hero { padding-block: var(--space-64) var(--space-48); background: var(--color-bg); }
.legal-hero__inner { display: flex; flex-direction: column; gap: var(--space-16); }

/* «LEGAL» нарисован только в мобильных фреймах privacy/cookie. */
.legal-hero__eyebrow { display: none; }

.legal-hero__title {
  font-family: var(--font-text);
  font-size: 56px; font-weight: 900; line-height: 61px; letter-spacing: -1.5px;
  color: var(--color-text-strong);
}
.legal-hero__lead {
  font-family: var(--font-text);
  font-size: var(--fs-lg); line-height: 24px;
  color: var(--color-text);
}
/* Подзаголовок есть только у Terms: Archivo Bold 18/20. */
.legal-hero__subtitle {
  font-family: var(--font-text);
  font-size: var(--fs-h6); font-weight: 700; line-height: 20px;
  color: var(--color-text);
}

/* ── светлая полоса со статьёй ────────────────────────────────────────── */
/* Макет: article-area/article-container 1440, pad 64/48/96/48, fill #f5f3ef. */
.legal-body {
  padding-block: var(--space-64) 96px;   /* 96 снизу — число из макета */
  background: var(--color-bg-light);
  color: var(--color-text-dark);
}

/* Колонка статьи 960 стоит по левому краю контейнера (x = 48), не по центру. */
.legal-article {
  display: flex; flex-direction: column; gap: var(--space-48);
  max-width: 960px;
  background: var(--color-bg-light);   /* заливка колонки задана в макете отдельно */
  font-family: var(--font-text);
}

/* Разделители: между секциями (--rule) и внутренний у Terms (--section__rule). */
.legal-rule,
.legal-section__rule {
  height: 1px; margin: 0; border: 0;
  background: var(--color-border-light);   /* #e5e7eb */
}
/* Внутренний разделитель в макете приглушён: opacity 0.6. */
.legal-section__rule { opacity: .6; }

/* Дробный межстрочный в макете — это «auto» шрифта; в вёрстке он округлён до
 * целого пикселя коробки узла (26.11→26, 17.41→17, 16.32→16, 15.23→15, 14.14→14):
 * иначе доли копятся и статья на 12–25 разделов уезжает вниз на пару пикселей.
 */

/* ── секция ───────────────────────────────────────────────────────────── */
.legal-section {
  display: flex; flex-direction: column; gap: var(--space-20);
  scroll-margin-top: 96px;   /* шапка sticky 88 + запас: якоря s-01… */
}
.legal-section__head { display: flex; align-items: baseline; gap: var(--space-16); }

/* Номер раздела нарисован только у Terms. */
.legal-section__num {
  flex: none;
  font-family: var(--font-text);
  font-size: var(--fs-sm); font-weight: 900; line-height: 14px;
  color: var(--color-green);
}
.legal-section__title {
  flex: 1;                            /* в макете заголовок растянут на 960 */
  font-family: var(--font-text);
  font-size: var(--fs-h4); font-weight: 900; line-height: 26px; letter-spacing: -.5px;
  color: var(--color-text-dark);
}

.legal-section__body { display: flex; flex-direction: column; gap: var(--space-16); }

/* ── абзац ────────────────────────────────────────────────────────────── */
.legal-p {
  font-size: var(--fs-lg); line-height: 24px;
  color: var(--color-text-dark-muted);   /* #475569 */
}
/* Подпункты «3.1…» лежат во фреймах с паддингом 24. Текст внутри в макете
 * шире паддинга справа (960 → 936, а не 912), поэтому отступ только слева. */
.legal-p--indent { padding-left: var(--space-24); }
/* В макете абзацы 4.5 и 5.3 покрашены в зелёный — это заливка узла, не наследование. */
.legal-p--green { color: var(--color-green); }
/* Пункт 20.4 в макете набран Archivo Bold, остальные — Regular. */
.legal-p--bold { font-weight: 700; }

/* ── маркированный список (Privacy) ───────────────────────────────────── */
/* Макет: FRAME bullets gap12, bullet-row row gap10, маркер «•» отдельным узлом. */
.legal-list { display: flex; flex-direction: column; gap: var(--space-12); }
.legal-list__item { display: flex; align-items: flex-start; gap: var(--space-10); }
.legal-list__dot {
  flex: none; width: 8px;
  font-size: var(--fs-lg); font-weight: 700; line-height: 17px;
  color: var(--color-text-faint);   /* #8c99b2 */
}
.legal-list__text {
  flex: 1;
  font-size: var(--fs-lg); line-height: 24px;
  color: var(--color-text-dark-muted);
}

/* ── подраздел с заголовком h3 (Cookie 03) ────────────────────────────── */
/* Макет: FRAME sub-3-N gap8, pad 0/16/0/16. */
.legal-sub {
  display: flex; flex-direction: column; gap: var(--space-8);
  padding-left: var(--space-16);   /* текст внутри в макете 944, т. е. без правого отступа */
}
.legal-sub__title {
  font-family: var(--font-text);
  font-size: var(--fs-lg); font-weight: 800; line-height: 17px;
  color: var(--color-text-dark);
}
.legal-examples {
  font-size: var(--fs-body); font-weight: 700; line-height: 15px;
  color: var(--color-text-dark-muted);
}

/* ── адресный блок Privacy Officer (Privacy 09) ───────────────────────── */
/* Макет: FRAME post-block gap4, pad 16, fill #0e1b2e. */
.legal-address {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-16);
  background: var(--color-panel);
  border-radius: var(--radius-14);
  box-shadow: inset 0 0 0 1px var(--color-border);   /* strokeAlign INSIDE, #1f2a3a */
  font-style: normal;
}
.legal-address__line {
  font-size: var(--fs-body); line-height: 15px;
  color: var(--color-text);
}
.legal-address__line--strong { font-weight: 700; color: var(--color-text-strong); }

/* ── ссылки на смежные документы (Privacy 12) ─────────────────────────── */
/* Макет: FRAME related-links row gap24, четыре узла по 222 → 4×222 + 3×24 = 960. */
.legal-links { display: flex; flex-wrap: wrap; gap: var(--space-24); }
.legal-links__link {
  position: relative; flex: 1 1 0;    /* (960 − 3×24) / 4 = 222, как в макете */
  font-family: var(--font-text);
  font-size: var(--fs-md); font-weight: 700; line-height: 16px;
  color: var(--color-green);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.legal-links__link:hover { color: var(--color-green-deep); text-decoration: underline; text-underline-offset: 3px; }
/* Тап-зона 24px добирается псевдоэлементом — паддинг сдвинул бы раскладку. */
.legal-links__link::after {
  content: ""; position: absolute; inset: 50% 0 auto 0; translate: 0 -50%;
  height: 100%; min-height: 24px;
}

/* ── своё у страницы ──────────────────────────────────────────────────── */
/* Terms: шаг внутри секции 24 (у остальных 20), в шапке секции ещё номер. */
.legal-article--terms .legal-section { gap: var(--space-24); }
.legal-article--terms .legal-section__head { gap: var(--space-12); }
/* У Terms заголовок стоит в строке с номером и хагает по тексту, а не растянут.
 * flex: 0 1 auto, а не none: на узких ширинах длинный заголовок должен ужиматься
 * и переноситься, иначе он вылезает за вьюпорт (ловилось на 768). */
.legal-article--terms .legal-section__title { flex: 0 1 auto; min-width: 0; }
/* Privacy: межстрочный лида 26, у Cookie 24. */
.legal-hero--privacy .legal-hero__lead { line-height: 26px; }
/* Cookie: разделители между секциями приглушены (opacity 0.6), у двух других — нет. */
.legal-article--cookie .legal-rule { opacity: .6; }

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

/* ── мобильный фрейм макета (390) ─────────────────────────────────────── */
@media (max-width: 767px) {
  /* Интро: FRAME page-intro pad 40/16/32/16, gap 12. */
  .legal-hero { padding-block: var(--space-40) var(--space-32); }
  .legal-hero__inner { gap: var(--space-12); }

  .legal-hero__eyebrow {
    display: block; width: fit-content;   /* в макете узел HUG, 42px */
    font-family: var(--font-ui);
    font-size: var(--fs-2xs); font-weight: 800; line-height: 13.31px; letter-spacing: 1.5px;
    color: var(--color-accent);
  }
  .legal-hero__title {
    font-family: var(--font-ui);
    font-size: var(--fs-h2); line-height: 39px; letter-spacing: normal;
    width: fit-content;   /* в мобильных фреймах узел h1 HUG (218/226), а не на 358 */
  }
  .legal-hero__lead,
  .legal-hero--privacy .legal-hero__lead {
    font-family: var(--font-ui);
    font-size: var(--fs-body); line-height: 17px;
  }
  /* Мобильного фрейма у интро Terms нет: подзаголовок приведён к лиду соседних страниц. */
  .legal-hero__subtitle {
    font-family: var(--font-ui);
    font-size: var(--fs-body); font-weight: 700; line-height: 17px;
  }

  /* Статья: FRAME article-content pad 32/16/40/16, gap 32, шрифт Inter. */
  .legal-body { padding-block: var(--space-32) var(--space-40); }
  .legal-article { gap: var(--space-32); max-width: none; font-family: var(--font-ui); }

  /* Разделителей в мобильных фреймах нет. */
  .legal-rule,
  .legal-section__rule { display: none; }

  .legal-section,
  .legal-article--terms .legal-section { gap: var(--space-12); scroll-margin-top: 72px; }
  .legal-section__head,
  .legal-article--terms .legal-section__head {
    flex-direction: column; align-items: flex-start; gap: var(--space-12);
  }
  .legal-section__num {
    font-family: var(--font-ui);
    font-size: var(--fs-xs); font-weight: 800; line-height: 15px;
  }
  .legal-section__title {
    font-family: var(--font-ui);
    font-size: var(--fs-h5); line-height: 24px; letter-spacing: normal;
    align-self: stretch;   /* в мобильных фреймах заголовок раздела FILL 358 */
  }
  .legal-section__body { gap: var(--space-12); }

  .legal-p { font-size: var(--fs-body); line-height: 17px; }
  .legal-p--indent { padding-left: 0; }
  /* Зелёная заливка 4.5/5.3 и жирный 20.4 нарисованы только в десктопном фрейме. */
  .legal-p--green { color: var(--color-text-dark-muted); }
  .legal-p--bold { font-weight: 400; }

  .legal-list__item { gap: var(--space-8); }
  .legal-list__dot {
    width: 7px;
    font-size: var(--fs-body); line-height: 17px;
    color: var(--color-green);   /* на мобильном маркер зелёный, а не серо-синий */
  }
  .legal-list__text { font-size: var(--fs-body); line-height: 17px; }

  .legal-sub { gap: var(--space-12); padding-left: 0; }
  .legal-sub__title { font-family: var(--font-ui); line-height: 19px; }
  .legal-examples { font-size: var(--fs-sm); line-height: 16px; }

  /* На мобильном адрес — не панель, а три жирные строки в общем потоке. */
  .legal-address { gap: var(--space-12); padding: 0; background: none; border-radius: 0; box-shadow: none; }
  .legal-address__line,
  .legal-address__line--strong {
    font-size: var(--fs-sm); font-weight: 700; line-height: 16px;
    color: var(--color-text-dark-muted);
  }

  .legal-links { flex-direction: column; gap: var(--space-12); }
  .legal-links__link {
    flex: none; align-self: flex-start;   /* в макете ссылки HUG, не на всю колонку */
    font-family: var(--font-ui);
    font-size: var(--fs-body); line-height: 17px;
  }
}