/* V chládku — samostatná kampaňová identita (Piráti a Starostové HK).
   ZÁMĚRNĚ nepoužívá tokens.css/atoms.css dashboardu — jiná značka, jiný jazyk. */

/* Bebas Neue je rozdělená na dva subsety. unicode-range musí přesně sedět na
   obsah souborů, jinak znak vypadne do systémového fallbacku:
   - latin soubor drží U+0000–00FF + typografickou interpunkci (– — … „ " € %)
   - latin-ext soubor drží carony/kroužky (ě š č ř ž ů ď ť ň) = česká diakritika
   Rozsahy odpovídají subsetům Google Fonts, ze kterých soubory pocházejí. */
@font-face {
  font-family: 'Bebas Neue';
  src: url('/static/fonts/BebasNeue-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  src: url('/static/fonts/BebasNeue-latinext.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Feature Text má plné pokrytí latin + latin-ext v jednom souboru → bez range. */
@font-face { font-family: 'Feature Text'; src: url('/static/fonts/FeatureText-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Feature Text'; src: url('/static/fonts/FeatureText-RegularItalic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Feature Text'; src: url('/static/fonts/FeatureText-Extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Feature Text'; src: url('/static/fonts/FeatureText-ExtraboldItalic.woff2') format('woff2'); font-weight: 800; font-style: italic; font-display: swap; }

:root {
  --vch-bg: #000;
  --vch-fg: #fff;
  --vch-pink: #CE0F68;
  --vch-yellow: #FFEC00;
  --vch-dim: rgba(255, 255, 255, .55);
  --vch-surface: #111;
  --vch-line: #2A2A2A;
  --vch-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --vch-text: 'Feature Text', Georgia, serif;
  /* Nadpis se má roztáhnout „od kraje do kraje“, ale na 2560px monitoru by
     řádek přes celou šířku byl nečitelný. 1280 px je horní mez, kde se displej
     nadpisu na svém stropu (110 px) vejde ~28–30 verzálek na řádek — krátké
     věty se nelámou a zároveň zůstává rozumná délka řádku. */
  --vch-page: 1280px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--vch-bg); }
/* Kotva z podvěty na sekci vozového parku má odskrolovat plynule, ale ne
   uživateli, který si pohyb v systému vypnul. */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--vch-bg);
  color: var(--vch-fg);
  font-family: var(--vch-text);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }

/* Celá stránka je vycentrovaná — kampaňový plakát, ne dashboard.
   `overflow-x: clip` je pojistka: žádný potomek nesmí vyrobit vodorovný scroll
   (nejrizikovější je displejový nadpis na 320 px). Clip, ne hidden — hidden by
   z .vch udělal scroll kontejner a zrušil `position: sticky` uvnitř; modal je
   position: fixed mimo .vch, takže se ho tohle netýká. */
/* Svislý prostor: nejméně 80 px nad prvním prvkem i pod patičkou, ať plakát
   nezačíná ani nekončí natěsno u okraje okna. */
.vch { max-width: var(--vch-page); margin: 0 auto; padding: 80px 20px; text-align: center; overflow-x: clip; }

/* Emoji glyf je vyšší než verzálky displejového písma a navíc klesá pod účaří.
   V nadpisu s řádkovým rejstříkem pod 1 (hero má .95) proto zasahoval do řádku
   nad sebou i pod sebou. Zmenšení na .8em ho vejde do výšky verzálek a posun
   o .12em nahoru srovná jeho spodek s účařím. Změřeno na 320–2560 px: emoji
   se pak vejde do inkoustového pásu textu ve všech variantách věty. */
.vch__e { font-size: .8em; vertical-align: .12em; }

/* Popisek výhradně pro odečítač obrazovky. Rozměry 2 px (ne 1 px): stačí
   stejně dobře a drží se sudé mřížky. */
.vch__sr {
  position: absolute; width: 2px; height: 2px; margin: -2px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- ovládání zobrazení -------------------------------------------------- */
/* Jedno kompaktní tlačítko místo segmentované lišty přes celou šířku sloupce.
   Lišta zabírala nad plakátovým nadpisem dva řádky a přebíjela ho; tohle nese
   obě aktuální volby v jednom řádku textu, takže se pro jejich přečtení
   nemusí otevírat. Rozbalovací panel visí pod tlačítkem, je na něj
   vycentrovaný a jeho šířka je zastropovaná viewportem, takže se vejde i na
   320 px a nikdy nepřeteče mimo obrazovku. */
/* Hlavička: značka vlevo, ovládání vpravo. Na nejužších displejích se zalomí,
   ale logo zůstane první, ať je značka vidět dřív než nastavení. */
.vch__toggles {
  margin-bottom: 80px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
/* Kotva pro absolutně umístěný panel; text-align se resetuje, protože stránka
   je vycentrovaná, ale nabídka voleb se čte odshora dolů zleva. */
.vch__ctl { position: relative; display: inline-block; text-align: left; }
.vch__ctl__btn {
  display: inline-flex; align-items: center; gap: 8px;
  /* 44 px je minimální pohodlný dotykový cíl (WCAG 2.5.5 / iOS HIG). */
  min-height: 44px; padding: 8px 16px; max-width: 100%;
  background: none; color: var(--vch-fg);
  border: 1px solid var(--vch-line); border-radius: 0;
  font-family: var(--vch-display); letter-spacing: .03em;
  font-size: clamp(16px, 4vw, 20px); line-height: 1.1;
  text-transform: uppercase; white-space: nowrap; cursor: pointer;
}
.vch__ctl__btn:hover { border-color: var(--vch-dim); }
.vch__ctl__btn:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: 2px; }
.vch__ctl__sep { color: var(--vch-dim); }
.vch__ctl__e, .vch__opt__e { font-size: .85em; }
/* Šipka se otočí, když je panel otevřený: otevřenost je znát tvarem, ne barvou.
   SVG jako data URI, žádný další zdroj (CSP img-src povoluje data:). */
.vch__ctl__car {
  width: 14px; height: 8px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E") center / 14px 8px no-repeat;
}
.vch__ctl__btn[aria-expanded="true"] .vch__ctl__car { transform: rotate(180deg); }

/* Panel s volbami. `width: max-content` drží nabídku úzkou podle nejdelšího
   popisku, `max-width` ji ale zastropuje šířkou okna. */
.vch__opts {
  position: absolute; z-index: 20; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  width: max-content; min-width: 240px; max-width: min(320px, calc(100vw - 32px));
  background: var(--vch-surface); border: 1px solid var(--vch-line);
  padding: 8px 0;
}
.vch__opts[hidden] { display: none; }
.vch__opts__h {
  font-family: var(--vch-display); font-size: 14px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--vch-dim); padding: 8px 16px 4px;
}
.vch__opts__g + .vch__opts__h { border-top: 1px solid var(--vch-line); margin-top: 8px; }
.vch__opt {
  display: grid; grid-template-columns: 16px 1fr; align-items: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 16px;
  background: none; border: 0; border-radius: 0; color: var(--vch-dim);
  font-family: var(--vch-display); font-size: 18px; letter-spacing: .03em;
  line-height: 1.1; text-transform: uppercase; text-align: left;
  white-space: nowrap; cursor: pointer;
}
.vch__opt:hover { color: var(--vch-fg); background: #1A1A1A; }
.vch__opt:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: -2px; }
.vch__opt[aria-checked="true"] { color: var(--vch-fg); }
/* Vybraná volba se pozná fajfkou (tvar) a bílým textem; růžová je doplněk,
   barva tedy není jediný nositel informace. Sloupec pro fajfku je v mřížce
   vždycky, takže se popisky nerozjíždějí podle toho, co je vybrané. */
.vch__opt__k {
  width: 16px; height: 16px; visibility: hidden;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M2 8l4 4 8-8' fill='none' stroke='%23CE0F68' stroke-width='2'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.vch__opt[aria-checked="true"] .vch__opt__k { visibility: visible; }

/* --- upozornění na nečerstvá data --------------------------------------- */
.vch__stale {
  font-size: 14px; color: var(--vch-yellow);
  border: 1px solid var(--vch-yellow); padding: 8px 14px;
  max-width: 60ch; margin: 0 auto 24px;
}
.vch__stale[hidden] { display: none; }

/* --- hero --------------------------------------------------------------- */
/* Bez max-width — nadpis smí využít celou šířku sloupce („od kraje do kraje“).
   Šířku řádku drží až --vch-page na .vch. */
.vch__hero {
  font-family: var(--vch-display); font-weight: 400;
  /* Na mobilu nese nadpis celý dojem stránky, proto vyšší spodní mez i vw
     faktor; strop 110 px drží řádek čitelný na širokém monitoru. */
  font-size: clamp(46px, 11.5vw, 110px); line-height: .95; letter-spacing: .01em;
  text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word;
}
.vch__hero .t { color: var(--vch-yellow); }
/* Číslo v nadpisu je přepínač počty ⇄ procenta, proto je to <button> (fokus,
   Enter i mezerník obstará prohlížeč sám). Odtud ty resety: uvnitř nadpisu
   se musí chovat jako kus textu, ne jako ovládací prvek. (Prohlížeče z tlačítka
   dělají inline-block bez ohledu na `display: inline`; obsahem je vždy krátké
   číslo, takže se uvnitř nemá co lámat a sazbě nadpisu to nevadí.)
   Klikatelnost hlásí tečkované podtržení: nenápadné, drží plakátovou sazbu
   a není to modrý odkaz. Tloušťka 2px, ať je vidět i pod 110px verzálkami. */
.vch__hero .n {
  color: var(--vch-pink);
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  background: none; border: 0; border-radius: 0; padding: 0; margin: 0;
  cursor: pointer;
  text-decoration: underline dotted;
  text-decoration-thickness: 2px; text-underline-offset: .08em;
}
.vch__hero .n:hover { color: var(--vch-yellow); }
.vch__hero .n:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: 2px; }
/* Podvěta je doplněk nadpisu, ne druhý nadpis: drobnější písmo a širší sloupec,
   aby se obě věty (stav v ulicích + vozový park) vešly každá na jeden řádek.
   Na úzkém displeji se přirozeně zalomí, tam se jeden řádek uhlídat nedá. */
.vch__sub { font-size: clamp(16px, 1.5vw, 18px); line-height: 1.5; margin: 24px auto 0; max-width: 72ch; }
/* Věta o vozovém parku je samostatný odstavec pod hlavní podvětou. Odstup drží
   jen tolik, aby byly věty rozeznatelné jako dvě: řádkování 1.5 už samo dělá
   mezeru a s dalšími 10px se dvojice rozpadala na dva nesouvisející řádky. */
.vch__sub__fleet { display: block; margin-top: 4px; }
.vch__sub a {
  color: var(--vch-yellow); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.vch__sub a:hover { text-decoration-thickness: 2px; }
.vch__sub a:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: 2px; }

/* Poznámka o tom, že se stránka obnovuje sama. Drobná a tlumená: je to
   vysvětlivka k číslům nad ní, ne další sdělení plakátu. */
.vch__live { font-size: 14px; color: var(--vch-dim); margin-top: 16px; }

/* --- sdílení ------------------------------------------------------------ */
.vch__actions { margin-top: 32px; }
/* Sdílení je hlavní cíl stránky, tlačítko tomu odpovídá velikostí. Strop 36px
   drží odstup od nadpisu (ten má strop 110px a spodní mez 46px), takže i na
   nejužším displeji zůstane tlačítko druhý nejvýraznější prvek, ne první. */
.vch__btn {
  font-family: var(--vch-display); font-size: clamp(26px, 4.5vw, 36px);
  letter-spacing: .06em; line-height: 1.1;
  background: var(--vch-pink); color: var(--vch-yellow); border: 0;
  min-height: 44px; padding: 16px 48px; cursor: pointer;
}
.vch__btn:hover { filter: brightness(1.15); }
.vch__btn:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: 2px; }

/* --- mřížka vozů -------------------------------------------------------- */
/* Odstup mezi sekcemi je 120px a je stejný u všech tří (vozy na trati, vozový
   park, žebříček linek): rytmus stránky drží jedna hodnota, ne tři různé.
   64px na plakátové sazbě nestačilo — sekční nadpis má až 52px, takže se
   předchozí obsah a další nadpis četly jako jeden blok. */
.vch__vehicles { margin-top: 120px; }
.vch__vehicles__note {
  font-size: 16px; color: var(--vch-dim); line-height: 1.5;
  max-width: 60ch; margin: 12px auto 0;
}
/* Popisek a výběr linky vedle sebe: jeden řádek i na 320 px, výběr se dotažením
   šířky nikdy neroztáhne přes celý sloupec. */
.vch__filter {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin: 20px 0;
}
.vch__filter__lbl {
  font-family: var(--vch-display); font-size: 18px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--vch-dim);
}
.vch__select {
  font: 400 16px var(--vch-text);
  background: var(--vch-surface); color: var(--vch-fg);
  border: 1px solid var(--vch-line); border-radius: 0;
  min-height: 44px; padding: 0 40px 0 14px; max-width: 100%;
  -webkit-appearance: none; appearance: none;
  /* Vlastní šipka: appearance:none nativní odebere. SVG jako data URI, žádný
     další zdroj (CSP img-src povoluje data:). */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.vch__select:disabled { color: var(--vch-dim); cursor: not-allowed; }
.vch__select:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: 2px; }

