/* ==========================================================================
   Правовые страницы — один блок на обе, разметка приходит из
   tools/build-legal.mjs, текст из data/legal.js.

   Privacy Policy · Figma 39:4038 (320–575), 39:3903 (576–767), 39:3930
     (768–1023), 39:3957 (1024–1279), 39:3984 (1280–1920), 39:4011 (1920–max)
   Cookie Policy  · Figma 39:4331, 39:4226, 39:4247, 39:4268, 39:4289, 39:4310
     (те же шесть брейкпоинтов)

   Кадры отличаются только текстом: колонка, поля, зазоры и шкала шрифта у них
   общие до пикселя — поэтому и блок один, и третья страница обойдётся записью
   в данные, а не вторым набором стилей.

   Содержимое — один столбец: крошки, H1 и нумерованные разделы. Шапка и футер
   общие с остальным сайтом, своих правил тут не требуют.

   Высоты из макета получаются сами — считать нечего, кроме верхнего поля.
   Privacy Policy:
     80 + (крошки + 16 + H1) + gap + разделы + 24
     576  · 80 + (21 + 16 + 32) + 48 + 1082 + 24 = 1303  (+ футер 68 = 1371)
     768  · 80 + (21 + 16 + 32) + 48 + 1058 + 24 = 1279  (+ футер 68 = 1347)
     1024 · 80 + (24 + 16 + 48) + 40 + 1422 + 24 = 1654  (+ футер 70 = 1724)
     1280 · 80 + (24 + 16 + 48) + 40 + 1562 + 24 = 1794  (+ футер 70 = 1864)
     2560 · 80 + (24 + 16 + 48) + 40 + 1206 + 24 = 1438  (+ футер 70 = 1508)
   ========================================================================== */

/* Боковое поле 4, а не 24, как у .container: в макете контент лежит во
   внешнем фрейме с полем spacing/sm, а собственные 20 добирает уже колонка
   (см. .legal__head). В сумме те же 24 до края экрана, что и везде, — но
   колонка на 1024+ считается долей именно этого фрейма, а не контейнера с
   полями 24, иначе её ширина разойдётся с макетом на 20px.

   Шапка сайта прибита к верху и из потока выключена, поэтому верхние 80
   отсчитываются от нуля страницы и перекрывают её 48 — тот же приём, что у
   hero и у шапки каталога. */
.legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--spacing-sm);
}

.legal__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-4xl);
  width: 100%;
  max-width: var(--container-max);
  padding-block: var(--spacing-6xl) var(--spacing-xl);
}

/* Колонка текста. До 1024 — во всю ширину фрейма, с 1024 — доля сетки
   каталога: половина при двух колонках и треть при трёх. Ширины из макета:
   417 / 568 / 760 / 506 / 421.33 / 622, текст внутри на 40 у́же.

   Числа сходятся с --catalog-columns один в один на 1024 и выше ((1016 − 4)/2
   = 506, (1272 − 8)/3 = 421.33), но взять саму переменную нельзя: на 768
   каталог уже двухколоночный, а здесь текст всё ещё во всю ширину. Отсюда два
   медиазапроса вместо одного calc по переменной.

   Предел 1200 из макета сюда не переносится: он не срабатывает ни на одной
   ширине — до 1024 фрейм не перерастает 1015, а дальше доля сетки и подавно
   меньше (на 1919 это 634, на 1920+ — 621.33). */
.legal__head,
.legal__body {
  width: 100%;
  /* 20 — буквально из макета, тот же отступ, что у текстовых блоков кейса
     и у подписи карточки каталога */
  padding-inline: 20px;
}

.legal__head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Display xl — как H1 каталога и кейса */
.legal__title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-uppercase);
}

.legal__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3xl);
}

.legal__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Display md — единственное место на сайте, где взят font-size/xl */
.legal__heading {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-display);
  letter-spacing: var(--letter-spacing-uppercase);
}

/* Text xl приглушённым цветом. Высота строки множителем, а не в px: 16 × 1.5
   = 24 и 18 × 1.5 = 27 — обе целые, округлять нечего. */
.legal__text {
  color: var(--color-text-subtle);
  font-size: var(--font-size-md);
  line-height: var(--line-height-text-relaxed);
  letter-spacing: var(--letter-spacing-text);
}

/* Зазор между абзацами — Figma `paragraph-spacing/lg` = 10, и он же стоит
   перед списком. Между пунктами списка зазора нет вовсе (в макете они идут
   строка к строке), поэтому правило смотрит только на прямых детей блока.

   Исключение в макете одно и разобрано как ошибка: во втором разделе Cookie
   Policy на 1920+ (39:4323) между двумя пунктами стоят те же 10, а в пяти
   остальных кадрах той же страницы — нет (в 39:4304 шаг строк 27 везде, кроме
   одного перехода абзац → список). Идём за пятью. */
.legal__text > * + * {
  margin-block-start: 10px;
}

/* Список. Отступ 24 — Figma list indent: текст пункта начинается на 24 от
   края колонки. */
.legal__text ul {
  padding-inline-start: 24px;
}

/* Кружок нарисован сам, а не отдан list-style: disc. Причина — замер: с
   родным маркером Chrome ставит его на x = 7…11 от края колонки, тогда как в
   макете он стоит на 10…14 (снято попиксельно с 39:3913 при 576 и 39:3970 при
   1024). Текст пункта при этом совпадает до пикселя в обоих случаях, то есть
   разъезжается ровно маркер — и чинится он только своим.

   Числа из макета, оба замера:
     16px шрифта · кружок 5px, левый край 10, верх строки +11
     18px шрифта · кружок 6px, левый край 11, верх строки +12
   Отсюда em-доли: 0.3125em диаметр, 0.625em левый край, 0.6875em сверху —
   они дают 5 / 10 / 11 при 16 и 5.6 / 11.25 / 12.4 при 18, то есть попадают
   в макет на обеих шкалах. Левый край считается от края списка, а не от
   текста пункта, поэтому из него вычитается фиксированный отступ 24. */
.legal__text li {
  position: relative;
}

.legal__text li::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(0.625em - 24px);
  inset-block-start: 0.6875em;
  inline-size: 0.3125em;
  block-size: 0.3125em;
  border-radius: 50%;
  background-color: currentColor;
}

/* 1024+ · шкала шрифта переключается сама (tokens.css), своя правка нужна
   ровно одна — зазор между шапкой страницы и разделами: в макете 1024, 1280
   и 2560 это spacing/3xl, а не spacing/4xl, как на узких. */
@media (min-width: 1024px) {
  .legal__inner {
    gap: var(--spacing-3xl);
  }

  .legal__head,
  .legal__body {
    width: calc((100% - var(--spacing-sm)) / 2);
  }
}

@media (min-width: 1280px) {
  .legal__head,
  .legal__body {
    width: calc((100% - 2 * var(--spacing-sm)) / 3);
  }
}