/* =========================================================
   Николай Лапшин — сайт врача. Базовые стили.
   Палитра: спокойная сине-голубая + серая, клинически-минималистичный стиль.
   ========================================================= */

:root {
  /* --blue — фирменный синий клиента (#7999d2), используется как есть
     на крупных заливках: шапка, футер, hero-слайдер, кнопки, бейджи. */
  --blue: #7999d2;
  --blue-900: #3d4d69;
  --blue-800: #4d6286;
  --blue-700: #5e77a4;
  --blue-600: #6a87b9;
  --blue-500: #7999d2;
  --blue-100: #e4ebf6;
  --blue-50:  #f2f5fb;

  --ink-900: #2e2e2e;
  --ink-700: #545454;
  --ink-500: #767676;
  --ink-300: #8e8e8e;

  --line: #cccccc;
  --line-soft: #e6e6e6;
  --surface: #ffffff;
  --bg: #ffffff;

  /* именные токены по брифу клиента */
  --gray-dark: #8e8e8e;
  --gray-light: #e6e6e6;

  /* приглушённый белый — для второстепенного текста поверх заливки var(--blue) */
  --on-blue-soft: rgba(255, 255, 255, .65);

  --ok-green: #2f8f5f;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 3px rgba(61, 77, 105, 0.08);
  --shadow-md: 0 8px 24px rgba(61, 77, 105, 0.10);
  --shadow-lg: 0 20px 48px rgba(61, 77, 105, 0.16);

  --font-heading: 'Manrope', 'Segoe UI', sans-serif;
  --font-body: 'Roboto', 'Segoe UI', sans-serif;

  --header-h: 128px;
  --header-h-mobile: 76px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink-900);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--blue-700); text-decoration: none; }
a:hover { color: var(--blue-500); }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-heading); color: var(--blue-900); line-height: 1.25; margin: 0 0 .6em; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); font-weight: 800; }
h2 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); font-weight: 700; margin-top: 1.8em; }
h3 { font-size: 1.1rem; font-weight: 700; margin-top: 1.4em; }
p { margin: 0 0 1em; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* =========================== HEADER =========================== */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.topbar { border-bottom: 1px solid var(--line-soft); }
.topbar-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; gap: 20px; position: relative;
}
.brand, .mobile-brand {
  display: flex; align-items: center; gap: 14px;
  color: var(--ink-900); min-width: 0; flex: 1 1 auto;
}
.brand-logo { width: 56px; height: 56px; object-fit: contain; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.brand-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; color: var(--blue-900); }
.brand-tagline { font-size: .82rem; color: var(--blue-600); font-weight: 500; }

.topbar-contacts { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.topbar-phone { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--blue-800); white-space: nowrap; }
.topbar-messengers { display: flex; gap: 8px; }
.topbar-messengers img { width: 24px; height: 24px; border-radius: 6px; }
.topbar-address { font-size: .85rem; color: var(--ink-500); border-left: 1px solid var(--line); padding-left: 18px; max-width: 220px; }

.burger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  width: 42px; height: 42px; min-width: 42px; border-radius: var(--radius-sm);
  background: var(--blue-50); border: 1px solid var(--line);
  cursor: pointer; flex-shrink: 0;
}
.burger-bar { width: 20px; height: 2px; background: var(--blue-800); margin: 0 auto; transition: transform .25s ease, opacity .25s ease; }
.burger[aria-expanded="true"] .burger-bar:nth-child(2) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] .burger-bar:nth-child(3) { opacity: 0; }
.burger[aria-expanded="true"] .burger-bar:nth-child(4) { transform: translateY(-7px) rotate(-45deg); }

