/* Titulka. Jen proměnné z ev.css (BRAND.md, část 2). */

/* 1. úvod: Noční salon (Libor 30. 10. 2026), tmavá fotka ze stylu 6, nadpis velkou kurzívou, tři čísla s červenou linkou */
.hero { position: relative; overflow: hidden; background: var(--ev-noc); isolation: isolate; }
.hero::after { content: ""; position: absolute; left: -220px; bottom: -300px; width: 900px; height: 560px; z-index: 1; pointer-events: none; background: radial-gradient(closest-side, rgba(222, 26, 26, .32), rgba(222, 26, 26, 0)); }
.hero-foto { position: relative; height: 42vh; min-height: 260px; max-height: 380px; }
.hero-foto img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pozice-mobil, 50% 4%); }
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--ev-noc) 0%, rgba(11, 12, 14, 0) 50%); }
.hero-popisek { position: absolute; left: 12px; top: 12px; z-index: 2; background: rgba(16, 17, 20, .8); color: var(--ev-bila); font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: 999px; }
.hero-obsah { position: relative; z-index: 2; margin-top: -40px; padding-bottom: 40px; }
.hero h1 { font-size: 40px; line-height: .98; max-width: 13ch; letter-spacing: -.015em; }
@media (max-width: 999px) { .hero .uvod { font-size: 16px; } }
.hero .stitek { color: var(--ev-akcent-tmave); letter-spacing: .2em; }
.hero-podpis { margin: 16px 0 0; font-size: 15px; font-weight: 800; font-style: italic; color: var(--ev-bila); }
.hero-podpis::before { content: ""; display: inline-block; width: 22px; height: 3px; background: var(--ev-akcent); vertical-align: middle; margin-right: 10px; }
.hero .uvod { margin-top: 14px; color: #C9CBCF; }
.hero-tlacitka { margin-top: 26px; }
.hero-napoveda { margin: 12px 0 0; font-size: 13.5px; color: var(--ev-seda-tmave); }
.hero-cisla { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hero-cisla li { border-left: 3px solid var(--ev-akcent); padding-left: 10px; display: flex; flex-direction: column; gap: 4px; }
.hero-cisla b { font-size: 22px; font-weight: 900; font-style: italic; line-height: 1; letter-spacing: -.02em; color: var(--ev-bila); white-space: nowrap; }
.hero-cisla span { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ev-seda-tmave); line-height: 1.3; }
@media (min-width: 1000px) {
  .hero { min-height: min(86vh, 760px); display: flex; align-items: center; }
  .hero-foto { position: absolute; inset: 0 0 0 46%; height: auto; max-height: none; }
  .hero-foto::after { background: linear-gradient(90deg, var(--ev-noc) 0%, rgba(11, 12, 14, 0) 30%); }
  /* obrázek přes celou šířku (16 : 9): pod textem vlevo aspoň 60 % tmy (BRAND.md, čitelnost) */
  .hero-cela .hero-foto { inset: 0; }
  .hero-cela .hero-foto img { object-position: var(--hero-pozice, 66% 50%); }
  .hero-cela .hero-foto::after { background: linear-gradient(90deg, var(--ev-noc) 0%, rgba(11, 12, 14, .92) 30%, rgba(11, 12, 14, .6) 46%, rgba(11, 12, 14, 0) 62%), linear-gradient(0deg, var(--ev-noc) 0%, rgba(11, 12, 14, 0) 28%); }
  .hero-obsah { margin-top: 0; padding-top: 72px; padding-bottom: 72px; }
  .hero-text { max-width: 640px; }
  .hero h1 { font-size: 66px; max-width: 12.5ch; }
  .hero-cisla { margin-top: 40px; gap: 32px; max-width: 600px; }
  .hero-cisla li { padding-left: 14px; }
  .hero-cisla b { font-size: 40px; }
}

/* 2. poradce */
.poradce-mriz { display: grid; gap: 28px; }
.poradce-kroky { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: k; }
.poradce-kroky li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; counter-increment: k; }
.poradce-kroky li::before { content: counter(k); grid-row: span 2; width: 32px; height: 32px; border-radius: 50%; background: var(--ev-inkoust); color: var(--ev-bila); font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.poradce-kroky b { font-size: 16px; }
.poradce-kroky span { font-size: 14.5px; color: var(--ev-seda); }
.poradce-otazka { padding: 22px 18px 20px; box-shadow: var(--ev-stin); }
.poradce-otazka-hlava { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; color: var(--ev-seda); margin-bottom: 10px; }
.poradce-otazka h3 { font-size: 24px; margin: 18px 0 6px; }
.poradce-otazka .volby { margin-top: 16px; }
.poradce-otazka .volba-vpravo { color: var(--ev-seda); }
.poradce-sam { margin-top: 18px; font-size: 15px; }
@media (max-width: 999px) { .poradce-kroky { display: none; } }
@media (min-width: 1000px) {
  .poradce-mriz { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
  .poradce-otazka { padding: 28px; }
  .poradce-otazka h3 { font-size: 28px; }
}

/* 3. vím, co chci */
.vyber-cipy { margin-top: 4px; margin-bottom: 28px; }  /* jen svisle: řada čipů na mobilu dojede až k okraji obrazovky (.cipy-posuvne) */
.svety-prepinac { margin-bottom: 24px; }
.svety-prepinac label { position: relative; isolation: isolate; padding: 12px 22px; font-size: 13px; font-weight: 900; font-style: italic; letter-spacing: .1em; color: var(--ev-seda); cursor: pointer; }
.svety-prepinac label::before { content: ""; position: absolute; inset: 0 1px; z-index: -1; --roh: var(--ev-roh-maly); background-color: var(--ev-papir); }
@media (max-width: 699px) {  /* přepínač značek přes celou šířku, nic nepřesahuje */
  .svety-prepinac { display: flex; }
  .svety-prepinac label { flex: 1 1 auto; padding: 12px 10px; text-align: center; }
}
.svet { display: none; gap: 20px; }
#svet-1:checked ~ .svet-1, #svet-2:checked ~ .svet-2, #svet-3:checked ~ .svet-3 { display: grid; }
#svet-1:checked ~ .svety-prepinac label[for="svet-1"], #svet-2:checked ~ .svety-prepinac label[for="svet-2"], #svet-3:checked ~ .svety-prepinac label[for="svet-3"] { color: var(--ev-bila); }
#svet-1:checked ~ .svety-prepinac label[for="svet-1"]::before, #svet-2:checked ~ .svety-prepinac label[for="svet-2"]::before, #svet-3:checked ~ .svety-prepinac label[for="svet-3"]::before { background: var(--ev-inkoust); }
#svet-1:focus-visible ~ .svety-prepinac label[for="svet-1"], #svet-2:focus-visible ~ .svety-prepinac label[for="svet-2"], #svet-3:focus-visible ~ .svety-prepinac label[for="svet-3"] { outline: 3px solid var(--ev-inkoust); outline-offset: 2px; }
.svet-text h3 { font-size: 34px; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 8px; }
.svet-text .tl-odkaz { margin-top: 8px; }
.jen-mobil-tl { margin-top: 24px; }
@media (max-width: 699px) { .svet-modely { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }  /* karty koloběžek 3 : 4 po dvou */
@media (min-width: 1000px) {
  .svet { grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 40px; }
  .jen-mobil-tl { display: none; }
}
@media (max-width: 999px) { .jen-pocitac-tl { display: none; } }

/* 4. Eva */
.eva-mriz { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); }  /* bez minmax(0) ukázky WhatsAppu roztáhly stránku na 360 px */
/* Tři ukázky rozhovoru vzhledem jako WhatsApp (Libor 23. 10. 2026): barvy světlého WhatsAppu jen v této ukázce
   (čas zprávy #54656F místo #667781, aby měl kontrast aspoň 4,5 : 1),
   písmo zůstává Montserrat. Mobil a tablet: posun prstem do strany (scroll-snap, nic se samo nehýbe), počítač: tři vedle sebe. */
.wa-ukazky { --wa-hlava: #008069; --wa-pozadi: #EFEAE2; --wa-ja: #D9FDD3; --wa-text: #111B21; --wa-cas: #54656F; --wa-precteno: #53BDEB;
  display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; margin: 0 calc(-1 * var(--ev-okraj)); padding: 0 var(--ev-okraj) 4px; scroll-padding: 0 var(--ev-okraj); }
.wa-ukazky::-webkit-scrollbar { display: none; }
.wa-chat { margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wa-tema { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ev-seda-tmave); }
.wa-okno { flex: 1; display: flex; flex-direction: column; border-radius: var(--ev-radius-karta); overflow: hidden; background: var(--wa-pozadi); }
.wa-hlava { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--wa-hlava); color: #fff; }
.wa-hlava img { border-radius: 50%; flex: none; }
.wa-hlava b { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; }
.wa-hlava small { display: block; font-size: 12.5px; font-weight: 500; }  /* bez průhlednosti: bílá na #008069 má 4,9 : 1 (BRAND bod 3) */
.wa-zpravy { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 16px 14px 18px; }
.wa-bublina { position: relative; margin: 0; max-width: 85%; padding: 7px 10px 8px; border-radius: 10px; background: #fff; color: var(--wa-text);
  font-size: 14.5px; font-weight: 500; line-height: 1.45; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); overflow-wrap: anywhere; }
.wa-eva { align-self: flex-start; border-top-left-radius: 0; }
.wa-ja { align-self: flex-end; background: var(--wa-ja); border-top-right-radius: 0; }
.wa-bublina::before { content: ""; position: absolute; top: 0; width: 0; height: 0; border-style: solid; }  /* ocásek bubliny */
.wa-eva::before { left: -8px; border-width: 0 8px 9px 0; border-color: transparent #fff transparent transparent; }
.wa-ja::before { right: -8px; border-width: 0 0 9px 8px; border-color: transparent transparent transparent var(--wa-ja); }
.wa-cas { float: right; display: inline-flex; align-items: center; gap: 2px; margin: 8px 0 -5px 12px; font-size: 11px; font-weight: 500; line-height: 1; color: var(--wa-cas); }
.wa-precteno { display: inline-flex; color: var(--wa-precteno); }
.wa-precteno .ik { width: 15px; height: 15px; stroke-width: 2.25; }
.wa-precteno .ik + .ik { margin-left: -10px; }
.wa-posun { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: var(--ev-maly); font-weight: 600; color: var(--ev-seda-tmave); }
.wa-posun .ik { width: 18px; height: 18px; }
@media (min-width: 700px) { .wa-ukazky { grid-auto-columns: 48%; gap: 16px; } }
@media (min-width: 1000px) {
  .eva-mriz { gap: 40px; }
  .wa-ukazky { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow: visible; margin: 0; padding: 0; }
  .wa-posun { display: none; }
}

/* 5. Libor */
.libor-mriz { display: grid; gap: 28px; }
.libor-foto { border-radius: var(--ev-radius-karta); overflow: hidden; aspect-ratio: 4 / 5; background: var(--ev-papir); }
.libor-foto img { width: 100%; height: 100%; object-fit: cover; }
.libor-text { font-size: 17px; line-height: 1.65; color: #2C3036; max-width: 56ch; }
.libor-podpis { font-weight: 800; margin: 18px 0 22px; }
.libor-podpis small { display: block; font-weight: 500; color: var(--ev-seda); font-size: 14px; }
.video-karta { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; text-decoration: none; margin-bottom: 22px; }
.video-karta b { display: block; font-size: 15px; line-height: 1.35; }
.video-karta .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); }
.video-nahled img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-nahled .ik { position: relative; color: var(--ev-bila); }
.libor-tlacitka { align-items: center; gap: 20px; }
@media (min-width: 1000px) { .libor-mriz { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 64px; align-items: center; } }

/* 6. důvody */
.duvod { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.duvod p { margin: 0; }
/* jak připravujeme koloběžku: video (spustí se až kliknutím) a tři fotky z dílny */
.priprava { display: grid; gap: 20px; margin-bottom: 28px; }
.priprava-text h3 { margin-bottom: 8px; }
.priprava-text p { margin: 0; max-width: 52ch; }
.priprava-fotky { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.priprava-fotky img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: var(--ev-cara); }
@media (min-width: 1000px) {
  .priprava { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: center; margin-bottom: 40px; }
  .priprava-fotky { gap: 12px; margin-top: 24px; }
}

/* 7. recenze */
.recenze { margin: 0; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.recenze-hvezdy { display: flex; gap: 2px; color: #E8A400; }
.recenze-hvezdy .ik { width: 18px; height: 18px; }
.recenze blockquote { margin: 0; font-size: 16px; line-height: 1.6; flex: 1; }
.recenze figcaption { font-size: 13.5px; color: var(--ev-seda); }
.recenze figcaption b { color: var(--ev-inkoust); }
.recenze figcaption small { display: block; margin-top: 2px; font-size: 12.5px; }
.recenze-s-fotkou { display: flex; gap: 12px; align-items: center; }
.recenze-foto { flex: none; width: 60px; height: 80px; object-fit: cover; border-radius: 10px; background: var(--ev-cara); }

/* 8. showroom */
.showroom { display: grid; grid-template-columns: minmax(0, 1fr); border: 0; }  /* bez minmax se sloupec roztáhl podle tlačítek a ořízl je (360 a 390 px) */
.showroom-foto { width: 100%; height: 240px; object-fit: cover; }
.showroom-text { padding: 28px 22px 30px; }
.showroom-info { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 12px; color: var(--ev-seda-tmave); }
.showroom-info li { display: flex; gap: 12px; align-items: center; }
.showroom-info .ik { color: var(--ev-akcent-tmave); }
.showroom-info a { color: var(--ev-bila); text-decoration: none; }
@media (min-width: 1000px) { .showroom { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .showroom-foto { height: 100%; min-height: 440px; } .showroom-text { padding: 56px 52px; align-self: center; } }

/* 9. rozcestník */
.rozcestnik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rozc { display: flex; flex-direction: column; gap: 10px; padding: 18px; text-decoration: none; transition: border-color var(--ev-prechod); }
.rozc .ik { color: var(--ev-akcent); }
.rozc b { display: block; font-size: 15.5px; }
.rozc small { display: block; font-size: 13px; color: var(--ev-seda); line-height: 1.4; margin-top: 2px; }
@media (min-width: 1000px) { .rozcestnik { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .rozc { flex-direction: row; align-items: flex-start; padding: 22px; } }

/* 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) {
  .rozc:hover { border-color: var(--ev-inkoust); }
}

/* 1b. Web na míru: tři cesty */
.cesty-mriz { list-style: none; margin: 0; padding: 0; }
.cesta { padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.cesta h3, .cesta p { margin: 0; }
.cesta .tl { margin-top: auto; }
.cesta-ai { display: flex; gap: 8px; align-items: flex-start; font-size: var(--ev-maly); font-weight: 600; }
.cesta-ai .ik { flex: none; width: 18px; height: 18px; margin-top: 2px; }
.poradce-bez-ai { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; font-weight: 600; line-height: 1.5; max-width: 560px; }
.poradce-bez-ai .ik { flex: none; margin-top: 3px; }

/* 2b. Moje koloběžka: hledání dílů na vlastní koloběžku */
.moje-blok-mriz { display: grid; gap: 24px; }
.moje-blok-body { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.moje-blok-body li { display: flex; gap: 10px; align-items: center; font-weight: 600; }
.moje-blok-karta { padding: 20px; color: var(--ev-inkoust); }
.moje-blok-oblibene { margin: 20px 0 10px; font-size: var(--ev-maly); font-weight: 700; }
@media (min-width: 1000px) {
  .moje-blok-mriz { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 48px; }
  .moje-blok-karta { padding: 32px; }
  /* na počítači se oblíbené modely zalomí, posuvná řada myší nejde a poslední čip byl useknutý o hranu karty */
  .moje-blok-karta .cipy-posuvne { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}

/* Oživení na počítači (Libor 1. 11. 2026, BRAND.md bod 12): úvod se poprvé za návštěvu „rozsvítí“ jako přístroje
   po zapnutí. Fotka z šera (bez zvětšení), nadpis se odkryje zleva, zbytek se objeví postupně, číslo modelů
   doběhne od nuly (ev.js). Jednou, při načtení, ne při posouvání. Celé do 1,8 s. data-uvod dává skript v titulka.html. */
@keyframes uvod-rozsvitit { from { filter: brightness(.22) saturate(.5); } }
@keyframes uvod-zare { from { opacity: 0; } }
@keyframes uvod-objevit { from { opacity: 0; } }
@keyframes uvod-odkryt { from { clip-path: inset(-20% 100% -20% -6%); } to { clip-path: inset(-20% -12% -20% -6%); } }
@media (min-width: 1000px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html[data-animace][data-uvod="poprve"] .hero-foto img { animation: uvod-rozsvitit 1500ms cubic-bezier(.3, .6, .3, 1) both; }
  html[data-animace][data-uvod="poprve"] .hero::after { animation: uvod-zare 1700ms ease-out 250ms both; }
  html[data-animace][data-uvod="poprve"] .hero h1 { animation: uvod-odkryt 760ms cubic-bezier(.2, .8, .2, 1) 140ms both; }
  html[data-animace][data-uvod="poprve"] .hero .stitek,
  html[data-animace][data-uvod="poprve"] .hero-podpis,
  html[data-animace][data-uvod="poprve"] .hero .uvod,
  html[data-animace][data-uvod="poprve"] .hero-tlacitka,
  html[data-animace][data-uvod="poprve"] .hero-napoveda,
  html[data-animace][data-uvod="poprve"] .hero-cisla li { animation: uvod-objevit 560ms ease-out both; }
  html[data-animace][data-uvod="poprve"] .hero-podpis { animation-delay: 560ms; }
  html[data-animace][data-uvod="poprve"] .hero .uvod { animation-delay: 660ms; }
  html[data-animace][data-uvod="poprve"] .hero-tlacitka { animation-delay: 760ms; }
  html[data-animace][data-uvod="poprve"] .hero-napoveda { animation-delay: 840ms; }
  html[data-animace][data-uvod="poprve"] .hero-cisla li:nth-child(1) { animation-delay: 860ms; }
  html[data-animace][data-uvod="poprve"] .hero-cisla li:nth-child(2) { animation-delay: 960ms; }
  html[data-animace][data-uvod="poprve"] .hero-cisla li:nth-child(3) { animation-delay: 1060ms; }
}