/*
 * Страницы услуг: баннер, плашки, «фото + текст», цены, врачи, вопросы, запись,
 * общий список направлений, видео-кейс и сравнение «до/после».
 *
 * Токены только из main.css (--tz-*). Верстаем сразу в двух форматах:
 * десктоп 1440/1200 и телефон 390 (проверка на 360) — без горизонтальной прокрутки.
 */

/* --- Общие мелочи ----------------------------------------------------------- */

.tz-rule {
  display: block;
  width: 64px;
  height: 3px;
  margin: 0 0 var(--tz-space-4, 16px);
  border-radius: 999px;
  background: var(--tz-color-primary);
}

.tz-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--tz-space-3, 12px);
  padding: 6px 14px;
  border-radius: var(--tz-radius-pill, 999px);
  background: var(--tz-color-tint, #e8edfb);
  color: var(--tz-color-primary);
  font-size: 14px;
  font-weight: 600;
}

.tz-btn--sm { padding: 10px 18px; font-size: 15px; min-height: 44px; }

.tz-draft-note {
  margin: var(--tz-space-5, 24px) 0 0;
  padding: var(--tz-space-4, 16px) var(--tz-space-5, 24px);
  border-radius: var(--tz-radius-md, 16px);
  border-inline-start: 4px solid var(--tz-color-brand-red, #d94373);
  background: #fff6f9;
  font-size: 16px;
}

/* --- Баннер услуги ---------------------------------------------------------- */

.tz-service-hero { padding-block: var(--tz-space-6, 32px) 0; }

.tz-service-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--tz-space-6, 32px);
  align-items: center;
  padding: var(--tz-space-8, 64px) var(--tz-space-7, 48px);
  border-radius: var(--tz-radius-lg, 24px);
  background: linear-gradient(120deg, var(--tz-color-tint, #e8edfb) 0%, var(--tz-color-card, #f2f4ff) 60%, #fff 100%);
}

.tz-service-hero--plain .tz-service-hero__inner { grid-template-columns: minmax(0, 1fr); }

.tz-service-hero__title {
  font-family: var(--tz-font-serif, serif);
  font-size: clamp(30px, 4.2vw, 52px);
  text-transform: uppercase;
  line-height: 1.05;
  margin: 0 0 var(--tz-space-5, 24px);
}

.tz-service-hero__lead {
  margin: 0 0 var(--tz-space-6, 32px);
  padding-inline-start: var(--tz-space-4, 16px);
  border-inline-start: 3px solid var(--tz-color-primary);
  font-size: clamp(16px, 1.5vw, 19px);
  max-width: 52ch;
}

.tz-service-hero__actions { display: flex; flex-wrap: wrap; gap: var(--tz-space-3, 12px); }

.tz-service-hero__media { min-width: 0; }

.tz-service-hero__media :where(img, picture) {
  display: block;
  width: 100%;
  height: auto;
  max-height: 420px;
  object-fit: cover;
  border-radius: var(--tz-radius-lg, 24px);
}

.tz-service-hero--poster .tz-service-hero__media :where(img, picture) {
  width: auto;
  max-width: 100%;
  max-height: 460px;
  margin-inline: auto;
  object-fit: contain;
}

/* --- Тело страницы: плашки и «фото + текст» --------------------------------- */

.tz-prose--wide { max-width: none; }
.tz-service__body :where(h2) { margin-top: var(--tz-space-6, 32px); }
.tz-service__body :where(h2:first-child) { margin-top: 0; }

/* Ряд плашек-тезисов: «преимущества» / «кому подходит» / «что проводится». */
.tz-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--tz-space-4, 16px);
  margin: var(--tz-space-6, 32px) 0;
  padding: 0;
  list-style: none;
}

.tz-perks > li,
.tz-perk {
  margin: 0;
  padding: var(--tz-space-5, 24px);
  border-radius: var(--tz-radius-md, 16px);
  background: var(--tz-color-card, #f2f4ff);
}

.tz-perks > li::before,
.tz-perk::before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  margin-bottom: var(--tz-space-4, 16px);
  border-radius: 50%;
  background: var(--tz-color-primary);
}