/* desktop main nav */
.mainnav { background: var(--blue); }
.mainnav-list { display: flex; align-items: stretch; flex-wrap: wrap; }
.mainnav-list > li { position: relative; }
.mainnav-list > li > a,
.mainnav-toggle {
  display: flex; align-items: center; gap: 6px;
  padding: 13px 18px; color: rgba(255,255,255,.85); font-size: .93rem; font-weight: 500;
  line-height: 1.6;
  background: none; border: none; cursor: pointer; font-family: var(--font-body);
  white-space: nowrap;
}
.mainnav-list > li > a:hover,
.mainnav-toggle:hover,
.mainnav-toggle[aria-expanded="true"] { background: var(--blue-800); color: #fff; }
.chevron {
  width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; transition: transform .2s ease; flex-shrink: 0;
}
.mainnav-toggle[aria-expanded="true"] .chevron { transform: rotate(-135deg); margin-top: 3px; }

.dropdown {
  position: absolute; top: 100%; left: 0; min-width: 300px; max-width: 340px;
  background: var(--surface); border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-lg); padding: 8px; opacity: 0; visibility: hidden;
  transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 50;
}
.has-dropdown:hover > .dropdown,
.has-dropdown > .mainnav-toggle[aria-expanded="true"] + .dropdown {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.dropdown li a {
  display: block; padding: 9px 14px; border-radius: var(--radius-sm);
  color: var(--ink-700); font-size: .92rem;
}
.dropdown li a:hover { background: var(--blue-50); color: var(--blue-700); }

/* длинный список (>10 пунктов, напр. "Направления" или "Дерматология") — 2 колонки,
   чтобы не растягиваться по высоте за пределы экрана. Только от 1300px (эмпирически
   проверено через puppeteer): у флаут-подменю (напр. "Дерматология" внутри
   "Направления") тоже 2 колонки, и двум таким панелям рядом (560-620px + 560-620px)
   просто не хватает места на более узких десктопах ни справа, ни слева (см.
   .flyout-left ниже) — там список остаётся в 1 колонку (как и было раньше, не
   регресс, а просто выше список).
   ВАЖНО: раскладка через CSS Grid, а не через column-count — в Chrome обнаружился
   реальный баг рендеринга: у пунктов с флаут-подменю внутри multicol-контейнера
   (column-count) абсолютно спозиционированный потомок (сам флаут) иногда "утекает"
   в чужой колоночный фрагмент и рисуется в неправильном месте (часть пунктов флаута
   визуально отрывалась и появлялась в другом углу экрана). У CSS Grid такой
   фрагментации нет — элемент-строка остаётся нормальным контекстом позиционирования
   для абсолютных потомков. Число строк передаётся из PHP через CSS-переменную
   --menu-rows (menu_cols_style() в includes/menu.php), т.к. items-count известен
   только на сервере. */
@media (min-width: 1300px) {
  .dropdown.cols-2 {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    grid-template-rows: repeat(var(--menu-rows, 10), auto);
    column-gap: 4px;
    width: 560px; min-width: 560px; max-width: min(620px, calc(100vw - 48px));
  }
}

/* флаут-подменю 2-го уровня (напр. Дерматология внутри Направления) */
.flyout-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
  padding: 9px 14px; border-radius: var(--radius-sm); background: none; border: none; cursor: pointer;
  color: var(--ink-700); font-size: .92rem; font-family: var(--font-body); text-align: left;
}
.flyout-toggle:hover,
.flyout-toggle[aria-expanded="true"] { background: var(--blue-50); color: var(--blue-700); }
.chevron-right { transform: rotate(-45deg); margin-top: 0; }
/* .has-flyout позиционированный — флаут открывается вплотную СПРАВА ОТ СВОЕГО
   ПУНКТА (а не от всей .dropdown-панели), иначе при 2 колонках пункт из левой
   колонки визуально "отрывается" от своего подменю (оно казалось бы принадлежащим
   соседнему пункту из правой колонки). Флаут при этом накрывает своим белым фоном
   часть содержимого правой колонки под собой — это нормально для floating-меню. */
.has-flyout { position: relative; }
.flyout {
  top: -8px; left: 100%; margin-left: 6px; transform: translateX(6px);
}
.has-flyout:hover > .flyout,
.has-flyout > .flyout-toggle[aria-expanded="true"] + .flyout {
  opacity: 1; visibility: visible; transform: translateX(0);
}
/* если справа от ЭТОГО КОНКРЕТНОГО пункта не хватает места до края окна (пункт
   в правой колонке или узкий десктоп) — main.js подставляет этот класс,
   и флаут открывается влево от пункта вместо вправо */
.flyout.flyout-left {
  left: auto; right: 100%; margin-left: 0; margin-right: 6px; transform: translateX(-6px);
}

/* mobile full-screen panel (sandwich #1) — covers the sticky header entirely, no duplicate brand */
.mobile-panel {
  display: none; position: fixed; inset: 0;
  background: var(--surface); z-index: 250; overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
}
.mobile-panel.is-open { opacity: 1; visibility: visible; }
.mobile-panel-inner { padding: 16px 20px 32px; }
.mobile-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.mobile-panel-close {
  width: 40px; height: 40px; min-width: 40px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid var(--line); background: var(--blue-50); color: var(--blue-800);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.mobile-panel-close:hover { background: var(--blue-100); }
.mobile-contacts {
  display: flex; flex-direction: column; gap: 10px; padding: 14px 16px;
  background: var(--blue-50); border-radius: var(--radius-md); margin-bottom: 18px;
}
.mobile-phone { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--blue-800); }
.mobile-messengers { display: flex; gap: 10px; }
.mobile-messengers img { width: 26px; height: 26px; border-radius: 6px; }
.mobile-address { font-size: .88rem; color: var(--ink-500); }

