/* Шрифты подключаются через в каждой страницы
(см. GOOGLE_FONTS_URL в generate-geo-pages.js и статичных страниц),
а не через @import здесь — @import сериализует загрузку шрифтов после
загрузки и парсинга этого файла, а не параллельно с ним. */
:root{
--cream:#F6F1E7;--panel:#F0EADD;--ink:#1E1D17;--muted:#6E6A5E;--line:#E7E0D0;
/* Изумрудный вместо приглушённо-лесного — более «цифровой», современный
акцент; терракотовый остаётся единственным вторым акцентом (скидки) —
больше новых цветов не вводим, чтобы не вернуться к пестроте. */
--green:#0F7A52;--green-dark:#0A5A3D;--green-light:#14976A;--terracotta:#C25B3A;
--green-grad:linear-gradient(135deg,var(--green-light),var(--green-dark));
--shadow:0 18px 40px -26px rgba(30,29,23,.35);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:76px} /* якорные переходы (#exp/#how/#rev) не прячутся под sticky-шапку (64px) */
body{font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
body:has(.nav-toggle-input:checked){overflow:hidden} /* блокируем скролл фона, пока открыто мобильное меню */
a{color:inherit;text-decoration:none} img{display:block;max-width:100%}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px;padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}
.eyebrow{font-family:'JetBrains Mono';text-transform:uppercase;letter-spacing:.09em;font-size:11.5px;font-weight:600;color:var(--green)}
.ann{background:var(--panel);color:var(--ink);border-bottom:1px solid var(--line);font-size:13.5px;font-weight:500;text-align:center;padding:calc(10px + env(safe-area-inset-top)) 16px 10px}
.ann b{color:var(--green);font-weight:700}
nav{position:sticky;top:0;z-index:60;border-bottom:1px solid var(--line)}
/* Фон/блюр вынесены в ::before, а не заданы на самом nav: backdrop-filter на элементе
создаёт containing block для его position:fixed потомков (спека CSS Position), из-за
чего .nav-links/.nav-backdrop (мобильное меню) позиционировались бы не относительно
вьюпорта, а внутри 64px-й шапки — и бургер выглядел как «ничего не происходит». */
nav::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(246,241,231,.92);backdrop-filter:blur(10px)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:64px;gap:20px}
.logo{font-family:'Inter Tight';font-weight:800;font-size:20px;display:flex;align-items:center;gap:9px;color:var(--ink);flex-shrink:0}
.logo-mark{width:26px;height:29px;flex-shrink:0}
.nav-links{display:flex;gap:22px;font-weight:500;font-size:14px;color:var(--muted);flex-wrap:wrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a.on{color:var(--ink)}
@media(min-width:901px){
/* Растущее подчёркивание при наведении — только на десктопе: в мобильном
выезжающем меню у пунктов уже свой border-bottom-разделитель, второй
штрих поверх него был бы лишним. */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav-links a:hover::after,.nav-links a.on::after{transform:scaleX(1)}
}
.nav-cta{font-weight:700;font-size:14px;min-height:44px;padding:10px 18px;border-radius:100px;background:var(--green-grad);color:#fff;transition:transform .15s,box-shadow .15s;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(15,122,82,.55)}
/* «Удиви меня» — кубик слегка крутится при наведении, ощутимее при клике;
полностью отключено при prefers-reduced-motion (иконка просто статична). */
.dice-ic{display:inline-block;flex-shrink:0;transition:transform .3s ease}
.nav-links a.surprise-link{color:var(--green);font-weight:700}
/* На десктопе кнопка уже есть отдельной пилюлей (.nav-cta) — пункт в
.nav-links дублировал бы её один-в-один. Прячем дубль только там, где
.nav-links и так виден построчно (>=901px); в мобильной выезжающей панели
.nav-cta скрыт (см. max-width:900px ниже), так что там это единственный вход. */
@media(min-width:901px){
.nav-links a.surprise-link{display:none}
}
@media(prefers-reduced-motion:no-preference){
.nav-cta:hover .dice-ic,.nav-links a:hover .dice-ic{transform:rotate(20deg)}
.nav-cta:active .dice-ic,.nav-links a:active .dice-ic{transform:rotate(300deg) scale(1.15)}
}
/* Квиз «Удиви меня» — модалка вместо прямого перехода: 2-3 тап-вопроса,
затем карточка с подобранной проверенной экскурсией. Стиль — в духе
остального сайта (кремовый/изумрудный/скругления/Bricolage в заголовках). */
.quiz-overlay{position:fixed;inset:0;z-index:200;background:rgba(30,29,23,.55);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.quiz-overlay.open{opacity:1;pointer-events:auto}
.quiz-modal{background:var(--cream);border-radius:20px;max-width:480px;width:100%;max-height:88vh;overflow-y:auto;padding:30px 24px 26px;position:relative;box-shadow:0 30px 80px -20px rgba(0,0,0,.45);transform:translateY(14px);transition:transform .25s ease}
.quiz-overlay.open .quiz-modal{transform:translateY(0)}
.quiz-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;font-size:16px;line-height:1;color:var(--muted)}
.quiz-close:hover{color:var(--ink);background:#fff}
.quiz-progress{font-family:'JetBrains Mono';font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px}
.quiz-title{font-family:'Bricolage Grotesque','Inter Tight',sans-serif;font-weight:800;font-size:22px;line-height:1.25;margin-bottom:18px;padding-right:26px}
.quiz-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.quiz-opt{min-height:52px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--panel);font-family:'Inter Tight',sans-serif;font-weight:700;font-size:15px;color:var(--ink);cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
.quiz-opt:hover{border-color:var(--green-light);background:#fff}
.quiz-opt:active{transform:scale(.97)}
.quiz-back{margin-top:18px;background:none;border:0;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;padding:6px 0}
.quiz-back:hover{color:var(--ink)}
/* Гео-шаг квиза (Q1 «Куда хочешь?») — текстовый инпут с автоподсказкой,
список в обычном потоке документа (не absolute-оверлей): так подсказки
никогда не перекрываются мобильной клавиатурой и не требуют своего
z-index — модалка и так скроллится (.quiz-modal{overflow-y:auto}). */
.quiz-geo-wrap{margin-bottom:12px}
.quiz-geo-input{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#fff;font-family:'Inter',sans-serif;font-size:15px;color:var(--ink)}
.quiz-geo-input:focus{outline:2px solid var(--green-light);outline-offset:1px}
.quiz-geo-suggestions{display:none;margin-top:8px;border-radius:12px;border:1px solid var(--line);overflow:hidden;background:#fff}
.quiz-geo-opt{display:block;width:100%;text-align:left;min-height:46px;padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:#fff;font-family:'Inter Tight',sans-serif;font-weight:600;font-size:14.5px;color:var(--ink);cursor:pointer}
.quiz-geo-opt:last-child{border-bottom:0}
.quiz-geo-opt:hover,.quiz-geo-opt.hl{background:var(--panel)}
.quiz-geo-empty{padding:12px 14px;color:var(--muted);font-size:13.5px}
.quiz-geo-any{width:100%;margin-top:4px}
.quiz-result .ph{border-radius:14px;overflow:hidden;background:var(--panel);aspect-ratio:16/11;margin-bottom:16px}
.quiz-result .ph img{width:100%;height:100%;object-fit:cover}
.quiz-result h3{font-family:'Bricolage Grotesque','Inter Tight',sans-serif;font-weight:800;font-size:19px;line-height:1.3;margin-bottom:8px}
.quiz-result .meta{display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13.5px;font-weight:500;margin-bottom:14px}
.quiz-result .price{font-family:'Inter Tight',sans-serif;font-weight:800;font-size:21px;color:var(--ink);margin-bottom:18px}
.quiz-result .actions{display:flex;gap:10px;flex-wrap:wrap}
.quiz-result .actions .nav-cta{display:inline-flex}
.quiz-restart-btn{min-height:44px;padding:10px 18px;border-radius:100px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:14px;color:var(--ink);cursor:pointer}
.quiz-restart-btn:hover{background:#fff}
@media(max-width:480px){
.quiz-modal{padding:26px 18px 20px}
}
@media(prefers-reduced-motion:reduce){
.quiz-overlay,.quiz-modal,.quiz-opt{transition:none}
}
/* Мобильное меню — чистый CSS (чекбокс-хак), без JS: работает одинаково на
страницах с любым набором скриптов (в т.ч. на страницах стран/cities.html,
где никакого JS вообще нет). Крестик/бургер — то же поле label ~ input. */
.nav-toggle-input{display:none}
.nav-toggle{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;flex-shrink:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.nav-toggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s ease,opacity .2s ease}
.nav-toggle-input:checked~.nav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle-input:checked~.nav-toggle span:nth-child(2){opacity:0}
.nav-toggle-input:checked~.nav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-backdrop{display:none}
@media(max-width:900px){
.nav-cta{display:none}
.nav-toggle{display:flex}
.nav-links{
position:fixed;top:0;right:0;bottom:0;z-index:80;width:min(320px,86vw);
flex-direction:column;flex-wrap:nowrap;gap:2px;
background:var(--cream);
padding:calc(24px + env(safe-area-inset-top)) 22px calc(24px + env(safe-area-inset-bottom));
box-shadow:-20px 0 44px -20px rgba(30,29,23,.4);
transform:translateX(100%);transition:transform .28s ease;
overflow-y:auto;
}
.nav-links a{font-size:16px;padding:13px 6px;border-bottom:1px solid var(--line);min-height:44px;display:flex;align-items:center}
.nav-toggle-input:checked~.nav-links{transform:translateX(0)}
.nav-backdrop{
display:block;position:fixed;inset:0;z-index:75;background:rgba(30,29,23,.42);
opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.nav-toggle-input:checked~.nav-backdrop{opacity:1;pointer-events:auto}
}
/* HERO с плавно сменяющимися фото на фоне (см. .hero-bg/.hero-slide) —
компактнее прежнего (было min-height:560px), чтобы под баннером уже
проглядывал следующий блок на первом экране. */
.hero{position:relative;overflow:hidden;min-height:380px;display:flex;align-items:center;padding:48px 0;color:#fff}
.hero .wrap{position:relative;z-index:2;width:100%}
/* Слайды — два слоя-подложки, перекрёстно проявляются друг в друга (кроссфейд
через opacity/transition), см. скрипт слайдшоу внизу страницы. Первый слой
получает фото сразу инлайном в разметке (eager, без ожидания JS/данных),
остальные подставляются лениво по одному, с прогревом на кадр вперёд. */
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease}
.hero-slide.is-active{opacity:1}
/* Фирменный зелёно-тёмный скрим поверх ЛЮБОГО кадра — читаемость текста не
зависит от того, какое фото сейчас показано. */
.hero-bg::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(9,46,33,.92),rgba(15,64,45,.62) 50%,rgba(30,29,23,.4))}
@media(max-width:700px){
.hero{min-height:auto;padding:40px 0 32px}
/* На узком экране текст растягивается почти на всю ширину — диагональный
градиент (тёмный слева, светлее справа) уже не годится: меняем на
равномерный сверху-вниз, чтобы правый край строк не терял контраст. */
.hero-bg::after{background:linear-gradient(180deg,rgba(9,46,33,.86),rgba(15,64,45,.74) 55%,rgba(30,29,23,.7))}
}
/* Каскадное появление контента hero при загрузке — тонкое, снизу вверх,
с небольшой задержкой на каждый следующий блок. Полностью отключено при
prefers-reduced-motion: контент сразу в конечном состоянии, без прыжков. */
@media(prefers-reduced-motion:no-preference){
.hero .pill,.hero h1,.hero .lede,.hero .searchbar,.hero .cat-switch,.hero .trust{
opacity:0;animation:heroIn .7s cubic-bezier(.16,1,.3,1) forwards;
}
.hero .pill{animation-delay:.05s}
.hero h1{animation-delay:.15s}
.hero .lede{animation-delay:.25s}
.hero .searchbar{animation-delay:.35s}
.hero .cat-switch{animation-delay:.45s}
.hero .trust{animation-delay:.55s}
}
@keyframes heroIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.pill{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(6px);padding:7px 14px;border-radius:100px;font-family:'JetBrains Mono';text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;font-weight:600;margin-bottom:16px}
.pill .dot{width:7px;height:7px;border-radius:50%;background:#6FCF9A;box-shadow:0 0 0 0 rgba(111,207,154,.6);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(111,207,154,0)}100%{box-shadow:0 0 0 0 rgba(111,207,154,0)}}
h1{font-family:'Bricolage Grotesque','Inter Tight';font-weight:800;letter-spacing:-1.4px;line-height:1.03;font-size:clamp(38px,6.4vw,70px);max-width:820px}
h1 .hl{color:#8FD9AE}
.hero h1{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.lede{color:rgba(255,255,255,.9);font-size:clamp(16px,1.9vw,19px);max-width:560px;margin:14px 0 22px;font-weight:400}
.hero .lede{text-shadow:0 1px 14px rgba(0,0,0,.3)}
.searchbar{display:flex;align-items:center;gap:8px;background:#fff;padding:8px;border-radius:14px;max-width:720px;box-shadow:0 24px 50px -18px rgba(0,0,0,.4)}
.searchbar select,.searchbar input{border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:16px;font-weight:500;padding:13px 14px;border-radius:9px;background:#fff}
.searchbar select{cursor:pointer} .searchbar input{flex:1;min-width:0} .searchbar input::placeholder{color:#797468}
.searchbar button{border:0;cursor:pointer;font-family:'Inter Tight';font-weight:700;font-size:15px;color:#fff;background:var(--green-grad);padding:0 24px;height:46px;border-radius:9px;transition:transform .15s,box-shadow .15s}
.searchbar button:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(15,122,82,.6)}
@media(max-width:560px){.searchbar{flex-wrap:wrap}.searchbar select,.searchbar input,.searchbar button{flex:1 1 100%;height:auto;padding:13px}}
/* Триггеры доверия — не мелкая подпись сбоку, а собственные стеклянные чипы
на первом экране (тот же приём, что у .pill), чтобы скорость/безопасность
считывались сразу, а не терялись мелким текстом. */
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.trust span{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(4px);padding:8px 15px;border-radius:100px;color:#fff;font-size:13.5px;font-weight:600}
/* Табы «Экскурсии | Туры» в hero — тот же .cat-switch, что и в каталоге, но
крупнее (это главный переключатель на главной) и в стеклянном варианте
поверх фото (тот же приём, что у .pill): полупрозрачная подложка с блюром,
чтобы текст не терялся на фотографии, независимо от того, что на ней. */
.hero .cat-switch{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(6px);margin-top:18px;padding:5px}
.hero .cat-tab{font-size:15.5px;padding:12px 26px;min-height:46px;color:rgba(255,255,255,.78)}
.hero .cat-tab:hover{color:#fff}
.hero .cat-tab.active{background:var(--green-grad);color:#fff}
.cats{padding:40px 0 8px}
.cat-row{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:900px){.cat-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.cat-row{grid-template-columns:repeat(2,1fr)}}
.cat{display:block;border:1px solid var(--line);border-radius:3px;padding:14px 12px;text-align:center;cursor:pointer;font-weight:600;font-size:13.5px;transition:transform .16s,box-shadow .16s;background:var(--panel);color:var(--ink)}
.cat:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
/* Категории — плитки с фото */
.cat-photo{position:relative;overflow:hidden;border:none;padding:0;aspect-ratio:4/3;color:#fff}
.cat-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .45s ease}
.cat-photo:hover .cat-bg{transform:scale(1.08)}
.cat-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,29,23,.78),rgba(30,29,23,.1) 65%);transition:background .2s}
.cat-label{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;width:100%;height:100%;padding:12px 10px;text-align:center;line-height:1.2}
.cat-label b{font-family:'Inter Tight';font-weight:700;font-size:13.5px}
.cat-count{display:block;font-family:'JetBrains Mono';font-size:10.5px;font-weight:500;opacity:.85;margin-top:4px}
/* «Все» — та же геометрия .cat-photo (радиус, aspect-ratio, отступы, ховер-
подъём/зум), но вместо фотографии — заливка --green-grad (тот же градиент,
что у главной CTA-кнопки и активного таба, а не отдельно придуманный
зелёный) и подпись по центру, а не прижата вниз: тут нет фото, которое
нужно подсвечивать градиентом-затемнением снизу для читаемости текста. */
.cat-all-bg{background:var(--green-grad)}
.cat-all .cat-label{justify-content:center}
.cat-all-ic{flex-shrink:0;margin-bottom:6px}
.cat-all .cat-count{margin-top:0}
section{padding:46px 0}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px;flex-wrap:wrap}
.head h2{font-family:'Bricolage Grotesque','Inter Tight';font-weight:800;font-size:clamp(24px,3.6vw,36px);letter-spacing:-.6px;margin-top:6px}
.head p{color:var(--muted);font-size:15px;font-weight:400;margin-top:6px}
.count{color:var(--muted);font-family:'JetBrains Mono';font-size:12.5px;font-weight:600;background:var(--panel);padding:8px 14px;border-radius:100px;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
/* Без transform на самом .card: перемещение НАВЕДЁННОГО элемента сдвигает его
же хит-тест бокс под курсором — если курсор оказывается у края, hover то
пропадает, то возвращается, карточка дёргается, а курсор мигает между
стрелкой и рукой (сам себя выключающий hover-цикл). box-shadow/border-color —
чисто отрисовочные свойства, они никогда не меняют интерактивную область,
поэтому не могут вызвать этот эффект. «Живость» при наведении даёт зум
фото ниже (.ph img) — оно масштабируется ВНУТРИ .ph с overflow:hidden, так
что бокс .card по-прежнему не меняется. */
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,border-color .2s ease}
.card:hover{box-shadow:var(--shadow);border-color:var(--green-light)}
.ph{position:relative;aspect-ratio:16/11;overflow:hidden;background:var(--panel)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .ph img{transform:scale(1.06)}
/* .sticker и .onimg — чисто декоративные бейджи (текст/рейтинг), без своего
клика. У обоих хит-зона шире видимого контента (.onimg растянут left/right
почти на всю ширину фото) — с z-index:3 (выше .book::after, z-index:1) они
без pointer-events:none перехватывали бы клик по фото в пустых местах
бейджа. .save — единственный реально интерактивный элемент здесь, у него
и так компактная точечная зона (44×44 в углу), трогать не нужно. */
.sticker{position:absolute;top:12px;left:12px;z-index:3;font-family:'JetBrains Mono';text-transform:uppercase;letter-spacing:.04em;font-weight:700;font-size:11.5px;color:#fff;background:var(--green);padding:5px 11px;border-radius:100px;pointer-events:none}
.save{position:absolute;top:8px;right:8px;z-index:3;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;font-size:16px;cursor:pointer;border:0;transition:.15s}
.save:hover{transform:scale(1.1)}
.onimg{position:absolute;bottom:10px;left:10px;right:10px;z-index:3;display:flex;justify-content:space-between;align-items:end;gap:8px;pointer-events:none}
.rate{background:rgba(255,255,255,.95);font-size:12.5px;font-weight:700;padding:5px 10px;border-radius:100px;display:flex;align-items:center;gap:4px}
.rate .s{color:var(--green)} .rate small{color:var(--muted);font-weight:500}
.card-body{padding:15px 16px 16px;display:flex;flex-direction:column;flex:1}
.ctag{font-family:'JetBrains Mono';font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.card-body h3{font-family:'Inter Tight';font-weight:700;font-size:17px;line-height:1.25;margin:6px 0 10px;color:var(--ink)}
.metarow{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.mtag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:var(--muted);background:var(--cream);border:1px solid var(--line);padding:4px 9px;border-radius:7px}
.mtag.ok{color:var(--green);border-color:var(--green)}
.mtag-ic{flex-shrink:0}
/* Таб-переключатель «Экскурсии | Туры» — структурное разделение (не цветом
карточек, а сегментированным контролом): активный таб залит акцентным
зелёным, неактивный — приглушённый текст на панельном фоне. */
.cat-switch{display:inline-flex;gap:3px;background:var(--panel);border:1px solid var(--line);border-radius:100px;padding:4px;margin-top:18px}
.cat-tab{font-family:'Inter Tight';font-weight:700;font-size:14px;color:var(--muted);background:none;border:0;padding:9px 22px;min-height:40px;border-radius:100px;cursor:pointer;transition:background .15s,color .15s;-webkit-tap-highlight-color:transparent}
.cat-tab:hover{color:var(--ink)}
.cat-tab.active{background:var(--green-grad);color:#fff}
.card-foot{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:8px}
.price{font-family:'Inter Tight';font-weight:800;font-size:18px;display:flex;align-items:baseline;gap:7px;color:var(--ink)}
.price .old{font-family:'Inter';font-size:13px;font-weight:500;color:#6E685A;text-decoration:line-through}
.price small{display:block;color:var(--muted);font-family:'Inter';font-size:11px;font-weight:500}
.discount{font-family:'JetBrains Mono';font-weight:600;font-size:10.5px;color:#A74E32}
.book{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:13.5px;color:#fff;background:var(--green-grad);padding:11px 16px;border-radius:10px;white-space:nowrap}
/* Кликабельна вся карточка — раньше эту площадь растягивал псевдоэлемент
.book::after (position:absolute;inset:0 от ближайшего .book). На практике
в Chromium это ненадёжно: во время :active (зажатая кнопка мыши) хит-тест
в этой точке «съезжает» с ::after на голый ![]()
под ним — elementFromPoint
и реальный event.target на СЕКУНДУ расходятся, и клик по фото просто не
долетает до ссылки (проверено headless Chromium: до mousedown — .book,
во время mousedown — ![]()
). Поэтому вместо псевдоэлемента — отдельная
РЕАЛЬНАЯ первым потомком .card, растянутая на всю
карточку (это не нарушает вложенность: .book теперь просто ,
единственная настоящая ссылка в карточке — card-link). .save — выше по
z-index, остаётся независимо кликабельной; .sticker/.onimg декоративны
(pointer-events:none) и клику не мешают. */
.card-link{position:absolute;inset:0;z-index:1;cursor:pointer}
/* «Когда ехать» — климат по месяцам на странице города (см. generate-geo-
pages.js, cityWhenToGoHTML). Сетка карточек — тот же язык, что .why-card
(панель, тонкая рамка, скругление), лучшие месяцы просто получают зелёную
рамку — без градусника-«радуги» по всем 12 карточкам, чтобы не запестрить. */
.when-to-go{padding-top:8px}
.wtg-verdict{font-size:16px;color:var(--ink);max-width:640px;margin-bottom:20px;line-height:1.55}
.wtg-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media(max-width:900px){.wtg-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.wtg-grid{grid-template-columns:repeat(3,1fr)}}
.wtg-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.wtg-card.wtg-best{background:#fff;border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.wtg-month{font-family:'JetBrains Mono';font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.wtg-best .wtg-month{color:var(--green)}
.wtg-temp{font-family:'Inter Tight';font-weight:700;font-size:15px;color:var(--ink);white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.wtg-wicon{flex-shrink:0;color:var(--muted)}
.wtg-best .wtg-wicon{color:var(--green)}
.wtg-precip{font-family:'JetBrains Mono';font-size:10.5px;color:var(--muted);white-space:nowrap}
.wtg-source{margin-top:14px;font-size:12.5px;color:var(--muted)}
/* «Как добраться» — тот же визуальный язык, что «Когда ехать» (панель,
тонкая рамка, зелёная подсветка лучшего варианта), но сетка auto-fit —
тут 1-3 карточки, а не всегда 12, фиксированное число колонок не подходит;
и текст внутри карточки слева, а не по центру — название аэропорта не
короткое трёхбуквенное сокращение месяца, центрирование читалось бы хуже. */
.how-to-get{padding-top:8px}
.how-to-get .eyebrow{display:inline-flex;align-items:center;gap:6px}
.htg-icon{flex-shrink:0}
.htg-verdict{font-size:16px;color:var(--ink);max-width:640px;margin-bottom:20px;line-height:1.55}
.htg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;max-width:820px}
.htg-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.htg-card.htg-primary{background:#fff;border-color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.htg-iata{font-family:'JetBrains Mono';font-weight:700;font-size:13px;letter-spacing:.05em;color:var(--muted)}
.htg-primary .htg-iata{color:var(--green)}
.htg-name{font-family:'Inter Tight';font-weight:700;font-size:15px;color:var(--ink);line-height:1.3}
.htg-dist{font-family:'JetBrains Mono';font-size:11.5px;color:var(--muted)}
.htg-source{margin-top:14px;font-size:12.5px;color:var(--muted)}
.htg-transfers{margin-top:32px}
.htg-transfers-head{margin-bottom:16px}
.htg-transfers-head h3{font-family:'Bricolage Grotesque','Inter Tight';font-weight:700;font-size:19px;color:var(--ink);margin-bottom:4px}
.htg-transfers-head p{font-size:13.5px;color:var(--muted);max-width:640px}
/* «Похожие города» — та же панель/рамка, что «Когда ехать»/«Как добраться»,
но карточка — настоящая ссылка на другую страницу города (а не просто
информация), поэтому есть hover-подъём — тот же приём, что у .why-card,
сигнализирует "кликабельно", в отличие от чисто информационных карточек
климата/аэропортов. */
.similar-cities{padding-top:8px}
.sct-verdict{font-size:16px;color:var(--ink);max-width:640px;margin-bottom:20px;line-height:1.55}
.sct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;max-width:820px}
.sct-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:4px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.sct-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--green-light)}
.sct-name{font-family:'Inter Tight';font-weight:700;font-size:15.5px;color:var(--ink)}
.sct-meta{font-family:'JetBrains Mono';font-size:11.5px;color:var(--muted)}
/* «Что посмотреть» — ручной редакционный текст, длиннее, чем в карточках
климата/аэропортов, поэтому вертикальный список панелей, а не сетка:
абзацы должны читаться, а не сжиматься в узкие колонки. Та же панель
(фон/рамка/радиус), что у .wtg-card/.htg-card, для визуальной связности. */
.what-to-see{padding-top:8px}
.wts-intro{font-size:16px;color:var(--ink);max-width:640px;margin-bottom:20px;line-height:1.55}
.wts-list{display:flex;flex-direction:column;gap:12px;max-width:720px}
.wts-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px 24px}
.wts-item h3{font-family:'Inter Tight';font-weight:700;font-size:17px;color:var(--ink);margin:0 0 8px;display:flex;align-items:center;gap:8px}
.wts-icon{flex-shrink:0;color:var(--green)}
.wts-item p{font-size:15px;color:var(--ink);line-height:1.6;margin:0}
/* FAQ — нативный /, без JS: раскрытие/закрытие делает
браузер, доступность (клавиатура, скринридеры) идёт бесплатно. Индикатор
+/− — псевдоэлемент с текстовым символом, не SVG: единственное вхождение
на элемент, дублировать инлайн-иконку 9 раз ради декоративного плюса не
нужно, текстовый символ дешевле байтами и не требует спрайта. */
.faq{padding-top:8px}
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:760px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .15s}
.faq-item[open]{border-color:var(--green-light)}
.faq-item summary{list-style:none;cursor:pointer;padding:16px 46px 16px 20px;position:relative;font-family:'Inter Tight';font-weight:700;font-size:15.5px;color:var(--ink);line-height:1.4;transition:background .15s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:rgba(15,122,82,.06)}
.faq-item summary::after{content:'+';position:absolute;right:18px;top:14px;font-family:'JetBrains Mono';font-size:21px;font-weight:400;color:var(--green);line-height:1.2}
.faq-item[open] summary::after{content:'−'}
.faq-item p{margin:0;padding:0 46px 18px 20px;font-size:14.5px;color:var(--ink);line-height:1.6}
/* Туры — приоритетная секция на главной (выше экскурсий, отбита фоном).
Верхняя граница акцентного зелёного — тот же маркер, что и у бейджа дней
на карточке тура, чтобы зона туров считывалась как единое целое. */
.tours-priority{background:var(--panel);border-top:2px solid var(--green);border-bottom:1px solid var(--line);padding:54px 0}
.tours-priority .eyebrow{display:inline-flex;align-items:center;gap:6px}
.proof{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.proof-in{display:flex;flex-wrap:wrap;gap:26px;justify-content:space-around;text-align:center;padding:30px 0}
.proof .n{font-family:'Inter Tight';font-weight:800;font-size:28px;color:var(--green)}
.proof .l{font-family:'JetBrains Mono';color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:4px}
.tour-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:900px){.tour-grid{grid-template-columns:1fr}}
/* Тот же принцип, что у .card выше: без transform на самом наведённом
элементе — только box-shadow (отрисовочное свойство, не влияет на
хит-тест), чтобы карточка тура не дёргалась и курсор не мигал. */
.tour{position:relative;border-radius:18px;overflow:hidden;min-height:320px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;transition:box-shadow .2s;background:var(--ink)}
.tour:hover{box-shadow:0 18px 40px -14px rgba(0,0,0,.55)}
.tour img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s}
.tour:hover img{transform:scale(1.05)}
.tour::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(30,29,23,.92),rgba(30,29,23,.1));z-index:1}
.tour>*{position:relative;z-index:2;color:#fff}
.tour .days{display:inline-block;align-self:flex-start;font-family:'JetBrains Mono';text-transform:uppercase;letter-spacing:.04em;font-size:11.5px;font-weight:700;background:#fff;color:var(--ink);padding:5px 11px;border-radius:100px;margin-bottom:auto}
.tour h3{font-family:'Inter Tight';font-weight:700;font-size:20px;margin-top:14px}
.tour p{color:rgba(255,255,255,.82);font-size:13.5px;font-weight:400;margin-top:8px}
.tour .tf{display:flex;align-items:center;justify-content:space-between;margin-top:16px;gap:10px}
.tour .tf .price{color:#fff} .tour .book{background:#fff;color:var(--ink)} .tour .book:hover{background:#EFE9DB}
/* Карточка тура в каталоге туров (tours.html, .tour-full) — дни крупнее и в
акцентном зелёном (тур — приоритетный продукт), рейтинг-бейдж поверх фото.
Модификатор, а не правка .tour — чтобы не задеть тизер тура на главной. */
.tour .days-big{display:inline-flex;align-items:center;gap:5px;font-family:'Inter Tight';font-weight:800;font-size:15px;background:var(--green);color:#fff;padding:7px 15px;border-radius:100px;align-self:flex-start;margin-bottom:auto}
.tour .tour-rate{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.95);color:var(--ink)}
.tour-full .loc{display:flex;align-items:center;gap:5px;font-family:'JetBrains Mono';text-transform:uppercase;letter-spacing:.04em;font-size:11px;font-weight:600;color:rgba(255,255,255,.75);margin-top:14px}
.tour-full h3{margin-top:4px}
.tour-full .price small{display:block;color:rgba(255,255,255,.7);font-size:11px;font-weight:500;margin-top:2px}
/* CTA-баннер с реальным фото на фоне */
.cta{position:relative;padding:78px 0;text-align:center;color:#fff;background-color:var(--ink);background-size:cover;background-position:center;background-attachment:fixed}
.cta h2{font-family:'Inter Tight';font-weight:800;font-size:clamp(26px,4.6vw,42px);letter-spacing:-.8px;max-width:700px;margin:0 auto}
.cta p{color:rgba(255,255,255,.88);font-size:16.5px;font-weight:400;margin:14px auto 26px;max-width:500px}
.cta a{display:inline-block;font-family:'Inter Tight';font-weight:700;font-size:15.5px;color:#fff;background:var(--green-grad);padding:15px 30px;border-radius:100px;transition:transform .15s,box-shadow .15s}
.cta a:hover{transform:translateY(-1px);box-shadow:0 12px 26px -12px rgba(15,122,82,.6)}
@media(max-width:700px){.cta{background-attachment:scroll}}
/* Карусель отзывов — .rev-track едет transform:translateX, JS в index.html
пересчитывает шаг по фактической ширине .rev-viewport. Число видимых
карточек задаётся flex-basis у .rev-track>.rev на тех же брейкпоинтах,
которые JS использует для расчёта шага (3 → 2 → 1). */
.rev-carousel{display:flex;align-items:center;gap:14px}
.rev-viewport{overflow:hidden;flex:1;min-width:0}
.rev-track{display:flex;gap:20px;transition:transform .4s ease}
.rev-track>.rev{flex:0 0 calc((100% - 40px)/3);min-width:0}
@media(max-width:820px){.rev-track>.rev{flex:0 0 calc((100% - 20px)/2)}}
@media(max-width:560px){.rev-track>.rev{flex:0 0 100%}}
.rev-arrow{width:44px;height:44px;border-radius:50%;background:var(--panel);border:1px solid var(--line);display:grid;place-items:center;cursor:pointer;flex-shrink:0;font-size:22px;line-height:1;color:var(--ink);transition:background .15s,border-color .15s}
.rev-arrow:hover:not(:disabled){background:#fff;border-color:var(--green-light)}
.rev-arrow:disabled{opacity:.35;cursor:default}
@media(prefers-reduced-motion:reduce){.rev-track{transition:none}}
.rev{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px}
.rev .stars{color:var(--green);font-size:15px;letter-spacing:2px}
.rev p{font-size:14.5px;font-weight:400;margin:12px 0 16px;line-height:1.55}
.rev .who{display:flex;align-items:center;gap:11px}
.rev .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:15px;background:var(--green)}
.rev .who b{font-size:14.5px;font-weight:700;display:block}
.rev .who span{color:var(--muted);font-size:12.5px}
.how-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1000px){.how-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.how-grid{grid-template-columns:1fr}}
.step{border-radius:16px;padding:24px;background:var(--panel);border:1px solid var(--line)}
.step .no{font-family:'Inter Tight';font-weight:800;font-size:15px;width:36px;height:36px;border-radius:10px;background:var(--green);color:#fff;display:grid;place-items:center;margin-bottom:16px}
.step h3{font-family:'Inter Tight';font-weight:700;font-size:17.5px;margin-bottom:8px;color:var(--ink)}
.step p{font-size:14.5px;font-weight:400;color:var(--muted)}
/* «Почему GeoExcurs» — тот же язык карточки, что у .step (панель/бордер/
скругление/hover), иконка вместо номера. */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.why-grid{grid-template-columns:1fr}}
.why-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.why-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--green-light)}
.why-card .ic{width:44px;height:44px;border-radius:12px;background:var(--green);color:#fff;display:grid;place-items:center;margin-bottom:16px}
.why-card h3{font-family:'Bricolage Grotesque','Inter Tight';font-weight:700;font-size:17.5px;margin-bottom:8px;color:var(--ink)}
.why-card p{font-size:14.5px;color:var(--muted)}
/* Финальный CTA к контактам — тот же .nav-cta (градиентная пилюля), просто
в отдельной панели по центру. */
.about-cta{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:44px 30px;text-align:center}
.about-cta h3{font-family:'Bricolage Grotesque','Inter Tight';font-weight:700;font-size:23px;margin-bottom:8px;color:var(--ink)}
.about-cta p{color:var(--muted);margin-bottom:20px;font-size:15.5px}
.about-cta .nav-cta{display:inline-flex}
/* Атмосферный фон страницы «О проекте» — одно сплошное travel-фото очень
низкой непрозрачности на ::before (генерируется ДО остального контента,
но т.к. это position:absolute, оно всплыло бы НАД обычным статичным
текстом — поэтому .about-atmosphere-inner тоже position:relative, чтобы
реальный контент был в одной группе с ::before и побеждал по порядку в
DOM). .proof/.why-card/.how-grid внутри — с непрозрачным собственным
фоном, так что фото само выключается под ними, это ожидаемо. */
.about-atmosphere{position:relative;background:var(--cream)}
.about-atmosphere::before{
content:"";position:absolute;inset:0;
background-image:url('https://resize.tripster.ru/Gw9TYJC81tk6QW8vakhD9-FhZDs=/fit-in/1200x1000/filters:no_upscale()/https://cdn.tripster.ru/photos/a86049c3-cd64-4cb7-8dc7-335497d48a68.jpg');
background-size:cover;background-position:center 35%;
opacity:.07;pointer-events:none;
}
.about-atmosphere-inner{position:relative}
/* ==========================================================================
Редизайн about.html (премиально, без фото) — весь новый/усиленный вид
заперт под .about-page (класс на ТОЛЬКО about.html), чтобы не
задеть .page-head/.prose/.how-grid/.step/.faq-item/.why-card — их
используют 170+ других страниц (города, статьи, contacts, privacy,
catalog, tours). Стат-блок — отдельный новый класс .stat-block, а не
переиспользование .proof (тот уже занят под другую вёрстку/JS на
главной), поэтому и там нулевой риск для index.html.
========================================================================== */
.about-page .page-head{padding:78px 0 36px}
.about-page .page-head h1{font-size:clamp(36px,6vw,58px);letter-spacing:-1.2px}
.about-page .page-head p{font-size:18px;margin-top:16px}
.about-page .prose{max-width:680px}
.about-page .prose h2{font-size:clamp(24px,3vw,32px);letter-spacing:-.4px}
.about-page .prose h2:not(:first-child){margin-top:52px}
.about-page .prose p{font-size:17px;line-height:1.8}
/* Универсальный вертикальный ритм между смысловыми секциями about.html —
заменяет разномастные инлайновые padding, которые были на странице
раньше (54px/44px/26px как попало). no-top/no-bottom — там, где секция
уже отбита стат-блоком/разделителем с нужной стороны и второй отступ
был бы лишним. */
.about-page .about-sec{padding:72px 0}
.about-page .about-sec.no-top{padding-top:0}
.about-page .about-sec.no-bottom{padding-bottom:0}
@media(max-width:700px){.about-page .about-sec{padding:44px 0}}
/* Тонкий центрированный разделитель между смысловыми блоками, где нет
собственного фона/рамки для визуальной паузы — короткий, гаснущий по
краям, а не сплошная линия через всю ширину (та читалась бы как "конец
таблицы", а не переход мысли). */
.section-divider{height:1px;max-width:220px;margin:0 auto;background:linear-gradient(90deg,transparent,var(--line) 50%,transparent)}
/* Стат-блок — центральный акцент страницы: крупные табличные цифры (не
пропорциональные — tabular-nums, чтобы при анимации счёта разряды не
"гуляли" по ширине), считаются вверх при появлении в вьюпорте (см.
скрипт внизу about.html), мгновенно показывают итог при
prefers-reduced-motion — реализовано в самом JS, не только в CSS. */
.stat-block{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:64px 0}
.stat-block-in{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;text-align:center}
.stat-item{padding:0 12px}
.stat-n{font-family:'Bricolage Grotesque','Inter Tight';font-weight:800;font-size:clamp(28px,3.6vw,46px);color:var(--green);letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.05}
.stat-l{font-family:'JetBrains Mono';color:var(--muted);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-top:10px}
@media(max-width:820px){
.stat-block{padding:48px 0}
.stat-block-in{grid-template-columns:repeat(3,1fr);row-gap:32px}
}
@media(max-width:560px){
.stat-block-in{grid-template-columns:repeat(2,1fr);row-gap:28px}
.stat-item:last-child{grid-column:1/-1}
}
/* Карточки преимуществ/планов/шагов — чуть просторнее и крупнее иконка,
чем в базовом .why-card/.soon-card/.step (те делят стиль с другими
местами сайта, здесь просто модификатор через .about-page). */
.about-page .why-card,.about-page .soon-card{padding:32px 28px}
.about-page .why-card .ic,.about-page .soon-card .ic{width:50px;height:50px;border-radius:14px}
.about-page .why-card h3,.about-page .soon-card h3{font-size:19px}
.about-page .step{padding:28px 24px}
.about-page .step .no{width:40px;height:40px;font-size:16px}
.about-page .step h3{font-size:18.5px}
/* FAQ конкретно на about.html — крупнее текст и просторнее, чем базовый
.faq-item (тот же класс держит компактный список на 163 страницах
городов, трогать его напрямую нельзя — см. комментарий выше). */
.about-page .faq-item summary{font-size:17px;padding:22px 30px 22px 4px}
.about-page .faq-item p{font-size:15.5px;padding-right:30px}
/* Баг найден по пути (существовал и до этой правки, на всех 163+ страницах
городов тоже): .faq-item определён в styles.css дважды — один раз под
старую вёрстку с ::after{content:'+'}, второй раз под текущую с
+ в самой разметке. Оба правила пересекаются
по селектору, поэтому плюс рисуется дважды. Правлю только в рамках
.about-page — чинить общий .faq-item затронуло бы все страницы городов,
это отдельная, более крупная задача. */
.about-page .faq-item summary::after{content:none}
/* «Что дальше» — блок планов, тот же язык карточки, что .why-card, но
пунктирная рамка и бейдж «Скоро» явно отличают анонс от готовой фичи. */
.soon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
@media(max-width:820px){.soon-grid{grid-template-columns:1fr}}
.soon-card{position:relative;background:var(--panel);border:1px dashed var(--line);border-radius:16px;padding:26px}
.soon-tag{position:absolute;top:16px;right:16px;font-family:'JetBrains Mono';font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:var(--cream);border:1px solid var(--line);padding:4px 10px;border-radius:100px}
.soon-card .ic{width:44px;height:44px;border-radius:12px;background:var(--cream);border:1px solid var(--line);color:var(--green);display:grid;place-items:center;margin-bottom:16px}
.soon-card h3{font-family:'Bricolage Grotesque','Inter Tight';font-weight:700;font-size:17.5px;margin-bottom:8px;color:var(--ink)}
.soon-card p{font-size:14.5px;color:var(--muted)}
/* FAQ на about.html — нативный /: раскрытие без единой
строки JS, доступно с клавиатуры и читалками из коробки. Две колонки на
десктопе (страница «дышит» шире), одна на мобильном. Плюсик поворачивается
в крестик через transform, не через смену контента — дешёвая анимация. */
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 48px}
@media(max-width:820px){.faq-grid{grid-template-columns:1fr}}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{cursor:pointer;padding:18px 4px;min-height:44px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:16px;color:var(--ink);list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .faq-ic{flex-shrink:0;width:22px;height:22px;display:grid;place-items:center;color:var(--green);font-size:20px;font-weight:400;transition:transform .2s ease}
.faq-item[open] summary .faq-ic{transform:rotate(45deg)}
.faq-item p{padding:0 26px 18px 4px;color:var(--muted);font-size:14.5px;line-height:1.6}
@media(prefers-reduced-motion:reduce){.faq-item summary .faq-ic{transition:none}}
footer{border-top:1px solid var(--line);padding:44px 0 40px;background:var(--panel)}
.foot-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:24px}
.foot-links{display:flex;gap:6px 24px;flex-wrap:wrap;font-size:14px;font-weight:500;color:var(--muted)}
.foot-links a{display:inline-flex;align-items:center;min-height:44px}
.foot-links a:hover{color:var(--ink)}
.disc{color:var(--muted);font-size:12.5px;max-width:680px;line-height:1.65;border-top:1px solid var(--line);padding-top:20px}
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(246,241,231,.94);backdrop-filter:blur(10px);border-top:1px solid var(--line);transition:bottom .3s ease}
.sticky a{display:block;text-align:center;font-family:'Inter Tight';font-weight:700;color:#fff;background:var(--green-grad);padding:14px;border-radius:12px}
@media(max-width:700px){.sticky{display:block}body{padding-bottom:80px}}
/* Когда открыт cookie-баннер, сдвигаем нижнюю sticky-CTA вверх на его высоту
(--cookie-banner-h ставит cookie-consent.js по факту отрисованного размера
баннера — текст может перенестись по-разному на разной ширине экрана),
чтобы кнопка «Смотреть экскурсии» никогда не пряталась под баннером. */
body.has-cookie-banner .sticky{bottom:var(--cookie-banner-h,0px)}
/* Cookie-баннер — общий для всех страниц, разметку создаёт cookie-consent.js
(см. этот файл), в HTML статически ничего не лежит. Кремовый/изумрудный,
как весь сайт; кнопки ≥44px для тач-таргетов. */
.cookie-banner{
position:fixed;left:0;right:0;bottom:0;z-index:82;
background:var(--cream);border-top:1px solid var(--line);
padding:16px 22px calc(16px + env(safe-area-inset-bottom));
box-shadow:0 -10px 30px -15px rgba(30,29,23,.25);
transform:translateY(110%);transition:transform .3s ease;
}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.cookie-banner p{font-size:13.5px;color:var(--ink);line-height:1.5;flex:1;min-width:240px}
.cookie-banner a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.cookie-banner-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-accept,.cookie-decline{min-height:44px;padding:10px 22px;border-radius:100px;font-family:'Inter Tight',sans-serif;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap}
.cookie-accept{border:0;background:var(--green-grad);color:#fff}
.cookie-accept:hover{filter:brightness(.95)}
.cookie-decline{border:1px solid var(--line);background:transparent;color:var(--muted)}
.cookie-decline:hover{color:var(--ink);border-color:var(--ink)}
@media(max-width:600px){
.cookie-banner-inner{flex-direction:column;align-items:stretch;text-align:center}
.cookie-banner-actions{justify-content:center}
.cookie-accept,.cookie-decline{flex:1}
}
@media(prefers-reduced-motion:reduce){.cookie-banner,.sticky{transition:none}}
/* Внутренние страницы (О нас / Контакты / Политика) */
.page-head{padding:64px 0 34px;border-bottom:1px solid var(--line)}
.page-head h1{font-size:clamp(30px,5vw,46px);max-width:760px;margin-top:12px;color:var(--ink)}
.page-head p{color:var(--muted);font-size:16px;margin-top:14px;max-width:620px;font-weight:400}
/* Фото-баннер хаба (cities.html) — самостоятельный вариант "шапки на фото",
НЕ переиспользует .hero с главной (тот заточен под форму поиска/табы и
свою высоту 380px+) — здесь только заголовок и строка статистики поверх
фото, ниже и спокойнее. Затемняется ОБЁРТКА (::after поверх фото), а не
само изображение (opacity/filter на img/фоне), чтобы фото оставалось
насыщенным — просвечивает ровно один тёмный слой между фото и текстом. */
.page-hero{position:relative;overflow:hidden;min-height:340px;display:flex;align-items:center;color:#fff}
.page-hero-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 68%}
.page-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(165deg,rgba(10,26,20,.7),rgba(10,26,20,.46) 55%,rgba(10,26,20,.58))}
.page-hero-in{position:relative;z-index:2;width:100%;padding:38px 0}
.page-hero .crumbs{color:rgba(255,255,255,.7)}
.page-hero .crumbs a{color:rgba(255,255,255,.7)}
.page-hero .crumbs a:hover{color:#fff}
.page-hero .crumbs .sep{color:rgba(255,255,255,.35)}
.page-hero .crumbs span:last-child{color:#fff}
.page-hero .eyebrow{color:#8FD9B4}
.page-hero h1{font-size:clamp(28px,4.6vw,44px);max-width:760px;margin-top:12px;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.3)}
.page-hero .hub-total{font-family:'JetBrains Mono';color:rgba(255,255,255,.92);font-size:15px;letter-spacing:.02em;margin-top:16px;text-shadow:0 1px 12px rgba(0,0,0,.3)}
.page-hero p{color:rgba(255,255,255,.92);font-size:16px;margin-top:14px;max-width:620px;font-weight:400;text-shadow:0 1px 12px rgba(0,0,0,.3)}
@media(max-width:700px){
.page-hero{min-height:230px}
.page-hero-in{padding:26px 0}
.page-hero .hub-total{font-size:13.5px;margin-top:12px}
.page-hero p{font-size:14.5px;margin-top:10px}
}
/* Кнопка-призыв в hero страницы города — якорь на #exp (блок экскурсий),
который на этих страницах стоит НИЖЕ контентных секций (Что посмотреть/
Когда ехать/Как добраться — правильно для SEO), поэтому человеку из
соцсетей, которому нужны сразу экскурсии, важен явный, заметный путь
вниз без смены порядка секций. Сплошная заливка --green-grad (тот же
градиент, что у .nav-cta/.sticky — установленный "premium accent" сайта,
не отдельно придуманный цвет), а не контур — чтобы кнопка реально
выделялась на фоне текстовых секций вокруг. Тень в состоянии покоя даёт
лёгкий "приподнятый" вид сразу, hover усиливает подъём и тень — тот же
приём, что у .nav-cta/.cat, только заметнее по размеру и глубине тени,
под масштаб главного CTA страницы, а не второстепенного элемента шапки. */
.hero-cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-cta{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--green-grad);color:#fff;font-family:'Inter Tight';font-weight:700;font-size:17px;padding:16px 30px;border-radius:14px;box-shadow:0 14px 30px -16px rgba(15,122,82,.55);transition:transform .18s ease,box-shadow .18s ease}
.hero-cta:hover{transform:translateY(-3px);box-shadow:0 22px 40px -16px rgba(15,122,82,.6)}
/* Второй, тихий якорь рядом с главной кнопкой — на #transfers (блок
трансферов внутри "Как добраться"). Контур вместо заливки, меньше
паддингов и размера шрифта, никакой тени/ореола/анимации по умолчанию —
намеренно проигрывает heroExcursionsCta по весу: экскурсии остаются
главным товаром страницы, трансфер лишь заметное, но не доминирующее
дополнение. Рендерится (см. heroTransfersCta) только когда у города
реально есть трансферы — на страницах без них в разметке этой ссылки
нет вовсе, no display:none-заглушки. */
.hero-cta-secondary{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--ink);font-family:'Inter Tight';font-weight:600;font-size:14.5px;padding:11px 20px;border:1.5px solid var(--line);border-radius:14px;transition:border-color .18s ease,color .18s ease,transform .18s ease}
.hero-cta-secondary:hover{border-color:var(--green);color:var(--green);transform:translateY(-2px)}
.hero-cta-secondary:hover .hero-cta-arrow{animation:none;transform:translateX(4px)}
/* Ореол — расходящееся кольцо из box-shadow (растёт, растворяется, затем
пауза до следующего цикла: 70-100% кадра уже полностью прозрачны и
неподвижны, поэтому визуально это "вдох — пауза — вдох", а не
непрерывное дёрганое биение). Именно box-shadow, а не смена цвета/
заливки кнопки — сама кнопка не меняется, "мигания" нет, только тихое
свечение вокруг неё. ::before, а не отдельная разметка — эффект чисто
декоративный, HTML для него не нужен. */
.hero-cta::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:heroCtaHalo 2.8s ease-out infinite}
@keyframes heroCtaHalo{0%{box-shadow:0 0 0 0 rgba(15,122,82,.4)}70%,100%{box-shadow:0 0 0 14px rgba(15,122,82,0)}}
.hero-cta:hover::before{animation:none}
.hero-cta-arrow{display:inline-block;transition:transform .18s ease;animation:heroCtaArrowDrift 2.4s ease-in-out infinite}
@keyframes heroCtaArrowDrift{0%,100%{transform:translateX(0)}50%{transform:translateX(3px)}}
.hero-cta:hover .hero-cta-arrow{animation:none;transform:translateX(4px)}
@media(max-width:480px){.hero-cta{font-size:15.5px;padding:14px 22px;gap:8px}.hero-cta-secondary{font-size:13.5px;padding:10px 16px}}
/* На всякий случай явно, а не только через общее правило *{animation:none}
ниже по файлу — псевдоэлементы (::before) универсальный селектор *
формально не покрывает (нужен *::before отдельно), в проекте уже есть
такой же явный паттерн для .skeleton-shimmer::after. Кнопка должна
остаться полностью статичной, если в системе отключены анимации. */
@media(prefers-reduced-motion:reduce){.hero-cta::before,.hero-cta-arrow{animation:none}}
/* Быстрые факты в шапке раздела (напр. tours.html) — тот же язык, что у
.proof на главной (крупная цифра акцентным зелёным + мелкая подпись
капслоком), но лёгкий инлайн-ряд без своей панели/фона — шапка раздела
и так на кремовом фоне, отдельный бордер здесь был бы лишним. */
/* display:none по умолчанию (не атрибут hidden!) — .quick-facts сама задаёт
display:flex как авторское правило, а оно по каскаду перебивает UA-правило
[hidden]{display:none} независимо от специфичности (origin: author > user-
agent) — с hidden-атрибутом строка была бы видна с плейсхолдерами «—» ещё
до того, как JS посчитает и покажет реальные факты. */
.quick-facts{display:none;flex-wrap:wrap;gap:28px;margin-top:18px}
.quick-facts.is-visible{display:flex}
.quick-facts .n{font-family:'Inter Tight';font-weight:800;font-size:26px;color:var(--green)}
.quick-facts .l{font-family:'JetBrains Mono';color:var(--muted);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-top:2px}
@media(max-width:480px){.quick-facts{flex-direction:column;gap:12px}}
.crumbs{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:14px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--green)}
.crumbs .sep{margin:0 2px;color:var(--line)}
.crumbs span:last-child{color:var(--ink);font-weight:600}
/* Колонка чтения статьи — ~700px, комфортная длина строки */
.prose{padding:44px 0;max-width:700px;font-size:16.5px;line-height:1.7}
.prose h2{font-family:'Bricolage Grotesque','Inter Tight';font-weight:700;font-size:23px;letter-spacing:-.3px;margin:36px 0 14px;color:var(--ink)}
.prose h2:first-child{margin-top:0}
.prose p{margin-bottom:16px}
.prose p.muted{color:var(--muted)}
.prose ul{margin:0 0 14px 20px}
.prose li{margin-bottom:8px}
.prose a{color:var(--green);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--green-dark)}
.notice{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 20px;font-size:13.5px;color:var(--muted);margin:26px 0;line-height:1.6}
.notice b{color:var(--ink)}
.contact-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:8px;max-width:420px;margin-top:20px}
.contact-card .eyebrow{margin-bottom:2px}
.contact-card a.mail{font-family:'Inter Tight';font-weight:700;color:var(--green);font-size:18px}
.contact-card a.mail:hover{color:var(--green-dark)}
.contact-card span{color:var(--muted);font-size:13.5px}
/* Статьи и подборки — рубрики-чипы (не .cat-switch: там жёсткая пилюля на
один ряд, а тут 4 разной длины подписи, нужен перенос на мобильных без
поломки формы контейнера — поэтому каждая рубрика своя отдельная пилюля). */
.article-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.article-tab{font-family:'Inter Tight';font-weight:700;font-size:13.5px;color:var(--muted);background:var(--panel);border:1px solid var(--line);padding:9px 18px;min-height:40px;border-radius:100px;cursor:pointer;transition:background .15s,color .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
.article-tab:hover{color:var(--ink)}
.article-tab.active{background:var(--green);color:#fff;border-color:var(--green)}
.article-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;margin-top:8px}
.article-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s ease,border-color .2s ease}
.article-card:hover{box-shadow:var(--shadow);border-color:var(--green-light)}
.article-card .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--panel)}
.article-card .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.article-card:hover .ph img{transform:scale(1.06)}
.article-card .cat-tag{position:absolute;top:12px;left:12px;z-index:2;background:var(--green);color:#fff;font-family:'JetBrains Mono';font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:5px 10px;border-radius:100px}
.article-card .body{padding:16px 18px 18px;display:flex;flex-direction:column;flex:1;gap:8px}
.article-card h3{font-family:'Bricolage Grotesque','Inter Tight';font-weight:700;font-size:18px;line-height:1.28;color:var(--ink)}
.article-card p{color:var(--muted);font-size:14px;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-card .card-meta{display:flex;align-items:center;justify-content:space-between;margin-top:2px;font-family:'JetBrains Mono';font-size:11.5px;color:var(--muted)}
.article-card .go{font-weight:700;color:var(--green)}
.article-card:hover .go{color:var(--green-dark)}
.article-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:40px 0;font-size:14.5px}
.article-head{padding:56px 0 8px}
.article-head .eyebrow{margin-bottom:10px}
.article-head h1{font-size:clamp(28px,4.6vw,42px);max-width:760px;color:var(--ink)}
.article-meta{display:flex;flex-wrap:wrap;gap:10px;font-family:'JetBrains Mono';font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-top:14px}
.article-lede{color:var(--muted);font-size:16.5px;max-width:640px;margin-top:16px;font-weight:400}
/* Авторские фото внутри статей блога (не Tripster CDN, а свои снимки автора,
см. media/*.jpg). Открывающий кадр — на всю ширину .wrap сразу под шапкой
статьи; остальные — внутри .prose, той же ширины, что и текст (max-width:700px
из .prose), чтобы не выбиваться из колонки чтения. */
.article-hero-photo{margin-top:28px;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);aspect-ratio:16/10}
.article-hero-photo img{width:100%;height:100%;object-fit:cover}
.article-photo{margin:28px 0;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.article-photo img{width:100%;height:auto;display:block}
.article-photo figcaption{padding:10px 2px 0;font-size:13px;color:var(--muted);font-style:italic}
.article-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0}
.article-photo-pair .article-photo{margin:0}
@media(max-width:600px){.article-photo-pair{grid-template-columns:1fr}}
.widget-slot{margin:32px 0}
.widget-slot .eyebrow{display:block;margin-bottom:6px}
.widget-slot p{color:var(--muted);font-size:13.5px;max-width:440px;margin:0 auto}
/* Каталог: панель фильтров, кнопка "Показать ещё" */
.filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:#fff;padding:14px;border-radius:14px;box-shadow:0 10px 30px -18px rgba(30,29,23,.25);margin-bottom:24px}
.filterbar select,.filterbar input{border:1px solid var(--line);color:var(--ink);font-family:inherit;font-size:16px;font-weight:500;padding:11px 13px;border-radius:9px;background:#fff;min-width:0}
.filterbar select{cursor:pointer}
.filterbar input[type=search]{flex:1;min-width:180px}
.filterbar input::placeholder{color:#797468}
@media(max-width:700px){.filterbar{flex-direction:column;align-items:stretch}.filterbar select,.filterbar input{width:100%}.filterbar input[type=search]{min-width:0}}
.load-more-wrap{display:flex;justify-content:center;padding:34px 0 8px}
.load-more{min-height:44px;display:inline-flex;align-items:center;justify-content:center;font-family:'Inter Tight';font-weight:700;font-size:14.5px;color:var(--green);background:var(--panel);border:1px solid var(--line);padding:11px 30px;border-radius:100px;cursor:pointer;transition:background .15s,color .15s}
.load-more:hover{background:var(--green);color:#fff}
.load-more:disabled{opacity:.5;cursor:default;background:var(--panel);color:var(--green)}
/* Скелетоны — на время загрузки данных, вместо пустого экрана */
.skeleton-card{pointer-events:none}
.skeleton-shimmer{position:relative;overflow:hidden;background:var(--line)}
.skeleton-shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);transform:translateX(-100%);animation:skeleton-sweep 1.4s infinite}
@keyframes skeleton-sweep{100%{transform:translateX(100%)}}
.skeleton-line{height:12px;border-radius:6px}
@media(prefers-reduced-motion:reduce){.skeleton-shimmer::after{animation:none}}
/* Активные фильтры — чипы */
.chips{display:none;flex-wrap:wrap;align-items:center;gap:8px;margin:-8px 0 24px}
.chips:has(.chip){display:flex}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-size:13px;font-weight:600;padding:6px 6px 6px 14px;border-radius:100px}
.chip button{position:relative;border:0;background:rgba(30,29,23,.08);color:var(--ink);width:22px;height:22px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;cursor:pointer;font-size:13px;line-height:1;padding:0;transition:background .15s,color .15s}
.chip button:hover{background:var(--terracotta);color:#fff}
/* Визуально крестик остаётся компактным (22px, чтобы не раздувать чип), но
тач-область растянута до 44×44 невидимым псевдоэлементом — не промахнуться пальцем. */
.chip button::before{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.chip-reset{border:0;background:none;color:var(--muted);font-size:13px;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:8px 4px;min-height:44px}
.chip-reset:hover{color:var(--ink)}
/* Пустое состояние — не тупик, а способ сбросить фильтры */
.empty-state{grid-column:1/-1;text-align:center;padding:56px 20px}
.empty-state p{margin-bottom:18px;color:var(--muted);font-size:15px}
/* Кнопка «Фильтры» + бейдж-счётчик активных фильтров (видна только на мобильных) */
.filters-toggle{display:none;align-items:center;gap:8px;min-height:44px;background:#fff;border:1px solid var(--line);padding:0 20px;border-radius:100px;font-family:'Inter Tight';font-weight:700;font-size:14px;color:var(--ink);cursor:pointer;box-shadow:0 10px 30px -18px rgba(30,29,23,.25);margin-bottom:16px}
.toggle-badge{display:none;background:var(--green);color:#fff;font-size:11px;font-weight:700;min-width:18px;height:18px;border-radius:9px;padding:0 5px;align-items:center;justify-content:center}
.filter-backdrop{display:none}
/* Мобильная шторка фильтров — вместо инлайн-панели на маленьком экране */
@media(max-width:700px){
.filters-toggle{display:inline-flex}
.filterbar{position:fixed;left:0;right:0;bottom:0;z-index:90;margin-bottom:0;border-radius:20px 20px 0 0;box-shadow:0 -14px 40px -10px rgba(30,29,23,.35);max-height:82vh;overflow-y:auto;overscroll-behavior:contain;transform:translateY(110%);transition:transform .28s ease;padding-bottom:calc(14px + env(safe-area-inset-bottom))}
.filterbar.open{transform:translateY(0)}
.filter-backdrop{display:block;position:fixed;inset:0;background:rgba(30,29,23,.45);z-index:85;opacity:0;pointer-events:none;transition:opacity .2s}
.filter-backdrop.open{opacity:1;pointer-events:auto}
.filters-apply-mobile{display:block;order:99;width:100%;min-height:44px;border:0;background:var(--green-grad);color:#fff;font-family:'Inter Tight';font-weight:700;font-size:15px;padding:12px;border-radius:9px;cursor:pointer;margin-top:6px}
}
@media(min-width:701px){.filters-apply-mobile{display:none}}
.view-all-wrap{display:flex;justify-content:center;margin-top:30px}
/* Плитки страна/город — с фото, названием и счётчиком (главная + страницы стран) */
.geo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
/* Тот же принцип, что у .card/.tour: без transform на самом наведённом
элементе — только box-shadow, иначе плитка дёргается и курсор мигает. */
.geo-tile{position:relative;display:block;overflow:hidden;border-radius:3px;aspect-ratio:4/3;color:#fff;transition:box-shadow .2s ease}
.geo-tile:hover{box-shadow:0 14px 30px -12px rgba(0,0,0,.5)}
/* ![]()
, а не CSS background — только у ![]()
есть настоящая
ленивая подгрузка; фон на много плиток (cities.html — 13 стран + 23 города)
грузился бы весь сразу, невзирая на прокрутку. */
.geo-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.geo-tile:hover .geo-bg{transform:scale(1.08)}
.geo-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(30,29,23,.82),rgba(30,29,23,.08) 62%)}
.geo-label{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:14px}
.geo-label b{font-family:'Inter Tight';font-weight:700;font-size:15.5px;line-height:1.2}
.geo-count{font-family:'JetBrains Mono';font-size:11px;opacity:.88;margin-top:4px}
/* /cities.html — алфавитный текстовый хаб-индекс */
.hub-country{margin-bottom:30px}
.hub-country h2{font-family:'Inter Tight';font-weight:700;font-size:19px;margin-bottom:4px}
.hub-country .hub-meta{color:var(--muted);font-size:13px;margin-bottom:12px}
.hub-cities{display:flex;flex-wrap:wrap;gap:8px}
.hub-cities a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:500;color:var(--ink);background:var(--panel);border:1px solid var(--line);padding:8px 14px;border-radius:100px;transition:background .15s,color .15s}
.hub-cities a:hover{background:var(--green);color:#fff;border-color:var(--green)}
.hub-cities .n{color:var(--muted);font-size:12px}
.hub-cities a:hover .n{color:rgba(255,255,255,.8)}
.hub-total{font-family:'JetBrains Mono';color:var(--muted);font-size:13px;margin-top:10px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}.reveal{opacity:1!important;transform:none!important}}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}