.tz-perks > li > strong,
.tz-perk__title { display: block; font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.tz-perks > li { font-size: 15px; color: var(--tz-color-muted, #92a1a7); }
.tz-perks > li > strong { color: var(--tz-color-ink); }
.tz-perk__text { display: block; color: var(--tz-color-muted, #92a1a7); font-size: 15px; }

/*
 * «Фото + текст»: небольшая иллюстрация слева, описание справа (правка №25).
 * Раньше колонки делились пополам, а вертикальные снимки клиники (до 2778 px
 * высотой) разворачивались во весь рост и уносили цены, врачей и запись
 * на третий экран. Теперь фото — узкая колонка с потолком по высоте, а текст
 * занимает остальное: блок стал в разы ниже, продающие блоки поднялись выше.
 *
 * Селектор с `.wp-block-columns` — не украшение: редактор блоков вешает на этот
 * же узел свою раскладку `body .is-layout-flex { display: flex }`, и одного
 * класса темы не хватает, чтобы её перебить.
 */
.tz-photo-text,
.tz-photo-text.wp-block-columns {
  display: grid;
  grid-template-columns: minmax(0, var(--tz-photo-text-media, 300px)) minmax(0, 1fr);
  gap: var(--tz-space-6, 32px);
  align-items: start;
  margin: var(--tz-space-6, 32px) 0;
}

.tz-photo-text > .wp-block-column { min-width: 0; flex-basis: auto !important; }

.tz-photo-text :where(img),
.tz-photo-text__media :where(img, picture) {
  display: block;
  width: 100%;
  height: auto;
  max-height: var(--tz-photo-text-max, 320px);
  object-fit: cover;
  border-radius: var(--tz-radius-md, 16px);
}

.tz-photo-text > .wp-block-column > :first-child { margin-top: 0; }
.tz-photo-text :where(h2, h3) { margin-top: var(--tz-space-5, 24px); font-size: clamp(20px, 2vw, 26px); }
.tz-photo-text :where(h2, h3):first-child { margin-top: 0; }
.tz-photo-text :where(p) { margin-block: var(--tz-space-3, 12px); }
.tz-photo-text ul { padding-inline-start: 18px; }
.tz-photo-text li::marker { color: var(--tz-color-primary); }

.tz-photo { margin: 0; }
.tz-photo__img, .tz-photo :where(img) { display: block; width: 100%; height: auto; border-radius: var(--tz-radius-md, 16px); }
.tz-photo__caption { margin-top: var(--tz-space-3, 12px); font-size: 14px; color: var(--tz-color-muted, #92a1a7); }

/*
 * Афиша (R18) — картинка с крупной надписью. Кадрировать её нельзя: у людей
 * срезает головы, а надпись обрезается снизу. Показываем целиком и по центру,
 * подгоняя по высоте, а не по ширине. Признак афиши ставит `tz_photo_is_poster()`.
 */
.tz-photo--poster .tz-photo__img,
.tz-photo--poster :where(img) {
  width: auto;
  max-width: 100%;
  max-height: 420px;
  margin-inline: auto;
  object-fit: contain;
}

/* Крупная фраза-вывод по центру. */
.tz-pullquote {
  margin: var(--tz-space-7, 48px) 0;
  padding: var(--tz-space-6, 32px);
  border-radius: var(--tz-radius-lg, 24px);
  background: var(--tz-color-card-alt, #f2f0fb);
  font-family: var(--tz-font-serif, serif);
  font-size: clamp(20px, 2.4vw, 30px);
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
}

/* --- Цены ------------------------------------------------------------------- */

.tz-service-prices__inner {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--tz-space-7, 48px);
  align-items: start;
}

.tz-service-prices__head h2 { margin-bottom: var(--tz-space-4, 16px); }
.tz-service-prices__note { margin: var(--tz-space-4, 16px) 0 0; font-weight: 600; }

.tz-price-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tz-space-3, 12px); }

.tz-price-list__item {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--tz-space-4, 16px);
  align-items: baseline;
  justify-content: space-between;
  padding: var(--tz-space-4, 16px) var(--tz-space-5, 24px);
  border-radius: var(--tz-radius-md, 16px);
  background: var(--tz-color-card, #f2f4ff);
}

.tz-price-list__title { min-width: 0; font-weight: 500; }
.tz-price-list__title small { display: block; font-weight: 400; font-size: 14px; }

.tz-price-list__price {
  white-space: nowrap;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 700;
  color: var(--tz-color-primary);
}

/* --- Вопросы и ответы ------------------------------------------------------- */

.tz-faq { display: grid; gap: var(--tz-space-3, 12px); margin-top: var(--tz-space-6, 32px); }

.tz-faq__item {
  border-radius: var(--tz-radius-md, 16px);
  background: var(--tz-color-card, #f2f4ff);
  padding: var(--tz-space-4, 16px) var(--tz-space-5, 24px);
}

.tz-faq__q {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  min-height: 44px;
  display: flex;
  align-items: center;
  list-style: none;
}

.tz-faq__q::-webkit-details-marker { display: none; }
.tz-faq__q::after { content: "+"; margin-inline-start: auto; color: var(--tz-color-primary); font-size: 24px; line-height: 1; }
.tz-faq__item[open] .tz-faq__q::after { content: "–"; }
.tz-faq__a :where(p) { font-size: 16px; }
.tz-faq__a :where(p:last-child) { margin-bottom: 0; }

/* --- Блок записи ------------------------------------------------------------ */

.tz-service-cta__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tz-space-6, 32px);
  align-items: center;
  justify-content: space-between;
  padding: var(--tz-space-7, 48px);
  border-radius: var(--tz-radius-lg, 24px);
  background: linear-gradient(120deg, var(--tz-color-card, #f2f4ff), var(--tz-color-tint, #e8edfb));
}

.tz-service-cta__title { margin: 0 0 var(--tz-space-3, 12px); }
.tz-service-cta__script {
  display: block;
  color: var(--tz-color-primary);
  text-transform: lowercase;
  font-style: italic;
}

.tz-service-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tz-space-5, 24px); }

/* --- Общий список направлений ----------------------------------------------- */

.tz-services__filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tz-space-3, 12px);
  margin-bottom: var(--tz-space-6, 32px);
}

.tz-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--tz-radius-pill, 999px);
  background: var(--tz-color-card, #f2f4ff);
  color: inherit;
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.tz-chip.is-active { background: var(--tz-color-primary); color: var(--tz-color-on-primary, #fff); }
.tz-chip__count { font-size: 13px; opacity: .7; }

.tz-services__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--tz-space-4, 16px);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.tz-service-card { position: relative; min-width: 0; }

.tz-service-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--tz-space-4, 16px);
  height: 100%;
  padding: var(--tz-space-5, 24px);
  border-radius: var(--tz-radius-lg, 24px);
  background: var(--tz-color-card, #f2f4ff);
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.tz-service-card__link:hover { background: var(--tz-color-tint, #e8edfb); color: inherit; }

.tz-service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--tz-color-primary);
  color: var(--tz-color-on-primary, #fff);
}

.tz-service-card__icon .tz-icon { width: 24px; height: 24px; }

.tz-service-card__body { display: block; }
.tz-service-card__title { display: block; font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.tz-service-card__text { display: block; color: var(--tz-color-muted, #92a1a7); font-size: 15px; }

.tz-service-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px var(--tz-space-4, 16px);
  align-items: baseline;
  justify-content: space-between;
  margin-top: auto;
}

.tz-service-card__price { font-weight: 700; color: var(--tz-color-primary); }

/*
 * Услуга без цены: «Уточнить у администратора» на месте суммы (правка №18).
 * Стиль свой, а не из home.css: страница `/uslugi/` стилей главной не грузит,
 * и зависеть от них не должна. Кегль подобран так, чтобы надпись стояла
 * в одну строку и на узкой карточке; `--tz-color-primary-text` — тот же
 * сиреневый, но с контрастом для мелкого текста.
 */
.tz-service-card__price.tz-service-card__ask {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--tz-color-primary-text, #6E58CC);
}
.tz-service-card__more { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; }

.tz-service-card__badge {
  position: absolute;
  top: var(--tz-space-4, 16px);
  inset-inline-end: var(--tz-space-4, 16px);
  padding: 4px 12px;
  border-radius: var(--tz-radius-pill, 999px);
  background: var(--tz-color-primary);
  color: var(--tz-color-on-primary, #fff);
  font-size: 13px;
}

.tz-service-card[hidden] { display: none; }
.tz-services__empty { margin-top: var(--tz-space-5, 24px); color: var(--tz-color-muted, #92a1a7); }

/* --- Видео-кейс ------------------------------------------------------------- */

.tz-video { margin: var(--tz-space-7, 48px) 0; }

.tz-video__frame {
  position: relative;
  max-width: 420px;
  margin-inline: auto;
  border-radius: var(--tz-radius-lg, 24px);
  overflow: hidden;
  background: var(--tz-color-card, #f2f4ff);
}

.tz-video__el { display: block; width: 100%; height: auto; }

.tz-video__sound {
  position: absolute;
  inset-block-end: 12px;
  inset-inline-end: 12px;
  min-height: 44px;
  min-width: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--tz-radius-pill, 999px);
  background: rgba(0, 1, 24, .62);
  color: #fff;
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}

.tz-video__caption {
  margin-top: var(--tz-space-3, 12px);
  text-align: center;
  color: var(--tz-color-muted, #92a1a7);
  font-size: 15px;
}

/* --- «До и после» ----------------------------------------------------------- */

.tz-ba { margin: var(--tz-space-7, 48px) 0; }
.tz-ba__head h2 { margin-bottom: var(--tz-space-3, 12px); }

.tz-ba__list {
  list-style: none;
  margin: var(--tz-space-6, 32px) 0 0;
  padding: 0;
  display: grid;
  gap: var(--tz-space-5, 24px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/*
 * Кейсов пять. В автоматической сетке они встают 4 + 1, и последний читается
 * как остаток; три в ряд дают ровные 3 + 2 и кейс покрупнее — на снимке
 * гемангиомы важно разглядеть кожу, а не угадывать.
 */
@media (min-width: 901px) {
  .tz-ba__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tz-ba__item { min-width: 0; }

/*
 * Рамка берёт соотношение сторон у самого снимка (`--tz-ba-ratio` ставит
 * разметка): кейсы гемангиом вертикальные, в общей рамке 4:3 от них осталась
 * бы полоска. touch-action: pan-y — палец по горизонтали двигает ползунок,
 * по вертикали страница прокручивается как обычно.
 */
.tz-ba__frame {
  position: relative;
  aspect-ratio: var(--tz-ba-ratio, 4 / 3);
  max-width: 100%;
  border-radius: var(--tz-radius-md, 16px);
  overflow: hidden;
  background: var(--tz-color-card, #f2f4ff);
  touch-action: pan-y;
  cursor: ew-resize;
}

/* Видно, что блок в фокусе: сам range прозрачный и растянут на всю рамку. */
.tz-ba__frame:focus-within {
  outline: 3px solid var(--tz-color-primary);
  outline-offset: 3px;
}

.tz-ba__layer { position: absolute; inset: 0; }
/* Картинка из раскладки приходит в <picture> — ему тоже нужна высота слоя,
   иначе img с height: 100% не от чего считать. */
.tz-ba__layer :where(picture) { display: block; height: 100%; }
.tz-ba__layer img { width: 100%; height: 100%; object-fit: cover; }

/* Слой «до» обрезается ползунком: --tz-ba-pos задаёт скрипт, по умолчанию половина. */
.tz-ba__layer--before { clip-path: inset(0 calc(100% - var(--tz-ba-pos, 50%)) 0 0); }

.tz-ba__tag {
  position: absolute;
  top: 10px;
  padding: 4px 12px;
  border-radius: var(--tz-radius-pill, 999px);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.tz-ba__tag--before { inset-inline-start: 10px; background: rgba(0, 1, 24, .7); }
.tz-ba__tag--after { inset-inline-end: 10px; background: var(--tz-color-primary); }

.tz-ba__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--tz-ba-pos, 50%);
  width: 2px;
  margin-inline-start: -1px;
  background: #fff;
  pointer-events: none;
}

/* Крупная круглая ручка со стрелками; при захвате увеличивается (правка №23). */
.tz-ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%) scale(var(--tz-ba-grab, 1));
  transform-origin: center;
  border-radius: 50%;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23816CD7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 7-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center / 26px no-repeat;
  box-shadow: 0 2px 10px rgba(0, 1, 24, .25);
  transition: transform .12s ease-out;
}

.tz-ba__frame.is-grabbed { --tz-ba-grab: 1.18; cursor: grabbing; }
.tz-ba__frame.is-grabbed .tz-ba__handle::after { box-shadow: 0 4px 18px rgba(0, 1, 24, .35); }

@media (prefers-reduced-motion: reduce) {
  .tz-ba__handle::after { transition: none; }
}

/* Ползунок — обычный range: работает мышью, пальцем и с клавиатуры. */
.tz-ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.tz-ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100%; }
.tz-ba__range::-moz-range-thumb { width: 44px; height: 100%; border: 0; background: transparent; }
/* Обводку в фокусе рисует рамка (`:focus-within`) — сам range остаётся прозрачным. */

.tz-ba__title { margin: var(--tz-space-4, 16px) 0 4px; font-size: 19px; }
.tz-ba__title.screen-reader-text { margin: 0; }
.tz-ba__caption { margin: 0; color: var(--tz-color-muted, #92a1a7); font-size: 15px; }

/* --- Планшет ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .tz-service-hero__inner { grid-template-columns: minmax(0, 1fr); padding: var(--tz-space-6, 32px); }
  .tz-photo-text,
  .tz-photo-text.wp-block-columns { grid-template-columns: minmax(0, 1fr); gap: var(--tz-space-5, 24px); }
  /* Одна колонка — фото не на весь экран, иначе оно снова съедает первый экран. */
  .tz-photo-text :where(img),
  .tz-photo-text__media :where(img, picture) { max-width: 360px; max-height: 260px; margin-inline: auto; }
  .tz-photo-text .tz-photo { text-align: center; }
  .tz-photo--poster .tz-photo__img { max-height: 360px; }
  .tz-service-prices__inner { grid-template-columns: minmax(0, 1fr); gap: var(--tz-space-5, 24px); }
}

/* --- Телефон 390 / 360 ------------------------------------------------------ */

@media (max-width: 760px) {
  .tz-service-hero { padding-block: var(--tz-space-4, 16px) 0; }
  .tz-service-hero__inner { padding: var(--tz-space-5, 24px); gap: var(--tz-space-5, 24px); }
  .tz-service-hero__actions .tz-btn { flex: 1 1 100%; justify-content: center; }
  .tz-service-hero__media :where(img, picture) { max-height: 260px; }

  .tz-services__list,
  .tz-ba__list { grid-template-columns: minmax(0, 1fr); }


  .tz-service-cta__inner { padding: var(--tz-space-5, 24px); }
  .tz-service-cta__actions { width: 100%; }
  .tz-service-cta__actions .tz-btn { flex: 1 1 100%; justify-content: center; }

  .tz-price-list__item { padding: var(--tz-space-4, 16px); }
  .tz-perks { grid-template-columns: minmax(0, 1fr); }
  .tz-video__frame { max-width: 100%; }
}

@media (max-width: 400px) {
  .tz-service-card__price.tz-service-card__ask { font-size: 13px; }
  .tz-chip { padding-inline: 14px; font-size: 15px; }
  .tz-service-card__link { padding: var(--tz-space-4, 16px); }
  .tz-service-card__badge { position: static; align-self: flex-start; margin: 0 0 8px var(--tz-space-4, 16px); display: inline-block; }
}

.tz-service-cta__form { margin-top: var(--tz-space-6, 32px); }

/*
 * Портрет врача вместо фото направления (правки от 08.10, п. 34; сейчас —
 * только «Кардиология»). Исходник 410×512, поэтому карточка вертикальная 4:5,
 * не шире 410 CSS-px (без растяжения) и без обрезки: файл ровно 4:5.
 * Модификаторы ставит `tz_service_portrait()`; остальные услуги не затронуты.
 */
.tz-service-hero--portrait .tz-service-hero__inner {
  grid-template-columns: minmax(0, 1fr) minmax(0, 410px);
}

.tz-service-hero--portrait .tz-service-hero__media :where(img, picture),
.tz-photo--portrait .tz-photo__img,
.tz-photo--portrait :where(img) {
  width: 100%;
  max-width: 410px;
  height: auto;
  max-height: none;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 0;
  margin-inline: auto;
}

@media (max-width: 900px) {
  .tz-service-hero--portrait .tz-service-hero__inner { grid-template-columns: minmax(0, 1fr); }
  .tz-service-hero--portrait .tz-service-hero__media :where(img, picture) { max-width: 320px; max-height: none; }
  .tz-photo-text .tz-photo--portrait :where(img) { max-width: 300px; max-height: none; }
}