.vch__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
/* Karta je <button> — otevírá detail, takže fokus i Enter/mezerník obstará
   prohlížeč sám (žádné ruční role="button" + keydown). Odtud ty resety. */
.vch__car {
  background: var(--vch-surface); border: 1px solid #222; padding: 12px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  width: 100%; font: inherit; color: inherit; text-align: center; cursor: pointer;
}
.vch__car:hover { border-color: var(--vch-dim); }
.vch__car:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: 2px; }
.vch__car--hot { border-color: var(--vch-pink); }
.vch__car--hot:hover { border-color: var(--vch-pink); filter: brightness(1.3); }
.vch__car__line { font-family: var(--vch-display); font-size: 28px; line-height: 1; overflow-wrap: anywhere; }
.vch__car__meta { font-size: 14px; color: var(--vch-dim); overflow-wrap: anywhere; }
.vch__car__ac { font-size: 16px; }
.vch__empty { grid-column: 1 / -1; font-size: 16px; color: var(--vch-dim); }

/* --- vozový park: podíl v katalogu vs. šance v provozu ------------------- */
.vch__fl { margin-top: 120px; }
.vch__fl[hidden] { display: none; }
.vch__fl__note { font-size: 16px; color: var(--vch-dim); line-height: 1.5; max-width: 62ch; margin: 12px auto 0; }
.vch__fl__note strong { color: var(--vch-fg); font-weight: 800; }
.vch__fl__note + .vch__fl__note { font-size: 14px; margin-top: 8px; }
.vch__fl__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 8px; margin-top: 28px;
}
.vch__fl__card {
  background: var(--vch-surface); border: 1px solid #222;
  padding: 16px; text-align: left; display: grid; gap: 16px; align-content: start;
}
/* Sekce ukazuje všechny trakce vždy (v tom je pointa srovnání) — vybraný typ
   se jen zvýrazní rámečkem, ať přepínač nahoře nepůsobí jako by nefungoval. */
