/* Obsahové stránky: showroom, testovací jízda, příběh, Libor, zákonné stránky a formuláře, splátky, výkup, průvodce.
   Jen proměnné z ev.css (BRAND.md, část 2). */

/* úvod stránky */
.strana-uvod { padding: 32px 0 var(--ev-sekce); }
.strana-uvod-mriz { display: grid; gap: 28px; }
.strana-uvod h1 { max-width: 20ch; }
@media (min-width: 1000px) { .strana-uvod-mriz h1 { font-size: 48px; } }  /* nadpis velkými písmeny ve sloupci vedle fotky: ELEKTROKOLOBĚŽEK se nesmí rozdělit */
.strana-uvod-uzky { padding-bottom: 8px; }
.strana-uvod-uzky h1 { max-width: 22ch; }
.strana-tlacitka { margin-top: 24px; }
.strana-poznamka { margin: 14px 0 0; font-size: var(--ev-maly); color: var(--ev-seda); }
.strana-foto { border-radius: var(--ev-radius-karta); overflow: hidden; background: var(--ev-papir); }
.strana-foto img { width: 100%; height: 100%; object-fit: cover; }
.strana-uvod-mriz .strana-foto { aspect-ratio: 4 / 3; order: -1; }
@media (min-width: 1000px) {
  .strana-uvod { padding: 64px 0 var(--ev-sekce); }
  .strana-uvod-uzky { padding-bottom: 24px; }
  .strana-uvod-mriz { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: center; }
  .strana-uvod-mriz .strana-foto { order: 0; aspect-ratio: 4 / 3; }
}
.vybrany-model { max-width: 360px; margin-top: 28px; }

/* dvojice: text a fotka */
.dvojice { display: grid; gap: 28px; }
.dvojice .strana-foto { aspect-ratio: 4 / 3; }
@media (min-width: 1000px) { .dvojice { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; } }
.text-dlouhy { font-size: var(--ev-uvod); line-height: 1.65; max-width: 62ch; }
.uzky-text { max-width: 760px; }
.strana-uzky-sloupec { max-width: 820px; }

/* citát */
.citat { margin: 28px 0 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--ev-akcent); }
.citat p { margin: 0; font-size: var(--ev-uvod); font-weight: 600; line-height: 1.5; }
.citat cite { display: block; margin-top: 10px; font-style: normal; font-size: var(--ev-maly); font-weight: 700; color: var(--ev-seda); }

/* karty s informací (showroom) */
.info-karta { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.info-karta p { margin: 0; }
.info-hodnota { font-size: 18px; font-weight: 700; line-height: 1.4; }
.info-odkazy { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; }
.info-seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.info-seznam li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.info-seznam .ik { color: var(--ev-akcent); }
.info-seznam a { text-decoration: none; }
.hodiny { margin: 0; }
.hodiny th { width: 55%; }
.hodiny td { font-weight: 700; text-align: right; }
.hodiny tr:last-child th, .hodiny tr:last-child td { border-bottom: 0; }

/* důvody (stejné jako na titulce) */
.duvod { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.duvod p { margin: 0; }
.duvod a { text-decoration: underline; text-underline-offset: 3px; }
.strana-rychlost { margin-top: 20px; }
.strana-rychlost p { margin: 0; }

/* tři skutečné fotky (showroom: Co u nás zažijete, příběh: Dnes). Mobil: první přes celou šířku, dvě pod ní vedle sebe,
   počítač: tři vedle sebe. Nic se nehýbe, fotky se při najetí nepřibližují (BRAND.md bod 12). */
.foto-trojice { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 28px; }
.foto-trojice > :first-child { grid-column: 1 / -1; }
.foto-trojice figure { margin: 0; }
.foto-trojice img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--ev-radius-foto); background: var(--ev-cara); }
.foto-trojice-ctverce { row-gap: 16px; }
.foto-trojice-ctverce img { aspect-ratio: 1; }
.foto-trojice figcaption { margin-top: 8px; font-size: var(--ev-maly); font-weight: 700; line-height: 1.35; }
@media (min-width: 1000px) {
  .foto-trojice { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 40px; }
  .foto-trojice > :first-child { grid-column: auto; }
  .foto-trojice figcaption { margin-top: 12px; font-size: 15px; }
}

