/* ============================================================
   Imperia Dent — страница врача (дизайн v9).
   Подключается вместе с ../../tokens.css. Самодостаточна.
   Структура страницы: шапка · герой (фото + регалии) ·
   видео · работы до/после · запись · подвал.
   ============================================================ */
/* 🔴 ОДНА ВЕРТИКАЛЬ НА ВЕСЬ САЙТ.
   Страница врача считалась от --wrap:1240px из tokens.css, а вся остальная
   сборка — от 1900px. Из-за этого на широком экране логотип в шапке уезжал
   к середине, а левый край текста не совпадал с главной: владелец заметил
   это первым же взглядом. Значения обязаны совпадать с :root в index.html —
   меняешь там, меняй и здесь. */
:root{
  --wrap:  1520px;
  --pad-x: clamp(20px, 3.4vw, 60px);
}
*{box-sizing:border-box}
html{background:var(--umber-deep)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--ff);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,p,ul,figure,blockquote{margin:0}

/* Playfair по умолчанию отдаёт старостильные цифры — «43 этаж», стаж и годы
   в регалиях проваливаются под базовую линию. На главной это правило есть,
   здесь его не было ни разу. */
h1,h2,h3,h4,.d-name,.sec-h,.credo,.book h2,.num,.price,time{
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
/* Inter self-host только в 400/500/600 — 700 браузер дорисовывает сам. */
b,strong{font-weight:600}
.wrap{width:min(var(--wrap),100%);margin-inline:auto;padding-inline:var(--pad-x)}
.eyebrow{font-size:var(--t-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:uppercase;
  color:var(--bronze-ink);font-weight:600}

/* ---- шапка ---- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(246,231,214,.42);
  -webkit-backdrop-filter:blur(26px) saturate(1.25);backdrop-filter:blur(26px) saturate(1.25);
  backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line-soft)}
.hdr .wrap{display:flex;align-items:center;gap:clamp(12px,2.4vw,26px);min-height:88px;padding-block:8px}
.hdr .brand{flex:0 0 auto;display:block;line-height:0}
.hdr .logo{height:clamp(56px,5.2vw,78px);width:auto;max-width:none}
.hdr .sp{flex:1}
.hdr .tel{font-weight:600;text-decoration:none;white-space:nowrap}
.hdr .lang{display:flex;gap:10px;font-size:13px}
.hdr .lang a{text-decoration:none;color:var(--ink-mute)}
.hdr .lang a[aria-current]{color:var(--ink)}

/* ---- кнопки ---- */
.btn{display:inline-flex;align-items:center;gap:.5em;border:0;cursor:pointer;font:inherit;
  font-weight:600;line-height:1;padding:.85em 1.5em;border-radius:var(--r-btn);
  text-decoration:none;transition:transform var(--d-fast) var(--e),box-shadow var(--d-fast) var(--e)}
/* Главная кнопка — эспрессо, как на главной странице. Бронзовая заливка
   делала страницы врачей визуально другим сайтом. */
.btn-solid{background:var(--umber);color:var(--cream)}
.btn-solid:hover{background:var(--bronze-ink);transform:translateY(-2px);box-shadow:0 14px 32px rgba(138,106,73,.3)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--bronze)}
.btn-light{background:var(--cream);color:var(--umber-deep)}
.btn-light:hover{transform:translateY(-2px)}

/* ---- назад ---- */
.back{padding-top:22px}
.back a{color:var(--ink-mute);text-decoration:none;font-size:14px;letter-spacing:.05em}
.back a:hover{color:var(--bronze-ink)}

/* ---- герой: фото + регалии ---- */
.dhero{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
  gap:clamp(28px,4vw,64px);align-items:start;padding-block:clamp(28px,4vw,52px) var(--sec-y)}
.dhero .fig{position:relative;border-radius:var(--r-photo) var(--r-photo) 0 0;overflow:hidden;
  background:var(--sand-deep);box-shadow:var(--sh-card);position:sticky;top:96px}
.dhero .fig img{width:100%;height:auto;aspect-ratio:900/1200;object-fit:cover}
.dhero .role{position:absolute;left:14px;top:14px;background:rgba(47,37,30,.7);color:var(--cream);
  font-size:11.5px;letter-spacing:.07em;padding:.45em .85em;border-radius:100px;backdrop-filter:blur(3px)}
.d-head .eyebrow{margin-bottom:14px;display:block}
.d-name{font-family:var(--disp);font-weight:500;font-size:var(--t-name);line-height:var(--lh-tight)}
.d-name span{display:block;color:var(--bronze-ink);font-size:.6em;margin-top:.12em}
.d-spec{color:var(--ink-soft);font-size:var(--t-lead);margin-top:.55em}
.d-exp{font-size:14px;color:var(--ink-mute);letter-spacing:.03em;margin-top:.5em}
.credo{font-family:var(--disp);font-style:italic;font-size:clamp(19px,2vw,26px);line-height:1.42;
  color:var(--ink);border-left:2px solid var(--bronze);padding-left:20px;margin-top:1.6em}
.d-about{color:var(--ink-soft);margin-top:1.5em;max-width:54ch}
.regalia{margin-top:1.9em;border-bottom:1px solid var(--line)}
.regalia summary{cursor:pointer;font-weight:600;letter-spacing:.02em;padding:15px 0;
  border-top:1px solid var(--line);list-style:none;display:flex;justify-content:space-between}
.regalia summary::-webkit-details-marker{display:none}
.regalia summary::after{content:"+";color:var(--bronze-ink);font-weight:400}
.regalia[open] summary::after{content:"\2013"}
.regalia ul{padding:0 0 16px 18px;color:var(--ink-soft);font-size:15px;line-height:1.7}
.acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---- секции ---- */
.sec{padding-block:var(--sec-y)}
.sec.alt{background:var(--sand)}
.sec.dark{background:var(--umber);color:var(--cream)}
.sec-h{font-family:var(--disp);font-weight:500;font-size:var(--t-h2);line-height:var(--lh-head)}
.sec-sub{color:var(--ink-mute);margin-top:8px;margin-bottom:var(--head-mb)}
.sec.dark .sec-sub{color:var(--cream-soft)}

/* ---- видео ---- */
.video-frame{position:relative;aspect-ratio:16/9;border-radius:var(--r-card);overflow:hidden;
  background:var(--umber);display:grid;place-items:center;text-align:center}
.video-frame .ph{display:grid;gap:14px;justify-items:center;padding:24px;color:var(--cream-soft)}
.video-frame .play{width:66px;height:66px;border-radius:50%;border:1px solid var(--line-dark);
  display:grid;place-items:center;color:var(--bronze-lt)}
.video-frame .play svg{width:22px;height:22px;margin-left:3px}
/* Реальное видео в той же рамке: постер + кнопка, файл грузится по клику.
   Сокращённое font: не используем — оно сбрасывает font-variant-numeric у .num. */
.video-frame.vbox{background:var(--sand-deep)}
.video-frame img,.video-frame video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block}
.vbtn{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;
  background:none;cursor:pointer;display:grid;place-items:center}
