/* ============================================================================
   UIKIT — Институт психологии «ТОЧКА» (institut-vrn.ru) · draft-v1 · 2026-06-27
   ----------------------------------------------------------------------------
   Подход: MOBILE-FIRST. Сетка «дышащая» (вдохновлено Tilda).
   Стиль: коммерческий с экспертностью (BERIGA Q7) — НАДПО/НИИДПО-тон + ФИС ФРДО.
   Палитра адаптирована с текущего Tilda институт-врн.ру: тёплый жёлтый акцент +
   приглушённый бордово-чёрный для CTA + нейтральные серые.
   ============================================================================ */

:root {
  /* ============ ПАЛИТРА v2 ============ */
  /* близкая к текущему Tilda institut-vrn.ru: deep navy + vibrant blue + red CTA */
  --c-primary: #003366;          /* deep navy blue — основной hero */
  --c-primary-light: #005ECC;    /* vibrant blue — вторичные секции */
  --c-primary-dark: #002244;     /* прижатый navy (hover) */
  --c-cta: #E31E24;              /* red — основной CTA */
  --c-cta-hover: #B81A1F;        /* red прижатый */
  --c-accent: var(--c-cta);      /* alias — было дублирующее значение (UIKIT-ревью A-13) */
  --c-accent-soft: #FF8562;      /* coral. ⚠️ ТОЛЬКО как фон под тёмный текст (#111). Не под белый (2.39:1 — fail). */

  --c-bg: #ffffff;               /* карточки, основа */
  --c-bg-soft: #F1F1F1;          /* серый фон секций */
  --c-bg-card: var(--c-bg);      /* alias — было дублирующее значение (UIKIT-ревью A-13) */
  --c-bg-section: var(--c-bg-soft); /* alias — то же */

  --c-text: #111111;             /* основной текст */
  --c-text-soft: #444444;
  --c-text-mute: #666666;        /* v0.7.3: #767676→#666 — теперь AA на off-white тоже (#f1f1f1=5.06, #fff=5.74). Borders используют отдельный --c-border-input. */
  --c-text-inverse: #ffffff;     /* текст на тёмном */
  --c-border: #C7C7C7;           /* декоративные разделители (не для интерактивных границ!) */
  --c-border-input: #767676;     /* SC 1.4.11 — границы input/select/textarea/ghost-btn (4.54:1 на белом) */
  --c-border-soft: #E6E6E6;

  --c-success: #2e7d32;
  --c-warn: #ed6c02;

  /* ============ ТИПОГРАФИКА ============ */
  --ff-base: 'Inter', Arial, sans-serif;
  --ff-heading: 'PT Sans', 'Inter', Arial, sans-serif;

  /* шкала — фиксированные значения (desktop), переопределяются медиа-квери ниже */
  --fs-h1: 44px;
  --fs-h2: 36px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-xsmall: 12px;

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.5;
  --lh-relax: 1.7;

  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --fw-regular: 400;

  /* ============ СЕТКА / ОТСТУПЫ ============ */
  --container-max: 1200px;       /* FIXED — на 1920 отступы 360px с краёв (как на Tilda) */
  --container-pad: 16px;         /* mobile; переопределяется в @media ниже */

  /* шкала отступов (8-point grid) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* секция-padding — mobile-first, переопределяется @media ниже */
  --section-py: 60px;            /* mobile: 60-80px; desktop: 100-120px */
  --section-gap: clamp(20px, 4vw, 56px);

  /* ============ ОКРУГЛЕНИЯ И ТЕНИ ============ */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.07);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.1);
  --shadow-card: 0 2px 8px rgba(31,31,31,0.06);
  --shadow-card-hover: 0 8px 24px rgba(31,31,31,0.12);

  /* ============ TRANSITIONS ============ */
  --t-fast: 120ms;
  --t-base: 200ms;
  --t-slow: 350ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Mobile-first → переопределения для tablet/desktop */
@media (max-width: 767px) {
  :root {
    --fs-h1: 32px;
    --fs-h2: 26px;
    --fs-h3: 20px;
    --section-py: 60px;
  }
}
@media (min-width: 768px) {
  :root {
    --container-pad: 24px;       /* tablet */
    --section-py: 80px;
  }
}
@media (min-width: 1024px) {
  :root {
    --container-pad: 32px;       /* desktop */
    --section-py: 100px;
  }
}

/* ============================================================================
   RESET / BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--c-primary-dark); }
button { font: inherit; cursor: pointer; border: 0; background: none; }
ul, ol { padding-left: 1.25em; }

h1, h2, h3, h4 {
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-4);
  color: var(--c-text);
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
p { margin: 0 0 var(--space-4); }

/* ============================================================================
   LAYOUT (контейнер, секции)
   ============================================================================ */
.container {
  max-width: 1200px;             /* FIXED — не clamp */
  margin: 0 auto;
  padding: 0 var(--container-pad);
}
.section { padding: var(--section-py) 0; }
.section--soft { background: var(--c-bg-section); }
.section--cta {
  background: var(--c-primary-light);
  color: var(--c-text-inverse);
}
.section--cta h1, .section--cta h2, .section--cta h3 { color: var(--c-text-inverse); }
/* МОЙ-КОСЯК-#6: было три оттенка серого (#D4D4D4 → 4.08:1 fail, #888888 → 1.71:1 КАТАСТРОФА).
   Заводим единый paragraph + legal-disclaimer — два оттенка вместо трёх. */
