/* ============================================================================
   Comfort Med — base.css
   Сброс, дизайн-токены, типографика, сетка, утилиты, доступность, печать.
   ========================================================================== */

/* ------------------------------------------------------------------ RESET */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body, h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

ul[class], ol[class] { list-style: none; padding: 0; }

img, svg, video, iframe { display: block; max-width: 100%; }
img, video { height: auto; }

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }

/* ----------------------------------------------------------------- TOKENS */
:root {
  /* цвета */
  --c-primary: #0F3D8C;
  --c-primary-2: #1B4B9E;
  --c-accent: #2E7FE0;
  --c-accent-dark: #1F63B8;

  --c-surface: #EEF4FD;
  --c-surface-2: #F7FAFF;
  --c-white: #FFFFFF;

  /* Тёплая пара к синему. Без неё палитра была одним синим в четырёх
     яркостях — отсюда ощущение «пресности».
     --c-surface-warm  — кремовый фон чередующихся секций;
     --c-accent-warm   — ТОЛЬКО декор (линии, номера, подчёркивания):
                         на белом даёт 2.26:1, для текста НЕ годится;
     --c-accent-warm-text — тот же янтарь, затемнённый до 5.32:1 на белом,
                         используется везде, где янтарём набирается ТЕКСТ. */
  --c-surface-warm: #F7F4EE;
  --c-accent-warm: #E8934A;
  --c-accent-warm-text: #9A5A12;

  --c-text: #12203A;
  --c-text-2: #4A5A75;
  --c-text-muted: #5F6E88;

  --c-border: #D9E4F5;
  --c-border-strong: #B9CCE9;

  /* Цвета статусов затемнены до контраста >= 4.5:1 (WCAG 2.1 AA)
     как на белом, так и на своих светлых подложках. */
  --c-success: #14713F;
  --c-success-bg: #E8F7EF;
  --c-error: #B32626;
  --c-error-bg: #FDEDED;
  --c-warn: #8F5600;
  --c-warn-bg: #FFF6E6;

  /* Светлый край градиента ограничен #2565C0: на нём белый текст даёт контраст
     5.67:1, а полупрозрачный белый — 4.81:1, то есть оба проходят WCAG AA (4.5:1).
     На прежнем #2E7FE0 было 4.02 и 3.49 — текст читался хуже нормы. */
  --grad-hero: linear-gradient(135deg, #0F3D8C 0%, #1B4B9E 55%, #2565C0 100%);
  /* Светлый конец градиента затемнён с #2E7FE0 до #1F63B8: белый текст на
     кнопках .btn--primary давал 4.02:1 при норме WCAG AA 4.5:1.
     Стало 5.94:1 для белого и 4.99:1 для rgba(255,255,255,.88). */
  --grad-cta: linear-gradient(120deg, #1B4B9E, #1F63B8);

  /* типографика
     Onest подключается отдельным файлом assets/css/font.css неблокирующим
     способом. Пока он грузится, текст рисуется системным стеком — поэтому
     системные шрифты остаются в var(--ff-base) как фолбэк. */
  --ff-base: 'Onest', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-h1: clamp(34px, 6vw, 68px);
  --fs-h2: clamp(28px, 4vw, 46px);
  --fs-h3: clamp(19px, 2vw, 24px);
  --fs-lead: clamp(17px, 1.8vw, 21px);
  --fs-base: 16px;
  --fs-sm: 15px;
  --fs-xs: 13px;
  --lh-tight: 1.2;
  --lh-base: 1.6;

  /* отступы */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-16: 64px; --sp-20: 80px;

  /* Три уровня вертикального ритма. Раньше у всех секций был один отступ,
     и страница читалась как таблица — глазу не за что зацепиться. */
  --section-y: clamp(56px, 7vw, 96px);          /* обычная */
  --section-y-tight: clamp(40px, 5vw, 64px);    /* плотная */
  --section-y-airy: clamp(72px, 10vw, 140px);   /* ключевая, «дышащая» */
  --gap-grid: clamp(16px, 2vw, 24px);

  /* размеры */
  --container: 1200px;
  --container-narrow: 820px;
  --pad-x: clamp(16px, 4vw, 32px);

  /* скругления */
  --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;

  /* тени (только синеватые) */
  --sh-1: 0 2px 8px rgba(15, 61, 140, .06);
  --sh-2: 0 8px 24px rgba(15, 61, 140, .10);
  --sh-3: 0 16px 48px rgba(15, 61, 140, .16);
  /* тень при наведении: прежние 6-10% были почти незаметны */
  --sh-lift: 0 18px 44px rgba(15, 61, 140, .18);

  /* переходы */
  --tr-fast: .15s ease;
  --tr-base: .25s ease;
  --tr-slow: .4s ease;

  /* слои */
  --z-header: 100;
  --z-burger: 200;
  --z-modal: 300;
  --z-toast: 400;

  --header-h: 72px;
}

/* ------------------------------------------------------------ TYPOGRAPHY */
body {
  font-family: var(--ff-base);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-white);
  min-height: 100vh;
  overflow-x: hidden;
}

body.is-locked {
  overflow: hidden;
}

h1, h2, h3, h4 {
  line-height: var(--lh-tight);
  font-weight: 800;
  color: var(--c-text);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: -.03em; line-height: 1.05; }
h2 { font-size: var(--fs-h2); letter-spacing: -.02em; line-height: 1.1; }
h3 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -.01em; }
h4 { font-size: 18px; font-weight: 600; }

