/*
  Волгоград · куда пойти

  Визуальная система — городская навигация: белый фон, тёмно-синий текст,
  жёлтый сигнальный цвет для главных действий и собственный цвет линии
  у каждой категории, как на схеме транспорта. Цвет категории приходит
  из админки в переменной --c.
*/

:root{
  color-scheme:light;
  --ground:#FFFFFF;
  --surface:#F3F5F4;
  --raised:#FFFFFF;
  --line:#E0E4E3;
  --line-strong:#C5CCCB;
  --ink:#14213D;
  --ink-2:#434D63;
  --ink-3:#687086;
  --signal:#FFC61A;
  --signal-hover:#FFB800;
  --signal-ink:#14213D;
  --focus:#1677C7;
  --ok:#2B8049;
  --err:#C23A2B;
  --field-line:#7D8593;
  --shadow:0 10px 24px -18px rgba(20,33,61,.45);

  --f-head:"Unbounded","Arial Black",system-ui,sans-serif;
  --f-body:"Onest","Segoe UI",Roboto,system-ui,sans-serif;
  --maxw:1240px;
  --pad:clamp(16px,4vw,40px);
  --r:12px;
  --hdr:64px;
}


/* ── основа ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 16px)}
body{margin:0; background:var(--ground); color:var(--ink); font:400 16px/1.55 var(--f-body); -webkit-font-smoothing:antialiased}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
button,input,textarea{font:inherit; color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--focus); outline-offset:2px}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad)}
.ico{flex:none; display:block}
.skip{position:absolute; left:var(--pad); top:-100px; z-index:100; padding:10px 14px; border-radius:10px; background:var(--signal); color:var(--signal-ink); font-weight:600; text-decoration:none}
.skip:focus{top:8px}

/* цвет категории для линий, точек и остановок */
.line,.chip,.stop,.route{--cc:var(--c)}
/* маршруты не относятся к категориям, поэтому их линия нейтральная */
.route{--cc:var(--ink)}

/* ── кнопки ── */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:10px; border:1.5px solid transparent; font-weight:600; font-size:.95rem; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color .15s ease,border-color .15s ease}
.btn--signal{background:var(--signal); color:var(--signal-ink)}
.btn--signal:hover{background:var(--signal-hover)}
.btn--signal:disabled{opacity:.6; cursor:progress}
.btn--line{background:transparent; border-color:var(--line-strong); color:var(--ink)}
.btn--line:hover{border-color:var(--ink)}

/* ── шапка ── */
.hdr{position:sticky; top:0; z-index:50; background:var(--ground); border-bottom:1px solid transparent; transition:border-color .2s ease}
.hdr.is-stuck{border-bottom-color:var(--line)}
.hdr__in{display:flex; align-items:center; gap:24px; height:var(--hdr)}
.logo{display:flex; align-items:center; gap:10px; margin-right:auto; text-decoration:none}
.logo__mark{display:grid; place-items:center; width:32px; height:32px; border-radius:10px; background:var(--signal); color:var(--signal-ink)}
.logo__name{font:700 1.05rem/1 var(--f-head); letter-spacing:-.02em}
.logo__sub{padding-left:10px; border-left:1px solid var(--line-strong); font-size:.88rem; color:var(--ink-3)}
.nav{display:flex; gap:2px}
.nav a{padding:8px 12px; border-radius:10px; font-size:.95rem; color:var(--ink-2); text-decoration:none}
.nav a:hover{background:var(--surface); color:var(--ink)}
@media (max-width:880px){ .nav{display:none} }
@media (max-width:480px){
  .logo__sub{display:none}
  .hdr .btn{padding:0 12px; font-size:.88rem}
}

/* ── первый экран ── */
.hero{padding-block:clamp(20px,3.5vw,40px) clamp(20px,3vw,32px)}
.hero__in{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:end}
@media (max-width:900px){ .hero__in{grid-template-columns:1fr} }
.hero__title{margin:0; max-width:14ch; font:700 clamp(2.05rem,4.8vw,3.7rem)/1.04 var(--f-head); letter-spacing:-.035em; text-wrap:balance}
.hero__lead{margin:18px 0 0; max-width:46ch; text-wrap:pretty; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-2)}
.hero__lead strong{font-weight:600; color:var(--ink)}