.section--cta p { color: rgba(255,255,255,0.85); }
.section--cta .legal,
.section--cta .form-note { color: rgba(255,255,255,0.65); font-size: var(--fs-small); }
.section--cta a:not(.btn) { color: var(--c-text-inverse); text-decoration: underline; }

.section__head { margin-bottom: var(--space-6); max-width: 880px; }
.section__title { margin-bottom: var(--space-3); }
.section__sub { color: var(--c-text-soft); font-size: var(--fs-h4); margin: 0; }

/* Grid utility */
.grid { display: grid; gap: var(--space-5); }
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: 1fr; }
@media (min-width: 600px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

.flex { display: flex; gap: var(--space-4); flex-wrap: wrap; }

/* ============================================================================
   HEADER / NAV
   ============================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-primary);
  color: var(--c-text-inverse);
  border-bottom: 1px solid var(--c-primary-dark);
  backdrop-filter: blur(6px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  padding: var(--space-3) 0;
  min-height: 64px;
}
.site-logo {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
}
.site-logo__brand { font-size: 1.375rem; color: var(--c-text-inverse); letter-spacing: 0.02em; }
.site-logo__sub { font-size: 0.6875rem; color: rgba(255,255,255,0.7); font-weight: var(--fw-regular); text-transform: uppercase; letter-spacing: 0.08em; }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; gap: var(--space-5); align-items: center; }
}
.nav > ul > .nav-item > a {
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--c-text-inverse);
  padding: var(--space-2) 0;
  border-bottom: 2px solid transparent;
  transition: border-color var(--t-base) var(--easing);
}
/* МОЙ-КОСЯК-#1: было `.nav a.is-active` — каскадило на dropdown, белый текст на белом фоне.
   Скоупим строго на top-level (прямой потомок .nav > ul > .nav-item). */
.nav > ul > .nav-item > a:hover,
.nav > ul > .nav-item > a.is-active { border-bottom-color: var(--c-accent); color: var(--c-text-inverse); }
/* Dropdown active — отдельный стиль */
.nav-dropdown a.is-active {
  background: var(--c-bg-soft);
  color: var(--c-primary);
  font-weight: var(--fw-semibold);
}

.header-cta {
  display: flex; align-items: center; gap: var(--space-4);
}
.header-phone {
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  white-space: nowrap;
  color: var(--c-text-inverse);
}
.header-phone:hover { color: var(--c-accent-soft); }

.nav-toggle {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-radius: var(--radius-sm);
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--c-text-inverse);
  transition: transform var(--t-base) var(--easing);
}
@media (min-width: 1024px) { .nav-toggle { display: none; } }

/* Мобильный nav (раскрытый) */
.mobile-nav {
  position: fixed;
  inset: 64px 0 0 0;
  background: var(--c-bg);
  padding: var(--space-5);
  transform: translateX(100%);
  transition: transform var(--t-slow) var(--easing);
  overflow-y: auto;
  z-index: 99;
}
.mobile-nav.is-open { transform: translateX(0); }
.mobile-nav ul { list-style: none; padding: 0; }
.mobile-nav li { border-bottom: 1px solid var(--c-border-soft); }
.mobile-nav a { display: block; padding: var(--space-4) 0; font-size: 1.125rem; font-weight: var(--fw-medium); }

/* ============================================================================
   КНОПКИ
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 28px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  line-height: 1;
  border-radius: var(--radius-pill);
  transition: all var(--t-base) var(--easing);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary {
  background: var(--c-accent);
  color: var(--c-text-inverse);
}
.btn--primary:hover { background: var(--c-cta-hover); color: var(--c-text-inverse); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--cta {
  background: var(--c-primary);
  color: var(--c-text-inverse);
}
.btn--cta:hover { background: var(--c-primary-dark); color: var(--c-text-inverse); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
.btn--ghost {
  background: transparent;
  color: var(--c-text);
  /* A-04: было #C7C7C7 (1.69:1, кнопка не видна как кнопка). #767676 = 4.54:1 ✅ */
  border: 1.5px solid var(--c-border-input);
}
.btn--ghost:hover { border-color: var(--c-text); background: var(--c-bg-soft); }

/* A-07: явный focus-visible на всех кнопках (без правила опираются на user-agent default). */
.btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 2px;
}
.hero .btn:focus-visible,
.hero-program .btn:focus-visible,
.section--cta .btn:focus-visible { outline-color: #fff; }

/* A-08: disabled state */
.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* === Кнопки внутри тёмных hero/cta-секций — авто-контраст ===
   Проблема (выявлено ревью v0.4): .btn--cta использует --c-primary (#003366),
   а .hero/.hero-program имеют тот же фон → кнопка сливается. Fix через override. */
.hero .btn--cta, .hero-program .btn--cta, .section--cta .btn--cta {
  background: var(--c-cta); color: var(--c-text-inverse);
}
.hero .btn--cta:hover, .hero-program .btn--cta:hover, .section--cta .btn--cta:hover {
  background: var(--c-cta-hover);
}
.hero .btn--ghost, .hero-program .btn--ghost, .section--cta .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,0.4);
}
.hero .btn--ghost:hover, .hero-program .btn--ghost:hover, .section--cta .btn--ghost:hover {
  color: #fff; border-color: #fff; background: rgba(255,255,255,0.12);
}

