/* ============================================================
   ARTVAN GROUP — сторінки документів (Правила / Конфіденційність)
   Підключається лише на terms*.html і privacy*.html
   ============================================================ */

.legal {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  padding: 84px 60px 120px;
  max-width: 1240px;
  margin: 0 auto;
}

/* ---------- бічний зміст ---------- */
.legal-toc {
  position: sticky;
  top: 108px;
  border-left: 1px solid var(--red);
  padding-left: 22px;
}
.legal-toc h5 {
  font-size: .63rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--grey-lt);
  margin-bottom: 18px;
}
.legal-toc ul { list-style: none; }
.legal-toc li + li { margin-top: 11px; }
.legal-toc a {
  font-size: .82rem;
  line-height: 1.45;
  color: var(--grey);
  text-decoration: none;
  transition: color .2s;
}
.legal-toc a:hover { color: var(--white); }
.legal-rev {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--brd);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--grey);
}

/* ---------- текст ---------- */
.legal-sec { scroll-margin-top: 100px; }
.legal-sec + .legal-sec {
  margin-top: 52px;
  padding-top: 52px;
  border-top: 1px solid var(--brd);
}
.legal-sec h2 {
  font-family: var(--font-h);
  font-weight: 600;
  font-size: 1.78rem;
  line-height: 1.2;
  color: var(--white);
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.legal-n {
  font-family: var(--font-n);
  font-size: 1.05rem;
  letter-spacing: .04em;
  color: var(--red);
  flex-shrink: 0;
}
.legal-body p,
.legal-body li {
  font-size: .95rem;
  line-height: 1.78;
  color: var(--grey-lt);
}
.legal-body p + p,
.legal-body ul + p,
.legal-body p + ul { margin-top: 14px; }
.legal-body strong { color: var(--white); font-weight: 600; }
.legal-body a { color: var(--red); text-decoration: none; border-bottom: 1px solid rgba(224,67,59,.35); }
.legal-body a:hover { border-bottom-color: var(--red); }
.legal-body ul { list-style: none; margin-top: 14px; }
.legal-body li { position: relative; padding-left: 30px; }
.legal-body li + li { margin-top: 9px; }
.legal-body li::before {
  content: '';
  position: absolute;
  left: 0; top: .85em;
  width: 18px; height: 1px;
  background: var(--red);
}

.legal-card {
  margin-top: 8px;
  background: var(--bg-card);
  border: 1px solid var(--brd);
  border-left: 2px solid var(--red);
  padding: 26px 30px;
}
.legal-card p + p { margin-top: 6px; }

/* ---------- адаптив ---------- */
@media (max-width: 1100px) {
  .legal { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; padding: 72px 40px 96px; }
}
@media (max-width: 900px) {
  .legal { grid-template-columns: 1fr; gap: 40px; padding: 64px 40px 88px; }
  .legal-toc { position: static; }
  .legal-toc ul { columns: 2; column-gap: 28px; }
  .legal-toc li + li { margin-top: 9px; }
}
@media (max-width: 560px) {
  .legal { padding: 52px 24px 72px; }
  .legal-toc ul { columns: 1; }
  .legal-sec h2 { font-size: 1.5rem; gap: 12px; }
  .legal-sec + .legal-sec { margin-top: 40px; padding-top: 40px; }
  .legal-card { padding: 22px 22px; }
}

/* ══════════════════════════════════════════════════════════
   L-01 · Бічний зміст: активний пункт під час прокрутки
   Раніше всі пункти виглядали однаково — читач не бачив,
   у якому розділі він зараз.
   ══════════════════════════════════════════════════════════ */
.legal-toc { position: sticky; top: 108px; }
.legal-toc ul { position: relative; }

.legal-toc a {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -14px;
  transition: color .25s ease, transform .3s cubic-bezier(.22,.61,.36,1);
}
.legal-toc a:hover { color: var(--white); }

.legal-toc a.on {
  color: var(--white);
  font-weight: 500;
  transform: translateX(4px);
}

/* рухомий індикатор замість статичної рамки */
.legal-toc__bar {
  position: absolute;
  left: -23px;
  top: 0;
  width: 2px;
  height: 0;
  background: var(--red);
  opacity: 0;
  transition: transform .38s cubic-bezier(.22,.61,.36,1),
              height .38s cubic-bezier(.22,.61,.36,1),
              opacity .25s ease;
  pointer-events: none;
}

@media (max-width: 900px) {
  .legal-toc { position: static; }
  .legal-toc__bar { display: none; }
  .legal-toc a.on { transform: none; color: var(--red); }
}
@media (prefers-reduced-motion: reduce) {
  .legal-toc a, .legal-toc__bar { transition: none; }
}

/* L-01b · суцільна червона межа перебивала індикатор —
   лишаємо її тьмяною, акцент несе рухома риска */
.legal-toc { border-left-color: var(--brd); }
.legal-toc__bar { left: -23px; width: 2px; }
@media (max-width: 900px) { .legal-toc { border-left-color: var(--red); } }

/* L-01c · sticky не працював: у style.css на body стоїть overflow,
   що створює власний контекст прокрутки. На сторінках документів
   знімаємо його — там горизонтального переповнення й так немає. */
body:has(.legal) { overflow-x: visible; overflow-y: visible; }