.facts{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 0; padding:0; list-style:none}
.fact{display:flex; align-items:baseline; gap:8px; padding:10px 14px; border-radius:10px; border:1.5px solid transparent; background:var(--surface); font-size:.93rem; color:var(--ink-2); text-decoration:none; transition:border-color .15s ease}
.fact:hover{border-color:var(--ink)}
.fact b{font:700 1.2rem/1 var(--f-head); letter-spacing:-.02em; color:var(--ink); font-variant-numeric:tabular-nums}

/* схема категорий: длина линии пропорциональна числу идей */
.lines{margin:0; padding:14px 18px; border-radius:16px; background:var(--surface)}
.lines__cap{margin:0 0 6px; font-size:.88rem; color:var(--ink-3)}
.line{display:grid; grid-template-columns:8.5rem minmax(0,1fr) 2rem 14px; align-items:center; gap:12px; margin-inline:-8px; padding:5px 8px; border-radius:10px; text-decoration:none}
.line:hover{background:var(--raised)}
.line__name{font-size:.95rem; font-weight:500}
.line__track{position:relative; height:12px}
.line__track::before{content:""; position:absolute; left:0; top:1px; width:10px; height:10px; border-radius:50%; background:var(--cc); z-index:1}
.line__bar{position:absolute; left:2px; top:4px; height:4px; width:calc(var(--w) - 2px); border-radius:4px; background:var(--cc); transform-origin:left; animation:grow .7s cubic-bezier(.2,.7,.2,1) both; animation-delay:calc(var(--i,0) * 55ms)}
.line__n{font:600 .95rem/1 var(--f-head); text-align:right; font-variant-numeric:tabular-nums}
@keyframes grow{from{transform:scaleX(0)} to{transform:scaleX(1)}}
@media (max-width:900px){ .lines{display:none} }

/* ── панель фильтров ── */
.fbar{position:sticky; top:var(--hdr); z-index:40; background:var(--ground); border-block:1px solid var(--line); transition:box-shadow .2s ease}
.fbar.is-stuck{box-shadow:var(--shadow)}
.fbar__in{display:flex; flex-direction:column; gap:10px; padding-block:12px}
.fbar__row{display:flex; flex-wrap:wrap; align-items:center; gap:8px}

.search{position:relative; display:flex; align-items:center; flex:1 1 260px; max-width:460px}
.search .ico{position:absolute; left:13px; color:var(--ink-3); pointer-events:none}
.search input{width:100%; height:44px; padding:0 40px; border-radius:10px; border:1.5px solid var(--field-line); background:var(--raised); font-size:1rem; transition:border-color .15s ease}
.search input::placeholder{color:var(--ink-3)}
.search input:focus{outline:none; border-color:var(--ink)}
.search__key{position:absolute; right:10px; display:grid; place-items:center; min-width:22px; height:22px; border:1px solid var(--line-strong); border-radius:6px; font:500 .78rem/1 var(--f-body); color:var(--ink-3)}
.search input:focus ~ .search__key,
.search input:not(:placeholder-shown) ~ .search__key{display:none}
@media (hover:none){ .search__key{display:none} }

.scroller{display:flex; align-items:center; gap:6px; margin-inline:calc(var(--pad) * -1); padding:0 var(--pad) 2px; overflow-x:auto; scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller__sep{flex:none; width:1px; height:22px; margin-inline:6px; background:var(--line-strong)}
.toggles,.chips{flex:none; display:flex; gap:6px}
.toggle{display:inline-flex; align-items:center; gap:5px; height:36px; padding:0 13px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--raised); font-size:.92rem; font-weight:500; white-space:nowrap; cursor:pointer}
.toggle .ico{display:none}
.toggle:hover{border-color:var(--ink)}
.toggle[aria-pressed="true"]{background:var(--signal); border-color:var(--signal); color:var(--signal-ink)}
.toggle[aria-pressed="true"] .ico{display:block}