.mobile-menu-list > li { border-bottom: 1px solid var(--line-soft); }
.mobile-menu-list > li > a,
.mobile-submenu-toggle {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 4px; font-size: 1.02rem; font-weight: 600; color: var(--ink-900);
  width: 100%; background: none; border: none; text-align: left; cursor: pointer; font-family: var(--font-body);
}
.mobile-submenu { display: none; padding: 0 0 12px 4px; }
.mobile-submenu.is-open { display: block; }
.mobile-submenu li a { display: block; padding: 9px 10px; font-size: .95rem; color: var(--ink-700); border-radius: var(--radius-sm); }
.mobile-submenu li a:hover { background: var(--blue-50); }
.mobile-submenu .mobile-submenu-toggle { padding: 9px 10px; font-size: .95rem; font-weight: 600; color: var(--ink-700); }
.mobile-submenu .mobile-submenu { padding-left: 14px; }

@media (max-width: 900px) {
  .topbar-address { display: none; }
  .topbar-contacts { gap: 12px; }
}
@media (max-width: 780px) {
  .mainnav { display: none; }
  .burger { display: flex; }
  .mobile-panel { display: block; }
  .topbar-row { padding: 12px 16px; }
  .topbar-contacts { display: none; }
  .brand-logo { width: 46px; height: 46px; }
  .brand-name { font-size: 1rem; }
  .brand-tagline { font-size: .74rem; }
}
@media (max-width: 380px) {
  .brand-tagline { display: none; }
}

/* =========================== SLIDER =========================== */
.hero-slider-section { background: var(--blue); padding: 28px 0; }
.slider {
  position: relative; max-width: 1200px; margin: 0 auto; padding: 0 24px;
}
/* Кадры слайдера — исходники ровно 1600×450 (соотношение 32:9). Рамка повторяет
   это соотношение без обрезки, поэтому border-radius на обёртке намеренно 0
   (квадратные углы по брифу) — если нужно вернуть скругление, впиши сюда
   var(--radius-lg). */
.slider-track-wrap { overflow: hidden; border-radius: 0; box-shadow: var(--shadow-lg); }
.slider-track { display: flex; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.slide {
  position: relative; flex: 0 0 100%; aspect-ratio: 1600 / 450;
  background: var(--blue-800);
}
.slide img { width: 100%; height: 100%; object-fit: cover; }

/* Два независимых слайдера: .slider-desktop показывает кадры 1600×450 как
   есть (без обрезки), .slider-mobile — кадры-заглушки 600×450 (4:3) из
   assets/img/slider-mobile/. Видимость переключается медиа-запросом на
   780px (совпадает с общим брейкпоинтом мобильного меню/сайдбара). */
.slider-mobile { display: none; }
.slider-mobile .slide { aspect-ratio: 4 / 3; }
@media (max-width: 780px) {
  .slider-desktop { display: none; }
  .slider-mobile { display: block; }
}

/* ===== Текстовая подложка на кадре (слева снизу) =====
   Всё, что отвечает за РАЗМЕР и ПОЛОЖЕНИЕ блока, вынесено в переменные ниже —
   меняй только их, остальной CSS трогать не нужно:
   --info-offset-x / --info-offset-y — отступ блока от левого/нижнего края кадра
   --info-max-width  — максимальная ширина блока (сам блок ужимается по контенту,
                        но не шире этого значения; на узких кадрах ужимается ещё
                        сильнее через calc(), чтобы не вылезать за край)
   --info-padding    — внутренние отступы текста от края подложки
   --info-bg         — цвет и прозрачность подложки
   --info-radius     — скругление углов самой подложки (0 = квадратная, как рамка) */
.slide-info {
  --info-offset-x: 32px;
  --info-offset-y: 28px;
  --info-max-width: 480px;
  --info-padding: 22px 26px;
  --info-bg: rgba(9, 27, 48, .74);
  --info-radius: 0px;

  position: absolute; left: var(--info-offset-x); bottom: var(--info-offset-y);
  max-width: min(var(--info-max-width), calc(100% - (var(--info-offset-x) * 2)));
  padding: var(--info-padding);
  background: var(--info-bg);
  border-radius: var(--info-radius);
  color: #fff;
}
.slide-tag {
  display: inline-block; background: var(--blue-500); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .04em; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; text-transform: uppercase;
}
.slide-text {
  font-size: 1.02rem; font-weight: 500; margin-bottom: 14px; line-height: 1.35;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.slide-more {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--blue-800);
  font-weight: 700; font-size: .88rem; padding: 9px 18px; border-radius: 30px; transition: transform .15s ease;
}
.slide-more:hover { color: var(--blue-800); transform: translateX(3px); }

.slider-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.92);
  border: none; cursor: pointer; box-shadow: var(--shadow-md); z-index: 5;
  display: flex; align-items: center; justify-content: center;
}
.slider-nav.prev { left: 8px; }
.slider-nav.next { right: 8px; }
.slider-nav .chevron { width: 9px; height: 9px; border-color: var(--gray-dark); margin: 0; }
.slider-nav.prev .chevron { transform: rotate(135deg); }
.slider-nav.next .chevron { transform: rotate(-45deg); }