.btn--lg { padding: 18px 36px; font-size: 1.0625rem; }
.btn--sm { padding: 10px 20px; font-size: 0.9375rem; }
.btn--full { width: 100%; }

/* ============================================================================
   КАРТОЧКИ
   ============================================================================ */
.card {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  transition: all var(--t-base) var(--easing);
}
.card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); }

/* Карточка программы */
.card-program {
  display: flex; flex-direction: column;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t-base) var(--easing);
}
.card-program:hover { border-color: var(--c-primary); box-shadow: var(--shadow-card-hover); }
/* МОЙ-КОСЯК-#2: карточки С/БЕЗ бейджа давали title_top 52px vs 25px → разъезд заголовков на 27px.
   Резервируем слот фиксированной высоты под бейдж — заголовки на одной линии. */
.card-program__head {
  padding: var(--space-5) var(--space-5) 0;
  min-height: 56px;
}
.card-program__head .badge { margin-bottom: var(--space-3); display: inline-flex; }
.card-program__body { padding: var(--space-3) var(--space-5) var(--space-5); flex-grow: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.card-program__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); margin: 0 0 var(--space-2); }
.card-program__meta { display: flex; gap: var(--space-3); flex-wrap: wrap; font-size: var(--fs-small); color: var(--c-text-mute); }
.card-program__meta span { display: inline-flex; align-items: center; gap: 4px; }
.card-program__price { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; margin-top: auto; padding-top: var(--space-4); }
.card-program__price-now { font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--c-cta); }
.card-program__price-old { font-size: 1rem; text-decoration: line-through; color: var(--c-text-mute); }
.card-program__rassrochka { font-size: var(--fs-small); color: var(--c-text-soft); }
.card-program__cta { margin-top: var(--space-3); }

/* Карточка преподавателя */
.card-teacher {
  text-align: center;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--t-base) var(--easing);
}
.card-teacher:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); }
.card-teacher__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--c-bg-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--c-text-mute);
  font-size: 0.875rem;
}
.card-teacher__body { padding: var(--space-4); }
.card-teacher__name { font-size: 1.125rem; font-weight: var(--fw-bold); margin: 0 0 var(--space-2); }
.card-teacher__role { font-size: 0.875rem; color: var(--c-text-soft); margin: 0; }

/* Карточка статьи / события */
.card-event {
  display: flex; flex-direction: column;
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* A-02 родственный дефект: red на navy = 2.69:1. Заменён на white. */
.card-event__date {
  background: var(--c-primary);
  color: var(--c-text-inverse);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--fw-bold);
  font-size: 0.9375rem;
}
.card-event__body { padding: var(--space-4); }

/* ============================================================================
   БЕЙДЖИ / ЧИПЫ
   ============================================================================ */
.badge {
  display: inline-flex; align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-xsmall);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* A-02 (UIKIT-ревью): был red текст на navy фоне (2.69:1 fail). Инвертирован: red фон + white. */
.badge--hit { background: var(--c-cta); color: var(--c-text-inverse); }
.badge--new { background: var(--c-success); color: var(--c-text-inverse); }
.badge--sale { background: var(--c-accent); color: var(--c-text-inverse); }
.badge--free { background: var(--c-success); color: var(--c-text-inverse); }

.chip {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-border-input);   /* A-04: было #C7C7C7 (1.69:1 fail) */
  font-size: var(--fs-small);
  background: var(--c-bg);
  color: var(--c-text-soft);
}
/* A-01 (UIKIT-ревью): был red текст на navy фоне (2.69:1 fail). Заменён на white (12.61:1). */
.chip:hover, .chip.is-active { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-text-inverse); }

/* ============================================================================
   ФОРМЫ
   ============================================================================ */