.chip{flex:none; display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border-radius:999px; border:1.5px solid var(--line); background:var(--raised); font-size:.92rem; color:var(--ink-2); white-space:nowrap; text-decoration:none}
.chip i{width:9px; height:9px; border-radius:50%; background:var(--cc)}
.chip b{font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--line-strong); color:var(--ink)}
.chip[aria-current="page"]{background:var(--ink); border-color:var(--ink); color:var(--ground)}
.chip[aria-current="page"] b{color:inherit; opacity:.7}
.chip[aria-current="page"] i{box-shadow:0 0 0 2px var(--ground)}

@media (max-width:620px){
  .fbar__in{gap:8px; padding-block:8px}
  .search{max-width:none}
  .search input{height:42px}
}

/* на широких экранах панель в одну строку: поиск, переключатели и список категорий */
.catsel{display:none; position:relative}
.catsel select{height:44px; min-width:230px; padding:0 40px 0 14px; border-radius:10px; border:1.5px solid var(--field-line); background:var(--raised); font:500 .95rem/1 var(--f-body); color:var(--ink); appearance:none; -webkit-appearance:none; cursor:pointer}
.catsel .ico{position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--ink-3); pointer-events:none}
@media (min-width:1024px){
  .fbar__in{flex-direction:row; align-items:center; gap:8px}
  .fbar__row{flex:1 1 auto; min-width:0}
  .search{max-width:none}
  .scroller{display:contents}
  .scroller__sep,.chips{display:none}
  .toggle{height:44px; padding:0 16px; border-radius:10px}
  .catsel{display:block}
}
/* на узких экранах строка категорий листается вбок: затухание у края подсказывает, что там есть ещё */
@media (max-width:1023px){
  .scroller{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent); mask-image:linear-gradient(to right,#000 calc(100% - 48px),transparent)}
  .scroller.at-end{-webkit-mask-image:none; mask-image:none}
}

/* ── витрина ── */
.catalog{padding-bottom:clamp(48px,8vw,96px)}
.results{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding-top:6px}
.results__count{margin:0; font-size:.93rem; color:var(--ink-3)}
.results__count em{font-style:normal; font-weight:600; color:var(--ink)}
.reset{min-height:44px; padding:0; border:0; background:none; font-weight:500; color:var(--ink-2); text-decoration:none; text-underline-offset:3px; cursor:pointer}
.reset:hover{color:var(--focus); text-decoration:underline}

.group{padding-top:24px}
.group + .group{margin-top:16px}
.group__head{display:grid; grid-template-columns:auto auto minmax(0,1fr); align-items:center; column-gap:12px; row-gap:2px; margin-bottom:16px}
.pict{display:grid; place-items:center; width:40px; height:40px; border-radius:10px; background:var(--c); color:#fff}
.group__title{margin:0; font:600 1.4rem/1.1 var(--f-head); letter-spacing:-.025em}
.group__n{font-size:.92rem; color:var(--ink-3); font-variant-numeric:tabular-nums}
.group__tag{grid-column:2 / -1; margin:0; font-size:.93rem; color:var(--ink-3)}
.group__head .pict{grid-row:1 / span 2}

.grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px}
@media (max-width:1000px){ .grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:620px){ .grid{grid-template-columns:1fr} }

.card{display:flex; flex-direction:column; gap:14px; padding:18px 18px 16px; overflow:hidden; border-radius:var(--r); border:1px solid var(--line); background:var(--raised)}
.card__img{width:calc(100% + 36px); max-width:none; margin:-18px -18px 0; aspect-ratio:16/10; object-fit:cover}
.card__body{flex:1}
.card__t{margin:0; font:600 1.14rem/1.25 var(--f-body); letter-spacing:-.01em; text-wrap:balance}
.card__d{margin:8px 0 0; font-size:.95rem; line-height:1.5; color:var(--ink-2)}
.card__meta{display:flex; flex-wrap:wrap; gap:6px 14px; margin:0; padding:12px 0 0; border-top:1px solid var(--line); list-style:none; font-size:.86rem; color:var(--ink-3)}
.card__meta li{display:inline-flex; align-items:center; gap:5px}
.card__meta .is-free{font-weight:500; color:var(--ok)}
.card__meta .is-kids{padding:1px 8px; border-radius:999px; background:var(--surface); color:var(--ink-2)}
.card__link{display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:.92rem; font-weight:500; color:var(--focus); text-underline-offset:3px}
.card.is-entering{animation:enter .26s ease both; animation-delay:calc(min(var(--i,0),12) * 16ms)}
@keyframes enter{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

.empty{display:flex; flex-direction:column; align-items:center; gap:6px; margin-top:16px; padding:56px 16px; border:1.5px dashed var(--line-strong); border-radius:var(--r); text-align:center; color:var(--ink-3)}
.empty b{font:600 1.2rem/1.2 var(--f-head); letter-spacing:-.02em; color:var(--ink)}

/* ── разделы ── */
.section{padding-block:clamp(48px,8vw,96px); border-top:1px solid var(--line)}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:28px}
.sec-title{margin:0; font:700 clamp(1.55rem,3vw,2.4rem)/1.08 var(--f-head); letter-spacing:-.03em; text-wrap:balance}
.sec-lead{margin:10px 0 0; max-width:56ch; font-size:1.02rem; color:var(--ink-2)}

/* ── один день: остановки на одной линии ── */
.day__nav{display:flex; gap:8px}
@media (hover:none){ .day__nav{display:none} }
.iconbtn{display:grid; place-items:center; width:44px; height:44px; border-radius:10px; border:1.5px solid var(--line-strong); background:transparent; cursor:pointer}
.iconbtn:hover:not(:disabled){border-color:var(--ink)}
.iconbtn:disabled{opacity:.35; cursor:default}

.stops{
  --edge:max(var(--pad), calc((100% - var(--maxw)) / 2 + var(--pad)));
  display:grid; grid-auto-flow:column; grid-auto-columns:clamp(250px,26vw,300px);
  margin:0; padding:0 var(--edge) 12px; list-style:none;
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--edge); scrollbar-width:thin;
}
.stop{position:relative; padding-right:24px; scroll-snap-align:start}
.stop::before{content:""; position:absolute; left:17px; right:0; top:16px; height:3px; background:var(--line-strong)}
.stop:last-child::before{display:none}
.stop__dot{position:relative; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; border:3px solid var(--cc); background:var(--ground); color:var(--ink); font:600 .85rem/1 var(--f-head); box-shadow:0 0 0 4px var(--ground)}
.stop__img{width:100%; margin-top:16px; border-radius:var(--r); aspect-ratio:4/3; object-fit:cover}
.stop__place{margin:16px 0 0; font-size:.86rem; color:var(--ink-3)}
.stop__t{margin:4px 0 0; font:600 1.15rem/1.2 var(--f-head); letter-spacing:-.025em}
.stop__d{margin:8px 0 0; font-size:.95rem; color:var(--ink-2)}
.stop__meta{display:flex; align-items:center; gap:5px; margin:10px 0 0; font-size:.86rem; color:var(--ink-3)}