/* výzva na tmavém pozadí */
.strana-vyzva .sekce-hlava { margin-bottom: 24px; }
.strana-odkaz { margin: 24px 0 0; }
.na-tmave .strana-odkaz .tl-odkaz { color: var(--ev-bila); }

/* časté otázky bez skriptu */
.otazky { display: grid; gap: 10px; }
.otazky details { border: 1px solid var(--ev-cara); border-radius: 16px; background: var(--ev-bila); }
.otazky summary { min-height: 56px; padding: 14px 52px 14px 18px; display: flex; align-items: center; font-weight: 700; line-height: 1.35; cursor: pointer; list-style: none; position: relative; }
.otazky summary::-webkit-details-marker { display: none; }
.otazky summary::after { content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 24px; font-weight: 400; color: var(--ev-seda); line-height: 1; }
.otazky details[open] summary::after { content: "−"; }
.otazky details p { margin: 0; padding: 0 18px 18px; color: var(--ev-seda); line-height: 1.6; max-width: 62ch; }

/* Libor */
.libor-uvod .libor-portret { aspect-ratio: 1 / 1; max-width: 480px; }
@media (min-width: 700px) { .libor-uvod .libor-portret { aspect-ratio: 4 / 5; } }
.libor-uvod .libor-portret img { object-position: 50% 30%; }
@media (min-width: 1000px) {
  .libor-uvod { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
  .libor-uvod .libor-portret { order: 0; justify-self: end; width: 100%; }
}
.libor-podpis { font-weight: 800; margin: 22px 0 24px; }
.libor-podpis small { display: block; font-weight: 500; color: var(--ev-seda); font-size: var(--ev-maly); }

/* videa */
.video-mriz { margin-top: 24px; }
.video-dlazdice { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; text-decoration: none; transition: border-color var(--ev-prechod); }
.video-popis b { display: block; font-size: 15px; line-height: 1.35; }
.video-popis .stitek { margin-bottom: 4px; }
.video-nahled { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 16 / 9; display: grid; place-items: center; background: var(--ev-inkoust); color: var(--ev-bila); }
.video-nahled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-nahled .ik { position: relative; color: var(--ev-bila); }
@media (min-width: 1000px) { .video-dlazdice { grid-template-columns: 200px minmax(0, 1fr); padding: 12px; } }

/* testovací jízda s vybraným modelem: karta vpravo vedle nadpisu */
@media (min-width: 1000px) {
  .strana-uvod-uzky > .obsah:has(.vybrany-model) { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; align-items: center; }
  .vybrany-model { margin-top: 0; }
}

/* ── zákonné stránky a formuláře (text doslova z dat, šablona dává jen rámec) ── */
.pravni-nadpis { max-width: 26ch; }
@media (min-width: 1000px) { .pravni-nadpis { font-size: 48px; } }
.pravni-sekce { padding-top: 16px; }
.pravni-mriz { display: grid; gap: 40px; }
@media (min-width: 1000px) { .pravni-mriz { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; align-items: start; } }
.pravni-text { max-width: 760px; min-width: 0; line-height: 1.65; }
.pravni-text h2 { font-size: 21px; line-height: 1.15; margin: 36px 0 12px; }
.pravni-text h3 { margin: 22px 0 8px; }
.pravni-text > :first-child, .pravni-text > :first-child > :first-child { margin-top: 0; }
.pravni-text ul, .pravni-text ol { padding-left: 22px; margin: 0 0 16px; }
.pravni-text li { margin-bottom: 6px; }
.pravni-text a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.pravni-text table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 12px 0 24px; }
.pravni-text th, .pravni-text td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--ev-cara); vertical-align: top; }
.pravni-text th { color: var(--ev-seda); font-weight: 700; }
.pravni-uvod { padding: 18px 20px; border-radius: var(--ev-radius-foto); background: var(--ev-papir); margin-bottom: 24px; }
.pravni-uvod p:last-child { margin-bottom: 0; }
.pravni-misto { border: 1px solid var(--ev-cara); border-radius: var(--ev-radius-karta); padding: 18px 20px; margin: 16px 0; }
.pravni-misto p:last-child { margin-bottom: 0; }
.pravni-stitek { font-size: var(--ev-stitek); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ev-akcent-hover); margin-bottom: 6px; }
.pravni-box { border-left: 3px solid var(--ev-akcent); padding: 4px 0 4px 18px; margin: 24px 0; }
.pravni-poznamka { font-size: var(--ev-maly); color: var(--ev-seda); }
.pravni-boky { display: grid; gap: 16px; align-content: start; }
.pravni-panel { padding: 20px 22px; }
.pravni-panel-nadpis { font-size: 16px; letter-spacing: .02em; margin-bottom: 8px; }
.pravni-dokumenty { list-style: none; margin: 0; padding: 0; }
.pravni-dokumenty a { display: flex; align-items: center; min-height: 48px; padding: 0; border-bottom: 1px solid var(--ev-cara); font-weight: 600; text-decoration: none; }
.pravni-dokumenty li:last-child a { border-bottom: 0; }
.pravni-dokumenty a[aria-current] { color: var(--ev-akcent-hover); font-weight: 800; }

