/* ================================================================
   ADAPTIVE TYPOGRAPHY — единая система типографических токенов
   Проект: ГермесГарант · GermesGarant.by
   Подход: CSS clamp() для плавного масштабирования без брейкпоинтов
   Диапазон: 320px (мобильный) → 1440px (широкий экран)
   ================================================================

   SCALE:
   --fs-xs     : 11px  (фиксированный — бейджи, микроэлементы)
   --fs-sm     : 13px  (фиксированный — метаданные, служебный текст)
   --fs-base   : 14→16px  (основной текст)
   --fs-md     : 15→17px  (увеличенный текст, заголовки карточек)
   --fs-lg     : 15→20px  (выраженные заголовки карточек)
   --fs-xl     : 18→24px  (подзаголовки секций, hero-карточки)
   --fs-2xl    : 20→30px  (заголовки H3, секции)
   --fs-3xl    : 26→40px  (заголовки H2, секции)
   --fs-4xl    : 34→58px  (hero H1, главный заголовок)

   SPACING:
   --sp-xs     : 12→20px
   --sp-sm     : 16→28px
   --sp-md     : 24→44px
   --sp-lg     : 36→64px
   --sp-xl     : 48→80px
   --sp-section: 60→100px

   clamp(min, preferred, max)
   preferred = slope * 100vw + intercept
   slope = (max - min) / (1440 - 320) = (max - min) / 1120
   ================================================================ */

:root {
  /* ── Font-size tokens ──────────────────────────────────────── */
  --fs-xs:    0.6875rem;                                  /* 11px  — фиксированный */
  --fs-sm:    0.8125rem;                                  /* 13px  — фиксированный */
  --fs-base:  clamp(0.875rem,  0.82rem + 0.22vw,  1rem);           /* 14→16px */
  --fs-md:    clamp(0.9375rem, 0.88rem + 0.22vw,  1.0625rem);      /* 15→17px */
  --fs-lg:    clamp(0.9375rem, 0.83rem + 0.45vw,  1.25rem);        /* 15→20px */
  --fs-xl:    clamp(1.125rem,  0.97rem + 0.54vw,  1.5rem);         /* 18→24px */
  --fs-2xl:   clamp(1.25rem,   1.02rem + 0.89vw,  1.875rem);       /* 20→30px */
  --fs-3xl:   clamp(1.625rem,  1.28rem + 1.43vw,  2.5rem);         /* 26→40px */
  --fs-4xl:   clamp(2.125rem,  1.63rem + 2.14vw,  3.625rem);       /* 34→58px */

  /* ── Fluid spacing tokens ──────────────────────────────────── */
  --sp-xs:      clamp(0.75rem,  0.61rem + 0.54vw,  1.25rem);       /* 12→20px */
  --sp-sm:      clamp(1rem,     0.79rem + 0.89vw,  1.75rem);       /* 16→28px */
  --sp-md:      clamp(1.5rem,   1.14rem + 1.43vw,  2.75rem);       /* 24→44px */
  --sp-lg:      clamp(2.25rem,  1.75rem + 2.14vw,  4rem);          /* 36→64px */
  --sp-xl:      clamp(3rem,     2.43rem + 2.5vw,   5rem);          /* 48→80px */
  --sp-section: clamp(3.75rem,  3rem + 3.21vw,     6.25rem);       /* 60→100px */

  /* ── Legacy spacing aliases (для обратной совместимости) ── */
  --sp-section-xl: var(--sp-section);
  --sp-section-lg: var(--sp-xl);
  --sp-section-md: var(--sp-lg);

  /* ── Font-weight aliases ─────────────────────────────────── */
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;
}

/* ================================================================
   ГЛОБАЛЬНЫЕ ЗАГОЛОВКИ — адаптивные через clamp()
   Применяется к стандартным элементам внутри контентных секций.
   Не переопределяет hero-prem.css (у него своя система).
   ================================================================ */

/* Banner page titles (sx-bnr-inr) */
.sx-bnr-inr-entry .banner-title-outer h2 {
  font-size: clamp(1.75rem, 1.25rem + 2.23vw, 3.125rem); /* 28→50px */
}

/* Section headings (section-head wrapper) */
.section-head h2,
.section-head h3 {
  font-size: clamp(1.5rem, 1.1rem + 1.78vw, 2.5rem);     /* 24→40px */
}

/* Standalone section titles */
.section-title {
  font-size: clamp(1.375rem, 1.05rem + 1.43vw, 2.125rem); /* 22→34px */
}

.section-subtitle {
  font-size: clamp(0.9375rem, 0.88rem + 0.27vw, 1.125rem); /* 15→18px */
}

/* ================================================================
   HERO (homepage) — адаптивные заголовки
   ================================================================ */

/* Основной hero-заголовок страницы */
.hero-prem__heading {
  font-size: clamp(2rem, 1.43rem + 2.5vw, 3.5rem);       /* 32→56px */
}

/* Подзаголовок hero */
.hero-prem__subheading {
  font-size: clamp(1rem, 0.9rem + 0.45vw, 1.25rem);       /* 16→20px */
}

/* Ключевые преимущества */
.hero-prem__benefit {
  font-size: var(--fs-base);
}

/* ================================================================
   CTA-БЛОКИ — глобальные
   ================================================================ */
.cta-title,
.section-cta-title {
  font-size: clamp(1.375rem, 1rem + 1.61vw, 2.25rem);     /* 22→36px */
}

.cta-subtitle,
.section-cta-text {
  font-size: var(--fs-base);
}

/* ================================================================
   ФОРМЫ — единая типографика
   ================================================================ */
label,
.form-label {
  font-size: var(--fs-base);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
select,
textarea {
  /* Минимум 1rem (16px) — предотвращает автозум на iOS Safari */
  font-size: max(1rem, var(--fs-base));
}

.form-text,
.helper-text,
.field-hint {
  font-size: var(--fs-sm);
}

/* ================================================================
   FLUID SECTION PADDING — Hero, карточки, секции
   Примечание: .hero-prem и .section-full управляют своим отступом
   через собственные CSS-файлы — не переопределяем здесь.
   ================================================================ */

/* ================================================================
   NAVIGATION
   ================================================================ */
.header-nav .nav > li > a {
  font-size: var(--fs-base);
}