/* =====================================================================
   PUBLIC PAGES UNIFIED — design tokens consistency layer (2026-05-25)

   Эталон — главная (https://wonderscribe.pro/), измеренные tokens:
     - H1: 60px / weight 800 / line-height 1.04 @ ≥1024px
     - H2: 36px / weight 700 / line-height 1.12-1.15 @ ≥1024px
     - Lead: 19px / weight 400 / line-height 1.55 @ ≥1024px
     - Container padding: 48px (vs default 24px на pricing → 32px)
     - Section padding: 56px/56px (vs scattered 20-72 разнобой)

   Root cause drift: разные публичные страницы используют разные h1/lead
   классы (.wsd-h1, .ds-title-hero, .ds-title-page, .ds-lead, .ds-sublead,
   .wsd-lead) с разными font-size rules. Главная (.wsd-h1) — самый крупный.

   Решение: этот override-layer выравнивает .ds-title-* / .ds-lead /
   .ds-sublead под эталон главной + унифицирует container padding и
   секционный ритм. Загружается ПОСЛЕ components.css и cabinet-overrides
   в base.html — выигрывает specificity при равном весе.

   Scope: всё внутри <main>, чтобы НЕ затронуть header/footer/cabinet.
   Cabinet шаблоны имеют свои overrides через cabinet-overrides.css.
===================================================================== */

/* ------------------------------------------------------------------
   1. CONTAINER PADDING — главная 48px, pricing был 32px → выравниваем
   ------------------------------------------------------------------ */
@media (min-width: 768px) {
  main .ds-container,
  main .wsd-pr-page .ds-container {
    padding-left: max(2rem, env(safe-area-inset-left)) !important;
    padding-right: max(2rem, env(safe-area-inset-right)) !important;
  }
}
@media (min-width: 1024px) {
  main .ds-container,
  main .wsd-pr-page .ds-container {
    padding-left: max(3rem, env(safe-area-inset-left)) !important;
    padding-right: max(3rem, env(safe-area-inset-right)) !important;
  }
}

/* ------------------------------------------------------------------
   2. HERO H1 — все public страницы под эталон главной (.wsd-h1 60px)
   .ds-title-hero (products, usecases) clamp(28px, 5vw, 52px) → 60px.
   .ds-title-page (contact, faq) без font-size → fallback 50px → 60px.
   ------------------------------------------------------------------ */
main .ds-title-hero[class],
main .ds-title-page[class] {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--color-text);
  line-height: 1.04;
  margin-top: .75rem;
  overflow-wrap: break-word;
  hyphens: none;
}
main .ds-title-hero[class],
main .ds-title-page[class] {
  font-size: clamp(32px, 5.5vw, 60px) !important;
}
@media (min-width: 1024px) {
  main .ds-title-hero[class],
  main .ds-title-page[class] { font-size: 60px !important; line-height: 1.04 !important; }
}

/* ------------------------------------------------------------------
   3. SECTION H2 — стабилизируем в районе 32-36px (как главная 36)
   Сейчас разнобой: pricing 38, products 38, usecases 38, contact 22, faq 24.
   ------------------------------------------------------------------ */
main h2.wsd-pr-section-title,
main h2.ds-title-section,
main section h2:not(.sr-only):not([class*="wsd-pr-onprem"]):not([class*="wsd-h1"]) {
  font-family: var(--font-display);
  font-weight: 700 !important;
  letter-spacing: -.02em;
  line-height: 1.15 !important;
  color: var(--color-text);
}
@media (min-width: 1024px) {
  main h2.wsd-pr-section-title,
  main h2.ds-title-section,
  main section h2:not(.sr-only):not([class*="wsd-pr-onprem"]):not([class*="wsd-h1"]) {
    font-size: 36px !important;
  }
}

/* ------------------------------------------------------------------
   4. LEAD/SUBLEAD — выравниваем под эталон главной (.wsd-lead 19px)
   .ds-lead и .ds-sublead на products/usecases были 17px → 19px.
   ------------------------------------------------------------------ */
main .ds-lead,
main .ds-sublead,
main .wsd-lead {
  font-size: 17px !important;
  line-height: 1.55 !important;
  color: var(--color-text-muted);
  text-wrap: pretty;
}
@media (min-width: 1024px) {
  main .ds-lead,
  main .ds-sublead,
  main .wsd-lead {
    font-size: 19px !important;
    line-height: 1.55 !important;
  }
}

/* ------------------------------------------------------------------
   5. SECTION VERTICAL RHYTHM — выравниваем под эталон (56/56)
   Сейчас: pricing 20-64 mix, products/usecases 72/72, faq 72/72.
   Стандарт: 48/48 на mobile, 64/64 на tablet, 80/80 на desktop —
   немного больше эталона, потому что 56 на больших экранах выглядит
   тесно (главная имеет hero отдельно с большим pad).
   ------------------------------------------------------------------ */
main > section:not([class*="hero"]):not(.wsd-pr-hero):not(.wsd-hero),
main .wsd-pr-section,
main .wsd-pr-section-compact {
  padding-top: 48px;
  padding-bottom: 48px;
}
@media (min-width: 768px) {
  main > section:not([class*="hero"]):not(.wsd-pr-hero):not(.wsd-hero),
  main .wsd-pr-section,
  main .wsd-pr-section-compact {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}
@media (min-width: 1024px) {
  main > section:not([class*="hero"]):not(.wsd-pr-hero):not(.wsd-hero),
  main .wsd-pr-section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
  main .wsd-pr-section-compact {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}
/* Hero сохраняет свой ритм (32/72) — это первая секция, padding-top
   зависит от sticky header, оставляем как есть. */

/* ------------------------------------------------------------------
   6. EYEBROW — единообразие
   .wsd-eyebrow уже 12px/500/padding 6px 12px — оставляем как есть,
   но добавляем margin-bottom для отделения от h1/h2 (часто слипается)
   ------------------------------------------------------------------ */
main .wsd-eyebrow {
  margin-bottom: 12px;
}

/* ------------------------------------------------------------------
   7. BREADCRUMBS — единый ритм отступа сверху страницы
   ------------------------------------------------------------------ */
main .ds-breadcrumbs {
  padding-top: 16px;
  padding-bottom: 8px;
  font-size: 13px;
}

/* ------------------------------------------------------------------
   8. CARDS — общий hover lift (как у pricing). Дублирует не страшно —
   transition tokens пересекаются.
   ------------------------------------------------------------------ */
main .wsd-pr-feat-card,
main .ds-card {
  transition: transform 220ms cubic-bezier(.16,1,.3,1),
              box-shadow 220ms cubic-bezier(.16,1,.3,1);
}
main .wsd-pr-feat-card:hover,
main .ds-card:hover {
  transform: translateY(-2px);
}

/* ------------------------------------------------------------------
   9. REDUCED MOTION — уважаем
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  main *,
  main *::before,
  main *::after {
    animation-duration: 0s !important;
    transition-duration: 0s !important;
  }
}