/* ═══ Досуговый сайт tyotya.ru ═══
 *
 * Стоит отдельно от вёрстки сервисного сайта: её правила приходят вместе с
 * page_header(), и перебивать их пришлось бы своими !important. Здесь их ноль.
 *
 * Шкала отступов — единственный источник вертикальных расстояний. Шаг 4 px,
 * значения растут вдвое: глаз различает кратность, а не случайные 5, 7, 9, 13.
 * Правило иерархии: от заголовка до СВОЕГО текста всегда меньше, чем до
 * соседнего блока. Внутри группы --s2, между группами --s5, между разделами --s7.
 *
 * Межстрочное привязано к кеглю: чем крупнее, тем плотнее. «Не заголовок» —
 * ещё не «длинный текст»: короткий подзаголовок в узкой колонке при 1.6
 * расползается, ему --lh-deck.
 */

/* ── своя страница, чужого CSS нет, поэтому нет и ни одного !important ──
   
   ШКАЛА ОТСТУПОВ. Все вертикальные расстояния берутся только отсюда: иначе
   выходит набор случайных чисел (4, 5, 6, 7, 9, 11, 13), и иерархия не читается.
   Шаг 4 px, значения растут вдвое — глаз различает именно кратность.

   ПРАВИЛО ИЕРАРХИИ. Расстояние от заголовка до СВОЕГО текста всегда меньше,
   чем расстояние до соседнего блока. Так видно, что к чему относится, без
   линеек и рамок. Внутри группы --s2, между группами --s5, между разделами --s7.

   МЕЖСТРОЧНОЕ. Чем крупнее кегль, тем плотнее строки: 1.05 у H1, 1.15 у H2,
   1.3 у названий карточек, 1.6 у текста. Монотонно, а не как придётся. */
:root {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  /* Межстрочное. Чем крупнее кегль, тем плотнее строки — но «не заголовок»
     это ещё не «длинный текст». Подзаголовок под названием, подписи в
     карточках и лид — короткие куски в узкой колонке: при 1.6 строки
     расползаются и читаются как отдельный блок, а не как продолжение
     заголовка. Им --lh-deck. Полуторный оставлен только там, где человек
     действительно читает абзацами. --lh-flat для бейджей и кнопок, где
     высоту задаёт padding */
  --lh-flat: 1; --lh-h1: 1.05; --lh-head: 1.2; --lh-title: 1.3;
  --lh-deck: 1.45; --lh-text: 1.65;

  /* ПЯТЬ РАССТОЯНИЙ ПОДЧИНЕНИЯ. Каждое значит ровно одно, и только они стоят
     между блоками по вертикали. Пока их не было, стыки разного смысла
     получали одинаковые 24 и 48, и по расстоянию нельзя было понять, что
     чему принадлежит: фильтры висели ровно посередине между заголовком и
     списком, служебная строка — посередине между списком и призывом.
       --gap-tie   подпись и её строка; строка и её уточнение
       --gap-sub   заголовок и его текст (заголовок мельче 24 px)
       --gap-line  соседние сведения внутри блока; крупный заголовок и текст
       --gap-head  заголовок раздела и содержимое; текст блока и его кнопка
       --gap-group группа и соседняя группа внутри блока
       --gap-block блок и блок
       --gap-part  часть страницы и другая часть

     Первые четыре — внутренности текстовых блоков, и это было главной
     бедой: одно и то же отношение получало то 4, то 8, то 12 в разных
     карточках. Подпись «СПОРТ» прижималась к названию на 4 в одной карточке
     и на 8 в другой, «Ничего не нашлось» отстояло от своего текста дальше,
     чем заголовок раздела от списка. Из таких расхождений и складывается
     ощущение, что блок не собран. */
  --gap-tie: 4px; --gap-sub: 8px; --gap-line: 12px; --gap-head: 16px;
  --gap-group: 24px; --gap-block: 48px; --gap-part: 64px;
  --ink: #17120f; --mute: #6f635d; --faint: #786b65;
  --line: #efe6e1; --soft: #faf6f4; --accent: #F18E90;
  /* Серые подобраны расчётом, а не на глаз: прежние #9a8d87 и var(--mute) давали
     3.21 и 4.27 к белому при норме 4.5 — счётчики, даты и адреса читались с
     трудом. Теперь 5.13 и 5.80 */
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--ink);
  font: 400 16px/var(--lh-deck) "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: "Onest", system-ui, sans-serif; margin: 0; text-wrap: balance; }
p, ul { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 var(--s4); }

/* Куда попал курсор клавиатуры. :where() держит вес правила нулевым, чтобы
   свои рамки у полей оставались главнее. Цвет тёмный, а не розовый: розовая
   рамка на белом даёт 2.3 к фону и сама нечитаема */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