/* formulář odstoupení a reklamace */
.pravni-formular { margin: 8px 0 40px; }
.pravni-formular h2 { font-size: 20px; margin: 32px 0 14px; }
.pravni-pole-mriz { display: grid; gap: 0 16px; }
@media (min-width: 700px) { .pravni-pole-mriz { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pravni-pole-cele { grid-column: 1 / -1; } }
.pravni-pole { margin-bottom: 16px; min-width: 0; }
.pravni-pole .pole { margin-bottom: 0; }
.pravni-popisek { display: block; font-size: 14px; line-height: 1.4; }
.pravni-povinne { color: var(--ev-akcent-hover); }
.pravni-napoveda { font-weight: 500; color: var(--ev-seda); }
.pole [aria-invalid="true"] { border-color: var(--ev-akcent-hover); }
.pravni-prohlaseni { margin: 24px 0 4px; }
.pravni-odeslat { margin-top: 20px; }
@media (min-width: 700px) { .pravni-odeslat { width: auto; } }
.pravni-souhrn-chyby { margin: 0 0 16px; }
.pravni-prijato { padding: 24px; border-radius: var(--ev-radius-karta); background: var(--ev-zelena-svetla); margin-bottom: 32px; }
.pravni-prijato .ik-dlazdice { background: var(--ev-bila); color: var(--ev-zelena); margin-bottom: 14px; }
.pravni-prijato h2 { font-size: 24px; margin: 0 0 12px; }
.pravni-prijato h3 { margin: 20px 0 6px; }
.pravni-opis { margin: 0 0 16px; }
.pravni-opis div { display: grid; gap: 2px 16px; padding: 10px 0; border-bottom: 1px solid var(--ev-cara); }
@media (min-width: 700px) { .pravni-opis div { grid-template-columns: 220px minmax(0, 1fr); } }
.pravni-opis dt { font-size: var(--ev-maly); color: var(--ev-seda); font-weight: 600; }
.pravni-opis dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; white-space: pre-line; }

/* splátky a výkup */
.splatky-volba { cursor: default; }
.splatky-volba .volba-popis small { display: block; margin-top: 6px; font-size: 12.5px; }
.vykup-karta { padding: 6px 20px 20px; }
.vykup-tabulka th { width: auto; }
.vykup-tabulka .vykup-castka, .vykup-tabulka th:last-child { text-align: right; padding-right: 0; }
.vykup-castka { white-space: nowrap; font-size: 19px; font-weight: 900; font-style: italic; }
.vykup-souhrn { margin: 14px 0 0; padding-top: 14px; border-top: 2px solid var(--ev-inkoust); font-size: 18px; font-weight: 800; }
.vykup-upozorneni ul { margin: 6px 0 0; padding-left: 20px; }
.vykup-upozorneni li { margin-bottom: 4px; }
.na-tmave .strana-poznamka { color: var(--ev-seda-tmave); }