/* ── маршруты: как линия транспорта — номер маршрута и остановки по времени ── */
.routes{display:grid}
.route{padding-block:28px; border-top:1px solid var(--line)}
.route:first-child{padding-top:4px; border-top:0}
.route__head{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; margin-bottom:22px}
.route__plate{display:grid; place-items:center; width:60px; height:60px; border-radius:14px; background:var(--ink); color:#fff; font:700 1.35rem/1 var(--f-head); letter-spacing:-.02em; font-variant-numeric:tabular-nums; box-shadow:inset 0 -6px 0 var(--signal)}
.route__t{margin:0; font:700 clamp(1.25rem,2.2vw,1.6rem)/1.15 var(--f-head); letter-spacing:-.025em; text-wrap:balance}
.route__s{margin:6px 0 0; color:var(--ink-2)}
.route__facts{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px 16px; margin:0; padding:0; list-style:none; font-size:.93rem; color:var(--ink-2); font-variant-numeric:tabular-nums}
.route__facts li{display:inline-flex; align-items:center; gap:6px}
.route__line{--dot:18px; display:grid; grid-auto-flow:column; grid-auto-columns:minmax(124px,1fr); margin:0; padding:0 0 6px; list-style:none; overflow-x:auto}
.route__stop{position:relative; display:grid; grid-template-rows:20px var(--dot) auto; row-gap:10px; padding-right:14px}
.route__stop::before{content:""; position:absolute; left:0; right:0; top:calc(20px + 10px + var(--dot) / 2 - 3px); height:6px; background:var(--signal)}
.route__stop:first-child::before{left:calc(var(--dot) / 2)}
.route__stop:last-child::before{right:auto; width:calc(var(--dot) / 2)}
.route__stop time{font:600 .95rem/20px var(--f-body); color:var(--ink); font-variant-numeric:tabular-nums}
.route__dot{position:relative; z-index:1; width:var(--dot); height:var(--dot); border-radius:50%; border:4px solid var(--ink); background:var(--ground)}
.route__stop:first-child .route__dot,.route__stop:last-child .route__dot{background:var(--ink)}
.route__name{font-size:.93rem; line-height:1.35; color:var(--ink-2)}
@media (max-width:760px){
  .route__head{grid-template-columns:auto minmax(0,1fr)}
  .route__facts{grid-column:1 / -1; justify-content:flex-start}
  .route__line{grid-auto-flow:row; grid-auto-columns:auto; overflow:visible}
  .route__stop{grid-template-columns:48px var(--dot) minmax(0,1fr); grid-template-rows:auto; column-gap:14px; align-items:center; padding:9px 0}
  .route__stop::before{left:calc(48px + 14px + var(--dot) / 2 - 3px); right:auto; top:0; bottom:0; width:6px; height:auto}
  .route__stop:first-child::before{left:calc(48px + 14px + var(--dot) / 2 - 3px); top:50%}
  .route__stop:last-child::before{width:6px; top:0; bottom:50%}
}

/* ── сезоны ── */
.seasons{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px}
@media (max-width:960px){ .seasons{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:560px){ .seasons{grid-template-columns:1fr} }
.season{padding-top:16px; border-top:3px solid var(--ink)}
.season__m{margin:0; font-size:.88rem; color:var(--ink-3)}
.season__t{margin:6px 0 0; font:600 1.12rem/1.2 var(--f-head); letter-spacing:-.02em}
.season__d{margin:8px 0 0; font-size:.95rem; color:var(--ink-2)}

/* ── заявка ── */
.add{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,72px); align-items:start}
@media (max-width:860px){ .add{grid-template-columns:1fr} }
.contacts{margin:28px 0 0}
.contacts div{display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-top:1px solid var(--line)}
.contacts dt{color:var(--ink-3)}
.contacts dd{margin:0; font-weight:500; text-align:right}
.contacts a{text-decoration:none}
.contacts a:hover{color:var(--focus); text-decoration:underline}

.form{display:grid; gap:16px; padding:clamp(20px,3vw,32px); border-radius:16px; background:var(--surface)}
.field{display:grid; gap:6px}
.field label{font-size:.95rem; font-weight:500}
.field label span{margin-left:6px; font-weight:400; color:var(--ink-3)}
.field input,.field textarea{width:100%; min-height:48px; padding:12px 14px; border-radius:10px; border:1.5px solid var(--field-line); background:var(--raised); font-size:1rem}
.field textarea{min-height:112px; resize:vertical}
.field input:focus,.field textarea:focus{outline:none; border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:var(--err)}
.form__foot{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px}
.form__note{margin:0; font-size:.88rem; color:var(--ink-3)}
.form__msg{display:none; margin:0; padding:12px 14px; border-radius:10px; font-size:.95rem}
.form__msg.ok{display:block; background:color-mix(in srgb,var(--ok) 14%,var(--raised))}
.form__msg.err{display:block; background:color-mix(in srgb,var(--err) 12%,var(--raised))}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* ── подвал ── */
.foot{padding-block:28px 36px; border-top:1px solid var(--line); font-size:.9rem; color:var(--ink-3)}
.foot__in{display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px 40px}
.foot p{margin:0}
.foot .foot__brand{font:600 .98rem/1.3 var(--f-head); letter-spacing:-.02em; color:var(--ink)}
.foot .foot__note{max-width:56ch; margin-top:6px}
.foot__meta{display:grid; gap:6px; text-align:right}
@media (max-width:640px){ .foot__meta{text-align:left} }

/* ── ссылки и значки ── */
.card__actions{display:flex; flex-wrap:wrap; gap:6px 18px}
.card__link,.stop__link{display:inline-flex; align-items:center; gap:6px; padding-block:5px; margin-block:-5px; font-size:.9rem; font-weight:500; color:var(--ink-2); text-decoration:none}
.card__link:hover,.stop__link:hover{color:var(--focus); text-decoration:underline; text-underline-offset:3px}
.stop__link{margin-top:5px}
.iconlink{display:grid; place-items:center; width:44px; height:44px; border-radius:10px; border:1.5px solid var(--line-strong); color:var(--ink); text-decoration:none; transition:border-color .15s ease}
.iconlink:hover{border-color:var(--ink)}
.fact{align-items:center}
.fact .ico{color:var(--ink-3)}
.contacts dt{display:flex; align-items:center; gap:8px}
.foot__icons{display:flex; gap:8px; justify-content:flex-end}
.foot__line{display:flex; align-items:center; justify-content:flex-end; gap:6px}
@media (max-width:640px){ .foot__icons,.foot__line{justify-content:flex-start} }
@media (max-width:880px){ .hdr .iconlink,.hdr .btn{display:none} }

/* ── сворачивание групп, меню, стрелки ── */
/* сворачиваем только когда есть скрипт: без него видны все карточки, а кнопка скрыта */
.js .group:not(.is-open) .card.is-extra{display:none}
.catalog.is-filtered .group .card.is-extra{display:flex}
.catalog.is-filtered .group__more{display:none}
.group__more{display:none; align-items:center; gap:8px; min-height:44px; margin-top:12px; padding:0 16px; border-radius:10px; border:1.5px solid var(--line-strong); background:transparent; font-weight:600; font-size:.95rem; cursor:pointer; transition:border-color .15s ease}
.group__more:hover{border-color:var(--ink)}
.js .group__more{display:inline-flex}
.group__more .ico{transition:transform .2s ease}
.group.is-open .group__more .ico{transform:rotate(180deg)}

.fact .ico:last-child{margin-left:2px}
.line .ico{color:var(--ink-3)}
.line:hover .ico{color:var(--ink)}

.menu{display:none; position:relative}
.menu__btn{display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; border-radius:10px; border:1.5px solid var(--line-strong); font-weight:600; font-size:.95rem; cursor:pointer; list-style:none}
.menu__btn::-webkit-details-marker{display:none}
.menu[open] .menu__btn{border-color:var(--ink)}
.menu__panel{position:absolute; right:0; top:calc(100% + 8px); z-index:60; display:grid; min-width:230px; padding:8px; border:1px solid var(--line); border-radius:16px; background:var(--raised); box-shadow:var(--shadow)}
.menu__panel a{display:flex; align-items:center; gap:8px; min-height:44px; padding:0 12px; border-radius:10px; font-weight:500; text-decoration:none}
.menu__panel a:hover{background:var(--surface)}
@media (max-width:880px){ .menu{display:block} }

/* ── сезонные темы: акцент меняется вместе с сезоном, фон остаётся белым ── */
:root{--season-tint:#FFF6D6}
html[data-season="spring"]{--signal:#D6334A; --signal-hover:#BF2A40; --signal-ink:#FFFFFF; --season-tint:#FEF3F5}
html[data-season="summer"]{--signal:#FFC61A; --signal-hover:#FFB800; --signal-ink:#14213D; --season-tint:#FFF7DC}
html[data-season="autumn"]{--signal:#E8792E; --signal-hover:#D96A1F; --signal-ink:#14213D; --season-tint:#FEF3EA}
html[data-season="winter"]{--signal:#2563C9; --signal-hover:#1D52A8; --signal-ink:#FFFFFF; --season-tint:#F2F6FD}

.season-pill{display:inline-flex; align-items:center; gap:8px; margin-bottom:14px; padding:6px 13px; border-radius:999px; border:1.5px solid transparent; background:var(--season-tint); color:var(--ink); font-size:.9rem; font-weight:500; text-decoration:none; transition:border-color .15s ease}
.season-pill i{width:9px; height:9px; border-radius:50%; background:var(--signal)}
.season-pill:hover{border-color:var(--signal)}

.seasonal{padding-block:clamp(32px,5vw,56px); border-top:1px solid var(--line); background:var(--season-tint); transition:background-color .3s ease}
.season-tabs{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px}
.season-tab{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; border:1.5px solid var(--line-strong); background:var(--raised); color:var(--ink-2); font-weight:500; text-decoration:none; transition:border-color .15s ease,background-color .15s ease}
.season-tab:hover{border-color:var(--ink); color:var(--ink)}
.season-tab[aria-current="true"]{background:var(--signal); border-color:var(--signal); color:var(--signal-ink)}
.season-tab small{padding:1px 7px; border-radius:999px; background:var(--surface); color:var(--ink-2); font-size:.74rem; font-weight:600}
/* на телефоне четыре сезона в одну строку: бейдж «сейчас» становится точкой, текст остаётся для чтения с экрана */
@media (max-width:560px){
  .season-tabs{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
  .season-tab{justify-content:center; gap:5px; padding:0 4px; font-size:.95rem}
  .season-tab small{width:7px; height:7px; padding:0; overflow:hidden; font-size:0; background:currentColor}
}
.seasonal .sec-head{margin-bottom:20px}
.seasonal__eyebrow{display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:.9rem; font-weight:500; color:var(--ink-2)}
.seasonal__eyebrow::before{content:""; width:22px; height:6px; border-radius:3px; background:var(--signal)}
.srow{display:grid; grid-auto-flow:column; grid-auto-columns:clamp(240px,23vw,284px); gap:12px; margin:0 calc(var(--pad) * -1); padding:2px var(--pad) 14px; list-style:none; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--pad); scrollbar-width:thin}
.scard{display:flex; flex-direction:column; gap:8px; padding:16px; border-radius:var(--r); border:1px solid var(--line); background:var(--raised); scroll-snap-align:start}
.scard__cat{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; color:var(--ink-3)}
.scard__cat i{width:8px; height:8px; border-radius:50%; background:var(--c)}
.scard__t{margin:0; font:600 1.08rem/1.25 var(--f-body); text-wrap:balance}
.scard__d{flex:1; margin:0; font-size:.9rem; line-height:1.45; color:var(--ink-2)}
.scard__meta{display:flex; flex-wrap:wrap; gap:4px 12px; margin:0; padding:0; list-style:none; font-size:.84rem; color:var(--ink-3)}
.scard__meta li{display:inline-flex; align-items:center; gap:5px}
.scard__meta .is-free{font-weight:500; color:var(--ok)}

a.season{display:block; color:inherit; text-decoration:none; transition:border-color .15s ease}
a.season:hover,.season.is-now{border-top-color:var(--signal)}
.season__m b{margin-left:8px; padding:1px 8px; border-radius:999px; background:var(--signal); color:var(--signal-ink); font-size:.74rem; font-weight:600}

/* ── согласие на обработку данных и cookie ── */
.consent-check{display:flex; align-items:flex-start; gap:10px; font-size:.93rem; line-height:1.45; color:var(--ink-2); cursor:pointer}
.consent-check input{flex:none; width:20px; height:20px; margin:1px 0 0; accent-color:var(--ink); cursor:pointer}
.consent-check input[aria-invalid="true"]{outline:2px solid var(--err); outline-offset:2px}
.consent-check a{color:var(--ink); text-underline-offset:3px}
.cookies{position:fixed; left:50%; bottom:16px; z-index:60; display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; width:min(760px, calc(100% - 24px)); padding:14px 16px; transform:translateX(-50%); border:1px solid var(--line); border-radius:14px; background:var(--raised); box-shadow:0 18px 40px -20px rgba(20,33,61,.45)}
.cookies p{flex:1 1 280px; margin:0; font-size:.93rem; color:var(--ink-2)}
.cookies a{color:var(--ink); text-underline-offset:3px}
.cookies__btns{display:flex; flex-wrap:wrap; gap:8px}
.linkbtn{padding:0; border:0; background:none; font:inherit; color:var(--focus); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.foot a{color:inherit; text-underline-offset:3px}

/* ── текстовые страницы ── */
.doc__in{max-width:780px}
.doc h2{margin:36px 0 10px; font:600 1.2rem/1.25 var(--f-head); letter-spacing:-.02em}
.doc p{color:var(--ink-2)}
.doc a{color:var(--ink); text-underline-offset:3px}
.doc .muted{margin-top:36px; font-size:.9rem; color:var(--ink-3)}
.doc__warn{padding:12px 14px; border-radius:10px; background:var(--season-tint); color:var(--ink)}

/* ── страница места и ссылки на неё ── */
.card__t a,.scard__t a,.stop__t a{color:inherit; text-decoration:none}
.card__t a:hover,.scard__t a:hover,.stop__t a:hover{text-decoration:underline; text-underline-offset:3px}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0 0 20px; font-size:.9rem; color:var(--ink-3)}
.crumbs a{color:var(--ink-2); text-underline-offset:3px}
.place__in{max-width:880px}
.place__cat{display:flex; align-items:center; gap:10px; margin:0 0 12px; font-weight:500; color:var(--ink-2)}
.place__cat .pict{width:34px; height:34px; border-radius:9px}
.place__title{margin:0}
.place__lead{margin:14px 0 0; max-width:62ch; font-size:clamp(1.05rem,1.6vw,1.2rem); color:var(--ink-2)}
.place__img{width:100%; margin-top:24px; border-radius:16px; aspect-ratio:16/9; object-fit:cover}
.place__facts{display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; padding:0; list-style:none}
.place__facts li{display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:10px; background:var(--surface); font-size:.93rem; color:var(--ink-2)}
.place__facts .is-free{font-weight:500; color:var(--ok)}
.place__actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px}
.place__more{margin-top:48px; padding-top:32px; border-top:1px solid var(--line)}
.place__h2{margin:0 0 16px; font:600 1.3rem/1.2 var(--f-head); letter-spacing:-.02em}
.rel{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin:0; padding:0; list-style:none}
.place__all{display:inline-flex; margin-top:16px; font-weight:500; color:var(--ink); text-underline-offset:3px}
.place__cta{margin-top:40px; padding:18px 20px; border-radius:14px; background:var(--season-tint); color:var(--ink-2)}
.place__cta a{font-weight:600; color:var(--ink)}
.foot .foot__links{margin-top:10px}

/* ── телефоны: зоны нажатия не меньше 44px и шапка, которая уступает экран витрине ── */
@media (pointer:coarse){
  .card__link,.stop__link{padding-block:11px; margin-block:-11px}
  .toggle,.chip{height:40px}
  .logo{padding-block:6px}
  .season-pill{padding-block:10px}
  .contacts dd a,.foot__meta p a{display:inline-block; padding-block:11px; margin-block:-11px}
}
.season__m b{font-size:.8rem}
@media (max-width:880px){
  .hdr{transition:transform .25s ease,border-color .2s ease}
  .hdr.is-hidden{transform:translateY(-100%)}
  .fbar{transition:top .25s ease,box-shadow .2s ease}
  html.hdr-hidden .fbar{top:0}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important}
}