/* ═══════════════════════════════════════════════════════════════════════════
   ВЕРАНДА · витрина · язык.css

   Всё, что появилось на витрине из-за четырёх языков, и ничего больше.
   Отдельным файлом, а не строками внутри витрина.css: так видно цену
   многоязычности, и так её можно снять одной строкой в index.html, если
   владелец ответит на E8 «только русский».

   Ни одного своего цвета и ни одного своего кегля: всё из токенов.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── пока словарь не пришёл ────────────────────────────────────────────────
   🔴 Текста в разметке нет ни одного, поэтому до загрузки словаря шапка и
   подвал — пустые рамки. Показать их пустыми и через полсекунды залить
   текстом хуже, чем подождать: подскок читается как поломка. Атрибут
   `data-язык` ставит js/язык.js ровно тогда, когда словарь на руках.
   Экран этим не закрыт: в нём стоит своя надпись «Секунду…».            */
html:not([data-язык]) .masthead,
html:not([data-язык]) .foot { visibility: hidden; }

/* ── переключатель ─────────────────────────────────────────────────────────
   Четыре кнопки, а не список с раскрытием: языков всего четыре, и все
   четыре подписаны так, как их называет носитель — RU · EN · 中文 · VI.
   Гость ищет глазами свой алфавит, а не слово «Language».

   На 390 в верхнюю строку шапки он не влезает: «ПХУКЕТ · С 2008 ГОДА» и
   WhatsApp занимают её целиком. Поэтому строка переносится — переключатель
   уезжает на свою полосу под ними, а на широком экране встаёт в один ряд.  */
.mast-top { flex-wrap: wrap; }

.mast-lang {
  display: flex;
  align-items: stretch;
  gap: var(--v-1);
  order: 3;
  flex: 1 0 100%;
  justify-content: flex-end;
  border-top: var(--v-bw) solid var(--v-line);
}

.lang-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0 var(--v-3);
  min-height: var(--v-tap);
  min-width: var(--v-tap);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--v-ink-2);
  font: 600 var(--v-fs-cap)/1 var(--v-font-ui);
  letter-spacing: var(--v-track-2);
}

/* Своё имя языка иероглифами: гротеск латиницы их не держит. */
.lang-btn[lang="zh"] { font-family: var(--v-font-cjk); letter-spacing: 0; }

.lang-btn:hover { color: var(--v-brand); }

.lang-btn.is-on {
  color: var(--v-brand);
  border-bottom-color: var(--v-brand);
}

.lang-btn:focus-visible {
  outline: var(--v-focus-w) solid var(--v-focus);
  outline-offset: calc(var(--v-focus-off) * -1);
}

@media (min-width: 720px) {
  .mast-lang {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    border-top: 0;
  }
  .mast-wa { order: 3; }
}

/* ── китайский ─────────────────────────────────────────────────────────────
   🔴 Иероглифы плотнее латиницы по ширине, но требуют больше межстрочного:
   то, что на латинице читается при 1.62, на китайском давит. И переносов в
   привычном смысле там нет — строка рвётся почти где угодно, поэтому ни
   одного «висящего» правила расстановки здесь не нужно.

   Своего CJK-шрифта мы не грузим: файл весит 5–10 МБ и стоил бы дороже
   всей витрины на мобильном трафике (токены, --v-font-cjk). Берём системную
   антикву — она у гостя уже стоит.                                        */
html[data-язык="zh"] {
  --v-lh:   1.8;
  --v-lh-2: 1.6;
  --v-lh-h: 1.3;
  --v-track:   .05em;
  --v-track-2: .04em;
  --v-font-h:    var(--v-font-cjk);
  --v-font-text: var(--v-font-cjk);
}

/* Гротеск в кнопках и метках остаётся гротеском там, где строка латинская
   (адрес, номер, ฿), и переходит на системный CJK там, где иероглифы. */
html[data-язык="zh"] {
  --v-font-ui: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
               "Noto Sans CJK SC", system-ui, sans-serif;
}

/* Прописные к иероглифам не применяются, а к латинице внутри той же строки
   применяются — получается разнобой. Гасим на китайском целиком. */
html[data-язык="zh"] .kicker,
html[data-язык="zh"] .mark,
html[data-язык="zh"] .mast-place,
html[data-язык="zh"] .mast-nav a,
html[data-язык="zh"] .mast-wa,
html[data-язык="zh"] .btn { text-transform: none; }

/* ── вьетнамский ───────────────────────────────────────────────────────────
   Диакритика ставится и над буквой, и под ней — двухъярусные знаки
   (ế, ộ, ữ) при межстрочном 1.62 задевают соседнюю строку.               */
html[data-язык="vi"] {
  --v-lh:   1.72;
  --v-lh-2: 1.5;
  --v-lh-h: 1.16;
}

/* ── длина строки ──────────────────────────────────────────────────────────
   🔴 Проверяется на самом длинном варианте, а не на исходном. Русский и
   вьетнамский длиннее английского на 15–30 %, китайский вдвое короче.
   Кнопка, которая по-английски «Order», по-русски «Забронировать» — и уже
   не помещается. Поэтому подписи кнопок и меток переносятся, а не режутся
   многоточием: обрезанная подпись врёт молча.                             */
.btn > span,
.row-link > span,
.mark { overflow-wrap: break-word; }

.mast-nav a { padding: 0 var(--v-2); text-align: center; line-height: 1.2; }

/* ── мелкие многострочные абзацы ───────────────────────────────────────────
   Найдено на 390 при сверке четырёх языков (шаг 14). У этих шести правил в
   витрина.css межстрочное записано числом — `…/1.4`, а не токеном
   `var(--v-lh-2)`, — и смена языка их не касается. На латинице и кириллице
   1.4 верно, менять его там незачем; на китайском строка из иероглифов при
   1.4 садится на соседнюю, на вьетнамском её задевает нижняя диакритика.
   Поэтому поправка стоит здесь, у языка, а не в общей вёрстке.            */
html[data-язык="zh"] .snapshot-bar p,
html[data-язык="zh"] .field-note,
html[data-язык="zh"] .field-err,
html[data-язык="zh"] .track-t i,
html[data-язык="zh"] .pick-in i,
html[data-язык="zh"] .cart-sub { line-height: 1.7; }

html[data-язык="vi"] .snapshot-bar p,
html[data-язык="vi"] .field-note,
html[data-язык="vi"] .field-err,
html[data-язык="vi"] .track-t i,
html[data-язык="vi"] .pick-in i,
html[data-язык="vi"] .cart-sub { line-height: 1.55; }