.form-field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-field label { font-size: 0.9375rem; font-weight: var(--fw-medium); color: var(--c-text); }
.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  background: var(--c-bg);
  /* A-04: border-color #C7C7C7 (1.69:1) → #767676 (4.54:1, SC 1.4.11 ✅) */
  border: 1.5px solid var(--c-border-input);
  border-radius: var(--radius-md);
  color: var(--c-text);
  transition: border-color var(--t-base) var(--easing), box-shadow var(--t-base) var(--easing);
}
/* A-06: focus был только border-color (1px change). Добавлен halo (SC 2.4.7 + advisory 2.4.13). */
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: 0;
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(0, 51, 102, 0.2);
}
/* Minor: явный placeholder (без правила = браузерный дефолт ≈3:1, fail) */
.form-field input::placeholder,
.form-field textarea::placeholder { color: var(--c-text-mute); opacity: 1; }
/* A-08: disabled state — не покрыт ранее */
.form-field input:disabled,
.form-field textarea:disabled,
.form-field select:disabled {
  background: var(--c-bg-soft);
  color: var(--c-text-mute);
  cursor: not-allowed;
}
/* Error-состояние (нужен бриф → для форм заявок: красная граница + сообщение под полем) */
.form-field input[aria-invalid="true"],
.form-field textarea[aria-invalid="true"],
.form-field select[aria-invalid="true"] {
  border-color: var(--c-cta);
}
.form-field input[aria-invalid="true"]:focus,
.form-field textarea[aria-invalid="true"]:focus,
.form-field select[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.18); }
.form-field__error { font-size: var(--fs-small); color: #c1121f; font-weight: var(--fw-semibold); } /* v0.7.3: var(--c-cta)#e31e24=4.49 на off-white → #c1121f (на #fff=7.0, #fafaf7=6.1) AA */
.form-note { font-size: var(--fs-small); color: var(--c-text-mute); }
.form-note a { color: var(--c-text); text-decoration: underline; }

/* ============================================================================
   HERO (главная и пр.)
   ============================================================================ */
.hero {
  padding: var(--section-py) 0;
  background: var(--c-primary);
  color: var(--c-text-inverse);
}
.hero h1, .hero h2, .hero h3 { color: var(--c-text-inverse); }

/* МОЙ-КОСЯК-#5: hero --cream (`napravlenie-klinicheskaya`) изменил bg, но текст остался white.
   Контраст 1.00:1 на cream. Завели модификатор + override. */
.hero--cream,
.hero-direction {
  background: linear-gradient(135deg, #F5F0E8, #FFF8E1);
  color: var(--c-text);
}
.hero--cream h1, .hero--cream h2, .hero--cream h3,
.hero-direction h1, .hero-direction h2, .hero-direction h3 { color: var(--c-primary); }
.hero--cream p, .hero-direction p { color: var(--c-text); }
.hero--cream a:not(.btn), .hero-direction a:not(.btn) { color: var(--c-primary); text-decoration: underline; }
.hero__inner {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 960px) {
  .hero__inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-7); }
}
.hero__eyebrow { display: inline-block; padding: 6px 14px; background: var(--c-accent); color: var(--c-text-inverse); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-bold); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: var(--space-4); }
.hero__title { margin: 0 0 var(--space-5); }
.hero__sub { font-size: var(--fs-h4); color: rgba(255,255,255,0.85); margin-bottom: var(--space-6); line-height: var(--lh-snug); }
.hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-6); }
.hero__meta { display: flex; gap: var(--space-5); flex-wrap: wrap; font-size: var(--fs-small); color: rgba(255,255,255,0.7); }
.hero__meta strong { color: var(--c-text-inverse); font-weight: var(--fw-semibold); }
.hero__media { background: var(--c-bg-card); border-radius: var(--radius-xl); padding: var(--space-6); box-shadow: var(--shadow-lg); }
.hero__media-placeholder { aspect-ratio: 4/3; background: var(--c-bg-soft); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; color: var(--c-text-mute); font-size: 0.875rem; }

/* Hero программы (компактнее) */
.hero-program {
  padding: var(--section-py) 0 var(--space-7);
}
.hero-program__bage { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 14px; background: var(--c-accent); color: var(--c-text-inverse); border-radius: var(--radius-pill); font-size: var(--fs-small); font-weight: var(--fw-semibold); margin-bottom: var(--space-4); }
.hero-program__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-5); padding: var(--space-5); background: var(--c-bg-soft); border-radius: var(--radius-lg); margin-top: var(--space-6); }
.hero-program__meta-item .num { font-size: 1.75rem; font-weight: var(--fw-bold); color: var(--c-text); display: block; }
.hero-program__meta-item .label { font-size: var(--fs-small); color: var(--c-text-mute); }

/* ============================================================================
   FAQ accordion
   ============================================================================ */
.faq { display: flex; flex-direction: column; gap: var(--space-3); }
.faq-item {
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.faq-item summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  font-weight: var(--fw-semibold);
  list-style: none;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: var(--fw-regular);
  color: var(--c-primary);
  transition: transform var(--t-base) var(--easing);
  flex-shrink: 0;
}
.faq-item[open] summary::after { content: '−'; }
.faq-item__body { padding: 0 var(--space-5) var(--space-5); color: var(--c-text-soft); line-height: var(--lh-relax); }

/* ============================================================================
   STICKY CTA (mobile)
   ============================================================================ */
.sticky-cta {
  display: none;
  position: fixed;
  bottom: 16px;
  left: 16px;
  right: 16px;
  z-index: 50;
  background: var(--c-cta);
  color: var(--c-text-inverse);
  border-radius: var(--radius-pill);
  padding: 14px 24px;
  font-weight: var(--fw-semibold);
  box-shadow: var(--shadow-lg);
  text-align: center;
  transition: transform var(--t-base) var(--easing);
}
.sticky-cta.is-visible { display: block; }
@media (min-width: 768px) { .sticky-cta { display: none !important; } }