.vbtn::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(47,37,30,.05),rgba(47,37,30,.34));transition:background .42s}
.vbtn:hover::before,.vbtn:focus-visible::before{
  background:linear-gradient(180deg,rgba(47,37,30,.02),rgba(47,37,30,.22))}
.vbtn i{position:relative;width:clamp(58px,6.4vw,80px);aspect-ratio:1;border-radius:50%;
  background:rgba(246,236,220,.95);display:grid;place-items:center;
  box-shadow:0 10px 34px rgba(47,37,30,.34);transition:transform .42s}
.vbtn:hover i,.vbtn:focus-visible i{transform:scale(1.06)}
.vbtn i::after{content:"";width:0;height:0;margin-left:6px;
  border-left:17px solid var(--bronze-ink);
  border-top:11px solid transparent;border-bottom:11px solid transparent}
.vcap{position:absolute;left:0;right:0;bottom:0;z-index:2;pointer-events:none;
  padding:36px 20px 14px;color:var(--cream);
  font-size:12.4px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  background:linear-gradient(180deg,transparent,rgba(47,37,30,.66))}

/* ---- до/после ---- */
.ba-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.ba-card{border-radius:var(--r-card);overflow:hidden;border:1px dashed var(--line);
  background:var(--sand-deep);aspect-ratio:4/3;display:grid;place-items:center;
  color:var(--ink-mute);text-align:center;padding:16px;font-size:13.5px;letter-spacing:.03em}
.ba-note{margin-top:22px;color:var(--ink-mute);font-size:14px}

/* ---- запись ---- */
.book{background:var(--umber);color:var(--cream);border-radius:var(--r-card);
  padding:clamp(30px,5vw,60px);display:grid;gap:20px;justify-items:start}
