/* Общий каркас шапки wse.am в разделе «Новостройки Батуми».

   15.10.2026, макет v3 (https://claude.ai/artifact/2npAki4QM7RpKftjET2BjX):
   при переключении Ереван / Батуми / Пхукет шапка не прыгает. Высота, ширина
   контейнера, отступы, знак WSE.AM и переключатель городов повторяют React-шапку
   главной и Пхукета (src/components/Header.jsx, src/styles/header.css):
     ≥1024: строка 76 + 1 px линия = 77, контейнер 1320, поля clamp(16px,4vw,48px),
            шаг 20, знак 22 px, город 30 px высотой;
     <1024: строка 60 + 1 = 61, шаг 12, знак 19 px, город 26 px, справа бургер;
     ≤374:  города уходят в меню (как у главной).
   Меняешь геометрию в header.css главной — поменяй и здесь, и в
   erevan-nb/css/wse-header.css.

   Подключается последним в <head> (scripts/batumi-seo-patch.mjs), бургер рисует
   js/controls.js (тоже через патч). Сюда же сведены правила, которые раньше
   переносили города на вторую строку (style data-wse-city, ≤900). */

header.top,
.bt-header .bt-header__in {
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: flex-start;
  flex-wrap: nowrap; gap: 20px;
  width: 100%; max-width: 1320px; margin-inline: auto;
  padding: 0 clamp(16px, 4vw, 48px);
}
/* Высота с линией снизу, как у .hdr главной (76 + 1). */
header.top { height: 77px; border-bottom: 1px solid transparent; }
.bt-header .bt-header__in { height: 76px; }

/* листинг лежит на тёмном кадре: переключатель как у прозрачной шапки главной (.hdr--over) */
header.top .wse-city { background: rgba(255, 255, 255, .14); backdrop-filter: blur(10px); }
header.top .wse-city__item { color: #fff; opacity: .7; }
header.top .wse-city__item.is-active { background: rgba(255, 255, 255, .95); color: #12131A; opacity: 1; }

/* прежний перенос городов на вторую строку больше не нужен */
header.top::after, .bt-header__in::after { content: none !important; }
header.top .wse-city, .bt-header__in .wse-city { order: 0; width: auto; overflow: visible; }

.wse-logo { min-height: 44px; font-size: 22px; flex-shrink: 0; }
/* на компьютере знак у главной на 1 px выше (замер по пикселям надписи, 15.10) */
@media (min-width: 1024px) { .wse-logo { position: relative; top: -1px; } }
.wse-city { flex-shrink: 0; }
.wse-city__item { height: 30px; padding: 0 14px; font-size: 14px; }

/* ── бургер и меню (только < 1024) ── */
.wse-burger { display: none; }
.wse-menu-city { display: none; }

@media (max-width: 1023px) {
  header.top, .bt-header .bt-header__in { gap: 12px; }
  header.top { height: 61px; }
  .bt-header .bt-header__in { height: 60px; }

  .wse-logo { font-size: 19px; }
  .wse-city__item { height: 26px; padding: 0 10px; font-size: 12.5px; }

  .wse-burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: auto; flex-shrink: 0;
    padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
  }
  .wse-burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor;
    transition: transform .2s, opacity .2s; }
  .wse-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .wse-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .wse-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Контролы раздела (язык, тема, «Узнать цены») уезжают в выпадающую карточку. */
  header.top, .bt-header .bt-header__in { position: relative; }
  .bt-ctls[data-wse-menu] {
    display: none; position: absolute; z-index: 30;
    top: calc(100% + 6px); right: clamp(16px, 4vw, 48px);
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px;
    min-width: 220px; margin: 0; padding: 14px;
    border-radius: 16px; box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
    background: var(--bt-surface, var(--bt-bg, #fff));
  }
  .bt-ctls[data-wse-menu].is-open { display: flex; }
  .bt-ctls[data-wse-menu] .bt-ctl--cta { flex: 1 0 100%; height: 44px; font-size: 14px; }
  .bt-ctls[data-wse-menu] .wse-menu-city { flex: 1 0 100%; }
  .bt-ctls[data-wse-menu] .bt-ctl--cta svg { display: none; }
  /* листинг лежит на тёмном кадре: карточка тоже тёмная, контролы там белые */
  header.top .bt-ctls[data-wse-menu] { background: #14161A; border: 1px solid rgba(255, 255, 255, .12); }
}

/* как у главной ≤479: чуть ужимаем знак, города и зазор */
@media (max-width: 479px) {
  header.top, .bt-header .bt-header__in { gap: 8px; }
  .wse-logo { font-size: 17px; margin-right: 2px; }
  .wse-city__item { padding: 0 7px; font-size: 12px; }
  .wse-burger { width: 40px; }
  /* 16.10.2026: бургер ужат до 40 px, невидимая зона нажатия добирает 44 (к краю экрана) */
  .wse-burger { position: relative; }
  .wse-burger::before { content: ""; position: absolute; top: 0; bottom: 0; left: -2px; right: -2px; }
}

@media (max-width: 374px) {
  header.top > .wse-city, .bt-header__in > .wse-city { display: none; }
  .wse-menu-city { display: flex; }
}

/* ── переключатель языка раздела (15.10.2026) ──
   RU · EN · HY · 中文 ссылками на ту же страницу (js/controls.js, через патч).
   Геометрия та же, что у прежних кнопок .bt-ctl--seg в controls.css. */
.bt-lang a {
  display: inline-flex; align-items: center; height: 100%; padding: 0 10px;
  font: 600 12px/1 var(--bt-font-body, var(--sans, inherit)); color: var(--btn-ghost-text);
  text-decoration: none; white-space: nowrap;
}
.bt-lang a:hover { color: var(--btn-ghost-hover, var(--btn-secondary-text)); }
.bt-lang a[aria-current] { background: var(--bt-surface-3, rgba(0, 0, 0, .07)); color: var(--btn-secondary-text); }
.top .bt-lang a[aria-current] { background: rgba(255, 255, 255, .16); }
.bt-lang a:focus-visible { outline: 2px solid var(--btn-primary-bg); outline-offset: -2px; }
@media (max-width: 1023px) {
  /* в карточке меню: во всю ширину, по четверти на язык, палец попадает */
  .bt-ctls[data-wse-menu] .bt-lang { flex: 1 0 100%; height: 40px; }
  .bt-ctls[data-wse-menu] .bt-lang a { flex: 1; justify-content: center; font-size: 13px; }
}

/* ── зона нажатия 44 px (16.10.2026, проверка на iPhone) ──
   «Смотреть проект» на листинге (26 px), «← Все проекты Батуми» (21), разделы карточки
   (36), малые кнопки (38). Вид прежний: растёт невидимая подложка по центру, вне потока.
   Живёт здесь, а не в index.html и project.css: этот файл копирует batumi-seo-patch.mjs,
   и правка переживает пересборку раздела. */
.lnk, .bt-back, .bt-anchors button, .bt-btn--sm { position: relative; }
.lnk::before, .bt-back::before, .bt-anchors button::before, .bt-btn--sm::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}

/* Первый экран листинга: 100dvh меняется, когда Safari на iPhone прячет и показывает
   панели при прокрутке, и всё под героем ездит вверх-вниз. svh постоянен (высота при
   видимых панелях). Где svh не знают, остаётся прежнее правило из index.html. */
.stage { min-height: 100svh; }