/* ============================================================================
   FOOTER
   ============================================================================ */
.site-footer {
  background: #181818;
  color: #b7b7b7;
  padding: var(--section-py) 0 var(--space-6);
  font-size: var(--fs-small);
  border-top: 4px solid var(--c-cta);   /* v0.7.6 #2: чёткая граница «контент↔футер», когда последняя секция тоже тёмная */
}
.site-footer h4 { color: var(--c-text-inverse); font-size: 1rem; margin-bottom: var(--space-4); }
.site-footer a { color: #d4d4d4; }
.site-footer a:hover { color: var(--c-primary); }
.site-footer__grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  padding-top: var(--space-7);     /* v0.7.6 #4: разделитель footer-help (border-bottom) был впритык к заголовкам колонок */
  margin-bottom: var(--space-7);
}
@media (min-width: 720px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__bottom {
  border-top: 1px solid #2a2a2a;
  padding-top: var(--space-5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: #888;
  font-size: var(--fs-xsmall);
}

/* ============================================================================
   УТИЛИТЫ
   ============================================================================ */
.text-center { text-align: center; }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mb-4 { margin-bottom: var(--space-4); }
.text-mute { color: var(--c-text-mute); }
.text-soft { color: var(--c-text-soft); }
.fs-small { font-size: var(--fs-small); }
.fw-bold { font-weight: var(--fw-bold); }
.no-list { list-style: none; padding: 0; }

/* Полоска прогресса при заполнении формы / тесте — для бесплатных тестов */
.progress-bar { width: 100%; height: 6px; background: var(--c-border-soft); border-radius: 3px; overflow: hidden; margin: var(--space-3) 0; }
.progress-bar__fill { height: 100%; background: var(--c-primary); transition: width var(--t-slow) var(--easing); }

/* ============================================================================
   МОЙ-КОСЯК-#8: чек-лист «Кому подходит» — стандартный <li> с ::after content "✓".
   - bullet прижат к первой строке (не центрирован на многострочный текст)
   - красная галочка на #F1F1F1 = 4.15:1 (fail)
   Заводим .checklist: flex + align-items + зелёная галочка success.
   ============================================================================ */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding-left: 0;
}
.checklist li::before {
  content: '✓';
  color: var(--c-success);    /* зелёный = semantic success, не красный */
  font-weight: var(--fw-bold);
  font-size: 1.125em;
  flex-shrink: 0;
  line-height: 1.5;
}

/* МОЙ-КОСЯК-#3: фото преподов с object-position: 50% 0% → отрезает подбородок.
   Дефолт сменён на 25% (лицо в верхней трети, подбородок виден). */
.card-teacher__photo img,
.card-teacher__photo {
  object-fit: cover;
  object-position: center 25%;
}

/* МОЙ-КОСЯК-#4: параллельные кнопки маршрутов разной ширины.
   `.route-card .btn { width: 100% }` через wrapper. */
.route-card { display: flex; flex-direction: column; height: 100%; }
.route-card__cta { margin-top: auto; }
.route-card__cta .btn { width: 100%; }

/* ============================================================================
   A-10: PROSE max-width (CPL ≤ 75ch) — для длинных текстовых блоков
   ============================================================================ */
.prose,
.prose p,
.prose ul,
.prose ol,
.prose blockquote { max-width: 65ch; }
.prose h2, .prose h3, .prose h4 { max-width: 50ch; }

/* ============================================================================
   Accessibility / motion — A11Y защита от touch-залипания и от reduced-motion
   ============================================================================ */
/* Hover-эффекты только на устройствах с настоящим hover (mouse). Иначе на touch hover «залипает». */
@media (hover: none) {
  .btn:hover,
  .card:hover,
  .card-program:hover,
  .card-teacher:hover,
  .chip:hover { transform: none !important; box-shadow: var(--shadow-card); }
}

/* Reduced motion — пользователь явно отключил анимацию */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn:hover,
  .card:hover,
  .card-program:hover,
  .card-teacher:hover { transform: none !important; }
}

/* ============================================================================
   v0.6.1 — фиксы по дизайн-агенту v2 ревью (47 critical / 99 major)
   Подробно: a2_Готовое/Дизайн/ревью-3-v2-агент/ОТЧЁТ-V2.md
   ============================================================================ */

/* FIX-1: .nav .is-active каскад на dropdown <li>/<a> — workflow Phase 6 поменял HTML.
   Жестко скоупим: .is-active в dropdown получает primary текст на bg-soft. */
.nav-dropdown li.is-active a,
.nav-dropdown a.is-active {
  background: var(--c-bg-soft) !important;
  color: var(--c-primary) !important;
  font-weight: var(--fw-semibold);
}
.nav-dropdown li.is-active a:hover { background: var(--c-border-soft) !important; }

/* FIX-2: глобально chip — cursor:pointer. Phase 6 добавил множество .chip без правил. */
.chip,
span.chip,
[role="tab"] { cursor: pointer; }
.chip[aria-disabled="true"] { cursor: not-allowed; }

/* FIX-3: breadcrumb→h1 spacing. Phase 6 поменял HTML-структуру так, что мой
   прошлый селектор не работает. Глобально: hero-program h1 — обнуляем верхний gap. */
