/* =========================================================
   SUPPORTLEGAL — Rhythm System (Premium Air)
   Цель: единая шкала отступов + утилиты для секций/заголовков
========================================================= */

:root{
  /* Шкала отступов (универсальная, для локальных компонентов) */
  --sl-space-2xs: clamp(8px, 0.7vw, 10px);
  --sl-space-xs:  clamp(10px, 0.9vw, 12px);
  --sl-space-sm:  clamp(14px, 1.2vw, 18px);
  --sl-space-md:  clamp(18px, 1.6vw, 22px);
  --sl-space-lg:  clamp(24px, 2.0vw, 30px);
  --sl-space-xl:  clamp(32px, 2.8vw, 44px);
  --sl-space-2xl: clamp(44px, 3.8vw, 64px);
  --sl-space-3xl: clamp(56px, 4.8vw, 84px);

  /* =======================================================
     ВАЖНО: Ритм секций/заголовков — отдельными clamp, чтобы
     был заметный эффект и на десктопе, и на мобилке.
  ======================================================= */

  /* Ритм секций */
  --sl-section-y:       clamp(40px, 5.2vw, 72px);
  --sl-section-y-tight: clamp(28px, 4.0vw, 54px);
  --sl-section-y-loose: clamp(52px, 6.2vw, 96px);

  /* Ритм внутри блоков */
  --sl-stack-1: clamp(10px, 1.0vw, 14px);
  --sl-stack-2: clamp(14px, 1.4vw, 20px);
  --sl-stack-3: clamp(18px, 1.8vw, 26px);

  /* Сетки */
  --sl-grid-gap:    clamp(12px, 1.2vw, 18px);
  --sl-grid-gap-lg: clamp(16px, 1.7vw, 24px);

  /* Разделители */
  --sl-divider-light: 1px solid rgba(18,21,33,.06);
  --sl-divider-soft:  1px solid rgba(18,21,33,.045);
  --sl-divider-dark:  1px solid rgba(255,255,255,.08);

  /* Тонкий “премиум” нюанс */
  --sl-soft-shadow: 0 18px 46px rgba(12, 16, 30, .06);
}

/* Якоря не прячем под фикс. header */
html{
  scroll-padding-top: calc(var(--sl-header-h) + 16px);
}

/* Универсальная утилита секции (опционально — если решим внедрять в разметку) */
.sl-section{
  padding-block: var(--sl-section-y);
}
.sl-section--tight{ padding-block: var(--sl-section-y-tight); }
.sl-section--loose{ padding-block: var(--sl-section-y-loose); }

/* Фоновые модификаторы (опционально) */
.sl-section--alt{ background: var(--sl-bg-light-2); }
.sl-section--light{ background: var(--sl-bg-light); }
.sl-section--dark{
  background: var(--sl-hero-bg);
  color: var(--sl-white);
}

/* “Flow/stack” — единый вертикальный ритм внутри любого контейнера */
.sl-flow > * + *{
  margin-top: var(--sl-stack-2);
}
.sl-flow--tight > * + *{ margin-top: var(--sl-stack-1); }
.sl-flow--loose > * + *{ margin-top: var(--sl-stack-3); }

/* Заголовочные блоки секций: одинаковые отступы и ширина */
.sl-head{
  max-width: 920px;
  margin-bottom: var(--sl-stack-3);
}
.sl-head--wide{ max-width: 1120px; }
.sl-head--center{ text-align: center; margin-inline: auto; }

/* Микро-типографика */
.sl-title-balance{
  text-wrap: balance;
  letter-spacing: -0.012em;
}
.sl-text-muted{
  color: var(--sl-text-muted);
}

/* Нормализация расстояния у частых конструкций */
.sl-kicker{
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(18,21,33,.62);
}

/* Разделители */
.sl-divider{
  border-top: var(--sl-divider-light);
}
.sl-divider--soft{
  border-top: var(--sl-divider-soft);
}
.sl-divider--dark{
  border-top: var(--sl-divider-dark);
}

/* Grid helpers */
.sl-grid{
  display: grid;
  gap: var(--sl-grid-gap);
}
.sl-grid--lg{ gap: var(--sl-grid-gap-lg); }

/* Движение: уважение к пользователю */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}