@charset "utf-8";

/* ═══════════════════════════════════════════════════════════════
   Адаптация под устройства. Подключается ПОСЛЕ style.css.
   Здесь только то, что style.css не покрывает:
   1. кегли, реагирующие на настройки шрифта пользователя
   2. безопасные зоны (вырез, жестовая навигация)
   3. альбомная ориентация и низкие вьюпорты
   4. зоны нажатия и узкие экраны от 320px
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. Кегли ────────────────────────────────────────────────────
   Было clamp(min, Nvw, max): в середине диапазона размер держится
   только на vw, а vw не реагирует на увеличенный шрифт в настройках
   браузера или ОС. Стало clamp(min, calc(1rem + (N-1.111)vw), max):
   на 1440px значение то же, но теперь есть rem-составляющая. */

.hero h1{font-size:clamp(2.2rem,calc(1rem + 3.489vw),3.9rem)}
.lead{font-size:clamp(1.05rem,calc(1rem + 0.389vw),1.28rem)}
.facts dd{font-size:clamp(1.15rem,calc(1rem + 0.789vw),1.5rem)}
.ticker-row span{font-size:clamp(0.95rem,calc(1rem + 0.389vw),1.15rem)}
.sec-head h2{font-size:clamp(1.85rem,calc(1rem + 2.489vw),3rem)}
.svc-name{font-size:clamp(1.15rem,calc(1rem + 0.989vw),1.6rem)}
.clinic h2{font-size:clamp(1.75rem,calc(1rem + 1.889vw),2.4rem)}
.doc-lead .doc-face{font-size:clamp(1.6rem,calc(1rem + 1.489vw),2.2rem)}
.doc-name{font-size:clamp(1.05rem,calc(1rem + 0.589vw),1.4rem)}
.doc-lead .doc-name{font-size:clamp(1.3rem,calc(1rem + 1.289vw),2rem)}
.offers h2{font-size:clamp(1.85rem,calc(1rem + 2.489vw),3rem)}
.offer-price{font-size:clamp(1.5rem,calc(1rem + 1.289vw),2rem)}
.offer-price span{font-size:clamp(2.2rem,calc(1rem + 3.489vw),3.4rem)}
.q-big blockquote{font-size:clamp(1.05rem,calc(1rem + 0.589vw),1.3rem)}
.booking h2{font-size:clamp(1.75rem,calc(1rem + 2.089vw),2.7rem)}
.tel-big{font-size:clamp(1.1rem,calc(1rem + 0.889vw),1.5rem)}
.contacts h2{font-size:clamp(1.75rem,calc(1rem + 2.089vw),2.7rem)}
.qa-item h3{font-size:clamp(1.02rem,calc(1rem + 0.389vw),1.22rem)}
.legal h1{font-size:clamp(1.6rem,calc(1rem + 1.889vw),2.4rem)}

/* ─── 2. Безопасные зоны ──────────────────────────────────────────
   Кнопка звонка была прибита к bottom:16px и на телефонах с жестовой
   навигацией уезжала под индикатор home. */

.callnow{
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  left:calc(16px + env(safe-area-inset-left,0px));
  right:calc(16px + env(safe-area-inset-right,0px));
}
@media (max-width:767px){
  .site-foot{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
}
.site-head .head-in,.mobnav{
  padding-left:max(var(--pad),env(safe-area-inset-left,0px));
  padding-right:max(var(--pad),env(safe-area-inset-right,0px));
}

/* ─── 3. Низкие вьюпорты и альбомная ориентация ───────────────────
   Телефон в альбомной: высота ~390px. Липкая шапка сверху и кнопка
   звонка снизу съедали почти весь экран. */

@media (max-height:520px) and (orientation:landscape){
  .site-head{position:static}
  .callnow{position:static;margin:24px var(--pad) 0;display:block}
  .site-foot{padding-bottom:24px}
  .hero{padding-top:20px}
  .hero-shot{min-height:240px}
  .section{padding-block:clamp(36px,7vh,64px)}
  .hero-in,.clinic-in,.booking-in,.contacts-in{gap:24px}
}
@media (max-height:420px){
  .hero-shot{min-height:180px}
  .ticker{margin-top:24px}
}

/* ─── 4. Зоны нажатия ─────────────────────────────────────────────
   Минимум 44px по короткой стороне для всего, во что тычут пальцем. */

@media (pointer:coarse){
  .nav a,.foot-nav a,.mobnav nav a,.cinfo dd a{min-height:44px;display:flex;align-items:center}
  .btn{min-height:48px}
  .btn-sm{min-height:44px}
  .burger{width:48px;height:48px}
  .head-tel,.foot-tel,.mobnav-tel{min-height:44px;display:inline-flex;align-items:center}
}

/* ─── 5. Узкие экраны от 320px ────────────────────────────────────
   iPhone SE и старые андроиды. Поля сжимаются, длинные слова
   переносятся, ничего не выходит за край. */

@media (max-width:400px){
  :root{--pad:16px}
  .facts dd{font-size:1.05rem}
  .hero-shot{min-height:300px}
  h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
  .btn{width:100%;padding-inline:18px}
  .hero-cta{flex-direction:column;align-items:stretch}
  .q,.offer,.form{padding:18px}
}

/* страховка от горизонтального скролла на любых ширинах */
html,body{max-width:100%;overflow-x:clip}
img,video,iframe,table,pre{max-width:100%}

/* ─── 6. Мобильное меню ───────────────────────────────────────────
   Кнопка была inline-flex и прижималась к левому краю, тогда как
   телефон под ней отцентрован — выглядело как сбитая раскладка. */

.mobnav .btn{
  margin-inline:auto;
  min-width:min(320px,100%);
}
@media (max-width:400px){
  .mobnav .btn{min-width:100%}
}

/* ─── 7. Врачи: двое равных ───────────────────────────────────────
   В клинике два главных врача — Бадалян и Хачатрян, семейная пара
   стоматологов. Второй блок зеркалит первый, чтобы никто не выглядел
   второстепенным. */

.crew-lead-2{margin-top:clamp(40px,6vw,88px)}
@media (min-width:992px){
  .crew-lead-2{direction:rtl}
  .crew-lead-2>*{direction:ltr}
}

/* ─── 8. Якоря и появление ────────────────────────────────────────
   Переход по #clinic подводил верх секции под липкую шапку, и заголовок
   оказывался за ней. Плюс блок с классом reveal при переходе по якорю
   мог остаться с нулевой прозрачностью. */

section[id], [id^="pri"], #booking, #contacts{
  scroll-margin-top:calc(var(--header-h,72px) + 20px);
}
/* если пришли по якорю — секция назначения показывается сразу */
section[id]:target .reveal{opacity:1 !important;transform:none !important}