.hero-program { padding-top: var(--space-5) !important; }
.hero-program .breadcrumbs { margin-bottom: var(--space-3) !important; }
.hero-program h1 { margin-top: var(--space-3) !important; }
.hero-program .container > h1:first-child { margin-top: 0 !important; }

/* FIX-4: object-position 25% — с !important, потому что Phase 6 inline-style. */
.card-teacher__photo img,
.card-teacher__photo,
.card-teacher img {
  object-position: center 25% !important;
}

/* FIX-5: фолбэк для broken-img — серая плашка с альтом, не разорванный значок.
   Если изображение не загрузилось, alt-текст виден на сером фоне. */
img:not([src]),
img[src=""] { display: none; }
img { background: var(--c-bg-soft); color: var(--c-text-mute); font-size: var(--fs-small); text-align: center; }

/* FIX-6: финальные глобальные палитра-правила для тёмных секций (закрывает
   #888/#D4D4D4/#B7B7B7 в формах под workflow Phase 6 типа .catalog-quiz, .career__form-note). */
/* ревью-6: catalog-quiz теперь СВЕТЛАЯ (форма не на тёмном) → убран из white-правила. */
.section--cta p,
.career__form-note,
[class*="cta"] p:not([class*="title"]) { color: rgba(255,255,255,0.85) !important; }
.section--cta .legal, .section--cta small,
.catalog-quiz .legal,
.career__form-note small, .career__form-note .legal { color: rgba(255,255,255,0.65) !important; font-size: var(--fs-small); }

/* FIX-7: catalog-quiz / career-stat blocks — белый текст на белом / светло-сером
   из workflow Phase 6. Override на читабельный текст. */
.catalog-quiz, .catalog-quiz__form-title, .catalog-quiz p,
.career__stat-label, .career__stat-value,
.section--soft p, .section--soft h3, .section--soft span {
  color: inherit;  /* отменяем naследованный white от родителя */
}
.catalog-quiz { background: var(--c-primary-light); color: var(--c-text-inverse); }
.catalog-quiz .catalog-quiz__form-title,
.catalog-quiz h2, .catalog-quiz h3 { color: var(--c-text-inverse) !important; }
.career__stat { background: var(--c-bg-card); color: var(--c-text); padding: var(--space-5); border-radius: var(--radius-lg); }
.career__stat-label { color: var(--c-text-soft) !important; }
.career__stat-value { color: var(--c-primary) !important; font-weight: var(--fw-bold); }

/* v0.6.2 — итерация 2 после v2-агента: остаточные white/white в dropdown <li>.
   Phase 6 оставил inline-style/inherited white-color на dropdown items.
   Жёсткий override на все dropdown элементы. */
.nav-dropdown,
.nav-dropdown li,
.nav-dropdown ul,
.nav-dropdown a { color: var(--c-text) !important; }
.nav-dropdown a:hover { color: var(--c-primary) !important; background: var(--c-bg-soft); }
.nav-dropdown a.is-active { color: var(--c-primary) !important; background: var(--c-bg-soft); font-weight: var(--fw-semibold); }

/* v0.6.3 — итерация 3: form-title внутри .catalog-quiz__form (форма белая, текст должен быть тёмный) */
.catalog-quiz__form,
.catalog-quiz__form * { color: var(--c-text) !important; }
.catalog-quiz__form-title { color: var(--c-text) !important; font-weight: var(--fw-bold); }
.catalog-quiz__form .form-note,
.catalog-quiz__form small,
.catalog-quiz__form .legal { color: var(--c-text-mute) !important; }
.catalog-quiz__form .btn--cta,
.catalog-quiz__form .btn--primary { color: var(--c-text-inverse) !important; }

/* v0.6.4 — итерация 4: .hero__sub на светлых hero-program даёт white-on-white */
.hero-program .hero__sub,
.hero--cream .hero__sub,
.hero-direction .hero__sub { color: var(--c-text-soft) !important; }
.hero-program p:not([class]),
.hero-program p { color: inherit; }

/* Глобально убрать ВСЕ inline #D4D4D4/#888/#B7B7B7 которые Phase 6 хардкодил на светлом */
[style*="color:#d4d4d4"],
[style*="color: #d4d4d4"],
[style*="color:#D4D4D4"],
[style*="color: #D4D4D4"] { color: var(--c-text-soft) !important; }
[style*="color:#888"],
[style*="color: #888"] { color: var(--c-text-soft) !important; }
[style*="color:#b7b7b7"],
[style*="color: #b7b7b7"],
[style*="color:#B7B7B7"] { color: var(--c-text-soft) !important; }

/* v0.6.5: .btn--ghost в светлом hero-program — был унаследован цвет из .hero override */
.hero-program .btn--ghost { color: var(--c-text) !important; border-color: var(--c-border-input) !important; background: transparent; }
.hero-program .btn--ghost:hover { background: var(--c-bg-soft) !important; border-color: var(--c-primary) !important; }

