/* ============ Шапка (Figma 66:7 / 68:7) ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--haze);
}
.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-block: 18px 19px;
}
.brand { display: block; flex-shrink: 0; }
.brand img { width: 172px; height: auto; }

/* На десктопе панель «растворяется» — ссылки и правый блок становятся детьми .nav
   и раскладываются space-between, как в макете (лого · меню по центру · телефон+кнопка) */
.nav__panel { display: contents; }
.nav__links { display: flex; align-items: center; gap: 30px; min-width: 0; }
.nav__links a {
  font-size: 14.5px;
  line-height: normal;
  color: var(--rose);
  white-space: nowrap;
  transition: color .2s;
}
.nav__links a:hover { color: var(--rose-dark); text-decoration: underline; text-underline-offset: 4px; }
/* Текущий раздел (Figma 67:17): Medium, тёмная роза; ставит main.js по совпадению адреса */
.nav__links a[aria-current="page"] { font-weight: 500; color: var(--rose-dark); }
.nav__cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.nav__phone { font-weight: 500; font-size: 15px; line-height: normal; color: var(--ink); white-space: nowrap; }
.nav__phone:hover { color: var(--rose); }

.nav__mobile { display: none; }

/* 1181–1340: с пунктом «Контакты» полная шапка просит ~1330 — ужимаем отступы, лого и кегль,
   иначе на 1181–1270 кнопка «Записаться» уезжает за край и появляется горизонтальный скролл */
@media (min-width: 1181px) and (max-width: 1340px) {
  .nav { gap: 16px; }
  .brand img { width: 144px; }
  .nav__links { gap: 16px; }
  .nav__links a { font-size: 14px; }
  .nav__cta { gap: 12px; }
}

/* Бургер — до 1180: полная шапка влезает только с ~1160 (на 901–1125 страница уезжала вбок) */
@media (max-width: 1180px) {
  .nav { padding-block: 14px 15px; }
  .brand img { width: 140px; }

  .nav__mobile { display: flex; align-items: center; gap: 14px; }
  .nav__phoneIcon { display: block; padding: 4px; margin: -4px; }
  .nav__phoneIcon img { width: 22px; height: 22px; }
  .nav__burger { display: block; padding: 4px; margin: -4px; }
  .nav__burger img { width: 24px; height: 24px; }

  /* Выпадающая панель меню */
  .nav__panel {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    gap: 16px;
    padding: 4px var(--gutter) 20px;
    background: #fff;
    border-bottom: 1px solid var(--haze);
    box-shadow: 0 24px 40px -28px rgba(58, 52, 56, 0.35);
  }
  .nav__panel.is-open { display: flex; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a {
    display: block;
    padding: 12px 0;
    font-size: 16px;
    border-bottom: 1px solid var(--haze);
    white-space: normal;
  }
  .nav__cta { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 4px; }
  .nav__phone { font-size: 16px; text-align: center; }
  .nav__cta .btn { width: 100%; padding: 14px 20px; font-size: 15px; }
}

/* ============ Выпадающее меню (вариант C — с иконками, выбор владельца 11-10-2026) ============
   Раздел = ссылка + стрелка .nav__toggle + выпадашка .nav__sub. Десктоп: наведение (CSS) или стрелка
   (is-open ставит main.js — для тача и клавиатуры). Бургер: аккордеон по стрелке. Иконки — те же, что в .route. */
.nav__toggle { display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--rose); cursor: pointer; }
.nav__toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.nav__item--sub.is-open > .nav__toggle svg { transform: rotate(180deg); }
.nav__sub a { white-space: normal; }
.nav__sub a:hover { text-decoration: none; }
.ico__ic { flex-shrink: 0; color: var(--rose); --ic-fill: #fff; stroke-width: 2.4; }

@media (min-width: 1181px) {
  /* пункт тянется на всю высоту шапки — мышь не «проваливается» между пунктом и выпадашкой */
  .nav__panel > nav { align-self: stretch; display: flex; }
  .nav__links { align-items: stretch; }
  .nav__links > li { display: flex; align-items: center; }
  .nav__item--sub { position: relative; gap: 3px; }
  .nav__toggle { width: 18px; height: 24px; margin-right: -6px; }
  .nav__item--sub:hover > .nav__toggle svg { transform: rotate(180deg); }
  .nav__sub {
    position: absolute; z-index: 60; top: calc(100% + 20px); left: -22px;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .16s, transform .16s, visibility 0s .16s;
  }
  .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22px; }
  .nav__item--sub:hover > .nav__sub,
  .nav__item--sub.is-open > .nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity .16s, transform .16s; }

  .ico {
    padding: 12px; background: #fff; border: 1px solid var(--haze); border-radius: var(--r-lg);
    box-shadow: 0 24px 48px -26px rgba(58, 52, 56, .32);
  }
  .ico__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 360px; gap: 2px; }
  .ico--5 .ico__list { grid-template-columns: repeat(2, 330px); column-gap: 6px; }
  .nav__links .ico__list a { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 10px; transition: background .15s; }
  .nav__links .ico__list a:hover,
  .nav__links .ico__list a[aria-current="page"] { background: var(--blush); --ic-fill: var(--blush); }
  .ico__ic { width: 56px; height: 42px; }
  .ico__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
  .ico__t { font-size: 15.5px; font-weight: 500; line-height: 1.3; color: var(--ink); }
  .ico__list a:hover .ico__t,
  .ico__list a[aria-current="page"] .ico__t { color: var(--rose-dark); }
  .ico__d { font-size: 13px; line-height: 1.4; color: var(--ink-mute); }
  .nav__links .ico__all { display: block; margin: 8px 2px 0; padding: 14px 12px 4px; border-top: 1px solid var(--haze); font-size: 14.5px; font-weight: 500; color: var(--rose); }
}