.vch__fl__card--on { border-color: var(--vch-dim); }
.vch__fl__name {
  font-family: var(--vch-display); font-weight: 400;
  font-size: 26px; line-height: 1; letter-spacing: .02em; text-transform: uppercase;
  overflow-wrap: anywhere;
}
.vch__fl__m { display: grid; gap: 6px; }
.vch__fl__lbl {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--vch-dim);
}
.vch__fl__gauge { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
/* Dva údaje v jedné kartě se nesmí splést: „kolik jich má“ je tenký tlumený
   pruh, „jak často potkáš“ tlustý barevný. Hodnota je vždy i číslem. */
.vch__fl__bar { background: #1A1A1A; height: 10px; min-width: 0; }
.vch__fl__fill { display: block; height: 100%; min-width: 2px; }
/* Vozový park je celý růžový, žebříček linek celý žlutý: sekce se od sebe
   odliší barvou, a hodnotu nese délka pruhu a vypsané procento, ne odstín.
   (Dřívější přebarvení nad 50 % bylo bez legendy a četlo se jako šum.) */
.vch__fl__fill--own { background: var(--vch-dim); }
.vch__fl__fill--odds { background: var(--vch-pink); }
.vch__fl__m:last-child .vch__fl__bar { height: 18px; }
.vch__fl__val {
  font-family: var(--vch-display); font-size: 26px; line-height: 1;
  min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums;
}
.vch__fl__sub { font-size: 14px; color: var(--vch-dim); line-height: 1.4; }
/* Čtyři karty: 4 v řadě jen dokud se vejdou. Pod 900 px pevně 2×2 (auto-fit by
   nechal čtvrtou kartu samotnou přes celou šířku), pod 560 px pod sebe —
   níž už se pruh a číslo v jedné řádce tísní. */
@media (max-width: 900px) { .vch__fl__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .vch__fl__grid { grid-template-columns: 1fr; } }

/* --- žebříček linek ----------------------------------------------------- */
.vch__lines { margin-top: 120px; }
.vch__h2 {
  font-family: var(--vch-display); font-weight: 400;
  font-size: clamp(28px, 5vw, 52px); line-height: 1; letter-spacing: .01em;
  text-transform: uppercase;
}
.vch__lines__note {
  font-size: 14px; color: var(--vch-dim); line-height: 1.5;
  max-width: 60ch; margin: 12px auto 24px;
}
.vch__lines__list { list-style: none; max-width: 656px; margin: 0 auto; }
.vch__line {
  display: grid; grid-template-columns: 3.5em 1fr 3.5em;
  align-items: center; gap: 12px; padding: 6px 8px;
  /* průhledné pravidlo drží řádky zarovnané i bez zvýraznění */
  border-left: 2px solid transparent;
}
/* Žebříček ukazuje všechny linky bez ohledu na přepínač typu (je to celkový
   přehled). Vybraná trakce se proto v seznamu zvýrazní podložením a růžovým
   pravidlem (stejný signál jako u aktivního přepínače nahoře), ať je volba
   znát a přitom se ze seznamu nic neztratí. */
.vch__line--on { background: var(--vch-surface); border-left-color: var(--vch-pink); }
.vch__line__no {
  font-family: var(--vch-display); font-size: 26px; line-height: 1;
  text-align: right; overflow-wrap: anywhere;
}
/* Celý žebříček je žlutý (vozový park růžový): barva odlišuje sekce navzájem,
   ne řádky uvnitř. Hodnotu nese délka pruhu a vždy vypsané procento. */
.vch__line__bar { background: #1A1A1A; height: 14px; min-width: 0; }
.vch__line__fill { display: block; height: 100%; min-width: 2px; background: var(--vch-yellow); }
.vch__line__pct { font-size: 16px; text-align: left; font-variant-numeric: tabular-nums; }

/* --- časté otázky ------------------------------------------------------- */
/* Jediná část stránky, kterou vidí i návštěvník (a crawler) bez JavaScriptu,
   takže se NESMÍ schovávat do rozbalovacích bloků. Odpovědi jsou souvislá
   próza, proto zarovnané doleva v úzkém sloupci — vycentrovaná sazba se u víc
   než dvou řádků čte špatně. */
/* Kampaňová výzva drží stejný odstup jako ostatní sekce, ať se nelepí na
   žebříček linek nad sebou. Logo pod ní je vycentrované jako celý plakát. */
.vch__call {
  margin-top: 120px; display: flex; flex-direction: column;
  align-items: center; gap: 16px;
}
.vch__faq { margin-top: 120px; }
.vch__faq__list {
  max-width: 62ch; margin: 24px auto 0; text-align: left;
  display: grid; gap: 2px;
}
/* Akordeon na nativním <details>: zavřený zabere jeden řádek, obsah ale
   zůstává v HTML, takže o něj crawler ani AI asistent nepřijde. */
.vch__faq__i { border-bottom: 1px solid var(--vch-line); }
.vch__faq__q {
  font-family: var(--vch-display); font-weight: 400;
  font-size: 22px; line-height: 1.2; letter-spacing: .02em; text-transform: uppercase;
  /* 44px dotykový cíl i u jednořádkové otázky */
  min-height: 44px; padding: 10px 32px 10px 0; position: relative;
  cursor: pointer; list-style: none;
  display: flex; align-items: center;
}
.vch__faq__q h3 { font: inherit; margin: 0; letter-spacing: inherit; }
/* Výchozí trojúhelníček pryč (WebKit má vlastní pseudoprvek), místo něj
   znaménko vpravo, které se v otevřeném stavu překlopí na minus. */
.vch__faq__q::-webkit-details-marker { display: none; }
.vch__faq__q::after {
  content: '+'; position: absolute; right: 0; top: 50%;
  transform: translateY(-50%); color: var(--vch-yellow);
}
.vch__faq__i[open] > .vch__faq__q::after { content: '\2212'; }
.vch__faq__q:hover { color: var(--vch-yellow); }
.vch__faq__q:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: -2px; }
.vch__faq__a a { color: var(--vch-yellow); text-decoration: underline; text-underline-offset: 2px; }
.vch__faq__a a:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: 2px; }
.vch__faq__a {
  font-size: 16px; line-height: 1.5; color: var(--vch-dim);
  margin: 0 0 16px; padding-right: 32px;
}

/* Upozornění pro prohlížeč s vypnutým JavaScriptem. Žlutý rámeček jako
   u hlášky o nečerstvých datech: obojí je stav, ne obsah stránky. */
.vch__noscript {
  font-size: 14px; color: var(--vch-yellow);
  border: 1px solid var(--vch-yellow); padding: 8px 14px;
  max-width: 60ch; margin: 16px auto 0;
}
.vch__noscript a { color: var(--vch-yellow); text-underline-offset: 2px; }

/* --- detail vozu (modal + mapa) ----------------------------------------- */
.vch__modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.vch__modal[hidden] { display: none; }
.vch__modal__bd { position: absolute; inset: 0; background: rgba(0, 0, 0, .85); }
.vch__modal__panel {
  position: relative; width: 100%; max-width: 460px;
  /* vh je fallback pro prohlížeče bez dvh — bez max-height by panel přerostl
     viewport a `overflow-y: auto` by se nikdy neuplatnilo. */
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  background: var(--vch-surface); border: 1px solid var(--vch-line);
  padding: 24px 20px; text-align: center;
}
.vch__modal__panel:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: -2px; }
.vch__modal__close {
  position: absolute; top: 4px; right: 4px; z-index: 1;
  background: none; border: 0; cursor: pointer; padding: 10px;
  font: 400 18px var(--vch-text); line-height: 1; color: var(--vch-dim);
}
.vch__modal__close:hover { color: var(--vch-fg); }
.vch__modal__close:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: -2px; }
.vch__modal__title {
  font-family: var(--vch-display); font-weight: 400;
  font-size: clamp(30px, 8vw, 44px); line-height: 1; letter-spacing: .01em;
  text-transform: uppercase; padding: 0 28px; overflow-wrap: break-word;
}
/* Klíčová věta detailu, a u vozu bez klimatizace růžová. Růžová #CE0F68 má na
   povrchu modalu (#111) kontrast 3,5:1, což na běžný text nestačí (WCAG AA
   žádá 4,5:1). Paletu měnit nechceme, takže se věta sází jako „velký text":
   20 px v řezu Extrabold je nad prahem 18,66 px / 700, kde AA žádá 3:1. */
