/* Страница «Маршрут пациента» (templates/template-route.php). Подключается только на этом шаблоне.
   Размеры — три ступени сайта: ≥1821 px, 768–1820 токены --px*, ≤767 токены --t*.
   Словарь — с главной: плашка-метка .services-slide__label, круглая тёмная кнопка со стрелкой,
   сиреневый #9e8cf2 только на наведении и в мелких акцентах. */

.route {
  --r-gap: 24px;
  --r-pad: 48px;
  --r-pad-s: 40px;
  --r-rad: 16px;
  --r-h1: 48px;
  --r-h2: 32px;
  --r-text: 20px;
  --r-small: 15px;
  --r-mb: 96px;
  --r-soft: #4a5160;
  --r-line: #e0e2e6;
  --r-lilac: #9e8cf2;
  --r-lilac-bg: #efecfd;
  --r-ease: cubic-bezier(.25, .8, .25, 1);
  padding-bottom: var(--r-mb);
}
@media (min-width: 768px) and (max-width: 1820px) {
  .route {
    --r-gap: var(--px24);
    --r-pad: var(--px48);
    --r-pad-s: var(--px40);
    --r-rad: var(--px16);
    --r-h1: var(--px48);
    --r-h2: var(--px32);
    --r-text: var(--px20);
    --r-small: var(--px15);
    --r-mb: var(--px72);
  }
}
@media (min-width: 320px) and (max-width: 767px) {
  .route {
    --r-gap: var(--t12);
    --r-pad: var(--t24);
    --r-pad-s: var(--t22);
    --r-rad: var(--t16);
    --r-h1: var(--t32);
    --r-h2: var(--t24);
    --r-text: var(--t16);
    --r-small: var(--t14);
    --r-mb: var(--t56);
  }
}

/* ── первый экран и запись: тёмная карточка, как «О нас» на главной ── */
.route-hero,
.route-cta {
  background-color: var(--orange);
  border-radius: var(--r-rad);
  color: #fff;
}
.route-hero { padding: var(--r-pad); margin-bottom: var(--r-gap); }
/* с картинкой: две равные половины, картинка тянется на всю высоту карточки */
/* левый край картинки — на линии правой колонки разделов ниже (.route-sec: padding P, gap P, 5fr 7fr):
   от края карточки 2P + (W − 3P)·5/12, где W = 100% + 2·inset (Павлон, 30.09) */
.route-hero--pic {
  --r-inset: 9px;
  --r-hero-h: 720px;
  display: grid;
  grid-template-columns: calc(2 * var(--r-pad) - var(--r-inset) + (100% + 2 * var(--r-inset) - 3 * var(--r-pad)) * 5 / 12) 1fr;
  padding: var(--r-inset);
  min-height: var(--r-hero-h);
}
/* текст сверху, кнопки прижаты к низу карточки */
.route-hero--pic .route-hero__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(var(--r-pad) - var(--r-inset));
}
.route-hero--pic .route-hero__btns { margin-top: auto; }
.route-hero--pic h1,
.route-hero--pic .route-hero__lead { max-width: none; }
/* картинка — вкладка внутри тёмной карточки: отступ по всем сторонам, скругление на размер отступа меньше */
.route-hero__img {
  position: relative;
  overflow: hidden;
  border-radius: max(calc(var(--r-rad) - var(--r-inset)), 8px);
}
.route-hero__img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 60% 50%;
  display: block;
}
@media (min-width: 768px) and (max-width: 1820px) {
  .route-hero--pic { --r-inset: max(0.625vw, 6px); --r-hero-h: 44vw; }
}
/* телефон: картинка над текстом и целиком — кадры 16:9, окно 4:3 срезало героев по краям (Павлон, 30.09) */
@media (min-width: 320px) and (max-width: 767px) {
  .route-hero--pic { --r-inset: 8px; --r-hero-h: 0; grid-template-columns: 1fr; }
  .route-hero__img { order: -1; aspect-ratio: 16 / 9; }
}
.route-hero__label {
  display: inline-block;
  background-color: #444a53;
  border-radius: 8px;
  padding: 0.45em 0.9em;
  margin-bottom: var(--r-pad-s);
  font-size: var(--r-small);
  line-height: 1.2;
}
.route-hero h1 {
  max-width: 22em;
  margin: 0 0 var(--r-pad-s);
  font-size: var(--r-h1);
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
}
.route-hero__lead {
  max-width: 44em;
  margin: 0 0 var(--r-pad);
  font-size: var(--r-text);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}
