/* ============================================================================
 * GORILLA - ЕДИНЫЙ ТИПОГРАФИЧЕСКИЙ СТАНДАРТ (type scale + ритм отступов)
 * ----------------------------------------------------------------------------
 * Единственный источник правды для РАЗМЕРОВ ЗАГОЛОВКОВ и ВЕРТИКАЛЬНЫХ ОТСТУПОВ.
 * Грузится после gorilla-tokens / brand-tokens, до critical и инлайнов секций.
 *
 * Иерархия заголовков (сверху вниз):
 *   --g-fs-hero   hero H1 (только первый экран)
 *   --g-fs-h1     заголовок секции (главный, КАПС)        ← был разнобой 28..48
 *   --g-fs-h2     подзаголовок секции / заголовок блока    ← был разнобой 18..24
 *   --g-fs-h3     заголовок карточки / мелкий блок
 *   --g-fs-lead   вводный абзац под заголовком
 *   --g-fs-body   основной текст
 *   --g-fs-sm     вторичный текст
 *   --g-fs-eyebrow надзаголовок-лейбл (КАПС, над заголовком)
 *   --g-fs-caption подписи / мелочь
 *
 * Ритм отступов под заголовками (margin-bottom) - кратно 4px:
 *   --g-gap-eyebrow  лейбл → заголовок
 *   --g-gap-title    заголовок → контент (стандартный)
 *   --g-gap-title-lg заголовок секции → контент (крупный)
 * ============================================================================ */
:root {
  /* --- ДЕКОРАТИВНЫЕ DISPLAY-НАЧЕРТАНИЯ (Jawbreak, крупные числа/лозунги) --- */
  --g-fs-display-xl: clamp(44px, 11vw, 96px);  /* статы-цифры stat-strip (↓ v1.0.15: баннер не на пол-экрана, товары важнее) */
  --g-fs-display: clamp(46px, 8.5vw, 120px);   /* lifestyle-hero лозунг (min↓ под «ИНСТИНКТ») */

  /* --- РАЗМЕРЫ ЗАГОЛОВКОВ (адаптивные clamp, единая шкала) --- */
  --g-fs-hero: clamp(52px, 6.5vw, 96px);
  --g-fs-h1: clamp(32px, 5vw, 48px);
  --g-fs-h2: clamp(20px, 2.5vw, 24px);
  --g-fs-h3: clamp(16px, 2vw, 20px);
  --g-fs-lead: clamp(15px, 1.3vw, 18px);
  --g-fs-body-lg: clamp(14px, 2.5vw, 18px);
  --g-fs-body: clamp(14px, 2.2vw, 16px);
  --g-fs-sm: 14px;
  --g-fs-eyebrow: 13px;
  --g-fs-caption: 12px;

  /* --- РИТМ ОТСТУПОВ ЗАГОЛОВКОВ (кратно 4px, привязка к --g-space-*) --- */
  --g-gap-eyebrow: 12px;   /* лейбл → заголовок            (--g-space-3) */
  --g-gap-title: 20px;     /* заголовок → контент          (--g-space-5) */
  --g-gap-title-lg: 32px;  /* крупный заголовок → контент  (--g-space-8) */

  /* --- Единая высота строки заголовков --- */
  --g-lh-heading: 1.1;
}

/* Базовая нормализация заголовков темы - чтобы голые h1..h4 в контенте
 * (страницы, WC, демо) тоже подчинялись стандарту, а не браузерным дефолтам. */
.gorilla-page h1, .entry-content h1 { font-size: var(--g-fs-h1); line-height: var(--g-lh-heading); }
.gorilla-page h2, .entry-content h2 { font-size: var(--g-fs-h2); line-height: var(--g-lh-heading); }
.gorilla-page h3, .entry-content h3 { font-size: var(--g-fs-h3); line-height: var(--g-lh-heading); }

/* =========================================================
   Заголовки секций/страниц: по центру + «клыки» (корона из
   логотипа) над текстом. Иконка = CSS-mask, цвет задаётся
   background-color (сейчас чёрный var(--g-color-navy) -
   легко перекрасить одной строкой).
   ========================================================= */
.gorilla-section-title,
.g-section__title,
.persona-list__title,
.persona-gallery__title,
.persona-related__title,
.gorilla-collection__title {
  text-align: center;
}
.gorilla-section-title::before,
.g-section__title::before,
.persona-list__title::before,
.persona-gallery__title::before,
.persona-related__title::before,
.gorilla-collection__title::before {
  content: "";
  display: block;
  width: clamp(48px, 6vw, 68px);
  aspect-ratio: 267 / 205;
  margin: 0 auto 8px;
  background-color: var(--g-color-navy);
  -webkit-mask: url('../img/gorilla-fangs.svg') no-repeat center / contain;
  mask: url('../img/gorilla-fangs.svg') no-repeat center / contain;
}