/* ═══════════════════════════════════════════════════════════════════
   Посадочные страницы услуг (implantaciya-zubov.html и следующие).
   Разметку собирает scripts/build-service-pages.js. Карточки врачей,
   прейскурант, вопросы и контакты держатся на классах main.css; здесь
   только то, чего у страницы направления нет: тёмный первый экран
   с ценой, цепочка навигации, видео рядом с текстом и раскрытые
   группы прейскуранта. Отдельным файлом, чтобы не трогать метку
   main.css на всех страницах сайта.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Шапка над тёмным первым экраном ──
   Как над видео-героем стоматологии, но без класса has-video-hero:
   полоса контактов прозрачная, текст светлый, после прокрутки шапка
   снова бумажная (класс .is-scrolled ставит main.js). */
/* Светлая шапка до прокрутки. На стоматологии её даёт body[data-page="dent"]
   в main.css, косметологии нужна своя — повторяем те же правила для обеих. */
body.svc-page .header:not(.is-scrolled){color:var(--bone);}
body.svc-page .header:not(.is-scrolled) .nav a{color:rgba(236,230,218,.8);}
body.svc-page .header:not(.is-scrolled) .nav a:hover{color:var(--bone);}
body.svc-page .header:not(.is-scrolled) .logo__mark{border-color:rgba(236,230,218,.45);}
body.svc-page .header:not(.is-scrolled) .logo:hover .logo__mark{background:var(--bone);color:var(--coal);border-color:var(--bone);}
body.svc-page .header:not(.is-scrolled) .dir-switch{border-color:rgba(236,230,218,.4);background:rgba(24,21,18,.42);}
body.svc-page .header:not(.is-scrolled) .dir-switch__btn{color:rgba(236,230,218,.72);}
body.svc-page .header:not(.is-scrolled) .topbar{
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:rgba(236,230,218,.14);
}
body.svc-page .header:not(.is-scrolled) .topbar__in{color:rgba(236,230,218,.82);}
body.svc-page .header:not(.is-scrolled) .topbar__in a{color:rgba(236,230,218,.92);}
body.svc-page .header:not(.is-scrolled) .topbar__in a:hover{color:var(--milk);}
body.svc-page .header:not(.is-scrolled) .logo__text em{color:rgba(236,230,218,.7);}
body.svc-page .header:not(.is-scrolled) .dir-switch__btn.is-active{color:var(--coal);}
body.svc-page .header:not(.is-scrolled) .nav__cta{border-color:rgba(236,230,218,.55);color:var(--bone) !important;}
body.svc-page .header:not(.is-scrolled) .nav__cta:hover{background:var(--bone);color:var(--coal) !important;}

/* ── Первый экран ── */
.svc-hero{
  padding:calc(var(--header-h) + clamp(28px,6vh,72px)) var(--gutter) clamp(48px,8vh,96px);
  background:var(--coal);color:var(--bone);position:relative;
}
.svc-hero__grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(28px,5vw,88px);align-items:end;}
.svc-hero .eyebrow{color:var(--mineral);margin-bottom:clamp(14px,2.4vh,24px);}
/* терракота на тёмном тонет — надглавие косметологии золотое, как в тёмных секциях */
body[data-direction="cosmo"] .svc-hero .eyebrow{color:var(--gold);}
.svc-hero .eyebrow::before{background:rgba(236,230,218,.4);}
/* Длинные слова («Биоревитализация», «Профессиональная») на 390px не влезают
   в строку при кегле 34px — ниже бриф не разрешает. Вместо разрыва по
   букве — русский перенос, и только у слов от 12 букв. */
.svc-hero__title{color:var(--milk);margin-bottom:clamp(18px,3vh,30px);
  -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:12 5 4;
  -webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:4;overflow-wrap:break-word;}
.svc-hero__lead{max-width:56ch;margin:0 0 clamp(24px,4vh,36px);
  font-size:clamp(17px,1.35vw,20px);line-height:1.6;color:rgba(236,230,218,.82);}