.book h2{font-family:var(--disp);font-weight:500;font-size:var(--t-h2)}
.book p{color:var(--cream-soft);max-width:58ch}
.book .acts{margin-top:6px}

/* ---- подвал ---- */
.ft{background:var(--umber-deep);color:var(--cream-soft);padding-block:38px;font-size:13.5px}
.ft .wrap{display:flex;flex-wrap:wrap;gap:16px 28px;justify-content:space-between;align-items:center}
.ft a{color:var(--cream-soft);text-decoration:none}
.ft a:hover{color:var(--bronze-lt)}

/* ---- правовая строка подвала ---- */
/* 08.09: лента прототипа снята при публикации. Она была единственным
   правовым текстом на странице врача, поэтому вместо неё в подвал
   добавлена строка с лицензиатом и предупреждением о противопоказаниях —
   без него страница с записью на приём публиковаться не должна.
   🔴 Имя класса не повторяет ничего из site.css и pages.css. */
.ft-legal{flex:1 0 100%;margin-top:14px;padding-top:14px;
  border-top:1px solid rgba(246,231,214,.14);
  color:var(--cream-soft);opacity:.78;font-size:12px;line-height:1.5}

@media (max-width:820px){
  .dhero{grid-template-columns:1fr;gap:26px}
  /* 🔴 было position:static (снимали sticky) — но absolute-плашка .role
     («Сооснователь клиники») теряла опору и прилипала к углу СТРАНИЦЫ,
     поверх ленты прототипа. relative снимает sticky и оставляет опору. */
  .dhero .fig{position:relative;top:auto;border-radius:var(--r-photo)}
  .hdr .lang{display:none}
}


/* ============================================================
   ТИПОГРАФИКА КАПСОМ — 18.08, вслед за главной.
   Блок стоит последним: сокращённое свойство font: в правилах выше
   сбрасывает font-variant-numeric и feature-settings.
   ============================================================ */
.d-name, .sec-h, .book h2, .regalia summary{
  font-family:var(--ff);
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:var(--ls-caps,.09em);
  line-height:1.16;
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}
.d-name{letter-spacing:.05em}
.regalia summary{font-size:13px;letter-spacing:.12em}
/* Кредо — единственное место серифом: голос врача среди капса */
.credo{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-weight:400}


/* ================= ВИДЕО О ВРАЧЕ ВО ВЕСЬ ЭКРАН =================
   Тот же приём, что на главной: ролик — сам блок, а не вставка в рамке. */
/* 🔴 Высота идёт за КАДРОМ, а не только за экраном — то же правило, что в
   site.css. object-fit:cover режет ту сторону, что не влезла: на широком
   коротком экране резался низ, а там вшиты ФИО врача, специальность и стаж —
   они показывались наполовину. 56.25vw — ровно 16:9 от ширины. */
.cine{position:relative;min-height:max(100svh,56.25vw);display:flex;align-items:flex-end;
  padding-top:104px;overflow:hidden;isolation:isolate;background:var(--umber-deep)}
.cine-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.cine-veil{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(47,37,30,.5),rgba(47,37,30,.08) 34%,rgba(47,37,30,.12))}
/* ФИО, специальность и стаж уже вшиты в кадр самой клиникой — своя
   надпись только спорила бы с ними. Оставляем короткую метку сверху. */
.cine{align-items:flex-start}
.cine-tag{position:relative;z-index:2;margin:0;color:var(--cream);
  font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  width:min(var(--wrap),100%);margin-inline:auto;padding:0 var(--pad-x);
  text-shadow:0 1px 10px rgba(20,14,10,.6)}
.cine .eyebrow{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bronze-lt)}
.cine h2{margin-top:12px;font-family:var(--disp);font-weight:500;
  font-size:clamp(26px,3.1vw,40px);line-height:1.16;letter-spacing:.09em;
  text-transform:uppercase;color:var(--cream)}
.cine p.lead{margin-top:14px;color:var(--cream-soft);max-width:52ch}
.vsound{position:absolute;z-index:3;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,34px);
  padding:8px 15px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(246,236,220,.4);background:rgba(47,37,30,.5);color:var(--cream);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.vsound:hover,.vsound:focus-visible{background:rgba(47,37,30,.75);border-color:var(--bronze-lt)}
.vsound[aria-pressed="true"]{background:var(--bronze-ink);border-color:var(--bronze-ink)}


