/* ═══════════════════════════════════════════════════════
   37 ОБрМП — UNIFIED TYPOGRAPHY SYSTEM v1
   Загальна типо-шкала для всіх сторінок.
   Завантажується глобально, перебиває локальні розміри.
   ═══════════════════════════════════════════════════════ */

:root {
  /* DISPLAY & HEADINGS */
  --fs-display: clamp(2.8rem, 7vw, 5rem);
  --fs-h1:      clamp(2.4rem, 5.6vw, 4.2rem);
  --fs-h2:      clamp(2rem,   4.6vw, 3.4rem);
  --fs-h3:      clamp(1.45rem, 2.6vw, 1.95rem);
  --fs-h4:      clamp(1.15rem, 1.8vw, 1.4rem);
  --fs-h5:      clamp(1.05rem, 1.4vw, 1.2rem);

  /* BODY */
  --fs-lead:    clamp(1.08rem, 1.4vw, 1.25rem);
  --fs-body:    clamp(1rem,    1.15vw, 1.1rem);
  --fs-meta:    clamp(.9rem,   1.05vw, 1rem);
  --fs-small:   clamp(.85rem,  .95vw, .92rem);

  /* META / LABELS */
  --fs-eyebrow: clamp(.72rem, .85vw, .82rem);
  --fs-rub:     clamp(.68rem, .8vw, .76rem);
  --fs-tag:     clamp(.66rem, .78vw, .74rem);
  --fs-htag:    clamp(.7rem, .8vw, .78rem);

  /* BUTTONS */
  --fs-btn:     clamp(.82rem, .98vw, .92rem);
  --fs-btn-sm:  clamp(.74rem, .85vw, .82rem);
  --fs-btn-lg:  clamp(.92rem, 1.1vw, 1.05rem);

  /* LINE HEIGHTS */
  --lh-tight: .95;
  --lh-snug: 1.15;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  /* LETTER SPACING */
  --ls-tight: -.02em;
  --ls-meta: .14em;
  --ls-eyebrow: .18em;
}

/* ═══ MOBILE FLOOR — guarantee readable minimums ═══ */
@media (max-width: 480px) {
  :root {
    --fs-h1:      clamp(2rem, 8vw, 2.8rem);
    --fs-h2:      clamp(1.75rem, 7vw, 2.4rem);
    --fs-h3:      clamp(1.3rem, 5vw, 1.7rem);
    --fs-h4:      clamp(1.1rem, 4.2vw, 1.3rem);
    --fs-lead:    1.05rem;
    --fs-body:    .98rem;
    --fs-meta:    .92rem;
    --fs-eyebrow: .72rem;
    --fs-rub:     .7rem;
    --fs-tag:     .68rem;
    --fs-htag:    .72rem;
    --fs-btn:     .82rem;
    --fs-btn-sm:  .74rem;
    --fs-btn-lg:  .9rem;
  }
}

/* ═══ APPLY: high specificity but not !important so we can opt-out ═══ */