.svc-hero__lead:not(:last-of-type){margin-bottom:10px;}
.svc-hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;}
.svc-hero__phone{font-family:var(--font-display);font-size:clamp(19px,1.6vw,23px);
  color:var(--milk);white-space:nowrap;border-bottom:1px solid rgba(236,230,218,.35);padding-bottom:2px;}
.svc-hero__phone:hover{border-color:var(--accent);}

/* Цепочка «Главная / Стоматология / Услуга» */
.svc-crumbs{margin:0 0 clamp(22px,4vh,40px);}
.svc-crumbs ol{display:flex;flex-wrap:wrap;gap:4px 0;margin:0;padding:0;list-style:none;
  font-size:12.5px;letter-spacing:.06em;color:rgba(236,230,218,.6);}
.svc-crumbs li{display:flex;align-items:center;min-width:0;}
.svc-crumbs li + li::before{content:"/";margin:0 10px;opacity:.5;}
.svc-crumbs a{color:rgba(236,230,218,.82);border-bottom:1px solid rgba(236,230,218,.25);}
.svc-crumbs a:hover{color:var(--milk);border-color:var(--accent);}
.svc-crumbs [aria-current]{color:var(--bone);}

/* Карточка цены */
.svc-hero__card{border:1px solid rgba(236,230,218,.24);padding:clamp(22px,2.6vw,36px);
  background:rgba(236,230,218,.04);}
.svc-hero__price{margin:0;font-family:var(--font-display);font-weight:300;
  font-size:clamp(40px,4.4vw,64px);line-height:1;color:var(--milk);white-space:nowrap;}
.svc-hero__price-note{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:rgba(236,230,218,.66);}
.svc-hero__more{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(236,230,218,.18);
  font-size:14px;line-height:1.5;color:rgba(236,230,218,.78);}
.svc-hero__more span{min-width:0;}
.svc-hero__more b{font-weight:400;font-family:var(--font-display);font-size:18px;color:var(--milk);white-space:nowrap;}
.svc-hero__where{margin:20px 0 0;padding-top:16px;border-top:1px solid rgba(236,230,218,.18);
  font-size:14px;line-height:1.65;color:rgba(236,230,218,.78);}
.svc-hero__where a{color:var(--milk);border-bottom:1px solid rgba(236,230,218,.3);}

/* ── Об услуге ── */
.svc-about__intro{margin-top:0;}
.svc-about__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:start;}
.svc-video{margin:0;position:sticky;top:calc(var(--header-h) + 16px);}
.svc-video video{display:block;width:100%;height:auto;aspect-ratio:16 / 9;background:var(--coal);object-fit:cover;}
.svc-video figcaption{display:flex;justify-content:space-between;gap:12px;padding:12px 0 0;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--wood);
  border-bottom:1px solid var(--line);padding-bottom:10px;}
.svc-about__blocks{display:grid;gap:clamp(24px,3vw,36px);}
.svc-about__block h3{margin-bottom:12px;}
.svc-about__block p{margin:0;font-size:16px;line-height:1.7;color:var(--wood);max-width:62ch;}
.svc-about__block p + p{margin-top:10px;}
.svc-about__block .svc-proc__list li{font-size:15px;}
.svc-about__link{margin:0;}
/* Фото процедуры вместо видео, если ролика по услуге нет */
.svc-photo img{display:block;width:100%;height:auto;max-height:min(72vh,640px);object-fit:cover;}
.svc-about__drugs{max-width:74ch;margin:0 0 clamp(16px,2vw,24px);}
/* Часть процедуры (у Clarity — александрит) идёт подзаголовком над своими панелями */
.svc-about__part{margin:0 0 14px;}
.svc-about__part-h{margin:0 0 10px;font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--wood);}
.svc-about__part + .svc-about__panels{margin-top:14px;}
.svc-about > .svc-proc__warn{margin-top:clamp(24px,3vw,36px);}
.svc-about__detail{margin-top:clamp(40px,6vw,80px);padding-top:clamp(24px,3vw,40px);border-top:1px solid var(--line-strong);}
.svc-about__detail > h3{margin-bottom:14px;}
.svc-about__what{max-width:74ch;margin:0 0 clamp(20px,3vw,32px);font-size:16px;line-height:1.7;color:var(--wood);}
.svc-about__panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start;}
.svc-about__panels .svc-panel__h{font-weight:500;}
/* Этапы — нумерованный список: порядок здесь и есть смысл */
.svc-steps{counter-reset:step;}
.svc-steps li{counter-increment:step;padding-left:28px;}
.svc-steps li::before{content:counter(step,decimal-leading-zero);font-size:11px;letter-spacing:.06em;top:3px;}