/* На телефоне ролик — это содержимое, а не фон: при заливке по высоте
   16:9 обрезался по бокам и титры с ФИО уезжали за край. Показываем кадр
   целиком, метку выносим над ним. */
@media (max-width:760px){
  .cine{min-height:0;padding-top:0;display:block;background:var(--umber-deep)}
  .cine-media{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9}
  .cine-veil{display:none}
  .cine-tag{position:static;width:auto;margin:0;padding:22px var(--pad-x) 14px;
    text-shadow:none}
  .vsound{bottom:auto;top:calc(56.25vw - 50px);right:14px}
}


/* Шапка на телефоне той же высоты, что на главной */
@media (max-width:640px){
  .hdr .wrap{min-height:72px;gap:10px}
  .hdr .tel{font-size:14.6px}
  /* Логотип + телефон + кнопка в 390 px не помещаются. Телефон важнее:
     это готовое действие в один тап. На главной кнопка тоже скрыта. */
  .hdr .btn{display:none}
}


/* ================= ШАПКА ПОДСТРАИВАЕТСЯ ПОД ФОН =================
   Над полноэкранным кадром светлая плашка выглядит чужой наклейкой. */
.hdr::before{content:"";position:absolute;inset:0 0 -40px 0;z-index:-1;pointer-events:none;
  opacity:0;transition:opacity .42s;
  background:linear-gradient(180deg,rgba(47,37,30,.74),rgba(47,37,30,.4) 62%,transparent)}
body.on-media .hdr{background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none}
body.on-media .hdr::before{opacity:1}
body.on-media .hdr .tel{color:var(--cream)}
.hdr .logo.on-dark{display:none}
body.on-media .hdr .logo.on-dark{display:block;
  filter:drop-shadow(0 1px 2px rgba(20,14,10,.55)) drop-shadow(0 6px 18px rgba(20,14,10,.4))}
body.on-media .hdr .logo.on-light{display:none}

/* Подпись под цитатой — тем же рукописным, что «by Dr. Marina & Dr. Djey»
   в логотипе (п.15 заказчика, 30.08). Кавычки-ёлочки из цитат убраны:
   начертание и отбивка уже говорят, что это прямая речь, а кавычки
   утяжеляли ровно то место, которое должно дышать.
   🔴 Рукописным набрана ПОДПИСЬ, а не цитата: Parisienne читается
   в двух-трёх словах, а цитата хирурга — 78 знаков. */
.cr-sign{margin-top:9px;font-family:var(--script);font-size:clamp(15px,1.4vw,19px);
  color:var(--bronze-ink);line-height:1.25}
.doc:hover .cr-sign{color:var(--bronze-lt)}
.cr-sign--big{margin-top:13px;font-size:clamp(20px,2vw,27px);color:var(--rose)}

/* Ползунок перемотки (п.5 заказчика, 30.08). Живёт только там, где звучит
   речь: приветствие основателей и визитки врачей.
   Высота полосы маленькая, но область нажатия — 44 px по вертикали за счёт
   прозрачных полей: правило «тач-цель не меньше 44×44» из чек-листа. */
.vseek{position:absolute;left:0;right:0;bottom:0;z-index:4;width:100%;
  height:44px;margin:0;padding:0;cursor:pointer;
  /* Затемнение под полосой: на светлом кадре тонкая линия иначе теряется. */
  background:linear-gradient(to top,rgba(20,14,10,.42),rgba(20,14,10,0));
  -webkit-appearance:none;appearance:none}
.vseek:focus-visible{outline:2px solid var(--bronze-lt);outline-offset:-4px}
.vseek::-webkit-slider-runnable-track{height:3px;margin-top:20px;border-radius:2px;
  background:linear-gradient(to right,var(--bronze-lt) var(--p,0%),rgba(246,236,220,.28) var(--p,0%))}
.vseek::-moz-range-track{height:3px;border-radius:2px;background:rgba(246,236,220,.28)}
.vseek::-moz-range-progress{height:3px;border-radius:2px;background:var(--bronze-lt)}
.vseek::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:12px;height:12px;margin-top:-4.5px;border-radius:50%;background:var(--cream);
  box-shadow:0 1px 6px rgba(20,14,10,.5);transition:transform var(--d-fast) var(--e)}
.vseek::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--cream)}
.vseek:hover::-webkit-slider-thumb,.vseek:focus-visible::-webkit-slider-thumb{transform:scale(1.25)}
@media (prefers-reduced-motion:reduce){.vseek::-webkit-slider-thumb{transition:none}}