/* ==========================================================================
   MEDIA BOX — СТРАНИЦА «ПОЛИТИКА КОНФИДЕНЦИАЛЬНОСТИ» (p-privacy.css)
   --------------------------------------------------------------------------
   Подключается на privacy.html ПОСЛЕ pages.css и ПЕРЕД future.css.
   Шапка страницы (.page-hero, .crumbs) и плашка «Черновик» (.note) —
   из pages.css. Здесь — оформление длинного текста:
     1. Заголовок и дата редакции
     2. Раскладка: оглавление + текст (на ПК оглавление «прилипает»)
     3. Текст разделов
   Правила: анимаций нет; hover — только для мыши; цвета — переменные base.css.
   ========================================================================== */


/* --- 1. Заголовок и дата --- */

/* «Конфиденциальности» — длинное слово: на узком экране шрифт меньше,
   а в крайнем случае слово переносится, а не вылезает за край */
.legal-title {
  max-width: none;
  font-size: clamp(1.75rem, 1.2rem + 3vw, 3.5rem);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

.legal-meta {
  margin-top: 12px;
  font-size: .875rem;
  color: var(--text-muted);
}

.legal-draft {
  max-width: 760px;
}


/* --- 2. Раскладка --- */
.legal__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
}

@media (min-width: 1024px) {
  .legal__layout {
    grid-template-columns: 260px minmax(0, 1fr);
    align-items: start;
  }

  .legal__toc {
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }
}

.legal__toc {
  padding: 20px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.legal__toc-title {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.legal__toc-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
}

.legal__toc-link {
  display: block;
  padding: 6px 0;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--text-muted);
  transition: color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .legal__toc-link:hover {
    color: var(--text);
  }
}

/* Телефон и планшет: оглавление в две колонки, чтобы не растягивать страницу */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .legal__toc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}


/* --- 3. Текст разделов --- */
.legal__body {
  max-width: 760px;
  min-width: 0;
}

.legal__section + .legal__section {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--border);
}

.legal__section h2 {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
}

.legal__section p,
.legal__section li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.legal__section ul {
  padding-left: 1.25em;
}

.legal__section li + li {
  margin-top: 6px;
}

.legal__section li::marker {
  color: var(--accent);
}

.legal__section code {
  padding: 1px 6px;
  border-radius: 6px;
  font-size: .875em;
  color: var(--text);
  background: rgba(255, 255, 255, .06);
  white-space: nowrap;
}

.legal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

@media (max-width: 639.98px) {
  .legal__actions .btn {
    flex: 1 1 100%;
  }
}