/* ── Прейскурант: группы раскрыты сразу ── */
.svc-prices .price-groups{margin-top:0;}
.svc-prices .price-group__head{padding:20px 0 14px;font-family:var(--font-display);
  font-size:clamp(17px,1.7vw,23px);line-height:1.3;color:var(--ink);}
.svc-prices .price-group__body{max-height:none;overflow:visible;}
.svc-prices__all{margin:22px 0 0;}
.svc-prices .price-groups--single{display:block;}
@media(min-width:901px){
  .svc-prices .price-groups{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,64px);align-items:start;}
}

/* ── Врачи: две карточки на всю ширину ── */
.svc-doctors__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.svc-doctors__grid--1{grid-template-columns:minmax(0,1fr);}
/* Трое врачей — в три колонки, фото над текстом: иначе третья карточка
   повисает одна на всю строку */
@media(min-width:1121px){
  .svc-doctors__grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
  .svc-doctors__grid--3 .svc-doc{grid-template-columns:minmax(0,1fr);}
  .svc-doctors__grid--3 .svc-doc > *,.svc-doctors__grid--3 .svc-doc > .doc-card__photo{grid-column:1;grid-row:auto;}
}
.svc-doc{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(18px,2.4vw,32px);row-gap:10px;align-content:start;}
.svc-doc > *{grid-column:2;}
.svc-doc > .doc-card__photo{grid-column:1;grid-row:1 / span 6;}
.svc-doc__methods{margin:6px 0 0;}
.svc-doc__methods li{font-size:14px;}
.svc-doc__methods .svc-doc__sub{margin-left:16px;}
.svc-doc__file{justify-self:start;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border-bottom:1px solid currentColor;padding-bottom:2px;}
.svc-doc .doc-card__more{justify-self:start;margin-top:4px;}
.svc-doctors__all{margin:22px 0 0;}

/* ── Вопросы ── */
.svc-faq__list{border-top:1px solid var(--line-strong);}

@media(max-width:1100px){
  .svc-about__panels{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:900px){
  .svc-hero__grid{grid-template-columns:minmax(0,1fr);align-items:start;}
  .svc-about__grid{grid-template-columns:minmax(0,1fr);}
  .svc-video{position:static;}
  .svc-doctors__grid{grid-template-columns:minmax(0,1fr);}
}
@media(max-width:640px){
  .svc-about__panels{grid-template-columns:minmax(0,1fr);}
  .svc-doc{grid-template-columns:minmax(0,1fr);}
  .svc-doc > *,.svc-doc > .doc-card__photo{grid-column:1;grid-row:auto;}
  .svc-hero__more{flex-wrap:wrap;}
  .svc-video figcaption{flex-wrap:wrap;}
}

/* Версия для слабовидящих: тёмный экран и полупрозрачный текст не нужны,
   цвета задаёт сама схема режима. */
html[data-vi="on"] .svc-hero,
html[data-vi="on"] .svc-hero__card{background:var(--vi-bg,#fff);color:var(--vi-fg,#000);border-color:var(--vi-fg,#000);}
html[data-vi="on"] .svc-hero *{color:var(--vi-fg,#000) !important;}
html[data-vi="on"] .svc-video{position:static;}