/* Vzhled veřejných stránek nákupu (modul D) ve stylu umbrellatravel.coach.
   Čisté CSS bez sestavování, mobilní napřed. Převzato od značky: béžový
   podklad #ede8dd, antracitová lišta a patička #2a3233, oranžová #e48d3f
   a přechod tlačítek #e38c3e → #f6b96a, nadpisy Rozha One, texty Montserrat,
   hranaté tvary, fotka autobusů v úvodu.
   Text na oranžových tlačítkách je antracitový (bílý by měl kontrast 2,6:1).
   Písma leží v public/fonty/ (OFL), nic se nenačítá z cizích serverů.
   Typografie: nikde dlouhá pomlčka. */

/* -------------------------------------------------------------------------
   Písma */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonty/montserrat-latin-ext.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonty/montserrat-latin.woff2") format("woff2");
  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: "Rozha One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonty/rozha-one-latin-ext.woff2") format("woff2");
  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;
}
@font-face {
  font-family: "Rozha One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonty/rozha-one-latin.woff2") format("woff2");
  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;
}

/* -------------------------------------------------------------------------
   Barvy, písmo, rozměry */

:root {
  --barva: #e48d3f;                 /* oranžová značky (přepisuje konfigurace) */
  --prechod: linear-gradient(to right, #e38c3e 0%, #f6b96a 100%);
  --prechod-hover: linear-gradient(to right, #d97f30 0%, #f0aa58 100%);
  --oranzova-nadpis: #c46a22;       /* velké nadpisy na béžové a bílé, kontrast nad 3:1 */
  --oranzova-text: #9c4f12;         /* odkazy a malý text, kontrast nad 4,5:1 */

  --antracit: #2a3233;
  --antracit-svetly: #3b4546;
  --bezova: #ede8dd;
  --bezova-tmava: #e2dacb;
  --krem: #f7e8d4;
  --listek: #faf6ef;                /* podklad jízdenky */
  --plocha: #ffffff;
  --inkoust: #252525;
  --tlumene: #5f5a52;
  --cara: #e2dacb;
  --okraj-pole: #a59c8c;

  --uspech: #17703d;
  --chyba: #b3261e;
  --chyba-svetla: #fbeceb;
  --pozor-text: #5a3a12;

  --pismo: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --pismo-nadpis: "Rozha One", "Montserrat", Georgia, serif;

  --r: 2px;
  --stin: 0 1px 2px rgba(74, 52, 24, .06), 0 24px 48px -28px rgba(74, 52, 24, .45);
  --stin-maly: 0 1px 2px rgba(74, 52, 24, .08), 0 10px 24px -18px rgba(74, 52, 24, .5);
  --okraj-obalu: 1rem;
  --vyrez: var(--plocha);           /* barva výřezů perforace jízdenky = podklad pod ní */
  --prechod-cas: .2s ease;

  color-scheme: light;
}

@media (min-width: 640px) {
  :root { --okraj-obalu: 1.5rem; }
}

/* -------------------------------------------------------------------------
   Základ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--pismo);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--inkoust);
  background: var(--bezova);
  -webkit-font-smoothing: antialiased;
}

main { flex: 1 0 auto; }
main:focus { outline: none; }

h1, h2, h3 {
  margin: 0 0 .5em;
  line-height: 1.15;
  text-wrap: balance;
}

p { margin: 0 0 .75em; text-wrap: pretty; }

a {
  color: var(--oranzova-text);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--prechod-cas);
}
a:hover { text-decoration-thickness: 2px; }

img, svg { max-width: 100%; }

[hidden] { display: none !important; }

:focus-visible {
  outline: 3px solid var(--oranzova-nadpis);
  outline-offset: 2px;
}

.obal {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: var(--okraj-obalu);
}
.obal-uzky { max-width: 44rem; }
.obal-text { max-width: 50rem; }

.neviditelne {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.preskocit {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 20;
  padding: .75rem 1rem;
  background: var(--plocha);
  color: var(--inkoust);
  font-weight: 700;
}
.preskocit:focus { top: 1rem; }

/* Pruh TESTOVACÍ PROVOZ (platby bez peněz): tmavý text na žluté, nepřehlédnutelný. */
.testovaci-provoz {
  margin: 0;
  padding: .45rem 1rem;
  background: #ffd84d;
  color: #1f2023;
  font-size: .875rem;
  font-weight: 700;
  text-align: center;
}

/* Jen bez JavaScriptu (nápovědy, které JS nahrazuje chováním). */
.js .jen-bez-js { display: none; }
/* Co JS skrývá podle volby (jména u společné jízdenky), je skryté hned od
   načtení. nakup.js jde s defer, bez tohohle by se to nejdřív ukázalo a pak
   zmizelo. JS atribut odebere a viditelnost pak řídí sám přes hidden. */
.js [data-skryt-s-js] { display: none; }

/* -------------------------------------------------------------------------
   Hlavička: antracitová lišta s logem a jazyky, pod ní kroky nákupu */

.hlavicka {
  background: var(--antracit);
  color: #fff;
  padding-top: env(safe-area-inset-top);
}
.hlavicka :focus-visible,
.pas :focus-visible,
.pokladna :focus-visible,
.paticka :focus-visible { outline-color: var(--barva); }

.hlavicka-radek {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.75rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: #fff;
  text-decoration: none;
}
.logo img {
  display: block;
  width: auto;
  height: 2.6rem;
}
.logo-nazev {
  font-family: var(--pismo-nadpis);
  font-size: 1.5rem;
  letter-spacing: .02em;
}

/* CS | EN jako na webu značky */
.jazyky { display: flex; align-items: center; }
.jazyky a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 .8rem;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-decoration: none;
}
.jazyky a + a { border-left: 1px solid rgba(255, 255, 255, .35); }
.jazyky a:hover { color: var(--barva); }
.jazyky a[aria-current] { color: var(--barva); }

/* Měna a jazyk vedle sebe, oddělené mezerou (měna jen v kroku 1) */
.hlavicka-volby { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem 1.25rem; }

.kroky { margin: 0 0 .5rem; }
.kroky ol {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.krok {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--tlumene);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
/* Úsek trasy mezi kroky */
.krok + .krok::before {
  content: "";
  flex: none;
  width: clamp(1.5rem, 8vw, 5rem);
  border-top: 1px solid var(--okraj-pole);
  margin-right: .2rem;
}
.krok a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  color: var(--oranzova-text);
  text-decoration: none;
}
.krok a:hover { color: var(--inkoust); }
.krok-cislo {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.krok-aktualni { color: var(--inkoust); }
.krok-aktualni .krok-cislo {
  border-color: transparent;
  background: var(--prechod);
  color: var(--antracit);
}

/* -------------------------------------------------------------------------
   Úvod kroku 1: fotka autobusů značky, dole přechází do béžové. Nahoře
   ztmavení kvůli čitelnosti bílého textu. */

.pas {
  position: relative;
  color: #fff;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(24, 28, 29, .62) 0%, rgba(24, 28, 29, .3) 38%, rgba(237, 232, 221, 0) 62%),
    url("/img/umbrella/autobusy.jpg") center top / max(100%, 62rem) auto no-repeat,
    var(--bezova);
  padding-block: clamp(2.75rem, 2rem + 4vw, 5.5rem) clamp(13rem, 6rem + 24vw, 24rem);
}
.pas-obsah { position: relative; }

/* Štítek nad nadpisem s linkami po stranách (jako „Služby na míru“ na webu) */
.pas-stitek {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 0 0 .9rem;
  font-size: clamp(.8125rem, .75rem + .3vw, 1rem);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.pas-stitek span { flex: 0 1 auto; }
/* Čáry po stranách ustoupí textu: rostou nejvýš na 9rem, na telefonu se zkrátí. */
.pas-stitek::before,
.pas-stitek::after {
  content: "";
  flex: 1 1 0;
  min-width: 1rem;
  max-width: 9rem;
  border-top: 2px solid rgba(255, 255, 255, .85);
}
.pas h1 {
  margin: 0 auto .6rem;
  max-width: 18ch;
  font-family: var(--pismo-nadpis);
  font-size: clamp(2.5rem, 1.4rem + 5vw, 5rem);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.04;
  text-shadow: 0 0 34px rgba(0, 0, 0, .25);
}
.pas-text {
  max-width: 34rem;
  margin: 0 auto;
  color: rgba(255, 255, 255, .92);
  font-size: 1.0625rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}

/* Panel s výběrem navazuje na fotku a překrývá její béžový konec */
.panel-kroku {
  position: relative;
  z-index: 1;
  margin-top: clamp(-9rem, -4rem - 6vw, -4rem);
  padding-top: 1.75rem;
  padding-bottom: 0;
  background: var(--plocha);
  box-shadow: var(--stin);
}
.panel-kroku .vyber { padding-bottom: 0; }

/* -------------------------------------------------------------------------
   Obsah kroků, hlášky, souhrn chyb */

.obsah-kroku { padding-block: 2rem 3.5rem; }
.panel-kroku.obsah-kroku { padding-block: 1.75rem 0; margin-bottom: 3.5rem; }

/* Nadpis kroku a oddílu stránky: Montserrat tučně v oranžové značky
   (Libor, 2026-10-04: místo ozdobného Rozha One). */
.nadpis-kroku {
  margin: .5rem 0 1.5rem;
  color: var(--oranzova-nadpis);
  font-family: var(--pismo);
  font-size: clamp(1.6rem, 1.3rem + 1.3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.15;
}
/* Cíl odkazu Koupit jízdenky v menu (/#koupit). */
#koupit { scroll-margin-top: 1rem; }

.hlaska {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-bottom: 1.25rem;
  padding: .95rem 1.15rem;
  border-left: 4px solid var(--barva);
  background: var(--krem);
  color: var(--pozor-text);
}
.hlaska::before {
  content: "!";
  content: "!" / "";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  margin-top: .05rem;
  border-radius: 50%;
  background: var(--pozor-text);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
}
.hlaska p:last-child { margin-bottom: 0; }
.hlaska-vzor {
  border-left-color: var(--chyba);
  background: var(--chyba-svetla);
  color: #5c1410;
}
.hlaska-vzor::before { background: var(--chyba); }

.souhrn-chyb {
  margin-bottom: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--chyba);
  border-left-width: 5px;
  background: var(--plocha);
}
.souhrn-chyb:focus { outline: 3px solid var(--chyba); outline-offset: 3px; }
.souhrn-chyb h2 {
  margin-bottom: .4rem;
  color: var(--chyba);
  font-size: 1.0625rem;
  font-weight: 700;
}
.souhrn-chyb ul { margin: 0; padding-left: 1.2rem; }
.souhrn-chyb li + li { margin-top: .2rem; }
.souhrn-chyb a { color: var(--chyba); font-weight: 600; }

.prazdno {
  margin-bottom: 2rem;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--okraj-pole);
  background: var(--listek);
  font-size: 1.0625rem;
}
.prazdno p:last-child { margin: 0; }

.poznamka {
  padding: .8rem 1rem;
  background: var(--listek);
  color: var(--tlumene);
}

/* -------------------------------------------------------------------------
   Formuláře */

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Nadpis skupiny jako podnadpisy na webu značky: Montserrat velkými písmeny */
.nadpis-skupiny {
  display: block;
  margin: 0 0 .9rem;
  padding: 0;
  color: var(--antracit);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.pole { margin-bottom: 1.1rem; }
.pole:last-child { margin-bottom: 0; }
.pole > label {
  display: block;
  margin-bottom: .4rem;
  font-size: .9375rem;
  font-weight: 600;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select {
  width: 100%;
  min-height: 3.25rem;
  padding: .7rem .95rem;
  border: 1px solid var(--okraj-pole);
  border-radius: var(--r);
  background-color: var(--plocha);
  color: var(--inkoust);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  transition: border-color var(--prechod-cas), box-shadow var(--prechod-cas);
}
select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23c46a22' stroke-width='2' stroke-linecap='square'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .95rem center;
  background-size: 1rem;
  cursor: pointer;
}
input:hover, select:hover { border-color: var(--antracit); }
input:focus-visible,
select:focus-visible {
  border-color: var(--antracit);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(228, 141, 63, .55);
}
input[aria-invalid="true"],
select[aria-invalid="true"] {
  border-width: 2px;
  border-color: var(--chyba);
  background-color: #fffafa;
}

input[type="radio"],
input[type="checkbox"] {
  flex: none;
  width: 1.3rem;
  height: 1.3rem;
  margin: .15rem 0 0;
  accent-color: var(--oranzova-nadpis);
  cursor: pointer;
}

.napoveda {
  margin: .4rem 0 0;
  color: var(--tlumene);
  font-size: .875rem;
}

.pole-chyba {
  display: flex;
  gap: .45rem;
  align-items: flex-start;
  margin: .45rem 0 0;
  color: var(--chyba);
  font-size: .875rem;
  font-weight: 600;
}
.pole-chyba::before {
  content: "!";
  content: "!" / "";
  flex: none;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .12rem;
  border-radius: 50%;
  background: var(--chyba);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
}

/* Volby jako dlaždice (druh jízdenky, varianta) */
.volby {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .75rem;
}
.volby-pod-sebou { grid-template-columns: 1fr; }
/* Druh jízdenky má dvě krátké volby, vejdou se vedle sebe i na telefon. */
.typ .volby { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.typ .volba { padding: .9rem 1rem; gap: .65rem; }
.volba {
  display: flex;
  gap: .85rem;
  align-items: flex-start;
  padding: 1rem 1.15rem;
  border: 1px solid var(--cara);
  border-radius: var(--r);
  background: var(--plocha);
  cursor: pointer;
  transition: border-color var(--prechod-cas), background var(--prechod-cas), box-shadow var(--prechod-cas);
}
.volba:hover { border-color: var(--okraj-pole); }
.volba:has(input:checked) {
  border-color: var(--barva);
  background: var(--krem);
  box-shadow: inset 0 0 0 1px var(--barva);
}
.volba:has(input:focus-visible) {
  outline: 3px solid var(--oranzova-nadpis);
  outline-offset: 2px;
}
.volba input:focus-visible { outline: none; }
.volba-text { display: block; }
.volba-nazev {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}
.volba-popis {
  display: block;
  color: var(--tlumene);
  font-size: .875rem;
}

.souhlas {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
}
.souhlas label { cursor: pointer; }

/* -------------------------------------------------------------------------
   Tlačítka: hranatá, velkými písmeny. Hlavní v přechodu značky. */

.tlacitko {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.25rem;
  padding: .7rem 1.75rem;
  border: 1px solid var(--antracit);
  border-radius: var(--r);
  background: transparent;
  color: var(--antracit);
  font: inherit;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--prechod-cas), color var(--prechod-cas), box-shadow var(--prechod-cas), transform var(--prechod-cas);
}
.tlacitko:hover { background: var(--antracit); color: #fff; }
.tlacitko:active { transform: translateY(1px); }
.tlacitko-hlavni {
  border: 0;
  background: var(--prechod);
  color: var(--antracit);
  font-weight: 700;
}
.tlacitko-hlavni:hover {
  background: var(--prechod-hover);
  color: var(--antracit);
  box-shadow: 0 10px 22px -12px rgba(196, 106, 34, .8);
  transform: translateY(-1px);
}
.tlacitko-hlavni:active { transform: translateY(1px); box-shadow: none; }
.tlacitko-tiche {
  min-height: 2.75rem;
  padding-inline: 0;
  border-color: transparent;
  background: transparent;
  color: var(--oranzova-text);
  letter-spacing: .06em;
  text-decoration: underline;
  text-underline-offset: .25em;
}
.tlacitko-tiche:hover { background: transparent; color: var(--antracit); }
.tlacitko-siroke { width: 100%; }
.tlacitko[aria-disabled="true"] { opacity: .7; cursor: progress; }

/* -------------------------------------------------------------------------
   Krok 1: výběr spoje */

/* Trasa nahoře v panelu (samostatný formulář, přepíná odjezdy) */
.vyber-linky { max-width: 34rem; margin-bottom: 2.25rem; }
.vyber-linky .tlacitko { margin-top: .75rem; }
/* Popisek jako nadpisy ostatních oddílů formuláře (Druh jízdenky, Cesta tam) */
.vyber-linky .pole > label {
  margin-bottom: .9rem;
  color: var(--antracit);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.vyber > * + * { margin-top: 2.25rem; }
/* Skrytá pole (csrf, linka) na začátku formuláře okraj nedělají. */
.vyber > input[type="hidden"] + :not(input),
.udaje > input[type="hidden"] + :not(input) { margin-top: 0; }

.cesty {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
}
/* Select s dlouhými volbami nesmí roztáhnout sloupec přes šířku obrazovky. */
.cesta { min-width: 0; }
select { max-width: 100%; }
.cesta-trasa {
  color: var(--tlumene);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
}

.cestujici .napoveda { margin-top: .6rem; }

.tarify {
  border: 1px solid var(--cara);
  background: var(--plocha);
}
.tarif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
}
.tarif + .tarif { border-top: 1px solid var(--cara); }
.tarif-text { min-width: 0; }
.tarif-nazev {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}
.tarif-popis {
  display: block;
  color: var(--tlumene);
  font-size: .875rem;
}
.tarif-cena {
  display: flex;
  flex-wrap: wrap;
  gap: 0 .6rem;
  color: var(--tlumene);
  font-size: .875rem;
}
.tarif-cena strong {
  color: var(--inkoust);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.js .tarif-cena-typ { display: none; }

.pocitadlo {
  display: flex;
  flex: none;
  align-items: center;
  gap: .3rem;
}
.pocitadlo input {
  width: 4.5rem;
  padding-inline: .4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.js .pocitadlo input {
  width: 3rem;
  border-color: transparent;
  background: transparent;
  font-size: 1.125rem;
  -moz-appearance: textfield;
  appearance: textfield;
}
.js .pocitadlo input:hover { border-color: var(--cara); }
.js .pocitadlo input::-webkit-inner-spin-button,
.js .pocitadlo input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.pocitadlo-tlacitko {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--antracit);
  border-radius: var(--r);
  background: var(--plocha);
  color: var(--antracit);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background var(--prechod-cas), color var(--prechod-cas);
}
/* Krajní hodnota: aria-disabled místo disabled, ať fokus klávesnice zůstane
   na tlačítku (zakázané tlačítko by fokus shodilo na začátek stránky). */
.pocitadlo-tlacitko:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--antracit); color: #fff; }
.pocitadlo-tlacitko:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.96); }
.pocitadlo-tlacitko:disabled,
.pocitadlo-tlacitko[aria-disabled="true"] {
  border-color: var(--cara);
  color: #a39b8e;
  cursor: not-allowed;
}

/* Pokladna: antracitový pás, na telefonu přilepený dole, ať je cena
   a tlačítko pořád po ruce. V panelu kroku 1 sahá přes celou jeho šířku. */
.pokladna {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-inline: calc(-1 * var(--okraj-obalu));
  padding: .85rem var(--okraj-obalu) calc(.85rem + env(safe-area-inset-bottom));
  background: var(--antracit);
  color: #fff;
  box-shadow: 0 -14px 28px -22px rgba(24, 28, 29, .7);
}
.pokladna-cena {
  display: flex;
  flex-direction: column;
  margin: 0;
  line-height: 1.25;
}
.pokladna-bez-js {
  color: rgba(255, 255, 255, .8);
  font-size: .875rem;
}
.pokladna-popis {
  display: block;
  color: rgba(255, 255, 255, .7);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.pokladna-castka {
  font-size: 1.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
.pokladna .tlacitko { flex: none; min-width: 10rem; }

/* -------------------------------------------------------------------------
   Jízdenka: karta spoje v kroku 1 a shrnutí cesty. Perforace má po stranách
   výřezy v barvě podkladu pod jízdenkou (--vyrez). */

.spoj,
.listek {
  position: relative;
  border: 1px solid var(--cara);
  border-radius: var(--r);
  background: var(--listek);
}
.listek { background: var(--plocha); box-shadow: var(--stin-maly); border-color: transparent; }
.spoj { margin-top: .9rem; }

.spoj-den {
  margin: 0;
  padding: .85rem 1.15rem .75rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.spoj[data-prazdny] .spoj-den { color: var(--tlumene); font-weight: 600; }
.spoj[data-prazdny] .spoj-cas { color: #b4ab9c; }

.perforace {
  position: relative;
  height: 0;
  margin-inline: 1.15rem;
  border-top: 1px dashed var(--okraj-pole);
}
.perforace::before,
.perforace::after {
  content: "";
  position: absolute;
  top: calc(-.55rem - 1px);
  width: 1.1rem;
  height: 1.1rem;
  border: 1px solid var(--cara);
  border-radius: 50%;
  background: var(--vyrez);
}
.perforace::before { left: calc(-1.15rem - .6rem); clip-path: inset(0 0 0 50%); }
.perforace::after { right: calc(-1.15rem - .6rem); clip-path: inset(0 50% 0 0); }
.listek .perforace::before,
.listek .perforace::after { border-color: transparent; }

.spoj-trasa {
  display: grid;
  padding: 1rem 1.15rem 1.1rem;
}
.spoj-bod,
.spoj-cesta {
  display: grid;
  grid-template-columns: 4.6rem 1.1rem minmax(0, 1fr);
  column-gap: .6rem;
  align-items: center;
}
/* Zastávka: kroužek na trase, cíl plný */
.spoj-bod::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  width: .85rem;
  height: .85rem;
  border: 2px solid var(--barva);
  border-radius: 50%;
  background: var(--plocha);
}
.spoj-bod:last-child::before { background: var(--barva); }
.spoj-cas {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.spoj-misto {
  grid-column: 3;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.spoj-popis {
  color: var(--tlumene);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.spoj-nazev { font-weight: 600; overflow-wrap: anywhere; }
.spoj-cesta { min-height: 2.2rem; }
.spoj-cesta::before {
  content: "";
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-self: stretch;
  width: 0;
  margin-block: -.35rem;
  border-left: 2px solid var(--barva);
}
.spoj-cesta span {
  grid-column: 3;
  grid-row: 1;
  color: var(--tlumene);
  font-size: .8125rem;
}

/* -------------------------------------------------------------------------
   Krok 2: údaje a platba */

.rozvrzeni-kroku2 {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}

.udaje {
  padding: 1.5rem var(--okraj-obalu);
  margin-inline: calc(-1 * var(--okraj-obalu));
  background: var(--plocha);
  box-shadow: var(--stin);
}
.udaje > * + * { margin-top: 2rem; }
.skupina > .napoveda:first-of-type { margin: -.4rem 0 1rem; }
.skupina > .napoveda + .napoveda { margin: -.6rem 0 1rem; }
.zaplatit-poznamka { margin-top: .6rem; }

/* Souhrn vedle formuláře leží na béžové, výřezy jízdenky jsou béžové. */
.souhrn,
.rozvrzeni-objednavky .listek { --vyrez: var(--bezova); }
.listek-cast { padding: 1.1rem 1.15rem; }
.souhrn-hlava {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem .75rem;
}
.souhrn-hlava h2 {
  margin: 0;
  font-family: var(--pismo-nadpis);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .02em;
}
.stitek {
  display: inline-block;
  padding: .25rem .65rem;
  border-radius: var(--r);
  background: var(--krem);
  color: var(--oranzova-text);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cesta-souhrn-hlava {
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .6rem;
  align-items: baseline;
  margin-bottom: .6rem;
}
.cesta-smer {
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cesta-souhrn-hlava .cesta-smer { font-size: .8125rem; }
.cesta-den { color: var(--tlumene); font-size: .9375rem; }
.cesta-souhrn .spoj-trasa { padding: 0; }

.souhrn-podnadpis {
  margin-bottom: .4rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.polozky { margin: 0; }
.polozka {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .25rem;
}
.polozka dt { min-width: 0; }
.polozka dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.polozka-celkem {
  margin-top: .5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--cara);
  font-size: 1.25rem;
  font-weight: 700;
}
.polozka-celkem dd { font-weight: 700; }
.souhrn-zmenit { margin: .8rem 0 0; }

/* -------------------------------------------------------------------------
   Stránka objednávky a chybová stránka: stav nahoře, pod ním souhrn */

.stav {
  margin-bottom: 1.75rem;
  padding: 1.75rem var(--okraj-obalu);
  margin-inline: calc(-1 * var(--okraj-obalu));
  background: var(--plocha);
  box-shadow: var(--stin);
}
.stav h1 {
  margin-bottom: .45rem;
  font-family: var(--pismo-nadpis);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 400;
  letter-spacing: .02em;
}
.stav-kod {
  margin-bottom: .35rem;
  color: var(--tlumene);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.stav-text { max-width: 40rem; font-size: 1.0625rem; }
.stav-akce {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.4rem 0 0;
}
.stav-formular { margin: 0; }
.stav-dalsi {
  margin-top: 1.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--cara);
}
.stav-dalsi p { margin-bottom: 0; color: var(--tlumene); }
.stav-pomoc {
  margin: 1.2rem 0 0;
  color: var(--tlumene);
  font-size: .875rem;
}

/* Znak stavu jako kruhové ikony výhod na webu značky: oranžový kruh,
   bílý symbol. Chyba zůstává červená, ať je na první pohled jasná. */
.stav-znak {
  position: relative;
  display: block;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.1rem;
  border-radius: 50%;
  background-color: var(--barva);
  background-image: var(--prechod);
  background-repeat: no-repeat;
  background-position: center;
}
.stav-zaplaceno .stav-znak,
.stav-k_reseni .stav-znak {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='square'/%3E%3C/svg%3E"), var(--prechod);
  background-size: 1.9rem, cover;
}
.stav-nezaplaceno .stav-znak,
.stav-vyprselo .stav-znak {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%23fff' stroke-width='2.2'/%3E%3Cpath d='M12 7.5v5l3 2' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='square'/%3E%3C/svg%3E"), var(--prechod);
  background-size: 1.9rem, cover;
}
.stav-vyprselo .stav-znak { filter: grayscale(1) brightness(.85); }
.stav-zamitnuto .stav-znak,
.stav-chyba .stav-znak {
  background-color: var(--chyba);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v8' fill='none' stroke='%23fff' stroke-width='2.8'/%3E%3Crect x='10.6' y='16.6' width='2.8' height='2.8' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 1.9rem;
}
/* Čekání na bránu: točící se kroužek (bez pohybu, když si to návštěvník nepřeje) */
.stav-ceka .stav-znak::after {
  content: "";
  position: absolute;
  inset: 1rem;
  border: 3px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: tocit 1s linear infinite;
}
@keyframes tocit { to { transform: rotate(360deg); } }

.rozvrzeni-objednavky {
  display: grid;
  gap: 1.75rem;
  align-items: start;
}
.udaje-objednavky {
  padding: 1.5rem var(--okraj-obalu);
  margin-inline: calc(-1 * var(--okraj-obalu));
  background: var(--plocha);
  box-shadow: var(--stin-maly);
}
/* Stejně jako „Vaše cesta“ vedle: Rozha One, normální velikost písmen. */
.udaje-objednavky h2 {
  margin-bottom: 1rem;
  color: var(--inkoust);
  font-family: var(--pismo-nadpis);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .02em;
  text-transform: none;
}
.udaje-seznam {
  display: grid;
  gap: 1rem;
  margin: 0;
}
.udaje-seznam dt {
  color: var(--tlumene);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.udaje-seznam dd { margin: 0; overflow-wrap: anywhere; }
.udaje-cislo {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
.udaje-jmena { margin: .35rem 0 0; padding-left: 1.15rem; }
.udaje-kontakt {
  margin: 1.25rem 0 0;
  color: var(--tlumene);
  font-size: .875rem;
}

/* -------------------------------------------------------------------------
   Podmínky: zřetelně označený vzor */

.podminky-hlava {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 2.5rem;
}
.podminky-hlava h1 {
  color: var(--oranzova-nadpis);
  font-family: var(--pismo-nadpis);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  font-weight: 400;
  letter-spacing: .02em;
}
.razitko {
  flex: none;
  margin: .2rem 0 0;
  padding: .3rem .85rem;
  border: 3px solid var(--chyba);
  color: var(--chyba);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: .14em;
  transform: rotate(-6deg);
}
.podminky {
  margin: 1.75rem 0 3.5rem;
  padding-left: 1.6rem;
}
.podminky li { padding-left: .25rem; }
.podminky li + li { margin-top: 1.6rem; }
.podminky li::marker { color: var(--oranzova-nadpis); font-weight: 700; }
.podminky h2 {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.podminky p { max-width: 68ch; }

/* -------------------------------------------------------------------------
   Patička: antracitový pás jako na webu značky */

.paticka {
  margin-top: auto;
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--antracit);
  color: rgba(252, 252, 252, .82);
  font-size: .875rem;
  line-height: 1.65;
}
.paticka-mrizka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.75rem 2.5rem;
  padding-block: 3rem 3.25rem;
}
.paticka-znacka img {
  display: block;
  width: auto;
  height: 2.4rem;
  margin-bottom: 1rem;
}
.paticka-nazev {
  color: #fff;
  font-family: var(--pismo-nadpis);
  font-size: 1.5rem;
}
.paticka h2 {
  margin-bottom: .6rem;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.paticka p { margin: 0 0 .4rem; }
.paticka a { color: #fcfcfc; text-decoration-color: rgba(252, 252, 252, .4); }
.paticka a:hover { color: var(--barva); text-decoration-color: currentColor; }
.paticka-kontakty { margin: 0; padding: 0; list-style: none; }
.paticka-kontakty a { display: inline-block; padding-block: .15rem; }
.paticka-platba { max-width: 22rem; color: rgba(252, 252, 252, .62); font-size: .8125rem; }

/* Stránka testovací brány (modul B) má vlastní styly, tady jen okraje na telefonu. */
main > .testovaci-brana { margin: 2.5rem max(1rem, calc((100% - 36rem) / 2)); }

/* -------------------------------------------------------------------------
   Telefony: kroky nákupu na jeden řádek (u ostatních kroků jen číslo, název
   zůstává pro čtečky), štítek úvodu bez čar, fotka víc ztmavená, ať je text
   nad autobusy čitelný. */

@media (max-width: 30rem) {
  .logo img { height: 2.2rem; }
  .hlavicka-volby { flex-wrap: nowrap; gap: .25rem .4rem; }
  .jazyky a { padding: 0 .55rem; letter-spacing: .06em; }
  .krok { font-size: .75rem; letter-spacing: .06em; }
  .krok:not(.krok-aktualni) .krok-nazev {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .pas-stitek::before,
  .pas-stitek::after { display: none; }
  .pas {
    background:
      linear-gradient(180deg, rgba(24, 28, 29, .72) 0%, rgba(24, 28, 29, .5) 48%, rgba(237, 232, 221, 0) 74%),
      url("/img/umbrella/autobusy.jpg") center top / max(100%, 62rem) auto no-repeat,
      var(--bezova);
  }
}

/* Úzké telefony (360 až 380 px): dlaždice pod sebe, užší hlavička */
@media (max-width: 23.75rem) {
  .typ .volby { grid-template-columns: minmax(0, 1fr); }
  .logo img { height: 2.2rem; }
  .jazyky a { padding: 0 .6rem; }
  .kroky ol { gap: .45rem; }
  .krok + .krok::before { width: 1rem; }
}

/* -------------------------------------------------------------------------
   Větší obrazovky */

@media (min-width: 640px) {
  .panel-kroku { padding-inline: 2.25rem; }
  .panel-kroku .pokladna { margin-inline: -2.25rem; padding-inline: 2.25rem; }
  .udaje,
  .udaje-objednavky,
  .stav { margin-inline: 0; padding: 2rem 2.25rem; }
  .listek-cast { padding: 1.15rem 1.4rem; }
  .perforace { margin-inline: 1.4rem; }
  .perforace::before { left: calc(-1.4rem - .6rem); }
  .perforace::after { right: calc(-1.4rem - .6rem); }
  .spoj-trasa { padding-inline: 1.4rem; }
  .spoj-den { padding-inline: 1.4rem; }
  .pokladna { margin-inline: 0; padding-inline: 1.4rem; }
}

@media (min-width: 860px) {
  .cesty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
  .cestujici { max-width: 40rem; }
  .panel-kroku { padding-inline: 3rem; padding-top: 2.5rem; }
  .panel-kroku .pokladna { margin-inline: -3rem; padding-inline: 3rem; }
}

@media (min-width: 960px) {
  .rozvrzeni-kroku2 { grid-template-columns: minmax(0, 1fr) 24rem; }
  .rozvrzeni-kroku2 .souhrn {
    position: sticky;
    top: 1.25rem;
    grid-column: 2;
    grid-row: 1;
  }
  .rozvrzeni-kroku2 .udaje { grid-column: 1; grid-row: 1; padding: 2.25rem 2.5rem; }
  .rozvrzeni-objednavky { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); }
}

/* -------------------------------------------------------------------------
   Kam jezdíme (/kam-jezdime) a odkazy na ni. Jen skládá prvky, které web už
   má: úvod s fotkou jako krok 1 (fotka je obrázek se srcset místo pozadí),
   bílý panel přes konec fotky, karty tras ve tvaru jízdenky ze souhrnu,
   nadpisy oddílů jako nadpis kroku, kroužky čísel jako ukazatel kroků.
   Oddíl leží až za telefonními media queries výše, ať pravidlo .pas pro
   telefony nevrátí pod obrázek fotku autobusů z kroku 1. */

/* Menu v liště (Koupit jízdenky, Kam jezdíme), písmem jako CS | EN. Na
   telefonu na vlastním řádku pod logem, od 860 px vedle loga. */
.hlavicka-radek { flex-wrap: wrap; }
.menu { display: flex; order: 3; flex-basis: 100%; margin: -.75rem 0 .25rem -.8rem; }
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 .8rem;
  color: #fff;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
}
.menu a:hover,
.menu a[aria-current] { color: var(--barva); }

/* Malý odkaz pod textem úvodu kroku 1, bílý a podtržený. Mezi textem
   a autobusy na fotce je málo místa, proto těsně pod textem a se stínem,
   který ho udrží čitelný i nad střechou autobusu. */
.pas-odkaz {
  margin: .45rem 0 0;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .6), 0 0 14px rgba(0, 0, 0, .45);
}
.pas-odkaz a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, .6);
}
.pas-odkaz a:hover { color: #fff; text-decoration-color: currentColor; }

/* Úvod s fotkou: nahoře stejné ztmavení jako v kroku 1, dole přechod do
   béžové pod bílý panel. Na užší obrazovce leží fotka celou šířkou dole
   (nahoře se rozplyne do antracitové), spodní okraj pásu drží autobus pod
   textem: autobus začíná v polovině výšky fotky (výška = 3/4 šířky). Od
   860 px fotka pás vyplní a text stojí nad hradem. */
.pas.pas-foto {
  overflow: hidden;
  background: var(--antracit);
  padding-block: clamp(2.75rem, 2rem + 4vw, 5.5rem) calc(max(100vw, 36rem) * .375 + 1rem);
}
.pas-foto-obrazek {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(100%, 36rem);
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 35%);
  mask-image: linear-gradient(180deg, transparent 0, #000 35%);
}
.pas-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24, 28, 29, .68) 0%, rgba(24, 28, 29, .42) 40%, rgba(24, 28, 29, 0) 66%, rgba(237, 232, 221, 0) 84%, var(--bezova) 100%);
}
.pas-foto .pas-obsah { z-index: 1; }
.pas-akce { margin: 1.6rem 0 0; }

/* Panel o outletu navazuje na fotku jako panel výběru v kroku 1, jen méně
   překrývá, ať je autobus vidět celý. */
.kam-panel { margin-top: -3rem; padding-bottom: 2rem; margin-bottom: 1rem; }
.kam-cil {
  display: grid;
  gap: 1.5rem 3rem;
  align-items: start;
}
.kam-text p { max-width: 62ch; font-size: 1.0625rem; }
.kam-radky span { display: block; }

.kam-oddil { padding-block: 2rem 1.5rem; }
.kam-uvod { max-width: 62ch; }
.kam-oddil .poznamka { max-width: 62ch; }

/* Karty tras: jízdenka na béžové, výřezy perforace béžové. */
.kam-trasy {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}
.kam-trasa { --vyrez: var(--bezova); }
.kam-trasa .souhrn-hlava h3 {
  margin: 0;
  font-family: var(--pismo-nadpis);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: .02em;
}
.kam-spoj + .kam-spoj { margin-top: 1rem; }
.kam-dny {
  margin: 0 0 .35rem;
  color: var(--tlumene);
  font-size: .8125rem;
}
.kam-bez-odjezdu { margin: 0; color: var(--tlumene); }
.kam-koupit { margin-top: .9rem; }

/* Postup nákupu: tři kroky, číslo v kroužku jako ukazatel kroků nákupu. */
.kam-postup {
  display: grid;
  gap: 1.5rem 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kam-postup li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: .9rem;
  align-items: start;
}
.kam-postup .krok-cislo {
  grid-row: span 2;
  color: var(--oranzova-text);
}
.kam-postup h3 { margin: .2rem 0 .35rem; }
.kam-postup p { margin: 0; }

/* Galerie autobusů: stejné výřezy 4 : 3, rozměry v HTML kvůli posunu stránky. */
.kam-galerie {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.kam-galerie img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r);
  background: var(--bezova-tmava);
}

.kam-vyzva {
  padding-block: 2.5rem 4rem;
  text-align: center;
}
.kam-vyzva .nadpis-kroku { margin-bottom: .75rem; }
.kam-vyzva-akce { margin: 1.5rem 0 0; }

@media (min-width: 640px) {
  .kam-galerie { gap: .75rem; }
}

@media (min-width: 860px) {
  .hlavicka-radek { flex-wrap: nowrap; }
  .menu { order: 0; flex-basis: auto; margin: 0 0 0 auto; }
  .pas.pas-foto { padding-bottom: clamp(16rem, 2rem + 24vw, 26rem); }
  .pas-foto-obrazek {
    left: 0;
    width: 100%;
    height: 100%;
    transform: none;
    object-fit: cover;
    object-position: 50% 72%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .kam-panel { margin-top: clamp(-7rem, -2rem - 4vw, -4rem); padding-bottom: 2.75rem; }
  .kam-cil { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .kam-trasy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
  .kam-postup { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kam-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kam-info .udaje-seznam { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem; }
  .kam-oddil { padding-block: 2.5rem 2rem; }
}

/* Tisk: bez odkazu v liště a bez fotky úvodu (text úvodu je pak tmavý na bílé). */
@media print {
  .menu, .pas-foto-obrazek, .pas-foto::after { display: none !important; }
  .pas.pas-foto { background: #fff; padding-bottom: 2rem; }
}

/* -------------------------------------------------------------------------
   Pohyb a tisk */

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

@media print {
  body { background: #fff; }
  .hlavicka nav, .preskocit, .paticka, .stav-akce, .stav-dalsi, .pokladna, .testovaci-provoz { display: none !important; }
  .hlavicka, .pas { background: #fff; color: var(--inkoust); }
  .pas h1, .pas-text { color: var(--inkoust); text-shadow: none; }
  .logo img { filter: invert(1); }
  .stav, .udaje, .panel-kroku { box-shadow: none; }
  .spoj, .listek { box-shadow: none; border: 1px solid var(--cara); }
}