.slider-dots { display: flex; justify-content: center; gap: 7px; margin-top: 16px; flex-wrap: wrap; }
.slider-dots button {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.35); border: none; cursor: pointer; padding: 0;
}
.slider-dots button.is-active { background: #fff; width: 22px; border-radius: 5px; }

/* На .slider-mobile кадр 4:3 заметно ниже десктопного 1600:450, поэтому
   подложка под текст здесь компактнее. Значения — те же переменные, что и в
   .slide-info выше, просто переопределены под меньший кадр. */
@media (max-width: 780px) {
  .slide-info {
    --info-offset-x: 16px;
    --info-offset-y: 12px;
    --info-padding: 12px 14px;
  }
  .slide-tag { font-size: .62rem; padding: 3px 8px; margin-bottom: 5px; }
  .slide-text { font-size: .82rem; margin-bottom: 8px; -webkit-line-clamp: 2; line-clamp: 2; }
  .slide-more { font-size: .74rem; padding: 6px 12px; }
}

/* =========================== HOME CONTENT =========================== */
.section { padding: 56px 0; }
.section-tight { padding: 36px 0; }
.section-title { text-align: center; margin-bottom: 8px; }
.section-lead { text-align: center; color: var(--ink-500); max-width: 640px; margin: 0 auto 34px; }

.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.news-card {
  background: var(--surface); border-radius: var(--radius-md); overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid var(--line-soft); transition: box-shadow .2s ease, transform .2s ease;
  display: flex; flex-direction: column;
}
.news-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.news-card img { height: 170px; object-fit: cover; width: 100%; }
.news-card-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.news-card-body p { font-size: .88rem; color: var(--ink-700); margin: 0; flex: 1; }
.news-price { font-family: var(--font-heading); font-weight: 800; color: var(--blue-700); font-size: 1.05rem; }
.news-price span.from { font-weight: 500; color: var(--ink-500); font-size: .8rem; }

.directions-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.direction-card {
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  padding: 26px 24px; box-shadow: var(--shadow-sm);
}
.direction-card .icon {
  width: 44px; height: 44px; border-radius: 12px; background: var(--blue-100); color: var(--blue-700);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px; font-size: 1.3rem;
}
.direction-card h3 { margin-top: 0; }
.direction-card p { color: var(--ink-700); font-size: .93rem; }
.direction-card .more-link { font-weight: 600; font-size: .9rem; }

.doctor-block {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 32px; box-shadow: var(--shadow-sm);
}
.doctor-photo { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.doctor-name { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; color: var(--blue-900); margin-bottom: 2px; }
.doctor-role { color: var(--blue-600); font-weight: 500; margin-bottom: 16px; }
.doctor-block h4 { font-family: var(--font-heading); color: var(--blue-800); font-size: .95rem; text-transform: uppercase; letter-spacing: .03em; margin: 18px 0 8px; }
.timeline { border-left: 2px solid var(--blue-100); margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 14px 22px; font-size: .93rem; color: var(--ink-700); }
.timeline li::before {
  content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue-500); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--blue-100);
}
.doctor-note { background: var(--blue-50); border-radius: var(--radius-md); padding: 14px 18px; font-size: .92rem; color: var(--ink-700); margin-top: 16px; }

@media (max-width: 900px) {
  .news-grid, .directions-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .doctor-block { grid-template-columns: minmax(0, 1fr); }
  .doctor-photo { max-width: 200px; }
}
@media (max-width: 600px) {
  .news-grid, .directions-grid { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 40px 0; }
}