p { color: var(--c-text-2); }

/* Цифры не должны «прыгать» по ширине: время приёма, телефоны,
   счётчики, суммы в прайсе. */
.table__time, .diag-card__time, .doc-card__time, .price-table__value,
.lab-count__num, .field__counter, .hero__fact-num, .adv-row__num,
.trust__value, .phone-link, .topbar__item, .mobile-nav__phone,
.diag-row__time, time {
  font-variant-numeric: tabular-nums;
}

strong, b { font-weight: 700; color: var(--c-text); }

small { font-size: var(--fs-sm); }

/* ---------------------------------------------------------------- LAYOUT */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container--narrow { max-width: var(--container-narrow); }

.section {
  padding-block: var(--section-y);
}

.section--surface { background: var(--c-surface); }
.section--surface-2 { background: var(--c-surface-2); }
/* Тёплый кремовый фон — главный приём против «монохромной синевы».
   Чередование идёт белый → кремовый → белый. */
.section--warm { background: var(--c-surface-warm); }
.section--tight { padding-block: var(--section-y-tight); }
.section--airy { padding-block: var(--section-y-airy); }

.section__head {
  max-width: 760px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

/* Надзаголовок вида «01 — УСЛУГИ»: янтарная чёрточка, номер, тире, тема.
   Номер и чёрточка — чистый декор, поэтому им разрешён светлый янтарь;
   текст набран затемнённым --c-accent-warm-text (5.32:1 на белом). */
.section__eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--c-accent-warm-text);
  margin-bottom: var(--sp-3);
}

.section__eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 1px;
  background: var(--c-accent-warm);
}

.section__head--center .section__eyebrow { justify-content: center; }

.section__eyebrow-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}

.section__eyebrow-num::after {
  content: "—";
  margin-left: 10px;
  color: var(--c-accent-warm);
}

/* светлый вариант — на синем градиенте и тёмных плашках */
.section__eyebrow--light { color: rgba(255, 255, 255, .92); }
.section__eyebrow--light::before { background: rgba(255, 255, 255, .6); }
.section__eyebrow--light .section__eyebrow-num::after { color: rgba(255, 255, 255, .6); }

.section__title { margin-bottom: var(--sp-3); }

.section__lead {
  font-size: var(--fs-lead);
  color: var(--c-text-2);
}

.grid {
  display: grid;
  gap: var(--gap-grid);
  grid-template-columns: 1fr;
}

/* ------------------------------------------------------------- UTILITIES */
.u-hidden { display: none !important; }

.u-center { text-align: center; }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-8 { margin-top: var(--sp-8); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-6 { margin-bottom: var(--sp-6); }

.u-muted { color: var(--c-text-muted); }
.u-text-2 { color: var(--c-text-2); }
.u-sm { font-size: var(--fs-sm); }
.u-xs { font-size: var(--fs-xs); }

.u-flex { display: flex; }
.u-flex-wrap { flex-wrap: wrap; }
.u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); }
.u-gap-4 { gap: var(--sp-4); }
.u-items-center { align-items: center; }
.u-justify-center { justify-content: center; }

.u-nowrap { white-space: nowrap; }

/* визуально скрыто, но доступно скринридеру */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- SVG ICON */
.icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm { width: 18px; height: 18px; }
.icon--lg { width: 28px; height: 28px; }

/* ----------------------------------------------------------- ACCESSIBILITY */
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100px;
  z-index: calc(var(--z-toast) + 1);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-white);
  color: var(--c-primary);
  font-weight: 700;
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  transition: top var(--tr-base);
}

.skip-link:focus { top: var(--sp-4); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------------------------------------------------------- MOTION */
/* Появление блоков при прокрутке.
   Класс .reveal НЕ прописан в разметке — его расставляет ui.js. Так сделано
   намеренно: если JS отключён или ещё не загрузился, контент виден сразу,
   а не остаётся невидимым с opacity:0. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22, 1, .36, 1),
              transform .6s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Полоса прогресса чтения */
.readbar {
  position: fixed;
  top: 0; left: 0;
  z-index: calc(var(--z-header) + 2);
  height: 3px;
  width: 0;
  background: var(--c-accent);
  box-shadow: 0 0 10px rgba(46, 127, 224, .55);
  pointer-events: none;
  transform-origin: left center;
}

/* --------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  /* блоки показываем сразу, без выезда */
  .reveal, .reveal.is-in {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Ken Burns на фото фасада и «прочерчивание» подчёркивания в H1 */
  .hero__bg-img { animation: none !important; transform: none !important; }
  .hero__title em::after { transform: scaleX(1) !important; }

  .readbar { display: none; }
}

/* ------------------------------------------------------------------ PRINT */
@media print {
  .header, .topbar, .floatbar, .modal, .toast-host,
  .burger, .mobile-nav, .mobile-nav-overlay,
  .hero__actions, .lang-switch, .btn, .map__frame, .readbar {
    display: none !important;
  }

  /* на печати анимации появления не отрабатывают — показываем всё сразу */
  .reveal { opacity: 1 !important; transform: none !important; }

  body { color: #000; background: #fff; font-size: 12pt; }
  .section { padding-block: 12pt; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
  .card, .service-card { break-inside: avoid; box-shadow: none; border: 1pt solid #999; }
}