/* v0.6.6: .btn--ghost на всех светлых hero-* */
.hero--cream .btn--ghost,
.hero-direction .btn--ghost { color: var(--c-text) !important; border-color: var(--c-border-input) !important; background: transparent !important; }
.hero--cream .btn--ghost:hover,
.hero-direction .btn--ghost:hover { background: rgba(0,0,0,0.05) !important; border-color: var(--c-primary) !important; }

/* v0.6.7: doc-thumb / card-teacher__photo--placeholder для замены broken-img */
.doc-thumb {
  background: var(--c-bg-soft);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  line-height: 1.4;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  font-size: 1rem;
}
.card-teacher__photo--placeholder {
  background: var(--c-bg-soft);
  color: var(--c-primary);
  font-family: var(--ff-heading);
  font-weight: var(--fw-bold);
  font-size: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

/* v0.6.8: высокая специфичность для catalog-quiz__form-title — побеждает все предыдущие */
section .catalog-quiz .catalog-quiz__form .catalog-quiz__form-title,
section.section--cta .catalog-quiz .catalog-quiz__form .catalog-quiz__form-title,
.catalog-quiz__form .catalog-quiz__form-title { color: var(--c-text) !important; }
.catalog-quiz__form .form-note,
.catalog-quiz__form small { color: var(--c-text-mute) !important; }

/* v0.6.9: .facet-hero / другие светлые "hero" — текст тёмный */
.facet-hero,
.section--hero-light { background: var(--c-bg-soft); color: var(--c-text); }
.facet-hero h1, .facet-hero h2, .facet-hero h3 { color: var(--c-primary); }
.facet-hero .hero__sub,
.facet-hero p { color: var(--c-text-soft) !important; }
.facet-hero .hero__eyebrow { background: var(--c-cta); color: var(--c-text-inverse); }
.facet-hero .btn--ghost { color: var(--c-text) !important; border-color: var(--c-border-input) !important; }

/* v0.6.10: универсальный fallback для .hero__sub без явного .hero / .hero-program / .hero--cream родителя.
   На светлом body фоне даём text-soft. */
body > main > section:not(.hero):not([class*="cta"]) .hero__sub,
section.hero-program .hero__sub,
section.facet-hero .hero__sub { color: var(--c-text-soft) !important; }

/* v0.6.3 (offline-crop policy)
   Фото преподов теперь -528.jpg (Pillow обрезаны 1:1 face-centered).
   object-fit/object-position не нужен — фото уже квадратные, рендер 264×264 от 528 = retina @2x.
   .card-teacher → ссылка на страницу препода (popup можно добавить позже). */
a.card-teacher,
.card-teacher--link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.card-teacher__photo { aspect-ratio: 1/1; overflow: hidden; background: var(--c-bg-soft); }
.card-teacher__photo img {
  width: 100%;
  height: 100%;
  display: block;
  /* фото 528×528 1:1 face-centered → не нужен агрессивный object-fit cover */
  object-fit: cover;
  object-position: center center;
}
a.card-teacher:hover .card-teacher__photo img { transform: scale(1.03); transition: transform 250ms; }

/* Также — fix object-position для остальных мест (был !important от v0.6.1) теперь
   избыточен, но оставляем для совместимости (не вредит). */

/* ============================================================================
   v0.7 — фиксы по 7 скринам оператора (визуальная проверка глазами, не детектор)
   ============================================================================ */

/* FIX-#2: card-program row-align — заголовки разъезжаются с/без бейджа.
   v0.5.2 fix `.card-program__head { min-height: 56px }` НЕ сработал потому что
   бейдж имеет inline-flex и обнуляет min-height. Жёстко: padding-top:56px для head. */
.card-program__head { padding-top: 56px !important; position: relative; }
.card-program__head .badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-5);
  margin: 0 !important;
}
/* Заголовок всегда на одной высоте независимо от наличия бейджа */

/* FIX-#3: card-teacher газетная вёрстка простыни — обрезаем p до 3 строк,
   полная инфа на странице препода (карточка уже кликабельная). */
.card-teacher__body p,
.card-teacher__role,
.card-teacher__bio {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--c-text-soft);
}
.card-teacher__name {
  font-size: 1rem;
  font-weight: var(--fw-bold);
  margin-bottom: 4px;
  color: var(--c-text);
}
/* v0.7.6 #5/#6: было text-align:center → длинные регалии = газетная простыня по центру + рваный обрыв.
   Левое выравнивание + чистый clamp (полные регалии на странице препода, карточка кликабельна). */
.card-teacher__body { padding: var(--space-4); text-align: left; min-height: 132px; }
.card-teacher__role { -webkit-line-clamp: 4; }   /* чуть больше строк, ровный ellipsis, без обрыва на полуслове-в-центре */

/* FIX-#4: card-event кнопки на разных горизонталях — flex + margin-top:auto */
.card-event { display: flex; flex-direction: column; height: 100%; }
.card-event__body { display: flex; flex-direction: column; flex: 1; }
.card-event__cta,
.card-event .btn:last-child {
  margin-top: auto;
}
.card-event .btn { width: 100%; }

/* FIX-#5: events карточки — плашки контраст (тёмно-коричневое на cream)
   Заменяем bg на чистый primary/cta (4.7:1+) */