/* =========================== INNER PAGE LAYOUT =========================== */
.page-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 36px; align-items: start; padding: 32px 0 56px; }
.page-layout--single { grid-template-columns: minmax(0, 1fr); }
.breadcrumbs { font-size: .85rem; color: var(--ink-500); padding: 16px 0 0; }
.breadcrumbs a { color: var(--ink-500); }
.breadcrumbs a:hover { color: var(--blue-700); }

/* sidebar — меню текущего раздела (не всех разделов) */
.sidebar { position: sticky; top: calc(var(--header-h) + 12px); }
.sidebar-heading { margin: 0 0 14px; padding: 2px 4px 14px; font-size: 1.15rem; border-bottom: 2px solid var(--line-soft); }
.sidebar-toggle { display: none; }

.sidebar-menu li { margin: 0; }
.sidebar-menu li.is-sub { padding-left: 14px; }
.sidebar-menu li a {
  display: block; padding: 9px 8px; font-size: .92rem; color: var(--ink-700); border-radius: 6px;
}
.sidebar-menu li a:hover { background: var(--blue-50); color: var(--blue-700); }
.sidebar-menu li a.is-active { background: var(--blue-100); color: var(--blue-800); font-weight: 700; }
.sidebar-group-label {
  display: block; padding: 9px 8px 2px; font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ink-500);
}

/* article content */
.article { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); padding: 36px 40px; box-shadow: var(--shadow-sm); }
.article > h1:first-child { margin-top: 0; }
.article p { color: var(--ink-700); }
.article ul, .article ol { margin: 0 0 1.2em; padding-left: 1.3em; color: var(--ink-700); }
.article ul { list-style: disc; }
.article ol { list-style: decimal; }
.article li { margin-bottom: .45em; }
.article li b, .article p b { color: var(--ink-900); }
.article a { text-decoration: underline; text-decoration-color: var(--blue-100); text-underline-offset: 2px; }
.article hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; }

/* .tabs — переключатель "соседних" статей по одной теме, обычно сразу
   после <h1>, до 14 пунктов (переносится на несколько строк, если не
   помещается в один ряд). Разметка непоследовательна между страницами:
   у большинства (57 из 63) текущая/некликабельная вкладка — голый
   текст в <li> без <a> и без class="active"; у части (6 файлов) —
   явный class="active" с <a href="#"> или <span> внутри. Стили считают
   активной вкладку либо по class="active", либо по самому факту
   отсутствия <a> внутри <li> (:has), чтобы оба варианта разметки
   выглядели одинаково, без правки каждой страницы отдельно. */
.article .tabs {
  display: flex; flex-wrap: wrap; gap: 2px 4px; list-style: none;
  margin: 0 0 24px; padding: 0; border-bottom: 1px solid var(--line-soft);
}
.article .tabs li {
  margin: 0 0 -1px; padding: 9px 16px; border-bottom: 2px solid transparent;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  color: var(--ink-500); font-size: .92rem; font-weight: 600;
}
.article .tabs li a, .article .tabs li span { color: inherit; text-decoration: none; }
.article .tabs li:has(a) { transition: color .15s ease, background .15s ease, border-color .15s ease; }
.article .tabs li:has(a):hover { color: var(--blue-700); background: var(--blue-50); }
.article .tabs li.active,
.article .tabs li:not(:has(a)) {
  color: var(--blue-800); border-bottom-color: var(--blue); background: var(--blue-50);
}

/* .clearfix — обёртка вокруг плавающей картинки (.thumbnail.rside/lside)
   без своего текста-обтекания рядом, встречается в паре с "карточками
   препаратов" и отдельными блоками с картинкой+абзацем. Без этого
   правила float вылетает за пределы своего же div (высота родителя
   схлопывается до текста), из-за чего следующий блок наезжает на ещё не
   отработавшую картинку — сайт-вайд баг, не про одну страницу. */
.clearfix::after { content: ""; display: table; clear: both; }

/* .med-grid/.med-card — карточки препаратов/добавок (картинка + название +
   короткие характеристики + кнопка «Подробнее»), сетка вместо плавающих
   картинок вперемешку с текстом. */
.med-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 20px; margin: 20px 0 28px; clear: both; }
.med-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-md); padding: 20px; box-shadow: var(--shadow-sm); }
.med-card img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--blue-50); border-radius: var(--radius-sm); margin-bottom: 14px; float: none; }
.med-card h3 { margin: 0 0 10px; font-size: 1.05rem; }
.med-card p { margin: 0 0 6px; font-size: .9rem; color: var(--ink-700); }
.med-card p:has(.btn) { margin: auto 0 0; padding-top: 4px; }