:where(.cta, .foot) :where(a, button):focus-visible { outline-color: #fff; }
.bar :where(a, button):focus-visible { outline-offset: 2px; }
/* Заголовок для порядка документа: на странице списка между h1 и названиями
   карточек не было второго уровня — получался скачок h1 → h3 */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ── шапка ── */
/* Шапка тёплого розового тона в цвет логотипа: серый был нейтрален, но чужой
   и розовая линия. Серый #f8f8f8 был нейтрален, но чужой — логотип и кнопка
   розовые, а полоса под ними серая */
.bar { position: sticky; top: 0; z-index: 50; background: #fff8f6;
  border-bottom: 1px solid #f7dad5; }
/* Шапка всегда в одну строку: ни логотип уменьшать, ни кнопку уводить вниз
   нельзя. Поэтому на узких экранах ужимается только кнопка — кегль и поля */
/* На телефоне плашка ниже: логотип уменьшать нельзя, он 55 px, — поэтому
   ужимаются поля строки. 80 px липкой шапки на экране в 844 это много */
.bar__in { max-width: 1180px; margin: 0 auto; padding: 6px var(--s4);
  display: flex; align-items: center; flex-wrap: nowrap; gap: var(--s2); }
@media (min-width: 560px) { .bar__in { padding: var(--s3) var(--s4); } }
@media (min-width: 560px) { .bar__in { gap: var(--s3); } }
@media (min-width: 860px) { .bar__in { gap: var(--s5); } }
.logo { flex: 0 0 auto; line-height: var(--lh-flat); }
/* Логотип не уменьшаем — это знак, по которому сайт узнают. Всё, что не
   влезает рядом с ним на узком экране, уходит на вторую строку */
.logo img { width: 142px; height: auto; display: block; }
@media (min-width: 860px) { .logo img { width: 178px; } }
/* Меню появляется с 1100 px, а не с 860. На 900 оно влезало только переносами:
   «Кружки и секции» в три строки, «Сопровождение детей» в две — шапка
   разъезжалась на три этажа. Ниже порога работает бургер */
.menu { display: none; gap: var(--s5); }
@media (min-width: 1100px) { .menu { display: flex; } }
.menu a { font-size: 15px; line-height: var(--lh-title); font-weight: 500; color: #4a403b;
  white-space: nowrap; }
.menu a:hover { color: var(--accent); }
/* В шапке только навигация и контекст: логотип, разделы, город, вход.
   Кнопка заказа отсюда убрана — её место и положение занял выбор города,
   а сам заказ живёт в розовом блоке меню и в призывах на страницах.
   На узком экране город стоит между логотипом и иконкой меню, иконка —
   всегда последняя у края; на широком город уходит вправо, как раньше кнопка */
.bar__right { display: flex; align-items: center; gap: var(--s4); order: 3; }
.bar__cta { order: 2; margin-left: auto; margin-right: auto; }
@media (min-width: 1100px) {
  .bar__right { order: 2; margin-left: auto; }
  .bar__cta { order: 3; margin-left: 0; margin-right: 0; }
}
/* ЗАКАЗАТЬ АВТОНЯНЮ — плоская плашка нашим розовым, белый текст.
   Без градиента и теней: объём тут лишний, кнопка не должна казаться
   тяжелее логотипа рядом */
.btn-dark { display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; padding: 9px 12px; background: var(--accent); color: #fff;
  line-height: var(--lh-head); font-weight: 500; border-radius: 999px;
  white-space: nowrap; text-align: center; transition: background-color .16s ease; }
.btn-dark:hover { background: #e4787c; }
.btn-dark .short { display: none; }
/* На 320 px логотип в 142 px и полный текст в строку не уживаются, а уменьшать
   ни то, ни другое нельзя — там надпись переносится в две строки */
@media (max-width: 359px) { .btn-dark { white-space: normal; line-height: 1.2; border-radius: 16px;
  min-width: 0; flex-shrink: 1; } }
/* По горизонтали поля узкие, по вертикали — чтобы в кнопку можно было
   попасть пальцем: при 6 px высота выходила 26, это мало для касания */
@media (min-width: 390px) { .btn-dark { font-size: 13px; padding: 9px 14px; } }
@media (min-width: 560px) { .btn-dark { font-size: 14px; padding: 9px 15px; } }

/* ── выбор города ──
   Та же плашка, что была у заказа: розовая, с шевроном. Раскрывается не
   маленьким списком, а панелью из-под шапки — как меню: регионов четыре, а
   городов Подмосковья под Москвой шесть десятков, в список они не влезают */
/* Белая плашка с такой же рамкой, как у иконки меню.
   Своим правилом целиком, без .btn-dark: от него доставался розовый фон на
   наведении, и кнопка города краснела ни с того ни с сего */
.pick { display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: var(--lh-head);
  color: var(--ink); background: #fff; border: 1px solid #e8ded9; border-radius: 999px;
  padding: 6px 13px; white-space: nowrap; cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease; }
.pick:hover { border-color: var(--ink); }
.pick[aria-expanded="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
@media (min-width: 560px) { .pick { font-size: 14px; padding: 6px 15px; } }
@media (min-width: 390px) { .pick { padding: 7px 14px; } }
@media (min-width: 560px) { .pick { padding: 7px 15px; } }
.pick::after { content: ''; width: 6px; height: 6px; flex: 0 0 auto;
  margin: -3px 0 0 8px; align-self: center;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .18s ease; }
.pick[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }

/* Панель со списком. Колонки — чтобы шесть десятков городов читались
   столбиками, а не простынёй в одну колонку */
/* Низ с запасом: последний регион прилипал к краю панели, особенно когда
   список прокручен до конца */
.regs { padding: var(--s5) var(--s5) var(--s8); }
.reg + .reg { margin-top: var(--gap-group); }
.reg__n { display: inline-block; font-family: "Onest", system-ui, sans-serif; font-size: 22px;
  line-height: var(--lh-head); font-weight: 700; letter-spacing: -.02em; padding: 4px 0; }
.reg__n:hover { color: var(--accent); }
/* Где человек сейчас — розовым. Правило .reg--on сбрасывало эту отметку:
   у одинаковой силы побеждает то, что ниже */
.reg__n.on { color: var(--accent); }
.reg__t { margin-top: var(--gap-sub); display: grid; gap: 2px var(--s5);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.reg__t a { padding: 5px 0; font-size: 14px; line-height: var(--lh-title); color: var(--mute); }
.reg__t a:hover { color: var(--accent); }
.reg__t a.on { color: var(--ink); font-weight: 600; }
@media (min-width: 860px) { .regs { padding: var(--s6) var(--s6) var(--s8); } }

/* Город и «Вход» — разного рода: первый говорит, что вам показывают, второй
   ведёт в кабинет. Без черты между ними читается одной надписью */
.bar__login { display: none; padding: 8px 0;
  font-size: 15px; line-height: var(--lh-title); color: var(--mute); }
.bar__login:hover { color: var(--accent); }
@media (min-width: 560px) { .bar__login { display: inline-block; } }
.burger { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #e8ded9;
  background: #fff; border-radius: 10px; cursor: pointer; padding: 0; }
@media (min-width: 390px) { .burger { width: 40px; height: 40px; } }
@media (min-width: 1100px) { .burger { display: none; } }
.burger span { display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px;
  position: relative; transition: background-color .18s ease; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 17px;
  height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .26s cubic-bezier(.2,.8,.3,1); }
.burger span::before { top: -5px; } .burger span::after { top: 5px; }
/* Открыто — три полоски складываются в крестик: средняя гаснет, крайние
   съезжаются к центру и поворачиваются */
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: translateY(-5px) rotate(-45deg); }
/* Меню занимает всё под шапкой: пункты на тёплом светлом сверху, ниже белое
   до низа экрана — иначе под пунктами торчит страница.
   Заливка НЕ ездит: она просто появляется. Ездят только пункты — выезжают
   из-под шапки. Когда ездило всё вместе, да ещё с пружиной, панель
   проскакивала мимо места, пункты дёргались вниз-вверх, а над ними
   раздувалась полоса заливки — это и мельтешило.
   top с +1px: он считается от padding-box, без рамки, и без поправки меню
   накрывает собой нижнюю линию шапки */
/* Панель городов выше экрана: без прокрутки Петербург и Казань под списком
   Подмосковья были недостижимы */
.drawer--city .drawer__in { max-height: calc(100vh - 96px); overflow-y: auto; }
.drawer { position: absolute; top: calc(100% + 1px); left: 0; right: 0; height: 100vh;
  overflow: hidden; background: #fff;
  visibility: hidden; pointer-events: none; }
.drawer.open { visibility: visible; pointer-events: auto; }
/* Плавного гашения у заливки НЕТ нарочно. С transition на opacity при
   закрытии получалась вспышка: animation forwards держит сдвиг, только пока
   висит класс falling, а снимаем мы его по окончании анимации — меню
   мгновенно возвращалось на место и ещё 180 мс гасло уже там */
.drawer__in { background: #fff8f6; border-bottom: 1px solid #f7dad5;
  transform: translateY(-100%); }
.drawer.open .drawer__in { animation: menuIn .34s cubic-bezier(.22, .85, .3, 1) forwards; }
/* Закрытие — улёт вниз всем разом, как на сервисном сайте */
.drawer.falling { visibility: visible; opacity: 1; pointer-events: none;
  animation: menuOut .3s cubic-bezier(.4, 0, 1, .4) forwards; }
.drawer.falling .drawer__in { transform: translateY(0); }
@keyframes menuIn  { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes menuOut { 0% { transform: translateY(0); } 25% { transform: translateY(4vh); }
                     100% { transform: translateY(110vh); } }
/* Розовый блок внизу меню: человек пришёл за афишей, и это единственное место,
   где уместно сказать, чем мы ещё можем быть полезны — не перебивая список */
.drawer__cta { margin: var(--s5) var(--s5) var(--s5); background: var(--accent); color: var(--ink);
  border-radius: 16px; padding: var(--s4) var(--s5) var(--s5); }
.drawer__cta-h { font-family: "Onest", system-ui, sans-serif; font-size: 16px;
  line-height: var(--lh-title); font-weight: 700; }
.drawer__cta-t { margin-top: var(--gap-sub); font-size: 13px; line-height: var(--lh-deck);
  color: rgba(23,18,15,.78); }
.drawer__cta a { display: inline-block; margin-top: var(--gap-head); background: var(--ink); color: #fff;
  font-size: 14px; line-height: var(--lh-title); font-weight: 600; border-radius: 999px;
  padding: 10px 18px; }
.drawer__cta a:hover { background: #3a2f2a; }

/* На широком экране меню не нужно — есть строка разделов. Панель выбора
   города нужна на всех ширинах: кнопка с городом стоит в шапке всегда */
@media (min-width: 1100px) {
  .drawer:not(.drawer--city), .drawer:not(.drawer--city).open,
  .drawer:not(.drawer--city).falling { display: none; }
}
/* Только прямые ссылки меню: правило накрывало и города в панели выбора,
   и каждый из шестидесяти восьми получал рамку пункта меню */
.drawer__in > a { display: block; padding: var(--s4); font-size: 17px; line-height: var(--lh-title);
  font-weight: 500; border-bottom: 1px solid #f7e4e0; }
.drawer__in > a:last-child { border-bottom: 0; }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .drawer.open, .drawer.falling { animation-duration: .01ms; }
}

/* ── первый экран ── */
.top { padding-top: var(--s6); }
.top h1 { font-size: clamp(28px, 4.8vw, 46px); line-height: var(--lh-h1); letter-spacing: -.03em;
  font-weight: 700; max-width: 16ch; }
.lead { margin-top: var(--gap-line); font-size: 16px; line-height: var(--lh-deck); color: var(--mute); max-width: 54ch; }

/* Строка фильтров отбита сверху как новая часть страницы, а снизу к своему
   результату — вдвое теснее. Раньше сверху и снизу было поровну, и фильтры
   читались как самостоятельный блок ни к чему не относящийся */
.scroller { display: flex; gap: var(--s2); overflow-x: auto; scrollbar-width: none;
  padding: 0 var(--s4) var(--s1); margin: var(--gap-block) calc(var(--s4) * -1) 0; }
.scroller::-webkit-scrollbar { display: none; }
.scroller + .scroller { margin-top: var(--gap-line); }   /* две строки фильтров — одна группа */
/* Широкий экран: метки переносятся, а не прячутся за краем. Прокрутка нужна
   телефону, на десктопе обрезанная вторая строка меток читается как поломка */
@media (min-width: 900px) {
  .scroller--wrap { flex-wrap: wrap; overflow: visible; margin-left: 0; margin-right: 0;
    padding-left: 0; padding-right: 0; row-gap: var(--s2); }
}
/* Метки под названием организации: это свойства самого заголовка, поэтому
   прижаты к нему. У строки фильтров в списке роль другая — там отступ блока */
.tagline { margin-top: var(--gap-line); }
/* Возраст — вторая строка меток, прижата к первой как её продолжение.
   Без подписи «Возраст»: «0-6 лет» и так говорит само за себя */
.tagline--ages { margin-top: var(--gap-sub); }
/* Метки — свойство заголовка, а не самостоятельный блок: после них до
   содержимого расстояние группы, а не блока. С 48 под лёгкими пилюлями
   зияла дыра в 52 пикселя вместе с полем прокрутки */
.tagline + .dt, .tagline + .cols { margin-top: var(--gap-group); }
.tagline:last-of-type { padding-bottom: 0; }

/* Высота кнопки задана, а не выведена из кегля: строки «категории» и
   «возраст» были 40 и 34 px, и ряды не совпадали — текст в них плясал.
   Теперь обе 40, а различает их кегль и насыщенность, не рост */
.chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--gap-sub);
  min-height: 40px; border: 1px solid #e8ded9; background: #fff; padding: 0 16px;
  border-radius: 999px; font-size: 15px; line-height: var(--lh-title); font-weight: 500; }
.chip:hover { border-color: var(--accent); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip--ic { padding-left: 9px; }

/* Значок категории: цветной квадрат, знак внутри — маска, поэтому белый на
   любом цвете и красится из CSS, а не восемью копиями svg в шаблоне */
.ic { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; background: var(--ic, var(--accent));
  display: grid; place-items: center; }
.ic i { width: 14px; height: 14px; background: #fff;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain; }
.chip.on .ic { box-shadow: 0 0 0 1px rgba(255,255,255,.25); }

.day { flex: 0 0 auto; width: 60px; padding: var(--s2) 0; border: 1px solid #e8ded9;
  border-radius: 12px; background: #fff; text-align: center; }
/* «Все дни» — выход из выбранного дня, стоит первым в полосе */
.day--all b { font-size: 13px; font-weight: 600; }
.day i { display: block; font-style: normal; font-size: 12px; line-height: var(--lh-title); color: var(--faint); }
.day b { display: block; font-size: 18px; line-height: var(--lh-head); font-weight: 700; margin-top: var(--s1); }
.day:hover { border-color: var(--accent); }
/* Выбранное везде отмечается одинаково — чёрным. Полоса дней стояла с
   розовым, и рядом с кнопками категорий получались два разных «выбрано» */
.day.on { background: var(--ink); border-color: var(--ink); }
.day.on i, .day.on b { color: #fff; }


/* ── раздел ── */
.sec { margin-top: var(--gap-block); }
/* Раздел, с которого начинается другая часть страницы: на главной здесь
   кончаются ленты событий и начинается «что ещё почитать и куда посмотреть» */
.sec--part { margin-top: var(--gap-part); }
.sec__h { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--gap-head); }
.sec__h h2 { font-size: clamp(21px, 3vw, 28px); line-height: var(--lh-head); font-weight: 700; letter-spacing: -.025em; }
/* Поля у ссылок не ради воздуха, а ради пальца: «Все →» было 20 px высотой,
   в такую цель на телефоне не попасть. Поля гасятся отрицательным полем,
   чтобы не поехала линия заголовка */
.sec__h .all { margin-left: auto; margin-bottom: -6px; padding: 6px 0; color: var(--accent);
  font-size: 15px; line-height: var(--lh-title); font-weight: 600; white-space: nowrap; }
.arrows { display: none; gap: var(--s2); }
@media (min-width: 900px) { .arrows { display: flex; } }
.arrows button { font: inherit; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #e8ded9;
  background: #fff; color: var(--ink); cursor: pointer; font-size: 16px; line-height: var(--lh-flat);
  display: grid; place-items: center; padding: 0; }
.arrows button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.arrows button:disabled { opacity: .28; cursor: default; }

/* ── лента ── */
.rail { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding: 2px var(--s4) var(--s2); margin: 0 calc(var(--s4) * -1);
  scroll-padding-left: var(--s4); }
.rail::-webkit-scrollbar { display: none; }
@media (min-width: 1216px) { .rail { padding-left: 0; padding-right: 0; margin: 0; scroll-padding-left: 0; } }
.ev { flex: 0 0 72%; scroll-snap-align: start; display: flex; flex-direction: column; }
@media (min-width: 560px) { .ev { flex-basis: 44%; } }
@media (min-width: 900px) { .ev { flex-basis: calc(25% - 12px); } }
.ev__ph { position: relative; aspect-ratio: 3/2; border-radius: 14px; overflow: hidden; background: #f3ece8; }
.ev__ph img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.ev:hover .ev__ph img { transform: scale(1.04); }
.ev__when, .ev__age { position: absolute; bottom: var(--s2); font-size: 12px; font-weight: 600;
  line-height: var(--lh-flat); padding: 6px 10px; border-radius: 999px; }
.ev__when { left: var(--s2); background: rgba(255,255,255,.94); }
.ev__age { right: var(--s2); background: rgba(23,18,15,.68); color: #fff; }
/* подпись категории и название — одна группа, между ними минимальный шаг */
.ev__cat { margin-top: var(--gap-line); font-size: 11px; line-height: var(--lh-flat); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--accent); }
.ev__t { margin-top: var(--gap-tie); font-size: 17px; line-height: var(--lh-title); font-weight: 700; letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ev__pl { margin-top: var(--gap-line); font-size: 14px; line-height: var(--lh-deck); color: var(--mute); }
/* Цена прижата к низу карточки: названия площадок разной длины, и без этого
   цены в ряду стоят на разной высоте — ряд выглядит неровным */
.ev__pr { margin-top: auto; padding-top: var(--gap-line); font-size: 15px; line-height: var(--lh-title); font-weight: 600; }

/* ── редакционный блок ── */
.edit { display: grid; gap: var(--s5); }
@media (min-width: 900px) { .edit { grid-template-columns: 1.3fr 1fr; align-items: start; } }
.big img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 16px; display: block; }
.big h3 { margin-top: var(--gap-head); font-size: clamp(20px, 2.4vw, 26px); line-height: var(--lh-head);
  font-weight: 700; letter-spacing: -.02em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.big p { margin-top: var(--gap-line); font-size: 15px; line-height: var(--lh-deck); color: var(--mute); }
.small { display: flex; flex-direction: column; gap: var(--s4); }
.sm { display: grid; grid-template-columns: 96px 1fr; gap: var(--s3); align-items: start; }
.sm img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; display: block; }
.sm h4 { font-size: 15px; line-height: var(--lh-title); font-weight: 600;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sm:hover h4 { color: var(--accent); }

/* ── плитки и города ── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--s2); }
.tile { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2);
  background: var(--soft); border: 1px solid var(--line); border-radius: 12px;
  padding: var(--s3) var(--s4); font-size: 15px; line-height: var(--lh-title); font-weight: 500; }
.tile b { font-weight: 500; font-size: 14px; color: var(--faint); font-variant-numeric: tabular-nums; }
.tile:hover { border-color: var(--accent); background: #fff; }

.cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s4); }
.city { background: var(--soft); border: 1px solid var(--line); border-radius: 14px; padding: var(--s4); }
.city h3 { font-size: 18px; line-height: var(--lh-title); font-weight: 700; }
.city p { margin-top: var(--gap-sub); font-size: 14px; line-height: var(--lh-deck); color: var(--mute); }
.city .ce { margin-top: var(--gap-tie); color: var(--accent); font-weight: 600; }
.city:hover { border-color: var(--accent); background: #fff; }

.cta { margin-top: var(--gap-part); background: var(--ink); border-radius: 18px; padding: var(--s6);
  display: flex; gap: var(--s5); align-items: center; flex-wrap: wrap; }
.cta h3 { font-size: 21px; line-height: var(--lh-head); font-weight: 700; color: #fff; letter-spacing: -.02em; }
.cta p { margin-top: var(--gap-sub); font-size: 15px; line-height: var(--lh-deck); color: #b9aca6; max-width: 54ch; }
/* На узком экране кнопка встаёт под текст: с auto-полем слева она
   прижималась к правому краю и висела сама по себе */
.cta a { background: var(--accent); color: #fff; font-weight: 700; font-size: 16px;
  line-height: var(--lh-head); padding: 14px 26px; border-radius: 999px; white-space: nowrap;
  text-align: center; }
@media (max-width: 719px) { .cta a { width: 100%; } }
@media (min-width: 720px) { .cta a { margin-left: auto; } }

.seo { margin-top: var(--gap-part); padding: var(--s5) 0 var(--s7); border-top: 1px solid var(--line); }
.seo h2 { font-size: 18px; line-height: var(--lh-title); font-weight: 700; }
.seo p { margin-top: var(--gap-sub); font-size: 15px; line-height: var(--lh-text); color: var(--mute); max-width: 72ch; }

/* ── подвал ── */
.foot { background: var(--ink); color: #b9aca6; padding: var(--s7) 0 var(--s5);
  font-size: 15px; line-height: var(--lh-deck); }
.foot__grid { display: grid; gap: var(--s6); }
@media (min-width: 780px) { .foot__grid { grid-template-columns: 1.1fr 1fr 1fr; } }
.foot h4 { font-size: 13px; line-height: var(--lh-head); font-weight: 700; color: #fff;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--s4); }
.foot a { color: #b9aca6; }
.foot a:hover { color: var(--accent); }
.foot ul { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.foot__tag { color: #8d817b; font-size: 14px; }
.foot__big { margin-top: var(--gap-sub); color: #fff; font-weight: 600; font-size: 17px; line-height: var(--lh-title); }
.foot__bot { border-top: 1px solid #2c2420; margin-top: var(--s6); padding-top: var(--s4);
  color: #8d817b; font-size: 14px; }
@media (prefers-reduced-motion: reduce) { .ev__ph img { transition: none; } .rail { scroll-behavior: auto; } }


/* ═══ ВНУТРЕННИЕ СТРАНИЦЫ ═══
 * Афиша, кружки, блог и карточки. Карточка события .ev одна и та же на главной
 * и в списках: в ленте ширину задаёт flex-basis, в сетке — колонка грида.
 * Дублировать её под вторым именем нельзя — разъедутся. */

/* ── крошки ── */
/* Прижаты к заголовку: это его надстрочная строка, а не отдельный блок */
.bc { padding-top: var(--s4); font-size: 13px; line-height: var(--lh-title); color: var(--faint); }
.bc a { display: inline-block; padding: 5px 0; }
.bc a:hover { color: var(--accent); }
.bc b { font-weight: 400; color: var(--mute); }
.bc + .top { padding-top: var(--gap-line); }

/* ── сетка карточек ── */
/* Шаг по вертикали больше, чем по горизонтали: иначе ряды сливаются в сплошное
   поле и глаз не видит, где кончается карточка */
.grid { display: grid; gap: var(--s6) var(--s4);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.grid .ev { flex: initial; }

/* ── счёт найденного и пустой результат ── */
/* Счёт — подпись к сетке, а не отдельная строка: сверху расстояние группы,
   снизу — строки. Отступ сетки задаётся здесь, а не inline в шаблоне */
.found { margin-top: var(--gap-group); font-size: 14px; line-height: var(--lh-title);
  color: var(--faint); font-variant-numeric: tabular-nums; }
.found + .grid { margin-top: var(--gap-line); }
.scroller + .grid, .tools + .grid { margin-top: var(--gap-head); }
/* Поиск и кнопки фильтров — одна группа органов управления */
.tools + .scroller { margin-top: var(--gap-group); }
.none { margin-top: var(--gap-head); padding: var(--s7) var(--s5); background: var(--soft);
  border: 1px solid var(--line); border-radius: 16px; text-align: center; }
/* Страница «не найдено» — это весь экран, а не врезка в списке */
.none--404 { margin-top: var(--gap-block); }
.none--404 h1 { font-size: clamp(24px, 3.4vw, 32px); line-height: var(--lh-head); font-weight: 700;
  letter-spacing: -.02em; }
.none--404 .tiles { justify-content: center; max-width: 560px; margin-inline: auto; }

.none h2, .none h3 { font-size: 19px; line-height: var(--lh-head); font-weight: 700; }
.none p { margin-top: var(--gap-sub); font-size: 15px; line-height: var(--lh-deck); color: var(--mute); }
/* Только последняя ссылка-выход, не плитки внутри: раньше правило красило и
   их, и каталог выглядел как список ссылок, а не как выбор */
/* Поле сверху гасим полем margin, чтобы цель для пальца выросла, а
   расстояние до текста осталось прежним */
.none__all { display: inline-block; margin-top: 10px; padding: 6px 0;
  color: var(--accent); font-weight: 600; }

/* ── постраничная навигация ── */
.pager { display: flex; justify-content: center; gap: var(--s2); margin-top: var(--gap-block); flex-wrap: wrap; }
.pager a, .pager b { min-width: 40px; padding: 9px 12px; border-radius: 10px; font-size: 15px;
  line-height: var(--lh-title); text-align: center; border: 1px solid #e8ded9; background: #fff;
  font-weight: 500; font-variant-numeric: tabular-nums; }
.pager a:hover { border-color: var(--accent); }
.pager b { background: var(--ink); border-color: var(--ink); color: #fff; }
/* Докрутка списка: пятно наблюдателя, видно только пока грузится */
.more { margin-top: var(--gap-block); padding: 0 0 var(--s5); display: grid; place-items: center; }
.spin { width: 26px; height: 26px; border: 2px solid var(--line); border-top-color: var(--accent);
  border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2.4s; } }

/* ── статья ── */
/* Колонка 66 символов. Шире читать неудобно: глаз теряет начало строки */
/* Заголовок статьи длиннее заголовка главной: 16ch режут его на пять строк */
.top--art h1 { max-width: 30ch; font-size: clamp(26px, 3.6vw, 38px); }
/* Уточнение к названию — часть самого названия («40-й меридиан» и
   «Гостиничный комплекс»), поэтому прижато к нему на 4 px и набрано мельче.
   В стиле .lead оно стояло на 12 и читалось как отдельное описание */
.qual { margin-top: var(--gap-tie); font-size: 17px; line-height: var(--lh-title);
  color: var(--mute); }

.cols { display: grid; gap: var(--s7); margin-top: var(--gap-block); }
@media (min-width: 1000px) { .cols { grid-template-columns: minmax(0, 1fr) 280px; gap: var(--s8); } }
/* 66ch давали 85 знаков в строке: ch считается по ширине нуля, а строчная
   кириллица уже. Для чтения комфортны 60–75 — это 56ch */
.art { max-width: 56ch; font-size: 17px; line-height: var(--lh-text); }
.art > * + * { margin-top: var(--s4); }
.art > :first-child { margin-top: 0; }
.art h2 { font-size: clamp(21px, 2.6vw, 27px); line-height: var(--lh-head); font-weight: 700;
  letter-spacing: -.02em; margin-top: var(--s7); }
.art h3 { font-size: 19px; line-height: var(--lh-title); font-weight: 700; margin-top: var(--s6); }
/* Заголовок и его первый абзац — одна группа, шаг минимальный */
.art h2 + * { margin-top: var(--gap-line); }
.art h3 + * { margin-top: var(--gap-sub); }
.art ul, .art ol { padding-left: var(--s5); display: grid; gap: var(--s2); }
.art li { line-height: var(--lh-text); }
.art a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.art img { border-radius: 14px; display: block; }
.art figure { margin: var(--s5) 0; }
.art figcaption { margin-top: var(--s2); font-size: 14px; line-height: var(--lh-deck); color: var(--faint); }
.art blockquote { margin: var(--s5) 0; padding: var(--s4) var(--s5); background: var(--soft);
  border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; }
.art table { width: 100%; border-collapse: collapse; font-size: 15px; }
.art th, .art td { padding: var(--s3); border-bottom: 1px solid var(--line); text-align: left; }
.art th { font-weight: 700; }
.cover { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 16px; display: block; }
/* Обложка и текст — одна статья, между ними расстояние группы, а не блока */
.cover + .art { margin-top: var(--gap-group); }

/* ── метки статьи ── */
/* Метки — часть статьи, каналы — отдельный блок: 24 против 48 */
.tags { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--gap-group); }
.tag { border: 1px solid #e8ded9; border-radius: 999px; padding: 7px 14px; font-size: 14px;
  line-height: var(--lh-title); color: var(--mute); }
.tag:hover { border-color: var(--accent); color: var(--accent); }

/* ── каналы ── */
.socs { margin-top: var(--gap-block); padding-top: var(--s5); border-top: 1px solid var(--line); }
.socs p { font-size: 15px; line-height: var(--lh-deck); color: var(--mute); }
.socs div { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s4); }
.soc { display: inline-flex; align-items: center; gap: var(--s2); border: 1px solid #e8ded9;
  border-radius: 12px; padding: 9px 14px; font-size: 14px; line-height: var(--lh-title); font-weight: 500; }
.soc svg { width: 20px; height: 20px; }
.soc:hover { border-color: var(--accent); }

/* ── «Читайте также» ── */
.aside > h3 { font-size: 13px; line-height: var(--lh-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--faint); margin-bottom: var(--s4); }

/* ── карточка места и события ── */
.dt { display: grid; gap: var(--gap-block); margin-top: var(--gap-block); }
/* На узком экране правая колонка уезжает в самый низ — под описание, карту,
   отзывы и вопросы. Главное действие страницы оказывалось в трёх тысячах
   пикселей от начала, поэтому короткая кнопка стоит сразу под сведениями.
   На широком она не нужна: панель с тем же действием видна справа */
.dt__cta { margin-top: var(--gap-group); }
.dt__cta .btn-dark { display: flex; width: 100%; font-size: 15px; padding: 13px 20px; }
@media (min-width: 1000px) { .dt__cta { display: none; } }
@media (min-width: 1000px) { .dt { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--s7); } }
/* Лента похожего и вопросы — уже не карточка: расстояние части страницы */
.dt + .sec { margin-top: var(--gap-part); }
.dt__ph { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 16px; display: block; }
/* Сведения: подпись над значением, а не слева — на узком экране двоеточия
   съезжают и строка перестаёт читаться как пара.
   Без рамки: блок держится не коробкой, а разницей расстояний — подпись
   прижата к своему значению на 4 px, а пары разведены на 20. Рамка здесь
   была попыткой подменить иерархию коробкой */
.facts { display: grid; gap: var(--gap-group) var(--s7); margin-top: var(--gap-group); }
/* Без фотографии над ними сведения открывают колонку — отступ не нужен:
   к 48 между блоками добавлялись ещё 24, и под метками зияла дыра в 72 */
.dt > div > .facts:first-child { margin-top: 0; }
@media (min-width: 560px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact dt { font-size: 12px; line-height: var(--lh-flat); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--faint); }
.fact dd { margin: var(--gap-tie) 0 0; font-size: 16px; line-height: var(--lh-deck); font-weight: 500; }
/* Телефон и сайт в сведениях — ссылки, и это должно быть видно без наведения */
.fact dd a { display: inline-block; padding: 3px 0; color: var(--accent); }
.fact dd a:hover { text-decoration: underline; text-underline-offset: 3px; }
.panel { background: var(--soft); border: 1px solid var(--line); border-radius: 16px; padding: var(--s5); }
.panel h3 { font-size: 19px; line-height: var(--lh-title); font-weight: 700; letter-spacing: -.015em; }
.panel p { margin-top: var(--gap-sub); font-size: 15px; line-height: var(--lh-deck); color: var(--mute); }
.panel .btn-dark { margin-top: var(--gap-head); display: block; text-align: center; }
.map { width: 100%; height: 300px; border-radius: 16px; overflow: hidden; margin-top: var(--s5);
  background: #f3ece8; }

/* ── отзывы ──
 * Имена vd-* не наши: их генерирует js/venue-detail.js, когда подтягивает
 * отзывы после очереди. Сервер рисует такие же, чтобы вид не менялся от того,
 * откуда пришёл человек. Старый css/venue-detail.css здесь не подключается */
.vd-reviews-summary { display: flex; align-items: baseline; gap: var(--s3); margin-top: 0; }
.vd-reviews-avg { font-family: "Onest", system-ui, sans-serif; font-size: 30px; line-height: var(--lh-flat);
  font-weight: 800; letter-spacing: -.03em; }
.vd-reviews-stars { display: inline-flex; gap: 2px; }
.vd-reviews-stars svg { width: 16px; height: 16px; }
.vd-reviews-count { font-size: 14px; line-height: var(--lh-title); color: var(--faint); }
.vd-reviews-empty { margin-top: var(--gap-head); font-size: 15px; line-height: var(--lh-deck); color: var(--mute); }
.vd-review-card { background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: var(--s4); margin-top: var(--s3); }
.vd-review-head { display: flex; align-items: baseline; gap: var(--s3); }
.vd-review-author { font-size: 15px; line-height: var(--lh-title); font-weight: 600; }
.vd-review-date { margin-left: auto; font-size: 13px; line-height: var(--lh-title); color: var(--faint); }
.vd-review-stars { margin-top: var(--gap-tie); display: flex; gap: 2px; color: #b88600;
  font-size: 14px; line-height: var(--lh-flat); letter-spacing: .08em; }
.vd-review-stars svg { width: 14px; height: 14px; }
.vd-review-text { margin-top: var(--gap-line); font-size: 15px; line-height: var(--lh-text); color: #4a403b; }

/* Форма отзыва. Звёзды в обратном порядке в разметке, поэтому подсветка идёт
   через ~ : наведение на звезду красит её и все следующие в потоке (левее) */
.vd-review-form { margin-top: var(--gap-block); background: var(--soft); border: 1px solid var(--line);
  border-radius: 16px; padding: var(--s4) var(--s5) var(--s5); }
.vd-review-form h3 { font-size: 17px; line-height: var(--lh-title); font-weight: 700; }
.stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.stars label { font-size: 26px; line-height: var(--lh-flat); color: #e0d6d0; cursor: pointer; padding: 0 2px; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color: #b88600; }
.stars input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.vd-review-submit--ready { background: var(--accent); }

/* ── поля ── */
.f { display: grid; gap: var(--s3); margin-top: var(--s4); }
.f input, .f textarea, .f select { width: 100%; font: inherit; font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid #e8ded9; border-radius: 10px; padding: 11px 14px; }
.f textarea { min-height: 88px; resize: vertical; line-height: var(--lh-deck); }
.f input:focus, .f textarea:focus, .f select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }



/* ── карточка: правая колонка и подвал страницы ── */
.dt__side { display: grid; gap: var(--gap-group); }
@media (min-width: 1000px) { .dt__side { position: sticky; top: calc(var(--s8) + var(--s4)); } }
.panel__note { margin-top: var(--gap-sub); font-size: 14px; line-height: var(--lh-title); color: var(--faint); }
.panel__note a { display: inline-block; padding: 4px 0; color: var(--accent); font-weight: 600; }
.none__tiles { margin-top: var(--s5); text-align: left; }
.chip--sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
/* Строка «Заметили неточность» — служебная, голосом ниже основного текста */
/* Служебная строка относится к списку над ней, а не к призыву под ним:
   раньше стояла ровно посередине между ними */
.fix { margin-top: var(--gap-group); text-align: center;
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s5); }
.fix a, .fix button { font: inherit; font-size: 14px; line-height: var(--lh-title); color: var(--faint);
  background: none; border: 0; cursor: pointer; padding: 10px 0 2px;
  border-bottom: 1px dashed #d9cdc7; }
.fix a:hover, .fix button:hover { color: var(--accent); border-bottom-color: var(--accent); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.hidden { display: none; }

/* ── кнопки ── */
/* .btn-dark уже есть в шапке: розовая заливка. Здесь только блочный вид */
/* Кнопка шапки задана мелкой: там она соседствует с логотипом. В карточке и
   формах она главное действие — крупнее и во всю ширину блока */
.panel .btn-dark, .f .btn-dark, .vd-review-form .btn-dark {
  display: flex; width: 100%; font-size: 15px; padding: 13px 20px; border: 0; cursor: pointer;
  font-family: inherit; white-space: normal; }
.vd-save-email-row .btn-dark { width: auto; white-space: nowrap; }
/* Отправка отзыва — не главное действие страницы: главное «Заказать
   сопровождение» справа. Кнопка по содержимому, а не во всю ширину */
.vd-review-form .btn-dark { width: auto; justify-self: start; }
.btn-line { display: inline-block; width: 100%; text-align: center; font: inherit; font-size: 15px;
  line-height: var(--lh-title); font-weight: 600; color: var(--ink); background: #fff;
  border: 1px solid #e0d6d0; border-radius: 999px; padding: 11px 20px; cursor: pointer; }
.btn-line:hover { border-color: var(--accent); color: var(--accent); }

/* ── окно ──
 * Имя vd-modal и класс is-open заданы js/venue-detail.js: он ищет .vd-modal у
 * цели клика, чтобы закрыть по фону. Поэтому подложка — сам .vd-modal */
.vd-modal { display: none; position: fixed; inset: 0; z-index: 100; background: rgba(23,18,15,.55);
  padding: var(--s4); overflow-y: auto; }
.vd-modal.is-open { display: flex; align-items: center; justify-content: center; }
.vd-modal-box { position: relative; width: 100%; max-width: 460px; background: #fff;
  border-radius: 18px; padding: var(--s6); }
.vd-modal-box h3 { font-size: 19px; line-height: var(--lh-head); font-weight: 700; }
.vd-modal-sub { margin-top: var(--s2); font-size: 15px; line-height: var(--lh-deck); color: var(--mute); }
.vd-modal-close { position: absolute; top: var(--s3); right: var(--s3); width: 34px; height: 34px;
  border: 0; border-radius: 50%; background: var(--soft); color: var(--mute); font-size: 22px;
  line-height: var(--lh-flat); cursor: pointer; }
.vd-modal-close:hover { background: #f3e9e5; color: var(--ink); }
.save { display: grid; gap: var(--s3); margin-top: var(--s5); }
.save__auth { font-size: 14px; line-height: var(--lh-deck); color: var(--mute); }
.save__auth a { color: var(--accent); font-weight: 600; }
.vd-save-email-row { display: flex; gap: var(--s2); }
.vd-save-email-row.hidden { display: none; }
.vd-save-email-input { flex: 1; min-width: 0; font: inherit; font-size: 15px; background: #fff;
  border: 1px solid #e8ded9; border-radius: 999px; padding: 11px 16px; }
.vd-save-email-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.vd-save-email-btn { white-space: nowrap; }
.vd-save-email-result { font-size: 14px; line-height: var(--lh-deck); color: var(--mute); display: none; }
.vd-save-email-result.active, .vd-save-email-result.cooldown { display: block; }
.vd-save-email-result.success { color: #12795a; }
.vd-save-email-result.error { color: #c0392b; }
.vd-login-link { color: var(--accent); font-weight: 600; }


/* ── карточка организации ── */
/* Фотографий у организаций нет — карточка держится на типографике: мелкая
   категория сверху, крупное название, адрес и метро внизу */
.grid--vn { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: var(--s4); }
.vn { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line);
  border-radius: 14px; padding: var(--s4) var(--s4) var(--s5); }
.vn:hover { border-color: var(--accent); }
.vn__cat { display: flex; align-items: center; gap: var(--gap-sub);
  font-size: 11px; line-height: var(--lh-flat); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--mute); }
.vn__cat .ic { width: 20px; height: 20px; border-radius: 6px; }
.vn__cat .ic i { width: 12px; height: 12px; }
/* Названия в базе бывают по 150 знаков («Московская центральная
   художественная школа при Российской академии художеств, Отделение…»).
   Без ограничения такая карточка в пять строк ломала ряд */
.vn__t { margin-top: var(--gap-tie); font-size: 17px; line-height: var(--lh-title); font-weight: 700;
  letter-spacing: -.015em;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.vn__sub { margin-top: var(--gap-tie); font-size: 14px; line-height: var(--lh-deck); color: var(--mute);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vn__addr { margin-top: var(--gap-line); font-size: 14px; line-height: var(--lh-deck); color: var(--mute); }
.vn__m { margin-top: auto; padding-top: var(--gap-line); }
/* Цветной кружок линии: без него список станций читается как простой текст */
/* Строкой, а не флексом: у длинных названий («Улица Сергея Эйзенштейна»)
   флекс уводил расстояние в отдельную колонку справа */
.metro { font-size: 14px; line-height: var(--lh-deck); }
.metro i { display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; vertical-align: 1px; }
.metro b { font-weight: 400; color: var(--faint); white-space: nowrap; }
.fact dd .metro { display: block; }
.fact dd .metro + .metro { margin-top: var(--s1); }

/* ── строка поиска и выбор станции ── */
.tools { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--gap-block); }
/* min-width: 0 и width: 0 у поля — обязательны оба. Иначе на 320 px строка
   поиска считает своей минимальной шириной ширину поля по умолчанию (размер
   в 20 символов) и не ужимается: страница едет вбок на 22 пикселя */
.srch { display: flex; gap: var(--s2); flex: 1 1 240px; min-width: 0; }
.srch input { flex: 1 1 auto; width: 0; min-width: 0; font: inherit; font-size: 15px; background: #fff;
  border: 1px solid #e8ded9; border-radius: 999px; padding: 10px 18px; }
.srch input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.srch button { font: inherit; font-size: 15px; font-weight: 600; color: var(--ink); background: var(--soft);
  border: 1px solid #e8ded9; border-radius: 999px; padding: 10px 20px; cursor: pointer; }
.srch button:hover { border-color: var(--accent); color: var(--accent); }

/* Имена mselect наши, но крючки is-open / is-hidden / is-focused и
   .pl-metro-dd-item задаёт js/places-list.js — переименовать их нельзя */
.mselect { position: relative; flex: 0 1 auto; }
.mselect__btn { font: inherit; font-size: 15px; color: var(--ink); background: #fff;
  border: 1px solid #e8ded9; border-radius: 999px; padding: 10px 20px; cursor: pointer; }
.mselect__btn::after { content: '▾'; margin-left: var(--s2); color: var(--faint); }
.mselect__btn:hover { border-color: var(--accent); }
/* Сторона раскрытия зависит от того, где стоит кнопка. На узком экране она
   переносится на свою строку влево — список вниз-вправо. На широком стоит у
   правого края строки поиска, и список шириной 300 px уезжал за экран */
.mselect__dd { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  width: 300px; max-width: calc(100vw - var(--s6)); background: #fff; border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 12px 32px rgba(23,18,15,.12); overflow: hidden; }
.mselect.is-open .mselect__dd { display: block; }
@media (min-width: 720px) { .mselect__dd { left: auto; right: 0; } }
.mselect__search { padding: var(--s3); border-bottom: 1px solid var(--line); }
.mselect__search input { width: 100%; font: inherit; font-size: 15px; background: var(--soft);
  border: 1px solid transparent; border-radius: 10px; padding: 9px 12px; }
.mselect__search input:focus { outline: none; border-color: var(--accent); background: #fff; }
.mselect__list { max-height: 320px; overflow-y: auto; padding: var(--s1) 0; }
.pl-metro-dd-item { display: flex; align-items: center; gap: var(--s2); padding: 9px var(--s4);
  font-size: 15px; line-height: var(--lh-title); }
.pl-metro-dd-item i { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.pl-metro-dd-item b { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--faint);
  font-variant-numeric: tabular-nums; }
.pl-metro-dd-item:hover, .pl-metro-dd-item.is-focused { background: var(--soft); }
.pl-metro-dd-item.is-active { color: var(--accent); font-weight: 600; }
.pl-metro-dd-item.is-hidden { display: none; }

/* ── выбранные фильтры ── */
.drop { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--gap-group); }
.drop__i { border: 1px solid var(--ink); background: var(--ink); color: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 14px; line-height: var(--lh-title); font-weight: 500; }
.drop__i:hover { background: #3a2f2a; }
.drop__all { align-self: center; padding: 8px 0 2px; font-size: 14px; line-height: var(--lh-title);
  color: var(--faint); border-bottom: 1px dashed #d9cdc7; }
.drop__all:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* Счётчик внутри кнопки категории */
.chip b { font-weight: 400; font-size: 13px; color: var(--faint); font-variant-numeric: tabular-nums; }
.chip.on b { color: rgba(255,255,255,.6); }
.chip--flat { background: var(--soft); border-color: var(--soft); color: var(--mute); }

/* ── вопросы и ответы ── */
.faq__i { border-bottom: 1px solid var(--line); }
.faq__i summary { list-style: none; cursor: pointer; padding: var(--s4) var(--s6) var(--s4) 0;
  position: relative; font-family: "Onest", system-ui, sans-serif; font-size: 16px;
  line-height: var(--lh-title); font-weight: 600; }
.faq__i summary::-webkit-details-marker { display: none; }
.faq__i summary::after { content: '+'; position: absolute; right: var(--s2); top: var(--s4);
  font-size: 20px; line-height: var(--lh-flat); color: var(--faint); font-weight: 400; }
.faq__i[open] summary::after { content: '−'; }
.faq__i summary:hover { color: var(--accent); }
.faq__a { padding: 0 var(--s6) var(--s4) 0; font-size: 15px; line-height: var(--lh-text); color: #4a403b; }
.faq__a a { color: var(--accent); }


/* ── формы предложений ── */
.wrap--narrow { max-width: 720px; }
.form { margin-top: var(--s6); gap: var(--s4); }
.form label { display: grid; gap: var(--s2); font-size: 13px; line-height: var(--lh-title);
  font-weight: 600; color: var(--mute); }
/* Пометка обязательности — не крик, а подсказка: строчными и бледным.
   В одну строку с подписью: label это грид, и голая <i> уходила на свою */
.form label > span { display: block; }
.form label i { font-style: normal; font-weight: 400; color: var(--faint); }
.form input, .form textarea, .form select { font-weight: 400; color: var(--ink); }
.f2 { display: grid; gap: var(--s4); }
@media (min-width: 560px) { .f2 { grid-template-columns: 1fr 1fr; } }
.form__split { margin-top: var(--s3); padding-top: var(--s5); border-top: 1px solid var(--line);
  font-size: 14px; line-height: var(--lh-deck); color: var(--mute); }
.form__note { font-size: 13px; line-height: var(--lh-deck); color: var(--faint); }
.form__err { font-size: 14px; line-height: var(--lh-deck); color: #c0392b; }

/* Последним правилом: браузерное [hidden] проигрывает любому нашему классу с
   display. Форма с .f (grid) после отправки оставалась на экране */
[hidden] { display: none; }