/* HEADINGS */
body .h1, body h1.h1     { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
body .h2, body h2.h2     { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
body .h3, body h3.h3     { font-size: var(--fs-h3); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
body .h4, body h4.h4     { font-size: var(--fs-h4); line-height: 1.2; }
body .h5                 { font-size: var(--fs-h5); line-height: 1.3; }

/* BODY COPY */
body .lead, body p.lead          { font-size: var(--fs-lead); line-height: 1.6; }
body .body-txt, body p.body-txt  { font-size: var(--fs-body); line-height: var(--lh-relaxed); }
body .meta, body .small-txt      { font-size: var(--fs-meta); line-height: 1.55; }

/* META LABELS */
body .eyebrow            { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); }
body .rub, body .rub > span { font-size: var(--fs-rub); letter-spacing: .12em; }
body .htag, body .htag > span { font-size: var(--fs-htag); letter-spacing: .04em; }

/* BUTTONS — keep size + padding ratio */
body .btn                { font-size: var(--fs-btn); padding: .9rem 2rem; }
body .btn.btn-sm         { font-size: var(--fs-btn-sm); padding: .65rem 1.35rem; }
body .btn.btn-lg         { font-size: var(--fs-btn-lg); padding: 1.1rem 2.6rem; }

/* HEADER NAV — readable at all sizes */
body .hdr-nav a          { font-size: clamp(.74rem, .9vw, .86rem); letter-spacing: .07em; }
body .hdr-cta            { font-size: clamp(.78rem, .92vw, .9rem) !important; }

/* MOBILE NAV (burger menu) */
body .mob a              { font-size: clamp(1.2rem, 4.5vw, 1.6rem); }

/* FORM INPUTS */
body input, body textarea, body select {
  font-size: clamp(.92rem, 1.1vw, 1.02rem);
}

/* FOOTER */
body .footer-tagline     { font-size: clamp(1.15rem, 1.6vw, 1.5rem); }
body .footer-desc        { font-size: clamp(.9rem, 1.1vw, 1.02rem); line-height: 1.7; }
body .footer-col-hd      { font-size: var(--fs-eyebrow); letter-spacing: .16em; }
body .footer-links a     { font-size: clamp(.92rem, 1.1vw, 1.02rem); }
body .footer-phone       { font-size: clamp(1.15rem, 1.5vw, 1.4rem) !important; }
body .footer-copy        { font-size: clamp(.7rem, .82vw, .8rem); }

/* CARD COMMON CLASSES */
body .role-title, body .tech-title, body .train-title,
body .unit-name, body .stat-l, body .news-title, body .story-title {
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
}
body .role-desc, body .tech-desc, body .train-desc,
body .unit-desc, body .news-excerpt, body .story-excerpt {
  font-size: clamp(.88rem, 1.05vw, 1rem);
  line-height: 1.7;
}
body .role-tag {
  font-size: clamp(.62rem, .75vw, .7rem) !important;
  padding: .25rem .65rem !important;
  letter-spacing: .08em;
}

/* STAT NUMBERS */
body .stat-n, body .facts-bar-v {
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
}

/* FAQ */
body .faq-q              { font-size: clamp(.92rem, 1.15vw, 1.05rem); }
body .faq-a p            { font-size: clamp(.88rem, 1.05vw, 1rem); line-height: 1.7; }

/* ═══ FACTS-BAR (about page) — give labels more breathing room ═══ */
body .facts-bar          { gap: .5rem; }
body .facts-bar-item     { padding: 1.6rem 1rem; }
body .facts-bar-v        { font-size: clamp(1.4rem, 3vw, 2.4rem); }
body .facts-bar-l        { font-size: clamp(.62rem, .82vw, .78rem); line-height: 1.45; letter-spacing: .08em; margin-top: .5rem; }

@media (max-width: 860px) {
  body .facts-bar-item   { padding: 1.2rem .65rem; }
  body .facts-bar-v      { font-size: 1.5rem; }
  body .facts-bar-l      { font-size: .58rem; line-height: 1.4; letter-spacing: .06em; }
}
@media (max-width: 600px) {
  body .facts-bar        { gap: .3rem; }
  body .facts-bar-item   { padding: .9rem .4rem; }
  body .facts-bar-v      { font-size: 1.1rem; }
  body .facts-bar-l      { font-size: .52rem; line-height: 1.3; letter-spacing: .04em; margin-top: .35rem; }
}

/* ═══ PAGE-HERO — normalize content height across pages ═══
   Reserves 3 lines for description so eyebrow+h1+rule+p
   sit at consistent vertical position when justify-content:flex-end. */
body .page-hero-inner { min-height: 200px; }
@media (max-width: 600px) { body .page-hero-inner { min-height: 160px; } }

/* ═══ MOB BAR (sticky bottom on detail pages) ═══ */
body .mob-bar .btn       { font-size: clamp(.78rem, .9vw, .88rem) !important; padding: .7rem 1.2rem !important; }
body .mob-tel            { font-size: clamp(.92rem, 1.1vw, 1.05rem); }

/* ═══ OPT-OUT — add `.no-typo` to any element to skip the system ═══ */
body .no-typo, body .no-typo * { font-size: revert; line-height: revert; letter-spacing: revert; }