.figure-float {
  float: right; width: 280px; margin: 4px 0 20px 28px; border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--line-soft);
}
.figure-float img { transition: transform .3s ease; }
.figure-float:hover img { transform: scale(1.03); }
.figure-caption { font-size: .78rem; color: var(--ink-500); padding: 8px 10px; background: var(--blue-50); }

/* Раскрывающиеся картинки (клик — лайтбокс, см. main.js). Имя класса и rside/lside
   намеренно совпадают со старой Bitrix-вёрсткой (там — class="thumbnail rside" на
   <img> внутри <a class="fancy">) — при переносе контента разметку можно копировать
   как есть, без переделки. rside/lside — сами по себе плавающая картинка сбоку от
   текста (аналог .figure-float, но без обёртки <figure>); можно применять и без
   них, просто добавив .thumbnail к картинке в существующей раскладке (grid, cert-block
   и т.п.) — тогда только добавляется курсор и клик, без изменения позиционирования. */
.thumbnail {
  cursor: zoom-in; transition: box-shadow .2s ease;
}
.thumbnail:hover { box-shadow: var(--shadow-md); }
.thumbnail.rside,
.thumbnail.lside {
  max-width: 320px; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  border: 1px solid var(--line-soft);
}
.thumbnail.rside { float: right; margin: 4px 0 20px 28px; }
.thumbnail.lside { float: left; margin: 4px 28px 20px 0; }

.lightbox {
  display: none; position: fixed; inset: 0; z-index: 400;
  align-items: center; justify-content: center; padding: 24px;
}
.lightbox.is-open { display: flex; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(20, 28, 40, .78); }
.lightbox-box {
  position: relative; z-index: 1; max-width: min(920px, 100%); max-height: 100%;
  background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.lightbox-img { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; margin: 0 auto; }
.lightbox-caption { margin: 0; padding: 12px 18px; font-size: .9rem; color: var(--ink-700); background: var(--blue-50); }
.lightbox-caption:empty { display: none; }
.lightbox-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: none;
  background: rgba(255,255,255,.92); color: var(--ink-900); font-size: 1.1rem; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.lightbox-close:hover { background: #fff; }
@media (max-width: 600px) {
  .lightbox { padding: 12px; }
  .lightbox-img { max-height: 70vh; }
  .thumbnail.rside, .thumbnail.lside { float: none; max-width: 100%; margin: 0 0 16px; }
}

.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; clear: both; margin: 20px 0; }
.gallery-grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.gallery-grid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.gallery-grid figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm); background: var(--blue-50); }
.gallery-grid img { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 4/3; }
/* single column: no sibling tile to height-match, so drop the forced 4/3 box */
.gallery-grid.cols-1 img { aspect-ratio: auto; height: auto; }
.gallery-note { font-size: .85rem; color: var(--ink-500); font-style: italic; clear: both; }

.price-table-wrap { overflow-x: auto; margin: 18px 0 8px; }
.price-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 360px; }
.price-table thead th {
  text-align: left; background: var(--blue); color: #fff; font-family: var(--font-heading);
  font-weight: 700; padding: 12px 16px; font-size: .85rem; letter-spacing: .02em;
}
.price-table thead th:last-child { text-align: right; }
.price-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-700); }
.price-table tbody td:last-child { text-align: right; font-weight: 700; color: var(--blue-800); white-space: nowrap; }
.price-table tbody tr:hover { background: var(--blue-50); }
.price-table tbody td.hdr, .price-table tbody td.subhdr { text-align: left; white-space: normal; }
.price-table tbody td.hdr { background: var(--blue-50); font-weight: 700; color: var(--blue-800); font-family: var(--font-heading); }
.price-table tbody td.subhdr { background: var(--surface); font-weight: 700; color: var(--ink-700); font-size: .88rem; }
.price-table .red { color: #c0392b; }
.price-table strike { color: var(--ink-300); font-weight: 400; }
.price-table--compare thead th:last-child,
.price-table--compare tbody td:last-child {
  text-align: left; font-weight: 400; color: var(--ink-700); white-space: normal;
}
.price-note { font-family: var(--font-heading); font-weight: 700; color: var(--blue-800); font-size: 1.1rem; margin: 10px 0 18px; }

/* .data-table — обычная таблица данных в тексте статьи (не прайс: без
   особого оформления последней колонки под цену). Как и price-table,
   не тянет мобильную вёрстку в сторону — если контент не помещается,
   скроллится сама таблица внутри .data-table-wrap, а не вся страница. */
.data-table-wrap { overflow-x: auto; margin: 18px 0 8px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data-table thead th {
  text-align: left; background: var(--blue); color: #fff; font-family: var(--font-heading);
  font-weight: 700; padding: 12px 16px; font-size: .85rem; letter-spacing: .02em;
}
.data-table tbody td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); color: var(--ink-700); vertical-align: top; }
.data-table tbody tr:hover { background: var(--blue-50); }