@media (max-width: 1180px) {
  .nav__panel { max-height: calc(100dvh - 70px); overflow-y: auto; }
  .nav__item--sub { display: grid; grid-template-columns: minmax(0, 1fr) 48px; }
  .nav__toggle { justify-items: end; border-bottom: 1px solid var(--haze); }
  .nav__toggle svg { width: 15px; height: 15px; }
  .nav__sub { grid-column: 1 / -1; display: none; }
  .nav__item--sub.is-open > .nav__sub { display: block; }
  .ico__list { list-style: none; margin: 0; padding: 0; }
  .nav__links .ico__list a { display: flex; align-items: center; gap: 12px; padding: 9px 0 9px 6px; font-size: 15px; color: var(--ink-soft); }
  .nav__links .ico__list a[aria-current="page"] { color: var(--rose-dark); font-weight: 500; }
  .ico__ic { width: 40px; height: 30px; stroke-width: 2.2; }
  .ico__d, .nav__links .ico__all { display: none; }
}

/* ============ CTA-блок записи (Figma 66:241 / 68:95; форма заменена кнопкой 11-10-2026) ============ */
.cta { padding-block: 0 72px; }
.cta__card {
  background: var(--pink);
  border-radius: var(--r-lg);
  padding: 48px 56px;
  display: flex;
  align-items: center;
  gap: 56px;
}
.cta__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cta__title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 28px;
  line-height: normal;
  color: var(--ink);
}
.cta__lead { max-width: 428px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* Запись — кнопкой на страницу врача в ФНКЦ ФМБА (своей формы нет) + пояснение, куда уведёт */
.book { width: 400px; flex-shrink: 0; display: flex; flex-direction: column; gap: 12px; }
.book__btn { width: 100%; gap: 8px; padding: 15px; font-size: 15px; }
.book__btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.book__note { font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
/* Вопрос врачу — три мессенджера клиники в ряд под записью */
.ask { margin-top: 8px; padding-top: 20px; border-top: 1px solid rgba(58, 52, 56, 0.14); display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 120px; }
.ask__label { font-size: 15px; font-weight: 500; color: var(--ink); }
.ask__list { display: flex; gap: 8px; }
.ask__btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  border: 1.5px solid var(--rose);
  border-radius: var(--r-sm);
  font-size: 14px;
  color: var(--rose);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.ask__btn:hover { background: rgba(138, 74, 94, 0.06); }
.ask__btn svg { width: 17px; height: 17px; flex-shrink: 0; }
@media (max-width: 420px) {
  /* в ряд по три не влезает «WhatsApp» с иконкой — иконка над подписью, плитками */
  .ask__btn { flex-direction: column; gap: 6px; padding: 12px 4px 10px; font-size: 13px; }
  .ask__btn svg { width: 20px; height: 20px; }
}

@media (max-width: 1024px) {
  .cta__card { padding: 40px; gap: 32px; }
  .book { width: 360px; }
}
@media (max-width: 900px) {
  .cta__card { flex-direction: column; align-items: stretch; gap: 24px; padding: 32px 24px; }
  .book { width: 100%; }
}
@media (max-width: 768px) {
  .cta { padding-block: 32px 36px; }
  .cta__card { background: none; border-radius: 0; padding: 0; gap: 12px; }
  .cta__title { font-size: 22px; }
  .cta__lead { font-size: 14px; }
}

/* ---- Полоса CTA внутренних страниц (Figma 67:140): роза, Prata 26 белым, кнопка записи справа ---- */
.cta__card--band { background: var(--rose); padding: 44px 56px; gap: 48px; }
.cta__card--band .cta__title { font-size: 26px; color: #fff; }
.cta__card--band .cta__lead { max-width: 541px; color: var(--haze); }
.cta__card--band .book__btn { background: #fff; border-color: #fff; color: var(--rose); }
.cta__card--band .book__btn:hover { background: var(--blush); border-color: var(--blush); }
.cta__card--band .book__note { color: var(--haze); }
.cta__card--band .ask { border-top-color: rgba(255, 255, 255, 0.24); }
.cta__card--band .ask__label { color: #fff; }
.cta__card--band .ask__btn { border-color: rgba(255, 255, 255, 0.7); color: #fff; }
.cta__card--band .ask__btn:hover { background: rgba(255, 255, 255, 0.12); border-color: #fff; }
@media (max-width: 1024px) {
  .cta__card--band { padding: 40px; gap: 32px; }
}
@media (max-width: 900px) {
  .cta__card--band { padding: 32px 24px; }
}
@media (max-width: 768px) {
  /* мобильного макета нет — полосу оставляем, без «растворения» как у розовой карточки главной */
  .cta__card--band { background: var(--rose); border-radius: var(--r-md); padding: 24px 20px; gap: 16px; }
  .cta__card--band .cta__title { font-size: 22px; }
}

/* ============ Подвал (Figma 66:231 / 68:109) ============ */
.footer { border-top: 1px solid var(--haze); padding-block: 37px 36px; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.footer__brand { display: flex; align-items: center; gap: 14px; min-width: 0; }
.footer__brand img { width: 130px; height: auto; flex-shrink: 0; }
.footer__addr { font-size: 13px; line-height: normal; color: var(--ink-soft); }
.footer__disc {
  max-width: 462px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-mute);
  text-align: right;
}
@media (max-width: 768px) {
  .footer { padding-block: 21px 20px; }
  .footer__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .footer__brand img { display: none; }
  .footer__addr { font-size: 12.5px; }
  .footer__disc { max-width: none; font-size: 11px; text-align: left; }
}

/* ============ Путь по шагам и карточка услуги (UI-кит 71:70; Figma 66:79 / 66:105) ============
   .route — розовая плашка с иконками-схемами и стрелками между шагами (замена карточек .step с полосой
   слева — выбор владельца 11-10-2026); колонок столько, сколько шагов (3 или 4), ≤1024 — столбиком.
   Иконки — inline SVG 96×72, контур currentColor, заливка var(--ic-fill). Общие для главной и внутренних страниц. */
.route {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  background: var(--pink);
  border-radius: var(--r-lg);
}
.route__step { position: relative; padding: 34px clamp(28px, 2.8vw, 40px) 38px; display: flex; flex-direction: column; gap: 10px; min-width: 0; box-sizing: border-box; }
.route__step + .route__step { border-left: 1px solid rgba(58, 52, 56, .25); }
.route__step + .route__step::before {
  content: "→"; position: absolute; left: 0; top: 50%; transform: translate(-50%, -50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bg); color: var(--rose); font-size: 17px;
  display: grid; place-items: center;
}
.route__ic { display: block; width: 116px; height: auto; margin: 0 0 12px -8px; color: var(--rose); --ic-fill: #fff; }
.route__label { font-weight: 600; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--rose); }
.route__title { font-family: var(--font-serif); font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--ink); }
.route__text { font-size: 15px; line-height: 1.55; color: var(--ink); }
@media (max-width: 1024px) {
  .route { grid-auto-flow: row; }
  .route__step + .route__step { border-left: 0; border-top: 1px solid rgba(58, 52, 56, .25); }
  .route__step + .route__step::before { content: "↓"; left: 50%; top: 0; }
}

.svc {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--haze);
  border-radius: var(--r-md);
  padding: 27px;
  color: inherit;
  position: relative;
  overflow: hidden; /* фото справа режется по скруглению карточки */
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.svc:hover {
  border-color: var(--pink);
  box-shadow: 0 16px 34px -22px rgba(138, 74, 94, 0.4);
  transform: translateY(-2px);
}
.svc__icon { width: 28px; height: 28px; }
.svc__title { font-weight: 500; font-size: 18px; line-height: normal; color: var(--ink); }
.svc__text { font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.svc__more { margin-top: auto; font-size: 14px; line-height: normal; color: var(--rose); }
.svc:hover .svc__more { text-decoration: underline; text-underline-offset: 3px; }
.svc__chev {
  display: none;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background: currentColor;
  -webkit-mask: url('../assets/icons/chevron.svg') center / contain no-repeat;
          mask: url('../assets/icons/chevron.svg') center / contain no-repeat;
  color: var(--rose);
}
/* Акцентная карточка «Реконструкция груди» */
.svc--accent { background: var(--rose); border-color: var(--rose); padding: 26px; }
.svc--accent:hover { border-color: var(--pink); background: var(--rose-dark); }
.svc--accent .svc__title, .svc--accent .svc__more { color: #fff; }
.svc--accent .svc__text { color: var(--haze); }
.svc--accent .svc__chev { color: #fff; }

/* Фото услуги: прижато к правому краю на всю высоту, к тексту растворяется маской */
.svc--img { padding-right: 172px; } /* 150 фото + 22 до текста */
.svc__img {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 150px;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 36px);
          mask-image: linear-gradient(to right, transparent, #000 36px);
  transition: transform .4s ease;
}
.svc:hover .svc__img { transform: scale(1.03); }

/* Мобильный (68:34 / 68:64): шаг — иконка слева, текст справа; карточка услуги сворачивается в строку «название · шеврон» */
@media (max-width: 768px) {
  .route__step { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-content: start; padding: 24px 20px 26px; }
  .route__step + .route__step::before { width: 34px; height: 34px; font-size: 15px; }
  .route__ic { grid-column: 1; grid-row: 1 / span 3; width: 76px; margin: 0 0 0 -4px; }
  .route__label { grid-column: 2; font-size: 12px; }
  .route__title { grid-column: 2; font-size: 20px; }
  .route__text { grid-column: 2; font-size: 14px; line-height: 1.5; }
  .svc {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 17px 19px;
    border-radius: 10px;
  }
  .svc:hover { transform: none; }
  .svc--accent { padding: 16px 18px; }
  .svc--img { padding-right: 19px; }
  .svc--accent.svc--img { padding-right: 18px; }
  .svc__icon, .svc__text, .svc__more, .svc__img { display: none; }
  .svc__title { font-size: 15px; }
  .svc__chev { display: block; }
}

/* ---- Карточка статьи блога (hcard): хаб блога, «Читайте также», «Читайте в блоге» на посадочных ---- */
.grp__list { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.grp__list--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hcard { min-width: 0; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: center; padding: 14px; border: 1px solid var(--haze); border-radius: var(--r-lg); background: #fff; color: inherit; transition: border-color .2s, box-shadow .2s; }
.hcard:hover { border-color: var(--pink); box-shadow: 0 16px 34px -22px rgba(138, 74, 94, .4); }
.hcard__img { display: block; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: var(--haze); }
.hcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.hcard:hover .hcard__img img { transform: scale(1.03); }
.hcard__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding-right: 12px; }
.hcard__t { font-family: var(--font-serif); font-size: 21px; line-height: 1.3; color: var(--ink); transition: color .2s; }
.hcard:hover .hcard__t { color: var(--rose); }
.hcard__x { font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }
.hcard__m { font-size: 13px; color: var(--ink-mute); }
@media (max-width: 900px) {
  .grp__list--2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hcard { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 10px; align-items: start; border-radius: var(--r-md); }
  .hcard__img { aspect-ratio: 1; border-radius: 8px; }
  .hcard__body { padding: 2px 4px 2px 0; gap: 6px; }
  .hcard__t { font-size: 17px; }
  .hcard__x { display: none; }
}