/* průvodce bezpečnou jízdou (EV NEWS) */
.pruvodce-hlava { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; margin-bottom: 16px; }
.pruvodce-logo { display: inline-flex; }
.pruvodce-logo img { width: 150px; height: auto; }
.pruvodce-pod { margin: 0; font-size: var(--ev-maly); font-weight: 800; color: var(--ev-akcent-hover); }
.pruvodce-body { margin: 2px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; line-height: 1.5; }
.pruvodce-poznamka { margin: 28px 0 0; }
.pruvodce-poznamka a { text-decoration: underline; text-underline-offset: 3px; }
.pruvodce-pravidla { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 700px) { .pruvodce-pravidla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
.pruvodce-pravidla li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 20px; align-items: start; }
.pruvodce-pravidla h3 { margin-bottom: 6px; }
.pruvodce-pravidla p { margin: 0; }
.pruvodce-cislo { font-size: 40px; font-weight: 900; font-style: italic; line-height: 1; color: var(--ev-akcent); }
.pruvodce-citat { margin-top: 40px; max-width: 760px; }
.pruvodce-kontrola { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pruvodce-kontrola li { display: flex; gap: 12px; align-items: center; font-size: 17px; font-weight: 600; }
.pruvodce-kontrola .ik { color: var(--ev-zelena); }
.pruvodce-paticka { margin-top: 28px; max-width: 70ch; }

/* ── rezervace testovací jízdy (stranky/testovaci_jizda.html, static/js/testjizda.js, dokumenty/testjizda-2026-11) ──
   Formulář jako pokladna: pole 52 px, chyba u pole, souhrn vpravo (na mobilu pod formulářem). Dny a časy jsou čipy
   se seříznutými rohy (ev.css .cip) s přepínačem uvnitř. Nic se nehýbe, na počítači se při najetí mění jen rámeček čipu.
   PAST: fieldset a prvek mřížky mají jinak minimální šířku podle obsahu, bez min-width: 0 by stránka na mobilu
   přetekla do strany (stejná chyba jako 11. 9. 2026 na Shopify). */
.tj [hidden] { display: none !important; }  /* třídy s display by jinak atribut hidden přebily */
.tj .tj-hlava { margin-bottom: 20px; }  /* pod nadpisem hned úvod formuláře, nebo záloha */
.tj-zaloha { padding: 22px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; max-width: 760px; }
.tj-zaloha-text { min-width: 0; }
.tj-zaloha-text p { margin: 0 0 16px; }
.tj-zaloha-veta { font-size: var(--ev-uvod); font-weight: 600; line-height: 1.45; }
.tj-zaloha-chyba { font-weight: 700; color: var(--ev-akcent-hover); }
.tj-zaloha .tlacitka { gap: 12px 24px; }
.tj-zaloha-text .tj-zaloha-odkaz { margin: 8px 0 0; }
@media (min-width: 700px) {
  .tj-zaloha { grid-template-columns: auto minmax(0, 1fr); gap: 20px; padding: 28px; }
  .tj-zaloha .tlacitka { align-items: center; }
}

.tj-mriz { display: grid; gap: 28px; }
.tj-kroky { min-width: 0; }
.tj-uvod { margin: 0 0 28px; }
/* krok bez rámečku: rámeček fieldsetu by vedl přes nadpis kroku (legend sedí na jeho horní hraně) */
.tj-krok { min-width: 0; margin: 0 0 20px; padding: 0; border: 0; }
.tj-krok-nadpis { padding: 0; margin-bottom: 16px; font-size: var(--ev-h3); font-weight: 800; font-style: italic; line-height: 1.25; }
.tj-krok-cislo { display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 12px; border-radius: 50%; vertical-align: middle; background: var(--ev-inkoust); color: var(--ev-bila); font-size: 14px; font-style: normal; font-weight: 800; position: relative; top: -2px; }
.tj-volba { min-width: 0; margin: 0 0 18px; padding: 0; border: 0; }
.tj-volba-nadpis { padding: 0; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.tj-nacitam, .tj-nejdriv { margin: 0; }
.tj-dny { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.tj-casy { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.tj .cip input { position: absolute; opacity: 0; pointer-events: none; }
.tj .cip:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--ev-akcent) 55%, transparent); outline-offset: 2px; }
.tj-den, .tj-cas { min-width: 0; justify-content: center; padding: 0 6px; font-variant-numeric: tabular-nums; }
.tj-den { flex-direction: column; gap: 3px; min-height: 64px; padding: 8px 4px; line-height: 1.1; text-align: center; }
.tj-den-tyden { font-size: 12px; font-weight: 700; font-style: normal; letter-spacing: .06em; text-transform: uppercase; color: var(--ev-seda); }
.tj-den.je-vybrany .tj-den-tyden { color: var(--ev-seda-tmave); }
.tj-den-datum { font-size: 16px; font-weight: 900; white-space: nowrap; }
.tj-bez-zalomeni { white-space: nowrap; }  /* rozsah času 16:30–17:00 se nerozdělí na dva řádky */
.tj-dalsi { margin-top: 6px; padding: 0; border: 0; background: none; font-family: inherit; cursor: pointer; }
.tj-radek { display: grid; gap: 0 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .tj-radek { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.tj .pole-napoveda { display: block; margin-top: 6px; font-size: 13px; font-weight: 500; color: var(--ev-seda); }
.tj .pole-chyba { margin: 0 0 14px; }
.tj .pole.ma-chybu input, .tj .pole.ma-chybu select, .tj .pole.ma-chybu textarea { border-color: var(--ev-akcent-hover); }
.tj .pole select { -webkit-appearance: none; appearance: none; padding-right: 44px; background: var(--ev-bila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23101114' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; }
.tj-model-neni { margin: 0 0 14px; }
.tj-model-neni .ik { color: var(--ev-inkoust); }

/* souhrn a odeslání */
.tj-souhrn { display: grid; gap: 14px; padding: 20px; min-width: 0; }
.tj-souhrn h3 { font-size: 19px; }
.tj-udaje { display: grid; margin: 0; }
.tj-udaje div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--ev-cara); font-size: 15px; }
.tj-udaje div:last-child { border-bottom: 0; }
.tj-udaje dt { flex: none; font-weight: 600; color: var(--ev-seda); }
.tj-udaje dd { min-width: 0; margin: 0; font-weight: 700; text-align: right; overflow-wrap: anywhere; }
.tj-zdarma { color: var(--ev-zelena); }
.tj-hlaska { background: var(--ev-akcent-svetly); }
.tj-hlaska .ik { color: var(--ev-akcent-hover); }
.tj-pozn { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ev-seda); }
.tj-pozn a { font-weight: 700; color: var(--ev-inkoust); }
.tj-stav:empty { display: none; }

/* hotovo: místo formuláře potvrzení s kódem a co dál (jen to, co opravdu udělá dashboard) */
.tj-hotovo { display: grid; gap: 14px; justify-items: start; max-width: 720px; padding: 24px; }
.tj-hotovo > * { margin: 0; }
.tj-hotovo .tj-udaje, .tj-hotovo .tj-hotovo-email, .tj-hotovo .tj-hotovo-kroky, .tj-hotovo .tlacitka { justify-self: stretch; }
.tj-hotovo-ikona { background: var(--ev-zelena-svetla); color: var(--ev-zelena); }
.tj-hotovo-kdy { font-size: 19px; font-weight: 900; font-style: italic; line-height: 1.3; }
.tj-kod { font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.tj-hotovo-email { background: var(--ev-zelena-svetla); }
.tj-hotovo-email .ik { color: var(--ev-zelena); }
.tj-hotovo-dal { margin-top: 6px; font-size: 17px; }
.tj-hotovo-kroky { display: grid; gap: 12px; padding: 0; list-style: none; counter-reset: krok; }
.tj-hotovo-kroky li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; font-size: 15px; line-height: 1.5; counter-increment: krok; }
.tj-hotovo-kroky li::before { content: counter(krok); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ev-inkoust); color: var(--ev-bila); font-size: 13px; font-weight: 800; }
@media (min-width: 1000px) {
  .tj-zaloha { padding: 32px; }
  .tj-mriz { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
  .tj-dny { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .tj-souhrn { position: sticky; top: calc(var(--ev-lista) + 24px); padding: 24px; }
  .tj-hotovo { padding: 32px; }
  .tj-hotovo-kdy { font-size: 23px; }
}

/* Efekty najetí myší jen na počítači s myší. Na dotykovém displeji se při posouvání nesmí nic rozsvěcet ani hýbat (BRAND.md bod 12). */
@media (hover: hover) and (pointer: fine) {
  .info-seznam a:hover { text-decoration: underline; }
  .video-dlazdice:hover { border-color: var(--ev-inkoust); }
  .pravni-dokumenty a:hover { color: var(--ev-akcent-hover); }
}