.review-item { padding: 22px 0; border-bottom: 1px solid var(--line-soft); }
.review-item:last-child { border-bottom: none; padding-bottom: 0; }
.review-item:first-child { padding-top: 0; }
.review-meta { font-size: .85rem; color: var(--ink-500); margin-bottom: 8px; }
.review-meta b { color: var(--ink-900); font-weight: 700; }
.review-item p { margin: 0; }
.price-source-link { font-size: .85rem; margin: -6px 0 10px; }

.cert-block { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: center; background: var(--blue-50); border-radius: var(--radius-md); padding: 20px; margin: 18px 0; }
.cert-block img { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.cert-block p { margin: 0; font-size: .9rem; color: var(--ink-700); }

.related-block { clear: both; background: var(--blue-50); border-radius: var(--radius-md); padding: 20px 22px; margin: 20px 0; }
.related-block h2 { margin-top: 0; }

@media (max-width: 980px) {
  .page-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sidebar { position: static; }
  .sidebar-heading { display: none; }
  .sidebar-toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
    padding: 14px 16px; cursor: pointer; box-shadow: var(--shadow-sm);
    transition: border-radius .15s ease, border-color .15s ease;
  }
  .sidebar-toggle-label { font-size: .95rem; color: var(--ink-900); }
  .sidebar-toggle .chevron { border-color: var(--blue-700); }
  .sidebar-toggle[aria-expanded="true"] .chevron { transform: rotate(-135deg); margin-top: 3px; }
  /* когда открыт — низ становится плоским и сливается с панелью ниже, без шва */
  .sidebar-toggle[aria-expanded="true"] {
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    border-bottom-color: transparent;
  }
  .sidebar-accordion {
    max-height: 0; overflow: hidden; transition: max-height .3s ease, border-color .15s ease;
    background: var(--surface); border: 1px solid transparent; border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md); padding: 0 16px;
  }
  .sidebar-accordion.is-open { max-height: 2400px; padding: 6px 16px 14px; border-color: var(--line); }
  .article { padding: 26px 22px; }
  .figure-float { float: none; width: 100%; margin: 0 0 20px; }
  .cert-block { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid.cols-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 360px was a comfortable floor on desktop, but on narrow phones it's
     wider than .article's own content box, forcing needless side-scroll. */
  .price-table { min-width: 0; }
}

/* =========================== MAP / FOOTER =========================== */
/* Тот же паттерн, что у .hero-slider-section/.slider: цветная секция сама
   растянута на всё окно (background на .map-section/.site-footer), а
   содержимое внутри центрировано и ограничено шириной контента через общий
   класс .wrap (max-width 1200px, padding 0 24px) — НЕ через max-width/margin
   на самом блочном элементе секции (так и была рассинхронизация ширины
   между картой и футером). */