.card-event .badge,
.card-event__date {
  background: var(--c-primary) !important;
  color: var(--c-text-inverse) !important;
}
.card-event .badge--type {
  background: var(--c-bg-soft) !important;
  color: var(--c-primary) !important;
  border: 1px solid var(--c-primary);
}

/* FIX-#6: false-affordance плашка-как-кнопка в hero events.
   .hero__eyebrow была capsule + red bg = looks like CTA.
   Делаем не-capsule (sharp corners), меньше, без bg-pill — eyebrow-метка. */
.hero__eyebrow {
  background: transparent !important;
  color: var(--c-cta) !important;
  padding: 0 !important;
  font-size: 0.8125rem !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  border-radius: 0 !important;
  border-left: 3px solid var(--c-cta);
  padding-left: var(--space-3) !important;
  display: inline-block;
  margin-bottom: var(--space-3);
}
/* Hero на тёмном фоне — eyebrow белый */
.hero:not(.hero--cream):not(.hero-direction) .hero__eyebrow {
  color: var(--c-text-inverse) !important;
  border-left-color: var(--c-cta);
}

/* v0.7.1 — фиксы по v2.1 ревью */
/* FIX A: .btn--ghost.btn--sm в header (navy bg) — текст белый */
.site-header .btn--ghost { color: var(--c-text-inverse) !important; border-color: rgba(255,255,255,0.4) !important; }
.site-header .btn--ghost:hover { background: rgba(255,255,255,0.12) !important; border-color: #fff !important; color: #fff !important; }

/* FIX B: .quiz-cta — фон light, текст должен быть тёмный */
.quiz-cta { background: var(--c-bg-soft); color: var(--c-text); }
.quiz-cta h2, .quiz-cta__text h2 { color: var(--c-text); }
.quiz-cta p, .quiz-cta__text p { color: var(--c-text-soft); }

/* FIX C: .footer-social a — fix white/white */
.footer-social a { background: rgba(255,255,255,0.15); color: var(--c-text-inverse) !important; }
.footer-social a:hover { background: var(--c-cta); color: #fff !important; }

/* FIX D: ROW-ALIGN с badge как сиблинг — фиксированная сетка через CSS Grid Rows */
.routes article.route-card,
.grid.grid--3 article.card-program,
.grid.grid--3 .card-program { display: grid; grid-template-rows: auto 1fr auto; height: 100%; }
.routes { display: grid; grid-template-rows: auto; }
.routes article { grid-row: auto; }
/* Сами grid-родители получают align-items: stretch (по умолчанию у grid) — карточки одной высоты */

/* ============================================================================
   ВАРИАНТ 2 — «ТЁПЛЫЙ РЕДАКТОРСКИЙ» · token-override (перебивает :root выше)
   Беж/крем + терракота + олива · serif-заголовки (Playfair) · резкие скругления.
   Максимально отличается от v1 (navy+красный, тёмный, sans).
   ============================================================================ */
:root {
  --c-primary: #003A78;          /* эспрессо-чарколь — заголовки/структура/футер */
  --c-primary-light: #00509E;    /* олива — вторичный акцент */
  --c-navy: #001E3F; --c-navy-deep: #001A3A;
  --c-primary-dark: #002A57;
  --c-cta: #E31E24;              /* глубокая терракота — white-text 6.1:1 ✓ + eyebrow на светлом 5.6:1 ✓ */
  --c-cta-hover: #B81A1F;
  --c-accent: #E31E24;
  --c-accent-soft: #FF8562;      /* тёплый песок — фон ПОД тёмный текст */

  --c-bg: #FFFFFF;               /* айвори-карточки */
  --c-bg-soft: #F3EFE9;          /* тёплый беж — секции */
  --c-bg-card: #FFFFFF;
  --c-bg-section: var(--c-bg-soft);

  --c-text: #1A1A1A;
  --c-text-soft: #444444;
  --c-text-mute: #666666;
  --c-text-inverse: #FFFFFF;     /* крем-текст на тёмном-тёплом */
  --c-border: #C7C7C7;
  --c-border-input: #767676;     /* 1.4.11: 3.88:1 на айвори ✓ */
  --c-border-soft: #E6E6E6;

  --c-success: #2e7d32;
  --c-warn: #ed6c02;

  --ff-base: 'Inter', Arial, sans-serif;
  --ff-heading: 'Playfair Display', 'PT Serif', Georgia, serif;

  /* редакторский — резкие скругления */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(43,36,32,0.06);
  --shadow-md: 0 4px 14px rgba(43,36,32,0.08);
  --shadow-lg: 0 14px 36px rgba(43,36,32,0.12);
  --shadow-card: 0 2px 10px rgba(43,36,32,0.07);
  --shadow-card-hover: 0 10px 28px rgba(43,36,32,0.14);
}
/* serif только крупным заголовкам — body остаётся Inter */
h1, h2, h3, .hero__title, .section__title, .page-header__title { font-family: var(--ff-heading); letter-spacing: -0.01em; }
.tochka-screen-reader-heading { position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important; }