.route-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }
@media (min-width: 320px) and (max-width: 767px) {
  .route-hero__btns .btn { width: 100%; }
}

/* кнопки на тёмном: наведение как у «Запись на приём» в шапке (header .btn:hover) — фон плавно
   меняется на сиреневый (переход темы .btn: border/color/background 0.3s), без выезжающей полосы ::before.
   Полоса давала «белое на белом» и сиреневую рамку вокруг белого (Павлон, 30.09) */
.route .route-btn--light::before,
.route .route-btn--ghost::before { display: none; }
.route .route-btn--light { background-color: #fff; border-color: #fff; color: var(--black); }
.route .route-btn--ghost { background-color: transparent; border-color: rgba(255, 255, 255, 0.45); color: #fff; }
/* крупнее темы: 56 и 17 (было 48 и 15 на 1920; 38 и 12.7 на 1440) — Павлон, 30.09 */
.route .route-btn--light,
.route .route-btn--ghost { height: 56px; font-size: 17px; }
@media (min-width: 768px) and (max-width: 1820px) {
  .route .route-btn--light,
  .route .route-btn--ghost { height: max(var(--px56), 44px); font-size: max(var(--px18), 14px); }
}
@media (min-width: 320px) and (max-width: 767px) {
  .route .route-btn--light,
  .route .route-btn--ghost { height: var(--t56); font-size: var(--t16); }
}
@media (hover: hover) {
  .route .route-btn--light:hover,
  .route .route-btn--ghost:hover { background-color: var(--r-lilac); border-color: var(--r-lilac); color: #fff; }
}

/* ── белые разделы: слева метка + заголовок (+ пояснение), справа содержимое ── */
.route-sec {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--r-pad);
  background-color: #fff;
  border-radius: var(--r-rad);
  padding: var(--r-pad);
  margin-bottom: var(--r-gap);
}
.route-sec__head { align-self: start; position: sticky; top: calc(var(--r-pad) * 2.4); }
.route-sec h2,
.route-cta h2 { font-size: var(--r-h2); line-height: 1.2; margin-bottom: 0; }
.route-sec__note {
  margin: var(--r-pad-s) 0 0;
  max-width: 24em;
  font-size: var(--r-text);
  line-height: 1.55;
  color: var(--r-soft);
}
/* метка раздела — как .services-slide__label на главной */
.route-chip {
  display: block;
  width: fit-content;
  margin-bottom: var(--r-pad-s);
  padding: 8px 12px;
  border-radius: 4px;
  background-color: #f6f9fc;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--black);
}
@media (min-width: 768px) and (max-width: 1820px) {
  .route-chip { padding: var(--px8) var(--px12); border-radius: var(--px4); font-size: var(--px14); }
}
@media (min-width: 320px) and (max-width: 767px) {
  .route-chip { padding: var(--t8) var(--t14); border-radius: var(--t4); font-size: var(--t14); margin-bottom: var(--t16); }
  .route-sec { grid-template-columns: 1fr; gap: var(--r-pad-s); }
  .route-sec__head { position: static; }
  .route-sec__note { margin-top: var(--t16); }
}

/* текст раздела */
.route-text,
.route-steps { font-size: var(--r-text); line-height: 1.55; color: var(--r-soft); }
.route-text p { margin: 0 0 1em; max-width: 40em; }
.route-text p:last-child { margin-bottom: 0; }
.route-text b, .route-text strong { color: var(--black); font-weight: 500; }
.route-text ul { list-style: none; margin: 0 0 1.2em; padding: 0; }
.route-text ul:last-child { margin-bottom: 0; }
.route-text li { color: var(--black); }
.route-text a { color: var(--black); text-decoration: underline; text-decoration-color: var(--r-lilac); text-underline-offset: 0.2em; transition: color .3s; }

/* «Узнаёте себя»: пункты — плитки в две колонки с галочкой */
/* только список признаков; тревожные признаки (.route-alarm) внутри того же раздела — без галочек и сетки (Павлон, 30.09) */
.route-sec--checks .route-text > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.route-sec--checks .route-text > ul > li {
  position: relative;
  padding: 1em 1.1em 1em 3.1em;
  border-radius: 12px;
  background-color: #f6f9fc;
  line-height: 1.45;
}
.route-sec--checks .route-text > ul > li::before {
  content: "";
  position: absolute;
  left: 1em;
  top: 1em;
  width: 1.45em;
  height: 1.45em;
  border-radius: 50%;
  background: var(--r-lilac-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.3l3 3 6-6.3' fill='none' stroke='%239e8cf2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 72% no-repeat;
}
/* нечётный последний пункт — на всю ширину, без плитки-сироты */
.route-sec--checks .route-text > ul > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 320px) and (max-width: 767px) {
  .route-sec--checks .route-text > ul { grid-template-columns: 1fr; }
}

/* тревожные признаки — тёмная плашка, чтобы не потерялась среди светлых плиток */
.route-alarm {
  margin-top: var(--r-gap);
  padding: var(--r-pad-s);
  background-color: var(--orange);
  border-radius: 12px;
  color: #fff;
}
.route-alarm b { display: block; margin-bottom: 0.8em; font-weight: 500; color: #fff; }
.route-alarm ul { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.route-alarm li {
  padding: 0.45em 0.9em;
  border-radius: 8px;
  background-color: #444a53;
  color: #fff;
  line-height: 1.3;
}

/* «Почему»: составляющие — плитки в две колонки, выделенное слово — заголовок плитки */
.route-sec--why ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 1.4em 0;
}
.route-sec--why li {
  padding: 1.1em 1.2em;
  border-radius: 12px;
  background-color: #f6f9fc;
  line-height: 1.45;
  color: var(--r-soft);
}
.route-sec--why li b { display: block; margin-bottom: 0.35em; color: var(--black); }
.route-sec--why li b::first-letter { text-transform: uppercase; }
@media (min-width: 320px) and (max-width: 767px) {
  .route-sec--why ul { grid-template-columns: 1fr; }
}

/* цитата врача — в левой колонке, крупно */
.route-quote {
  margin: var(--r-pad-s) 0 0;
  padding: var(--r-pad-s) 0 0;
  border-top: 1px solid var(--r-line);
  max-width: 22em;
}
.route-quote p {
  position: relative;
  margin: 0 0 0.8em;
  font-size: calc(var(--r-text) * 1.15);
  line-height: 1.45;
  color: var(--black);
}
.route-quote p::before {
  content: "“";
  display: block;
  height: 0.55em;
  font-size: 3em;
  line-height: 1;
  color: var(--r-lilac);
}
.route-quote cite { font-style: normal; font-size: var(--r-small); color: var(--r-soft); }

/* шаги лечения — маршрут: номера соединены линией */
.route-steps { list-style: none; margin: 0; padding: 0; counter-reset: rs; }
.route-steps li {
  --dot: calc(var(--r-h2) * 1.4);
  position: relative;
  counter-increment: rs;
  padding: 0 0 var(--r-pad-s) calc(var(--dot) + var(--r-gap));
  min-height: var(--dot);
}
.route-steps li:last-child { padding-bottom: 0; }
.route-steps li::before {
  content: counter(rs);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background-color: var(--orange);
  color: #fff;
  font-size: var(--r-text);
}
/* соединительных линий между номерами нет (Павлон, 30.09: сплошная, затем пунктир — не понравились) */
/* телефон: номер над текстом, текст на всю ширину колонки (слева номер отнимал ~60px) */
@media (min-width: 320px) and (max-width: 767px) {
  .route-steps li { padding-left: 0; min-height: 0; }
  .route-steps li::before { position: static; width: var(--t32); height: var(--t32); margin-bottom: var(--t12); font-size: var(--t15); }
  .route-steps b { padding-top: 0; }
}
.route-steps b {
  display: block;
  padding-top: calc((var(--dot) - 1.3em) / 2);
  margin-bottom: 0.35em;
  font-size: calc(var(--r-text) * 1.15);
  font-weight: 500;
  line-height: 1.3;
  color: var(--black);
}
.route-steps span { display: block; max-width: 40em; }

/* «С кого начать»: строки с разделителями, без значков (стрелки обещали ссылку и шумели — Павлон, 30.09) */
.route-sec--start ul li {
  padding: 0.9em 0;
  border-bottom: 1px solid var(--r-line);
  line-height: 1.5;
}
.route-sec--start ul li:first-child { padding-top: 0; }
.route-sec--start ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.route-phone {
  display: inline-block;
  margin-top: 0.8em;
  font-size: calc(var(--r-text) * 1.3);
  color: var(--black);
  transition: color .3s;
}

/* врачи и отзывы — секции сайта; врачам отступ, чтобы белая карточка не ложилась ступенькой на белую секцию */
.route-team { margin: var(--r-mb) 0 0; }
.route-reviews--nodoc .review__doctor { display: none; }

/* читать по теме: карточки сайта (.cours-item из «Образовательных материалов»), тут только сетка и отступы */
.route-block { margin: var(--r-mb) 0; }
.route-block > h2 { font-size: var(--r-h2); line-height: 1.2; margin-bottom: var(--r-pad-s); }
.route-readcards .cours-items { grid-template-columns: repeat(var(--n, 3), 1fr); }
.route-readcards .cours-item { display: flex; flex-direction: column; min-height: 11em; transition: background-color .3s; }
.route-readcards .cours-item ul li { transition: color .3s, border-color .3s; }
/* наведение: карточка становится тёмной, как подвал (#2f3540 = --orange темы), текст белый (Павлон, 30.09) */
@media (hover: hover) {
  .route-readcards .cours-item:hover { background-color: var(--orange); }
  .route-readcards .cours-item:hover p { color: #fff; }
  .route-readcards .cours-item:hover ul li { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
}
@media (min-width: 768px) and (max-width: 1100px) {
  .route-readcards .cours-items { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 320px) and (max-width: 767px) {
  .route-readcards .cours-items { grid-template-columns: 1fr; }
  .route-readcards .cours-item { min-height: 0; }
  /* в теме заголовок карточки на телефоне 22px (--t22) — для узкой колонки крупно (Павлон, 30.09) */
  .route-readcards .cours-item p { font-size: var(--t18); line-height: 1.3; }
}


/* частые вопросы: аккордеон сайта справа, на белой карточке — серые строки */
.route-faq .accordion-container { display: block; }
.route-faq .accordion { background-color: #f6f9fc; }
.route-faq .accordion__intro p { font-size: var(--r-text); color: var(--black); transition: color .3s; }
.route-faq .accordion__intro-btn { transition: background-color .3s; }
/* ответ на ступень мельче вопроса (Павлон, 30.09) */
.route-faq .accordion__content-text { font-size: calc(var(--r-text) * 0.9); line-height: 1.6; color: var(--r-soft); }
/* тема ограничивает абзац ответа 70% ширины — в нашей колонке это давало узкий столбик (Павлон, 30.09) */
.route-faq .accordion__content-text p { margin: 0 0 0.8em; max-width: none; }
.route-faq .accordion__content-text p:last-child { margin-bottom: 0; }
.route-faq .accordion__intro { cursor: pointer; }

/* запись — зеркало первого экрана: слева текст и лица команды, справа вкладка с ценой и кнопками */
.route-cta {
  --r-inset: 9px;
  margin-top: var(--r-mb);
  padding: var(--r-inset);
  display: grid;
  /* правая вкладка — на той же линии, что картинка первого экрана и правая колонка разделов */
  grid-template-columns: calc(2 * var(--r-pad) - 2 * var(--r-inset) + (100% + 2 * var(--r-inset) - 3 * var(--r-pad)) * 5 / 12) 1fr;
  gap: var(--r-inset);
}
.route-cta__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: calc(var(--r-pad) - var(--r-inset));
}
.route-cta h2 { color: #fff; margin: 0 0 0.5em; font-size: var(--r-h1); font-weight: 400; line-height: 1.15; }
.route-cta__text { margin: 0 0 var(--r-pad); max-width: 28em; font-size: var(--r-text); line-height: 1.55; color: rgba(255, 255, 255, 0.78); }
/* подпись под лицами — кеглем метки «Запись» (Павлон, 30.09) */
.route-cta__team { margin-top: auto; display: flex; align-items: center; gap: 16px; color: #fff; font-size: var(--r-small); transition: color .3s; }
.route-cta__faces { display: flex; }
.route-cta__faces i {
  display: block;
  width: 56px; height: 56px;
  margin-left: -14px;
  border-radius: 50%;
  border: 3px solid var(--orange);
  background: #444a53;
  overflow: hidden;
}
/* фото врачей ростовые — приближаем к лицу */
.route-cta__faces img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform: scale(2.3); transform-origin: 50% 9%; }
.route-cta__faces i:first-child { margin-left: 0; }
.route-cta__side {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: calc(var(--r-pad) - var(--r-inset));
  border-radius: max(calc(var(--r-rad) - var(--r-inset)), 8px);
  background-color: #3a404c;
}
.route-cta__price-label { margin: 0 0 0.4em; font-size: var(--r-text); color: rgba(255, 255, 255, 0.7); }
.route-cta__price { margin: 0 0 var(--r-pad-s); font-size: calc(var(--r-h1) * 1.2); line-height: 1; color: #fff; }
/* цена сверху, кнопки и строка с часами/адресом прижаты к низу вкладки */
.route-cta__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: auto; }
.route-cta__btns .btn { width: 100%; padding: 0 16px; }
.route-cta__meta { list-style: none; margin: var(--r-pad-s) 0 0; padding: var(--r-pad-s) 0 0; border-top: 1px solid rgba(255, 255, 255, 0.12); display: flex; flex-wrap: wrap; gap: 8px 32px; font-size: var(--r-small); color: rgba(255, 255, 255, 0.7); }
.route-cta__meta a { color: rgba(255, 255, 255, 0.7); transition: color .3s; }
@media (min-width: 768px) and (max-width: 1820px) {
  .route-cta { --r-inset: max(0.625vw, 6px); }
  .route-cta__faces i { width: var(--px56); height: var(--px56); margin-left: calc(var(--px14) * -1); border-width: max(0.16vw, 2px); }
  .route-cta__team { gap: var(--px16); }
}
@media (min-width: 320px) and (max-width: 767px) {
  .route-cta { --r-inset: 8px; grid-template-columns: 1fr; }
  .route-cta__faces i { width: var(--t40); height: var(--t40); margin-left: calc(var(--t12) * -1); border-width: 2px; }
  .route-cta__btns { grid-template-columns: 1fr; }
  .route-cta__text { margin-bottom: var(--r-pad-s); }
}
@media (hover: hover) {
  .route-cta__team:hover,
  .route-cta__meta a:hover { color: var(--r-lilac); }
}

/* ── наведение: только на то, что нажимается (статичные плитки не подсвечиваем — это обещание клика) ── */
@media (hover: hover) {
  .route-text a:hover,
  .route-phone:hover { color: var(--r-lilac); }
  .route-faq .accordion__intro:hover p { color: var(--r-lilac); }
  .route-faq .accordion__intro:hover .accordion__intro-btn { background-color: var(--r-lilac); }
}