.map-section { background: var(--blue); padding: 24px 0 0; }
.map-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 340px; }
.map-embed { position: relative; min-height: 340px; background: var(--blue-100); }
.map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
.map-contacts { color: #fff; padding: 40px 36px 40px 0; display: flex; flex-direction: column; justify-content: center; }
.map-contacts h2 { color: #fff; margin-top: 0; }
.map-contacts dl { margin: 0; }
.map-contacts dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--on-blue-soft); margin-top: 16px; }
.map-contacts dt:first-child { margin-top: 0; }
.map-contacts dd { margin: 4px 0 0; font-size: .98rem; }
.map-contacts a { color: #fff; }
.map-contacts a:hover { text-decoration: underline; }

@media (max-width: 780px) {
  .map-wrap { grid-template-columns: minmax(0, 1fr); }
  .map-embed { min-height: 260px; margin-top: 20px; }
  /* слева/справа 0 — инсет уже даёт .wrap (24px), своя левая/правая не нужна,
     иначе на мобильных получится двойной отступ */
  .map-contacts { padding: 32px 0 0; }
}

.site-footer { background: var(--blue); color: rgba(255,255,255,.78); padding: 22px 0; }
.footer-row { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: .85rem; }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand .brand-name { color: #fff; font-size: .95rem; }
.footer-brand .brand-tagline { color: var(--on-blue-soft); font-size: .78rem; }
.footer-contacts { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.footer-contacts a { color: #fff; }
.footer-copy { width: 100%; display: flex; align-items: center; justify-content: center; gap: 14px; text-align: center; color: rgba(255,255,255,.6); font-size: .78rem; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.footer-metrika { display: inline-flex; line-height: 0; background: #fff; border-radius: 4px; padding: 3px; }
.footer-metrika img { display: block; }

/* =========================== MISC =========================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 30px;
  background: var(--blue); color: #fff; font-weight: 700; font-size: .92rem; border: none; cursor: pointer;
}
.btn:hover { background: var(--blue-700); color: #fff; }

/* ===== .infoframe — выделенная врезка в тексте статьи (акции, формулы, важные тезисы).
   .infoframe_blue — тот же блок с более насыщенным фоном (в исходной вёрстке ставился
   в пару к .infoframe: «для мужчин / для женщин», «моложе 40 / старше 40» и т.п.). ===== */
.infoframe, .infoframe_blue {
  margin: 18px 0; padding: 16px 20px; border-radius: var(--radius-md);
  border: 1px solid var(--line-soft); background: var(--blue-50);
}
.infoframe_blue { background: var(--blue-100); border-color: var(--blue-100); }
.infoframe > :first-child, .infoframe_blue > :first-child { margin-top: 0; }
.infoframe > :last-child, .infoframe_blue > :last-child { margin-bottom: 0; }
.infoframe h3, .infoframe h4, .infoframe_blue h3, .infoframe_blue h4 { margin: 0 0 6px; color: var(--blue-800); }

/* ===== .calc — интерактивные калькуляторы раздела «Ожирение» (ИМТ, идеальный вес,
   калорийность рациона, расход калорий, тест пищевого поведения). Скрипты расчёта
   встроены прямо в соответствующие страницы. ===== */
.calc { margin: 20px 0 28px; }
.calc__panel {
  background: var(--blue-50); border: 1px solid var(--line-soft);
  border-radius: var(--radius-md); padding: 20px 22px;
}
.calc__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.calc__row:last-child { margin-bottom: 0; }
.calc__row > label { flex: 1 1 auto; min-width: 200px; color: var(--ink-700); font-size: .94rem; }
.calc input, .calc select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font: inherit; background: #fff; color: var(--ink-900); max-width: 100%;
}
.calc input[type="number"], .calc input[type="text"] { width: 120px; }
.calc select { max-width: 280px; }
.calc input[readonly] { background: #fff; font-weight: 700; border-color: var(--blue-100); }
.calc__result { margin: 14px 0 0; font-weight: 700; color: var(--blue-800); }
.calc__result:empty { display: none; }
.calc__error { margin: 12px 0 0; color: #c0392b; font-size: .9rem; }
.calc__error:empty { display: none; }
.calc .btn { margin-top: 4px; }

/* ИМТ: две колонки — «данные» и «результат» */
.calc--split .calc__panel { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.calc--split .calc__col { min-width: 0; }
.calc--split .calc__col h3 { margin: 0 0 14px; font-size: 1rem; }
@media (max-width: 640px) { .calc--split .calc__panel { grid-template-columns: 1fr; } }

/* поля прямо в ячейках таблицы (таблица калорийности, расход калорий при нагрузке) */
.calc-table__search { margin: 4px 0 14px; }
.calc-table__search input { width: 100%; max-width: 320px; }
.calc-table .data-table td { vertical-align: middle; }
.calc-table .data-table input { width: 78px; padding: 5px 7px; }
.calc-table tr.calc-sum th, .calc-table tr.calc-sum td {
  position: sticky; bottom: 0; background: var(--blue-100);
  font-weight: 700; color: var(--blue-800); border-top: 2px solid var(--blue);
}

/* тест пищевого поведения (голландский опросник DEBQ) */
.calc-quiz { counter-reset: q; margin: 20px 0 8px; }
.calc-quiz__item { margin: 0 0 18px; padding: 16px 20px; background: var(--blue-50); border-radius: var(--radius-md); border: 1px solid var(--line-soft); }
.calc-quiz__q { font-weight: 700; color: var(--ink-900); margin: 0 0 10px; }
.calc-quiz__q::before { counter-increment: q; content: counter(q) ". "; color: var(--blue-700); }
.calc-quiz__opts { display: flex; flex-direction: column; gap: 4px; }
.calc-quiz__opts label { display: flex; align-items: center; gap: 8px; color: var(--ink-700); font-size: .94rem; cursor: pointer; }
.calc-quiz__result { margin: 16px 0 0; padding: 16px 20px; border-radius: var(--radius-md); background: var(--blue-100); }
.calc-quiz__result:empty { display: none; }
.calc-quiz__result p { margin: 0 0 8px; }
.calc-quiz__result p:last-child { margin-bottom: 0; }