.vch__modal__ac { font-size: 20px; font-weight: 800; margin-top: 8px; }
.vch__modal__ac--no { color: var(--vch-pink); }
.vch__dl { margin-top: 20px; display: grid; gap: 12px; }
.vch__dl div { display: grid; gap: 2px; }
.vch__dl dt {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--vch-dim);
}
.vch__dl dd { font-size: 16px; line-height: 1.35; overflow-wrap: anywhere; }
/* Evidenční číslo je zároveň odkazem do veřejné databáze vozidel. Žlutá
   s podtržením jako ostatní odkazy stránky, ať je poznat, že se dá kliknout. */
.vch__dl dd a { color: var(--vch-yellow); text-decoration: underline; text-underline-offset: 2px; }
.vch__dl dd a:hover { text-decoration-thickness: 2px; }
.vch__dl dd a:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: 2px; }
/* Cíl jízdy chodí ze zdroje verzálkami. Sází se stejným písmem i velikostí jako
   ostatní hodnoty; jediný rozdíl je nepatrné prostrkání, které verzálkám
   v textovém řezu vrací čitelnost. */
.vch__dir { letter-spacing: .02em; }
/* Odkaz na jízdní řád linky pod výpisem údajů. */
.vch__modal__link { display: inline-block; margin-top: 18px; font-size: 16px; }
.vch__modal__link a {
  color: var(--vch-yellow); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.vch__modal__link a:hover { text-decoration-thickness: 2px; }
.vch__modal__link a:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: 2px; }
/* Vůz, který mezitím dojel a zmizel z dat. Není to chyba, jen konec jízdy. */
.vch__modal__gone { font-size: 14px; color: var(--vch-yellow); margin-top: 16px; }
.vch__modal__gone[hidden] { display: none; }
/* Leaflet přidá .leaflet-container přímo na tenhle element. Vlastní text-align
   je tu proto, aby atribuce (licenční podmínka Carta) nedědila centrování. */
