/* Сервисные документы: общая шапка, оглавление и текстовая колонка. */
.legal-header__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.legal-header__meta {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-body);
}

.legal-layout {
  display: grid;
  gap: var(--space-8);
}

/* Грид-ячейка по умолчанию не сжимается уже своего содержимого. Широкая
   таблица из редактора требовала бы место под всю ширину и раздвигала бы
   колонку с текстом за пределы паддинга контейнера - весь layout уезжал
   вправо без отступа. min-width: 0 отдаёт скролл таблице, а не колонке. */
.legal-layout > * {
  min-width: 0;
}

.legal-toc {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: start;
  padding: var(--space-7);
  border-radius: var(--radius-xl);
  background: var(--bg-surface);
  box-shadow: var(--elevation-card);
}

.legal-toc__title {
  margin-bottom: 2px;
  font-size: var(--fs-2xs);
  line-height: 1.5;
  color: var(--text-muted);
}

.legal-toc__link {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-link);
}

.legal-copy {
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-strong);
}

/* Документ размечен как последовательность <section> - по одной на пункт.
   Этот отступ разделяет сами пункты. Первый пункт стоит без отступа сверху:
   его дают только последующие, за счёт +. */
.legal-copy > * + * { margin-top: var(--space-8); }

/* Внутри пункта отступ короче - заголовок, абзацы, список и таблица одного
   пункта визуально держатся вместе, но не слипаются. */
.legal-copy section > * + * { margin-top: var(--space-4); }

.legal-copy h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

/* Таблицу cookie вставляет плагин согласия своей обёрткой: категория -
   заголовок, описание и таблица. Внутри категории отступ как внутри пункта,
   между категориями крупнее; без этого блоки слипались. */
.legal-copy .ccgdpr-cookie-table > * + * { margin-top: var(--space-4); }

.legal-copy .ccgdpr-cookie-table > h3 + * { margin-top: var(--space-2); }

.legal-copy .ccgdpr-cookie-table > * + h3 { margin-top: var(--space-8); }

.legal-copy .ccgdpr-cookie-table h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-heading);
}

.legal-copy ul,
.legal-copy ol {
  padding-inline-start: var(--space-6);
  list-style-position: outside;
}

.legal-copy ul { list-style-type: disc; }
.legal-copy ol { list-style-type: decimal; }

.legal-copy li + li { margin-top: var(--space-2); }

.legal-copy li::marker { color: var(--sand-500); }

/* Обёртку добавляет sparrway_article_toc(): таблица из редактора не сжимается
   в узкую мобильную колонку, а скроллится в своей рамке на всю её ширину. */
.legal-copy .table-scroll {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: var(--border-hairline) solid var(--border-default);
}

.legal-copy table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.legal-copy th,
.legal-copy td {
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--border-default);
  text-align: start;
  vertical-align: top;
}

.legal-copy th {
  background: var(--sand-100);
  font-weight: 600;
  color: var(--text-strong);
}

@media (min-width: 768px) {
  .legal-layout {
    grid-template-columns: 170px minmax(0, 1fr);
    gap: var(--space-14);
  }
}

@media (min-width: 1024px) {
  /* Колонка текста тянется на всю оставшуюся ширину контейнера (1320),
     а не застывает на 760: узкая фиксированная колонка внутри широкого
     контейнера оставляла бы пустую полосу справа от документа. */
  .legal-layout {
    grid-template-columns: 300px minmax(0, 1fr);
    column-gap: 100px;
  }

  /* Как оглавление статьи: остаётся в поле зрения при прокрутке документа. */
  .legal-toc {
    position: sticky;
    top: var(--space-6);
  }
}