.vch__map {
  height: 240px; margin-top: 20px; border: 1px solid var(--vch-line);
  text-align: left; font-family: var(--vch-text);
  /* Leaflet má výchozí #ddd — než se donačtou dlaždice, blikl by světlý
     obdélník uprostřed černého modalu. */
  background: #000;
}
.vch__nomap { font-size: 14px; color: var(--vch-dim); margin-top: 20px; }
/* Detail se obnovuje častěji než stránka; bez téhle věty vypadá mapa jako
   zamrzlý obrázek. Patří pod mapu, ne nad ni: nejdřív poloha, pak vysvětlivka. */
.vch__modal__live { font-size: 12px; color: var(--vch-dim); margin-top: 8px; }

/* Ovládání mapy do palety stránky. Leaflet CSS je vendor soubor (needitovat),
   všechno se přebíjí odsud — proto ty `.vch__map` prefixy: zvyšují specificitu
   nad vendor pravidla a zároveň drží override jen na téhle mapě. */
.vch__map .leaflet-bar { box-shadow: none; border: 1px solid var(--vch-line); border-radius: 0; }
.vch__map .leaflet-bar a,
.vch__map .leaflet-bar a:hover,
.vch__map .leaflet-bar a:focus {
  background-color: var(--vch-surface); color: var(--vch-fg);
  border-bottom-color: var(--vch-line); border-radius: 0;
}
/* Vendor zaobluje krajní tlačítka selektorem s .leaflet-touch (vyšší
   specificita než pravidlo výše) — stránka nikde jinde zaoblení nemá. */
.vch__map .leaflet-bar a:first-child,
.vch__map .leaflet-bar a:last-child { border-radius: 0; }
.vch__map .leaflet-bar a:hover { background-color: #222; }
.vch__map .leaflet-bar a:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: -2px; }
.vch__map .leaflet-bar a.leaflet-disabled { background-color: var(--vch-surface); color: #555; }
/* Atribuce je licenční podmínka OSM/Carta — NEODSTRAŇOVAT, jen ztlumit. */
.vch__map .leaflet-control-attribution {
  background: rgba(0, 0, 0, .65); color: var(--vch-dim);
  font-family: var(--vch-text); font-size: 12px;
}
.vch__map .leaflet-control-attribution a { color: var(--vch-dim); text-decoration: underline; }
.vch__map .leaflet-control-attribution a:hover,
.vch__map .leaflet-control-attribution a:focus { color: var(--vch-fg); }

/* --- kampaňová výzva (poslední blok stránky) ---------------------------- */
/* Otázka nad výzvou: prozaická věta, tedy textové písmo a malá velikost.
   Displejovými verzálkami by z ní byl druhý nadpis, který by výzvu přebil. */
.vch__ask {
  font-size: clamp(16px, 2vw, 20px); line-height: 1.4;
  max-width: 46ch; color: var(--vch-fg); margin: 0 auto;
}
/* Výzva nad logem: menší než sekční nadpisy, ale displejovým písmem, ať je
   to čitelně kampaňová pointa a ne další metodická poznámka. */
.vch__cta {
  font-family: var(--vch-display); letter-spacing: .02em;
  font-size: clamp(20px, 3.4vw, 30px); line-height: 1.1;
  text-transform: uppercase; color: var(--vch-fg); margin: 0;
}
.vch__logo-link { display: inline-block; line-height: 0; }
.vch__logo-link:focus-visible { outline: 2px solid var(--vch-yellow); outline-offset: 4px; }
/* Logo v kampaňové výzvě je hlavní výskyt značky, proto výrazně větší než
   v hlavičce; obě varianty mají stejný soubor (440 px), liší se jen sazbou. */
.vch__logo { max-width: 300px; height: auto; }
.vch__logo--top { max-width: 132px; }

@media (max-width: 640px) {
  /* Nahoře se prostor krátí, ať se na telefonu nadpis vejde nad ohyb; dolní
     80 px zůstává, aby stránka nekončila natěsno pod poslední sekcí. */
  .vch { padding: 48px 16px 80px; }
  /* Na telefonu je 120px skoro celá výška ohybu, proto 72px: pořád jasná pauza
     mezi sekcemi, ale neplýtvá se svislým prostorem. */
  .vch__vehicles, .vch__fl, .vch__lines, .vch__call, .vch__faq { margin-top: 72px; }
  /* Sdílení je hlavní akce a na dotyku se nejlíp trefuje palcem přes celou
     šířku sloupce. Nad 640px si tlačítko drží šířku podle textu. */
  .vch__btn { width: 100%; }
}
@media (max-width: 420px) {
  .vch { padding: 40px 12px 80px; }
  .vch__grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 6px; }
  .vch__car { padding: 10px 8px; }
  .vch__car__ac { font-size: 14px; }
  .vch__btn { padding: 14px 24px; }
  .vch__fl__card { padding: 14px 12px; gap: 14px; }
  .vch__fl__name { font-size: 24px; }
  .vch__fl__val { font-size: 24px; }
  .vch__line { grid-template-columns: 2.8em 1fr 3.2em; gap: 8px; }
  .vch__line__no { font-size: 22px; }
  .vch__line__pct { font-size: 14px; }
  /* Modal má na 320 px co nejvíc plochy — rám ubereme, obsah ne. */
  .vch__modal { padding: 8px; }
  .vch__modal__panel { max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); padding: 20px 12px; }
  .vch__map { height: 200px; }
}