/* Fragmento — šablona webu
   Jeden soubor schválně: pořadí pravidel nese kaskádu a rozdělením
   by se rozbila. Sekce jsou oddělené komentáři.
   Tokeny (barvy, typografie, rádiusy) jsou nahoře v :root. */
@font-face{font-family:"DM Sans";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/dm-sans-400.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/dm-sans-500.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/dm-sans-600.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/dm-sans-700.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/cormorant-400.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/cormorant-500.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/cormorant-400-italic.woff2) format("woff2")}
/* Fotky v proměnných mají absolutní cestu od kořene domény — viz
   `_build/s80_obrazky_absolutne.py`. `url()` ve vlastní proměnné se
   řeší proti **dokumentu**, ne proti stylopisu, takže relativní cesta
   platí jen pro stránky v jedné hloubce. Šablona se proto musí
   obsluhovat z kořene serveru. */
:root{
  --img-avatar-david: url(/assets/img/avatar-david.webp);
  --img-detail-hero: url(/assets/img/detail-hero.webp);
  --img-emo-bazen: url(/assets/img/emo-bazen.webp);
  --img-emo-snidane: url(/assets/img/emo-snidane.webp);
  --img-emo-vana: url(/assets/img/emo-vana.webp);
  --img-ev-card: url(/assets/img/ev-card.webp);
  --img-ev-cardlist: url(/assets/img/ev-cardlist.webp);
  --img-ev-hero: url(/assets/img/ev-hero.webp);
  --img-ev-roi: url(/assets/img/ev-roi.webp);
  --img-g-bali-1: url(/assets/img/g-bali-1.webp);
  --img-g-bali-2: url(/assets/img/g-bali-2.webp);
  --img-g-bali-3: url(/assets/img/g-bali-3.webp);
  --img-g-bali-4: url(/assets/img/g-bali-4.webp);
  --img-g-balibanga-1: url(/assets/img/g-balibanga-1.webp);
  --img-g-balibanga-2: url(/assets/img/g-balibanga-2.webp);
  --img-g-balibanga-3: url(/assets/img/g-balibanga-3.webp);
  --img-g-balibanga-4: url(/assets/img/g-balibanga-4.webp);
  --img-g-cesko-1: url(/assets/img/g-cesko-1.webp);
  --img-g-cesko-2: url(/assets/img/g-cesko-2.webp);
  --img-g-cesko-3: url(/assets/img/g-cesko-3.webp);
  --img-g-cesko-4: url(/assets/img/g-cesko-4.webp);
  --img-g-chorvatsko-1: url(/assets/img/g-chorvatsko-1.webp);
  --img-g-chorvatsko-2: url(/assets/img/g-chorvatsko-2.webp);
  --img-g-chorvatsko-3: url(/assets/img/g-chorvatsko-3.webp);
  --img-g-chorvatsko-4: url(/assets/img/g-chorvatsko-4.webp);
  --img-g-filipiny-1: url(/assets/img/g-filipiny-1.webp);
  --img-g-filipiny-2: url(/assets/img/g-filipiny-2.webp);
  --img-g-filipiny-3: url(/assets/img/g-filipiny-3.webp);
  --img-g-filipiny-4: url(/assets/img/g-filipiny-4.webp);
  --img-g-italie-1: url(/assets/img/g-italie-1.webp);
  --img-g-italie-2: url(/assets/img/g-italie-2.webp);
  --img-g-italie-3: url(/assets/img/g-italie-3.webp);
  --img-g-italie-4: url(/assets/img/g-italie-4.webp);
  --img-g-kostarika-1: url(/assets/img/g-kostarika-1.webp);
  --img-g-kostarika-2: url(/assets/img/g-kostarika-2.webp);
  --img-g-kostarika-3: url(/assets/img/g-kostarika-3.webp);
  --img-g-kostarika-4: url(/assets/img/g-kostarika-4.webp);
  --img-g-spanelsko-1: url(/assets/img/g-spanelsko-1.webp);
  --img-g-spanelsko-2: url(/assets/img/g-spanelsko-2.webp);
  --img-g-spanelsko-3: url(/assets/img/g-spanelsko-3.webp);
  --img-g-spanelsko-4: url(/assets/img/g-spanelsko-4.webp);
  --img-gal-1: url(/assets/img/gal-1.webp);
  --img-gal-3: url(/assets/img/gal-3.webp);
  --img-gal-4: url(/assets/img/gal-4.webp);
  --img-hero-poster: url(/assets/img/hero-poster.webp);
  --img-hero-video: url(/assets/img/hero-video.webp);
  --img-hero-wide: url(/assets/img/hero-wide.webp);
  --img-story-bali-noc: url(/assets/img/story-bali-noc.webp);
  --img-story-terasa: url(/assets/img/story-terasa.webp);
  --img-video-david: url(/assets/img/video-david.webp);
  --img-video-how: url(/assets/img/video-how.webp);
}

/* ═══════════════ TOKENY ZNAČKY ═══════════════ */
:root {
  --p: #2F4F4F; --p600: #263E3E; --p400: #567373; --p300: #809999; --p200: #A9C1C1;
  --s: #CDAF75; --s600: #A38452; --s200: #E8D7B7; --s150: #F8F1E4; --s50: #FCFAF2;
  /* Zlatá pro text na světlém podkladu. Světlejší odstíny značky jsou
     na krému pod 3,5 : 1, což je pod hranicí čitelnosti. */
  --s700: #836A40;
  --ac: #1A2A40;
  --n50: #F5F5F5; --n100: #EFEFEF; --n150: #DADADA; --n200: #6B6C7F; --n700: #333333; --n900: #1E1E1E;
  --ok: #16A34A; --er: #B02020;
  /* Text na tmavých plochách (s168): pět stupňů místo 18 průhledností.
     Nejtišší --tm-5 má na --p 4,73 : 1; nic světlejšího pod něj nejde. */
  --tm-1: #fff; --tm-2: rgba(255,255,255,.88); --tm-3: rgba(255,255,255,.8);
  --tm-4: rgba(255,255,255,.72); --tm-5: rgba(255,255,255,.64);
  /* Plochy, linky, stíny (s170). Na tmavém: linky 1–4 od vlasové po obrys
     tlačítka, plochy 1–3 od tichého boxu po hover; sklo je světlý panel nad fotkou. */
  --plocha: #fff; --na-zlate: #241B08;
  --tm-linka-1: rgba(255,255,255,.12); --tm-linka-2: rgba(255,255,255,.18);
  --tm-linka-3: rgba(255,255,255,.26); --tm-linka-4: rgba(255,255,255,.5);
  --tm-plocha-1: rgba(255,255,255,.06); --tm-plocha-2: rgba(255,255,255,.12);
  --tm-plocha-3: rgba(255,255,255,.24); --plocha-sklo: rgba(255,255,255,.94);
  --stin-karta: 0 6px 22px rgba(15,30,28,.08);
  --stin-karta-hover: 0 14px 34px rgba(15,30,28,.13);
  --stin-poptavka: 0 16px 42px rgba(38,62,62,.22);
  --stin-chip: 0 2px 8px rgba(20,30,28,.16);
  --stin-popover: 0 18px 44px rgba(15,30,28,.18), 0 0 0 1px rgba(15,30,28,.06);
  /* Závoje a zbylé barvy (s172). Kanálové tokeny se píšou rgb(var(--zavoj) / .62). */
  --zavoj: 20 30 28; --zavoj-hluboky: 8 16 14; --zavoj-noc: 20 32 44;
  --p-rgb: 47 79 79; --s-rgb: 205 175 117; --s200-rgb: 232 215 183; --na-zlate-rgb: 36 27 8;
  --bila-rgb: 255 255 255; --cerna-rgb: 0 0 0; --seda-zavoj: 140 143 141;
  --jt-podklad: #16211E; --jt-noc: #111A18; --mapa-podklad: #EDEFEA;
  --rok-prazdny: #E6E2D6; --ctverec-prazdny: #C9CFCC;
  --vzacne-podklad: #FBF1DF; --vzacne-podklad-posledni: #F6E3C6; --vzacne-linka: #8A6A32;
  --vzacne-text: #7A4E0C; --vzacne-text-posledni: #6B3F06;
  --er-na-tmavem: #FFD9D2; --er-linka-na-tmavem: #FFB4A6;
  --sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --wrap: min(94vw, 1720px); --pad: 20px;
  /* Rám drží obraz, ne text. Míru čtení hlídají prvky samy —
     viz `.lead` (58 znaků) a strop odstavců v s73. */
  --r-xs: 3px; --r-sm: 8px; --r-control: 9px; --r: 12px; --r-lg: 16px; --r-pill: 99px;   /* škála rádiusů (s172) */
  /* Typografická škála — devět stupňů, nic mezi tím.
     Řezy: 400 text · 600 zvýraznění a popisky · 750 nadpisy.
     Cormorant má jedinou úlohu — hlas (claim a citáty) — a logotyp. */
  --t1: 12px; --t2: 13.5px; --t3: 15px; --t4: 17px; --t5: 21px;
  --t6: clamp(23px, 3.4vw, 28px); --t7: clamp(26px, 4.4vw, 36px);
  --t8: clamp(32px, 5.5vw, 48px); --t9: clamp(40px, 8vw, 76px);
  --w-text: 400; --w-med: 600; --w-bold: 750;

  color-scheme: light;
}
@media (min-width: 785px) { :root { --pad: 32px; } }
@media (min-width: 1040px) { :root { --pad: 40px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
body { margin: 0; font-family: var(--sans); color: var(--n900); background: var(--s50); font-size: var(--t3); line-height: 1.62; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, li, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; border-radius: var(--r-xs); }
/* Na tmavých sekcích byl rámeček tmavě zelený na tmavě zeleném, tedy
   neviditelný. Kdo chodí po webu klávesnicí, nevěděl, kde stojí. */
.sec.dark :focus-visible, .sec.ink :focus-visible, .foot :focus-visible,
.hero :focus-visible, .head :focus-visible, .util :focus-visible,
.formcard :focus-visible, .strip-quote :focus-visible {
  outline-color: var(--s200); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

/* ═══════════════ PRVKY ═══════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: var(--p); color: var(--tm-1); border: 1px solid var(--p); border-radius: var(--r-control);
  padding: 13px 22px; font-size: var(--t3); font-weight: var(--w-med); white-space: nowrap; text-align: center;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { background: var(--p600); border-color: var(--p600); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--p); }
.btn.ghost:hover { background: rgb(var(--p-rgb) / .06); }
.btn.light { background: var(--plocha); color: var(--p); border-color: var(--plocha); }
.btn.light:hover { background: var(--s150); border-color: var(--s150); }
.btn.outline-w { background: transparent; color: var(--tm-1); border-color: var(--tm-linka-4); }
.btn.outline-w:hover { background: var(--tm-plocha-2); }
.btn.gold { background: var(--s); border-color: var(--s); color: var(--na-zlate); }
.btn.gold:hover { background: var(--s600); border-color: var(--s600); color: var(--tm-1); }
.btn.sm { padding: 9px 15px; font-size: var(--t2); border-radius: var(--r-sm); }
.btn.wide { width: 100%; }
.ar { font-size: var(--t3); line-height: 1; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; background: var(--plocha); border: 1px solid var(--n150);
  border-radius: var(--r-pill); padding: 7px 13px; font-size: var(--t1); font-weight: var(--w-med);
  letter-spacing: .07em; text-transform: uppercase; white-space: nowrap;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.chip:hover { border-color: var(--p300); }
.chip.on { background: var(--p); border-color: var(--p); color: var(--tm-1); }
.chip.solid { border-color: transparent; box-shadow: var(--stin-chip); }
.chip.gold { background: var(--s); border-color: var(--s600); color: var(--na-zlate); }
.chip.soon { background: var(--s150); border-color: var(--s200); color: var(--s700); }
.chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.flag { width: 18px; height: 12px; border-radius: var(--r-xs); flex: 0 0 auto; box-shadow: 0 0 0 1px rgb(var(--cerna-rgb) / .13); }
.ico { width: 15px; height: 15px; flex: 0 0 auto; }

/* ═══════════════ SEKCE ═══════════════ */
.sec { padding: 88px 0; }
@media (min-width: 785px) { .sec { padding: 128px 0; } }
.sec.tight { padding: 64px 0; }
@media (min-width: 785px) { .sec.tight { padding: 88px 0; } }
.sec.white { background: var(--plocha); }
.sec.cream { background: var(--s150); }
.sec.dark { background: var(--p); color: var(--tm-1); }
.sec.ink { background: var(--n900); color: var(--tm-1); }
.sec.pattern { position: relative; overflow: hidden; }
.sec.pattern::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    radial-gradient(circle at 12% 18%, rgb(var(--s-rgb) / .18) 0 1.5px, transparent 2px),
    radial-gradient(circle at 78% 62%, rgb(var(--s-rgb) / .14) 0 1.5px, transparent 2px),
    radial-gradient(circle at 40% 88%, rgb(var(--p-rgb) / .09) 0 1.5px, transparent 2px);
  background-size: 220px 190px, 300px 250px, 260px 210px;
}
.sec.pattern > .wrap { position: relative; z-index: 1; }
.lab { font-size: var(--t1); letter-spacing: .16em; text-transform: uppercase; color: var(--s700); font-weight: var(--w-bold); }
.sec.dark .lab, .sec.ink .lab { color: var(--s200); }
.h2 { font-size: var(--t7); font-weight: var(--w-bold); letter-spacing: -.025em; line-height: 1.18; margin-top: 12px; text-wrap: balance; }
.sec.dark .h2, .sec.ink .h2 { color: var(--tm-1); }
.lead { font-size: var(--t4); line-height: 1.62; color: var(--n700); max-width: 58ch; margin-top: 14px; }
.sec.dark .lead, .sec.ink .lead { color: var(--tm-3); }
.fine { font-size: var(--t1); color: var(--n200); line-height: 1.5; }
.evoke { font-family: var(--serif); font-style: italic; color: var(--p); }
.sec-head { display: flex; align-items: flex-end; gap: 22px; flex-wrap: wrap; margin-bottom: 44px; }
.sec-head .sp { flex: 1; min-width: 0; }

/* ═══════════════ HLAVIČKA ═══════════════ */
.util { background: var(--p600); color: var(--tm-3); font-size: var(--t1); }
.util .wrap { display: flex; align-items: center; gap: 18px; padding-block: 8px; flex-wrap: wrap; }
.util .sp { flex: 1; }
.util b { color: var(--tm-1); font-weight: var(--w-med); }
@media (max-width: 784px) { .util { display: none; } }

.head { background: var(--plocha); border-bottom: 1px solid var(--n100); position: sticky; top: 0; z-index: var(--z-hlavicka); }
.head > .wrap { display: flex; align-items: center; gap: 20px; height: 72px; }
@media (min-width: 785px) { .head > .wrap { height: 70px; gap: 28px; } }
.logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: var(--t5); font-weight: var(--w-text); color: var(--p); letter-spacing: .12em; flex: 0 0 auto; }
.logo svg { width: 17px; height: 17px; }
/* --- logotyp -------------------------------------------------------------
   Skutečné logo z fragmenta.cz. Výška je daná, šířka dopočtená z poměru
   261:54 — kdyby se logo překreslilo, stačí vyměnit soubor. */
.logo img { display: block; height: 38px; width: auto; }
@media (max-width: 1039px) { .logo img { height: 32px; } }
@media (max-width: 480px) { .logo img { height: 28px; } }
.foot .fl { display: block; height: 30px; width: auto; }
.nav { display: none; gap: 22px; font-size: var(--t3); font-weight: var(--w-text); color: var(--n700); }
@media (min-width: 1040px) { .nav { display: flex; } }
.nav > * { display: inline-flex; align-items: center; gap: 5px; padding-block: 6px; position: relative; }
.nav > *:hover { color: var(--p); }
.nav .caret { width: 9px; height: 9px; opacity: .5; transition: transform .18s ease; }
.nav [aria-expanded="true"] { color: var(--p); font-weight: var(--w-med); }
.nav [aria-expanded="true"] .caret { transform: rotate(180deg); }
.nav [aria-current="page"] { color: var(--p); font-weight: var(--w-med); }
.nav [aria-current="page"]::after { content: ""; position: absolute; inset-inline: 0; bottom: -21px; height: 2px; background: var(--p); }
.head > .wrap > .sp { flex: 1; }
.tel { display: none; font-size: var(--t3); font-weight: var(--w-bold); color: var(--p); white-space: nowrap; }
@media (min-width: 785px) { .tel { display: inline; } }
.burger { display: grid; gap: 4px; padding: 8px; margin-right: -6px; flex: 0 0 auto; }
@media (min-width: 1040px) { .burger { display: none; } }
.burger i { display: block; width: 20px; height: 2px; background: var(--n900); border-radius: var(--r-xs); transition: transform .2s ease, opacity .2s ease; }
.burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* na nejužších displejích se do hlavičky nevejde CTA — je v zásuvce i na konci stránky */
@media (max-width: 600px) {
  .head > .wrap { gap: 12px; }
  .head > .wrap > .btn { display: none; }
  .logo { font-size: var(--t4); letter-spacing: .09em; }
}

/* zásuvka na mobilu */
.drawer { display: none; background: var(--plocha); border-bottom: 1px solid var(--n150); }
.drawer.open { display: block; }
@media (min-width: 1040px) { .drawer { display: none !important; } }

/* megamenu */
.mega { display: none; position: absolute; inset-inline: 0; background: var(--plocha); border-bottom: 1px solid var(--n150); box-shadow: 0 20px 44px rgb(var(--zavoj) / .12); z-index: var(--z-mega); }
.mega.open { display: block; }
.mega > .wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; padding-block: 28px 32px; }
.mega .lb { font-size: var(--t2); font-weight: var(--w-med); color: var(--n200); margin-bottom: 6px; padding-left: 10px; }
.mega li a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: var(--r-sm); font-size: var(--t3); line-height: 1.35; color: var(--n700); }
.mega li a:hover { background: var(--s50); color: var(--p); }
.mega li .n { margin-left: auto; font-size: var(--t1); color: var(--n200); font-variant-numeric: tabular-nums; }

/* ═══════════════ HERO ═══════════════ */
.hero .vid {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
}
@media (prefers-reduced-motion: reduce) { .hero .vid { display: none; } }

/* ═══════════════ SMYSLOVÝ PRUH ═══════════════ */
.strip-quote {
  position: relative; min-height: 300px; display: flex; align-items: center;
  background-size: cover; background-position: center; overflow: hidden;
}
@media (min-width: 785px) { .strip-quote { min-height: 400px; } }
.strip-quote::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(var(--zavoj) / .62) 0%, rgb(var(--zavoj) / .34) 55%, rgb(var(--zavoj) / .12) 100%);
}
.strip-quote .in { position: relative; z-index: var(--z-nad-fotkou); }
.strip-quote q {
  display: block; font-family: var(--serif); font-style: italic; font-weight: var(--w-text);
  font-size: var(--t8); line-height: 1.22; color: var(--tm-1); max-width: 20ch;
  quotes: "„" "“"; text-shadow: 0 2px 24px rgb(var(--zavoj-noc) / .4);
}
.strip-quote .src {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  font-size: var(--t1); letter-spacing: .14em; text-transform: uppercase; font-weight: var(--w-bold);
  color: var(--tm-3);
}

/* fotka i za nejanalytičtější sekcí */
.sec.dark.photo::before {
  content: ""; position: absolute; inset: 0; background-image: var(--bgp); background-size: cover;
  background-position: center; opacity: .14; mix-blend-mode: luminosity;
}

/* fázový pruh na homepage */
@media (min-width: 900px) { .phase-band { grid-template-columns: auto 1fr auto; gap: 28px; padding: 24px 30px; } }
.phase-band .rail i.on { background: var(--s); }

/* konečnost nabídky */

.avail .lb small { display: block; font-size: var(--t1); letter-spacing: .05em; font-weight: var(--w-med); color: var(--n200); text-transform: none; margin-top: 2px; }
.hero { position: relative; background: var(--p600); }
/* ══ vyšší hero, vzdušnost a rozsekání sekcí — viz _build/s19_sazba.py ══ */
.hero .bg { min-height: 82svh; background-size: cover; background-position: center 58%; position: relative; display: flex; align-items: center; }
@media (min-width: 785px) { .hero .bg { min-height: 700px; } }
.hero .bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgb(var(--zavoj-noc) / .78) 0%, rgb(var(--zavoj-noc) / .56) 34%, rgb(var(--zavoj-noc) / .1) 60%, rgb(var(--zavoj-noc) / 0) 100%),
    linear-gradient(180deg, rgb(var(--zavoj-noc) / .34) 0%, rgb(var(--zavoj-noc) / 0) 20%, rgb(var(--zavoj-noc) / 0) 66%, rgb(var(--zavoj-noc) / .7) 100%);
}
.hero .in { position: relative; z-index: var(--z-nad-fotkou); width: 100%; padding-block: 44px; }
.badge {
  display: inline-flex; align-items: center; gap: 9px; background: var(--tm-plocha-2);
  border: 1px solid var(--tm-linka-3); backdrop-filter: blur(8px); border-radius: var(--r-pill);
  padding: 7px 15px 7px 12px; font-size: var(--t1); font-weight: var(--w-med); color: var(--tm-1); margin-bottom: 18px;
}
.badge svg { width: 16px; height: 16px; color: var(--s); }
.hero h1 {
  font-family: var(--serif); font-weight: var(--w-text); font-size: var(--t9); line-height: 1.03;
  letter-spacing: -.015em; color: var(--tm-1); max-width: 15ch; text-shadow: 0 2px 30px rgb(var(--zavoj-noc) / .35);
}
.hero .sub { font-size: var(--t4); line-height: 1.55; color: var(--tm-1); max-width: 44ch; margin-top: 24px; text-shadow: 0 1px 16px rgb(var(--zavoj-noc) / .4); }
.hero .cta { display: flex; gap: 11px; margin-top: 36px; flex-wrap: wrap; }
.proof { display: flex; flex-wrap: wrap; gap: 9px 24px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--tm-linka-3); }
.proof span { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t2); color: var(--tm-3); }
.proof b { color: var(--tm-1); font-weight: var(--w-bold); }
.proof svg { width: 16px; height: 16px; color: var(--s); flex: 0 0 auto; }

/* hlavička stránky (podstránky) */
.crumb { display: flex; align-items: center; gap: 8px; font-size: var(--t1); color: var(--n200); }
.crumb a:hover { color: var(--p); }

/* ═══════════════ KROKY ═══════════════ */
.steps { display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); gap: 0; } }
.step { display: flex; gap: 13px; position: relative; }
@media (min-width: 1040px) { .step { flex-direction: column; gap: 11px; padding-inline: 24px; } .step:first-child { padding-left: 0; } .step:last-child { padding-right: 0; }
  .step + .step::before { content: ""; position: absolute; left: 0; top: 16px; width: 1px; height: calc(100% - 22px); background: linear-gradient(180deg, transparent, var(--s200) 20%, var(--s200) 80%, transparent); } }
.step .ic { width: 38px; height: 38px; border-radius: var(--r); background: var(--plocha); border: 1px solid var(--s200); display: grid; place-items: center; color: var(--p); flex: 0 0 auto; }
.step .ic svg { width: 20px; height: 20px; }
.step .t { font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.015em; line-height: 1.3; }
.step .t b { color: var(--p); font-weight: var(--w-bold); }
.step .d { font-size: var(--t2); color: var(--n200); line-height: 1.45; margin-top: 3px; }
.step .big { font-size: var(--t7); font-weight: var(--w-bold); letter-spacing: -.04em; color: var(--p); line-height: 1; font-variant-numeric: tabular-nums; }
.step .big small { font-size: var(--t2); font-weight: var(--w-med); letter-spacing: 0; color: var(--n700); margin-left: 7px; }

/* rok */
.year { display: flex; gap: 2px; align-items: flex-end; }
.year i { display: block; flex: 1; min-width: 0; height: var(--yh, 22px); border-radius: var(--r-xs); background: var(--rok-prazdny); }
.year i.mine { background: var(--s); }
.yearleg { display: flex; gap: 18px; flex-wrap: wrap; font-size: var(--t1); color: var(--n200); margin-top: 10px; }
.yearleg span { display: inline-flex; align-items: center; gap: 7px; }
.sw { width: 10px; height: 10px; border-radius: var(--r-xs); flex: 0 0 auto; }

/* osmice */
.eight { display: flex; gap: 5px; }
.eight i { display: block; width: 20px; height: 20px; border: 1.5px solid var(--p300); border-radius: var(--r-xs); }
.eight i.me { background: var(--s); border-color: var(--s600); }

/* ═══════════════ KARTA NEMOVITOSTI ═══════════════ */
.grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.card { background: var(--plocha); border-radius: var(--r); overflow: hidden; box-shadow: var(--stin-karta); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.card:hover { transform: translateY(-3px); box-shadow: var(--stin-karta-hover); }
.card .ph { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.card .lay { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .42s cubic-bezier(.4,0,.2,1); }
.card .lay.first { opacity: 1; }
.card .zone { position: absolute; top: 0; bottom: 0; width: 25%; z-index: var(--z-karta-zona); }
.card .zone:nth-of-type(1) { left: 0 } .card .zone:nth-of-type(2) { left: 25% }
.card .zone:nth-of-type(3) { left: 50% } .card .zone:nth-of-type(4) { left: 75% }
@media (hover: hover) {
  .card .zone:nth-of-type(1):hover ~ .lay:nth-of-type(5),
  .card .zone:nth-of-type(2):hover ~ .lay:nth-of-type(6),
  .card .zone:nth-of-type(3):hover ~ .lay:nth-of-type(7),
  .card .zone:nth-of-type(4):hover ~ .lay:nth-of-type(8) { opacity: 1; }
  .card .zone:nth-of-type(1):hover ~ .dots i:nth-child(1),
  .card .zone:nth-of-type(2):hover ~ .dots i:nth-child(2),
  .card .zone:nth-of-type(3):hover ~ .dots i:nth-child(3),
  .card .zone:nth-of-type(4):hover ~ .dots i:nth-child(4) { background: var(--plocha); }
  .card:hover .dots { opacity: 1; }
  .card:hover .hint { opacity: 0; }
}
.card .dots { position: absolute; inset-inline: 0; bottom: 9px; z-index: var(--z-karta-tecky); display: flex; justify-content: center; gap: 4px; opacity: 0; transition: opacity .2s ease; }
.card .dots i { width: 16px; height: 3px; border-radius: var(--r-xs); background: rgb(var(--bila-rgb) / .45); transition: background .2s ease; }
.card .hint { position: absolute; right: 11px; bottom: 11px; z-index: var(--z-karta-tecky); background: rgb(var(--zavoj) / .82); /* .64 → .82, ať bílý text drží 4,5:1 i nad světlou fotkou (s135) */ color: var(--tm-1); border-radius: var(--r-pill); padding: 4px 10px; font-size: var(--t1); font-weight: var(--w-med); transition: opacity .2s ease; }
.card .tl { position: absolute; top: 12px; left: 12px; right: 12px; z-index: var(--z-karta-chip); display: flex; gap: 6px; flex-wrap: wrap; }
.avail { position: absolute; right: 12px; top: 12px; z-index: var(--z-karta-dostupnost); background: var(--plocha-sklo); border-radius: var(--r-control); padding: 6px 9px; display: flex; flex-direction: column; gap: 5px; box-shadow: 0 3px 12px rgb(var(--zavoj) / .2); }
.avail .sq { display: flex; gap: 2px; }
.avail .sq i { width: 8px; height: 8px; border-radius: var(--r-xs); background: var(--ctverec-prazdny); }
.avail .sq i.free { background: var(--s); box-shadow: inset 0 0 0 1px var(--vzacne-linka); }
.avail .lb { font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.avail.one .lb { color: var(--vzacne-text); }
.facts { display: grid; grid-template-columns: auto 1fr; border: 1px solid var(--s200); border-radius: var(--r-control); overflow: hidden; margin-top: auto; }
.facts > div { padding: 9px 13px; min-width: 0; }
.facts .days { background: var(--s150); border-right: 1px solid var(--s200); }
.facts .lb { font-size: var(--t1); letter-spacing: .11em; text-transform: uppercase; color: var(--n200); font-weight: var(--w-bold); }
.facts .vl { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.2; margin-top: 1px; }
.facts .vl.p { color: var(--p); }
.facts .vl small { font-size: var(--t1); font-weight: var(--w-med); letter-spacing: 0; margin-left: 3px; }

/* prodáno — musí být jasné na první pohled, ne detail v rohu */
.card.sold .lay { filter: grayscale(.9) contrast(.9); }
.card.sold .ph::after {
  content: ""; position: absolute; inset: 0; z-index: var(--z-karta-prodano); background: rgb(var(--zavoj) / .42);
}
.card.sold .hint, .card.sold .dots { display: none; }
/* Ztlumení barvou, ne průhledností: `opacity` stáhla text pod 4,5 : 1 (s164). */
.card.sold .ttl, .card.sold .adr, .card.sold .ev, .card.sold .cena { color: var(--n200); }
.card.sold:hover { transform: none; box-shadow: var(--stin-karta); }

.card.pkgtile { background: var(--p); color: var(--tm-1); box-shadow: 0 8px 26px rgb(var(--p-rgb) / .22); }
.pkgtile-bd { padding: 22px 20px 0; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.pkgtile .ttl { font-size: var(--t5); font-weight: var(--w-med); letter-spacing: -.02em; line-height: 1.2; color: var(--tm-1); }
.pkgtile p { font-size: var(--t2); color: var(--tm-3); line-height: 1.5; }
.pkgtile:hover { background: var(--p600); transform: translateY(-3px); }

/* ═══════════════ POROVNÁNÍ ═══════════════ */
.cmp { display: grid; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 785px) { .cmp { grid-template-columns: 1.05fr 1fr 1fr; } }
.cmp > div { padding: 13px 0; border-bottom: 1px solid var(--tm-linka-1); }
@media (min-width: 785px) { .cmp > div { padding: 15px 20px; } .cmp > div:nth-last-child(-n+3) { border-bottom: none; } }
.cmp .hd { font-size: var(--t1); letter-spacing: .13em; text-transform: uppercase; font-weight: var(--w-bold); padding-bottom: 11px; color: var(--tm-4); border-bottom: 1px solid var(--tm-linka-3); }
@media (max-width: 784px) { .cmp .hd { display: none; } }
.cmp .q { color: var(--tm-5); font-size: var(--t2); padding-top: 16px; font-weight: var(--w-med); }
@media (min-width: 785px) { .cmp .q { padding-top: 15px; font-weight: var(--w-text); } }
.cmp .them { color: var(--tm-5); font-size: var(--t3); }
.cmp .us { color: var(--tm-1); font-size: var(--t3); font-weight: var(--w-med); }
@media (min-width: 785px) { .cmp .us { background: var(--tm-plocha-1); } .cmp .hd.us { background: rgb(var(--s-rgb) / .1); color: var(--s200); } }
@media (max-width: 784px) {
  .cmp .them::before { content: "Timeshare"; display: block; font-size: var(--t1); letter-spacing: .13em; text-transform: uppercase; font-weight: var(--w-bold); color: var(--tm-4); margin-bottom: 3px; }
  .cmp .us::before { content: "Fragmento"; display: block; font-size: var(--t1); letter-spacing: .13em; text-transform: uppercase; font-weight: var(--w-bold); color: var(--s); margin-bottom: 3px; }
  .cmp > div { border-bottom: none; padding: 7px 0; }
}

/* ═══════════════ DALŠÍ PRVKY ═══════════════ */

.story { background: var(--plocha); border-radius: var(--r); padding: 22px 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 4px 16px rgb(var(--zavoj) / .06); }
.story .q { font-family: var(--serif); font-style: italic; font-size: var(--t5); line-height: 1.42; color: var(--p); }
.story .who { display: flex; align-items: center; gap: 11px; }
.story .mono { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; background: var(--s150); border: 1px solid var(--s200); color: var(--p); display: grid; place-items: center; font-size: var(--t3); font-weight: var(--w-med); }
.story { color: var(--n900); }
.story .nm { font-size: var(--t2); font-weight: var(--w-med); }
.story .ct { font-size: var(--t1); color: var(--n200); }


.geo-tabs button.on { background: var(--p); border-color: var(--p); color: var(--tm-1); }
@media (min-width: 785px) { .geo-row { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
.geo-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(var(--zavoj) / .05) 40%, rgb(var(--zavoj) / .72) 100%); }
.geo-card:hover { outline: 2px solid var(--p); outline-offset: -2px; }

.acc { background: var(--plocha); border: 1px solid var(--n150); border-radius: var(--r); overflow: hidden; }
.acc + .acc { margin-top: 10px; }
.acc-head { display: flex; align-items: center; gap: 14px; padding: 16px 20px; width: 100%; text-align: left; }
.acc-head .ic { width: 34px; height: 34px; border-radius: var(--r-control); background: var(--s150); display: grid; place-items: center; color: var(--p); flex: 0 0 auto; }
.acc-head .ic svg { width: 18px; height: 18px; }
.acc-head .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.acc-head .t { font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.015em; }
.acc-head .plus { font-size: var(--t5); color: var(--n200); font-weight: var(--w-text); line-height: 1; }
.acc-body { display: none; padding: 0 20px 20px; border-top: 1px solid var(--n100); }
.acc[data-open="1"] .acc-body { display: block; padding-top: 18px; }
.acc[data-open="1"] .plus { transform: rotate(45deg); }

.own { display: grid; gap: 12px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .own { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 16px; } }
.own-box { background: var(--plocha); border: 1px solid var(--s200); border-radius: var(--r); padding: 15px 17px; display: flex; flex-direction: column; gap: 5px; }
.own-box .lb { font-size: var(--t1); letter-spacing: .12em; text-transform: uppercase; color: var(--n200); font-weight: var(--w-bold); }
.own-box .nm { font-size: var(--t5); font-weight: var(--w-text); line-height: 1.15; }
.own-box .ds { font-size: var(--t1); color: var(--n200); line-height: 1.4; }
.own-arrow { display: flex; align-items: center; gap: 9px; color: var(--s700); }
.own-arrow .cap { font-size: var(--t1); letter-spacing: .13em; text-transform: uppercase; font-weight: var(--w-bold); white-space: nowrap; }
.own-arrow svg { width: 22px; height: 11px; flex: 0 0 auto; }
@media (max-width: 899px) { .own-arrow svg { transform: rotate(90deg); } }
.owners { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.owners .o { background: var(--plocha); border: 1px solid var(--n150); border-radius: var(--r-sm); padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.owners .o .n { font-size: var(--t1); font-weight: var(--w-med); color: var(--n700); }
.owners .o .p { font-size: var(--t1); color: var(--n200); font-variant-numeric: tabular-nums; }
.owners .o.me { background: var(--s); border-color: var(--s600); }
.owners .o.me .p { color: var(--p600); }
.owners .o.me .n { font-size: var(--t2); font-weight: var(--w-bold); color: var(--na-zlate); }
.owners .o.us { background: var(--p); border-color: var(--p600); }
.owners .o.us .n { font-size: var(--t2); color: var(--tm-1); font-weight: var(--w-bold); }
.owners .o.us .p { color: var(--tm-4); }
.own-note { background: var(--p); color: var(--tm-2); border-radius: var(--r-control); padding: 13px 16px; font-size: var(--t1); line-height: 1.45; display: flex; gap: 11px; align-items: center; margin-top: 16px; }
.own-note b { color: var(--tm-1); }
.own-note svg { width: 20px; height: 20px; color: var(--s); flex: 0 0 auto; }

.days-bar { display: flex; height: 44px; border-radius: var(--r-control); overflow: hidden; border: 1px solid var(--s200); }
.days-bar > div { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
.days-bar .live { background: var(--p); color: var(--tm-1); }
.days-bar .rent { background: var(--s); color: var(--na-zlate); }
.days-bar .n { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.03em; }
.days-bar .l { font-size: var(--t1); font-weight: var(--w-med); white-space: nowrap; }
.days-out { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--n150); border: 1px solid var(--n150); border-radius: var(--r-control); overflow: hidden; margin-top: 14px; }
@media (min-width: 560px) { .days-out { grid-template-columns: 1fr 1fr; } }
.days-out > div { background: var(--plocha); padding: 14px 16px; }
.days-out .lb { font-size: var(--t1); letter-spacing: .11em; text-transform: uppercase; color: var(--n200); font-weight: var(--w-bold); }
.days-out .vl { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.03em; color: var(--p); margin-top: 4px; font-variant-numeric: tabular-nums; }
.days-out .hint { font-size: var(--t1); color: var(--n200); margin-top: 3px; }

.hold { background: var(--p); color: var(--tm-1); border-radius: var(--r-lg); padding: 26px 24px; display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .hold { grid-template-columns: auto 1fr auto; padding: 32px 36px; gap: 30px; } }
.hold .big { font-size: var(--t9); font-weight: var(--w-bold); letter-spacing: -.05em; color: var(--s); line-height: .9; font-variant-numeric: tabular-nums; }
.hold .big small { display: block; font-size: var(--t2); font-weight: var(--w-med); letter-spacing: .06em; text-transform: uppercase; color: var(--tm-3); margin-top: 7px; }
.hold h3 { font-size: var(--t6); font-weight: var(--w-med); letter-spacing: -.025em; color: var(--tm-1); }
.hold p { font-size: var(--t3); color: var(--tm-3); margin-top: 7px; line-height: 1.55; max-width: 46ch; }

.cta-strip { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; border-top: 1px solid var(--n150); border-bottom: 1px solid var(--n150); padding: 18px 0; margin-top: 38px; }
.sec.dark .cta-strip, .sec.ink .cta-strip { border-color: var(--tm-linka-2); }
.cta-strip .t { font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.018em; }
.sec.dark .cta-strip .t { color: var(--tm-1); }
.cta-strip .s { font-size: var(--t2); color: var(--n200); margin-top: 2px; }
.sec.dark .cta-strip .s { color: var(--tm-4); }
.cta-strip .sp { flex: 1; min-width: 0; }

.sellers { display: flex; gap: 16px; flex-wrap: wrap; }
.seller { display: flex; align-items: center; gap: 10px; }
.seller .av { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; background-size: cover; background-position: center; border: 2px solid var(--plocha); box-shadow: 0 2px 10px rgb(var(--zavoj) / .18); }
.seller .av.ph { background: var(--s150); border-color: var(--s200); color: var(--p); display: grid; place-items: center; font-size: var(--t4); font-weight: var(--w-med); }
.seller .nm { font-size: var(--t2); font-weight: var(--w-med); line-height: 1.2; }
.seller .rl { font-size: var(--t1); color: var(--n200); }

.formcard { background: var(--p); border-radius: var(--r-lg); padding: 26px 22px; color: var(--tm-1); box-shadow: var(--stin-poptavka); }
@media (min-width: 785px) { .formcard { padding: 34px 36px; } }
.formcard .sub { font-size: var(--t3); color: var(--tm-3); margin-top: 7px; }
.fgrid { display: grid; grid-template-columns: 1fr; gap: 11px; margin-top: 22px; }
@media (min-width: 560px) { .fgrid { grid-template-columns: 1fr 1fr; } .fgrid .full { grid-column: 1 / -1; } }
.inp { background: var(--tm-plocha-2); border: 1px solid var(--tm-linka-4);   /* 3,57 : 1 na --p (s171) */ border-radius: var(--r-sm); padding: 12px 14px; font-size: var(--t2); color: var(--tm-1); }
/* Vyplněný text bílý, zástupný o stupeň slabší. Zástupný text má stejnou
   hranici čitelnosti jako běžný, na šedou se u něj spolehnout nedá. */
.inp::placeholder { color: var(--tm-3); opacity: 1; }
.inp.ta { min-height: 82px; }
.formcard .lbl { font-size: var(--t1); letter-spacing: .11em; text-transform: uppercase; color: var(--tm-4); font-weight: var(--w-bold); }
.formcard .chip { background: var(--tm-plocha-2); border-color: var(--tm-linka-3); color: var(--tm-3); }
.formcard .chip.on { background: var(--s); border-color: var(--s); color: var(--na-zlate); }
.formcard .fine { color: var(--tm-4); }

/* dvousloupec */
.two { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .two { grid-template-columns: 1.5fr 1fr; gap: 42px; align-items: start; } }
.two.even { grid-template-columns: 1fr; }
@media (min-width: 900px) { .two.even { grid-template-columns: 1fr 1fr; } }

/* detail */
.gal { display: grid; gap: 6px; grid-template-columns: 1fr; }
@media (min-width: 785px) { .gal { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; height: 460px; } .gal > div:first-child { grid-row: 1 / 3; } }
.gal > div { background-size: cover; background-position: center; position: relative; min-height: 220px; }
.panel { background: var(--plocha); border: 1px solid var(--s200); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 8px 26px rgb(var(--zavoj) / .07); }
@media (min-width: 900px) { .panel { position: sticky; top: 86px; } }
.panel .price { font-size: var(--t7); font-weight: var(--w-bold); letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; }
.panel .price small { display: block; font-size: var(--t2); font-weight: var(--w-med); color: var(--n200); margin-top: 6px; letter-spacing: 0; }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--s200); border: 1px solid var(--s200); border-radius: var(--r-control); overflow: hidden; }
.split > div { background: var(--s50); padding: 12px 14px; }
.split .lb { font-size: var(--t1); letter-spacing: .11em; text-transform: uppercase; color: var(--n200); font-weight: var(--w-bold); }
.split .vl { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.03em; color: var(--p); margin-top: 2px; }
.par { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--n150); border: 1px solid var(--n150); border-radius: var(--r-control); overflow: hidden; }
@media (min-width: 560px) { .par { grid-template-columns: repeat(4, 1fr); } }
.par > div { background: var(--plocha); padding: 13px 15px; }
.par .lb { font-size: var(--t1); letter-spacing: .1em; text-transform: uppercase; color: var(--n200); font-weight: var(--w-bold); }
.par .vl { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.02em; margin-top: 3px; }
.prose { font-size: var(--t3); line-height: 1.72; color: var(--n700); max-width: 62ch; display: flex; flex-direction: column; gap: 13px; }
.benlist { display: grid; grid-template-columns: 1fr; gap: 10px 24px; }
@media (min-width: 560px) { .benlist { grid-template-columns: 1fr 1fr; } }
.benlist li { display: flex; gap: 10px; align-items: baseline; font-size: var(--t3); color: var(--n700); }
.benlist li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--s); flex: 0 0 auto; }
.iconlist { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (min-width: 900px) { .iconlist { grid-template-columns: repeat(5, 1fr); gap: 20px; } }
.iconlist li { display: flex; flex-direction: column; gap: 9px; font-size: var(--t2); color: var(--n700); line-height: 1.4; }
.iconlist .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--s150); display: grid; place-items: center; color: var(--p); }
.iconlist .ic svg { width: 18px; height: 18px; }

.phases { display: grid; grid-template-columns: 1fr; gap: 6px; }
@media (min-width: 785px) { .phases { grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; } }
.ph-item { background: var(--plocha); border: 1px solid var(--n150); border-radius: var(--r-control); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; position: relative; }
.ph-item .pct { font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .05em; color: var(--n200); }
.ph-item .pr { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.ph-item .dt { font-size: var(--t1); letter-spacing: .09em; text-transform: uppercase; color: var(--n200); font-weight: var(--w-med); }
.ph-item.past { background: var(--n50); }
/* Minulá fáze se tlumí barvou (4,72 : 1), ne `opacity: .62` (2,36 : 1) — s164. */
.ph-item.past .pr { text-decoration: line-through; text-decoration-color: currentColor; color: var(--n200); }
.ph-item.now { background: var(--p); border-color: var(--p); }
.ph-item.now .pct, .ph-item.now .dt { color: var(--tm-4); }
.ph-item.now .pr { color: var(--tm-1); font-size: var(--t5); }
.ph-item.now .bdg { position: absolute; top: -10px; left: 14px; background: var(--s); color: var(--na-zlate); font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .11em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--r-pill); }
.ph-item.next { border-color: var(--s200); background: var(--s50); }

.next-steps { background: var(--s150); border: 1px solid var(--s200); border-radius: var(--r-lg); padding: 22px 24px; }
.next-steps ol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; counter-reset: st; }
@media (min-width: 785px) { .next-steps ol { grid-template-columns: repeat(4, 1fr); } }
.next-steps li { display: flex; flex-direction: column; gap: 4px; }
.next-steps li::before { counter-increment: st; content: counter(st); width: 25px; height: 25px; border-radius: 50%; background: var(--p); color: var(--tm-1); display: grid; place-items: center; font-size: var(--t1); font-weight: var(--w-bold); margin-bottom: 4px; }
.next-steps li b { font-size: var(--t2); }
.next-steps li span { font-size: var(--t1); color: var(--n700); line-height: 1.45; }

.vidframe { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16/9; background-size: cover; background-position: center; box-shadow: 0 12px 32px rgb(var(--zavoj) / .2); }
.vidframe::after { content: ""; position: absolute; inset: 0; background: rgb(var(--zavoj) / .24); }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: var(--z-nad-fotkou); width: 62px; height: 62px; border-radius: 50%; background: var(--plocha-sklo); display: grid; place-items: center; box-shadow: 0 5px 18px rgb(var(--zavoj) / .3); transition: transform .2s ease; }
.vidframe:hover .play { transform: translate(-50%,-50%) scale(1.08); }
.play svg { width: 20px; height: 20px; margin-left: 3px; color: var(--p); }
.vidmeta { position: absolute; left: 16px; bottom: 14px; z-index: var(--z-nad-fotkou); color: var(--tm-1); }
.vidmeta .nm { font-size: var(--t3); font-weight: var(--w-bold); }
.vidmeta .rl { font-size: var(--t1); color: var(--tm-3); }

/* výpis */
.filter { background: var(--plocha); border: 1px solid var(--n150); border-radius: var(--r); padding: 20px; display: flex; flex-direction: column; gap: 15px; }
.filter .fl { font-size: var(--t1); letter-spacing: .12em; text-transform: uppercase; color: var(--n200); font-weight: var(--w-bold); }
.fields { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 785px) { .fields { grid-template-columns: repeat(3, 1fr); } }
.sel { border: 1px solid var(--n150); border-radius: var(--r-sm); padding: 10px 13px; font-size: var(--t2); color: var(--n700); background: var(--plocha); }
.bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--n100); padding-top: 14px; }
.bar .sp { flex: 1; min-width: 0; }
.toggle { display: inline-flex; background: var(--n100); border-radius: var(--r-control); padding: 3px; gap: 2px; }
.toggle button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-sm); font-size: var(--t2); font-weight: var(--w-med); color: var(--n700); }
.toggle button.on { background: var(--plocha); color: var(--n900); box-shadow: 0 1px 4px rgb(var(--zavoj) / .12); }
.toggle svg { width: 15px; height: 15px; }

.maplayout { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .maplayout { grid-template-columns: 1.3fr 1fr; } .maplayout .pane-map { position: sticky; top: 86px; } .maplayout .pane-list { max-height: 560px; overflow-y: auto; padding-right: 5px; } }
.pin.active .dot { fill: var(--p); stroke: var(--tm-1); stroke-width: 2; }
.pin.active .n { fill: var(--tm-1); }
.maplegend { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 16px; margin: 16px -16px 0; border-top: 1px solid var(--n100); background: var(--n50); }
.maplegend .it { display: inline-flex; align-items: center; gap: 7px; background: var(--plocha); border: 1px solid var(--n150); border-radius: var(--r-pill); padding: 5px 12px 5px 8px; font-size: var(--t1); font-weight: var(--w-med); white-space: nowrap; }
.maplegend .it b { color: var(--p); font-weight: var(--w-bold); }
.maplegend .it.off { opacity: .5; }
.mini { display: grid; grid-template-columns: 120px 1fr; gap: 13px; background: var(--plocha); border-radius: var(--r); overflow: hidden; box-shadow: 0 4px 16px rgb(var(--zavoj) / .08); margin-bottom: 13px; }
.mini:hover { outline: 2px solid var(--p); outline-offset: -2px; }
.mini .ph { aspect-ratio: 4/3; background-size: cover; background-position: center; position: relative; }
.mini .bd { padding: 12px 14px 12px 0; display: flex; flex-direction: column; gap: 4px; justify-content: center; }
.mini .ttl { font-size: var(--t2); font-weight: var(--w-med); letter-spacing: -.015em; line-height: 1.25; }
.mini .adr { font-size: var(--t1); color: var(--n200); }
.mini .pr { font-size: var(--t3); font-weight: var(--w-bold); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.mini .pr small { font-size: var(--t1); font-weight: var(--w-med); color: var(--n200); margin-left: 4px; }

/* ═══════════════ MAPA — cenové pilulky ═══════════════ */
.mapwrap { position: relative; border-radius: var(--r); overflow: hidden; background: var(--mapa-podklad); border: 1px solid var(--n150); }
.map-ctl { position: absolute; right: 12px; top: 12px; display: flex; flex-direction: column; gap: 6px; z-index: var(--z-nad-fotkou); }
.map-ctl button { width: 34px; height: 34px; border-radius: var(--r-sm); background: var(--plocha); box-shadow: 0 2px 8px rgb(var(--zavoj) / .18); display: grid; place-items: center; font-size: var(--t4); color: var(--n700); }

/* ═══════════════ FAQ ═══════════════ */

/* ═══════════════ PRŮVODCE (Jak to funguje) ═══════════════ */

/* ═══════════════ BALÍČKY ═══════════════ */
.pkg { background: var(--plocha); border-radius: var(--r); overflow: hidden; box-shadow: var(--stin-karta); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; }
.pkg:hover { transform: translateY(-3px); box-shadow: var(--stin-karta-hover); }
.pkg-ph { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; aspect-ratio: 16/10; }
.pkg-ph .half { background-size: cover; background-position: center; }
.pkg-tag { position: absolute; left: 12px; top: 12px; }
.pkg-bd { padding: 17px 18px 0; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.pkg-fl { display: flex; align-items: center; gap: 7px; font-size: var(--t1); color: var(--n200); font-weight: var(--w-med); }
.pkg-t { font-size: var(--t5); font-weight: var(--w-med); letter-spacing: -.02em; line-height: 1.25; }
.pkg-d { font-size: var(--t2); color: var(--n700); line-height: 1.5; }
.pkg .facts { margin-top: auto; }
.pkg-foot { border-top: 1px solid var(--n100); margin-top: 16px; padding: 12px 18px; font-size: var(--t1); color: var(--n200); line-height: 1.45; }
.pkg { cursor: default; }
.pkg:hover { transform: none; box-shadow: var(--stin-karta); }


/* ═══════════════ POZNÁMKOVÝ PANEL SEO ═══════════════ */
@media (min-width: 785px) { .seo-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* Drobečková navigace: klikací plocha 24 px podle WCAG 2.5.8. Odsazení dovnitř
   a stejná záporná mezera ven, takže se rozestupy nepohnou ani o pixel. */
.crumb a { display: inline-block; padding-block: 4px; margin-block: -4px; }

/* stránkování prototypu */
/* Prototyp přepínal stránky v jednom souboru. Ve šabloně je
   stránka jedna, takže se nic neskrývá. */

/* ── dvě sekce na stejném podkladu: bez švu, ale ani bez hranice.
   Sečtené paddingy dělaly 208px prázdna, což čte jako chyba, ne jako vzduch. ── */
.sec.joined { padding-top: 0; }
.sec.joined > .wrap { border-top: 1px solid var(--n150); padding-top: 72px; }
@media (min-width: 785px) { .sec.joined > .wrap { padding-top: 100px; } }
.sec.cream.joined > .wrap { border-top-color: var(--s200); }

/* ── odlišení schránkou místo pruhu: bílá karta na krémové ── */
.panel { background: var(--plocha); border: 1px solid var(--s200); border-radius: var(--r-lg);
  padding: 30px 24px; box-shadow: 0 6px 26px rgb(var(--zavoj) / .05); }
@media (min-width: 785px) { .panel { padding: 42px 44px; } }

b, strong { font-weight: var(--w-med); }

/* ── srovnávací tabulka na světlém podkladu ──
   .light = investiční stránka (jiné popisky na mobilu), .panel .cmp = bílá karta na HP */
.cmp.light > div, .panel .cmp > div { border-bottom-color: var(--s200); }
.cmp.light .hd, .panel .cmp .hd { color: var(--n200); border-bottom-color: var(--n150); }
.cmp.light .q, .panel .cmp .q { color: var(--n700); }
.cmp.light .them, .panel .cmp .them { color: var(--n200); }
.cmp.light .us, .panel .cmp .us { color: var(--p600); }
@media (min-width: 785px) {
  .cmp.light .us, .panel .cmp .us { background: var(--s50); }
  .cmp.light .hd.us, .panel .cmp .hd.us { background: var(--p); color: var(--s200); border-bottom-color: var(--p); }
}
@media (max-width: 784px) {
  .panel .cmp .them::before { color: var(--n200); }
  .panel .cmp .us::before { color: var(--p); }
  .cmp.light .them::before { content: "Byt v Praze"; color: var(--n200); }
  .cmp.light .us::before { content: "Podíl u Fragmenta"; color: var(--p); }
}

/* ── bloky rizik na investiční stránce ── */
.risk-grid { display: grid; gap: 14px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.risk { background: var(--tm-plocha-1); border: 1px solid var(--tm-linka-1);
  border-radius: var(--r); padding: 18px 18px 20px; }
.risk .ico { width: 22px; height: 22px; color: var(--s); display: block; }
.risk h3 { font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.02em; color: var(--tm-1); margin-top: 12px; }
.risk p { font-size: var(--t2); line-height: 1.58; color: var(--tm-4); margin-top: 7px; }

/* ═══════════════ VERZE B — nálada ═══════════════
   Tmavá zem a dlaždice jako okna: stojíte ve tmě a díváte se do teplých míst.
   „Ponoření dovnitř“ je fotka, která se přiblíží, a sourozenci, kteří ustoupí. */
.vswitch.on { background: var(--s); border-color: var(--s); color: var(--na-zlate); }
.vswitch:hover { border-color: var(--s); color: var(--tm-1); }
.vswitch.on:hover { color: var(--na-zlate); }

.mood-head nav a:hover { color: var(--tm-1); }
@media (max-width: 900px) {
  /* telefon je v patičce i v CTA, ale navigace nesmí zmizet — jinak se z hero
     obrazovky na mobilu není jak dostat nikam jinam než na detail */
}

.mood-grid { flex: 1; display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(168px, 1fr); }
@media (max-width: 899px) {
  /* na dvou sloupcích se do malé dlaždice dlouhý citát nevejde, aniž by se slepil s místem */
  .mt:not(.big) .qt { font-size: var(--t2); }
  .mt .bd { inset-inline: 12px; bottom: 11px; }
}
@media (min-width: 900px) {
  .mood-grid { grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(2, minmax(150px, 1fr));
    max-height: 60vh; }
  .mt      { grid-column: span 3; }
}
@media (max-width: 899px) { .mt.big { grid-column: span 2; grid-row: span 2; } }

.mt { position: relative; overflow: hidden; border-radius: var(--r-control); display: block;
  text-decoration: none; color: var(--tm-1); isolation: isolate;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease; }
.mt .ph { position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.005); transition: transform 1.1s cubic-bezier(.16,.7,.16,1); }
.mt .vg { position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(var(--zavoj-hluboky) / .86) 0%, rgb(var(--zavoj-hluboky) / .34) 38%, rgb(var(--zavoj-hluboky) / 0) 68%);
  transition: opacity .45s ease; }
.mt .bd { position: absolute; inset-inline: 16px; bottom: 14px; z-index: var(--z-nad-fotkou); display: block; }
.mt .qt { display: block; font-family: var(--serif); font-style: italic; font-size: var(--t4);
  line-height: 1.3; text-wrap: balance; }
.mt .pl { display: block; margin-top: 7px; font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: var(--w-bold); color: var(--tm-5); }
/* Rozbalení jde přes grid-template-rows, ne přes max-height: animace
   rozměru nutí prohlížeč přepočítat layout každý snímek. */
.mt .pr { display: grid; grid-template-rows: 0fr; opacity: 0; color: var(--s);
  font-size: var(--t2); font-weight: var(--w-med);
  transition: grid-template-rows .45s ease, opacity .35s ease; }
.mt .pr > i { overflow: hidden; min-height: 0; }
.mt .pr i { font-style: normal; }

/* ponoření dovnitř: fotka se přiblíží, dlaždice povyskočí, ostatní ustoupí */
.mood-grid:hover .mt { opacity: .42; }
.mood-grid .mt:hover, .mood-grid .mt:focus-visible { opacity: 1; transform: translateY(-3px);
  box-shadow: 0 18px 44px rgb(var(--cerna-rgb) / .55); }
.mt:hover .ph, .mt:focus-visible .ph { transform: scale(1.11); }
.mt:hover .vg, .mt:focus-visible .vg { opacity: .92; }
.mt:hover .pr, .mt:focus-visible .pr { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }
@media (prefers-reduced-motion: reduce) {
  .mt, .mt .ph, .mt .pr { transition: none; }
  .mood-grid:hover .mt { opacity: 1; }
  .mt:hover .ph { transform: none; }
}

.mood-foot a:hover { text-decoration: underline; }

/* ── verze B: celá stránka na jednom tmavém podkladu ── */
[data-page="mood"] .year.on-dark i { background: var(--tm-plocha-2); }
[data-page="mood"] .year.on-dark i.mine { background: var(--s); }
.chip.dk.on { background: var(--s); border-color: var(--s); color: var(--na-zlate); }

/* nabídka: stejná řeč dlaždic, jen větší a s cenou napořád */
.mood-grid.offer { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: auto;
  grid-template-rows: 1fr; margin-top: 28px; }
@media (min-width: 900px) { .mood-grid.offer { grid-template-columns: repeat(3, 1fr); } }
.mood-grid.offer .mt { grid-column: auto !important; grid-row: auto !important; aspect-ratio: 4 / 3.1; }
.mood-grid.offer .mt .qt { font-size: var(--t3); }
.mt .pr.on { grid-template-rows: 1fr; opacity: 1; margin-top: 8px; }

/* ── verze B: ostatní stránky ── */
[data-page^="b-"] .year.on-dark i { background: var(--tm-plocha-2); }
[data-page^="b-"] .year.on-dark i.mine { background: var(--s); }
.mood-head nav a.on { color: var(--s); }

.b-phead .crumb a:hover { color: var(--s); }

/* detail — hero přes celou šířku, jméno v Cormorantu */

.b-gal .g:hover { transform: translateY(-3px); }

@media (min-width: 785px) { .b-facts { grid-template-columns: repeat(3, 1fr); } }

@media (max-width: 784px) { .b-own .arr { transform: rotate(90deg); align-self: flex-start; margin-left: 22px; } }

@media (min-width: 900px) { .b-phases { grid-template-columns: repeat(5, 1fr); } }

/* jak to funguje — kapitoly */

/* FAQ na tmavém — nativní details, žádný skript */
.b-faq summary::-webkit-details-marker { display: none; }

/* příběhy */
@media (min-width: 785px) { .b-story { grid-template-columns: 5fr 7fr; } }

/* ══ VERZE C — světlo vysvětluje, tma cítí ══
   Tři tmavé okamžiky v jinak světlé stránce. Prohlášení má vlastní sekci,
   ne roli nadpisu — jinak se z něj stane jen jiná věta na stejném místě. */
@media (min-width: 900px) { .c-hero { padding: 44px 0 30px !important; } }
@media (min-width: 1040px) { .c-hero-in { grid-template-columns: 5fr 7fr; gap: 44px; } }

/* ── srovnání získává / obětuje ── */
@media (min-width: 785px) { .ab-grid { grid-template-columns: 1fr 1fr; } }
.ab li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px;
  border-radius: 50%; background: currentColor; opacity: .45; }

/* ══════════════════════════════════════════════════════════════════════
   V2 · sloučená verze — přírůstky
   ══════════════════════════════════════════════════════════════════════ */

.d-year { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--s200); }

/* ── stránka Jaké to je ──
   Posílá se v mobilu, otevře se ve zprávě. Proto široké fotky, málo textu
   a jediné měkké CTA úplně dole. */
.jt-hero { position: relative; min-height: 74svh; display: flex; align-items: flex-end;
  background-size: cover; background-position: center; overflow: hidden; }
.jt-hero::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--zavoj-hluboky) / .42) 0%, rgb(var(--zavoj-hluboky) / .12) 42%, rgb(var(--zavoj-hluboky) / .82) 100%); }
.jt-hero .vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jt-hero .in { position: relative; z-index: var(--z-nad-fotkou); padding-bottom: 54px; }
.jt-hero h1 { font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(30px, 5.6vw, 62px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--tm-1); max-width: 20ch; text-wrap: balance; }
.jt-hero p { margin-top: 16px; font-size: var(--t3); line-height: 1.55;
  color: var(--tm-3); max-width: 46ch; }
.jt-lead { font-size: var(--t5); line-height: 1.3; letter-spacing: -.02em;
  color: var(--n900); max-width: 24ch; text-wrap: balance; }
.jt-season { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; margin-top: 28px; }
@media (min-width: 900px) { .jt-season { grid-template-columns: repeat(4, 1fr); } }
.jt-season .s { position: relative; border-radius: var(--r); overflow: hidden;
  background-size: cover; background-position: center; aspect-ratio: 3 / 4; }
.jt-season .s::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--zavoj) / 0) 46%, rgb(var(--zavoj) / .72) 100%); }
.jt-season .cap { position: absolute; inset-inline: 15px; bottom: 14px; z-index: var(--z-nad-fotkou); color: var(--tm-1); }
.jt-season .cap b { display: block; font-size: var(--t1); letter-spacing: .14em;
  text-transform: uppercase; color: var(--s); font-weight: var(--w-bold); }
.jt-season .cap span { display: block; margin-top: 6px; font-family: var(--serif);
  font-style: italic; font-size: var(--t3); line-height: 1.32; }
.jt-weeks { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 24px; }
@media (min-width: 760px) { .jt-weeks { grid-template-columns: repeat(2, 1fr); } }
.jt-weeks li { list-style: none; display: flex; gap: 14px; align-items: baseline;
  padding: 13px 0; border-top: 1px solid var(--s200); }
.jt-weeks .w { flex: none; width: 62px; font-size: var(--t1); letter-spacing: .12em;
  text-transform: uppercase; color: var(--n200); font-weight: var(--w-bold); }
.jt-weeks .t { font-size: var(--t3); color: var(--n900); line-height: 1.42; }
.jt-weeks .t small { display: block; font-size: var(--t2); color: var(--n700); margin-top: 3px; }
.jt-in { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); margin-top: 26px; }
@media (min-width: 900px) { .jt-in { grid-template-columns: repeat(4, 1fr); } }
.jt-in span { border-radius: var(--r-control); overflow: hidden; background-size: cover;
  background-position: center; aspect-ratio: 1; display: block; }
@media (min-width: 900px) { .jt-in span:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } }
.jt-money { border: 1px solid var(--s200); border-radius: var(--r); padding: 22px 24px;
  background: var(--plocha); margin-top: 28px; }
.jt-money .t { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.02em;
  color: var(--n900); line-height: 1.25; max-width: 30ch; }
.jt-money .d { font-size: var(--t2); color: var(--n700); line-height: 1.6; margin-top: 10px; max-width: 72ch; }

/* tři místa v balíčku znamenají tři výřezy, ne dva */
.pkg-ph.three { grid-template-columns: 1fr 1fr 1fr; }

/* ── tabulka ekonomiky (detail nemovitosti i kategorie) ── */
.eco-det { border: 1px solid var(--s200); border-radius: var(--r); background: var(--plocha); }
.eco-det .bd { padding: 0 20px 20px; }
.eco-cols { display: grid; grid-template-columns: 1fr; gap: 6px 34px; }
@media (min-width: 700px) { .eco-cols { grid-template-columns: 1fr 1fr; } }
.eco-cols h3 { font-size: var(--t1); letter-spacing: .12em; text-transform: uppercase;
  color: var(--n200); font-weight: var(--w-bold); margin: 14px 0 2px; }
.eco-rows { display: grid; }
.eco-rows > div { display: flex; justify-content: space-between; gap: 16px;
  padding: 11px 0; border-top: 1px solid var(--s200); font-size: var(--t2); }
.eco-rows .k { color: var(--n700); }
.eco-sum { display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  margin-top: 18px; padding-top: 15px; border-top: 2px solid var(--p); font-size: var(--t3); }
.eco-sum .k { color: var(--n900); font-weight: var(--w-med); }
.eco-sum .v { color: var(--p); font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.eco-sum .v small { display: block; font-size: var(--t1); color: var(--n200);
  font-weight: var(--w-text); text-align: right; margin-top: 2px; }
.eco-rows .v { color: var(--n900); font-weight: var(--w-med); text-align: right;
  font-variant-numeric: tabular-nums; }

/* --- clona pod mega menu -------------------------------------------------
   Sedí pod hlavičkou (z-index 50) a nad obsahem. Klik na ni menu zavře. */
.scrim { position: fixed; inset: 0; z-index: var(--z-lista); background: rgb(var(--zavoj) / .46);
  opacity: 0; transition: opacity .2s ease; }
.scrim.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .scrim { transition: none; } }

/* --- hlavička mizející při scrollu --------------------------------------
   Schovává se posunem, ne změnou position, takže nepřeskakuje obsah. */
.head { transition: transform .26s ease; will-change: transform; }
.head.away { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
  .head { transition: none; }
  .head.away { transform: none; }
}

/* ═══════════════ POHYB ═══════════════
   Směr: usazení, ne příchod. Pomalé doběhy, žádný odraz.
   Výchozí stav je viditelný; skrývá se až pod .motion, kterou nasadí
   JavaScript a jen bez prefers-reduced-motion. Bez JS je vidět všechno. */

:root {
  /* Doběh bez odrazu. Konec je pomalý, jako když se něco dosune na místo. */
  --doben: cubic-bezier(.16, 1, .3, 1);
}

/* ── příjezd hero ──
   Ořez je povinný: fotka dosedá z měřítka 1,045, tedy je po dobu animace
   širší než okno a bez něj vyskočí vodorovný posuvník. */
.motion .hero { overflow: hidden; }
.motion .hero .bg { animation: dosednuti 1.8s var(--doben) both; }
@keyframes dosednuti {
  from { transform: scale(1.045); }
  to   { transform: none; }
}
.motion .hero .in > * { animation: prichod .8s var(--doben) both; }
@keyframes prichod {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.motion .hero .in > :nth-child(1) { animation-delay: .15s; }
.motion .hero .in > :nth-child(2) { animation-delay: .22s; }
.motion .hero .in > :nth-child(3) { animation-delay: .29s; }
.motion .hero .in > :nth-child(4) { animation-delay: .36s; }
.motion .hero .in > :nth-child(5) { animation-delay: .43s; }

/* ── rok se vybarví ──
   Jediná animace, která něco vysvětluje: zlaté dny vznikají uvnitř roku. */
.year i { transition: background-color .5s ease; }
.motion .year.arm:not(.lit) i.mine { background: var(--rok-prazdny); }

/* ── karty se poskládají ── */
.motion .arrive { animation: prichod .7s var(--doben) both;
  animation-delay: calc(var(--i, 0) * 45ms); }

@media (prefers-reduced-motion: reduce) {
  .motion .hero .bg, .motion .hero .in > *, .motion .arrive { animation: none; }
  .year i { transition: none; }
}

/* ═══════════════ DROBNOSTI ═══════════════ */

/* Výběr textu v barvách značky, ne v systémové modré. */
::selection { background: var(--s200); color: var(--p600); }

/* Osamocené slovo na posledním řádku odstavce. */
p, .lead, .aside, .fine, dd { text-wrap: pretty; }

/* Podtržení odkazů uvnitř textu se nemá lepit na dotažnice. */
.lead a, .aside a, .fine a, p a { text-underline-offset: .18em;
  text-decoration-thickness: from-font; }

/* Formulářové prvky v barvě značky a bez modrého bliku při ťuknutí. */
:root { accent-color: var(--p); caret-color: var(--s); }
a, button, .pick, .chip { -webkit-tap-highlight-color: transparent; }

/* Kotva se nesmí schovat pod lepící hlavičkou. */
[id] { scroll-margin-top: 96px; }

/* Tmavé sekce nejsou plochá plocha, ale nasvícený prostor. */
.sec.dark, .sec.ink { position: relative; isolation: isolate; }
.sec.dark::after, .sec.ink::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 80% at 18% 0%, rgb(var(--s-rgb) / .07), transparent 62%); }

/* ═══════════════ TISK ═══════════════
   Nabídku nemovitosti lidé tisknou a posílají v PDF. Bez tohohle by
   z tiskárny vyjelo menu, formulář a bílý text na bílém papíře. */
@media print {
  .util, .head, .drawer, .mega, .scrim, .formcard, .cta-strip,
  .hero-pauza, .hero .vid, .pata-sl, .pata-soc, .foot .bot { display: none !important; }
  body { background: var(--plocha); color: #000; font-size: 11pt; }
  .sec { padding: 14pt 0; break-inside: avoid; }
  .sec.dark, .sec.ink, .hero { background: var(--plocha) !important; color: #000 !important; }
  .sec.dark *, .sec.ink *, .hero * { color: #000 !important; text-shadow: none !important; }
  .sec.dark::after, .sec.ink::after, .hero .bg::after { display: none; }
  .card, .panel, .pkg { break-inside: avoid; border: 1px solid #999; }
  .h2, h1, h2, h3 { break-after: avoid; }
  /* U tištěné stránky je odkaz bez adresy k ničemu. */
  .lead a[href^="http"]::after, p a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ═══════════════ NOVÉ BLOKY Z REŠERŠE ═══════════════ */

/* zástupné hodnoty, které klient musí dodat */
.todo .n { color: var(--s700); }
.ph-logo { display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed var(--s200); border-radius: var(--r-sm); padding: 9px 16px;
  font-size: var(--t1); font-weight: var(--w-med); background: var(--s50); }

/* ── čísla jako doklad ──
   Ne mřížka 4 × 1, kde všechna čísla křičí stejně. Dvě patra: tvrdá čísla
   nesou váhu nahoře, měkká jdou pod linku jako doplněk. Tvrzení vlevo drží
   celou sekci, čísla jsou jeho doklady, ne samostatný obsah. */
.doklad { display: grid; gap: 34px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .doklad { grid-template-columns: .82fr 1.18fr; gap: 60px; } }
.tvrz { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.06; letter-spacing: -.015em; color: var(--p); margin-top: 12px; }
.doklad .aside { margin-top: 16px; }

.velke { display: grid; gap: 26px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .velke { grid-template-columns: 1fr 1fr; gap: 34px; } }
.ci { display: block; }
.ci .v { display: block; font-size: clamp(52px, 8.4vw, 88px); font-weight: var(--w-bold);
  letter-spacing: -.05em; line-height: .92; color: var(--p);
  font-variant-numeric: tabular-nums; }
/* Plus je zkratka pro „a víc“, ne část čísla. Drží se menší a světlejší. */
.ci .v i { font-style: normal; font-size: .42em; color: var(--s700); letter-spacing: 0;
  vertical-align: .5em; margin-left: .04em; }
.ci .p { display: block; margin-top: 12px; font-size: var(--t3); color: var(--n700);
  max-width: 22ch; line-height: 1.4; }

.mala { display: flex; flex-wrap: wrap; gap: 10px 30px; margin-top: 34px; padding-top: 20px;
  border-top: 1px solid var(--s200); }
.mala span { font-size: var(--t3); color: var(--n700); }
.mala b { font-weight: var(--w-bold); color: var(--p); font-variant-numeric: tabular-nums;
  margin-right: .3em; }

/* vysvětlení kategorie — sazba se vzduchem */
.quiet { padding-block: 96px; }
.quiet-h { font-family: var(--serif); font-weight: 400; font-size: clamp(38px, 7vw, 84px);
  line-height: 1; letter-spacing: -.02em; color: var(--p); }
.quiet-in { display: grid; gap: 22px; margin-top: 54px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .quiet-in { grid-template-columns: 1fr 1.3fr; gap: 60px; } }
.quiet-l { color: var(--n200); font-size: var(--t3); }
.quiet-in p { font-size: var(--t4); line-height: 1.62; max-width: 58ch; }
/* Odkaz stojí sám, ne uvnitř věty, takže platí 24px z WCAG 2.5.8.
   Odsazení dovnitř a stejná záporná mezera ven, aby se sazba nepohnula. */
.quiet-a { display: inline-block; margin-top: 26px; padding-block: 4px; margin-bottom: -4px;
  font-size: var(--t3); font-weight: var(--w-med);
  color: var(--p); text-decoration: underline; text-underline-offset: .28em;
  text-decoration-thickness: 1px; }

/* tváře */
.faces { display: grid; gap: 14px; margin-top: 26px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.fc { background: var(--tm-plocha-1); border: 1px solid var(--tm-linka-2);
  border-radius: var(--r); padding: 16px; }
.fc b { display: block; margin-top: 12px; font-size: var(--t3); font-weight: var(--w-med); color: var(--tm-1); }
.fc i { display: block; font-style: normal; font-size: var(--t2); color: var(--tm-4); margin-top: 2px; }
/* Sedí na tmavé kartě, takže zlatá pro světlý podklad (--s700) tu má 1,28 : 1. */
.ph-face { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  width: 68px; border: 1px dashed var(--s); background: rgb(var(--s-rgb) / .12);
  color: var(--s200); font-size: var(--t1); font-weight: var(--w-bold); }
.fc.note { display: flex; align-items: center; font-size: var(--t2);
  color: var(--tm-4); background: none; border-style: dashed; }

/* vybíráme */
.pick3 { display: grid; gap: 16px; margin-top: 20px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.p3 { position: relative; display: block; }
.p3 .ph { display: block; aspect-ratio: 16/11; border-radius: var(--r);
  background: var(--n100) center/cover no-repeat; }
.p3 b { display: block; margin-top: 11px; font-size: var(--t3); font-weight: var(--w-med); }
.p3 i { display: block; font-style: normal; font-size: var(--t2); color: var(--n200); margin-top: 2px; }
.p3 em { display: block; font-style: normal; font-size: var(--t3); font-weight: var(--w-bold); margin-top: 6px; }
.p3 .tag { position: absolute; top: 11px; left: 11px; background: var(--plocha); border-radius: var(--r-pill);
  padding: 5px 11px; font-size: var(--t1); font-weight: var(--w-med); box-shadow: 0 2px 6px rgb(var(--cerna-rgb) / .12); }


/* Logo v patičce je tu <span> s vloženým SVG, ne <img> jako v šabloně. */
.foot .fl svg { height: 30px; width: auto; display: block; }

/* ══ Mapa nemovitostí (Leaflet) — viz _build/s22_mapa.py ══
   Cedulky drží vzhled těch původních SVG. Obal značky je bod bez rozměru,
   protože Leaflet na něj sahá vlastním `transform`; posun na střed proto
   musí být až na cedulce uvnitř. */
.mapwrap .mapa { width: 100%; height: clamp(360px, 46vw, 520px); background: var(--mapa-podklad); }
.mapwrap .leaflet-container { font-family: var(--sans); background: var(--mapa-podklad); }
.mapwrap .leaflet-control-attribution {
  background: var(--plocha-sklo); font-size: 10.5px; color: var(--n200); padding: 2px 7px;
}
.mapwrap .leaflet-control-attribution a { color: var(--p); }
/* Ovládání musí být nad dlaždicemi i nad značkami; Leaflet dává svým
   vrstvám z-index až 700, původních `z-index: 2` by zmizelo pod mapou. */
.mapwrap .map-ctl { z-index: var(--z-mapa); }
.mk-obal { width: 0; height: 0; }
.mk-pil {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  background: var(--plocha); color: var(--n900); border: 1px solid rgb(var(--zavoj) / .14);
  border-radius: var(--r-pill); padding: 6px 12px;
  font-size: var(--t2); font-weight: var(--w-bold);
  box-shadow: 0 2px 6px rgb(var(--zavoj) / .22); cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}
.mk-pil:hover { background: var(--p); border-color: var(--p); color: var(--tm-1); }
.mk-pil.shluk { background: var(--p); border-color: var(--p600); color: var(--tm-1); }
.mk-pil.shluk:hover { background: var(--p600); }
.mk-pil.brzy {
  background: var(--s150); border: 1px dashed var(--s600); color: var(--s700);
  box-shadow: none; font-size: var(--t1); letter-spacing: .1em; text-transform: uppercase;
}
.mk-pil.brzy:hover { background: var(--s200); color: var(--s700); }
.mapwrap .leaflet-popup-content-wrapper { border-radius: var(--r); box-shadow: 0 10px 30px rgb(var(--zavoj) / .2); }
.mapwrap .leaflet-popup-content { margin: 15px 17px; width: auto !important; }
.mp { display: flex; flex-direction: column; gap: 3px; min-width: 190px; }
.mp hr { border: 0; border-top: 1px solid var(--n150); margin: 12px 0 9px; }
.mp .mp-t { font-size: var(--t3); font-weight: var(--w-med); line-height: 1.25; color: var(--n900); }
.mp .mp-m { font-size: var(--t1); color: var(--n200); }
.mp .mp-c { font-size: var(--t4); font-weight: var(--w-bold); color: var(--p); margin-top: 5px; font-variant-numeric: tabular-nums; }
.mp .mp-a { font-size: var(--t2); font-weight: var(--w-med); color: var(--p); margin-top: 7px; }
/* Na mobilu zabírala cedulka „4 nemovitosti" třetinu mapy. */
@media (max-width: 620px) {
  .mk-pil { font-size: var(--t1); padding: 5px 9px; }
  .mk-pil.brzy { font-size: 10.5px; letter-spacing: .08em; }
  .mapwrap .mapa { height: clamp(300px, 74vw, 420px); }
}

/* ══ Míra textu — viz _build/s23_sirka.py ══
   Rám je široký kvůli fotkám, text se s ním roztáhnout nesmí. Hodnoty
   jsou v `ch`, takže drží i po změně velikosti písma. `.fine` smí být
   širší: je to drobné pod obsahem, ne souvislé čtení. */
.lead { max-width: 48ch; }
.aside { max-width: 44ch; }
.fine { max-width: 55ch; }
.prose p, .risk p, .big p, .acc-body p, .sec > .wrap > p,
.two > div > p, .jt-weeks li { max-width: 48ch; }
/* `.quiet-in` je vysvětlení kategorie ve dvou sloupcích — 58ch bylo
   z doby, kdy měl rám 1160 px. */
.quiet-in p { max-width: 48ch; }

/* ══ Cedulka mapy: vlajka + název místa — viz _build/s24_mapa_mista.py ══
   Cedulka byla dřív jedno číslo, teď je to řádek se dvěma prvky. */
.mk-pil { display: inline-flex; align-items: center; gap: 7px; font-weight: var(--w-med); }
.mk-pil .flag { width: 17px; height: 11px; }
/* Verzálky s prostrkáním fungovaly na slovu „brzy". Na názvu místa ne —
   „PASSO DEL TONALE" je o třetinu širší a čte se jako křik. */
.mk-pil.brzy {
  font-size: var(--t2); letter-spacing: 0; text-transform: none;
}
.mk-pil.shluk { font-weight: var(--w-bold); }

/* ══ Pohyb, druhé kolo — viz _build/s25_pohyb2.py ══ */

/* Přechody mezi stránkami. Hlavička a patička mají jméno, takže při
   přechodu stojí a překreslí se jen obsah mezi nimi. Jméno musí být
   v dokumentu jedinečné — obojí je na stránce právě jednou. */
@view-transition { navigation: auto; }
.head { view-transition-name: hlavicka; }
.foot { view-transition-name: pata; }
::view-transition-old(root), ::view-transition-new(root) {
  animation-duration: .34s; animation-timing-function: var(--doben);
}

/* Nájezd fotek: clona shora. Výchozí stav je vidět, animace se pouští
   až třídou, kterou přidá skript — bez JS je mřížka celá vidět. */
@keyframes odkryti {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}
.motion .odkryv {
  animation: odkryti 1.05s var(--doben) both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

/* Drift fotky v kartě. Sedm sekund lineárně je za hranicí, kdy si pohybu
   všimnete; má být cítit, ne vidět. Přechod krytí zůstává, jak byl —
   přepínání čtyř snímků podle polohy myši na něm stojí. */
.card .lay { transition: opacity .42s cubic-bezier(.4,0,.2,1), transform .45s var(--doben); }
.card:hover .lay, .card:focus-within .lay {
  transform: scale(1.05);
  /* Nájezd pomalu, návrat rychle. Přechod platí na obě strany, takže
     bez tohohle by se fotka vracela taky sedm sekund a karta by za
     uživatelem zůstávala rozjetá. */
  transition: opacity .42s cubic-bezier(.4,0,.2,1), transform 7s linear;
}

/* Štítek země a odznak dostupnosti leží nad zónami, které přepínají fotku
   (z-index 7 a 8 proti 6), a ukusovaly z ní horní rohy. Jsou to popisky
   uvnitř odkazu, klikat se na ně nemá — ať pustí myš skrz. */
.card .tl, .card .avail, .card .hint { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .motion .odkryv { animation: none; }
  .card .lay, .card:hover .lay, .card:focus-within .lay { transition: none; transform: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ══ Hover na fotkách v balíčcích a v moodové mřížce — viz _build/s29_hover2.py ══
   Ani jeden blok není odkaz, takže se nezvedá ani nestínuje — hýbe se
   jen fotka uvnitř pevného rámu. Nájezd pomalu, návrat rychle. */
.pkg-ph { overflow: hidden; }
.pkg-ph .half { transition: transform .45s var(--doben); }
.pkg:hover .half, .pkg:focus-within .half {
  transform: scale(1.045);
  transition: transform 3.5s var(--doben);
}

@media (prefers-reduced-motion: reduce) {
  .pkg-ph .half, .pkg:hover .half {
    transition: none; transform: none;
  }
}

/* ══ Formulář poptávky — viz _build/s31_formular.py ══ */
/* `display: contents` tu bylo omylem: `<form>` mřížkou JE, obal navíc
   nevznikl — a to pravidlo mřížku zrušilo. Pole pak měla šířku, kterou
   si `<input>` bere sám od sebe, tedy asi 180 px. */
.formcard .inp { width: 100%; }

/* Plovoucí popisek. V prázdném poli stojí místo placeholderu, po vyplnění
   nebo při fokusu vyjede nahoru — název pole je vidět pořád, i když je
   pole plné. Placeholder v HTML zůstává průhledný, protože se podle
   `:placeholder-shown` pozná, že je pole prázdné. */
.formcard .pole { position: relative; }
.formcard .pole > label {
  position: absolute; left: 15px; top: 13px; z-index: 1;
  font-size: var(--t2); color: var(--tm-3);
  pointer-events: none; transform-origin: left top;
  transition: transform .18s var(--doben), color .18s var(--doben);
}
.formcard .pole .inp { padding: 21px 14px 7px; }
.formcard .pole .inp.ta { padding-top: 24px; min-height: 92px; }
.formcard .pole .inp::placeholder { color: transparent; }
.formcard .pole:has(:focus) > label,
.formcard .pole:has(.inp:not(:placeholder-shown)) > label {
  transform: translateY(-9px) scale(.78);
  color: var(--s200);
  letter-spacing: .08em;
}
.formcard .pole:has(:focus) > label { color: var(--s); }
.formcard .chyba {
  display: none; font-size: var(--t1); color: var(--er-na-tmavem); margin-top: 6px;
}
.formcard .pole-chyba .chyba { display: block; }
.formcard .pole-chyba .inp { border-color: var(--er-linka-na-tmavem); }
.formcard .inp:focus-visible { outline: 2px solid var(--s); outline-offset: 2px; }
.formcard .chip[aria-checked="true"] { background: var(--s); border-color: var(--s); color: var(--na-zlate); }
.formcard .chip { cursor: pointer; }
.formcard .hotovo {
  display: none; flex-direction: column; gap: 10px; padding: 8px 0 4px;
}
.formcard.odeslano .hotovo { display: flex; }
.formcard .hotovo b { font-size: var(--t5); font-weight: var(--w-med); color: var(--tm-1); }
.formcard .hotovo span { color: var(--tm-3); }

/* ══ Příjezd nadpisů a čísel — viz _build/s33_nadpisy.py ══
   Clona zezdola, ne prolnutí: text vyjede zpod linky a plocha přitom
   stojí. Layout se nehne, protože `clip-path` ani `transform` nezabírají
   místo. Všechny cíle jsou blokové prvky — na řádkovém by `clip-path`
   nefungoval. */
@keyframes vyjeti {
  from { clip-path: inset(0 0 100% 0); transform: translateY(11px); }
  to   { clip-path: inset(0 0 0 0); transform: none; }
}
.motion .prijezd {
  animation: vyjeti .72s var(--doben) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
/* Čísla jsou dvě a mají mít mezi sebou znát odstup. */
.motion .ci .v.prijezd {
  animation-duration: .9s;
  animation-delay: calc(var(--i, 0) * 150ms);
}

@media (prefers-reduced-motion: reduce) {
  .motion .prijezd { animation: none; }
}

/* ══ Přechod mezi sekcemi — viz _build/s41_prechod_mys.py ══
   Forma podle fransizarna.cz: popisek nad svislou pilulkou s tečkou.
   `position: absolute` je celý vtip — prvek visí ve spodním okraji sekce
   a z výšky stránky si nebere nic. Předchozí varianta stála 26 px
   dvanáctkrát, ta před ní 130 px dvanáctkrát. */
.sec, .hero { position: relative; }
.prech {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  width: auto; max-width: none; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  text-decoration: none;
}
.prech::before, .prech::after { content: none; }

/* Slovo „Dál“ je v myši nadbytečné — nese ji sám tvar. */
.prech-l { display: none; }
.prech-t { display: contents; }
.prech-n {
  font-family: var(--sans); font-weight: var(--w-med);
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--n200); line-height: 1; white-space: nowrap;
  transition: color .3s var(--doben);
}
.prech:hover .prech-n { color: var(--p); }

/* Myš. Šipka z markupu se schová — uvnitř jezdí tečka. */
.prech-i {
  width: 26px; height: 40px; border-radius: var(--r-pill); flex: 0 0 auto;
  border: 2px solid rgb(var(--p-rgb) / .25); background: rgb(var(--bila-rgb) / .6);
  box-shadow: 0 4px 16px -6px rgb(var(--p-rgb) / .18);
  display: block; position: relative; overflow: hidden;
  transition: border-color .3s var(--doben);
}
.prech-i svg { display: none; }
.prech-i::after {
  content: ""; position: absolute; left: 50%; margin-left: -2px;
  width: 4px; height: 7px; border-radius: var(--r-xs); background: var(--p);
  animation: prech-tecka 2.1s var(--doben) infinite;
}
@keyframes prech-tecka {
  0%       { top: 7px; opacity: 0; }
  22%      { opacity: 1; }
  68%      { opacity: 1; }
  85%, 100%{ top: 24px; opacity: 0; }
}
.prech:hover .prech-i { border-color: rgb(var(--p-rgb) / .5); }

/* Na tmavé sekci se obrací všechno. */
.sec.dark .prech-n, .sec.ink .prech-n { color: var(--tm-4); }
.sec.dark .prech:hover .prech-n { color: var(--tm-1); }
.sec.dark .prech-i, .sec.ink .prech-i {
  border-color: var(--tm-linka-4); background: var(--tm-plocha-2); box-shadow: none;
}
.sec.dark .prech-i::after, .sec.ink .prech-i::after { background: var(--plocha); }
.sec.dark .prech:hover .prech-i { border-color: var(--plocha); }

.prech:focus-visible { outline: 2px solid var(--p); outline-offset: 6px; border-radius: var(--r-sm); }
.sec.dark .prech:focus-visible { outline-color: var(--tm-1); }

@media (max-width: 620px) { .prech { bottom: 20px; } }
@media (prefers-reduced-motion: reduce) {
  .prech-i::after { animation: none; top: 7px; opacity: .55; }
  .prech-n, .prech-i { transition: none; }
}

/* ══ Přechod jen v heru — viz _build/s42_prechod_jen_hero.py ══
   Myš s kolečkem je afordance scrollování: říká „stránka se posouvá“.
   To čtenář potřebuje vědět jednou. Dvanáct opakování mu dvanáctkrát
   opakuje totéž, proto zůstává jediný — v heru.

   Markup ostatních zůstává i s cíli, jen se skrývá. Vrátit je je jeden
   řádek: `.sec .prech { display: flex }`. */
.sec .prech { display: none; }

/* ══ Filtr povahy místa — viz _build/s45_filtr.py ══
   Pilulky byly `<span>` bez posluchače. Teď jsou to tlačítka, takže
   potřebují srovnat font a kurzor — `.chip` počítal s inline prvkem. */
/* Bez `.chiprow` schválně: `button.chip` je (0,1,1), kdežto `.chip.on`,
   `.chip.gold` a `.chip.soon` jsou (0,2,0). Dvě třídy přebijí prvek
   s třídou, takže si každá varianta pilulky uhájí vlastní barvu textu
   a tenhle reset platí jen tam, kde žádná nastavená není.

   Se selektorem `.chiprow button.chip` (0,2,1) vyhrával reset a vybraná
   pilulka měla tmavý text na tmavě zelené — 1,4 : 1. */
button.chip {
  font-family: inherit; font-size: var(--t1); font-weight: var(--w-med);
  color: inherit; cursor: pointer; -webkit-appearance: none; appearance: none;
}
button.chip:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; }
.sec.dark button.chip:focus-visible { outline-color: var(--tm-1); }

/* Skrytí musí přebít `display: flex` z `.card`. */
.grid > .odfiltrovano { display: none !important; }

.filtr-stav {
  font-size: var(--t2); color: var(--n200); margin-top: 12px;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.filtr-stav b { color: var(--n900); font-weight: var(--w-med); }
.filtr-stav button {
  font: inherit; color: var(--p); font-weight: var(--w-med); cursor: pointer;
  background: none; border: 0; padding: 0; text-decoration: underline;
  text-underline-offset: 3px;
}
.sec.dark .filtr-stav { color: var(--p200); }
.sec.dark .filtr-stav b { color: var(--tm-1); }

/* ══ Mezera mezi fotkami balíčku — viz _build/s51_balicky.py ══
   Bylo 2 px, tedy míň než rámeček: dvě země se četly jako jedno
   panorama. Prosvítá bílá karty. */
.pkg-ph { gap: 8px; }

/* Fotka se překresluje do `::before`, protože zvětšit celou půlku nejde
   — `overflow: hidden` na `.pkg-ph` ořezává jen vnější obrys pruhu,
   uvnitř mřížky by půlka přelezla přes mezeru na sousedku. Stejná past
   jako u moodových dlaždic v `s29`. */
.pkg-ph .half { position: relative; overflow: hidden; }
.pkg-ph .half::before {
  content: ""; position: absolute; inset: 0;
  background-image: inherit; background-size: cover; background-position: center;
  transition: transform .45s var(--doben);
}
.pkg:hover .half::before, .pkg:focus-within .half::before {
  transform: scale(1.045);
  transition: transform 3.5s var(--doben);
}
/* Zvětšení z `s29` se musí zrušit — jinak by se hýbaly obě vrstvy
   naráz a měřítka by se vynásobila na 1,09. */
.pkg:hover .half, .pkg:focus-within .half { transform: none; transition: none; }

@media (prefers-reduced-motion: reduce) {
  .pkg-ph .half::before, .pkg:hover .half::before { transition: none; transform: none; }
}

/* ══ Obchodníci v kontaktu — viz _build/s52_obchodnici.py ══
   Jméno i funkce jsou `<span>`, takže se sázely na jeden řádek bez
   mezery: „David PehalCEO“. `line-height` na řádkovém prvku zalomení
   neudělá — obal musí být blok. Vybírá se přes `:not(.av)`, protože
   kolečko s fotkou je jediný druhý přímý potomek. */
.seller > span:not(.av) {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.seller .nm { white-space: nowrap; }
.seller .rl { line-height: 1.2; }
.sellers { gap: 16px 22px; }

/* ══ Patička „Rejstřík“ (s181) ══
   Varianta A z návrhů patičky 15. 9. Sloupce značka / Nemovitosti /
   Jak koupit / Fragmento, pod 700 px skupiny pod sebou a dvě sbalovací
   (tlačítko vzniká v JS). Nahrazuje „Úspornou“ patičku ze s58/s59. */
.foot { background: var(--p); color: var(--tm-3); font-size: var(--t2); }
.pata-in { padding-block: 72px 30px; }
.foot a { color: inherit; text-decoration: none; }
.foot a:hover { color: var(--tm-1); text-decoration: underline; text-underline-offset: 3px; }
.pata-mriz { display: grid; gap: 40px; }

/* ── značka, kontakt, sítě ── */
.pata-znacka p { margin-top: 20px; max-width: 36ch; line-height: 1.55; }
.pata-kont { margin-top: 26px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-style: normal; }
.pata-tel { color: var(--tm-1); font-size: var(--t5); font-weight: var(--w-med); letter-spacing: -.01em; white-space: nowrap; }
.pata-mail { color: var(--tm-2); font-size: var(--t3); }
.pata-soc { margin-top: 24px; display: flex; gap: 10px; list-style: none; }
.pata-soc a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--r-pill);
  border: 1px solid var(--tm-linka-3); color: var(--tm-2); transition: background .16s ease, border-color .16s ease; }
.pata-soc a:hover { background: var(--tm-plocha-2); border-color: var(--tm-linka-4); }
.pata-soc svg { width: 18px; height: 18px; }

/* ── skupiny odkazů ──
   `.foot .pata-nad`: stránka Jaké to je barví `h2` světle a jinou sazbou. */
.foot .pata-nad { font: var(--w-med) var(--t2)/1.4 var(--sans); letter-spacing: 0; color: var(--tm-4); margin: 0 0 18px; }
.foot .pata-nad a { color: inherit; }
.pata-sl ul { display: flex; flex-direction: column; gap: 12px; list-style: none; }
.pata-sl li a { font-size: var(--t3); color: var(--tm-2); }
.foot-zeme ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.foot-zeme li a { display: inline-flex; align-items: center; gap: 10px; }
.foot-zeme .flag { box-shadow: 0 0 0 1px rgb(var(--bila-rgb) / .35); }
.pata-essox { margin-top: 26px; display: flex; align-items: center; gap: 12px; color: var(--tm-3); line-height: 1.35; }
.pata-essox-logo { flex: none; display: grid; place-items: center; background: var(--s50);
  border-radius: var(--r-sm); padding: 6px 9px; }
.pata-essox img { display: block; height: 20px; width: auto; }
.pata-panel[hidden] { display: none; }

/* ── právní údaje ── */
.foot .bot { margin-top: 60px; padding-top: 22px; border-top: 1px solid var(--tm-linka-2);
  display: flex; justify-content: space-between; gap: 10px 40px; flex-wrap: wrap;
  font-size: var(--t1); color: var(--tm-4); }
.bot-firma, .bot-odk { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.bot-odk { column-gap: 22px; }

@media (min-width: 1040px) {
  .pata-mriz { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr); }
}
@media (min-width: 1240px) {
  .pata-mriz { gap: 56px; }
  .foot-zeme ul { column-gap: 24px; }
}
/* Tablet: značka přes celou šířku, kontakt a sítě vpravo, pod ní tři sloupce. */
@media (min-width: 700px) and (max-width: 1039px) {
  .pata-mriz { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 48px 32px; }
  .pata-znacka { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 40px; align-items: start; }
  .pata-znacka .fl { grid-column: 1; grid-row: 1; }
  .pata-znacka p { grid-column: 1; grid-row: 2; }
  .pata-kont { grid-column: 2; grid-row: 1 / 3; margin-top: 0; align-items: flex-end; }
  .pata-soc { grid-column: 2; grid-row: 3; margin-top: 18px; justify-content: flex-end; }
}
/* Dotyk na tabletu: řádky na 44 px, rytmus drží záporný okraj. */
@media (pointer: coarse) and (min-width: 700px) {
  .pata-sl li a, .pata-tel, .pata-mail { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
  .pata-sl ul, .pata-kont { gap: 12px; }
  .pata-soc a { width: 44px; height: 44px; }
}
/* Mobil: skupiny pod sebou oddělené linkou, řádky 44 px, sbalovací tlačítko 58 px. */
@media (max-width: 699px) {
  .pata-in { padding-block: 44px 24px; }
  .pata-mriz { gap: 0; }
  .pata-znacka { padding-bottom: 30px; }
  .pata-znacka p { margin-top: 16px; }
  .pata-kont { margin-top: 18px; gap: 0; }
  .pata-tel, .pata-mail { display: inline-flex; align-items: center; min-height: 44px; }
  .pata-soc { margin-top: 12px; }
  .pata-soc a { width: 44px; height: 44px; }
  .pata-sl { border-top: 1px solid var(--tm-linka-2); }
  .pata-sl:last-child { border-bottom: 1px solid var(--tm-linka-2); }
  .foot .pata-nad { margin: 0; font-size: var(--t4); color: var(--tm-1); }
  .foot .pata-nad > a, .pata-prep { display: flex; align-items: center; justify-content: space-between;
    width: 100%; min-height: 58px; }
  .pata-prep { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
  .pata-prep svg { flex: none; width: 20px; height: 20px; color: var(--tm-4); }
  .pata-prep .svisla { transition: opacity .16s ease; }
  .pata-prep[aria-expanded="true"] .svisla { opacity: 0; }
  .pata-sl ul { gap: 0; }
  .pata-sl li a { display: flex; align-items: center; min-height: 44px; }
  .foot-zeme ul { row-gap: 0; padding-bottom: 14px; }
  .pata-panel { padding-bottom: 14px; }
  .pata-essox { margin-top: 10px; }
  /* Bez horní linky: poslední skupina už končí linkou, dvě by stály nad sebou. */
  .foot .bot { margin-top: 0; padding-top: 26px; border-top: 0;
    flex-direction: column; gap: 10px; line-height: 1.45; }
  .bot-firma { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .pata-soc a, .pata-prep .svisla { transition: none; }
}
/* ══ konec patičky „Rejstřík“ (s181) ══ */

/* ══ Karta nemovitosti — viz _build/s61_karta.py ══
   Dvě na řádek, tělo rozdělené na popis a rozhodnutí, dostupnost jen
   při nedostatku. Vybráno klientem 21. 8. 2026. */

/* Dvousloupcová mřížka jen tam, kde je nabídka hlavní obsah. Mřížky
   s doporučenými nemovitostmi zůstávají trojsloupcové. */
@media (min-width: 1040px) {
  #nabidka .grid, #view-grid .grid { gap: 40px; }
}

/* ══ Osnova na „Jaké to je“ — viz _build/s64_nadpisy.py ══
   Ze štítků sekcí jsou nadpisy, takže potřebují srovnat odsazení:
   `h2` si v prohlížeči nese vlastní `margin`, `.lab` ho nenastavuje.
   Platí pro všechna místa, kde se `.lab` používá. */
.lab { margin: 0; }

/* ── Výpis nemovitostí: výloha, ne e-shop (s68) ───────────────────────
   Filtr přestává vypadat jako formulář. Rámeček kolem šesti položek
   slibuje šest set; zůstává jen linka pod pilulkami. */
.filter { border: 0; background: transparent; padding: 0; box-shadow: none; }
.filter .bar { border-top: 1px solid var(--n150); border-bottom: 0;
  margin-top: 18px; padding-top: 14px; }

/* Pás balíčku pod výpisem. Dlaždice je tatáž jako na homepage, jen stojí
   vedle textu — jedna dlaždice pod nadpisem přes celou šířku vypadá
   jako zbytek po dvou dalších. */
.pkg-pas { margin-top: 56px; border-top: 1px solid var(--n150); padding-top: 40px; }
.pkg-pas .in { display: grid; gap: 30px; grid-template-columns: 1fr; align-items: center; }
/* Textový sloupec se drží na míře čtení. Kdyby dostal `1fr`, byl by
   880 px široký s textem na 400 — a půl pásu by byla prázdná plocha,
   ne mezera. */
@media (min-width: 900px) {
  .pkg-pas .in { grid-template-columns: minmax(320px, 480px) 390px;
    justify-content: space-between; gap: 48px; }
}
.pkg-pas .txt .h2 { font-size: var(--t6); }
.pkg-pas .txt .lead { margin-top: 12px; max-width: 44ch; }
.pkg-pas .txt .btn { margin-top: 20px; }

/* ── Mapa odpovídá (s69) ──────────────────────────────────────────────
   Štítek země je tlačítko, ne popisek. Musí to být poznat dřív, než na
   něj někdo najede — proto ukazovátko a zřetelný stav při najetí. */
.maplegend .it { cursor: pointer; transition: background .18s var(--doben),
  border-color .18s var(--doben), color .18s var(--doben); }
/* Vlajka ani počet neberou kliknutí — jinak je cílem události SVG prvek
   uvnitř tlačítka a hledání štítku se o něj musí opírat. Stejné pravidlo
   platí pro odznaky nad fotkou v kartě, viz README. */
.maplegend .it > * { pointer-events: none; }
.maplegend .it:hover { border-color: var(--p400); background: var(--s50); }
.maplegend .it[aria-pressed="true"] { background: var(--p); border-color: var(--p); color: var(--tm-1); }
.maplegend .it[aria-pressed="true"] b { color: var(--s200); }
.maplegend .it.off { opacity: .62; }
.maplegend .it.off:hover { opacity: 1; }

/* Rozsvícená cedulka. Zlatá, ne tmavá: tmavou má shluk a najetí myší,
   a tohle je třetí, jiný stav — „tahle je ta, na kterou koukáš“. */
.mk-pil.zvyr, .mk-pil.shluk.zvyr {
  background: var(--s); border-color: var(--s600); color: var(--p600);
  box-shadow: 0 0 0 4px rgb(var(--s-rgb) / .34);
}
.mk-pil.brzy.zvyr { background: var(--s200); border-color: var(--s600); color: var(--s700); }
/* Vrstvení nedělá CSS. `:has()` by na to stačilo, ale Leaflet si na
   obal cedulky sahá vlastním `z-index` a přebil by ho — pořadí se proto
   nastavuje jeho vlastním `setZIndexOffset` v `mapa.js`. */

/* Druhý směr: cedulka svítí, karta v panelu se přihlásí taky. */
.mini.zvyr { outline: 2px solid var(--s600); outline-offset: -2px; }

@media (prefers-reduced-motion: reduce) {
  .maplegend .it { transition: none; }
}

/* ── Hero přes celou obrazovku (s70) ──────────────────────────────────
   `100svh`, ne `100vh`: na mobilu se lišta prohlížeče schovává a `vh`
   počítá i s ní, takže by hero přetekl přesně o její výšku. */
[data-page="home"] .hero .bg { min-height: 100svh; padding-top: 112px; }

/* Hlavička i horní lišta leží na videu. **Nedělá se to `fixed`** — dvě
   lišty na `top: 0` se položí přes sebe a logo zmizí pod telefonním
   číslem. Zůstávají v toku a hero se pod ně vytáhne záporným okrajem. */
[data-page="home"] .util, [data-page="home"] .head {
  background: transparent; border-bottom: 0; position: relative; z-index: var(--z-nad-videem); }
[data-page="home"] .hero { margin-top: -112px; }

/* Clona pod oběma lištami. Musí sahat přes celý pruh, ne jen přes
   hlavičku: horní lišta bez ní měla na některých snímcích videa 4,29 : 1. */
[data-page="home"] .hero::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px;
  z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom,
    rgb(var(--zavoj-hluboky) / .78) 0, rgb(var(--zavoj-hluboky) / .55) 64px,
    rgb(var(--zavoj-hluboky) / .22) 124px, rgb(var(--zavoj-hluboky) / 0) 100%);
}

[data-page="home"] .util, [data-page="home"] .util a { color: var(--tm-1); }
[data-page="home"] .util b { color: var(--tm-1); }
[data-page="home"] .head nav > a, [data-page="home"] .head .foot-tel { color: var(--tm-1); }
[data-page="home"] .head nav > a::after { background: var(--s); }
/* Text na pohyblivém obraze potřebuje víc než jen poměr — stín drží tvar
   písmen i ve chvíli, kdy pod nimi zrovna projede světlé místo. */
[data-page="home"] .util span, [data-page="home"] .util a,
[data-page="home"] .head nav > a, [data-page="home"] .head .foot-tel {
  text-shadow: 0 1px 8px rgb(var(--zavoj-hluboky) / .75); }

/* Po odscrollování se hlavička vrací na bílou — nad krémem by bílý text
   zmizel. Logo se přepíná v JS, `src` obrázku CSS nezmění. */
[data-page="home"] .head.pevna { background: var(--plocha); border-bottom: 1px solid var(--n100); position: sticky; top: 0; }
[data-page="home"] .head.pevna nav > a { color: var(--p); }
[data-page="home"] .head.pevna .foot-tel { color: var(--n900); }
[data-page="home"] .head.pevna nav > a,
[data-page="home"] .head.pevna .foot-tel { text-shadow: none; }

/* Claim dýchá. Odznak z první obrazovky pryč; druhé tlačítko vrátil s183. */
[data-page="home"] .hero h1 { font-size: clamp(44px, 8.4vw, 92px); }
[data-page="home"] .hero .sub { max-width: 40ch; }
[data-page="home"] .hero .badge { display: none; }
[data-page="home"] .hero .proof { display: none; }

/* Vysvětlující pruh pod hero. Klient si ho výslovně přál zachovat. */
.pod-hero { background: var(--p600); color: var(--tm-1);
  border-top: 1px solid rgb(var(--s-rgb) / .28); }
.pod-hero .wrap { display: flex; flex-wrap: wrap; gap: 14px 40px;
  align-items: center; padding-block: 18px; }
.pod-hero span { display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--t2); color: var(--tm-2); }
.pod-hero b { color: var(--tm-1); font-weight: var(--w-med); }
.pod-hero svg { width: 18px; height: 18px; color: var(--s); flex: 0 0 auto; }

/* ── Výpis: nemovitosti hned (s71) ────────────────────────────────────
   Nad nemovitostmi nemá být nic než filtr. Hlavička na jeden řádek,
   vysvětlující odstavec se stěhuje pod výpis. */
[data-page="nemovitosti"] .sec.tight:first-of-type { padding-top: 0; }

/* Filtr je lepivý pruh, ne formulář. */
.filter { position: sticky; top: 0; z-index: var(--z-filtr); background: var(--s50);
  padding: 12px 0 10px; border-bottom: 1px solid var(--n150); }
.filter .bar { border-top: 0; margin-top: 10px; padding-top: 0; }
/* `.chiprow` je v sazbě pružná řada — patra by se v ní srovnala
   vedle sebe a „Další filtry“ by skončily na konci řádku Lokace. */
.chiprow[data-filtr2] { display: block; }
.f-rada { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.f-rada + .f-rada { margin-top: 9px; }
.f-lb { font-size: var(--t1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--n200); font-weight: var(--w-bold); flex: 0 0 auto;
  min-width: 92px; }
@media (max-width: 640px) { .f-lb { min-width: 0; flex-basis: 100%; margin-bottom: 2px; } }

/* Druhé patro se vysouvá. `hidden` místo `display: none` v sazbě, ať to
   funguje i bez JS — kdo ho nemá, vidí obě patra rozbalená. */
.f-vic { margin-top: 10px; }
.f-vic[hidden] { display: none; }
.f-prep { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: var(--t2); font-weight: var(--w-med); color: var(--p);
  background: none; border: 0; padding: 0; cursor: pointer; }
.f-prep .ar { transition: transform .3s var(--doben); font-size: .9em; }
.f-prep[aria-expanded="true"] .ar { transform: rotate(180deg); }
.f-prep:hover { color: var(--p600); }
.chip.skryta { display: none; }

/* Mřížka od kraje ke kraji. Výpis není článek. */
.wrapfull { max-width: none; margin: 0; padding-inline: 22px; }

/* Vysvětlení pod výpisem. */
.vysvetleni { border-top: 1px solid var(--n150); margin-top: 46px; padding-top: 26px; }
.vysvetleni p { max-width: 62ch; color: var(--n700); font-size: var(--t3); margin: 0; }

/* ── Pás důkazů na videu a lepivá hlavička (s72) ──────────────────────
   Pás sedí na spodní hraně hera, ne pod ním. Průsvitný, aby bylo vidět,
   že pod ním video pokračuje — plná barva by z něj udělala další sekci. */
[data-page="home"] .pod-hero {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  background: linear-gradient(to top, rgb(var(--zavoj-hluboky) / .86), rgb(var(--zavoj-hluboky) / .52));
  border-top: 1px solid rgb(var(--s-rgb) / .3); backdrop-filter: blur(3px);
}
[data-page="home"] .pod-hero .wrap { padding-block: 13px; gap: 10px 34px; }
[data-page="home"] .pod-hero span { font-size: var(--t1); }
/* Na mobilu **nesmí** být `position: static`. `.bg` je pružný kontejner,
   takže by se z pásu stala další položka řádku vedle textu a hero by
   přeteklo o 96 px doprava. Zůstává absolutní, jen s plnou barvou —
   průsvitný pruh je na malé obrazovce nečitelný. */
@media (max-width: 900px) {
  [data-page="home"] .pod-hero { backdrop-filter: none; background: var(--p600); }
  [data-page="home"] .pod-hero .wrap { padding-block: 11px; gap: 6px 20px; }
  /* Vycentrovaný obsah hera nesmí končit pod pásem. */
  [data-page="home"] .hero .bg { padding-bottom: 96px; }
}

/* Hlavička je přilepená pořád; mění se jen to, jak vypadá. Přechod
   drží barvu textu i podklad, ať se to nepřeklopí skokem. */
[data-page="home"] .head {
  position: sticky; top: 0;
  transition: background-color .35s var(--doben), border-color .35s var(--doben);
}
[data-page="home"] .head nav > a, [data-page="home"] .head .foot-tel {
  transition: color .35s var(--doben);
}
/* Dokud je hero na obrazovce, hlavička se neschovává — je to jediná
   navigace přes celou obrazovku videa. */
[data-page="home"] .head.u-hera.away { transform: none; }

/* ── Rám přes celý web (s73) ──────────────────────────────────────────
   Výpis dostal v `s71` vlastní obal mimo rám. Když je rám sám široký,
   trčel by ven ještě víc — chová se proto jako `.wrap`. Zásah do sazby,
   ne do markupu, aby šel `s71` pustit znovu beze změny. */
.wrapfull { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--pad); }

/* Strop čtení se schválně **nepřidává**. Změřeno počtem znaků na skutečný
   řádek (délka textu / počet obdélníků z `Range`, ne odhad z velikosti
   písma): při rámu 1320 i při 1720 vychází **stejných šest odstavců nad
   75 znaků a nejširší má 83**. Roztažení rámu čtecí šířku nemění, protože
   text sedí v užších sloupcích, ne v rámu. Ty tři odstavce jsou nález
   nezávislý na tomhle kroku — viz README.

   Mimochodem: `ch` není znak. 68ch vyšlo na 83 skutečných znaků, protože
   `ch` je šířka nuly a česká sazba má znaky užší. Kdo bude míru nastavovat,
   ať ji **měří**, ne odhaduje z `ch`. */

/* ── Pás na svém místě a hlavička, která bělá hned (s74) ──────────────
   `s70` pás schoval, `s72` z něj udělal pruh na videu. Obojí pryč —
   `.proof` je zpátky ve sloupci s claimem a sazba na něj v `style.css`
   pořád je. */
[data-page="home"] .hero .proof { display: flex; }
[data-page="home"] .pod-hero { display: none; }

/* Obě loga nad sebou, přelínají se krytím. Výměna `src` je okamžitá
   a uprostřed plynulého přechodu pozadí je to vidět. */
.head .logo { position: relative; display: inline-flex; }
.logo-svetle { position: absolute; left: 0; top: 0; opacity: 0;
  pointer-events: none; transition: opacity .35s var(--doben); }
[data-page="home"] .head:not(.pevna) .logo-svetle { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .logo-svetle { transition: none; } }

/* ── Doladění výpisu (s75) ────────────────────────────────────────────
   1. Zubatý řádek. `align-items: start` z `s68` platil pro dvě velké
   karty; u tří menších dělá rozdíl 43 px mezi kartou s odznakem
   vzácnosti a kartou bez něj. */
.grid[data-mrizka] { align-items: stretch; }
#view-grid .card { height: 100%; }

/* 2. Pás balíčku se jen stahuje. Vypadal, že má pod textem 250 px díru,
   ale to byl klam z uříznutého snímku — text je proti dlaždici
   vycentrovaný už od `s68` a vzduch je nad ním i pod ním stejný.
   Zůstává tedy jen menší svislé odsazení. */
.pkg-pas { margin-top: 44px; padding-top: 34px; }

/* 3. Vysvětlení pod výpisem stálo 30 px nad krémovou sekcí a vypadalo,
   že k ní patří. */
.vysvetleni { margin-top: 54px; padding-top: 30px; padding-bottom: 46px; }

/* 4. Linka pod lištou počtu končila v prázdnu vpravo od přepínače —
   uzavírá teď celý blok filtru, ne jen text. */
.filter .bar { border-bottom: 0; padding-bottom: 2px; }

/* ── Karta na výpisu je stejná jako na homepage (s77) ─────────────────
   Sloupce se schválně **nepřepisují**: platí společné pravidlo
   `#nabidka .grid, #view-grid .grid`. Šířky tím sedí z definice a nedá
   se to rozejít, aniž by se rozešly obě stránky naráz.

   Zůstává jen odsazení mřížky od filtru a mezera srovnaná na hodnotu,
   kterou má homepage. */
#view-grid { margin-top: 26px; }
.grid[data-mrizka] { gap: 40px; align-items: stretch; }

/* ── Sloupce: homepage tři, výpis čtyři (s78) ─────────────────────────
   Karta je pořád tatáž (viz `s77`), liší se jen šířka sloupce.
   Schodiště je společné až do tří sloupců; čtvrtý má jen výpis a až od
   1400 px okna — pod tím by karta vyšla pod 300 px a odznak vzácnosti
   („Zbývají 2 z 8 podílů“ i s osmi čtverečky, kolem 230 px) by se
   zalomil na dva řádky. */
#nabidka .grid, #view-grid .grid { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  #nabidka .grid, #view-grid .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1040px) {
  #nabidka .grid, #view-grid .grid { grid-template-columns: repeat(3, 1fr); }
}
/* Čtvrtý sloupec až od 1520 px okna. Rám je `min(94vw, 1720px)`, takže
   při 1440 vyjde karta na 268 px — a odznak „Zbývá poslední podíl“ i s osmi
   čtverečky měří 259 px, takže z karty vyleze o 34. Spočítáno zpátky:
   (0,94 × šířka − 80 − 3 × 40) / 4 ≥ 300 vychází na 1490 px, 1520 nechá
   rezervu. */
@media (min-width: 1520px) {
  #view-grid .grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Balíčky, filtr a panel u mapy (s85) ──────────────────────────────
   1. Pás balíčku na tmavém, přes celou šířku. Balíček není nemovitost,
   takže nemá stát na témže podkladu jako výpis. Záporný okraj vytáhne
   pruh z rámu ke krajům okna, obsah uvnitř zůstává v rámu. */
.pkg-pas {
  margin: 64px calc(50% - 50vw) 0; padding: 52px calc(50vw - 50%);
  background: var(--p); border-top: 0; color: var(--tm-1);
}
.pkg-pas .lab { color: var(--s200); }
.pkg-pas .txt .h2 { color: var(--tm-1); }
.pkg-pas .txt .lead { color: var(--tm-3); }
.pkg-pas .btn.ghost { border-color: var(--p400); color: var(--tm-1); }
.pkg-pas .btn.ghost:hover { border-color: var(--s); background: var(--tm-plocha-1); }

/* Bílá barva z pruhu se dědí do dlaždice, která je světlá — nadpis
   i cena v ní zmizely. Dlaždice si proto barvu vrací; je to samostatná
   karta a s podkladem pruhu nemá nic společného. */
.pkg-pas .pkg { color: var(--n900); }
.pkg-pas .pkg .pkg-d { color: var(--n700); }
.pkg-pas .pkg .pkg-foot { color: var(--n200); }

/* Text a dlaždice k sobě. Na širokém rámu mezi nimi zbývalo přes 700 px
   a pás se četl jako dvě nesouvisející věci. */
@media (min-width: 900px) {
  .pkg-pas .in { grid-template-columns: minmax(320px, 440px) 390px;
    justify-content: start; gap: 72px; }
}

/* 2. Filtr se neleepí. Šest nemovitostí lepivou lištu nepotřebuje
   a na výšku obrazovky ubírá pořád. */
.filter { position: static; }

/* 3. Panel u mapy: dosahuje výšky mapy a fotka dostane víc místa —
   u mapy je to to jediné, podle čeho se místo pozná na první pohled. */
@media (min-width: 900px) {
  .maplayout .pane-list { max-height: none; }
  /* Mapa se drží při scrollování, panel se pod ní posouvá. `align-self:
     start` je nutné — bez něj se roztáhne na výšku delšího sloupce
     a `sticky` nemá kam přilepit. */
  .maplayout .pane-map { align-self: start; }
  .maplayout .mapwrap, .maplayout .mapa { height: min(640px, calc(100svh - 160px)); }
}
.mini { grid-template-columns: 168px 1fr; gap: 16px; margin-bottom: 14px; }
.mini .ph { aspect-ratio: 1; }
.mini .ttl { font-size: var(--t3); }
.mini .bd { padding-block: 14px; gap: 5px; }
@media (max-width: 560px) { .mini { grid-template-columns: 116px 1fr; gap: 12px; } }

/* ── Mega menu nad hero (s86) ─────────────────────────────────────────
   Po dobu otevření se obě lišty vrátí do podoby, kterou mají na zbytku
   webu. Panel pak nestojí na videu, ale na hlavičce, a horní pruh ho
   podepře až k hraně okna. Selektor je složený (`[data-page].trida`),
   protože horní lišta leží **před** hlavičkou a na předchozího
   sourozence se v sazbě ukázat nedá — třída musí sedět na `<body>`. */
[data-page="home"].mega-otevreno .util { background: var(--p600); }
[data-page="home"].mega-otevreno .head {
  background: var(--plocha); border-bottom: 1px solid var(--n100); }
[data-page="home"].mega-otevreno .head nav > a { color: var(--p); }
[data-page="home"].mega-otevreno .head .foot-tel { color: var(--n900); }
/* Stín pod písmeny drží tvar na videu; na bílé z něj je špína. */
[data-page="home"].mega-otevreno .head nav > a,
[data-page="home"].mega-otevreno .head .foot-tel,
[data-page="home"].mega-otevreno .util span,
[data-page="home"].mega-otevreno .util a { text-shadow: none; }
/* Světlé logo se v `s74` zapíná přes `:not(.pevna)`, což je stejná váha
   jako selektor výše — proto se sem píše zvlášť a s toutéž vahou; rozhodne
   pořadí. Kdyby se přidávalo do původního pravidla, přestal by jít `s74`
   pustit znovu beze změny. */
[data-page="home"].mega-otevreno .head .logo-svetle { opacity: 0; }
/* Horní lišta na domovské stránce podklad doteď neměnila, takže na něj
   neměla ani přechod. Bez něj by zelená naskočila skokem proti hlavičce,
   která se přelíná. */
[data-page="home"] .util { transition: background-color .35s var(--doben); }

/* Panel se přelíná stejně dlouho jako podklad lišty. `allow-discrete`
   a `@starting-style` jsou nutné: bez nich prohlížeč nemá výchozí stav
   a z `display: none` neanimuje vůbec. Kde chybí, panel naskočí — tedy
   jako doteď. */
.mega { opacity: 0;
  transition: opacity .35s var(--doben), display .35s var(--doben) allow-discrete; }
.mega.open { opacity: 1; }
@starting-style { .mega.open { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mega { transition: none; }
}

/* ── Hlava výpisu (s88) ───────────────────────────────────────────────
   1. Jeden panel místo dvou slepených pruhů. Hlava stránky stála na
   `--s150`, filtr hned pod ní na `--s50` — dva skoro stejné krémy bez
   mezery mezi nimi nečtou jako dvě sekce, ale jako šev. Filtr přebírá
   odstín hlavy; hranu panelu kreslí až přechod do bílé, takže vlastní
   linka je navíc. */
[data-page="nemovitosti"] .filter {
  background: var(--s150); border-bottom: 0; padding: 0;
  /* Podklad musí ke krajům okna, jinak krém hlavy pokračuje jen v rámu
     a po stranách zůstane bílé schodiště. **Schválně ne přes `100vw`**:
     ta se počítá včetně místa pro posuvník, kdežto `100 %` bez něj, takže
     tam, kde má posuvník vlastní šířku (Windows), přeteče blok o jeho
     šířku do strany. Stín ani ořez do sazby nezasahují — stín vyplní
     strany, ořez ho svisle zavře na hranu bloku. Doměřit se to tady nedá:
     macOS kreslí posuvník přes obsah a nulovou šířkou. */
  box-shadow: 0 0 0 100vmax var(--s150); clip-path: inset(0 -100vmax);
}

/* 2. Vzduch. Nic v hlavě nemělo od souseda víc než 12 px. */
[data-page="nemovitosti"] .f-rada + .f-rada { margin-top: 16px; }
[data-page="nemovitosti"] .f-prep { margin-top: 20px; }
/* Lišta s počtem je výsledek, ne filtr. Odděluje se vlastní linkou
   a dýchá pod ní, aby panel nekončil natěsno nad kartami. */
[data-page="nemovitosti"] .filter .bar {
  margin-top: 24px; padding: 14px 0 20px; border-top: 1px solid var(--s200);
}

/* 3. Verzálky patří popiskům, ne obsahu. Dvanáct pilulek velkými písmeny
   pod dvěma popisky velkými písmeny mluví celé jedním hlasem a nedá se
   v tom najít začátek. Pilulky je ztrácejí — a získávají tím i velké
   písmeno u vlastních jmen, které verzálky zahazují („KOSTARIKA“ ×
   „Kostarika“). Zůstává jen v popiscích. */
[data-page="nemovitosti"] .f-rada .chip {
  text-transform: none; letter-spacing: 0; font-size: var(--t2);
  padding: 7px 14px;
}

/* 4. Kolejnice přepínače stála na `--n100`, tedy na studené šedi. Na bílé
   splývala, na krému je z ní šedá záplata. Dostává průsvitný nádech
   podnikové zelené — stejný postup jako `.util .pill`. Zlatá `--s200` by
   se v tom rohu četla jako tlačítko, a přepnutí pohledu není výzva k akci.
   Bílá pilulka aktivního stavu zůstává. */
[data-page="nemovitosti"] .filter .toggle { background: rgb(var(--p-rgb) / .09); }

/* ── Konec výpisu (s89) ───────────────────────────────────────────────
   1. Pás balíčků ukazuje tři sestavy jako homepage. Text se roztahuje
   přes všechny sloupce a dlaždice se řadí pod něj; `s85` je stavěl
   vedle sebe, protože dlaždice byla jedna. */
.pkg-pas .in { grid-template-columns: 1fr; gap: 24px; align-items: start; }
.pkg-pas .txt { grid-column: 1 / -1; margin-bottom: 6px; }
@media (min-width: 620px) { .pkg-pas .in { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1040px) { .pkg-pas .in { grid-template-columns: repeat(3, 1fr); } }

/* Nadpis vlevo, tlačítko vpravo dole — stejná skladba jako `.sec-head`
   na homepage. Dělá se to mřížkou nad plochými značkami, aby se kvůli
   tomu nemusel na jedenácti stránkách přidávat obalový prvek. */
@media (min-width: 900px) {
  .pkg-pas .txt { display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: end; column-gap: 30px; }
  .pkg-pas .txt > .lab, .pkg-pas .txt > .h2, .pkg-pas .txt > .lead { grid-column: 1; }
  .pkg-pas .txt > .btn { grid-column: 2; grid-row: 1 / -1;
    align-self: end; justify-self: end; margin-top: 0; }
}
.pkg-pas .txt .lead { max-width: 52ch; }

/* 4. Doklad o firmě a dva ohlasy. Karta ohlasu je bílá na bílé sekci —
   drží ji jen stín, tak dostává i vlásek. Na homepage stojí na tmavém
   a tenhle problém tam nemá. */
/* Odsazení si schválně **nepřepisuje**: web má po tmavé sekci všude
   plných 128 px (`#jake-to-tam-je` → `#co-to-stoji` na homepage) a menší
   hodnota tady vypadala vyváženě jen proto, že jsem zmenšil horní okraj
   a spodní nechal. Rytmus sekcí je jeden pro celý web. */
.duvera .hlasy { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 785px) { .duvera .hlasy { grid-template-columns: 1fr 1fr; } }
.duvera .story { border: 1px solid var(--n100); }

/* ── Prázdný pruh pod pásem balíčků (s90) ─────────────────────────────
   Pás sahá přes celou šířku okna a je poslední v sekci; její spodní
   odsazení pod ním zůstávalo jako krémový proužek, ve kterém nic není.

   Ruší se **jen v pohledu na mřížku**: pás leží uvnitř `#view-grid`,
   takže na mapě zmizí a poslední věcí je `#view-map` — tam to odsazení
   potřeba je, jinak mapa dosedne na další sekci. */
[data-page="nemovitosti"] .sec.tight:first-of-type:has(#view-grid:not([hidden])) {
  padding-bottom: 0;
}

/* ── Stránka poptávky (s91) ───────────────────────────────────────────
   Průvodce sedí ve stávající `.formcard`, takže plovoucí popisky, hlášky
   chyb i potvrzení po odeslání jsou hotové. Přibývá jen to, co karta
   neuměla: ukazatel kroků, dlaždicová volba a shrnutí. */

/* Ukazatel kroků. Sedí uvnitř karty, aby po odeslání zmizel s ní. */
.kroky { display: flex; gap: 8px 26px; flex-wrap: wrap; list-style: none; padding: 0;
  margin: 0 0 13px; font-size: var(--t2); color: var(--tm-4); }   /* .6 bylo 4,41 : 1 (s164) */
.kroky li { display: inline-flex; align-items: center; gap: 9px; font-weight: var(--w-med); }
.kroky .ci { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tm-plocha-2); color: var(--tm-3);
  font-size: var(--t1); font-weight: var(--w-bold); }
.kroky li.je { color: var(--tm-1); }
.kroky li.je .ci { background: var(--s); color: var(--na-zlate); }
.kroky li.splneno .ci { background: rgb(var(--s-rgb) / .4); color: var(--tm-1); }
.kroky li.preskoceno { text-decoration: line-through; }
.prubeh { height: 3px; border-radius: var(--r-xs); background: var(--tm-plocha-2);
  overflow: hidden; margin-bottom: 26px; }
.prubeh i { display: block; height: 100%; background: var(--s);
  transition: width .35s var(--doben); }
@media (prefers-reduced-motion: reduce) { .prubeh i { transition: none; } }

.krok { border: 0; padding: 0; margin: 0; min-width: 0; }
.krok[hidden] { display: none; }
.krok .ot { font-size: var(--t6); font-weight: var(--w-med); letter-spacing: -.028em; color: var(--tm-1); }
.krok .podot { font-size: var(--t2); color: var(--tm-4); margin: 6px 0 22px; }
.formcard .lbl.odsad { margin-top: 26px; display: block; }
.formcard .chiprow { margin-top: 10px; }
.formcard .chip { text-transform: none; letter-spacing: 0; font-size: var(--t2);
  padding: 8px 14px; cursor: pointer; }
.formcard .chip[aria-pressed="true"] { background: var(--s); border-color: var(--s); color: var(--na-zlate); }

/* Dlaždicová volba: název a pod ním, co ta volba znamená. Na otázky,
   kde pilulka bez vysvětlení nestačí („88 dní“ × „podíl 1/4“). */
.volby { display: grid; gap: 10px; grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 620px) { .volby { grid-template-columns: repeat(4, 1fr); } }
.volba { text-align: left; background: var(--tm-plocha-1);
  border: 1px solid var(--tm-linka-3); border-radius: var(--r); padding: 13px 15px;
  cursor: pointer; display: grid; gap: 4px; color: var(--tm-1);
  transition: background .16s ease, border-color .16s ease; }
.volba b { font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.02em; }
.volba i { font-style: normal; font-size: var(--t1); color: var(--tm-4); line-height: 1.4; }
.volba:hover { border-color: var(--tm-linka-4); }
.volba[aria-pressed="true"] { background: var(--s); border-color: var(--s); color: var(--na-zlate); }
.volba[aria-pressed="true"] i { color: rgb(var(--na-zlate-rgb) / .72); }

.rekap { background: var(--tm-plocha-2); border: 1px solid var(--tm-linka-2);
  border-radius: var(--r-control); padding: 14px 16px; margin-bottom: 22px;
  font-size: var(--t2); color: var(--tm-3); line-height: 1.6; }
.rekap b { color: var(--s); font-weight: var(--w-bold); }

/* `.btn` má `display: inline-flex`, což přebije výchozí chování
   `[hidden]` — bez tohohle svítí „Zpět“ i „Odeslat“ hned v prvním kroku. */
.navigace .btn[hidden] { display: none; }
.navigace { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.navigace .sp { flex: 1; min-width: 0; }
.poradit { background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  font-size: var(--t2); color: var(--s); text-decoration: underline;
  text-underline-offset: 3px; text-align: left; }
.poradit:hover { color: var(--tm-1); }
.krok .poradit { margin-top: 22px; }



/* ── Podtržení aktivní položky (s92) ──────────────────────────────────
   Čárka se kreslila z odkazu dolů pevnou hodnotou `bottom: -21px`.
   Odkaz končí na 95 px, hlavička na 112 — čárka tedy vycházela o 5 px
   **pod** spodní hranu hlavičky a visela v pruhu pod ní.

   Pevné číslo mizí: položky se natáhnou na celou výšku hlavičky, takže
   spodní hrana odkazu je spodní hrana hlavičky a čárce stačí `bottom: 0`.
   Až se výška hlavičky změní, čárka půjde s ní.

   `.head > .wrap` má `align-items: center`; `align-self` to přebíjí jen
   pro navigaci, ostatní položky lišty zůstávají vystředěné. */
.head > .wrap > .nav { align-self: stretch; }
.nav [aria-current="page"]::after { bottom: 0; }

/* ── Jak to funguje: otázky místo kapitol (s93) ─────────────────────── */

/* Shrnutí nad kapitolami: odpověď na třicet vteřin pro toho, kdo dál
   číst nechce. */
.shrnuti { background: var(--p); color: var(--tm-1); padding: 44px 0; }
.sh-karty { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 785px) { .sh-karty { grid-template-columns: repeat(3, 1fr); gap: 26px; } }
.sh { display: grid; gap: 8px; align-content: start; }
.sh .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tm-plocha-2); color: var(--s); margin-bottom: 4px; }
.sh .ic svg { width: 20px; height: 20px; }
.sh b { font-size: var(--t5); font-weight: var(--w-med); letter-spacing: -.024em; }
.sh i { font-style: normal; font-size: var(--t2); color: var(--tm-3); line-height: 1.5; }
.sh-pod { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--tm-linka-2);
  font-size: var(--t3); color: var(--tm-3); }

/* Otázka je nadpis, odpověď stojí hned pod ní. */
.otazka { font-size: clamp(25px, 3.1vw, 38px); font-weight: var(--w-med);
  letter-spacing: -.03em; line-height: 1.2; color: var(--n900); max-width: 20ch; }
.odpoved { font-size: var(--t4); line-height: 1.6; color: var(--n700);
  margin-top: 14px; max-width: 62ch; }
.odpoved b, .odpoved strong { color: var(--n900); }


/* Podrobnosti pod odpovědí. `<details>` proto, že to funguje i bez
   JavaScriptu a prohlížeč v tom umí hledat. */
.vic { border: 0; background: none; margin-top: 10px; }
.vic > summary { list-style: none; cursor: pointer; padding: 10px 0;
  font-size: var(--t2); color: var(--p); text-decoration: underline;
  text-underline-offset: 3px; width: fit-content; }
.vic > summary::-webkit-details-marker { display: none; }
.vic > summary:hover { color: var(--p600); }
.vic .telo > *:first-child { margin-top: 0; }



/* ── Galerie na detailu (s97) ─────────────────────────────────────────
   Dlaždice jsou tlačítka, ne obrázky na pozadí `<div>`u — jinak se do
   nich nedá dostat klávesnicí. */
/* `.gal` musí být pozicovaná, jinak se pilulka „Zobrazit N fotek“
   neváže na galerii, ale na stránku, a odletí pod ni. */
.gal { position: relative; }
.gal > button:not(.vic-fotek) { border: 0; padding: 0; cursor: zoom-in;
  position: relative; background-size: cover; background-position: center;
  min-height: 220px; }
/* Velkou dlaždici přes dvě řady drželo pravidlo mířící na `div:first-child`.
   Ze dlaždic jsou teď tlačítka, takže přestalo platit a mřížka se rozpadla. */
@media (min-width: 785px) { .gal > button:not(.vic-fotek):first-child { grid-row: 1 / 3; } }
.gal > button:not(.vic-fotek)::after { content: ""; position: absolute; inset: 0;
  background: rgb(var(--zavoj-hluboky) / 0); transition: background .18s var(--doben); }
.gal > button:not(.vic-fotek):hover::after,
.gal > button:not(.vic-fotek):focus-visible::after { background: rgb(var(--zavoj-hluboky) / .16); }
.gal .vic-fotek { position: absolute; right: 14px; bottom: 14px; z-index: var(--z-nad-fotkou);
  cursor: zoom-in; }
@media (prefers-reduced-motion: reduce) { .gal > button:not(.vic-fotek)::after { transition: none; } }

/* Prohlížeč fotek. `<dialog>` proto, že ohnisko, `Esc` i podklad umí
   prohlížeč sám — psát to znovu by znamenalo psát to hůř. */
/* Podklad si maluje **samo okno**, ne jen `::backdrop`. Okno je přes
   celou obrazovku, takže když se na `::backdrop` spolehnu a on se
   nevykreslí, prosvítá skrz galerii celá stránka pod ní. Takhle je to
   kryté dvakrát. */
.fgal { border: 0; padding: 0; background: rgb(var(--zavoj-hluboky) / .96);
  max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; color: var(--tm-1); }
.fgal::backdrop { background: rgb(var(--zavoj-hluboky) / .93); }
.fgal-in { display: grid; grid-template-rows: auto 1fr auto; height: 100%;
  gap: 12px; padding: 14px 16px 18px; }
.fgal-hlava { display: flex; align-items: center; gap: 16px; }
.fgal-poc { font-size: var(--t2); color: var(--tm-4);
  font-variant-numeric: tabular-nums; }
.fgal-poc b { color: var(--tm-1); font-weight: var(--w-bold); }
.lb-popis { font-size: var(--t2); color: var(--tm-4); }
.fgal-x { margin-left: auto; background: var(--tm-plocha-2); border: 0; color: var(--tm-1);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 18px;
  display: grid; place-items: center; }
.fgal-x:hover { background: var(--tm-plocha-3); }
.fgal-scena { position: relative; display: grid; place-items: center; min-height: 0; }
.fgal-fotka { position: absolute; inset: 0; background-size: contain;
  background-position: center; background-repeat: no-repeat; border-radius: var(--r-control); }
.fgal-sip { position: absolute; top: 50%; transform: translateY(-50%);
  background: var(--tm-plocha-2); border: 0; color: var(--tm-1); width: 46px; height: 46px;
  border-radius: 50%; cursor: pointer; font-size: 22px; line-height: 1; z-index: var(--z-nad-fotkou);
  display: grid; place-items: center; }
.fgal-sip:hover { background: var(--tm-plocha-3); }
.fgal-sip.zpet { left: 6px; } .fgal-sip.vpred { right: 6px; }
.fgal-pas { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  scrollbar-width: thin; }
.fgal-pas button { flex: 0 0 auto; width: 92px; height: 62px; border-radius: var(--r-sm);
  border: 2px solid transparent; background-size: cover; background-position: center;
  cursor: pointer; opacity: .55; transition: opacity .18s ease, border-color .18s ease; }
.fgal-pas button[aria-current="true"] { opacity: 1; border-color: var(--s); }
.fgal-pas button:hover { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .fgal-pas button { transition: none; } }
@media (max-width: 620px) {
  .fgal-pas button { width: 68px; height: 48px; }
  .fgal-sip { width: 40px; height: 40px; }
}

/* ── Doladění hlavy detailu (s100) ────────────────────────────────────
   Galerie od s190 stojí v levém sloupci vedle cenového panelu. */

/* Levý sloupec si mezeru mezi bloky drží sám — `.two` odsazuje jen
   sloupce od sebe, ne obsah uvnitř nich. Sazbou, ne v `style=`, aby se
   to nedalo ztratit při dalším zásahu do značek. */
.two > div:first-child { display: grid; gap: 34px; align-content: start; }
.two > div:first-child > .par { margin: 0; }

/* ── Konec detailu (s101) ─────────────────────────────────────────────
   Pole poptávky. Doteď to byly `<div class="inp">` s textem — obrázek
   formuláře, ne formulář. */
.fpole { display: grid; gap: 6px; }
.fpole label { font-size: var(--t2); font-weight: var(--w-med); }
.fvstup { border-radius: var(--r-control); padding: 13px 15px; font-size: var(--t3);
  font-family: inherit; width: 100%; border: 1px solid var(--p300);   /* 3,03 : 1, WCAG 1.4.11 (s171) */
  background: var(--plocha); color: var(--n900); }
.fvstup:focus-visible { outline: 2px solid var(--p); outline-offset: 1px; }
.fvstup.ta { min-height: 92px; resize: vertical; }
.mrizka { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 22px 0 20px; }
@media (min-width: 620px) { .mrizka { grid-template-columns: 1fr 1fr; }
  .mrizka .plna { grid-column: 1 / -1; } }
.btn.vel { padding: 15px 26px; font-size: var(--t3); border-radius: var(--r); }


/* Žebřík fází v cenovém panelu — nejsilnější argument patří nahoru. */
.zebrik { border-top: 1px solid var(--n100); padding-top: 16px; }
.zeb { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 2px; }
.zeb li { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px;
  border-radius: var(--r-sm); font-size: var(--t2); }
.zeb li b { font-variant-numeric: tabular-nums; font-weight: var(--w-med); }
.zeb li i { font-style: normal; color: var(--n200); margin-left: auto; font-size: var(--t1); }
.zeb li.minule { color: var(--n200); }
.zeb li.minule b { text-decoration: line-through; }
.zeb li.ted { background: var(--p); color: var(--tm-1); }
.zeb li.ted b { font-weight: var(--w-bold); }
.zeb li.ted i { color: var(--s200); }
.zeb-pod { font-size: var(--t1); color: var(--n700); margin-top: 12px; }
.zeb-pod b { color: var(--p); }

/* Lišta při scrollování. */
.lista { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-lista-chip);
  background: var(--plocha-sklo); border-top: 1px solid var(--n150);
  box-shadow: 0 -8px 28px rgb(var(--zavoj) / .1);
  transform: translateY(100%); transition: transform .3s var(--doben); }
.lista.je { transform: none; }
.lista[hidden] { display: block; }
.lista-in { display: flex; align-items: center; gap: 18px; padding-block: 11px; }
.lista-foto { width: 54px; height: 40px; border-radius: var(--r-sm); flex: 0 0 auto;
  background-size: cover; background-position: center; }
.lista-txt { display: grid; min-width: 0; }
.lista-txt b { font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lista-txt i { font-style: normal; font-size: var(--t1); color: var(--n200); }
.lista-cena { display: grid; margin-left: auto; text-align: right; }
.lista-cena b { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums; }
.lista-cena i { font-style: normal; font-size: var(--t1); color: var(--s700); }
@media (prefers-reduced-motion: reduce) { .lista { transition: none; } }
@media (max-width: 720px) {
  .lista-foto, .lista-txt i, .lista-cena i { display: none; }
  .lista-in { gap: 12px; }
}

/* ── Kvalifikační otázky v poptávce na detailu (s102) ─────────────────
   Otázky jsou pilulky, ne další pole — vyplnit se dají jedním klikem
   a formulář tím neroste do výšky tak, jako by rostl se selecty. */
.kp-form .kval { gap: 10px; }
.kp-form .kval-lb { font-size: var(--t2); font-weight: var(--w-med); color: var(--n900); }
.kp-form .chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-form .chip { text-transform: none; letter-spacing: 0; font-size: var(--t2);
  padding: 8px 14px; cursor: pointer; }
.kp-form .chip[aria-pressed="true"] { background: var(--p); border-color: var(--p); color: var(--tm-1); }
.kp-form select.in { appearance: none; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--n700) 50%),
    linear-gradient(135deg, var(--n700) 50%, transparent 50%);
  background-position: calc(100% - 19px) 55%, calc(100% - 13px) 55%;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 38px; }
/* Souhlas se dává, ne oznamuje — proto zaškrtávátko, ne věta pod tlačítkem. */
.kp-form .souhlas { display: flex; gap: 11px; align-items: flex-start;
  margin: 4px 0 20px; font-size: var(--t2); color: var(--n700); line-height: 1.5; }
.kp-form .souhlas input { margin-top: 3px; flex: 0 0 auto; width: 17px; height: 17px;
  accent-color: var(--p); }
.kp-form .souhlas a { color: var(--p); }

/* ── Lokalita a otázky na detailu (s105) ──────────────────────────────
   Text je z ostrého webu; sazba je zdejší. */
/* Sazba lokality je v bloku s211. */

/* Odpovědi v rozklikávačkách. Text se sem přenášel i s odrážkami, takže
   sazbu potřebují i ony — na „Jak to funguje“ v odpovědích žádné nejsou. */
.odp { font-size: var(--t3); line-height: 1.68; color: var(--n700); max-width: 72ch; }
.odp p { margin-top: 12px; }
.odp p:first-child { margin-top: 0; }
.odp b { color: var(--n900); }
.odp ul { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 9px; }
.odp ul ul { margin-top: 9px; }
.odp li { line-height: 1.6; }

/* ── Štítky a pátý parametr na detailu (s107) ─────────────────────────
   Kultura, oceán, surfování — tři štítky, které ostrý web u vily uvádí
   nad seznamem benefitů. */
.stitky { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.stitky .chip { text-transform: none; letter-spacing: 0; font-size: var(--t2); }



/* ── Loga portálů a značka na kartě (s109, přesazeno v s111) ──────────
   Vedle loga stojí vždycky i název textem, takže i kdyby soubor s logem
   chyběl, čte se název — a `main.js` chybějící obrázek odstraní, aby se
   neukázala ikona rozbitého obrázku. */
.pr-logo { flex: 0 0 auto; object-fit: contain; }
/* Lišta na detailu má tmavě zelený podklad. Bílá dlaždice je tam proto,
   aby značka mohla zůstat ve své barvě — `s109` ji přebarvoval filtrem
   na bílo a barvu tím zahazoval. */
/* Loga na liště na detailu si řídí `s112` — tam každé stojí na podkladu
   ve své vlastní barvě, takže žádnou dlaždici pod sebou nepotřebuje. */


/* ── Pronájem jako důkaz i mimo lištu (s113) ──────────────────────────
   Tři místa — ekonomika, cenový panel, fixní lišta — a všechna vedou na
   `#pronajem`. Adresy portálů zůstávají jen na liště, ať se dají měnit
   na jednom místě. */
.pron-odkaz { display: flex; align-items: center; gap: 10px;
  background: var(--s150); border: 1px solid var(--s200); border-radius: var(--r-control);
  padding: 10px 12px; color: var(--p600);
  transition: background .16s var(--doben), border-color .16s var(--doben); }
.pron-odkaz:hover { background: var(--s50); border-color: var(--s); }
.pron-loga { display: inline-flex; gap: 5px; align-items: center; flex: 0 0 auto; }
.pron-loga .pr-logo { width: 15px; height: 15px; }
.pron-slova { display: grid; gap: 1px; min-width: 0; }
.pron-odkaz b { font-size: var(--t2); font-weight: var(--w-bold); letter-spacing: .01em; }
.pron-odkaz i { font-style: normal; font-size: var(--t1); line-height: 1.35;
  color: var(--n200); }
.pron-odkaz .ar { margin-left: auto; color: var(--s700); flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .pron-odkaz { transition: none; } }

/* Ve fixní liště není místo na krabici — jen značky a dvě slova. Řádek,
   ve kterém stojí, se na mobilu skrývá celý (`.lista-txt i`, s101),
   takže se o zúžení nemusí starat zvlášť. */
.pron-inline { display: inline-flex; align-items: center; gap: 5px;
  vertical-align: -2px; }
.pron-inline .pr-logo { width: 13px; height: 13px; }

/* Cíl všech tří odkazů. Odsazení kvůli lepící se hlavičce, jinak by
   lišta skončila pod ní. */
#pronajem { scroll-margin-top: 92px; }

/* ── Kontrast a dotykové cíle (s115) ──────────────────────────────────
   `--s` na `--p` dá 4,24 : 1, což je pod 4,5 : 1 pro běžný text.
   `--s200` na témže podkladu dá 6,31 : 1. Na `--p600` má `--s`
   5,42 : 1 a projde, proto se to nemění plošně. */
.poradit { color: var(--s200); }

/* ── Dotykové cíle na 40 px ───────────────────────────────────────────
   Norma AA žádá 24 px a pod tím nebylo nic; doporučených 44 px ale
   nesplňovala navigace, patička, chipy ani ovládání mapy. Kde by se tím
   posunulo rozvržení, přidává se odsazení se **záporným okrajem** —
   plocha se zvětší, sazba zůstane. Kde je prvek sám o sobě krabice
   (chip, přepínač), roste normálně.

   Vodorovně se to řeší jen tam, kde je popisek kratší než 40 px:
   `.nav` si o tolik zmenší `gap`, takže rytmus zůstane. */
.nav { gap: 8px; }
.nav > * { padding-block: 11px; padding-inline: 7px; }
.crumb a { padding-block: 11px; margin-block: -11px;
  padding-inline: 5px; margin-inline: -5px; }
.util .wrap a, .util .wrap b { display: inline-flex; align-items: center;
  padding-block: 11px; margin-block: -11px; }
.head .foot-tel { padding-block: 8px; margin-block: -8px; }
.logo { display: inline-flex; align-items: center; min-height: 40px; }
/* Jen ovladatelné chipy. `.chip.solid` na kartě je `<span>`, popisek —
   ten se nafukovat nemá. */
button.chip, a.chip { min-height: 40px; }
.toggle button, .map-ctl button, .f-prep, .quiet-a { min-height: 40px; }
.map-ctl button { min-width: 40px; }
.poradit { display: inline-flex; align-items: center; min-height: 40px;
  margin-block: -9px; }

/* ── Přeskočit na obsah (s116) ────────────────────────────────────────
   Mimo obraz, dokud na něj někdo nezaostří. `:focus`, ne
   `:focus-visible` — myší se sem nedá dostat, takže rozlišovat není co. */
.preskoc { position: fixed; top: 0; left: 12px; z-index: var(--z-preskocit);
  transform: translateY(-130%);
  background: var(--p); color: var(--tm-1); font-size: var(--t2); font-weight: var(--w-med);
  padding: 12px 18px; border-radius: 0 0 var(--r-control) var(--r-control);
  box-shadow: 0 6px 20px rgb(var(--zavoj) / .3);
  transition: transform .18s var(--doben); }
.preskoc:focus { transform: none; outline: 2px solid var(--s); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .preskoc { transition: none; } }

/* ── Hlavička detailu (s117) ──────────────────────────────────────────
   Nad drobečky bylo 88 px prázdného krému hned pod tmavým pruhem,
   zatímco podnadpis se dotýkal tabulky pod sebou. */
[data-page="detail"] .sec.tight:first-of-type { padding-top: 34px; }
[data-page="detail"] .crumb { margin-bottom: 9px; }

/* ── Měna (s118) ──────────────────────────────────────────────────────
   Značka s měnou a kurzem stojí nad tabulkou, ne pod ní — kurz uvedený
   až za jedenácti eurovými řádky přijde pozdě. */
.eco-mena { display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .08em;
  text-transform: uppercase; color: var(--s700);
  background: var(--s150); border: 1px solid var(--s200); border-radius: var(--r-pill);
  padding: 5px 12px; margin-bottom: 14px; }
/* Druhá měna v souhrnu je podřízená — ne druhé číslo, jen převod. */
.eco-sum .v .kc { display: block; font-size: var(--t2); font-weight: var(--w-med);
  color: var(--n200); letter-spacing: 0; margin-top: 2px; }
.util .mena { color: inherit; }
.util .mena:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Procenta v žebříku fází (s119) ───────────────────────────────────
   Narůst proti startovací ceně, stejně jako na `investicni-nemovitosti`.
   Sedí hned za částkou, ne u data — patří k číslu, ne k termínu. */
.zeb li .pc { font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .04em;
  color: var(--n200); font-variant-numeric: tabular-nums; }
.zeb li.ted .pc { color: var(--s200); }
.zeb li.minule .pc { color: var(--n200); }

/* ── Míň opakování (s120) ─────────────────────────────────────────────
   Jeden řádek místo pětiřádkového žebříku v panelu. Celý žebřík je
   o kus níž v sekci „Cena a fáze projektu“, kde k němu patří i důvod. */
.zeb-strucne { display: flex; align-items: center; gap: 12px;
  background: var(--s150); border: 1px solid var(--s200); border-radius: var(--r-control);
  padding: 12px 14px; color: var(--p600);
  transition: background .16s var(--doben), border-color .16s var(--doben); }
.zeb-strucne:hover { background: var(--s50); border-color: var(--s); }
.zeb-strucne .zs { display: grid; gap: 2px; min-width: 0; }
.zeb-strucne b { font-size: var(--t2); font-weight: var(--w-bold); letter-spacing: .01em; }
.zeb-strucne i { font-style: normal; font-size: var(--t1); color: var(--n200); }
.zeb-strucne .ar { margin-left: auto; color: var(--s700); flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .zeb-strucne { transition: none; } }
#faze { scroll-margin-top: 92px; }

/* Rozpad nákladů. Nativní `<details>`, aby fungoval i bez skriptu. */
.eco-rozpad { margin-top: 10px; }
.eco-rozpad > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 7px; font-size: var(--t2); font-weight: var(--w-med);
  color: var(--p); padding: 8px 0; }
.eco-rozpad > summary::-webkit-details-marker { display: none; }
.eco-rozpad > summary::after { content: "+"; font-size: var(--t4); line-height: 1;
  color: var(--n200); }
.eco-rozpad[open] > summary::after { content: "\2212"; }
.eco-rozpad > summary:hover { color: var(--p600); }
.eco-rozpad > summary:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; }
/* `<details>` schovává obsah vlastním mechanismem, ale **explicitní
   `display` na přímém potomkovi ho přebije** — `.eco-rows` má
   `display: grid`, takže zavřený rozpad zůstával celý vidět (naměřeno
   229 px při `open === false`). Proto se zavřený stav píše ručně. */
.eco-rozpad:not([open]) > *:not(summary) { display: none; }
.eco-rozpad .eco-rows { border-top: 1px solid var(--n100); padding-top: 4px; }

/* ── Responzivita: co se nemohlo smrsknout (s121) ─────────────────────
   Naměřeno průchodem 12 stránek × 22 šířek. Všechny tři nálezy měly
   stejnou příčinu: prvek, který se odmítl zmenšit pod svůj obsah.

   Stopa `1fr` NENÍ „nejvýš zbytek místa“ — je to „nejmíň min-content,
   nejvýš zbytek“. Bez `min-width: 0` se položka gridu ani flexu
   nesmrskne pod svůj obsah a vytlačí stránku do strany. */

/* „Mám zájem o tuto nemovitost“ potřebuje v jednom řádku 261 px; uvnitř
   panelu to je 305 px, ale na 320px displeji zbývá 261. Pod 480 px se
   proto popisek tlačítka smí zalomit. */
@media (max-width: 479px) {
  .btn { white-space: normal; text-wrap: balance; }
}


.kp-form input, .kp-form textarea, .kp-form select { min-width: 0; }
/* `.souhlas` je flex; text vedle zaškrtávátka je anonymní položka,
   které se `min-width` nastavit nedá — musí se povolit zalomení. */
.kp-form .souhlas { flex-wrap: wrap; }

/* Tlačítko menu mělo 36 × 30 px. Na mobilu je to nejpoužívanější
   ovladač na webu — jediná cesta do navigace. */
.burger { width: 40px; height: 40px; justify-content: center; align-content: center;
  padding: 0; }

/* ── Telefon na šířku ─────────────────────────────────────────────────
   Naměřeno na 740 × 360 (iPhone na šířku): fixní lišta měla 89 px,
   tedy **čtvrtinu obrazovky**, a v ceně se lámalo „Kč“ na vlastní
   řádek. Media query na výšku, ne na šířku — na šířku je místa dost,
   chybí výška.

   `min-width: 621px`, protože pod tím se ty řádky skrývají už dřív
   (pravidlo z `s101`) a nemá smysl to psát dvakrát. */
.lista-cena i { white-space: nowrap; }
@media (max-height: 430px) and (min-width: 621px) {
  .lista-foto, .lista-txt i, .lista-cena i { display: none; }
  .lista-in { padding-block: 8px; }
}

/* ── Mobilní menu (s122) ──────────────────────────────────────────────
   Panel stál v běžném toku, takže se při rolování odsunul pryč. Teď je
   pevný pod hlavičkou a odsazení shora mu počítá skript — pevné číslo
   by neplatilo, protože horní lišta se při rolování schovává. */
.drawer.open { position: fixed; left: 0; right: 0; top: var(--dr-top, 71px);
  bottom: 0; z-index: var(--z-menu-mobil); overflow-y: auto; overscroll-behavior: contain;
  border-bottom: 0; box-shadow: 0 18px 40px rgb(var(--zavoj) / .16); }
.drawer.open .wrap { padding-bottom: 32px; }
body.drawer-otevreno { overflow: hidden; }

/* Hamburger na videu. Vrací se do tmavé, jakmile hlavička zbělá. */
[data-page="home"] .head .burger i { background: var(--plocha); }
[data-page="home"] .head.pevna .burger i,
[data-page="home"].mega-otevreno .head .burger i { background: var(--n900); }

/* Telefon v hlavičce se pod 420 px lámal na dva řádky („+420 604 827“ /
   „601“) a natahoval hlavičku ze 40 na 89 px. Zalomit se nesmí, a na
   malých displejích se zmenší — horní lišta, kde je taky, je tam
   schovaná, takže je to jediné číslo nad ohybem a mazat se nedá. */
.head .foot-tel { white-space: nowrap; }
@media (max-width: 419px) {
  .head .foot-tel { font-size: var(--t1); }
  .head > .wrap { gap: 10px; }
}
/* Na 320 px je logo 135 px, hamburger 40 a mezery 20 — na číslo zbývá
   106 px a to nestačí ani na 12 px. Radši pryč než přetok o 16 px;
   v otevřeném menu je pod „Kontakt“ a v patičce taky. */
@media (max-width: 359px) { .head .foot-tel { display: none; } }

/* ── Klientský feedback 26. 8. (s124) ─────────────────────────────────
   1) Řádek „Detail nemovitosti“ na kartě zrušil s184: klikatelná je celá karta. */

/* 3) Řádky mřížky se měří každý zvlášť, takže třetí balíček, který
      v dvousloupcovém rozvržení zůstane v řádku sám, byl nižší než
      dvojice nad ním (1024 px: 529/529/508, 700 px: 485/485/458).
      `:has(> .pkg)` schválně — `.grid` sdílí i mřížka karet. */
.grid:has(> .pkg) { grid-auto-rows: 1fr; }

/* 5) Uvnitř kapitoly bylo pod otázkou 14 px, mezi bloky 24–30 a mezi
      kapitolami 46 + 46 přes linku. Otázka je nadpis a čtrnáct pixelů
      ji lepilo k odpovědi. */
.chapter .odpoved { margin-top: 22px; }
.chapter > * + * { margin-top: 34px; }
.chapter > .odpoved + * { margin-top: 34px; }

/* ── Dvě osy filtru (s125) ────────────────────────────────────────────
   Jedna řada mísila „kde to je“ (vylučuje se) a „co tam chci dělat“
   (nevylučuje). Popisek osy nese i to, kolik se dá vybrat — bez toho
   se dvě řady čtou jako jedna dlouhá. */
.f-lb .kolik { display: block; font-size: 10.5px; font-weight: var(--w-text);
  letter-spacing: .02em; text-transform: none; color: var(--n200);
  margin-top: 1px; }

/* ── „Jaké to je“ natmavo (s126) ──────────────────────────────────────
   Jediná stránka, jejíž úkol je nálada, ne informace. Tmavý podklad
   dělá z fotky fotku; na krému je to ilustrace v katalogu.

   Celowebový přepínač schválně ne — zdvojnásobil by plochu na testování
   a přinesl by málo. Tohle je editorský záměr pro jednu stránku.

   Značky se nemění. Smazáním tohohle bloku je stránka zpátky světlá. */
/* Neutrální tokeny se přebarvují **na kořeni stránky**, ne po
   selektorech. Chytit to jednotlivě nejde: první pokus nechal
   21 prvků pod hranicí kontrastu, mezi nimi text v `.jt-weeks`
   s poměrem 1,06 : 1 — tmavé písmo na tmavém. Tokeny se dědí, takže
   jedno místo pokryje i to, na co bych zapomněl.

   `--n150`, `--n100` a `--n50` slouží i jako podklady a linky; jako
   průhledná bílá fungují na tmavém v obou rolích. `--s700` je zlatá
   pro světlý podklad — na tmavém by neprošla, proto světlejší odstín. */
[data-page="jake-to-je"] {
  background: var(--jt-noc); color: var(--tm-3);
  --n900: #ffffff;
  --n700: rgba(255, 255, 255, .82);
  --n200: rgba(255, 255, 255, .64);
  --n150: rgba(255, 255, 255, .18);
  --n100: rgba(255, 255, 255, .13);
  --n50: rgba(255, 255, 255, .06);
  --s700: var(--s200);
}
[data-page="jake-to-je"] .sec { background: transparent; }
[data-page="jake-to-je"] .sec.cream { background: var(--p600); }
[data-page="jake-to-je"] .sec.white { background: var(--jt-podklad); }

/* Nadpisy a popisky. `--s700` je na tmavém pod hranicí, proto `--s200`. */
[data-page="jake-to-je"] h1,
[data-page="jake-to-je"] .h2,
[data-page="jake-to-je"] h2,
[data-page="jake-to-je"] h3 { color: var(--tm-1); }
[data-page="jake-to-je"] .lab { color: var(--s200); }
[data-page="jake-to-je"] .lead,
[data-page="jake-to-je"] p { color: var(--tm-4); }
[data-page="jake-to-je"] b, [data-page="jake-to-je"] strong { color: var(--tm-1); }

/* Rok po týdnech: světlé buňky by na tmavém svítily jako reflektor. */
[data-page="jake-to-je"] .year i { background: var(--tm-plocha-2); }
[data-page="jake-to-je"] .year i.mine { background: var(--s); }
[data-page="jake-to-je"] .jt-weeks li { border-color: var(--tm-linka-1); }

/* Rámečky a linky. Na tmavém se nekreslí tmavší barvou, ale průhlednou
   bílou — jinak zmizí. */
[data-page="jake-to-je"] .card,
[data-page="jake-to-je"] .box,
[data-page="jake-to-je"] .eco-det { background: var(--jt-podklad); border-color: var(--tm-linka-1); }
[data-page="jake-to-je"] hr,
[data-page="jake-to-je"] .sec + .sec { border-color: var(--tm-linka-1); }

/* `.hold` je tmavý pruh na světlé stránce — na tmavé by splynul,
   tak se odliší okrajem místo podkladem. */
[data-page="jake-to-je"] .hold { background: var(--tm-plocha-1);
  border: 1px solid var(--tm-linka-1); }

/* Patička už tmavá je; ať na ni stránka nenavazuje švem. */
[data-page="jake-to-je"] .foot { border-top: 1px solid var(--tm-linka-1); }

/* Hlavička nad tmavou stránkou: bílá lišta by praštila do očí hned
   pod tmavým obrazem. */
[data-page="jake-to-je"] .head { background: var(--jt-podklad); border-bottom-color: var(--tm-linka-1); }
[data-page="jake-to-je"] .head .nav > a,
[data-page="jake-to-je"] .head .foot-tel { color: var(--tm-2); }
[data-page="jake-to-je"] .head .nav > a:hover,
[data-page="jake-to-je"] .head .nav [aria-current="page"] { color: var(--tm-1); }
[data-page="jake-to-je"] .head .nav [aria-current="page"]::after { background: var(--s); }
[data-page="jake-to-je"] .burger i { background: var(--plocha); }
/* Logo je na téhle stránce jediný `<img>` bez světlé varianty (tu má
   jen homepage a přepíná ji JS). Světlý soubor v `assets/brand/` je,
   takže se prohodí rovnou ve značkách — jedna stránka, jeden atribut,
   žádný skript navíc. */

/* `.jt-money` je bílá karta na bílé sekci — na tmavém svítila jako
   jediný světlý obdélník na stránce. Naměřeno při kontrole: jediný
   prvek s `rgb(255,255,255)` širší než 200 px. */
[data-page="jake-to-je"] .jt-money { background: var(--tm-plocha-1);
  border: 1px solid var(--tm-linka-1); }
[data-page="jake-to-je"] .jt-money .t { color: var(--tm-1); }
[data-page="jake-to-je"] .jt-money .d { color: var(--tm-4); }

/* Odkaz v `.jt-money` měl barvu napsanou přímo ve značce
   (`style="color:var(--p)"`), což je na tmavém neviditelné — naměřeno
   1,85 : 1 — a **vloženou barvu sazba nepřebije** bez `!important`.
   Barva se proto přesunula sem a značka ji nemá. */
.jt-money a { color: var(--p); font-weight: var(--w-med); }
[data-page="jake-to-je"] .jt-money a { color: var(--s200); }

/* ── „Jaké to je“: hover, feedy, konec (s128) ─────────────────────────

   Hover: `.pr` se rozbaluje z `grid-template-rows: 0fr`, což funguje
   jen s **jediným potomkem**, který má `overflow: hidden; min-height: 0`.
   Potomci byli dva (anonymní text + `<i>`), takže z toho grid udělal dva
   řádky a šipka spadla pod text. Opraveno ve značce; tady jen vzduch,
   protože „je to moc blízko sebe“. */
.mt .pl { margin-top: 10px; }
.mt:hover .pr, .mt:focus-visible .pr { margin-top: 13px; }

/* ── Kanály ───────────────────────────────────────────────────────── */
.kanaly { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 700px) { .kanaly { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.kanal { display: flex; align-items: center; gap: 14px;
  background: var(--tm-plocha-1); border: 1px solid var(--tm-linka-1);
  border-radius: var(--r); padding: 18px 20px; min-height: 40px;
  transition: background .16s var(--doben), border-color .16s var(--doben); }
.kanal:hover { background: var(--tm-plocha-2); border-color: var(--tm-linka-3); }
.kanal img { width: 26px; height: 26px; flex: 0 0 auto; }
/* TikTok má firemní černou, na tmavém by zmizel. */
.kanal img[src$="logo-tiktok.svg"] { filter: brightness(0) invert(1); }
.kanal .k-jm { display: block; font-size: var(--t3); font-weight: var(--w-med); color: var(--tm-1); }
.kanal .k-uc { display: block; font-size: var(--t1); color: var(--tm-5);
  margin-top: 2px; }
.kanal .ar { margin-left: auto; color: var(--s200); flex: 0 0 auto; }
@media (prefers-reduced-motion: reduce) { .kanal { transition: none; } }

/* ── Závěrečný obraz ──────────────────────────────────────────────── */
.jt-konec { position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(340px, 46vw, 520px); display: grid; place-items: center;
  text-align: center; }
.jt-konec .ph { position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center; }
.jt-konec::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(var(--zavoj-hluboky) / .58) 0%, rgb(var(--zavoj-hluboky) / .78) 100%); }
.jt-konec .in { padding: 56px 24px; max-width: 34ch; }
.jt-konec p { font-family: var(--serif); font-style: italic;
  font-size: clamp(28px, 4.4vw, 46px); line-height: 1.15; color: var(--tm-1); text-wrap: balance; }
.jt-konec .btn { margin-top: 26px; }

/* Sekce s náklady plavala v tmavé ploše — 128 px nahoře i dole. */
[data-page="jake-to-je"] .sec.white { padding-block: 56px; }

/* ── Chrom na tmavé stránce (s129) ────────────────────────────────────
   `s126` přebarvuje neutrální tokeny na kořeni stránky. Megamenu
   a mobilní menu jsou uvnitř ní a mají bílý podklad, takže z toho byl
   bílý text na bílém panelu. Na tmavé stránce jde do tmavé i chrom. */
[data-page="jake-to-je"] .mega { background: var(--jt-podklad);
  border-bottom-color: var(--tm-linka-1);
  box-shadow: 0 20px 44px rgb(var(--cerna-rgb) / .45); }
[data-page="jake-to-je"] .mega li a:hover { background: var(--tm-plocha-1); color: var(--tm-1); }

[data-page="jake-to-je"] .drawer { background: var(--jt-podklad);
  border-bottom-color: var(--tm-linka-1); }

/* Tři fakta na homepage v „Investičním pohledu“ (s133). `.steps` má na
   ≥1040 px čtyři sloupce; tři položky by nechaly čtvrtý prázdný. A na
   560–784 px by dva sloupce nechaly jednu položku osiřelou pod dvěma. */
.steps.three { grid-template-columns: 1fr; }
@media (min-width: 785px) {
  .steps.three { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .steps.three .step { flex-direction: column; gap: 11px; padding-inline: 24px; }
  .steps.three .step:first-child { padding-left: 0; }
  .steps.three .step:last-child { padding-right: 0; }
  .steps.three .step + .step::before { content: ""; position: absolute; left: 0; top: 16px;
    width: 1px; height: calc(100% - 22px);
    background: linear-gradient(180deg, transparent, var(--s200) 20%, var(--s200) 80%, transparent); }
}

/* Hlavička se šesti položkami (s134). Sedmá položka („Investiční
   nemovitosti“, s133) šla zpět pod „Nemovitosti“ do megamenu. Těsnější
   rozestupy z s133 zůstávají: se šesti položkami a telefonem se hlavička
   vejde na jeden řádek od ~1240 px, bez telefonu od ~1075 px. Na
   1040–1239 px proto v hlavičce telefon není; stejné číslo je v liště
   hned nad ní. Před s133 byl jeden řádek až od 1320 px. */
@media (min-width: 1040px) { .nav { gap: 4px; } .nav > * { padding-inline: 5px; } }
@media (min-width: 1040px) and (max-width: 1239px) { .head .foot-tel { display: none; } }
/* popisek u velkého čísla ať se neláme mezi slova (s133) */
.steps.three .big small { white-space: nowrap; }

/* Telefon v odstavci pod formulářem („Radši zavoláte?“) měl dotykový cíl
   17 px. Svislý padding u řádkového prvku nemění výšku řádku, jen plochu
   pro klepnutí: 25 px. Patička a hlavička rezervu mají z s16 (s135). */
p a[href^="tel:"] { padding-block: 4px; }

/* Popisek v kapitálkách nad nadpisem sekce je pryč (s136). Nadpis je
   v `.wrap` první, takže odstup od popisku nepotřebuje. Popisky nad
   jinými bloky (jméno, kalendář, seznam) zůstaly. */
.h2:first-child { margin-top: 0; }

/* Čtyři čísla z hera jako jedna věta místo pruhu dlaždic (s137).
   Číslice v Cormorantu, kterým web mluví v claimu a citátech. */
.fakta { font-size: var(--t5); line-height: 1.5; color: var(--n700); max-width: 46ch;
  margin: 0; text-wrap: pretty; }
.fakta b, .step .t .cislo { font-family: var(--serif); font-weight: 600; font-size: 1.6em;
  line-height: 1; color: var(--p); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  padding: 0 .06em; }
.step .t .cislo { font-size: 1.75em; }
.steps.three .step .t { line-height: 1.45; }

/* Inline styly do tříd (s141). `.odkaz` místo vložené barvy: tmavý remap
   tokenů (s126) inline `color` nepřebije, třídu ano. */
.odkaz { color: var(--p); font-weight: var(--w-med); text-decoration: none; white-space: nowrap; }
.odkaz.zalom { white-space: normal; }
.chip.text { text-transform: none; letter-spacing: 0; font-size: var(--t2); padding: 9px 14px; }

/* Pojmenované vrstvy stránky (s141). Čísla zůstala, aby se pořadí
   nezměnilo; vrstvy uvnitř karty (2–10) jsou lokální a zůstaly literál. */
:root { --z-filtr: 20; --z-lista: 40; --z-lista-chip: 45; --z-mega: 49; --z-hlavicka: 50;
  --z-nad-videem: 60; --z-preskocit: 200; --z-mapa: 900; }

/* Číslo s jednotkou ve větě je jeden celek, nesmí se zlomit na „12,5“
   a „%“ (s142). */
.fakta b, .step .t .cislo { white-space: nowrap; }

/* Zbylé P3 z auditu (s143). Odkazy uvnitř vět a atribuce mapy mají
   dotykový cíl aspoň 24 px; u řádkového prvku padding nemění řádek. */
p a:not(.btn):not(.quiet-a), .lead a, .fine a, .d a { padding-block: 4px; }
.leaflet-container .leaflet-control-attribution { padding: 0 8px; }
.leaflet-control-attribution a, .leaflet-control-attribution span { display: inline-block; padding-block: 6px; }

/* Pojmenované vrstvy uvnitř karet a dvě vrstvy stránky, které s141
   přehlédl (s143). Čísla zůstala. */
:root { --z-nad-fotkou: 2; --z-karta-tecky: 5; --z-karta-zona: 6; --z-karta-chip: 7;
  --z-karta-dostupnost: 8; --z-karta-prodano: 9; --z-karta-razitko: 10;
  --z-menu-mobil: 44; }

/* Bílé logo nad tmavým na homepage: centrovat stejně jako tmavé, jinak
   na mobilu (logo 28–32 px v boxu 40 px) koukal zpod bílého zelený
   spodek (s144). */
.logo-svetle { top: 50%; transform: translateY(-50%); }

/* Švy dlaždic Esri (s144). JPEG dlaždice mají světlejší pravý a spodní
   okraj a mapa jede na zlomkovém zoomu (dlaždice zmenšené), takže se
   okraj kreslil jako světlá linka. Dlaždice o pixel větší na každou
   stranu s prolnutím „darken“: v překryvu vyhraje tmavší, tedy vnitřek
   souseda, a světlý okraj zmizí. Přesah bez prolnutí šev zvýrazňoval,
   celočíselný zoom by na desktopu zmenšil svět a shlukoval cedulky. */
.leaflet-tile-container img.leaflet-tile { width: 258px !important; height: 258px !important;
  margin: -1px !important; mix-blend-mode: darken; }

/* Vrstvy Leafletu (400 až 1000) zůstanou uvnitř obalu mapy; navenek je
   mapa jedna vrstva pod hlavičkou a megamenu (s151). */
.mapwrap { isolation: isolate; }

/* ── Stránka Splátky (s152) ─────────────────────────────────────── */
.dopln { display: inline-block; color: var(--s700); background: var(--s150); border: 1px dashed var(--s);
  border-radius: var(--r-sm); padding: 0 6px; font-size: var(--t1); font-weight: var(--w-med); white-space: nowrap; }
.sec.dark .dopln { background: var(--tm-plocha-2); color: var(--s200); border-color: var(--s200); }
.postup { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 30px; }
@media (min-width: 785px) { .postup { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .pkrok { padding-inline: 24px; border-left: 1px solid var(--s200); }
  .pkrok:first-child { padding-left: 0; border-left: 0; } .pkrok:last-child { padding-right: 0; } }
.pkrok .n { font-family: var(--serif); font-size: 34px; font-weight: 600; color: var(--s); line-height: 1; }
.pkrok .t { font-size: var(--t4); font-weight: var(--w-med); margin-top: 10px; letter-spacing: -.01em; }
.pkrok .d { font-size: var(--t2); color: var(--n700); margin-top: 6px; line-height: 1.5; }
.kalk .pole { display: flex; flex-direction: column; gap: 8px; padding: 16px 0; border-top: 1px solid var(--s200); }
.kalk .pole:first-child { border-top: 0; padding-top: 0; }
.kalk .pole label { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t3); font-weight: var(--w-med); }
.kalk .pole label b { font-variant-numeric: tabular-nums; color: var(--p); white-space: nowrap; }
.kalk .pole input[type=range] { width: 100%; accent-color: var(--p); margin: 0; }
.kalk .pole .h { font-size: var(--t2); color: var(--n200); }
.essox-radek { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--tm-linka-2); }
.essox-plate { display: inline-flex; background: var(--plocha); border-radius: var(--r-sm); padding: 8px 12px; }
.essox-plate img { height: 28px; width: auto; display: block; }
.essox-radek p { font-size: var(--t2); color: var(--tm-3); margin: 0; max-width: 62ch; }
.sec.dark .h2 { color: var(--tm-1); }

/* Řádek o splátkách v cenovém panelu detailu a na kartách (s153). */
.spl { display: flex; align-items: center; gap: 9px; font-size: var(--t2); color: var(--n700); line-height: 1.4; }
.spl img { height: 13px; width: auto; flex: 0 0 auto; }
.spl a { color: var(--p); font-weight: var(--w-med); }
.panel .spl { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--s200); }

/* ── Investiční rovina z tabulky (s154) ─────────────────────────── */
.ph-item.pred { background: var(--s150); border-style: dashed; border-color: var(--s); }
.ph-item.pred .pct { color: var(--s700); }
.rozpeti { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 22px; }
@media (min-width: 560px) { .rozpeti { grid-template-columns: 1fr 1fr; gap: 26px; } }
.rozpeti > div { border-top: 1px solid var(--n150); padding-top: 14px; }
.rozpeti .lb { font-size: var(--t1); letter-spacing: .12em; text-transform: uppercase; color: var(--n200); font-weight: var(--w-bold); }
.rozpeti .v { font-family: var(--serif); font-weight: 600; font-size: 34px; line-height: 1; color: var(--p); margin-top: 8px; }
.rozpeti .d { font-size: var(--t2); color: var(--n700); margin-top: 8px; line-height: 1.5; }
.pribeh { display: grid; grid-template-columns: 1fr; margin-top: 26px; }
@media (min-width: 700px) { .pribeh { grid-template-columns: 200px minmax(0, 1fr); column-gap: 30px; } }
.rok { padding: 18px 0 4px; font-family: var(--serif); font-size: 30px; font-weight: 600; color: var(--p); line-height: 1; }
@media (min-width: 700px) { .rok { padding: 18px 0; border-top: 1px solid var(--s200); } }
.rok small { display: block; font-family: var(--sans); font-size: var(--t2); font-weight: var(--w-text); color: var(--n200); margin-top: 6px; }
.co { padding: 8px 0 18px; border-bottom: 1px solid var(--s200); font-size: var(--t3); color: var(--n700); line-height: 1.6; max-width: 62ch; }
@media (min-width: 700px) { .co { padding: 18px 0; border-top: 1px solid var(--s200); border-bottom: 0; } }
.co b { color: var(--n900); }
.co .cislo { font-family: var(--serif); font-weight: 600; font-size: 24px; color: var(--p); white-space: nowrap; }

/* ── Rozpadlá místa (s155) ──────────────────────────────────────── */
.mood-grid.offer { max-height: none; grid-template-rows: none; }

/* ── Model zhodnocení na detailu (s158) ─────────────────────────── */
.model-det { display: grid; grid-template-columns: 1fr; gap: 26px; margin-top: 26px; align-items: start; }
@media (min-width: 1040px) { .model-det { grid-template-columns: minmax(0, 1fr) 340px; gap: 40px; } }
.rozpeti.ctyri { margin-top: 0; }
@media (min-width: 900px) { .rozpeti.ctyri { grid-template-columns: repeat(2, 1fr); } }
.model-vys { background: var(--p); color: var(--tm-1); border-radius: var(--r); padding: 24px; }
.model-vys .lb { font-size: var(--t1); letter-spacing: .12em; text-transform: uppercase; color: var(--tm-4); font-weight: var(--w-bold); }
.model-vys .v { font-family: var(--serif); font-weight: 600; font-size: 56px; line-height: 1; margin-top: 8px; }
.model-vys .s { font-size: var(--t2); color: var(--tm-3); margin-top: 10px; line-height: 1.5; }
.dalsi-disp { margin-top: 22px; }
.dalsi-disp a { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; padding: 12px 16px;
  background: var(--plocha); border: 1px solid var(--s200); border-radius: var(--r-control); color: var(--n900); }
.dalsi-disp a:hover { border-color: var(--s); }
.dalsi-disp a b { font-weight: var(--w-med); }
.dalsi-disp a span { font-size: var(--t2); color: var(--n200); }
.dalsi-disp a .ar { margin-left: auto; color: var(--p); }

/* ── Fotky nemovitostí (s160) ── */
:root {
  --img-n-apartina-2kk-1: url(/assets/img/n-apartina-2kk-1.webp);
  --img-n-apartina-2kk-2: url(/assets/img/n-apartina-2kk-2.webp);
  --img-n-apartina-2kk-3: url(/assets/img/n-apartina-2kk-3.webp);
  --img-n-apartina-2kk-4: url(/assets/img/n-apartina-2kk-4.webp);
  --img-n-apartina-2kk-5: url(/assets/img/n-apartina-2kk-5.webp);
  --img-n-apartina-2kk-6: url(/assets/img/n-apartina-2kk-6.webp);
  --img-n-apartina-2kk-7: url(/assets/img/n-apartina-2kk-7.webp);
  --img-n-apartina-2kk-8: url(/assets/img/n-apartina-2kk-8.webp);
  --img-n-apartina-3kk-1: url(/assets/img/n-apartina-3kk-1.webp);
  --img-n-apartina-3kk-2: url(/assets/img/n-apartina-3kk-2.webp);
  --img-n-apartina-3kk-3: url(/assets/img/n-apartina-3kk-3.webp);
  --img-n-apartina-3kk-4: url(/assets/img/n-apartina-3kk-4.webp);
  --img-n-apartina-3kk-5: url(/assets/img/n-apartina-3kk-5.webp);
  --img-n-apartina-3kk-6: url(/assets/img/n-apartina-3kk-6.webp);
  --img-n-apartina-3kk-7: url(/assets/img/n-apartina-3kk-7.webp);
  --img-n-apartina-3kk-8: url(/assets/img/n-apartina-3kk-8.webp);
  --img-n-apartman-2kk-v-srdci-alp-1: url(/assets/img/n-apartman-2kk-v-srdci-alp-1.webp);
  --img-n-apartman-2kk-v-srdci-alp-2: url(/assets/img/n-apartman-2kk-v-srdci-alp-2.webp);
  --img-n-apartman-2kk-v-srdci-alp-3: url(/assets/img/n-apartman-2kk-v-srdci-alp-3.webp);
  --img-n-apartman-2kk-v-srdci-alp-4: url(/assets/img/n-apartman-2kk-v-srdci-alp-4.webp);
  --img-n-apartman-2kk-v-srdci-alp-5: url(/assets/img/n-apartman-2kk-v-srdci-alp-5.webp);
  --img-n-apartman-2kk-v-srdci-alp-6: url(/assets/img/n-apartman-2kk-v-srdci-alp-6.webp);
  --img-n-apartman-2kk-v-srdci-alp-7: url(/assets/img/n-apartman-2kk-v-srdci-alp-7.webp);
  --img-n-apartman-2kk-v-srdci-alp-8: url(/assets/img/n-apartman-2kk-v-srdci-alp-8.webp);
  --img-n-apartman-na-sjezdovce-plesivec-1: url(/assets/img/n-apartman-na-sjezdovce-plesivec-1.webp);
  --img-n-apartman-na-sjezdovce-plesivec-2: url(/assets/img/n-apartman-na-sjezdovce-plesivec-2.webp);
  --img-n-apartman-na-sjezdovce-plesivec-3: url(/assets/img/n-apartman-na-sjezdovce-plesivec-3.webp);
  --img-n-apartman-na-sjezdovce-plesivec-4: url(/assets/img/n-apartman-na-sjezdovce-plesivec-4.webp);
  --img-n-apartman-na-sjezdovce-plesivec-5: url(/assets/img/n-apartman-na-sjezdovce-plesivec-5.webp);
  --img-n-apartman-na-sjezdovce-plesivec-6: url(/assets/img/n-apartman-na-sjezdovce-plesivec-6.webp);
  --img-n-apartman-na-sjezdovce-plesivec-7: url(/assets/img/n-apartman-na-sjezdovce-plesivec-7.webp);
  --img-n-apartman-na-sjezdovce-plesivec-8: url(/assets/img/n-apartman-na-sjezdovce-plesivec-8.webp);
  --img-n-banga-vila-3kk-1: url(/assets/img/n-banga-vila-3kk-1.webp);
  --img-n-banga-vila-3kk-2: url(/assets/img/n-banga-vila-3kk-2.webp);
  --img-n-banga-vila-3kk-3: url(/assets/img/n-banga-vila-3kk-3.webp);
  --img-n-banga-vila-3kk-4: url(/assets/img/n-banga-vila-3kk-4.webp);
  --img-n-banga-vila-3kk-5: url(/assets/img/n-banga-vila-3kk-5.webp);
  --img-n-banga-vila-3kk-6: url(/assets/img/n-banga-vila-3kk-6.webp);
  --img-n-banga-vila-3kk-7: url(/assets/img/n-banga-vila-3kk-7.webp);
  --img-n-banga-vila-3kk-8: url(/assets/img/n-banga-vila-3kk-8.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-1: url(/assets/img/n-boutique-vila-luna-4kk-v-tropicke-zahrade-1.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-2: url(/assets/img/n-boutique-vila-luna-4kk-v-tropicke-zahrade-2.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-3: url(/assets/img/n-boutique-vila-luna-4kk-v-tropicke-zahrade-3.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-4: url(/assets/img/n-boutique-vila-luna-4kk-v-tropicke-zahrade-4.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-5: url(/assets/img/n-boutique-vila-luna-4kk-v-tropicke-zahrade-5.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-6: url(/assets/img/n-boutique-vila-luna-4kk-v-tropicke-zahrade-6.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-7: url(/assets/img/n-boutique-vila-luna-4kk-v-tropicke-zahrade-7.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-8: url(/assets/img/n-boutique-vila-luna-4kk-v-tropicke-zahrade-8.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-1: url(/assets/img/n-boutique-vila-nova-3kk-v-tropicke-zahrade-1.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-2: url(/assets/img/n-boutique-vila-nova-3kk-v-tropicke-zahrade-2.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-3: url(/assets/img/n-boutique-vila-nova-3kk-v-tropicke-zahrade-3.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-4: url(/assets/img/n-boutique-vila-nova-3kk-v-tropicke-zahrade-4.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-5: url(/assets/img/n-boutique-vila-nova-3kk-v-tropicke-zahrade-5.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-6: url(/assets/img/n-boutique-vila-nova-3kk-v-tropicke-zahrade-6.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-7: url(/assets/img/n-boutique-vila-nova-3kk-v-tropicke-zahrade-7.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-8: url(/assets/img/n-boutique-vila-nova-3kk-v-tropicke-zahrade-8.webp);
  --img-n-designovy-apartman-3kk-spanelsko-1: url(/assets/img/n-designovy-apartman-3kk-spanelsko-1.webp);
  --img-n-designovy-apartman-3kk-spanelsko-2: url(/assets/img/n-designovy-apartman-3kk-spanelsko-2.webp);
  --img-n-designovy-apartman-3kk-spanelsko-3: url(/assets/img/n-designovy-apartman-3kk-spanelsko-3.webp);
  --img-n-designovy-apartman-3kk-spanelsko-4: url(/assets/img/n-designovy-apartman-3kk-spanelsko-4.webp);
  --img-n-designovy-apartman-3kk-spanelsko-5: url(/assets/img/n-designovy-apartman-3kk-spanelsko-5.webp);
  --img-n-designovy-apartman-3kk-spanelsko-6: url(/assets/img/n-designovy-apartman-3kk-spanelsko-6.webp);
  --img-n-designovy-apartman-3kk-spanelsko-7: url(/assets/img/n-designovy-apartman-3kk-spanelsko-7.webp);
  --img-n-designovy-apartman-3kk-spanelsko-8: url(/assets/img/n-designovy-apartman-3kk-spanelsko-8.webp);
  --img-n-lintaon-hills-filipiny-1: url(/assets/img/n-lintaon-hills-filipiny-1.webp);
  --img-n-lintaon-hills-filipiny-2: url(/assets/img/n-lintaon-hills-filipiny-2.webp);
  --img-n-lintaon-hills-filipiny-3: url(/assets/img/n-lintaon-hills-filipiny-3.webp);
  --img-n-lintaon-hills-filipiny-4: url(/assets/img/n-lintaon-hills-filipiny-4.webp);
  --img-n-lintaon-hills-filipiny-5: url(/assets/img/n-lintaon-hills-filipiny-5.webp);
  --img-n-lintaon-hills-filipiny-6: url(/assets/img/n-lintaon-hills-filipiny-6.webp);
  --img-n-lintaon-hills-filipiny-7: url(/assets/img/n-lintaon-hills-filipiny-7.webp);
  --img-n-lintaon-hills-filipiny-8: url(/assets/img/n-lintaon-hills-filipiny-8.webp);
  --img-n-moderni-vila-3kk-kostarika-1: url(/assets/img/n-moderni-vila-3kk-kostarika-1.webp);
  --img-n-moderni-vila-3kk-kostarika-2: url(/assets/img/n-moderni-vila-3kk-kostarika-2.webp);
  --img-n-moderni-vila-3kk-kostarika-3: url(/assets/img/n-moderni-vila-3kk-kostarika-3.webp);
  --img-n-moderni-vila-3kk-kostarika-4: url(/assets/img/n-moderni-vila-3kk-kostarika-4.webp);
  --img-n-moderni-vila-3kk-kostarika-5: url(/assets/img/n-moderni-vila-3kk-kostarika-5.webp);
  --img-n-moderni-vila-3kk-kostarika-6: url(/assets/img/n-moderni-vila-3kk-kostarika-6.webp);
  --img-n-moderni-vila-3kk-kostarika-7: url(/assets/img/n-moderni-vila-3kk-kostarika-7.webp);
  --img-n-moderni-vila-3kk-kostarika-8: url(/assets/img/n-moderni-vila-3kk-kostarika-8.webp);
  --img-n-thajsko-la-casita-1: url(/assets/img/n-thajsko-la-casita-1.webp);
  --img-n-thajsko-la-casita-2: url(/assets/img/n-thajsko-la-casita-2.webp);
  --img-n-thajsko-la-casita-3: url(/assets/img/n-thajsko-la-casita-3.webp);
  --img-n-thajsko-la-casita-4: url(/assets/img/n-thajsko-la-casita-4.webp);
  --img-n-thajsko-la-casita-5: url(/assets/img/n-thajsko-la-casita-5.webp);
  --img-n-thajsko-la-casita-6: url(/assets/img/n-thajsko-la-casita-6.webp);
  --img-n-thajsko-la-casita-7: url(/assets/img/n-thajsko-la-casita-7.webp);
  --img-n-thajsko-la-casita-8: url(/assets/img/n-thajsko-la-casita-8.webp);
  --img-n-vila-dokola-korenec-1: url(/assets/img/n-vila-dokola-korenec-1.webp);
  --img-n-vila-dokola-korenec-2: url(/assets/img/n-vila-dokola-korenec-2.webp);
  --img-n-vila-dokola-korenec-3: url(/assets/img/n-vila-dokola-korenec-3.webp);
  --img-n-vila-dokola-korenec-4: url(/assets/img/n-vila-dokola-korenec-4.webp);
  --img-n-vila-dokola-korenec-5: url(/assets/img/n-vila-dokola-korenec-5.webp);
  --img-n-vila-dokola-korenec-6: url(/assets/img/n-vila-dokola-korenec-6.webp);
  --img-n-vila-dokola-korenec-7: url(/assets/img/n-vila-dokola-korenec-7.webp);
  --img-n-vila-dokola-korenec-8: url(/assets/img/n-vila-dokola-korenec-8.webp);
  --img-n-yamal-apartman-oman-1: url(/assets/img/n-yamal-apartman-oman-1.webp);
  --img-n-yamal-apartman-oman-2: url(/assets/img/n-yamal-apartman-oman-2.webp);
  --img-n-yamal-apartman-oman-3: url(/assets/img/n-yamal-apartman-oman-3.webp);
  --img-n-yamal-apartman-oman-4: url(/assets/img/n-yamal-apartman-oman-4.webp);
  --img-n-yamal-apartman-oman-5: url(/assets/img/n-yamal-apartman-oman-5.webp);
  --img-n-yamal-apartman-oman-6: url(/assets/img/n-yamal-apartman-oman-6.webp);
  --img-n-yamal-apartman-oman-7: url(/assets/img/n-yamal-apartman-oman-7.webp);
  --img-n-yamal-apartman-oman-8: url(/assets/img/n-yamal-apartman-oman-8.webp);
}
/* ── konec fotek nemovitostí (s160) ── */

/* Texty z fragmento.cz na detailech: nadpisy a odrážky v popisu a lokalitě (s160). */
.prose h3, .lok-txt h3 { font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.015em; margin-top: 18px; }
.prose .odrazky, .lok-txt .odrazky { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.prose .odrazky li, .lok-txt .odrazky li { line-height: 1.55; }

/* Detaily z fragmento.cz (s160): lišta na mobilu, dlouhá lokalita. */
/* Cena se na 375 px lámala na „2 083 / 000 Kč“ a tlačítko na dva řádky. */
.lista-cena b, .lista .btn { white-space: nowrap; }
@media (max-width: 479px) {
  .lista-txt { display: none; }
  .lista-cena { margin-left: 0; text-align: left; }
  .lista .btn { margin-left: auto; }
}
.lok-vic > summary { margin-top: 6px; }

/* ── Filtr výpisu, varianta A (s162) ──────────────────────────────────
   Jeden řádek: tři výběry s počty a přepínač. Na mobilu tlačítko
   „Filtry“ a spodní panel (`<dialog>`, volby se do něj stěhují). */
:root { --z-filtr-pop: 30; }
.ft { position: relative; }
@media (min-width: 700px) { .ft { z-index: var(--z-filtr); } }
.ft-rada { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ft-rada .sp { flex: 1; min-width: 0; }
.ft-btn, .ft-mob { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px;
  background: var(--plocha); border: 1px solid var(--n150); border-radius: var(--r-pill); font: inherit; font-size: var(--t2);
  font-weight: var(--w-med); color: var(--n900); white-space: nowrap; cursor: pointer;
  transition: border-color .16s ease, box-shadow .16s ease; }
.ft-btn:hover, .ft-mob:hover { border-color: var(--p300); }
.ft-btn.on, .ft-btn[aria-expanded="true"] { border-color: var(--p); box-shadow: inset 0 0 0 1px var(--p); }
.ft-n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
  background: var(--p); color: var(--tm-1); font-size: 11px; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; }
.ft-n[hidden] { display: none; }
.ft-mob .ft-n { background: var(--s); color: var(--na-zlate); }
.ft-car { width: 10px; height: 10px; opacity: .6; transition: transform .3s var(--doben); }
.ft-btn[aria-expanded="true"] .ft-car { transform: rotate(180deg); }
.ft-sw { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 6px;
  font-size: var(--t2); font-weight: var(--w-med); color: var(--n900); white-space: nowrap; cursor: pointer; }
.ft-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.ft-sw i { position: relative; flex: 0 0 auto; width: 36px; height: 22px; border-radius: var(--r-pill); background: var(--p300);   /* jezdec 3,03 : 1 (s171) */
  transition: background .2s ease; }
.ft-sw i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--plocha); box-shadow: 0 1px 2px rgb(var(--zavoj) / .25); transition: transform .25s var(--doben); }
.ft-sw input:checked + i { background: var(--p); }
.ft-sw input:checked + i::after { transform: translateX(14px); }
.ft-sw input:focus-visible + i { outline: 2px solid var(--p); outline-offset: 2px; }
.ft-pocet { font-size: var(--t2); color: var(--n700); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ft-pocet b { font-weight: var(--w-bold); color: var(--n900); }

.ft-pops { position: relative; height: 0; }
.ft-pop { position: absolute; top: 8px; left: 0; z-index: var(--z-filtr-pop); width: 320px; max-width: calc(100vw - 44px);
  background: var(--plocha); border-radius: var(--r); padding: 10px;
  box-shadow: var(--stin-popover); }
.ft-pop[hidden] { display: none; }
.ft-h { font-size: var(--t1); letter-spacing: .12em; text-transform: uppercase; color: var(--n200);
  font-weight: var(--w-bold); padding: 4px 8px 8px; }
.ft-volby { display: flex; flex-direction: column; }
.ft-opt { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px; border: 0; border-radius: var(--r-sm);
  background: none; font: inherit; font-size: var(--t3); color: var(--n900); text-decoration: none; text-align: left;
  cursor: pointer; }
.ft-opt:hover { background: var(--n50); }
.ft-opt:focus-visible { outline: 2px solid var(--p); outline-offset: -2px; }
.ft-opt .cb { flex: 0 0 auto; display: grid; place-items: center; width: 18px; height: 18px; border-radius: var(--r-sm);
  border: 1.5px solid var(--p300); transition: background .15s ease, border-color .15s ease; }
.ft-opt.on .cb { background: var(--p); border-color: var(--p); }
.ft-opt.on .cb::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--plocha); border-bottom: 2px solid var(--plocha);
  transform: translateY(-1px) rotate(-45deg); }
.ft-opt .ico { color: var(--p); }
.ft-opt .c { margin-left: auto; font-size: var(--t2); color: var(--n200); font-variant-numeric: tabular-nums; }
.ft-opt.prazdna { color: var(--n200); cursor: default; }
.ft-opt.prazdna:hover { background: none; }
.ft-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px;
  padding: 12px 8px 4px; border-top: 1px solid var(--n100); }
.ft-zrus { background: none; border: 0; padding: 0; font: inherit; font-size: var(--t2); font-weight: var(--w-med);
  color: var(--p); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.ft-zrus:hover { color: var(--p600); }

.ft-prazdno { margin-top: 14px; font-size: var(--t3); color: var(--n700); }
.ft-prazdno[hidden] { display: none; }

.ft-mob { display: none; }
@media (max-width: 699px) {
  .ft-btn, .ft-rada > .ft-sw { display: none; }
  .ft-mob { display: inline-flex; }
}

.ft-sheet { width: 100%; max-width: 100%; max-height: 88vh; margin: auto 0 0; padding: 0; border: 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--plocha); color: var(--n900); }
.ft-sheet[open] { display: flex; flex-direction: column; animation: ft-vyjet .38s var(--doben); }
.ft-sheet::backdrop { background: rgb(var(--zavoj) / .45); }
@keyframes ft-vyjet { from { transform: translateY(48px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .ft-sheet[open] { animation: none; } }
.ft-sheet-hlava { display: flex; align-items: center; gap: 14px; padding: 12px 16px 10px 20px; border-bottom: 1px solid var(--n100); }
.ft-sheet-hlava b { margin-right: auto; font-size: var(--t4); font-weight: var(--w-bold); }
.ft-x { width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--n50); font-size: 22px; line-height: 1;
  color: var(--n900); cursor: pointer; }
.ft-sheet-telo { flex: 1; overflow-y: auto; padding: 0 20px; overscroll-behavior: contain; }
.ft-sheet .ft-pop { position: static; width: auto; max-width: none; padding: 16px 0; border-radius: 0; box-shadow: none;
  border-top: 1px solid var(--n100); }
.ft-sheet .ft-pop:first-child { border-top: 0; }
.ft-sheet .ft-h { padding: 0 0 10px; }
.ft-sheet .ft-volby { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.ft-sheet .ft-opt { gap: 7px; padding: 7px 12px; border: 1px solid var(--n150); border-radius: var(--r-pill);
  font-size: var(--t2); font-weight: var(--w-med); }
.ft-sheet .ft-opt .cb { display: none; }
.ft-sheet .ft-opt .c { margin-left: 2px; font-size: var(--t1); }
.ft-sheet .ft-opt.on { background: var(--p); border-color: var(--p); color: var(--tm-1); }
.ft-sheet .ft-opt.on .c, .ft-sheet .ft-opt.on .ico { color: var(--tm-4); }
.ft-sheet .ft-opt.prazdna { opacity: .5; }
.ft-sheet .ft-foot { display: none; }
.ft-sheet .ft-sw { display: flex; flex-direction: row-reverse; justify-content: space-between; width: 100%;
  padding: 14px 0; border-top: 1px solid var(--n100); font-size: var(--t3); }
.ft-sheet-pata { padding: 12px 20px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--n100); }

/* Pás výpisu: stín s ořezem na pseudoprvku, ne na filtru (ořez zavíral výběr). */
[data-page="nemovitosti"] .filter { position: relative; z-index: var(--z-filtr); box-shadow: none; clip-path: none; }
[data-page="nemovitosti"] .filter::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--s150); box-shadow: 0 0 0 100vmax var(--s150); clip-path: inset(0 -100vmax); }
/* ── konec filtru výpisu (s162) ── */

/* ── Čitelnost textu na fotkách, Jaké to je (s164) ──────────────────────
   Zlatý měsíc sedí nad slabým koncem přechodu `::after` na všech šířkách
   (1440 px: 2,1 až 3,6 : 1). „Ráno“ pod 900 px: dva sloupce, text se láme
   na tři čtyři řádky a vyjede nad přechod `.vg`. Podklad proto nese
   popisek sám: tmavne od své horní hrany (fade = horní odsazení), takže
   sedí pod textem, ať se zalomí jakkoli, a horní část fotky zůstává čistá.
   Zlaté „Únor“ potřebuje pod sebou aspoň 80 % tmy (4,5 : 1 i nad bílou). */
.jt-season .cap { inset-inline: 0; bottom: 0; padding: 34px 15px 14px;
  background: linear-gradient(to top, rgb(var(--zavoj) / .9) 0%, rgb(var(--zavoj) / .88) calc(100% - 34px), rgb(var(--zavoj) / 0) 100%); }
@media (max-width: 899px) {
  .mood-grid.offer .mt .bd { inset-inline: 0; bottom: 0; padding: 30px 12px 11px;
    background: linear-gradient(to top, rgb(var(--zavoj-hluboky) / .9) 0%, rgb(var(--zavoj-hluboky) / .86) calc(100% - 30px), rgb(var(--zavoj-hluboky) / 0) 100%); }
}
/* ── konec čitelnosti na fotkách (s164) ── */

/* ── Formuláře a posuvníky (s165) ──────────────────────────────────────
   Poptávka na detailu: hlášky stejně jako `.formcard`, jen na bílé kartě.
   Hláška je prázdná, dokud pole neukáže chybu, a prázdná se neukazuje. */
.kp-form .chyba { display: none; font-size: var(--t2); line-height: 1.4; color: var(--er); }
.kp-form .chyba:not(:empty) { display: block; }
.kp-form .pole-chyba .fvstup { border-color: var(--er); box-shadow: inset 0 0 0 1px var(--er); }
.kp-form .souhlas { min-height: 24px; }            /* cíl klepnutí 24 px (WCAG 2.5.8), byl 23 */
.kp-form .souhlas + .chyba:not(:empty) { margin: -12px 0 16px; }
.kp-hotovo { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 26px 24px;
  scroll-margin: 96px 0; }
@media (min-width: 785px) { .kp-hotovo { padding: 34px 36px; } }
.kp-hotovo[hidden] { display: none; }
.kp-hotovo b { font-size: var(--t6); font-weight: var(--w-med); letter-spacing: -.028em; color: var(--n900); }
.kp-hotovo span { font-size: var(--t3); color: var(--n700); }

/* Posuvníky kalkulačky: nativní jezdec měl 16 px, WCAG 2.5.8 chce 24.
   Řádek 32 px, jezdec 26 px. Vybarvená část dráhy jde z `--pct`, které
   nastavuje `main.js`; bez JS je dráha jednobarevná. */
.kalk .pole input[type=range] { -webkit-appearance: none; appearance: none; height: 32px;
  background: transparent; cursor: pointer; --pct: 0%; }
.kalk .pole input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: var(--r-pill);
  background: linear-gradient(to right, var(--p) var(--pct), var(--p200) var(--pct)); }
.kalk .pole input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; margin-top: -10px; border-radius: 50%;
  background: var(--p); border: 3px solid var(--plocha); box-shadow: 0 1px 5px rgb(var(--zavoj) / .35); }
.kalk .pole input[type=range]::-moz-range-track { height: 6px; border-radius: var(--r-pill); background: var(--p200); }
.kalk .pole input[type=range]::-moz-range-progress { height: 6px; border-radius: var(--r-pill); background: var(--p); }
.kalk .pole input[type=range]::-moz-range-thumb { width: 26px; height: 26px; box-sizing: border-box; border-radius: 50%;
  background: var(--p); border: 3px solid var(--plocha); box-shadow: 0 1px 5px rgb(var(--zavoj) / .35); }
.kalk .pole input[type=range]:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; border-radius: var(--r-sm); }
/* ── konec formulářů a posuvníků (s165) ── */

/* ── Menší fotky pro karty a mobilní galerii (s166) ─────────────────
   Karta je široká nejvýš ~371 px, fotky mají 1600 px. Proměnná se
   přepisuje jen uvnitř karty a minikarty; galerie, detail a lightbox
   čtou dál plné rozlišení z :root. Galerie pod 785 px jde přes šířku
   telefonu, tam stačí taky 800 px. Generuje _build/s166_fotky_vykon.py. */
.card, .mini {
  --img-n-apartina-2kk-1: url(/assets/img/k/n-apartina-2kk-1.webp);
  --img-n-apartina-2kk-2: url(/assets/img/k/n-apartina-2kk-2.webp);
  --img-n-apartina-2kk-3: url(/assets/img/k/n-apartina-2kk-3.webp);
  --img-n-apartina-2kk-4: url(/assets/img/k/n-apartina-2kk-4.webp);
  --img-n-apartina-3kk-1: url(/assets/img/k/n-apartina-3kk-1.webp);
  --img-n-apartina-3kk-2: url(/assets/img/k/n-apartina-3kk-2.webp);
  --img-n-apartina-3kk-3: url(/assets/img/k/n-apartina-3kk-3.webp);
  --img-n-apartina-3kk-4: url(/assets/img/k/n-apartina-3kk-4.webp);
  --img-n-apartman-na-sjezdovce-plesivec-1: url(/assets/img/k/n-apartman-na-sjezdovce-plesivec-1.webp);
  --img-n-apartman-na-sjezdovce-plesivec-2: url(/assets/img/k/n-apartman-na-sjezdovce-plesivec-2.webp);
  --img-n-apartman-na-sjezdovce-plesivec-3: url(/assets/img/k/n-apartman-na-sjezdovce-plesivec-3.webp);
  --img-n-apartman-na-sjezdovce-plesivec-4: url(/assets/img/k/n-apartman-na-sjezdovce-plesivec-4.webp);
  --img-n-banga-vila-3kk-1: url(/assets/img/k/n-banga-vila-3kk-1.webp);
  --img-n-banga-vila-3kk-2: url(/assets/img/k/n-banga-vila-3kk-2.webp);
  --img-n-banga-vila-3kk-3: url(/assets/img/k/n-banga-vila-3kk-3.webp);
  --img-n-banga-vila-3kk-4: url(/assets/img/k/n-banga-vila-3kk-4.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-1: url(/assets/img/k/n-boutique-vila-luna-4kk-v-tropicke-zahrade-1.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-2: url(/assets/img/k/n-boutique-vila-luna-4kk-v-tropicke-zahrade-2.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-3: url(/assets/img/k/n-boutique-vila-luna-4kk-v-tropicke-zahrade-3.webp);
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-4: url(/assets/img/k/n-boutique-vila-luna-4kk-v-tropicke-zahrade-4.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-1: url(/assets/img/k/n-boutique-vila-nova-3kk-v-tropicke-zahrade-1.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-2: url(/assets/img/k/n-boutique-vila-nova-3kk-v-tropicke-zahrade-2.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-3: url(/assets/img/k/n-boutique-vila-nova-3kk-v-tropicke-zahrade-3.webp);
  --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-4: url(/assets/img/k/n-boutique-vila-nova-3kk-v-tropicke-zahrade-4.webp);
  --img-n-designovy-apartman-3kk-spanelsko-1: url(/assets/img/k/n-designovy-apartman-3kk-spanelsko-1.webp);
  --img-n-designovy-apartman-3kk-spanelsko-2: url(/assets/img/k/n-designovy-apartman-3kk-spanelsko-2.webp);
  --img-n-designovy-apartman-3kk-spanelsko-3: url(/assets/img/k/n-designovy-apartman-3kk-spanelsko-3.webp);
  --img-n-designovy-apartman-3kk-spanelsko-4: url(/assets/img/k/n-designovy-apartman-3kk-spanelsko-4.webp);
  --img-n-lintaon-hills-filipiny-1: url(/assets/img/k/n-lintaon-hills-filipiny-1.webp);
  --img-n-lintaon-hills-filipiny-2: url(/assets/img/k/n-lintaon-hills-filipiny-2.webp);
  --img-n-lintaon-hills-filipiny-3: url(/assets/img/k/n-lintaon-hills-filipiny-3.webp);
  --img-n-lintaon-hills-filipiny-4: url(/assets/img/k/n-lintaon-hills-filipiny-4.webp);
  --img-n-moderni-vila-3kk-kostarika-1: url(/assets/img/k/n-moderni-vila-3kk-kostarika-1.webp);
  --img-n-moderni-vila-3kk-kostarika-2: url(/assets/img/k/n-moderni-vila-3kk-kostarika-2.webp);
  --img-n-moderni-vila-3kk-kostarika-3: url(/assets/img/k/n-moderni-vila-3kk-kostarika-3.webp);
  --img-n-moderni-vila-3kk-kostarika-4: url(/assets/img/k/n-moderni-vila-3kk-kostarika-4.webp);
  --img-n-thajsko-la-casita-1: url(/assets/img/k/n-thajsko-la-casita-1.webp);
  --img-n-thajsko-la-casita-2: url(/assets/img/k/n-thajsko-la-casita-2.webp);
  --img-n-thajsko-la-casita-3: url(/assets/img/k/n-thajsko-la-casita-3.webp);
  --img-n-thajsko-la-casita-4: url(/assets/img/k/n-thajsko-la-casita-4.webp);
  --img-n-vila-dokola-korenec-1: url(/assets/img/k/n-vila-dokola-korenec-1.webp);
  --img-n-vila-dokola-korenec-2: url(/assets/img/k/n-vila-dokola-korenec-2.webp);
  --img-n-vila-dokola-korenec-3: url(/assets/img/k/n-vila-dokola-korenec-3.webp);
  --img-n-vila-dokola-korenec-4: url(/assets/img/k/n-vila-dokola-korenec-4.webp);
  --img-n-yamal-apartman-oman-1: url(/assets/img/k/n-yamal-apartman-oman-1.webp);
  --img-n-yamal-apartman-oman-2: url(/assets/img/k/n-yamal-apartman-oman-2.webp);
  --img-n-yamal-apartman-oman-3: url(/assets/img/k/n-yamal-apartman-oman-3.webp);
  --img-n-yamal-apartman-oman-4: url(/assets/img/k/n-yamal-apartman-oman-4.webp);
}
@media (max-width: 784px) {
  .gal {
    --img-detail-hero: url(/assets/img/k/detail-hero.webp);
    --img-gal-1: url(/assets/img/k/gal-1.webp);
    --img-gal-3: url(/assets/img/k/gal-3.webp);
    --img-n-apartina-2kk-1: url(/assets/img/k/n-apartina-2kk-1.webp);
    --img-n-apartina-2kk-2: url(/assets/img/k/n-apartina-2kk-2.webp);
    --img-n-apartina-2kk-3: url(/assets/img/k/n-apartina-2kk-3.webp);
    --img-n-apartina-3kk-1: url(/assets/img/k/n-apartina-3kk-1.webp);
    --img-n-apartina-3kk-2: url(/assets/img/k/n-apartina-3kk-2.webp);
    --img-n-apartina-3kk-3: url(/assets/img/k/n-apartina-3kk-3.webp);
    --img-n-apartman-na-sjezdovce-plesivec-1: url(/assets/img/k/n-apartman-na-sjezdovce-plesivec-1.webp);
    --img-n-apartman-na-sjezdovce-plesivec-2: url(/assets/img/k/n-apartman-na-sjezdovce-plesivec-2.webp);
    --img-n-apartman-na-sjezdovce-plesivec-3: url(/assets/img/k/n-apartman-na-sjezdovce-plesivec-3.webp);
    --img-n-banga-vila-3kk-1: url(/assets/img/k/n-banga-vila-3kk-1.webp);
    --img-n-banga-vila-3kk-2: url(/assets/img/k/n-banga-vila-3kk-2.webp);
    --img-n-banga-vila-3kk-3: url(/assets/img/k/n-banga-vila-3kk-3.webp);
    --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-1: url(/assets/img/k/n-boutique-vila-luna-4kk-v-tropicke-zahrade-1.webp);
    --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-2: url(/assets/img/k/n-boutique-vila-luna-4kk-v-tropicke-zahrade-2.webp);
    --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-3: url(/assets/img/k/n-boutique-vila-luna-4kk-v-tropicke-zahrade-3.webp);
    --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-1: url(/assets/img/k/n-boutique-vila-nova-3kk-v-tropicke-zahrade-1.webp);
    --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-2: url(/assets/img/k/n-boutique-vila-nova-3kk-v-tropicke-zahrade-2.webp);
    --img-n-boutique-vila-nova-3kk-v-tropicke-zahrade-3: url(/assets/img/k/n-boutique-vila-nova-3kk-v-tropicke-zahrade-3.webp);
    --img-n-designovy-apartman-3kk-spanelsko-1: url(/assets/img/k/n-designovy-apartman-3kk-spanelsko-1.webp);
    --img-n-designovy-apartman-3kk-spanelsko-2: url(/assets/img/k/n-designovy-apartman-3kk-spanelsko-2.webp);
    --img-n-designovy-apartman-3kk-spanelsko-3: url(/assets/img/k/n-designovy-apartman-3kk-spanelsko-3.webp);
    --img-n-lintaon-hills-filipiny-1: url(/assets/img/k/n-lintaon-hills-filipiny-1.webp);
    --img-n-lintaon-hills-filipiny-2: url(/assets/img/k/n-lintaon-hills-filipiny-2.webp);
    --img-n-lintaon-hills-filipiny-3: url(/assets/img/k/n-lintaon-hills-filipiny-3.webp);
    --img-n-moderni-vila-3kk-kostarika-1: url(/assets/img/k/n-moderni-vila-3kk-kostarika-1.webp);
    --img-n-moderni-vila-3kk-kostarika-2: url(/assets/img/k/n-moderni-vila-3kk-kostarika-2.webp);
    --img-n-moderni-vila-3kk-kostarika-3: url(/assets/img/k/n-moderni-vila-3kk-kostarika-3.webp);
    --img-n-thajsko-la-casita-1: url(/assets/img/k/n-thajsko-la-casita-1.webp);
    --img-n-thajsko-la-casita-2: url(/assets/img/k/n-thajsko-la-casita-2.webp);
    --img-n-thajsko-la-casita-3: url(/assets/img/k/n-thajsko-la-casita-3.webp);
    --img-n-uluwatu-bali-4kk-1: url(/assets/img/k/n-uluwatu-bali-4kk-1.webp);
    --img-n-uluwatu-bali-4kk-2: url(/assets/img/k/n-uluwatu-bali-4kk-2.webp);
    --img-n-uluwatu-bali-4kk-3: url(/assets/img/k/n-uluwatu-bali-4kk-3.webp);
    --img-n-vila-dokola-korenec-1: url(/assets/img/k/n-vila-dokola-korenec-1.webp);
    --img-n-vila-dokola-korenec-2: url(/assets/img/k/n-vila-dokola-korenec-2.webp);
    --img-n-vila-dokola-korenec-3: url(/assets/img/k/n-vila-dokola-korenec-3.webp);
    --img-n-yamal-apartman-oman-1: url(/assets/img/k/n-yamal-apartman-oman-1.webp);
    --img-n-yamal-apartman-oman-2: url(/assets/img/k/n-yamal-apartman-oman-2.webp);
    --img-n-yamal-apartman-oman-3: url(/assets/img/k/n-yamal-apartman-oman-3.webp);
  }
}
/* ── konec menších fotek (s166) ── */
/* ── „Ráno“ na mobilu v jednom sloupci (s167) ──────────────────────────
   Ve dvou sloupcích na 375 px kryl podklad citátu (s164) ~3/4 fotky. */
@media (max-width: 699px) {   /* s173: do 699 px, dřív 559 */
  .mood-grid.offer { grid-template-columns: 1fr; }
}
/* ── konec Ráno v jednom sloupci (s167) ── */

/* ── Dotykové cíle 44 px na dotyk (s173) ────────────────────────────────
   Navazuje na „Dotykové cíle na 40 px“. Jen `pointer: coarse`; kde by se
   posunula sazba, roste odsazení se záporným okrajem. */
@media (pointer: coarse) {
  .crumb a { padding-block: 13px; margin-block: -13px; }
  .logo { min-height: 44px; }
  button.chip, a.chip, .ft-btn, .ft-mob, .ft-opt, .rozcestnik a, .pr-btn, .btn { min-height: 44px; }
  .toggle button, .map-ctl button, .f-prep, .quiet-a { min-height: 44px; }
  .map-ctl button { min-width: 44px; }
  .poradit { min-height: 44px; margin-block: -11px; }
  .burger { width: 44px; height: 44px; margin-right: -8px; }
  .vic > summary, .eco-rozpad summary { min-height: 44px; }
  .kalk .pole input[type=range] { height: 44px; }
  /* krátké popisky („O nás“, „Domů“) mají plochu užší než 44 px: do šířky
     taky odsazení se záporným okrajem */
  .crumb a { padding-inline: 7px; margin-inline: -7px; }
  .head .foot-tel { padding-block: 13px; margin-block: -13px; }
  .pron-odkaz { min-height: 46px; }
  .kp-form .souhlas a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
/* ── konec dotykových cílů 44 px (s173) ── */

/* ── Hover v menu a řádek pod heroem (s174) ─────────────────────────────
   Podtržení se vysouvá zleva; aktivní stránka a otevřené megamenu ho mají
   celé. Na homepage přes video je zlaté (pravidlo s72) a text zezlátne. */
.nav > a::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px;
  background: var(--p); transform: scaleX(0); transform-origin: left center;
  transition: transform .24s var(--doben); }
.nav > a:hover::after, .nav > a:focus-visible::after,
.nav > [aria-current="page"]::after, .nav > [aria-expanded="true"]::after { transform: scaleX(1); }
[data-page="home"]:not(.mega-otevreno) .head:not(.pevna) nav > a:hover { color: var(--s200); }
@media (prefers-reduced-motion: reduce) { .nav > a::after { transition: none; } }

/* „Reálný podíl, ne právo na týden“: položky řádku nejsou flex, jinak se
   mezi tučné slovo a čárku vloží mezera `gap`. */
.proof span { display: inline-block; }
.proof svg { vertical-align: -3px; margin-right: 8px; }
/* ── konec hoveru v menu (s174) ── */

/* ── Přepínač měny (s177) ───────────────────────────────────────────────
   Tlačítko místo odkazu; aktivní měna tučně. */
button.mena { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
button.mena [data-m] { opacity: .78; }
html:not([data-mena="eur"]) button.mena [data-m="czk"], html[data-mena="eur"] button.mena [data-m="eur"] {
  opacity: 1; font-weight: var(--w-bold); }
button.mena:hover [data-m] { text-decoration: underline; text-underline-offset: 3px; }
.util button.mena { display: inline-flex; align-items: center; gap: 4px; }
.mena-drawer { padding: 4px 0 10px; }
.mena-drawer button.mena { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t3); color: var(--n900); }
.mena-drawer button.mena [data-m] { opacity: .62; }
.mena-drawer button.mena [aria-pressed] { opacity: 1; }
html:not([data-mena="eur"]) .mena-drawer button.mena [data-m="czk"], html[data-mena="eur"] .mena-drawer button.mena [data-m="eur"] { opacity: 1; color: var(--p); }
/* ── konec přepínače měny (s177) ── */

/* ── Newsletter nad patičkou (s179) ─────────────────────────────────────
   Pruh na krémovém pásu nad tmavou patičkou; text vlevo, pole vpravo,
   pod 785 px pod sebou. */
.newsletter { background: var(--s150); border-top: 1px solid var(--s200); padding: 44px 0; color: var(--n900); }
/* Jaké to je přebarvuje neutrály na kořeni pro tmavý podklad; pruh je
   světlý, proto si je tu vrací (axe: bílý text na krému). */
[data-page="jake-to-je"] .newsletter { --n900: #1E1E1E; --n700: #333333; --n200: #6B6C7F; --n150: #DADADA;
  --n100: #EFEFEF; --n50: #F5F5F5; --s700: #836A40; }
/* `[data-page="jake-to-je"] h2` a `… p` (0,1,1) barví nadpisy a odstavce
   stránky světle; tady silnější selektor s vlastní barvou. */
.newsletter .nl-nadpis { color: var(--n900); }
.newsletter .nl-pozn { color: var(--n200); }
.nl-in { display: grid; gap: 22px 48px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 785px) { .nl-in { grid-template-columns: minmax(0, 1fr) minmax(320px, 460px); } }
.nl-nadpis { font-size: var(--t6); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.2; text-wrap: balance; }
.nl-text p { margin-top: 8px; font-size: var(--t3); color: var(--n700); max-width: 52ch; }
.nl-form { display: grid; gap: 7px; }
.nl-lb { font-size: var(--t2); font-weight: var(--w-med); color: var(--n900); }
.nl-rada { display: flex; gap: 8px; flex-wrap: wrap; }
.nl-pole { flex: 1 1 200px; min-width: 0; min-height: 46px; padding: 11px 14px; border: 1px solid var(--p300);
  border-radius: var(--r-control); background: var(--plocha); color: var(--n900); font: inherit; font-size: var(--t3); }
.nl-pole:focus-visible { outline: 2px solid var(--p); outline-offset: 1px; }
.nl-form .btn { min-height: 46px; flex: 0 0 auto; }
.nl-chyba { display: none; font-size: var(--t2); color: var(--er); }
.nl-chyba:not(:empty) { display: block; }
.nl-form.nl-chybne .nl-pole { border-color: var(--er); box-shadow: inset 0 0 0 1px var(--er); }
.nl-pozn { font-size: var(--t1); color: var(--n200); }
.nl-hotovo { display: flex; flex-direction: column; gap: 4px; }
.nl-hotovo[hidden] { display: none; }
.nl-hotovo b { font-size: var(--t4); font-weight: var(--w-bold); color: var(--p); }
.nl-hotovo span { font-size: var(--t2); color: var(--n700); }
/* ── konec newsletteru (s179) ── */

/* ── Menu „Místa v menu“ (s182) ───────────────────────────────────────
   Varianta B z návrhů 15. 9. Megamenu: povaha a záměr vlevo, vpravo dlaždice
   zemí s volnými podíly (nejvýš 8), seznam všech zemí po kontinentech
   a řádek volných podílů. Zásuvka: dlaždice, sbalené kontinenty, odkazy,
   měna jako segment, zlaté „Mám zájem“. Text na fotce dlaždice si nese
   vlastní podklad (The Own Scrim Rule). Generuje _build/s182_menu_mista.py. */
.util .ks { color: var(--tm-4); }

/* Menší fotky pro dlaždice zemí bez vlastní fotky g-<země> (s166 je má jen v kartě). */
.mega, .drawer {
  --img-n-boutique-vila-luna-4kk-v-tropicke-zahrade-1: url(/assets/img/k/n-boutique-vila-luna-4kk-v-tropicke-zahrade-1.webp);
  --img-n-yamal-apartman-oman-1: url(/assets/img/k/n-yamal-apartman-oman-1.webp);
}

/* megamenu */
.mega.open { max-height: calc(100svh - 112px); overflow-y: auto; overscroll-behavior: contain; }
.mega :focus-visible { outline-color: var(--p); }
.mega .lb2 { margin-top: 16px; }
.mega li a .ico { width: 18px; height: 18px; color: var(--p400); }
.mega-zamer a { align-items: flex-start; }
.mega-zamer a .ico { margin-top: 1px; }
.mega-zamer a > span { display: flex; flex-direction: column; }
.mega .mega-zamer .n { margin-left: 0; }
.mega-zeme .lb { padding-left: 0; }
.mega-dl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
/* Pět sloupců (8 dlaždic + „všech“) až od 1280 px; pod tím by se název země uřízl, dlaždice spadnou do třetí řady. */
@media (min-width: 1280px) { .mega-dl-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.mega-dl .zt { aspect-ratio: 4 / 3; }
.zt { position: relative; display: block; border-radius: var(--r-control); overflow: hidden;
  background: var(--p600); color: var(--tm-1); transition: box-shadow .2s var(--doben); }
.zt-f { position: absolute; inset: 0; background-size: cover; background-position: center;
  transition: transform .45s var(--doben); }
.zt:hover { box-shadow: 0 0 0 2px var(--plocha), 0 0 0 4px var(--p); }
.zt:hover .zt-f { transform: scale(1.04); }
.zo { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 8px;
  padding: 30px 12px 10px; color: var(--tm-1);
  background: linear-gradient(to top, rgb(var(--zavoj) / .9) 0, rgb(var(--zavoj) / .84) calc(100% - 26px), rgb(var(--zavoj) / 0) 100%); }
.zo .flag { box-shadow: 0 0 0 1px var(--tm-linka-3); }
.zn { min-width: 0; font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.01em; line-height: 1.25; }
.zo .n { margin-left: auto; font-size: var(--t1); color: var(--tm-3); font-variant-numeric: tabular-nums; }
.zall { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; border-radius: var(--r-control);
  background: var(--p); color: var(--tm-1); padding: 12px 14px; line-height: 1.35; }
.zall:hover { background: var(--p600); color: var(--tm-1); }
.zall .q { font-size: var(--t2); color: var(--tm-3); }
.zall b { font-size: var(--t3); font-weight: var(--w-med); }
.mega-kont { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px 32px; margin-top: 22px; }
.mega-kont .lb { padding-left: 10px; margin-bottom: 2px; }
.mega-kont li a { padding-block: 4px; font-size: var(--t2); }
.mega-vol { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--n100); font-size: var(--t2); color: var(--n200); }
.mega-vol a { color: var(--p); font-weight: var(--w-med); padding-block: 4px; }
.mega-vol a:hover { color: var(--n900); }
.mega-vol .sp { flex: 1; }
/* 1040–1279 px: se sloupcem 260 px vyšla dlaždice na 136 px a „Chorvatsko“ se uřízlo. */
@media (max-width: 1279px) {
  .mega > .wrap { grid-template-columns: 220px minmax(0, 1fr); gap: 32px; }
  .mega-dl .zn { font-size: var(--t2); }
  .mega-dl .zo { padding-inline: 10px; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) { .zt, .zt-f { transition: none; } .zt:hover .zt-f { transform: none; } }

/* zásuvka */
.drawer .wrap { display: flex; flex-direction: column; padding-block: 18px 28px; }
.dr-lb { font-size: var(--t2); font-weight: var(--w-med); color: var(--n200); margin: 0 0 8px; }
.dr-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 24px; }
@media (min-width: 560px) { .dr-dl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dr-dl .zt { height: 104px; }
.dr-dl .zo { padding: 28px 10px 8px; gap: 6px; }
.dr-dl .zall { min-height: 104px; }
.drawer .zt:focus-visible, .drawer .zall:focus-visible { outline-offset: 2px; }
.dr-kont { border-top: 1px solid var(--n100); margin-bottom: 8px; }
.dr-kont-b { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; text-align: left;
  font-size: var(--t4); font-weight: var(--w-med); color: var(--n900); border-bottom: 1px solid var(--n100); }
.dr-kont-b .n { font-size: var(--t2); font-weight: var(--w-text); color: var(--n200); font-variant-numeric: tabular-nums; }
.dr-kont-b::after { content: ""; margin: 0 6px 0 auto; width: 8px; height: 8px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--doben); }
.dr-kont-b[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.dr-kont-p { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; padding: 4px 0 10px;
  border-bottom: 1px solid var(--n100); }
.dr-kont-p[hidden] { display: none; }
.dr-kont-p a { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: var(--t3); color: var(--n700); }
.dr-kont-p .n { margin-left: auto; font-size: var(--t1); color: var(--n200); font-variant-numeric: tabular-nums; }
.dr-hl a { display: flex; align-items: center; min-height: 52px; font-size: var(--t4); font-weight: var(--w-med);
  color: var(--n900); border-top: 1px solid var(--n100); }
.dr-hl a:first-child { border-top: 0; }
.dr-hl a:hover, .dr-hl a[aria-current="page"] { color: var(--p); }
.dr-mena { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px;
  border-top: 1px solid var(--n100); }
.dr-mena .dr-lb { margin: 0; }
.dr-mena .mena-drawer { padding: 0; }
.dr-mena button.mena { display: inline-flex; gap: 0; min-height: 44px; padding: 0; overflow: hidden;
  border: 1px solid var(--n150); border-radius: var(--r-control); }
.dr-mena button.mena [data-m] { display: grid; place-items: center; min-width: 58px; font-size: var(--t2);
  font-weight: var(--w-med); color: var(--n700); opacity: 1; }
html:not([data-mena="eur"]) .dr-mena button.mena [data-m="czk"],
html[data-mena="eur"] .dr-mena button.mena [data-m="eur"] { background: var(--p); color: var(--tm-1); opacity: 1; }
.dr-mena button.mena:hover [data-m] { text-decoration: none; }
.dr-cta { margin-top: 14px; min-height: 52px; font-size: var(--t3); }
@media (prefers-reduced-motion: reduce) { .dr-kont-b::after { transition: none; } }

/* Tmavá stránka Jaké to je (s126 přebarvuje neutrální tokeny, tady jen odkazy v břidlicové). */
[data-page="jake-to-je"] .mega :focus-visible { outline-color: var(--s200); }
[data-page="jake-to-je"] .mega-vol a,
[data-page="jake-to-je"] .dr-hl a[aria-current="page"] { color: var(--s200); }
[data-page="jake-to-je"] .zt:hover { box-shadow: 0 0 0 2px var(--jt-podklad), 0 0 0 4px var(--s200); }
/* ── konec menu Místa v menu (s182) ── */

/* ── Hero „Místo s adresou“ (s183) ────────────────────────────────────────
   Varianta A z návrhů 15. 9. Hero drží video, claim, obě tlačítka a fakta;
   přibývá štítek místa (vpravo dole, pod 1040 px nahoře). Závoj jen pod
   textem. Generuje _build/s183_hero_misto.py. */
[data-page="home"] .hero { overflow: hidden; }
.hero .proof span { font-size: var(--t3); color: var(--tm-2); }
.hero .proof svg { width: 20px; height: 20px; color: var(--tm-4); vertical-align: -5px; margin-right: 10px; }

/* štítek místa */
.hero-misto { position: absolute; z-index: 4; display: grid; align-items: center;
  background: var(--plocha-sklo); color: var(--n900); border-radius: var(--r);
  box-shadow: 0 6px 22px rgb(var(--zavoj) / .2); }
.hero-misto .hm-mt { display: contents; }
.hero-misto .hm-th { grid-area: th; border-radius: var(--r-sm); background-size: cover; background-position: center; }
.hero-misto .hm-l { grid-area: l; font-size: var(--t1); line-height: 1.4; color: var(--n200); }
.hero-misto .hm-t { grid-area: t; font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.017em; line-height: 1.3; }
.hero-misto .hm-d { grid-area: d; font-size: var(--t2); color: var(--n700); }
.hero-misto .hm-c { white-space: nowrap; }
.hero-misto a { color: var(--p); font-weight: var(--w-med); white-space: nowrap; }
.hero-misto a:hover { color: var(--n900); }
.hero .hero-misto :focus-visible { outline-color: var(--p); }
.hero-pauza { grid-area: pa; display: grid; place-items: center; border-radius: 50%;
  background: var(--p); color: var(--tm-1); transition: background .18s ease; }
.hero-pauza[hidden] { display: none; }
.hero-pauza:hover { background: var(--p600); }
.hero-pauza svg { width: 10px; height: 10px; }
.hero-pauza .pl, .hero-pauza[aria-pressed="true"] .pa { display: none; }
.hero-pauza[aria-pressed="true"] .pl { display: block; }
@media (prefers-reduced-motion: reduce) { .hero-pauza { transition: none; } }

@media (min-width: 1040px) {
  [data-page="home"] .hero .bg { align-items: stretch; }
  [data-page="home"] .hero .in { display: flex; flex-direction: column; align-items: flex-start; padding-block: 24px 36px; }
  [data-page="home"] .hero .in h1 { margin-top: auto; }
  [data-page="home"] .hero .proof { align-self: stretch; margin-top: auto; gap: 9px 32px;
    margin-right: 432px; }
  .hero-misto { right: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad))); bottom: 36px;
    max-width: 400px; grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "th pa l" "th t t" "th d d"; row-gap: 1px; padding: 10px 20px 10px 10px; }
  .hero-misto .hm-th { width: 92px; height: 69px; margin-right: 14px; }
  .hero-pauza { width: 24px; height: 24px; margin-right: 8px; }
  .hero-misto .hm-d a { margin-left: 10px; }
}

@media (max-width: 1039px) {
  [data-page="home"] .hero .bg { align-items: flex-end; padding-top: 200px; padding-bottom: 0; }
  [data-page="home"] .hero .bg::after {
    background: linear-gradient(180deg, rgb(var(--zavoj-noc) / .34) 0%, rgb(var(--zavoj-noc) / 0) 30%); }
  /* Vlastní podklad textu přes celou šířku; ořízne ho `overflow` hera. */
  [data-page="home"] .hero .in { padding-block: 110px 32px; }
  [data-page="home"] .hero .in::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -50vw; right: -50vw;
    background: linear-gradient(to top, rgb(var(--zavoj-noc) / 1) 0%, rgb(var(--zavoj-noc) / .92) calc(100% - 90px), rgb(var(--zavoj-noc) / 0) 100%); }
  [data-page="home"] .hero .sub { color: var(--tm-2); margin-top: 16px; }
  [data-page="home"] .hero .cta { margin-top: 24px; }
  [data-page="home"] .hero .proof { flex-direction: column; gap: 10px; }
  .hero-misto { top: 124px; left: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
    right: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
    grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "pa l ar" "pa t ar";
    column-gap: 12px; padding: 8px 14px 8px 8px; }
  .hero-misto .hm-th { grid-area: pa; width: 44px; height: 44px; }
  .hero-misto:has(.hero-pauza:not([hidden])) .hm-th { display: none; }
  .hero-pauza { position: relative; z-index: 1; width: 44px; height: 44px; }
  .hero-pauza svg { width: 14px; height: 14px; }
  .hero-misto .hm-d { display: contents; }
  .hero-misto .hm-c { display: none; }
  /* Celý štítek je odkaz: plocha odkazu se roztáhne přes štítek, tlačítko leží nad ní. */
  .hero-misto .hm-d a { grid-area: ar; font-size: var(--t4); }
  .hero-misto .hm-d a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .hero-misto .hm-dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (max-width: 619px) {
  [data-page="home"] .hero .cta { flex-direction: column; gap: 10px; }
  [data-page="home"] .hero .cta .btn { width: 100%; min-height: 52px; }
}
@media (pointer: coarse) and (min-width: 1040px) {
  .hero-pauza { width: 44px; height: 44px; margin-block: -10px; }
  .hero-misto .hm-d a { display: inline-block; padding-block: 12px; margin-block: -12px; }
}
/* ── konec hera Místo s adresou (s183) ── */

/* ── Karta „Klidná karta“ (s184) ─────────────────────────────────────────
   Varianta A z návrhů 15. 9. Fotka a tělo, cena se splátkami pod linkou,
   stavy bez alarmové červené a bez zlaté. Generuje _build/s184_karta_klidna.py. */
.card .tl { align-items: flex-start; }
.card .karta-pronajem { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; white-space: nowrap;
  background: var(--plocha-sklo); border-radius: var(--r-pill); padding: 5px 10px; box-shadow: var(--stin-chip); }
.card .kpr-lb { font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .05em; text-transform: uppercase; color: var(--s700); }
.card .kpr-loga { display: inline-flex; gap: 5px; align-items: center; }
.card .kpr-loga .pr-logo { width: 14px; height: 14px; }
.card .tl .chip.soon { margin-left: auto; font-weight: var(--w-bold); }

.card .bd { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 18px 22px; }
.card .ttl { font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.017em; line-height: 1.25; text-wrap: pretty; }
.card .adr { display: flex; flex-direction: column; gap: 10px; font-size: var(--t2); color: var(--n200); }
.card .parametry { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--n700); font-variant-numeric: tabular-nums; }
.card .parametry > span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.card .parametry svg { width: 16px; height: 16px; color: var(--p); flex: none; }
.card .ev { margin-top: 6px; font-family: var(--serif); font-style: italic; font-size: var(--t4); line-height: 1.38; color: var(--p); }
.card .ev:empty { display: none; }
/* Splátky vždy pod cenou (s202): stejný tvar na každé šířce karty, pás drží 84 px. */
.card .roz { display: grid; justify-items: start; align-content: start; gap: 7px;
  min-height: 84px; padding: 15px 22px 18px; border-top: 1px solid var(--n100); }
.card .cena { font-size: 23px; font-weight: var(--w-bold); letter-spacing: -.03em; line-height: 1.1;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--n900); }
.card .cena i { font-style: normal; font-size: var(--t2); font-weight: var(--w-med); letter-spacing: 0; margin-right: 5px; color: var(--n200); }
.card .cena.tlumena { font-size: var(--t4); font-weight: var(--w-med); letter-spacing: 0; color: var(--n200); }
.card .karta-spl { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t2); font-weight: var(--w-med);
  line-height: 1.4; color: var(--p); white-space: nowrap; cursor: pointer; }
.card .karta-spl svg { width: 16px; height: 16px; flex: none; }
.card .karta-spl:hover, .card .karta-spl.s202-aktivni { text-decoration: underline; text-underline-offset: 3px; }
/* Dotyk a úzké displeje: řádek splátek má 44 px vlastní plochy, bez záporného
   okraje přes cenu; mezera a spodní odsazení pásu to vyrovnají (s202). */
@media (pointer: coarse), (max-width: 699px) {
  .card .roz { gap: 0; padding-bottom: 6px; }
  .card .karta-spl { min-height: 44px; }
}

/* prodáno: bílý štítek přes zašedlou fotku, text ztlumený barvou */
.sold-stamp { position: absolute; z-index: var(--z-karta-razitko); left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: var(--plocha-sklo); color: var(--n900); border-radius: var(--r-control); padding: 9px 18px 10px;
  box-shadow: 0 6px 20px rgb(var(--zavoj) / .3); text-align: center; white-space: nowrap; pointer-events: none;
  font-size: var(--t3); font-weight: var(--w-bold); letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.sold-stamp small { display: block; font-size: var(--t1); font-weight: var(--w-text); letter-spacing: 0; line-height: 1.4;
  text-transform: none; color: var(--n200); }
.card.sold .parametry, .card.sold .parametry svg { color: var(--n200); }
.card.sold .kpr-lb { color: var(--n200); }
.card.sold .kpr-loga { filter: grayscale(1); opacity: .6; }

/* Stejný údaj ve stejné výšce (dřív s87): fotka, název, místo, věta, cena. */
@supports (grid-template-rows: subgrid) {
  .grid > .card { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0; }
  .grid > .card > .bd { display: contents; }
  .grid > .card > .bd > * { padding-inline: 22px; }
  .grid > .card > .bd > .ttl { padding-top: 18px; }
  .grid > .card > .bd > .adr { padding-top: 6px; }
  .grid > .card > .bd > .ev { display: block; margin-top: 0; padding-top: 12px; padding-bottom: 18px; }
  .grid > .card > .bd > .ev:empty { padding-top: 0; }
}
@media (max-width: 619px) {
  .card .bd { padding: 16px 18px; }
  .card .roz { padding: 14px 18px 16px; }
  .grid > .card > .bd > * { padding-inline: 18px; }
  .grid > .card > .bd > .ttl { padding-top: 16px; }
  .grid > .card > .bd > .ev { padding-bottom: 16px; }
}

/* Poznámka pod nadpisem nabídky: „podíl 1/8 · 44 nocí“ se říká jednou, ne na každé kartě. */
.sec-head .poz { font-size: var(--t2); color: var(--n200); margin-top: 8px; }
/* ── konec Klidné karty (s184) ── */

/* ── Nálada „Rok a pět rán“ (s185) ──────────────────────────────────────
   Jedna tmavá sekce: nadpis, věta o 52 týdnech a pás roku, pod linkou pět
   míst s citátem pod fotkou (bez závoje, text drží 4,5 : 1 na --p).
     do 699 px     rok 13 × 4, první místo velké, další řádky s náhledem 88 px
     700–1039 px   rok v řadě, první místo 16 : 9, řádky ve dvou sloupcích
     1040 px +     pět sloupců, fotky 4 : 5 */
.nal-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 940px) { .nal-top { grid-template-columns: 5fr 7fr; gap: 56px; align-items: end; } }
.nal-top .h2 { margin-top: 0; }
.nal-rok .lead { margin-top: 0; max-width: 62ch; color: var(--tm-2); }
.nal .year { gap: 3px; margin-top: 22px; }
.nal .year i { height: 40px; border-radius: var(--r-xs); background: var(--tm-plocha-2); }
.nal .year i.mine { background: var(--s); }
.motion .nal .year.arm:not(.lit) i.mine { background: var(--tm-plocha-2); }
.nal .yearleg { gap: 8px 22px; margin-top: 12px; color: var(--tm-4); }
.nal-sw-moje { background: var(--s); }
.nal-sw-ostatni { background: var(--tm-plocha-2); box-shadow: inset 0 0 0 1px var(--tm-linka-3); }
@media (max-width: 699px) {
  .nal .year { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); margin-top: 18px; }
  .nal .year i { height: 18px; }
  .nal .yearleg { flex-direction: column; gap: 6px; }
}
.nal-mh { display: flex; align-items: center; gap: 22px; margin-top: 44px; padding-top: 22px;
  border-top: 1px solid var(--tm-linka-2); scroll-margin-top: 90px; }
@media (min-width: 700px) { .nal-mh { margin-top: 64px; padding-top: 28px; } }
.nal-mh .sp { flex: 1; min-width: 0; }
.nal-h3 { font-size: var(--t5); font-weight: var(--w-med); letter-spacing: -.017em; line-height: 1.25; color: var(--tm-1); }
.nal-mista { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
.nal-mista li { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--tm-linka-1); }
.nal-ph { display: block; aspect-ratio: 1; border-radius: var(--r); background: var(--p600) center / cover no-repeat; }
.nal-q { font-family: var(--serif); font-style: italic; font-weight: var(--w-text); font-size: var(--t4);
  line-height: 1.32; color: var(--tm-1); text-wrap: pretty; }
.nal-pl { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--t1); line-height: 1.4; color: var(--tm-4); }
.nal .flag { box-shadow: 0 0 0 1px var(--tm-linka-3); }
.nal-mista li:first-child { display: block; border-top: 0; padding-top: 0; }
.nal-mista li:first-child .nal-ph { aspect-ratio: 4 / 3; }
.nal-mista li:first-child .nal-q { font-size: var(--t5); margin-top: 14px; }
.nal-mista li:first-child .nal-pl { font-size: var(--t2); margin-top: 8px; }
.nal-cta-d { display: none; }
.nal-cta-m { margin-top: 22px; min-height: 48px; }
@media (min-width: 700px) {
  .nal-cta-d { display: inline-flex; }
  .nal-cta-m { display: none; }
}
@media (min-width: 700px) and (max-width: 1039px) {
  .nal-mista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .nal-mista li { grid-template-columns: 120px minmax(0, 1fr); }
  .nal-mista li:first-child { grid-column: 1 / -1; padding-bottom: 14px; }
  .nal-mista li:first-child .nal-ph { aspect-ratio: 16 / 9; }
  .nal-mista li .nal-q { font-size: var(--t5); }
  .nal-mista li .nal-pl { font-size: var(--t2); margin-top: 8px; }
}
@media (min-width: 1040px) {
  .nal-mista { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
  .nal-mista li, .nal-mista li:first-child { display: block; padding: 0; border-top: 0; }
  .nal-mista li .nal-ph, .nal-mista li:first-child .nal-ph { aspect-ratio: 4 / 5; }
  .nal-mista li .nal-q, .nal-mista li:first-child .nal-q { font-size: var(--t5); margin-top: 14px; }
  .nal-mista li .nal-pl, .nal-mista li:first-child .nal-pl { font-size: var(--t2); margin-top: 8px; }
}
/* ── konec nálady (s185) ── */

/* ── Princip i čísla na jedné ploše (s186) ──────────────────────────────
   Vlevo nadpis a pět vět o mechanismu (přestěhované z „Ne dovolená…“),
   vpravo bílý list se čtyřmi řádky a disclaimerem, pod tím srovnání
   s pražským bytem. Pod 1040 px list pod větami, pod 700 px řádky
   bez sloupce štítků a tlačítko přes šířku. */
.pri-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
@media (min-width: 1040px) { .pri-two { grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } }
.pri-model .h2 { margin-top: 0; }
.pri-vety { margin-top: 22px; }
@media (min-width: 1040px) { .pri-vety { margin-top: 28px; } }
.pri-vety p { font-size: var(--t5); line-height: 1.32; letter-spacing: -.017em; color: var(--n700);
  padding: 13px 0; border-top: 1px solid var(--s200); max-width: 40ch; text-wrap: balance; }
.pri-vety p:first-child { border-top: 0; padding-top: 0; }
.pri-vety b { color: var(--n900); font-weight: var(--w-bold); }
.pri-odk { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--s200);
  font-size: var(--t3); color: var(--n700); }
.pri-odk p { max-width: 48ch; }
.pri-odk p + p { margin-top: 10px; }
/* Odkaz v řádku textu: plocha 44 px odsazením se záporným okrajem, sazba stojí.
   `.pri .pri-odk p a` (0,2,2) kvůli `p a:not(.btn):not(.quiet-a)` s `padding-block: 4px`. */
.pri .pri-odk p a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--p);
  font-weight: var(--w-med); white-space: nowrap; }
.pri .pri-odk p a:hover { color: var(--n900); }
.pri-list { background: var(--plocha); border-radius: var(--r); padding: 4px 18px 20px; margin-inline: -8px; }
@media (min-width: 700px) { .pri-list { padding: 6px 32px 24px; margin-inline: 0; } }
.pri-cap { font-size: var(--t4); color: var(--n700); padding: 18px 0; max-width: none; }
.pri-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 28px; padding: 16px 0; border-top: 1px solid var(--n100); }
@media (min-width: 700px) {
  .pri-row { grid-template-columns: 180px minmax(0, 1fr); padding: 20px 0; }
  .pri-row .lb { grid-row: span 2; padding-top: 5px; }
}
.pri-row .lb { font-size: var(--t2); font-weight: var(--w-med); color: var(--n200); line-height: 1.4; }
.pri-row .vl { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.25; color: var(--p); }
.pri-row .vl .cena-m, .pri-nw { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pri-row .d { font-size: var(--t3); color: var(--n700); margin-top: 6px; max-width: 56ch; }
.pri-cislo { font-weight: var(--w-bold); color: var(--n900); white-space: nowrap; }
.pri-list .fine { border-top: 1px solid var(--n100); padding-top: 16px; }
.pri-srov { margin-top: 36px; padding: 20px 0; gap: 18px 28px; border-color: var(--s200); }
@media (min-width: 1040px) { .pri-srov { margin-top: 48px; padding: 24px 0; } }
.pri-srov .t { font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.017em; line-height: 1.25; color: var(--n900); }
@media (min-width: 700px) { .pri-srov .t { font-size: var(--t5); } }
.pri-srov .s { margin-top: 4px; }
@media (max-width: 699px) {
  .pri-srov { flex-direction: column; align-items: stretch; }
  .pri-srov .sp { display: none; }
  .pri-srov .btn { width: 100%; min-height: 48px; }
}
/* ── konec principu (s186) ── */

/* ── Mapa a rejstřík zemí (s187) ────────────────────────────────────────
   Leaflet mapa v panelu s legendou, pod ní všechny země z katalogu podle
   kontinentů. Legenda je na bílé (tlumená šedá na podkladu mapy by měla
   4,47 : 1). Řádek 60 px (od 1040 px 56 px), tlačítko pod 1040 px pod
   rejstříkem. Prodaná cedulka jen tady, výpis si nechává svou. */
.zem .sec-head { margin-bottom: 24px; }
@media (min-width: 700px) { .zem .sec-head { margin-bottom: 36px; } }
.zem .sec-head .h2 { margin-top: 0; }
.zem-mapa { border: 1px solid var(--n150); border-radius: var(--r); overflow: hidden; background: var(--mapa-podklad); }
.zem-mapa .mapwrap { border: 0; border-radius: 0; }
.zem-mapa .mapwrap .mapa { height: clamp(260px, 38vw, 480px); }
.zem-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 14px 11px; background: var(--plocha);
  border-top: 1px solid var(--n150); font-size: var(--t1); line-height: 1.4; color: var(--n200); }
@media (min-width: 700px) { .zem-leg { padding: 11px 20px 12px; } }
.zem-leg li { display: inline-flex; align-items: center; gap: 7px; }
.zem-sw { width: 18px; height: 10px; border-radius: var(--r-pill); flex: 0 0 auto; }
.zem-sw-v { background: var(--plocha); box-shadow: inset 0 0 0 1px rgb(var(--zavoj) / .3), 0 1px 3px rgb(var(--zavoj) / .22); }
.zem-sw-p { background: var(--n50); box-shadow: inset 0 0 0 1px var(--n150); }
.zem-sw-b { background: var(--s150); border: 1px dashed var(--s600); }
/* Tlumená šedá na --n50 má 4,77 : 1; na --n100 jen 4,47 (axe). */
.zem .mk-pil.prodano { background: var(--n50); color: var(--n200); font-weight: var(--w-text); }
.zem .mk-pil.prodano:hover { background: var(--p); border-color: var(--p); color: var(--tm-1); }
.zem .mk-pil.prodano.zvyr { background: var(--s); border-color: var(--s600); color: var(--p600); }
.zem-rej { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
@media (min-width: 700px) { .zem-rej { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 40px; margin-top: 36px; } }
@media (min-width: 1040px) { .zem-rej { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.zem-kh { font-size: var(--t2); font-weight: var(--w-med); line-height: 1.4; color: var(--n200); padding-bottom: 8px; }
.zem-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 0 12px; align-items: center;
  min-height: 60px; padding: 10px; margin: 0 -10px; border-top: 1px solid var(--n100); border-radius: var(--r-sm);
  color: var(--n900); transition: background-color .16s ease; }
@media (min-width: 1040px) { .zem-row { min-height: 56px; } }
.zem-row:hover, .zem-row.zvyr { background: var(--s50); }
.zem-row:hover b, .zem-row.zvyr b { color: var(--p); }
.zem-nm { min-width: 0; }
.zem-nm b { display: block; font-size: var(--t3); font-weight: var(--w-med); line-height: 1.3; }
.zem-nm i { display: block; font-style: normal; font-size: var(--t2); line-height: 1.35; color: var(--n200); }
.zem-c { font-size: var(--t2); color: var(--n700); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.zem-prodano { color: var(--n200); }
.zem-brzy { padding: 3px 10px; border-radius: var(--r-pill); background: var(--s150); color: var(--s700);
  font-size: var(--t1); font-weight: var(--w-med); }
.zem-cta-d { margin-top: 24px; }
.zem-cta-m { margin-top: 8px; }
.zem-cta-m .btn { min-height: 48px; }
@media (min-width: 700px) { .zem-cta-m { margin-top: 24px; } .zem-cta-m .btn { width: auto; min-height: 0; } }
@media (max-width: 1039px) { .zem-cta-d { display: none; } }
@media (min-width: 1040px) { .zem-cta-m { display: none; } }
/* ── konec mapy a rejstříku zemí (s187) ── */

/* ── Příběhy „Čtyři hlasy bez krabic“ (s188) ────────────────────────────
   Citát je hlas, ne karta: Cormorant kurzíva přímo na ploše, vlasová linka,
   pod ním náhled fotky, jméno a místo. Od 900 px dva sloupce; pod 900 px
   na úvodní stránce jen dva citáty (`.hlas-navic` skryté), pod 700 px
   tlačítko přes šířku. `.hlasy-svetle` je stránka Příběhy na papíru. */
.hlasy-head { margin-bottom: 0; align-items: center; }
.hlasy-head .h2 { margin-top: 0; }
.hlasy { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
@media (min-width: 900px) { .hlasy { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; margin-top: 40px; } }
.hlas { margin: 0; padding: 24px 0 26px; border-top: 1px solid var(--tm-linka-2); }
@media (min-width: 900px) { .hlas { padding: 30px 0 36px; } }
.hlas blockquote { margin: 0; }
.hlas blockquote p { font-family: var(--serif); font-style: italic; font-weight: var(--w-text); font-size: var(--t5);
  line-height: 1.42; color: var(--tm-1); max-width: 52ch; text-wrap: pretty; }
.hlas figcaption { display: flex; align-items: center; gap: 16px; margin-top: 22px; }
.hlas-th { flex: 0 0 auto; width: 72px; height: 54px; border-radius: var(--r-sm); background: var(--p600) center / cover no-repeat; }
@media (min-width: 700px) { .hlas-th { width: 96px; height: 72px; } }
.hlas-kdo { min-width: 0; }
.hlas-kdo b { display: block; font-size: var(--t3); font-weight: var(--w-med); line-height: 1.3; color: var(--tm-1); }
.hlas-kdo small { display: block; font-size: var(--t2); line-height: 1.4; color: var(--tm-4); }
.hlasy-cta-m { margin-top: 4px; }
.hlasy-cta-m .btn { min-height: 48px; }
@media (max-width: 699px) { .hlasy-cta-d { display: none; } }
@media (min-width: 700px) { .hlasy-cta-m { display: none; } }
@media (max-width: 899px) { .hlas-navic { display: none; } }
.hlasy-svetle { margin-top: 8px; }
.hlasy-svetle .hlas { border-top-color: var(--n150); }
.hlasy-svetle .hlas blockquote p, .hlasy-svetle .hlas-kdo b { color: var(--n900); }
.hlasy-svetle .hlas-kdo small { color: var(--n200); }
.hlasy-svetle .hlas-th { background-color: var(--n100); }
/* ── konec příběhů (s188) ── */

/* ── Filtry A: země na očích (s189) ──────────────────────────────────────
   Varianta A z návrhů 15. 9. Země jsou řada chipů s vlajkou a počtem hned
   pod nadpisem (`.ft-zeme`, sourozenec za `.phead`, stejný krém), vybraná
   v borovicové břidlici. Pod nimi jedna řada za linkou v pískovém závoji.
   Pilulky aktivních filtrů odpadly: stav nese chip a tlačítko osy.
   Na mobilu je pás posuvný k okrajům okna, lišta Filtry | Mřížka / Na mapě
   lepí nahoře (pod vrácenou hlavičkou o její výšku níž) a počet se
   „Zrušit filtry“ stojí pod ní na papíru (`.ft-stav`). */
:root { --vyska-hlavy-mobil: 73px; }   /* hlavička pod 700 px: 72 px + linka */
.ft-zeme { background: var(--s150); }
.ft-zeme-pas { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 18px; }
.ft-zeme .ft-zc { display: inline-flex; gap: 8px; min-height: 40px; padding: 8px 14px 8px 12px;
  border: 1px solid var(--n150); border-radius: var(--r-pill); background: var(--plocha);
  font-size: var(--t2); font-weight: var(--w-med); line-height: 1.2; white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.ft-zeme .ft-zc:hover { background: var(--plocha); border-color: var(--p300); }
.ft-zeme .ft-zc .c { margin-left: 0; font-size: var(--t2); font-weight: var(--w-text); color: var(--n200); }
.ft-zeme .ft-zc.on { background: var(--p); border-color: var(--p); color: var(--tm-1); }
.ft-zeme .ft-zc.on:hover { background: var(--p600); border-color: var(--p600); }
.ft-zeme .ft-zc.on .c { color: var(--tm-4); }
.ft-zeme .ft-zc.on .flag { box-shadow: 0 0 0 1px var(--tm-linka-3); }
.ft-zeme .ft-zc:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.ft-zeme .ft-zc.prazdna, .ft-zeme .ft-zc.prazdna:hover { color: var(--n200); border-color: var(--n100); }
@media (prefers-reduced-motion: reduce) { .ft-zeme .ft-zc { transition: none; } }

[data-page="nemovitosti"] .ft-rada { border-top: 1px solid var(--s200); padding: 12px 0 14px; }
.ft-rada .ft-zrus-vse { min-height: 40px; padding: 0 6px; }
/* Když se řada na tabletu zalomí, přepínač zůstane vpravo. */
.ft-rada .toggle { margin-left: auto; }
.ft-rada .toggle button { white-space: nowrap; }
.ft-stav { display: none; }

@media (max-width: 699px) {
  .ft-zeme-pas { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--pad)); padding: 8px var(--pad) 14px; scroll-padding-inline: var(--pad);
    scrollbar-width: none; }
  .ft-zeme-pas::-webkit-scrollbar { display: none; }
  .ft-zeme .ft-zc { min-height: 44px; padding: 8px 16px 8px 12px; }
  [data-page="nemovitosti"] .filter { position: sticky; top: 0; transition: top .26s ease; }
  [data-page="nemovitosti"]:has(> .head:not(.away)) .filter { top: var(--vyska-hlavy-mobil); }
  [data-page="nemovitosti"] .ft-rada { flex-wrap: nowrap; padding: 10px 0; }
  .ft-mob { min-height: 44px; }
  .ft-rada .toggle { display: inline-flex; margin-left: auto; }
  .ft-rada .toggle button { min-height: 44px; }
  .ft-rada .ft-pocet, .ft-rada .ft-zrus-vse { display: none; }
  /* Mřížka i mapa mají v markupu `margin-top: 48px`; řádek s počtem je
     už odsazení výsledků, proto se k nim přitáhne. */
  .ft-stav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; margin-bottom: -22px; }
  .ft-stav .ft-zrus { min-height: 44px; }
}
@media (max-width: 699px) and (prefers-reduced-motion: reduce) { [data-page="nemovitosti"] .filter { transition: none; } }
[data-zrus-vse][hidden] { display: none; }
/* ── konec filtrů A (s189) ── */

/* ── Detail A: místo a cena v jednom záhlaví (s190) ─────────────────────
   Varianta A z návrhů 15. 9. Název a řádek parametrů nad galerií, galerie
   ve dvou třetinách a cenový panel vedle ní; levý sloupec `.two` pokračuje
   videem a popisem, panel zůstává lepivý. Pronájem je tichý řádek pod
   galerií. Pod 900 px se pořadí skládá přes `display: contents`: název,
   místo, galerie, parametry, panel, pronájem, zbytek. */
[data-page="detail"] .two { margin-top: 10px; }
@media (min-width: 900px) {
  [data-page="detail"] .two { grid-template-columns: minmax(0, 1fr) minmax(300px, 410px); gap: 40px; }
}
.d-uvod { display: grid; gap: 18px; min-width: 0; }
.d-uvod h1 { font-size: var(--t7); font-weight: var(--w-bold); letter-spacing: -.025em; line-height: 1.18; text-wrap: balance; }
.d-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; margin-top: -6px; }
.d-misto { font-size: var(--t4); line-height: 1.3; color: var(--n700); }
.d-meta > .d-fakta { margin-left: 22px; padding-left: 22px; border-left: 1px solid var(--n150); }
.d-fakta { display: flex; flex-wrap: wrap; gap: 10px 0; margin: 0; }
.d-fakta > div { display: flex; flex-direction: column; line-height: 1.25;
  margin-right: 22px; padding-right: 22px; border-right: 1px solid var(--n100); }
.d-fakta > div:last-child { margin-right: 0; padding-right: 0; border-right: 0; }
.d-fakta dt { font-size: var(--t1); color: var(--n200); }
.d-fakta dd { margin: 0; font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.017em;
  white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Užší levý sloupec (900–1279 px): místo nad parametry, jinak se řádek
   zalomí za místem a svislá linka zůstane viset na začátku druhé řady. */
@media (min-width: 900px) and (max-width: 1279px) {
  .d-meta { flex-direction: column; align-items: flex-start; gap: 8px; }
  .d-meta > .d-fakta { margin-left: 0; padding-left: 0; border-left: 0; }
  .d-fakta > div { margin-right: 16px; padding-right: 16px; }
}

/* Galerie ve sloupci: zaoblená, výška podle šířky. */
[data-page="detail"] .d-uvod .gal { gap: 6px; border-radius: var(--r); overflow: hidden; }
@media (min-width: 785px) { [data-page="detail"] .d-uvod .gal { height: clamp(340px, 36vw, 520px); } }
@media (max-width: 784px) {
  [data-page="detail"] .d-uvod .gal { grid-template-columns: 1fr 1fr; gap: 5px; }
  [data-page="detail"] .d-uvod .gal > button:not(.vic-fotek) { min-height: 0; height: clamp(112px, 30vw, 200px); }
  [data-page="detail"] .d-uvod .gal > button:not(.vic-fotek):first-child { grid-column: 1 / -1; height: clamp(236px, 63vw, 420px); }
  /* Třetí náhled nahradí „Zobrazit 8 fotek“ se stejnou fotkou pod závojem,
     takže viditelný text je zároveň jménem tlačítka. */
  [data-page="detail"] .d-uvod .gal > button[data-otevri="2"]:not(.vic-fotek) { display: none; }
  [data-page="detail"] .d-uvod .gal .vic-fotek { position: relative; right: auto; bottom: auto; z-index: auto;
    display: grid; place-items: center; min-height: 0; margin: 0; padding: 8px; border: 0; border-radius: 0; box-shadow: none;
    background: linear-gradient(rgb(var(--zavoj) / .7), rgb(var(--zavoj) / .7)), var(--vic-bg) center / cover no-repeat;
    color: var(--tm-1); font-size: var(--t2); font-weight: var(--w-med); letter-spacing: 0; text-transform: none; }
  [data-page="detail"] .d-uvod .gal .vic-fotek:focus-visible { outline: 2px solid var(--p); outline-offset: -4px; }
}

/* Pronájem: ověřitelný fakt, ne nejhlasitější prvek stránky. */
.pronajem { border-top: 1px solid var(--n100); }
.pronajem-in { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; padding-top: 14px; }
.pr-slovo { display: grid; gap: 1px; flex: 1 1 240px; line-height: 1.4; }
.pr-lb { font-size: var(--t3); font-weight: var(--w-med); color: var(--n900); }
.pr-txt { margin: 0; font-size: var(--t2); color: var(--n200); }
.pr-odkazy { display: flex; gap: 10px; flex-wrap: wrap; }
.pr-btn { display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 14px;
  border: 1px solid var(--n150); border-radius: var(--r-control); background: var(--plocha);
  font-size: var(--t2); font-weight: var(--w-med); color: var(--n900); white-space: nowrap;
  transition: border-color .15s ease; }
.pr-btn:hover { border-color: var(--p300); color: var(--n900); }
.pr-btn .pr-logo { width: 18px; height: 18px; flex: 0 0 auto; }
.pr-btn .ar { color: var(--p); }
@media (prefers-reduced-motion: reduce) { .pr-btn { transition: none; } }
@media (max-width: 699px) {
  .pronajem-in { display: grid; gap: 10px; }
  .pr-odkazy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pr-btn { min-height: 44px; padding: 8px 12px; }
  .pr-btn .ar { margin-left: auto; }
  .pr-web { grid-column: 1 / -1; }
}

/* Cenový panel */
[data-page="detail"] .panel { padding: 28px 28px 24px; gap: 16px; }
[data-page="detail"] .panel .split .lb { font-size: var(--t1); font-weight: var(--w-text); letter-spacing: 0; text-transform: none; }
[data-page="detail"] .panel .split .vl { font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.017em; }
[data-page="detail"] .panel .btn.wide { min-height: 48px; }
[data-page="detail"] .panel .btn.ghost { border-color: var(--p); margin-top: -6px; }
[data-page="detail"] .panel .spl { margin-top: 0; padding-top: 0; border-top: 0; }
[data-page="detail"] .panel .spl img { height: 22px; }
.d-kontakt { display: flex; gap: 12px; align-items: center; }

@media (max-width: 899px) {
  [data-page="detail"] .two { gap: 16px; }
  [data-page="detail"] .two > div:first-child, [data-page="detail"] .d-uvod, [data-page="detail"] .d-meta { display: contents; }
  [data-page="detail"] .two > div:first-child > :not(.d-uvod) { order: 7; margin-top: 18px; }
  [data-page="detail"] .d-uvod > h1 { order: 1; }
  [data-page="detail"] .d-misto { order: 2; margin-top: -12px; }
  [data-page="detail"] .d-uvod > .gal { order: 3; }
  [data-page="detail"] .d-fakta { order: 4; }
  [data-page="detail"] .two > .panel { order: 5; padding: 20px 18px; gap: 14px; }
  [data-page="detail"] .d-uvod > .pronajem { order: 6; border-top: 0; }
  [data-page="detail"] .d-uvod > .pronajem .pronajem-in { padding-top: 4px; }
  .d-meta > .d-fakta { margin-left: 0; padding-left: 0; border-left: 0; }
  .d-fakta { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0;
    background: var(--plocha); border: 1px solid var(--n150); border-radius: var(--r); }
  .d-fakta > div { align-items: center; margin: 0; padding: 10px 2px; border-right: 0; text-align: center; }
  .d-fakta > div + div { border-left: 1px solid var(--n100); }
  .d-fakta dd { font-size: var(--t3); }
  .d-fakta.d-n6, .d-fakta.d-n7 { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .d-fakta.d-n6 > div:nth-child(3n + 1), .d-fakta.d-n7 > div:nth-child(3n + 1) { border-left: 0; }
  .d-fakta.d-n6 > div:nth-child(n + 4), .d-fakta.d-n7 > div:nth-child(n + 4) { border-top: 1px solid var(--n100); }
  .d-kontakt { padding: 14px; border-radius: var(--r); background: var(--s150); }
}
/* ── konec záhlaví detailu (s190) ── */

/* ── Fáze C: fakta u dlaždic (s191) ────────────────────────────────────
   Varianta C z návrhů 15. 9. Dlaždice podle signature, fakta visí na lince
   pod dlaždicí, ke které patří (`--fz-sl` = sloupec), tlačítko na konci
   řady (`--fz-cr` = řádek, když pod poslední dlaždicí už visí fakt).
   Na mobilu po dvou, aktuální fáze přes šířku a „Do další fáze“ jako její
   spodní část. Počet podílů `.pod` je zatím ukázka (`data-ukazka`). */
.fz-hlava .lead { margin-top: 10px; }
@media (min-width: 1040px) {
  .fz-hlava { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; }
  .fz-hlava .lead { margin-top: 0; }
}
.phases.fz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 24px; }
.phases.fz > .ph-item { min-width: 0; }
.phases.fz > .ph-item.now, .phases.fz > .ph-item.pred, .phases.fz > .fz-cela { grid-column: 1 / -1; }
.phases.fz > .ph-item.now { margin-top: 8px; padding: 20px 16px 14px; }
.phases.fz > .ph-item.now .pr { font-size: var(--t6); }
.ph-item .pod { font-size: var(--t1); line-height: 1.35; color: var(--n200); font-variant-numeric: tabular-nums; }
.ph-item.now .pod { color: var(--tm-4); }
.fz-fakt { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin: 0; padding: 4px 2px; }
/* Jen přímý potomek: cena uvnitř `<b>` je taky `<span class="cena-m">`. */
.fz-fakt > span { font-size: var(--t2); color: var(--n200); }
.fz-fakt b { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.02em; white-space: nowrap; color: var(--n900); }
.fz-prvni b { color: var(--p); }
.phases.fz > .ph-item.now.fz-s-dalsi { border-radius: var(--r-control) var(--r-control) 0 0; }
.phases.fz > .fz-dalsi { margin-top: -6px; padding: 11px 16px 14px; border-radius: 0 0 var(--r-control) var(--r-control);
  background: linear-gradient(var(--tm-linka-2), var(--tm-linka-2)) 16px 0 / calc(100% - 32px) 1px no-repeat, var(--p); }
.phases.fz > .fz-dalsi > span { color: var(--tm-4); }
.phases.fz > .fz-dalsi b { color: var(--tm-1); }
.phases.fz > .fz-cta { grid-column: 1 / -1; display: flex; justify-content: center; margin-top: 14px; }
.phases.fz > .fz-cta.ghost { border-color: var(--p); }

@media (min-width: 785px) {
  .phases.fz { grid-template-columns: repeat(var(--fz-n), minmax(0, 1fr)); grid-auto-flow: row; gap: 4px; margin-top: 36px; }
  .phases.fz > .ph-item, .phases.fz > .ph-item.now, .phases.fz > .ph-item.pred, .phases.fz > .fz-cela { grid-row: 1; grid-column: auto; }
  .phases.fz > .ph-item.now { margin-top: 0; padding: 12px 14px; }
  .phases.fz > .ph-item.now .pr { font-size: var(--t5); }
  .phases.fz > .ph-item.now.fz-s-dalsi { border-radius: var(--r-control); }
  .fz-fakt, .phases.fz > .fz-dalsi { grid-row: 2; grid-column: var(--fz-sl); position: relative; display: flex;
    flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; margin: 0; padding: 18px 16px 0;
    border-radius: 0; background: none; line-height: 1.25; }
  .fz-fakt::before { content: ""; position: absolute; left: 24px; top: 0; width: 1px; height: 12px; background: var(--p300); }
  .phases.fz > .fz-dalsi > span { color: var(--n200); }
  .phases.fz > .fz-dalsi b { color: var(--n900); }
  .fz-fakt b { margin-top: 2px; font-size: var(--t5); letter-spacing: -.03em; }
  .phases.fz > .fz-cta { grid-row: var(--fz-cr, 2); grid-column: var(--fz-n); justify-self: end; align-self: start; margin-top: 18px; }
}
/* Pod 1280 px jsou sloupce užší než tlačítko vedle faktu „Do další fáze“
   (na investiční stránce se 6 dlaždicemi se na 1040 px překrývaly),
   proto tlačítko pod fakta a aktuální cena o stupeň menší. */
@media (min-width: 785px) and (max-width: 1279px) {
  .phases.fz > .fz-cta { grid-row: 3; grid-column: 1 / -1; }
  .phases.fz > .ph-item.now .pr { font-size: var(--t4); }
}
/* ── konec fází C (s191) ── */

/* ── Poptávková karta „Jeden stůl“ (s192) ───────────────────────────────
   Varianta A z návrhů 15. 9. Lidé, telefon a formulář v jedné tmavé kartě.
   Pořadí v DOM: hlava, lidé, pole, telefon, důkaz — tak se čte na mobilu.
   Od 1040 px mřížka: vlevo hlava / lidé / telefon / důkaz, vpravo pole
   přes celou výšku (linka vlevo nese sloupec pole, ne levá strana). */
.stul { display: flex; flex-direction: column; gap: 18px; }
.stul-t { font-size: var(--t6); font-weight: var(--w-bold); letter-spacing: -.028em; line-height: 1.18; color: var(--tm-1); }
.stul .sub { margin-top: 6px; max-width: 34ch; }

/* lidé: na mobilu tři překrývající se avatary a vedle věta */
.stul-lide { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; }
.stul-lide .sellers { grid-column: 1; grid-row: 1 / 3; flex-wrap: nowrap; gap: 0; }
.stul-lide-t { grid-column: 2; grid-row: 1; }
.stul-pozn { grid-column: 2; grid-row: 2; }
.stul-lide .seller + .seller { margin-left: -10px; }
.stul-lide .seller .av { width: 40px; height: 40px; border-color: var(--p); box-shadow: none; }
.stul-lide .seller .av.ph { font-size: var(--t2); border-color: var(--p); }
/* Jména zůstávají pro čtečku, na mobilu je vidět jen tvář. */
.stul-lide .seller > span:not(.av) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.stul-lide-t { font-size: var(--t2); font-weight: var(--w-med); line-height: 1.45; color: var(--tm-1); align-self: end; }
.stul-pozn { font-size: var(--t2); line-height: 1.45; color: var(--tm-3); align-self: start; }
.stul-lide .seller .rl { color: var(--tm-4); }

/* pole */
.stul .fgrid { margin-top: 0; gap: 10px; }
.stul .pole .inp { min-height: 54px; font-size: var(--t3); padding: 22px 14px 6px; }
.stul .pole > label { font-size: var(--t3); top: 15px; right: 14px; line-height: 1.45; }
.stul .pole .inp.ta { min-height: 104px; padding-top: 26px; }
.stul-skup { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.stul-lb { font-size: var(--t2); font-weight: var(--w-med); color: var(--tm-2); }
.stul-lb span { font-weight: var(--w-text); color: var(--tm-4); }
.stul-skup .chiprow { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stul-skup .chip { justify-content: center; min-height: 44px; padding: 0 12px; font-weight: var(--w-med);
  color: var(--tm-2); white-space: nowrap; }
.stul-odeslat { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 4px; }
.stul-odeslat .btn { min-height: 54px; }
.stul .fine { font-size: var(--t1); line-height: 1.5; max-width: 55ch; }

/* telefon a důkaz */
.stul-tel { display: flex; flex-direction: column; gap: 8px; padding-top: 18px; border-top: 1px solid var(--tm-linka-2); }
.stul-tel-lb { font-size: var(--t2); color: var(--tm-4); }
.stul-tel-a { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 18px;
  border: 1px solid var(--tm-linka-4); border-radius: var(--r-control); color: var(--tm-1);
  font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background .18s ease, border-color .18s ease; }
.stul-tel-a:hover { background: var(--tm-plocha-2); border-color: var(--tm-1); }
.stul-proof { margin: 0; padding: 0; border: 0; }
.stul-proof span { font-size: var(--t2); color: var(--tm-3); }

/* po odeslání: lidé a telefon zůstávají, místo polí potvrzení */
.stul.odeslano .stul-pole > :not(.hotovo) { display: none; }
.stul .hotovo { padding: 4px 0; }

/* výzva (Jak to funguje): místo polí jen odkaz na /poptavka */
.stul-cta { align-self: stretch; }

@media (min-width: 560px) {
  .stul-skup .chiprow { display: flex; flex-wrap: wrap; }
  .stul-skup .chip { min-height: 40px; padding: 0 16px; }
  .stul-odeslat { flex-direction: row; align-items: center; gap: 20px; }
  .stul-odeslat .btn { min-height: 52px; }
  .stul-tel-a { align-self: flex-start; }
  .stul-cta { align-self: flex-start; }
}

/* Průvodce na /poptavka: pilulky a „Poraďte mi“ pod 700 px na 44 px. */
@media (max-width: 699px) {
  .pruvodce-stul .chip, .pruvodce-stul .poradit { min-height: 44px; }
  .pruvodce-stul .krok .poradit { margin-top: 11px; margin-bottom: -11px; }
}

/* Výzva nemá pole, takže nemá co dát do pravého sloupce na výšku:
   od 785 px dva řádky, hlava a lidé vlevo, odkaz a telefon vpravo. */
@media (min-width: 785px) {
  .formcard.stul.vyzva { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 40px; align-items: center;
    grid-template-areas: "hlava pole" "lide tel" "proof proof"; }
  .vyzva .stul-hlava { grid-area: hlava; }
  .vyzva .stul-lide { grid-area: lide; }
  .vyzva .stul-pole { grid-area: pole; justify-self: end; }
  .vyzva .stul-tel { grid-area: tel; justify-self: end; flex-direction: row; align-items: center; gap: 14px; padding-top: 0; border-top: 0; }
  .vyzva .stul-proof { grid-area: proof; padding-top: 18px; border-top: 1px solid var(--tm-linka-2); }
}

@media (min-width: 1040px) {
  .formcard.stul:not(.vyzva) { display: grid; padding: 0; gap: 0;
    grid-template-columns: 420px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "hlava pole" "lide pole" "tel pole" "proof pole"; }
  .stul:not(.vyzva) .stul-hlava { grid-area: hlava; padding: 38px 36px 0; }
  .stul:not(.vyzva) .stul-lide { grid-area: lide; margin: 24px 36px 0; padding-top: 24px; border-top: 1px solid var(--tm-linka-2);
    display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  .stul:not(.vyzva) .stul-lide-t { font-size: var(--t4); line-height: 1.25; letter-spacing: -.017em; align-self: auto; }
  .stul:not(.vyzva) .stul-pozn { align-self: auto; }
  .stul:not(.vyzva) .stul-lide .sellers { flex-direction: column; gap: 12px; }
  .stul:not(.vyzva) .stul-lide .seller + .seller { margin-left: 0; }
  .stul:not(.vyzva) .stul-lide .seller { gap: 12px; }
  .stul:not(.vyzva) .stul-lide .seller .av { width: 48px; height: 48px; border-color: var(--plocha); }
  .stul:not(.vyzva) .stul-lide .seller .av.ph { font-size: var(--t4); border-color: var(--s200); }
  .stul:not(.vyzva) .stul-lide .seller > span:not(.av) { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .stul:not(.vyzva) .stul-lide .seller .nm { font-size: var(--t3); line-height: 1.25; }
  .stul:not(.vyzva) .stul-tel { grid-area: tel; margin: 24px 36px 0; padding-top: 24px; }
  .stul:not(.vyzva) .stul-tel-a { min-height: 48px; font-size: var(--t5); }
  .stul:not(.vyzva) .stul-proof { grid-area: proof; padding: 24px 36px 36px; }
  .stul:not(.vyzva) .stul-pole { grid-area: pole; padding: 38px 40px 36px; border-left: 1px solid var(--tm-linka-2);
    display: flex; flex-direction: column; min-width: 0; }
  /* Pole zprávy dostane výšku, kterou levý sloupec kartě dal. */
  .stul-pole > .fgrid { flex: 1; gap: 12px; grid-template-rows: auto auto auto 1fr auto; }
  .stul-pole > .fgrid .pole.full { display: flex; flex-direction: column; }
  .stul-pole > .fgrid .inp.ta { flex: 1; min-height: 104px; }
  .stul .pole .inp { min-height: 56px; padding: 23px 14px 7px; }
  .stul .pole > label { top: 16px; }
  .stul.odeslano .stul-pole { justify-content: center; }
}
/* ── konec poptávkové karty (s192) ── */

/* ── Poptávka na detailu: cesta vedle formuláře (s193) ────────────────────
   Varianta A z návrhů 15. 9. Vlevo nadpis, malá karta nemovitosti a osa
   kroků (sedm dní se vysvětluje jen u kroku 3), vpravo bílý formulář:
   povinná pole nahoře, nepovinné otázky v krémovém panelu.
   Od 1040 px dva sloupce, od 1280 px otázky s popiskem vlevo. */
.kp { display: flex; flex-direction: column; gap: 22px; }
.kp-kroky { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

/* karta nemovitosti */
.kp-shrnuti { background: var(--plocha); border-radius: var(--r); box-shadow: var(--stin-karta); padding: 12px;
  display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 12px; align-items: center; color: var(--n900); }
.kp-foto { grid-row: 1 / 3; width: 84px; height: 84px; border-radius: var(--r-sm); background-color: var(--n50);
  background-size: cover; background-position: center; }
.kp-txt { grid-column: 2; min-width: 0; }
.kp-nazev { font-size: var(--t2); font-weight: var(--w-med); line-height: 1.3; letter-spacing: -.01em; }
.kp-cena { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.3; margin-top: 2px;
  font-variant-numeric: tabular-nums; }
.kp-cena .cena-m { white-space: nowrap; }
.kp-cena small { display: block; font-size: var(--t1); font-weight: var(--w-text); letter-spacing: 0; line-height: 1.4; color: var(--n200); }
.kp-faze { grid-column: 2; font-size: var(--t1); line-height: 1.4; }
.kp-faze b { color: var(--s700); font-weight: var(--w-med); }
.kp-faze > span { display: none; color: var(--n200); white-space: nowrap; }

/* osa kroků */
.kp-cesta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kp-cesta li { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; }
.kp-cesta li:not(:last-child)::before { content: ""; position: absolute; left: 12.5px; top: 26px; bottom: 0; width: 1px; background: var(--s200); }
.kp-ci { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--p); color: var(--tm-1); font-size: var(--t1); font-weight: var(--w-bold); }
/* Zlatá u kroku 3: rezervace je první chvíle, kdy je podíl váš. */
.kp-drzeni .kp-ci { background: var(--s); color: var(--na-zlate); }
.kp-krok { padding: 2px 0 14px; min-width: 0; }
.kp-cesta li:last-child .kp-krok { padding-bottom: 0; }
.kp-krok > b { display: block; font-size: var(--t3); font-weight: var(--w-med); line-height: 1.35; color: var(--n900); }
.kp-kratce { display: block; font-size: var(--t2); line-height: 1.45; color: var(--n700); }
.kp-drz { margin-top: 8px; background: var(--plocha); border: 1px solid var(--s200); border-radius: var(--r);
  padding: 10px 12px; font-size: var(--t2); line-height: 1.5; color: var(--n700); }
.kp-drz b { color: var(--n900); font-weight: var(--w-med); }
@media (max-width: 699px) {
  .kp-drzeni .kp-kratce { display: none; }
  /* odkaz „podmínkami“ uvnitř věty: plocha 44 px bez posunu řádku */
  .kp-form .souhlas a { display: inline-block; padding-block: 13px; margin-block: -13px; }
}

/* formulář */
.karta-poptavka { background: var(--plocha); border-radius: var(--r-lg); box-shadow: 0 16px 42px rgb(var(--zavoj) / .12); min-width: 0; }
.kp-form { padding: 24px 20px 22px; display: flex; flex-direction: column; gap: 16px; }
.kp-form h3 { font-size: var(--t6); font-weight: var(--w-bold); letter-spacing: -.028em; line-height: 1.18; }
.kp-form .sub { font-size: var(--t3); color: var(--n200); margin-top: 6px; }
.kp-form .mrizka { margin: 0; gap: 16px; }
.fpole label, .kp-form .kval-lb { line-height: 1.35; }
.fpole .nep { font-weight: var(--w-text); color: var(--n200); }
.kp-form .fvstup { min-height: 52px; }
.kp-dopl { background: var(--s150); border-radius: var(--r); padding: 16px 14px; display: flex; flex-direction: column; gap: 16px; }
.kp-dopl .kval { gap: 8px; }
.kp-dopl .chip { background: var(--plocha); min-height: 44px; }
.kp-dopl .fvstup.ta { min-height: 88px; }
.kp-form .souhlas { margin: 0; align-items: center; min-height: 44px; line-height: 1.45; flex-wrap: nowrap; }
.kp-form .souhlas input { margin-top: 0; width: 22px; height: 22px; }
/* Odkaz ve větě musí být poznat i jinak než barvou (axe link-in-text-block). */
.kp-form .souhlas a { text-decoration: underline; text-underline-offset: 3px; }
.kp-form .souhlas + .chyba:not(:empty) { margin: -10px 0 0; }
.kp-odeslat { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.kp-odeslat .btn { min-height: 54px; }
.kp-form .kp-odeslat .fine { margin: 0; text-align: center; }
.kp-hotovo { min-height: 240px; }

@media (min-width: 700px) {
  .kp-shrnuti { grid-template-columns: 124px minmax(0, 1fr); column-gap: 14px; padding: 14px; }
  .kp-foto { grid-row: 1; width: 124px; height: 93px; }
  .kp-nazev { font-size: var(--t3); }
  .kp-cena { font-size: var(--t5); letter-spacing: -.03em; margin-top: 4px; line-height: 1.2; }
  .kp-cena small { margin-top: 2px; }
  .kp-faze { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding: 10px 4px 0; border-top: 1px solid var(--s200); font-size: var(--t2); }
  .kp-faze > span { display: inline; }
  .kp-cesta li { grid-template-columns: 28px minmax(0, 1fr); column-gap: 16px; }
  .kp-cesta li:not(:last-child)::before { left: 13.5px; top: 28px; }
  .kp-ci { width: 28px; height: 28px; }
  .kp-krok { padding: 3px 0 22px; }
  .kp-drz { margin-top: 10px; padding: 12px 14px; }
  .kp-form { padding: 40px 44px 36px; gap: 18px; }
  .kp-form .fvstup { min-height: 50px; }
  .kp-dopl { padding: 18px 20px; gap: 12px; }
  .kp-dopl .chip { min-height: 40px; }
  .kp-dopl .fvstup.ta { min-height: 76px; }
  .kp-form .souhlas { min-height: 24px; }
  .kp-form .souhlas input { width: 20px; height: 20px; }
  .kp-odeslat { flex-direction: row; align-items: center; gap: 20px; }
  .kp-form .kp-odeslat .fine { text-align: left; }
}
@media (min-width: 1040px) {
  .kp { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 40px; align-items: start; }
  .kp-kroky { gap: 30px; }
}
@media (min-width: 1280px) {
  .kp { grid-template-columns: 430px minmax(0, 1fr); gap: 56px; }
  .kp-dopl .kval { grid-template-columns: 200px minmax(0, 1fr); align-items: center; column-gap: 12px; }
}
@media (pointer: coarse) { .kp-dopl .chip { min-height: 44px; } }
/* ── konec poptávky na detailu (s193) ── */

/* ── Kalkulačka „Splátka napřed“ (s194) ────────────────────────────────
   Varianta A z návrhů 15. 9. Výsledek napřed: pod 1040 px lepivý pruh se
   splátkou nad posuvníky a detaily pod nimi, od 1040 px levý tmavý panel.
   Panel na desktopu jsou dvě položky mřížky (výsledek a detaily) nad
   společným podkladem `::before`, protože na mobilu stojí každá jinde. */
.kalk { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }

/* výsledek */
.kalk .vys { position: sticky; top: calc(var(--kalk-top, 0px) + 8px); z-index: var(--z-filtr);
  background: var(--p); color: var(--tm-1); border-radius: var(--r); padding: 14px 16px 16px; box-shadow: var(--stin-poptavka);
  transition: top .26s ease; }
.vys .lb { font-size: var(--t1); font-weight: var(--w-med); line-height: 1.4; color: var(--tm-4); }
.vys .v { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; line-height: 1.1; }
.vys .v [data-out] { font-size: var(--t8); font-weight: var(--w-bold); letter-spacing: -.035em;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.vys .v small { font-size: var(--t3); color: var(--tm-3); white-space: nowrap; }
.kalk-pomer { display: flex; gap: 2px; height: 8px; margin-top: 12px; border-radius: var(--r-pill); overflow: hidden; }
.kalk-pomer i { display: block; height: 100%; }
/* Zlatá = to, co je vaše (vlastní zdroje). */
.kalk-pomer .vl { width: var(--vl, 20%); background: var(--s); transition: width .2s ease; }
.kalk-pomer .es { flex: 1; background: var(--tm-plocha-3); }
.kalk-sq { display: inline-block; width: 10px; height: 10px; border-radius: var(--r-xs); flex: 0 0 auto; }
.kalk-sq.vl { background: var(--s); }
.kalk-sq.es { background: var(--tm-plocha-3); box-shadow: inset 0 0 0 1px var(--tm-linka-4); }
.kalk-leg { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px;
  font-size: var(--t1); color: var(--tm-3); }
.kalk-leg span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kalk-leg b { font-weight: var(--w-text); font-variant-numeric: tabular-nums; }

/* posuvníky */
.kalk-ovl { display: flex; flex-direction: column; min-width: 0; }
.kalk .pole { gap: 2px; }
.kalk .pole label { align-items: baseline; }
.kalk .pole label b { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.2; }
.kalk .mez { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t1); color: var(--n200);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.kalk .pole .h { margin-top: 4px; line-height: 1.5; }

/* detaily pod posuvníky */
.kalk-det { background: var(--plocha); border-radius: var(--r); box-shadow: var(--stin-karta); padding: 6px 16px 18px; margin-top: 6px; }
.kalk-det .r { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--n100); font-size: var(--t2); color: var(--n700); }
.kalk-det .r:first-child { border-top: 0; }
.kalk-det .r b { color: var(--n900); font-weight: var(--w-med); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kalk-det .r small { display: block; font-size: var(--t1); color: var(--n200); }
.kalk-det .kalk-sq { display: none; }
.kalk-det .btn { margin-top: 10px; min-height: 54px; }
.kalk-det .fine { color: var(--n200); margin-top: 12px; }

@media (max-width: 699px) {
  /* Na telefonu meze jen u ceny, jezdec 30 px. */
  .kalk-ovl .pole:not(:first-child) .mez { display: none; }
  .kalk .pole input[type=range] { height: 44px; }
  .kalk .pole input[type=range]::-webkit-slider-thumb { width: 30px; height: 30px; margin-top: -12px; }
  .kalk .pole input[type=range]::-moz-range-thumb { width: 30px; height: 30px; }
}
@media (min-width: 700px) {
  .kalk .pole label b { font-size: var(--t6); letter-spacing: -.03em; }
  .kalk .pole { gap: 6px; }
}
@media (min-width: 1040px) {
  .kalk { display: grid; grid-template-columns: 400px minmax(0, 1fr); grid-template-rows: auto auto 1fr;
    column-gap: 48px; row-gap: 0; margin-top: 36px; align-items: start; }
  /* Podklad nesou obě položky samy (kontrola kontrastu podklad z `::before`
     nepřečte); `::before` dává panelu jen společný stín. */
  .kalk::before { content: ""; grid-column: 1; grid-row: 1 / 3; align-self: stretch;
    border-radius: var(--r-lg); box-shadow: var(--stin-poptavka); }
  .kalk .vys { grid-column: 1; grid-row: 1; position: relative; top: auto; z-index: 1;
    background: var(--p); box-shadow: none; border-radius: var(--r-lg) var(--r-lg) 0 0; padding: 30px 30px 0; }
  .vys .lb { font-size: var(--t2); }
  .vys .v { column-gap: 10px; margin-top: 6px; }
  .vys .v [data-out] { font-size: 60px; letter-spacing: -.04em; line-height: 1; }
  .vys .v small { font-size: var(--t4); }
  .kalk-pomer { height: 10px; margin-top: 26px; }
  .kalk-leg { display: none; }
  .kalk-det { grid-column: 1; grid-row: 2; position: relative; z-index: 1; margin: 0;
    background: var(--p); box-shadow: none; border-radius: 0 0 var(--r-lg) var(--r-lg); padding: 14px 30px 26px; }
  .kalk-det .r { padding: 10px 0; border-top-color: var(--tm-linka-2); color: var(--tm-2); }
  .kalk-det .r b { color: var(--tm-1); }
  .kalk-det .r small { color: var(--tm-4); }
  .kalk-det .kalk-sq { display: inline-block; margin-right: 10px; vertical-align: 0; }
  .kalk-det .btn { margin-top: 18px; }
  .kalk-det .fine { color: var(--tm-4); margin-top: 14px; }
  .kalk-det :focus-visible { outline-color: var(--s200); }
  .kalk-ovl { grid-column: 2; grid-row: 1 / 4; }
  .kalk .pole { padding: 22px 0; }
  .kalk .pole:first-child { padding-top: 4px; }
}
@media (min-width: 1280px) {
  .kalk { grid-template-columns: 460px minmax(0, 1fr); column-gap: 64px; }
  .kalk-det .kalk-urok > span { display: flex; align-items: baseline; gap: 10px; }
  .kalk-det .kalk-urok small { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .kalk .vys, .kalk-pomer .vl { transition: none; } }
/* ── konec kalkulačky Splátka napřed (s194) ── */

/* ── Balíčky jako předvolby skládačky (s195) ──────────────────────────────
   Varianta B z návrhů 15. 9. Tři balíčky jsou předvolby skládačky, pod nimi
   šest míst a od 1040 px vpravo panel „Vaše sestava“. Pod 1040 px zůstanou
   z panelu poznámky a výsledek jede v liště u spodního okraje (sticky
   uvnitř sekce, takže nepřekryje nic pod ní). Stav nese `aria-pressed`. */
.skladacka [hidden] { display: none !important; }
.skl-hlava .lead { margin-top: 14px; }
.skl-lay { display: grid; gap: 20px; margin-top: 28px; align-items: start; }
.skl-lay > * { min-width: 0; }
@media (min-width: 1040px) { .skl-lay { grid-template-columns: minmax(0, 1fr) 420px; gap: 32px; margin-top: 40px; } }

/* předvolby */
.skl-pres { display: grid; gap: 10px; }
@media (min-width: 700px) { .skl-pres { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } }
.pre { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 10px; text-align: left; cursor: pointer;
  background: var(--plocha); border: 1px solid var(--n150); border-radius: var(--r); color: var(--n900);
  transition: border-color .16s ease; }
.pre:hover { border-color: var(--p300); }
.pre[aria-pressed="true"] { border: 2px solid var(--p); padding: 9px; }
.pre:focus-visible, .pick:focus-visible { border-radius: var(--r); }
.pre-ph { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; height: 92px;
  border-radius: var(--r-sm); overflow: hidden; background: var(--s150); }
.pre-foto { background-size: cover; background-position: center; }
.pre-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 0 6px 4px; }
.pre-fl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: var(--t1); font-weight: var(--w-med); color: var(--n200); }
.pre-t { font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.015em; line-height: 1.3; }
.pre-m { font-size: var(--t2); color: var(--n700); font-variant-numeric: tabular-nums; }
.pre-m b { color: var(--p); font-weight: var(--w-bold); }
.pre-m .cena-m { white-space: nowrap; }
@media (max-width: 699px) {
  .pre { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px; }
  .pre[aria-pressed="true"] { padding: 7px; }
  .pre-ph { height: 72px; }
  .pre-tx { padding: 0; }
}

/* vlastní rok: dlaždice míst */
.skl-vlastni { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--s200); }
@media (min-width: 1040px) { .skl-vlastni { margin-top: 30px; padding-top: 24px; } }
.skl-vlastni-t { font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.018em; line-height: 1.3; }
.skl-vlastni-s { margin-top: 2px; font-size: var(--t2); color: var(--n200); }
.skl-mrizka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
@media (min-width: 700px) { .skl-mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
.pick { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--r); overflow: hidden;
  background-color: var(--s150); background-size: cover; background-position: center; }
@media (min-width: 700px) { .pick { aspect-ratio: 16 / 10; } }
.pick[aria-pressed="true"] { border-color: var(--s); }
.skl-misto { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: center; gap: 7px;
  padding: 24px 12px 9px; overflow: hidden; white-space: nowrap; text-align: left;
  background: linear-gradient(to top, rgb(var(--zavoj) / .9), rgb(var(--zavoj) / .88) calc(100% - 20px), rgb(var(--zavoj) / 0));
  color: var(--tm-1); font-size: var(--t2); font-weight: var(--w-med); line-height: 1.3; }
.pick .tick { position: absolute; right: 9px; top: 9px; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: rgb(var(--zavoj) / .4); border: 1.5px solid var(--tm-2);
  color: transparent; font-size: var(--t2); font-weight: var(--w-bold); }
.pick[aria-pressed="true"] .tick { background: var(--s); border-color: var(--s); color: var(--na-zlate); }

/* panel „Vaše sestava“: pod 1040 px z něj zůstanou jen poznámky */
.skl-out { display: flex; flex-direction: column; gap: 8px; }
.skl-muted { font-size: var(--t2); font-weight: var(--w-med); color: var(--n200); }
.skl-nazev { font-size: var(--t5); font-weight: var(--w-med); letter-spacing: -.02em; line-height: 1.25; }
.skl-popis { font-size: var(--t2); color: var(--n700); line-height: 1.5; }
.skl-mista { flex-wrap: wrap; gap: 8px; list-style: none; }
.skl-mista li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--s150); border: 1px solid var(--s200); font-size: var(--t2); font-weight: var(--w-med); line-height: 1.4; }
.skl-rok .yearleg { margin-top: 8px; }
.skl-rok .sw { background: var(--s); }
.skl-fakta .vl { white-space: nowrap; }
.skl-prazdne { font-size: var(--t3); color: var(--n700); }
.skl-stav { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skl-muted, .skl-nazev, .skl-popis, .skl-mista, .skl-rok, .skl-fakta, .skl-prazdne, .skl-cta { display: none; }
@media (min-width: 1040px) {
  .skl-out { gap: 16px; padding: 28px; background: var(--plocha); border-radius: var(--r-lg); box-shadow: var(--stin-karta-hover); }
  .skl-muted, .skl-rok, .skl-prazdne { display: block; }
  .skl-nazev { display: block; margin-top: -6px; }
  .skl-popis { display: block; margin-top: -8px; }
  .skl-mista { display: flex; }
  .skl-fakta { display: grid; }
  .skl-cta { display: flex; }
}

/* lišta s výsledkem pod 1040 px */
.skl-lista { position: sticky; bottom: 0; z-index: var(--z-lista); margin-top: 24px;
  padding: 16px 0 calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--plocha);
  border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -10px 30px rgb(var(--zavoj) / .14); }
.skl-lista .wrap { display: grid; gap: 12px; }
.skl-lista-t { font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.015em; line-height: 1.3; }
.skl-lista-r { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.skl-lista-dny { font-size: var(--t2); color: var(--n700); }
.skl-lista-dny b { margin-right: 3px; font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.03em; line-height: 1; color: var(--p); }
.skl-lista .skl-cena { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.03em; white-space: nowrap; }
@media (min-width: 700px) and (max-width: 1039px) {
  .skl-lista .wrap { grid-template-columns: minmax(0, 1fr) auto; column-gap: 28px; row-gap: 4px; align-items: center; }
  .skl-lista .btn { grid-column: 2; grid-row: 1 / 3; width: auto; }
  .skl-lista-r { justify-content: flex-start; gap: 4px 20px; }
}
@media (max-width: 1039px) { .skladacka { padding-bottom: 0; } }
@media (min-width: 1040px) { .skl-lista { display: none; } }
@media (prefers-reduced-motion: reduce) { .pre { transition: none; } }
/* ── konec skládačky balíčků (s195) ── */

/* ── Jak to funguje „Obsah, který rovnou odpovídá“ (s196) ─────────────────
   Varianta A z návrhů 15. 9. Rozcestník je obsah: číslo v kolečku, otázka
   a věta odpovědi, aktuální otázka má plné břidlicové číslo. Kapitola nese
   pozici „02 / 06“ a končí odkazem na další otázku. FAQ: vlevo nadpis,
   kategorie a telefon, vpravo otázky jako řádky s kulatým +. */
.guide { display: grid; grid-template-columns: minmax(0, 1fr); }
.chapter { scroll-margin-top: 96px; margin-bottom: 56px; }
.chapter:last-child { margin-bottom: 0; }
@media (min-width: 1040px) { .chapter { margin-bottom: 80px; } }

.rozcestnik { display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: 56px; border-bottom: 1px solid var(--n150); }
@media (min-width: 900px) {
  .rozcestnik { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto);
    grid-auto-flow: column; column-gap: 48px; }
}
@media (min-width: 1040px) { .rozcestnik { margin-bottom: 80px; } }
.rozcestnik a { display: grid; grid-template-columns: 40px minmax(0, 1fr) 20px; column-gap: 8px; align-items: start;
  padding: 14px 0; border-top: 1px solid var(--n150); color: var(--n900); }
@media (min-width: 900px) { .rozcestnik a { grid-template-columns: 48px minmax(0, 1fr) 20px; column-gap: 12px; padding: 20px 0; } }
.rozcestnik a:focus-visible { border-radius: var(--r-xs); }
.rozcestnik .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--n150); background: var(--plocha); font-size: var(--t2); font-weight: var(--w-bold);
  color: var(--n200); font-variant-numeric: tabular-nums; }
.rozcestnik .tx { min-width: 0; }
.rozcestnik .q { display: block; padding-top: 3px; font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.018em; line-height: 1.35; }
@media (min-width: 900px) { .rozcestnik .q { font-size: var(--t4); } }
.rozcestnik .odp { display: block; margin-top: 4px; font-size: var(--t2); line-height: 1.5; color: var(--n700); }
.rozcestnik .sip { width: 20px; height: 20px; margin-top: 3px; color: var(--p); }
.rozcestnik a:hover .q { color: var(--p); }
.rozcestnik a.on .n { background: var(--p); border-color: var(--p); color: var(--tm-1); }
.rozcestnik a.on .q { color: var(--p); }
.rozcestnik .n, .rozcestnik .q { transition: background-color .18s var(--doben), border-color .18s var(--doben), color .18s var(--doben); }

.chapter > .ch-pos { font-size: var(--t2); font-weight: var(--w-med); color: var(--n200); font-variant-numeric: tabular-nums; }
.chapter > .ch-pos + .otazka { margin-top: 8px; }
.chapter > .dalsi { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 860px;
  min-height: 72px; margin-top: 28px; padding: 14px 0; border-top: 1px solid var(--n150); border-bottom: 1px solid var(--n150);
  color: var(--n900); }
@media (min-width: 1040px) { .chapter > .dalsi { margin-top: 40px; } }
.dalsi-lb { display: block; font-size: var(--t2); line-height: 1.4; color: var(--n200); }
.dalsi-q { display: block; font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.018em; line-height: 1.35; color: var(--p); }
.dalsi .sip { flex: none; width: 22px; height: 22px; color: var(--p); }
.dalsi:hover .dalsi-q { text-decoration: underline; text-underline-offset: 3px; }

.faq2 { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1040px) { .faq2 { grid-template-columns: 340px minmax(0, 1fr); gap: 72px; } }
.faq-bok .h2 { margin-top: 0; }
.faq-kat { display: none; }
@media (min-width: 785px) { .faq-kat { display: flex; flex-direction: column; margin-top: 24px; border-bottom: 1px solid var(--n100); } }
.faq-kat a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px;
  border-top: 1px solid var(--n100); font-size: var(--t3); color: var(--n700); }
.faq-kat a:hover { color: var(--p); }
.faq-kat .sip { flex: none; width: 18px; height: 18px; color: var(--p); }
.faq-tel { margin-top: 12px; font-size: var(--t2); color: var(--n700); }
@media (min-width: 785px) { .faq-tel { margin-top: 24px; } }
.faq-tel a { display: inline-block; padding-block: 12px; margin-block: -12px; color: var(--p); font-weight: var(--w-med);
  text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.faq-cat { scroll-margin-top: 96px; }
.faq-cat + .faq-cat { margin-top: 32px; }
@media (min-width: 1040px) { .faq-cat + .faq-cat { margin-top: 40px; } }
.faq-cat > h3 { padding-bottom: 10px; font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.018em; color: var(--p); }
@media (min-width: 1040px) { .faq-cat > h3 { font-size: var(--t4); } }
.faq2 .acc { background: none; border: 0; border-top: 1px solid var(--n150); border-radius: 0; overflow: visible; }
.faq2 .acc + .acc { margin-top: 0; }
.faq2 .acc:last-child { border-bottom: 1px solid var(--n150); }
.faq2 .acc-head { justify-content: space-between; gap: 20px; min-height: 60px; padding: 14px 0; }
.faq2 .acc-head:focus-visible { border-radius: var(--r-xs); }
.faq2 .acc-head .t { font-size: var(--t3); line-height: 1.35; }
@media (min-width: 1040px) { .faq2 .acc-head .t { font-size: var(--t4); } }
.faq2 .acc-head:hover .t { color: var(--p); }
.faq2 .acc-head .plus { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--n150); font-size: var(--t5); color: var(--p);
  transition: transform .2s var(--doben), background-color .2s var(--doben), color .2s var(--doben); }
.faq2 .acc[data-open="1"] .plus { transform: rotate(45deg); background: var(--p); border-color: var(--p); color: var(--tm-1); }
.faq2 .acc-body { border-top: 0; padding: 0 0 22px; }
.faq2 .acc[data-open="1"] .acc-body { padding-top: 0; }
@media (min-width: 1040px) { .faq2 .acc-body { padding-right: 52px; } }
@media (prefers-reduced-motion: reduce) { .rozcestnik .n, .rozcestnik .q, .faq2 .acc-head .plus { transition: none; } }
/* ── konec obsahu otázek (s196) ── */

/* ── Hlavička podstránek „Nadpis vlevo, perex vpravo“ (s197) ──────────────
   Varianta A z návrhů 15. 9. Vyprávěcí podoba: drobečky, pod nimi nadpis
   vlevo a perex s tlačítky vpravo (od 1040 px, mřížka 6 : 5). Nástrojová
   podoba pro výpis (`data-page="nemovitosti"`): nižší, vpravo počet
   nemovitostí z katalogu nebo perex filtru. Linka v pískovém závoji
   hlavičku uzavírá, pod ní začíná papír. */
.phead { background: var(--s150); border-bottom: 1px solid var(--s200); padding: 36px 0 44px; }
.phead-in { display: grid; gap: 14px; margin-top: 16px; }
.phead h1 { font-size: var(--t8); font-weight: var(--w-bold); letter-spacing: -.03em; line-height: 1.1;
  margin: 0; text-wrap: balance; }
.phead h1 .cena-m { white-space: nowrap; }
.phead-bok { min-width: 0; }
.phead-bok .lead { margin: 0; max-width: 46ch; color: var(--n700); }
.phead-bok .lead b { color: var(--n900); font-weight: var(--w-med); }
.phead-akce { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.phead-sd { margin: 0; font-size: var(--t3); color: var(--n700); }
@media (min-width: 1040px) {
  .phead-in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: 48px; align-items: start; margin-top: 20px; }
  .phead-bok { padding-top: 10px; }
}

/* Nástrojová podoba: výpis a filtrované stránky. */
[data-page="nemovitosti"] .phead { padding: 24px 0 26px; }
[data-page="nemovitosti"] .phead-in { gap: 4px; margin-top: 12px; align-items: baseline; }
[data-page="nemovitosti"] .phead h1 { font-size: var(--t7); line-height: 1.14; }
[data-page="nemovitosti"] .phead-bok { padding-top: 0; }
[data-page="nemovitosti"] .phead-bok .lead { font-size: var(--t3); line-height: 1.6; max-width: 58ch; }
@media (min-width: 1040px) {
  [data-page="nemovitosti"] .phead-in { column-gap: 40px; }
  [data-page="nemovitosti"] .phead-sd { justify-self: end; text-align: right; }
}

/* Mobil: perex 15 px, hlavní tlačítko přes šířku, druhé jako textový odkaz 44 px. */
@media (max-width: 699px) {
  .phead { padding: 20px 0 28px; }
  .phead-in { margin-top: 14px; gap: 12px; }
  .phead h1 { line-height: 1.14; }
  .phead-bok .lead { font-size: var(--t3); line-height: 1.6; }
  .phead-akce { flex-direction: column; align-items: stretch; gap: 2px; }
  .phead-akce .btn { width: 100%; }
  .phead-akce .btn.ghost, .phead-akce .btn.ghost:hover { border-color: transparent; background: none; min-height: 44px; }
  [data-page="nemovitosti"] .phead { padding: 16px 0 18px; }
  [data-page="nemovitosti"] .phead-in { margin-top: 10px; gap: 4px; }
  [data-page="nemovitosti"] .phead-sd { font-size: var(--t2); }
}
/* ── konec hlavičky podstránek (s197) ── */

/* ── Nedostupné volby filtru (s198) ────────────────────────────────────
   Volba, která by vedla na prázdný výpis, se tváří jako nedostupná: chip
   země bez výplně s čárkovaným obrysem a šedou vlajkou, volba ve výběru
   s tlumeným zaškrtávátkem. Text zůstává ve slate-muted (4,6 : 1 na krému). */
.ft-zeme .ft-zc.prazdna, .ft-zeme .ft-zc.prazdna:hover {
  background: transparent; border-color: var(--n150); border-style: dashed;
  color: var(--n200); cursor: default; }
.ft-zeme .ft-zc.prazdna .flag { filter: grayscale(1); opacity: .5; box-shadow: none; }
.ft-zeme .ft-zc.prazdna .c { color: var(--n200); }
.ft-opt.prazdna { cursor: default; }
.ft-opt.prazdna .cb { border-color: var(--n150); background: var(--n50); }
.ft-opt.prazdna svg:not(.cb svg), .ft-opt.prazdna .ico { opacity: .45; }
.ft-opt.prazdna .c { color: var(--n200); }
/* ── konec nedostupných voleb filtru (s198) ── */

/* ── Proč 1/8: dvě strany (s201) ───────────────────────────────────────────
   Úvodní stránka za principem: bílá strana hodin proti borovicové straně se
   znakem Fragmenta. Metodika na Jak to funguje. Generuje _build/s201_proc_dve_strany.py. */
.dvs-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.dvs-hd { display: grid; gap: 12px; }
.dvs-hd .h2 { max-width: 22ch; }
.dvs-hd .lead { max-width: 52ch; }
.dvs { margin-top: 24px; border-radius: var(--r); overflow: hidden; box-shadow: var(--stin-karta); }
.dvs-seznam { list-style: none; margin: 0; padding: 0; }
.dvs-rw { display: grid; grid-template-columns: 1fr 104px; }
.dvs-l { background: var(--plocha); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dvs-p { position: relative; background: var(--p); color: var(--tm-1); padding: 12px 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; font-size: var(--t1); font-weight: var(--w-med); line-height: 1.25; text-align: center; }
.dvs-p p { margin: 0; }
.dvs-seznam .dvs-rw + .dvs-rw .dvs-l, .dvs-seznam .dvs-rw:first-child .dvs-l { border-top: 1px solid var(--n100); }
.dvs-seznam .dvs-rw + .dvs-rw .dvs-p, .dvs-seznam .dvs-rw:first-child .dvs-p { border-top: 1px solid var(--tm-linka-1); }
/* zobáček páruje řádek s pravou stranou */
.dvs-seznam .dvs-p::before, .dvs-sum .dvs-p::before { content: ""; position: absolute; left: -6px; top: 50%; width: 12px; height: 12px;
  margin-top: -6px; background: inherit; transform: rotate(45deg); border-radius: 2px; }
.dvs-hdr .dvs-l { justify-content: center; }
.dvs-hdr .dvs-l b { font-size: var(--t3); font-weight: var(--w-bold); }
.dvs-hdr .dvs-l span { font-size: var(--t1); color: var(--n200); }
.dvs-hdr .dvs-p img { display: block; width: 78px; height: auto; }
.dvs-hdr .dvs-p span { font-weight: var(--w-text); color: var(--tm-3); }
.dvs-nm { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.dvs-ic { width: 20px; height: 20px; flex: none; color: var(--p); margin-top: 1px; }
.dvs-tx { display: flex; flex-direction: column; min-width: 0; }
.dvs-tx b { font-size: var(--t3); font-weight: var(--w-med); line-height: 1.3; }
.dvs-tx small { display: none; font-size: var(--t2); color: var(--n200); line-height: 1.4; }
.dvs-t { margin: 0; padding-left: 28px; font-size: var(--t2); color: var(--n700); font-variant-numeric: tabular-nums; }
.dvs-t b { font-weight: var(--w-bold); color: var(--n900); white-space: nowrap; }
.dvs-t small { display: block; font-size: inherit; white-space: nowrap; }
.dvs-t .dvs-tecka { display: none; }
.dvs-t-jiny small { display: inline; white-space: normal; }
.dvs-t-jiny .dvs-tecka { display: inline; }
.dvs-zn { width: 22px; height: 22px; color: var(--s); flex: none; }
.dvs-sum .dvs-l { background: var(--s150); border-top: 1px solid var(--s200); padding: 14px; }
.dvs-sum .dvs-t { order: -1; padding-left: 0; font-size: var(--t2); }
.dvs-sum .dvs-t b { font-size: var(--t4); }
.dvs-sum-tx { margin: 0; font-size: var(--t2); color: var(--n700); line-height: 1.4; }
.dvs-sum-tx b { font-weight: var(--w-med); }
.dvs-sum .dvs-p { background: var(--p600); font-size: var(--t2); font-weight: var(--w-bold); }
.dvs-ft { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.dvs-ft .fine { max-width: 70ch; }
.dvs-met { display: flex; align-items: center; min-height: 44px; width: max-content; font-size: var(--t2); font-weight: var(--w-med); color: var(--p); }
.dvs-faq { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px solid var(--p); border-radius: var(--r-control);
  font-size: var(--t3); font-weight: var(--w-med); color: var(--p); }
.dvs-faq:hover, .dvs-met:hover { color: var(--n900); }
.dvs-faq:hover { border-color: var(--n900); }
@media (min-width: 600px) {
  .dvs-rw { grid-template-columns: 1fr 180px; }
  .dvs-l { padding: 14px 20px; }
  .dvs-tx small { display: block; }
  .dvs-hdr .dvs-p img { width: 104px; }
}
@media (min-width: 600px) and (max-width: 899px) {
  .dvs-t small { display: inline; }
  .dvs-t .dvs-tecka { display: inline; }
}
@media (min-width: 1280px) {
  .dvs-hd { grid-template-columns: 5fr 7fr; gap: 72px; align-items: end; }
  .dvs-hd .h2, .dvs-hd .lead { margin-top: 0; }
}
@media (min-width: 900px) {
  .dvs { margin-top: 40px; border-radius: var(--r-lg); }
  .dvs-rw { grid-template-columns: 8fr 4fr; }
  .dvs-l { display: grid; grid-template-columns: 1fr 190px; gap: 24px; align-items: center; padding: 15px 32px; }
  .dvs-p { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 15px 32px; font-size: var(--t3); text-align: left; }
  .dvs-seznam .dvs-p::before, .dvs-sum .dvs-p::before { left: -9px; width: 18px; height: 18px; margin-top: -9px; border-radius: var(--r-xs); }
  .dvs-hdr .dvs-l, .dvs-hdr .dvs-p { padding-top: 20px; padding-bottom: 18px; }
  .dvs-hdr .dvs-l b { font-size: var(--t4); }
  .dvs-hdr .dvs-l span { text-align: right; }
  .dvs-hdr .dvs-p img { width: auto; height: 24px; }
  .dvs-hdr .dvs-p span { font-size: var(--t2); }
  .dvs-nm { gap: 12px; }
  .dvs-ic { margin-top: 2px; }
  .dvs-tx { flex-direction: row; flex-wrap: wrap; column-gap: 10px; align-items: baseline; }
  .dvs-t { padding-left: 0; text-align: right; font-size: var(--t4); line-height: 1.25; }
  .dvs-t b { display: block; }
  .dvs-t small { display: block; font-size: var(--t1); color: var(--n200); }
  .dvs-t .dvs-tecka { display: none; }
  .dvs-zn { width: 24px; height: 24px; }
  .dvs-sum .dvs-l, .dvs-sum .dvs-p { padding-top: 22px; padding-bottom: 22px; }
  .dvs-sum .dvs-l { padding-inline: 32px; }
  .dvs-sum .dvs-t { order: 0; font-size: var(--t4); }
  .dvs-sum .dvs-t b { font-size: var(--t5); }
  .dvs-sum-tx { font-size: var(--t3); }
  .dvs-sum-tx b { font-weight: var(--w-bold); }
  .dvs-sum .dvs-p { font-size: var(--t4); line-height: 1.35; }
  .dvs-ft { margin-top: 18px; flex-direction: row; justify-content: space-between; align-items: baseline; gap: 32px; }
  .dvs-met { display: inline; min-height: 0; font-size: inherit; white-space: nowrap; }
  .dvs-faq { display: inline-flex; min-height: 44px; border: 0; white-space: nowrap; }
}
@media (min-width: 900px) and (pointer: coarse) {
  .dvs-met { display: inline-flex; min-height: 44px; }
}

/* Metodika času (Jak to funguje) */
.met-hd .lead { max-width: 62ch; }
.met-pozn { margin: 10px 0 0; font-size: var(--t2); color: var(--n200); max-width: 70ch; }
.met-h3 { margin: 36px 0 12px; font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.01em; }
.met-tab { width: 100%; border-collapse: collapse; font-size: var(--t2); line-height: 1.5; color: var(--n700); background: var(--plocha);
  border-radius: var(--r); overflow: hidden; box-shadow: var(--stin-karta); }
.met-tab th, .met-tab td { text-align: left; vertical-align: top; padding: 12px 16px; border-top: 1px solid var(--n100); }
.met-tab thead th { border-top: 0; font-size: var(--t1); font-weight: var(--w-med); color: var(--n200); background: var(--s150); }
.met-tab tbody th { font-weight: var(--w-bold); color: var(--n900); }
.met-tab b { color: var(--n900); }
.met-mes { color: var(--n200); white-space: nowrap; }
.met-dva { display: grid; gap: 0 48px; }
.met-seznam { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: var(--t2); color: var(--n700); line-height: 1.55; max-width: 70ch; }
.met-zdroje { margin-top: 28px; }
.met-zdroje ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 4px; font-size: var(--t2); }
.met-zdroje a { color: var(--p); text-decoration: underline; text-decoration-color: var(--p300); text-underline-offset: 3px; overflow-wrap: anywhere; }
.met-zdroje a:hover { text-decoration-color: currentColor; }
@media (max-width: 899px) {
  /* tabulka jako karty pod sebou; role drží sémantiku i s display: block */
  .met-tab, .met-tab tbody, .met-tab tr, .met-tab th, .met-tab td { display: block; }
  .met-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .met-tab tr { padding: 14px 16px; border-top: 1px solid var(--n150); }
  .met-tab tbody tr:first-child { border-top: 0; }
  .met-tab th, .met-tab td { padding: 0; border: 0; }
  .met-tab tbody th { font-size: var(--t3); margin-bottom: 6px; }
  .met-tab td + td, .met-tab th + td { margin-top: 8px; }
  .met-tab td::before { content: attr(data-l); display: block; font-size: var(--t1); font-weight: var(--w-med); color: var(--n200); }
}
@media (min-width: 900px) {
  .met-tab-5 th:nth-child(1) { width: 15%; }
  .met-tab-5 td:nth-child(2) { width: 30%; }
  .met-tab-5 td:nth-child(3) { width: 15%; }
  .met-tab-5 td:nth-child(5) { width: 11%; }
  .met-tab-3 th:nth-child(1) { width: 18%; }
  .met-tab-3 td:nth-child(2) { width: 34%; }
  .met-dva { grid-template-columns: 1fr 1fr; }
}
/* ── konec Proč 1/8 (s201) ── */

/* ── Bublina splátek s Essoxem (s202) ─────────────────────────────────────
   Jeden prvek na konci <body> (vytvoří ho main.js), ne v kartě: karta má
   overflow: hidden a bublina dolů by se ořízla. Jen popisek, klik neloví.
   Generuje _build/s202_splatky_pod_cenou.py. */
:root { --z-bublina: 30; }
.spl-bublina { position: absolute; top: 0; left: 0; z-index: var(--z-bublina); width: 250px; max-width: calc(100vw - 16px);
  display: grid; gap: 7px; justify-items: start; padding: 14px 16px 15px; border-radius: var(--r);
  background: var(--plocha); color: var(--n900); box-shadow: var(--stin-popover); pointer-events: none;
  opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; }
.spl-bublina.je-otevrena { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .15s ease; }
.spl-bublina::before { content: ""; position: absolute; top: -6px; left: var(--sipka, 14px); width: 12px; height: 12px;
  background: var(--plocha); transform: rotate(45deg); border-radius: 2px; box-shadow: -3px -3px 4px rgb(var(--zavoj) / .05); }
.spl-bublina img { display: block; height: 20px; width: auto; }
.spl-bublina-v { font-size: var(--t3); font-weight: var(--w-med); line-height: 1.35; letter-spacing: -.01em; }
.spl-bublina-c { display: inline-flex; align-items: center; gap: 4px; font-size: var(--t2); font-weight: var(--w-med); line-height: 1.35; color: var(--p); }
.spl-bublina-c svg { width: 16px; height: 16px; flex: none; }
@media (prefers-reduced-motion: reduce) { .spl-bublina, .spl-bublina.je-otevrena { transition: none; transform: none; } }
/* ── konec bubliny splátek (s202) ── */

/* ── Cena provozu A1: věta a pečeť (s203) ────────────────────────────────
   Pečeť „po všech poplatcích“ u každého procenta výnosu, řádek „Každý měsíc“
   v cenovém panelu detailu, poznámka pod modelem, řádek Provoz na úvodní
   stránce a otázka „Co platím každý měsíc?“ s tabulkou (pod 700 px karty). */
.cisty { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; font-family: var(--sans);
  font-size: var(--t1); font-weight: var(--w-med); line-height: 1.4; letter-spacing: 0; color: var(--p);
  background: rgb(var(--p-rgb) / .1); border-radius: var(--r-pill); padding: 3px 10px 3px 8px; white-space: nowrap; }
.cisty svg { width: 14px; height: 14px; flex: 0 0 auto; }
.rozpeti .v .cisty { margin-left: 8px; position: relative; top: -4px; }
@media (max-width: 559px) { .rozpeti .v .cisty { display: flex; width: max-content; margin: 10px 0 0; top: 0; } }
.model-vys .cisty-tm { margin-top: 14px; color: var(--tm-1); background: var(--tm-plocha-2); }
.cisty-pozn { grid-column: 1 / -1; display: flex; gap: 12px; align-items: flex-start; background: var(--plocha);
  border: 1px solid var(--s200); border-radius: var(--r); padding: 14px 18px; font-size: var(--t3); line-height: 1.55;
  color: var(--n700); max-width: 76ch; }
.cisty-pozn svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--p); }
.cisty-pozn b { color: var(--n900); font-weight: var(--w-med); }
.cisty-veta { color: var(--n900); font-weight: var(--w-med); }

/* detail: řádek „Každý měsíc“ přes celou šířku `.split` */
.split .split-mesic { grid-column: 1 / -1; }
.split-mesic .vl { font-variant-numeric: tabular-nums; }
[data-page="detail"] .panel .split .split-mesic-d { font-size: var(--t2); font-weight: var(--w-text); letter-spacing: 0; color: var(--n700); }
@media (max-width: 559px) { .split-mesic-d { display: block; } }

/* úvodní stránka: řádek Provoz */
.pri-row .vl .pri-za { font-size: var(--t3); font-weight: var(--w-med); letter-spacing: 0; color: var(--n200); }
.pri-provoz .d p + p { margin-top: 10px; }
.pri-cisty b { color: var(--n900); font-weight: var(--w-med); }
/* (0,3,1) kvůli `p a:not(.btn):not(.quiet-a)` s `padding-block: 4px`; plocha 44 px bez posunu sazby */
.pri .pri-row .pri-cisty-a { display: inline-block; padding: 12px 0; margin: -12px 0; color: var(--p);
  font-weight: var(--w-med); white-space: nowrap; }
.pri .pri-row .pri-cisty-a:hover { color: var(--n900); }
@media (max-width: 699px) { .pri .pri-row .pri-cisty-a { display: flex; align-items: center; min-height: 44px; margin: 6px 0 -6px; padding: 0; } }

/* Jak to funguje: odpověď s tabulkou */
.cisty-faq .fine { margin-top: 14px; }
.cisty-tab { width: 100%; margin-top: 20px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--s200);
  border-radius: var(--r); overflow: hidden; background: var(--plocha); font-size: var(--t3); line-height: 1.5; }
.cisty-tab th, .cisty-tab td { padding: 14px 18px; text-align: left; vertical-align: top; color: var(--n700);
  border-top: 1px solid var(--s200); border-left: 1px solid var(--s200); font-weight: var(--w-text); }
.cisty-tab tr > :first-child { border-left: 0; }
.cisty-tab thead th, .cisty-tab thead td { border-top: 0; background: var(--s150); }
.cisty-tab thead th { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.015em; color: var(--n900); }
.cisty-tab tbody th { width: 30%; background: var(--s50); font-size: var(--t2); font-weight: var(--w-med); color: var(--n700); }
.cisty-tab tbody th span { display: block; font-size: var(--t1); font-weight: var(--w-text); color: var(--n200); }
.cisty-tab .cisty-ano { color: var(--n900); font-weight: var(--w-med); }
.cisty-karty { display: none; }
@media (max-width: 699px) {
  .cisty-tab { display: none; }
  .cisty-karty { display: grid; gap: 10px; margin-top: 16px; }
  .cisty-karta { border: 1px solid var(--s200); border-radius: var(--r); overflow: hidden; background: var(--plocha); }
  .cisty-karta-h { background: var(--s150); padding: 10px 14px; font-weight: var(--w-bold); color: var(--n900); }
  .cisty-karta dl { margin: 0; padding: 4px 14px 12px; }
  .cisty-karta dt { font-size: var(--t1); font-weight: var(--w-med); color: var(--n200); margin-top: 8px; }
  .cisty-karta dd { margin: 0; color: var(--n900); }
  .cisty-karta dd.cisty-ano { font-weight: var(--w-med); }
  .cisty-kdo { background: var(--s50); border: 1px solid var(--s200); border-radius: var(--r); padding: 12px 14px;
    font-size: var(--t2); color: var(--n700); }
  .odp .cisty-kdo { margin-top: 0; }
}
/* ── konec ceny provozu (s203) ── */

/* ── Praha A1: fotky nad sloupci (s204) ─────────────────────────────────
   Investiční stránka `#praha`: nadpis a perex, dvě fotky a fakta, graf ve
   stejném měřítku (výšky z `--byt`, `--sum`, `--zb`, `--max` a `--v` úseků,
   čísla sází krok z katalogu), seznam podílů ve výšce svých úseků. Pod 1040 px
   vodorovné pruhy, fotky vedle sebe a seznam pod sebou; pod 700 px bez faktů
   (čísla nese seznam a poznámka). */
.praha { --praha-sl: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 44px; }
.praha-hlava .lead { margin-top: 12px; }
.praha-mrizka { display: grid; grid-template-columns: var(--praha-sl); gap: 12px; margin-top: 24px; }
.praha-foto img { width: 100%; height: auto; aspect-ratio: 7 / 6; object-fit: cover; border-radius: var(--r); background: var(--rok-prazdny); }
.praha-foto figcaption { padding-top: 8px; font-size: var(--t2); line-height: 1.4; color: var(--n700); }
.praha-foto figcaption b { display: block; font-size: var(--t3); font-weight: var(--w-med); color: var(--n900); }
.praha-cena { font-weight: var(--w-med); color: var(--s700); white-space: nowrap; }
.praha-siroke { display: none; }
.praha-fakta { display: none; margin: 0; }
.praha-fakta > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; padding: 12px 0; border-top: 1px solid var(--s200); }
.praha-fakta > div:last-child { border-bottom: 1px solid var(--s200); }
.praha-fakta dt { font-size: var(--t2); color: var(--n700); }
.praha-fakta dd { margin: 0; font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.02em; color: var(--p600);
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.praha-fakta .praha-zdroj { grid-column: 1 / -1; text-align: left; white-space: normal; margin-top: 2px;
  font-size: var(--t1); font-weight: var(--w-text); letter-spacing: 0; line-height: 1.45; color: var(--n200); }

/* graf: pod 1040 px vodorovné pruhy */
.praha-plot { margin-top: 26px; }
.pg-linka, .pg-byt b, .pg-byt span, .pg-whl, .pg-zb span, .praha-popisky { display: none; }
.pg-sl + .pg-sl { margin-top: 18px; }
.pg-hl { display: flex; justify-content: space-between; gap: 12px; font-size: var(--t2); margin-bottom: 8px; }
.pg-hl b { font-weight: var(--w-med); color: var(--n900); }
.pg-hl span { font-weight: var(--w-med); color: var(--p600); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-trk { position: relative; height: 40px; }
.pg-byt { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--byt) / var(--max) * 100%);
  background: var(--rok-prazdny); border-radius: var(--r-xs); }
.pg-wh { position: absolute; top: 50%; height: 1.5px; background: var(--p600);
  left: calc(var(--od) / var(--max) * 100%); width: calc((var(--do) - var(--od)) / var(--max) * 100%); }
.pg-wh::before, .pg-wh::after { content: ""; position: absolute; top: -6px; width: 1.5px; height: 13px; background: var(--p600); }
.pg-wh::before { left: 0; } .pg-wh::after { right: 0; }
.pg-pozn { margin-top: 6px; font-size: var(--t1); color: var(--n700); }
.pg-sl-byt .pg-pozn { text-align: center; }
.pg-sl-podily .pg-pozn { font-weight: var(--w-med); color: var(--p600); }
.pg-stack { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--byt) / var(--max) * 100%);
  display: flex; flex-direction: row-reverse; gap: 2px; }
.pg-zb { flex: var(--zb) 1 0px; min-width: 0; border: 1.5px dashed var(--s600); border-left: 0; border-radius: 0 var(--r-xs) var(--r-xs) 0; }
.pg-segs { flex: var(--sum) 1 0px; min-width: 0; display: flex; gap: 2px; }
.pg-segs i { flex: var(--v) 1 0px; min-width: 0; background: var(--s); }
.pg-segs i:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); }

.praha-sloupec { display: flex; flex-direction: column; margin-top: 18px; }
.praha-seznam { order: 1; display: flex; flex-direction: column; }
.praha-seznam li { display: flex; border-top: 1px solid var(--s200); }
.praha-seznam a { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0;
  font-size: var(--t3); color: var(--n900); }
.praha-seznam a:hover .praha-jm { text-decoration: underline; text-underline-offset: 3px; }
.praha-seznam .flag { width: 18px; height: 12px; flex: 0 0 auto; border-radius: 2px; box-shadow: 0 0 0 1px rgb(var(--cerna-rgb) / .13); }
.praha-kc { margin-left: auto; padding-left: 12px; font-weight: var(--w-med); white-space: nowrap; font-variant-numeric: tabular-nums; }
.praha-soucet { order: 2; display: flex; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--n900);
  border-bottom: 1px solid var(--n900); font-size: var(--t2); font-weight: var(--w-med); }
.praha-soucet .praha-kc { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.02em; }
.praha-zb { order: 3; display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--s200);
  font-size: var(--t3); color: var(--s700); }
.praha-pata { display: grid; gap: 18px; margin-top: 20px; }
.praha-pata .fine { max-width: 92ch; }
.praha-pata .fine + .fine { margin-top: 4px; }
@media (max-width: 699px) { .praha-pata .btn { width: 100%; min-height: 48px; } }
@media (min-width: 700px) {
  .praha-mrizka { gap: 20px 24px; }
  .praha-fakta { display: block; grid-column: 1 / -1; }
  .praha-siroke { display: inline; }
  .praha-foto img { aspect-ratio: 4 / 3; }
  .pg-trk { height: 48px; }
}

@media (min-width: 1040px) {
  .praha { --praha-sl: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.56fr); margin-bottom: 56px; }
  .praha-hlava { display: grid; grid-template-columns: 7fr 5fr; gap: 72px; align-items: end; }
  .praha-hlava .h2 { max-width: 22ch; }
  .praha-hlava .lead { margin-top: 0; }
  .praha-mrizka { column-gap: 32px; margin-top: 44px; }
  .praha-foto img { aspect-ratio: 34 / 25; }
  .praha-fakta { grid-column: auto; }
  .praha-plot { position: relative; display: grid; grid-template-columns: var(--praha-sl); column-gap: 32px;
    height: 470px; margin-top: 36px; align-items: end; }
  .pg-linka { display: block; position: absolute; left: 0; right: 0; bottom: calc(var(--byt) / var(--max) * 100%);
    border-top: 1px solid var(--p400); pointer-events: none; }
  .pg-linka em { position: absolute; right: 0; bottom: 4px; padding-left: 8px; background: var(--s150); font-style: normal;
    font-size: var(--t1); font-weight: var(--w-med); color: var(--p600); white-space: nowrap; }
  .pg-sl { height: 100%; }
  .pg-sl + .pg-sl { margin-top: 0; }
  .pg-hl, .pg-pozn { display: none; }
  .pg-trk { height: 100%; }
  .pg-byt { top: auto; right: 0; width: auto; height: calc(var(--byt) / var(--max) * 100%); padding: 14px 16px; }
  .pg-byt b { display: block; font-size: var(--t2); font-weight: var(--w-med); }
  .pg-byt span { display: block; font-size: var(--t1); color: var(--n700); }
  .pg-wh { top: auto; left: auto; right: 34px; width: 1.5px; bottom: calc(var(--od) / var(--max) * 100%);
    height: calc((var(--do) - var(--od)) / var(--max) * 100%); }
  .pg-wh::before, .pg-wh::after { top: auto; left: -6px; right: auto; width: 13px; height: 1.5px; }
  .pg-wh::before { top: 0; } .pg-wh::after { bottom: 0; }
  .pg-whl { display: block; position: absolute; right: 52px; font-size: var(--t1); line-height: 1.2; color: var(--p600); white-space: nowrap; }
  .pg-whl-do { bottom: calc(var(--do) / var(--max) * 100% - 7px); }
  .pg-whl-od { bottom: calc(var(--od) / var(--max) * 100% - 7px); }
  .pg-stack { top: auto; right: 0; width: auto; height: calc(var(--byt) / var(--max) * 100%); flex-direction: column; }
  .pg-zb { display: flex; align-items: center; justify-content: center; border: 1.5px dashed var(--s600); border-bottom: 0;
    border-radius: var(--r-xs) var(--r-xs) 0 0; }
  .pg-zb span { display: block; font-size: var(--t1); font-weight: var(--w-med); color: var(--s700); }
  .pg-segs { flex-direction: column-reverse; }
  .pg-segs i:first-child { border-radius: 0; }
  .pg-segs i:last-child { border-radius: var(--r-xs) var(--r-xs) 0 0; }
  .praha-sloupec { height: calc(var(--byt) / var(--max) * 100%); margin-top: 0; gap: 2px; }
  .praha-zb { flex: var(--zb) 1 0px; min-height: 0; order: 0; border-bottom: 0; font-size: var(--t2); }
  .praha-seznam { flex: var(--sum) 1 0px; min-height: 0; order: 0; flex-direction: column-reverse; gap: 2px; }
  .praha-seznam li { flex: var(--v) 1 0px; min-height: 0; border-top: 0; }
  .praha-seznam a { min-height: 0; padding: 0 0 0 2px; font-size: var(--t2); color: var(--n700); }
  .praha-seznam .praha-kc { color: var(--n900); }
  .praha-soucet { display: none; }
  .praha-popisky { display: grid; grid-template-columns: var(--praha-sl); column-gap: 32px; border-top: 1px solid var(--n900); }
  .praha-popisky p { padding-top: 12px; font-size: var(--t2); line-height: 1.35; }
  .praha-popisky b { display: block; font-size: var(--t3); font-weight: var(--w-med); }
  .praha-popisky p > span { font-size: var(--t1); color: var(--n200); }
  .praha-popisky .praha-soucet-d { display: flex; align-items: baseline; gap: 10px; padding-top: 10px; }
  .praha-popisky .praha-soucet-d b { display: inline; font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.025em; }
  .praha-pata { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; margin-top: 32px; }
}
@media (pointer: coarse) and (min-width: 1040px) { .praha-seznam a { min-height: 24px; } }

/* Jak to funguje, kapitola 05 */
/* `.two > div:first-child` (s-starší) dělá z prvního sloupce mřížku s mezerou 34 px */
.two.praha-kap > div { display: block; border-radius: var(--r); padding: 20px; }
.praha-kap-byt { background: var(--n50); border: 1px solid var(--n150); }
.praha-kap-podily { background: var(--s150); border: 1px solid var(--s200); }
.praha-kap .lab { color: var(--n200); }
.praha-kap-podily .lab { color: var(--s700); }
.praha-kap-cena { font-size: clamp(24px, 4.5vw, 32px); font-weight: var(--w-bold); letter-spacing: -.035em; margin-top: 6px; white-space: nowrap; }
.praha-kap-podily .praha-kap-cena { color: var(--p); }
.praha-kap ul { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; font-size: var(--t2); color: var(--n700); }
.praha-kap-vlajky { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.praha-kap-vlajky span { flex-basis: 100%; }
.chapter > .praha-kap-odk { margin-top: 14px; }
.praha-kap-odk a { display: inline-flex; align-items: center; min-height: 44px; font-weight: var(--w-med); color: var(--p); }
.praha-kap-odk a:hover { color: var(--n900); }
/* ── konec Prahy A1 (s204) ── */

/* ── Video u kapitoly a obsah starého webu (s205) ──────────────────────────
   Varianta A 3. kola. Lite embed: náhled 16 : 9 s tlačítkem, přehrávač
   youtube-nocookie.com až po kliknutí. Obsah starého webu u kapitol
   Jak to funguje, v panelu ceny na detailu a pod pásem zemí na výpisu. */
.lvid { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 480px; }
.lvid-ram { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--n900); }
.lvid-ram img, .lvid-ram iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.lvid-hraj { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border-radius: var(--r); }
.lvid-hraj::before { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: rgb(var(--zavoj) / .22); box-shadow: inset 0 0 0 1px var(--tm-linka-1); transition: background-color .18s ease; }
.lvid-hraj:hover::before { background: rgb(var(--zavoj) / .34); }
.lvid-hraj:focus-visible { outline: none; }
.lvid-hraj:focus-visible::before { box-shadow: inset 0 0 0 3px var(--p), inset 0 0 0 5px var(--plocha); }
.lvid-ikona { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: var(--plocha); color: var(--p); box-shadow: var(--stin-chip); transition: transform .18s ease; }
.lvid-ikona svg { margin-left: 3px; }
.lvid-hraj:hover .lvid-ikona { transform: scale(1.06); }
.lvid-pop { display: flex; flex-direction: column; gap: 2px; }
.lvid-lb { font-size: var(--t1); font-weight: var(--w-med); line-height: 1.5; color: var(--n200); }
.lvid-nazev { font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.015em; line-height: 1.35; color: var(--n900); }
@media (max-width: 699px) {
  .lvid-ikona { width: 56px; height: 56px; }
  .lvid-nazev { font-size: var(--t3); }
}
@media (prefers-reduced-motion: reduce) { .lvid-hraj::before, .lvid-ikona { transition: none; } }

/* Hlavička Jak to funguje: video pod perexem. */
.phead-bok .lvid-hlava { margin-top: 24px; }
@media (max-width: 699px) { .phead-bok .lvid-hlava { margin-top: 20px; } }

/* Boxy u kapitol */
.jtf-box { display: flex; flex-direction: column; gap: 14px; padding: 24px 26px; border-radius: var(--r); background: var(--plocha); }
.jtf-box h3 { display: flex; align-items: center; gap: 10px; font-size: var(--t4); font-weight: var(--w-med);
  letter-spacing: -.015em; line-height: 1.35; color: var(--n900); }
.jtf-box h3 .ico { flex: none; width: 20px; height: 20px; color: var(--p); }
.jtf-box .fine { max-width: none; }
.jtf-dl li { display: flex; flex-direction: column; gap: 1px; padding: 11px 0; border-top: 1px solid var(--n100); }
.jtf-dl li:first-child { padding-top: 0; border-top: 0; }
.jtf-dl b { font-weight: var(--w-med); color: var(--n900); }
.jtf-dl span { color: var(--n700); }
.jtf-dl small { font-size: var(--t2); line-height: 1.45; color: var(--n200); }
.jtf-chk { display: grid; gap: 8px 24px; }
@media (min-width: 560px) { .jtf-chk { grid-template-columns: 1fr 1fr; } }
.jtf-chk li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; line-height: 1.45; color: var(--n700); }
.jtf-chk svg { margin-top: 1px; color: var(--p); }
.jtf-vid { display: flex; flex-direction: column; gap: 12px; }
.jtf-vid-tx { max-width: 52ch; color: var(--n700); }
@media (max-width: 699px) {
  .jtf-box { padding: 20px; }
  /* na mobilu video napřed, boxy pod ním (mockup A Mobil) */
  .jtf-kryti > .jtf-vid, .jtf-provoz > .jtf-vid { order: -1; }
}

/* Kapitola 01: dva boxy a video (od 1280 px ve třech sloupcích) */
.jtf-kryti { display: grid; gap: 24px; align-items: start; }
@media (min-width: 700px) {
  .jtf-kryti { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jtf-kryti > .jtf-vid { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 24px; align-items: center; }
}
@media (min-width: 1280px) {
  .jtf-kryti { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 400px; }
  .jtf-kryti > .jtf-vid { grid-column: auto; display: flex; }
}
/* Kapitola 03: co řešíme my a video */
.jtf-provoz { display: grid; gap: 24px; align-items: start; }
@media (min-width: 1040px) { .jtf-provoz { grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 48px; } }
@media (min-width: 1280px) { .jtf-provoz { gap: 64px; } }

/* Proč lidé kupují podíl: nadpis s videem, sedm výhod a jedna nevýhoda */
.jtf-proc { display: grid; gap: 32px; align-items: start; }
.jtf-proc-hl { display: flex; flex-direction: column; gap: 24px; }
.jtf-proc-hl .h2 { max-width: 24ch; }
@media (min-width: 1040px) { .jtf-proc { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: 64px; } }
.jtf-vyhody { display: grid; column-gap: 40px; }
@media (min-width: 700px) { .jtf-vyhody { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jtf-vyhody li { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-top: 1px solid var(--n150); }
.jtf-vyhody b { font-weight: var(--w-med); color: var(--n900); }
.jtf-vyhody span { color: var(--n700); }
.jtf-vyhody .jtf-nev { margin-top: 10px; padding: 16px 18px; border-top: 0; border-radius: var(--r); background: var(--plocha); }
.jtf-vyhody .jtf-nev-lb { font-size: var(--t2); font-weight: var(--w-med); color: var(--n200); }

/* FAQ o prodeji v bodech */
.faq-prodej { display: flex; flex-direction: column; gap: 12px; max-width: 72ch; font-size: var(--t3); line-height: 1.68; color: var(--n700); }
.faq-prodej .jtf-dl li { padding: 9px 0; line-height: 1.55; }
.faq-prodej .jtf-dl li:first-child { padding-top: 0; }

/* Detail: rozbalovací řádky pod cenou */
.cena-rozpis { display: flex; flex-direction: column; border: 1px solid var(--s200); border-radius: var(--r-control); }
.cr-radek + .cr-radek { border-top: 1px solid var(--s200); }
.cr-radek.otevreny { background: var(--s50); }
.cr-radek:first-child { border-radius: var(--r-control) var(--r-control) 0 0; }
.cr-radek:last-child { border-radius: 0 0 var(--r-control) var(--r-control); }
.cr-hlava { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px;
  padding: 9px 14px; text-align: left; color: var(--n900); border-radius: inherit; }
.cr-tx { display: flex; flex-direction: column; min-width: 0; }
.cr-tx b { font-size: var(--t3); font-weight: var(--w-med); line-height: 1.35; }
.cr-tx small { font-size: var(--t2); line-height: 1.4; color: var(--n200); }
.cr-sip { flex: none; color: var(--p); transition: transform .2s var(--doben); }
.cr-hlava[aria-expanded="true"] .cr-sip { transform: rotate(180deg); }
.cr-hlava:hover b { color: var(--p); }
.cr-hlava:focus-visible { outline-offset: -2px; }
.cr-telo { padding: 0 14px 14px; font-size: var(--t2); line-height: 1.5; color: var(--n700); }
.cr-telo ul { display: flex; flex-direction: column; gap: 6px; }
.cr-telo li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 8px; line-height: 1.45; }
.cr-telo li::before { content: ""; width: 5px; height: 5px; margin: 7px 0 0 3px; border-radius: 50%; background: var(--p300); }
@media (prefers-reduced-motion: reduce) { .cr-sip { transition: none; } }

/* Detail: odkaz na video u lišty pronájmu */
.vodkaz { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 12px;
  padding: 10px 16px 10px 10px; border: 1px solid var(--n100); border-radius: var(--r); background: var(--plocha); color: var(--n900); }
.vodkaz:hover { border-color: var(--p300); }
.vodkaz-nahled { position: relative; display: block; width: 96px; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-xs); background: var(--n900); }
.vodkaz-nahled img { width: 100%; height: 100%; object-fit: cover; }
.vodkaz-nahled::after { content: ""; position: absolute; inset: 0; background: rgb(var(--zavoj) / .22); }
.vodkaz-hraj { position: absolute; z-index: 1; left: 50%; top: 50%; display: grid; place-items: center; width: 28px; height: 28px;
  margin: -14px 0 0 -14px; border-radius: 50%; background: var(--plocha); color: var(--p); }
.vodkaz-hraj svg { width: 12px; height: 12px; margin-left: 2px; }
.vodkaz-tx b { display: block; font-size: var(--t3); font-weight: var(--w-med); line-height: 1.35; }
.vodkaz-tx small { display: block; margin-top: 2px; font-size: var(--t2); font-weight: var(--w-med); line-height: 1.4; color: var(--p); }
.vodkaz .ar { color: var(--p); }
@media (max-width: 899px) { [data-page="detail"] .d-uvod > .vodkaz { order: 6; margin-top: 0; } }
@media (max-width: 699px) { .vodkaz { gap: 12px; padding-right: 12px; } .vodkaz-nahled { width: 80px; } }

/* Výpis: jak nemovitosti vybíráme (pod pásem zemí, stejný krém) */
.vyber-pruh { background: var(--s150); padding-bottom: 20px; }
.vyber-in { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 20px; border-radius: var(--r); background: var(--plocha); }
.vyber-in p { color: var(--n700); line-height: 1.5; }
.vyber-in b { font-weight: var(--w-med); color: var(--n900); }
.vyber-ic { color: var(--p); }
.vyber-in .odkaz { display: inline-flex; align-items: center; min-height: 44px; }
@media (max-width: 699px) {
  .vyber-pruh { padding-bottom: 16px; }
  .vyber-in { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 12px; padding: 14px 16px 6px; }
  .vyber-ic { margin-top: 2px; }
  .vyber-in .odkaz { grid-column: 2; }
}
/* ── konec videa u kapitoly (s205) ── */

/* ── Detail: vlajka, mapa a trasa (s206) ──────────────────────────────
   Varianta A z Detailv3 (16. 9.). Vlajka před místem, odkaz „Mapa a trasa“
   hned za ním, parametry o řádek níž. Dialog: mapa vlevo, trasa vpravo;
   pod 900 px pod sebou, pod 700 px přes celou obrazovku s tlačítky dole. */
.d-misto { display: inline-flex; align-items: center; gap: 10px; }
.d-misto .flag { width: 18px; height: 12px; }
[data-page="detail"] .d-meta { column-gap: 18px; }
[data-page="detail"] .d-meta > .d-fakta { flex-basis: 100%; margin-left: 0; padding-left: 0; border-left: 0; }
@media (min-width: 900px) and (max-width: 1279px) {
  [data-page="detail"] .d-meta { gap: 2px; }
  [data-page="detail"] .d-meta > .d-fakta { flex-basis: auto; margin-top: 6px; }
}
.d-mapa-odkaz { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0; border: 0;
  background: none; cursor: pointer; font: inherit; font-size: var(--t3); font-weight: var(--w-med); color: var(--p);
  white-space: nowrap; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--p200); text-decoration-thickness: 1.5px; }
.d-mapa-odkaz svg { flex: 0 0 auto; }
.d-mapa-odkaz:hover { color: var(--n900); text-decoration-color: currentColor; }
.d-mapa-odkaz:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; border-radius: var(--r-xs); }
@media (max-width: 899px) {
  [data-page="detail"] .d-meta > .d-mapa-odkaz { order: 2; justify-self: start; margin-top: -14px; }
}

/* Okno s mapou */
.d-mapa { border: 0; padding: 0; margin: auto; width: min(1120px, calc(100vw - 48px)); max-width: none;
  height: min(680px, calc(100dvh - 48px)); max-height: none; border-radius: var(--r-lg); overflow: hidden;
  background: var(--plocha); color: var(--n900); box-shadow: 0 30px 80px rgb(var(--zavoj) / .35); }
.d-mapa::backdrop { background: rgb(var(--zavoj) / .62); }
.d-mapa-in { display: grid; grid-template-columns: minmax(0, 1fr) 420px; height: 100%; }
.d-mapa-plocha { position: relative; min-height: 0; height: 100%; background: var(--mapa-podklad); }
.d-mapa-bok { display: flex; flex-direction: column; gap: 18px; min-height: 0; overflow-y: auto; padding: 26px 28px 24px; }
.d-mapa-hl { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.d-mapa-hl h2 { font-size: var(--t5); font-weight: var(--w-med); letter-spacing: -.02em; line-height: 1.3; }
.d-mapa-hl p { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: var(--t2); line-height: 1.4; color: var(--n200); }
.d-mapa-x { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; cursor: pointer;
  border: 1px solid var(--n150); border-radius: var(--r-pill); background: var(--plocha); color: var(--n900); }
.d-mapa-x:hover { border-color: var(--p300); }
.d-mapa-obsah { display: grid; gap: 12px; }
.d-mapa-obsah:has(> .d-mapa-hlaska:empty:only-child) { display: none; }
.d-doba { display: grid; margin: 0; padding: 9px 16px; border-radius: var(--r); background: var(--s150); }
.d-doba > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 5px 0;
  font-size: var(--t3); line-height: 1.45; }
.d-doba > div + div { border-top: 1px solid var(--s200); }
.d-doba dt { color: var(--n700); }
.d-doba dd { margin: 0; font-weight: var(--w-med); text-align: right; }
.d-mapa-pozn { font-size: var(--t1); line-height: 1.5; color: var(--n200); }
.d-mapa-hlaska { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid var(--s200);
  border-radius: var(--r); background: var(--s50); font-size: var(--t2); line-height: 1.45; color: var(--n700); }
.d-mapa-hlaska:empty { display: none; }
.d-mapa-hlaska svg { flex: 0 0 auto; margin-top: 1px; color: var(--s700); }
.d-mapa-hlaska b { font-weight: var(--w-med); color: var(--n900); }
.d-mapa-dole { display: grid; gap: 10px; }
.d-mapa [hidden] { display: none; }
.d-mapa-dole .btn[disabled] { opacity: .7; cursor: progress; }
.d-mapa-lb { font-size: var(--t2); font-weight: var(--w-med); color: var(--n700); }
.d-mapa-apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.d-mapa-app { display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 6px 4px;
  border: 1px solid var(--n150); border-radius: var(--r-control); background: var(--plocha); color: var(--n900);
  font-size: var(--t2); font-weight: var(--w-med); line-height: 1.25; text-align: center; transition: border-color .15s ease; }
.d-mapa-app:hover { border-color: var(--p300); color: var(--n900); }
.d-mapa-pata { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--n100); }
/* Cedulky na mapě: obal je bod bez rozměru, cedulka se na něj centruje. */
.d-mapa-bod { width: 0 !important; height: 0 !important; margin: 0 !important; border: 0; background: none; }
.d-mapa-cil { position: absolute; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border: 1px solid var(--p600); border-radius: var(--r-pill); background: var(--p); color: var(--tm-1);
  font-family: var(--sans); font-size: var(--t3); font-weight: var(--w-med); line-height: 1.2; white-space: nowrap;
  box-shadow: var(--stin-chip); }
.d-mapa-cil .flag { box-shadow: 0 0 0 1px var(--tm-linka-3); }
.d-mapa-ja { position: absolute; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--p400); border: 3px solid var(--plocha); box-shadow: 0 0 0 1px var(--p), 0 2px 6px rgb(var(--zavoj) / .3); }
.d-mapa-vy { position: absolute; transform: translate(calc(-100% - 16px), -50%); padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--plocha); color: var(--n900); font-family: var(--sans); font-size: var(--t2); font-weight: var(--w-med);
  line-height: 1.2; white-space: nowrap; box-shadow: var(--stin-chip); }
.d-mapa .leaflet-container { font-family: var(--sans); background: var(--mapa-podklad); }
.d-mapa .leaflet-control-attribution { background: var(--plocha-sklo); font-size: 10.5px; color: var(--n200); }
.d-mapa .leaflet-control-attribution a { color: var(--p); }
.d-mapa .leaflet-control-zoom { border: 0; border-radius: var(--r-sm); box-shadow: var(--stin-chip); }
.d-mapa .leaflet-bar.leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; font-size: var(--t5); color: var(--n900); }
.d-mapa-plocha.bez-mapy::after { content: ""; position: absolute; inset: 0; background: var(--mapa-podklad); }
@media (prefers-reduced-motion: reduce) { .d-mapa-app { transition: none; } }

@media (max-width: 899px) {
  .d-mapa { height: auto; max-height: calc(100dvh - 48px); overflow-y: auto; }
  .d-mapa-in { grid-template-columns: 1fr; grid-template-rows: 340px auto; height: auto; }
  .d-mapa-bok { overflow: visible; }
  .d-mapa-pata { margin-top: 0; }
}
@media (max-width: 699px) {
  .d-mapa { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
  .d-mapa-in { display: flex; flex-direction: column; min-height: 100%; height: auto; }
  .d-mapa-bok { display: contents; }
  .d-mapa-hl { order: 0; align-items: center; min-height: 62px; padding: 8px 10px 8px 20px; border-bottom: 1px solid var(--n100); }
  .d-mapa-hl h2 { font-size: var(--t4); line-height: 1.25; }
  .d-mapa-hl p { font-size: var(--t1); gap: 6px; }
  .d-mapa-plocha { order: 1; flex: 0 0 290px; height: 290px; }
  .d-mapa-obsah { order: 2; padding: 16px 20px 0; }
  .d-mapa-pata { order: 3; margin: 0 20px; padding: 12px 0 16px; }
  .d-mapa-dole { order: 4; position: sticky; bottom: 0; margin-top: auto; padding: 12px 20px 18px;
    border-top: 1px solid var(--n100); background: var(--plocha); }
  .d-mapa-dole .d-mapa-lb { display: none; }
  .d-mapa-app { min-height: 48px; }
  .d-mapa-cil { font-size: var(--t2); padding: 6px 11px; }
}
/* ── konec mapy a trasy na detailu (s206) ── */

/* ── Detail: prodáno a pás provozu (s207) ─────────────────────────────
   C z 2. kola (tichý pruh, šedá galerie, podobné pod galerií) a A z 3. kola
   (pás provozu u prodané s pronájmem). Háček: body[data-d-stav]. Na desktopu
   se levý sloupec rozloží do mřížky .two, aby pás a karty šly přes celou
   šířku hned pod galerii; zbytek levého sloupce pokračuje pod nimi. */
.d-stav { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 10px;
  border: 1px solid var(--n150); border-radius: var(--r); background: var(--plocha); }
.d-stav-f { flex: 0 0 auto; width: 54px; height: 40px; border-radius: var(--r-sm);
  background-size: cover; background-position: center; filter: grayscale(.9) contrast(.9); }
.d-stav p { flex: 1; min-width: 0; font-size: var(--t3); line-height: 1.45; color: var(--n900); }
.d-stav p b { font-weight: var(--w-med); }
.d-stav p span { color: var(--n200); }
.d-stav .btn { flex: 0 0 auto; min-height: 40px; padding: 8px 15px; border-radius: var(--r-sm); font-size: var(--t2); }

[data-d-stav="prodano"] .d-uvod h1,
[data-d-stav="prodano"] .d-misto,
[data-d-stav="prodano"] .d-fakta dd { color: var(--n200); }
[data-d-stav="prodano"] .d-uvod .gal > button:not(.vic-fotek) { filter: grayscale(.9) contrast(.9); }
[data-d-stav="prodano"] .d-uvod .gal > button:not(.vic-fotek)::after { background: rgb(var(--zavoj) / .34); }
[data-d-stav="prodano"] .d-uvod .gal > button:not(.vic-fotek):hover::after,
[data-d-stav="prodano"] .d-uvod .gal > button:not(.vic-fotek):focus-visible::after { background: rgb(var(--zavoj) / .44); }
.d-razitko { position: absolute; z-index: var(--z-nad-fotkou); left: calc((100% - 6px) / 3); top: 50%;
  transform: translate(-50%, -50%); pointer-events: none; padding: 10px 20px 11px; border-radius: var(--r-control);
  background: var(--plocha-sklo); color: var(--n900); box-shadow: 0 6px 20px rgb(var(--zavoj) / .3); text-align: center;
  white-space: nowrap; font-size: var(--t3); font-weight: var(--w-bold); letter-spacing: .16em; line-height: 1.3; text-transform: uppercase; }
.d-razitko small { display: block; font-size: var(--t1); font-weight: var(--w-text); letter-spacing: 0; text-transform: none; color: var(--n200); }
[data-d-stav="prodano"] .panel { border-color: var(--n150); }
[data-d-stav="prodano"] .panel .lab,
[data-d-stav="prodano"] .panel .price { color: var(--n200); }
[data-d-stav="prodano"] .lista-foto { filter: grayscale(.9) contrast(.9); }
[data-d-stav="prodano"] .lista-cena b { color: var(--n200); }

/* Pás provozu: jediná tmavá plocha na stránce, přes celou šířku okna. */
.d-provoz { position: relative; padding-block: 52px; background: var(--p); color: var(--tm-1);
  box-shadow: 0 0 0 100vmax var(--p); clip-path: inset(0 -100vmax); }
.d-provoz-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 60px; align-items: center; }
.d-provoz-foto { position: relative; height: 420px; border-radius: var(--r); background-size: cover; background-position: center; }
.d-provoz-tl { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: space-between; }
.d-provoz-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--plocha-sklo); color: var(--n900); box-shadow: var(--stin-chip); font-size: var(--t1);
  font-weight: var(--w-med); letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; }
.d-provoz-pron { gap: 6px; color: var(--s700); font-weight: var(--w-bold); letter-spacing: .05em; }
.d-provoz-pron img:first-of-type { margin-left: 2px; }
.d-provoz-txt { display: grid; justify-items: start; gap: 20px; min-width: 0; }
.d-provoz h2 { max-width: 17ch; font-family: var(--serif); font-size: clamp(34px, 3.4vw, 44px); font-weight: 500;
  letter-spacing: -.01em; line-height: 1.08; color: var(--tm-1); }
.d-provoz-t { max-width: 46ch; font-size: var(--t4); line-height: 1.55; color: var(--tm-2); }
.d-provoz-hodn { display: grid; gap: 4px; }
.d-provoz-hodn p:first-child { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; }
.d-provoz-hodn b { font-size: var(--t6); font-weight: var(--w-bold); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.d-provoz-hodn span { font-size: var(--t3); color: var(--tm-2); }
.d-provoz-zdroj { font-size: var(--t1); color: var(--tm-4); }
.d-provoz-portaly { display: flex; flex-wrap: wrap; gap: 10px; }
.d-pbtn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 10px 16px; border-radius: var(--r-control);
  background: var(--plocha); color: var(--n900); font-size: var(--t3); font-weight: var(--w-med); white-space: nowrap; }
.d-pbtn:hover { color: var(--n900); background: var(--s150); }
.d-pbtn > svg:last-child { color: var(--p); }
.d-provoz-rs { display: flex; align-items: center; gap: 10px; width: 100%; padding-top: 18px;
  border-top: 1px solid var(--tm-linka-2); font-size: var(--t3); line-height: 1.45; color: var(--tm-2); }
.d-provoz-rs svg { flex: 0 0 auto; color: var(--tm-4); }
.d-provoz-dal { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--t4); font-weight: var(--w-med); color: var(--tm-1); }
.d-provoz-dal:hover { color: var(--tm-1); text-decoration: underline; text-underline-offset: 4px; }
.d-provoz :focus-visible { outline: 2px solid var(--tm-1); outline-offset: 3px; }

/* Podobné volné: bílý pás přes celou šířku. */
.d-podobne { display: grid; gap: 22px; padding-block: 44px 40px; background: var(--plocha);
  box-shadow: 0 0 0 100vmax var(--plocha); clip-path: inset(0 -100vmax); }
.d-podobne-hl { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.d-podobne-hl h2 { font-size: var(--t6); font-weight: var(--w-bold); letter-spacing: -.03em; line-height: 1.2; }
.d-podobne-hl p { max-width: 62ch; margin-top: 6px; font-size: var(--t3); line-height: 1.5; color: var(--n700); }
.d-podobne-vse { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; flex: 0 0 auto;
  font-size: var(--t3); font-weight: var(--w-med); color: var(--p); white-space: nowrap; }
.d-podobne-mriz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.d-podobne-mriz > .card { min-width: 0; }
.d-podobne-vse-m { display: none; }
.d-podobne-zdroj { font-size: var(--t1); line-height: 1.5; color: var(--n200); }
.d-dum { align-self: flex-start; padding: 5px 11px; border-radius: var(--r-pill); background: var(--s150); color: var(--s700);
  font-size: var(--t1); font-weight: var(--w-med); letter-spacing: .08em; line-height: 1.2; text-transform: uppercase; }
.d-vse { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 24px;
  border-radius: var(--r); background: var(--s150); color: var(--p); }
.d-vse:hover { color: var(--n900); }
.d-vse-t { display: grid; gap: 8px; }
.d-vse-t b { font-size: var(--t5); font-weight: var(--w-med); letter-spacing: -.02em; line-height: 1.25; color: var(--n900); }
.d-vse-t > span { font-size: var(--t3); color: var(--n700); }
.d-vse-o { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--t3); font-weight: var(--w-med); }

/* Již brzy: podobné volné tiše v panelu. */
.d-mezitim { display: grid; }
.d-mezitim-lb { margin-bottom: 4px; font-size: var(--t2); font-weight: var(--w-med); color: var(--n700); }
.d-mini { display: grid; grid-template-columns: 88px minmax(0, 1fr) 16px; gap: 12px; align-items: center; min-height: 88px;
  padding: 10px 0; border-top: 1px solid var(--n100); color: var(--n900); }
.d-mini:hover { color: var(--n900); }
.d-mini:hover .d-mini-n { text-decoration: underline; text-underline-offset: 3px; }
.d-mini-f { width: 88px; height: 66px; border-radius: var(--r-sm); background-size: cover; background-position: center; }
.d-mini-t { display: grid; gap: 1px; min-width: 0; }
.d-mini-n { font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.015em; line-height: 1.3; }
.d-mini-m { display: flex; align-items: center; gap: 6px; font-size: var(--t1); color: var(--n200); }
.d-mini-c { margin-top: 3px; font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.d-mini-c i { margin-right: 2px; font-style: normal; font-size: var(--t1); font-weight: var(--w-med); letter-spacing: 0; color: var(--n200); }
.d-mini > svg { color: var(--p); }
.d-mezitim-zdroj { padding-top: 8px; border-top: 1px solid var(--n100); font-size: var(--t1); color: var(--n200); }

@media (min-width: 900px) {
  [data-d-stav="prodano"] .two { row-gap: 28px; }
  [data-d-stav="prodano"] .two > div:first-child { display: contents; }
  [data-d-stav="prodano"] .two > div:first-child > * { grid-column: 1; }
  [data-d-stav="prodano"] .two > div:first-child > .d-stav { grid-column: 1 / -1; grid-row: 1; }
  [data-d-stav="prodano"] .two > div:first-child > .d-uvod { grid-row: 2; }
  [data-d-stav="prodano"] .two > .panel { grid-column: 2; grid-row: 2; }
  [data-d-stav="prodano"] .two > div:first-child > .d-provoz,
  [data-d-stav="prodano"] .two > div:first-child > .d-podobne { grid-column: 1 / -1; }
  [data-d-stav="prodano"] .two > div:first-child > .d-podobne { margin-bottom: 12px; }
  /* pás a bílá sekce na sebe navazují bez krémové spáry (row-gap .two) */
  [data-d-stav="prodano"] .two > div:first-child > .d-provoz + .d-podobne { margin-top: -28px; }
}
@media (min-width: 900px) and (max-width: 1279px) {
  .d-provoz-in { gap: 36px; }
  .d-provoz-foto { height: 360px; }
  .d-podobne-mriz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 785px) and (max-width: 899px) {
  .d-podobne-mriz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  [data-page="detail"] .two > div:first-child > .d-stav { order: 3; margin-top: 0; }
  [data-page="detail"] .two > div:first-child > .d-provoz { order: 6; margin-top: 8px; }
  [data-page="detail"] .two > div:first-child > .d-podobne { order: 6; margin-top: 0; }
  [data-page="detail"] .two > div:first-child > .d-provoz + .d-podobne { margin-top: -16px; }
  .d-provoz-in { grid-template-columns: 1fr; gap: 22px; }
  .d-provoz-foto { height: clamp(236px, 55vw, 380px); }
  .d-provoz { padding-block: 30px 32px; }
}
@media (max-width: 784px) {
  .d-razitko { left: 50%; top: calc(clamp(236px, 63vw, 420px) / 2); }
  .d-podobne-mriz { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 699px) {
  .d-stav { flex-wrap: wrap; padding: 14px; }
  .d-stav p { flex: 1 1 200px; }
  .d-stav .btn { width: 100%; min-height: 48px; font-size: var(--t3); }
  .d-provoz h2 { font-size: 34px; }
  .d-provoz-t { font-size: var(--t3); }
  .d-provoz-portaly { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .d-pbtn { justify-content: flex-start; padding: 10px 12px; }
  .d-pbtn > svg:last-child { margin-left: auto; }
  .d-pbtn-web { grid-column: 1 / -1; }
  .d-podobne { padding-block: 30px 26px; gap: 16px; }
  .d-podobne-hl .d-podobne-vse { display: none; }
  .d-podobne-mriz { grid-template-columns: 1fr; gap: 16px; }
  .d-podobne-mriz > :nth-child(n + 3) { display: none; }
  .d-podobne-vse-m { display: inline-flex; min-height: 48px; background: var(--plocha); color: var(--p); }
  .d-podobne-vse-m:hover { background: var(--s150); color: var(--p); }
  .d-razitko { padding: 8px 16px 9px; font-size: var(--t2); }
}
/* ── konec prodaného detailu (s207) ── */

/* ── Nálada z AI fotek (s208) ─────────────────────────────────────────
   Moodv3 A + B + C (16. 9.). AI fotky jen jako nálada na stránkách bez
   fotek: nic nejmenují, nikdy u jména majitele, názvu nemovitosti, na kartě,
   detailu ani ve výpisu, nejvýš dvě na stránku, bez popisku. Fotka musí
   být vidět (klient v mockupu „neviděl“): bez desaturace, text jen na krému,
   na kartě nebo pod závojem s kontrastem ≥ 4,5 : 1 proti nejhoršímu místu.
   Pod 785 px soubory 800 w, nad tím 1344 w (celá šířka originálu). */
:root {
  --img-ai-terasa-rano: url(/assets/img/ai/ai-terasa-rano.webp);
  --img-ai-plaz-vecer: url(/assets/img/ai/ai-plaz-vecer.webp);
  --img-ai-klice-stul: url(/assets/img/ai/ai-klice-stul.webp);
  --img-ai-hory-okno: url(/assets/img/ai/ai-hory-okno.webp);
  --img-ai-ulicka-vecer-mekka: url(/assets/img/ai/ai-ulicka-vecer-mekka.webp);
}
@media (max-width: 784px) {
  :root {
    --img-ai-terasa-rano: url(/assets/img/ai/ai-terasa-rano-800.webp);
    --img-ai-plaz-vecer: url(/assets/img/ai/ai-plaz-vecer-800.webp);
    --img-ai-klice-stul: url(/assets/img/ai/ai-klice-stul-800.webp);
    --img-ai-hory-okno: url(/assets/img/ai/ai-hory-okno-800.webp);
    --img-ai-ulicka-vecer-mekka: url(/assets/img/ai/ai-ulicka-vecer-mekka-800.webp);
  }
}

/* A · Závoj v hlavičce. Fotka je první potomek `.phead`, takže všechno
   ostatní visí na `.ph-foto + .wrap` a hlavičky bez fotky se nemění. */
.phead { position: relative; }
.ph-foto { position: absolute; background-size: cover; background-position: center; background-repeat: no-repeat; }
.ph-foto + .wrap { position: relative; z-index: 1; }
/* Pod 1280 px pás pod perexem, text přes fotku nejde. Pás sahá až k lince
   hlavičky, wrap mu nad sebou nechá místo. */
.ph-foto { left: 0; right: 0; bottom: 0; height: 240px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(var(--cerna-rgb) / .7) 30%, rgb(var(--cerna-rgb)) 58%);
  mask-image: linear-gradient(180deg, transparent 0%, rgb(var(--cerna-rgb) / .7) 30%, rgb(var(--cerna-rgb)) 58%); }
.ph-foto + .wrap { padding-bottom: 212px; }
@media (max-width: 699px) {
  .ph-foto { height: 176px; }
  .ph-foto + .wrap { padding-bottom: 160px; }
}
/* Od 1280 px fotka vpravo, maska ji zleva rozpouští do krému. Nadpis a perex
   pod sebou vlevo, odsazené ke spodní lince. */
@media (min-width: 1280px) {
  .ph-foto { top: 0; left: auto; height: auto; width: 60%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgb(var(--cerna-rgb) / .55) 26%, rgb(var(--cerna-rgb)) 52%);
    mask-image: linear-gradient(90deg, transparent 0%, rgb(var(--cerna-rgb) / .55) 26%, rgb(var(--cerna-rgb)) 52%); }
  .ph-foto + .wrap { padding-bottom: 0; min-height: 248px; display: flex; flex-direction: column; }
  .ph-foto + .wrap .phead-in { grid-template-columns: minmax(0, 1fr); row-gap: 16px; max-width: 640px; margin-top: auto; padding-top: 28px; }
  .ph-foto + .wrap .phead-bok { padding-top: 0; }
  .ph-foto + .wrap .phead-bok .lead { font-size: var(--t4); }
}

/* B · Tichý předěl. Jen mezi světlými sekcemi, nejvýš jeden na stránku.
   Závoj je silný pod větou a slábne k fotce (na mobilu nahoře a dole). */
.ticho { position: relative; overflow: hidden; display: flex; align-items: center;
  min-height: 300px; background: var(--p600); }
.t-foto { position: absolute; inset: 0; background-size: cover; background-position: 62% center; background-repeat: no-repeat; }
.ticho::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--zavoj) / .3) 0%, rgb(var(--zavoj) / .66) 32%, rgb(var(--zavoj) / .66) 68%, rgb(var(--zavoj) / .3) 100%); }
.ticho > .wrap { position: relative; z-index: 1; width: 100%; }
.t-veta { font-family: var(--serif); font-style: italic; font-weight: var(--w-text); font-size: clamp(34px, 4.4vw, 48px);
  line-height: 1.14; color: var(--tm-1); max-width: 20ch; }
.t-veta span { display: block; }
@media (min-width: 785px) {
  .ticho { min-height: 360px; }
  .ticho::after { background: linear-gradient(90deg, rgb(var(--zavoj) / .7) 0%, rgb(var(--zavoj) / .64) 40%, rgb(var(--zavoj) / .16) 78%, rgb(var(--zavoj) / .08) 100%); }
}
/* Poptávka na Balíčkách navazovala linkou na krémovou skládačku; za předělem linku nepotřebuje. */
.ticho + .sec.joined > .wrap { border-top-color: transparent; }

/* C · 404: předem rozostřená fotka (rozostření je v souboru, ne CSS filtr),
   slabý noční závoj zleva, text a tlačítka na krémové kartě. */
.sec.nula { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 560px;
  padding: 72px 0; background: var(--jt-noc); }
.n-foto { position: absolute; inset: 0; background-image: var(--img-ai-ulicka-vecer-mekka);
  background-size: cover; background-position: 70% center; background-repeat: no-repeat; }
.sec.nula::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(var(--zavoj-noc) / .5) 0%, rgb(var(--zavoj-noc) / .24) 55%, rgb(var(--zavoj-noc) / .06) 100%); }
.sec.nula > .wrap { position: relative; z-index: 1; width: var(--wrap); }
.nula-karta { background: var(--s50); border-radius: var(--r-lg); padding: 44px 48px 46px; max-width: 720px;
  box-shadow: 0 24px 60px rgb(var(--zavoj-hluboky) / .34); }
.nula-karta .lead { margin-top: 14px; }
@media (max-width: 699px) {
  .sec.nula { min-height: 0; padding: 28px 0 200px; align-items: flex-start; }
  .n-foto { background-position: 76% center; }
  .sec.nula::after { background: linear-gradient(180deg, rgb(var(--zavoj-noc) / .4) 0%, rgb(var(--zavoj-noc) / .1) 70%); }
  .nula-karta { padding: 28px 22px 26px; }
  .nula-karta .chiprow .btn { width: 100%; justify-content: center; }
}
/* ── konec nálady z AI fotek (s208) ── */

/* ── Lepivý panel jen u svého bloku (s209) ───────────────────────────
   Sticky se drží v rodiči `.two`. Na prodaném detailu jsou pás provozu a podobné
   řádky téže mřížky (s207, display: contents), panel by jel přes ně → static.
   Vysoký panel dostane z JS `--panel-top` (záporné), aby spodek nezůstal pod
   okrajem okna. */
@media (min-width: 900px) {
  [data-page="detail"] .two > .panel { top: var(--panel-top, 86px); }
  [data-page="detail"][data-d-stav="prodano"] .two > .panel { position: static; }
}
/* ── konec lepivého panelu (s209) ── */

/* ── Poptávka podobné na prodaném detailu (s210) ─────────────────────
   Prodaná nemá kroky rezervace: vlevo „Tenhle apartmán je prodaný. Chcete
   podobný?“, šedá karta, tři body; vpravo krátký formulář s výběrem „Co
   hledáte“. Jazyk prodaného detailu (s207): břidlice, žádná zlatá. Mřížka
   `.kp` a formulář z s193. */
.kp-podobna .h2 span { display: block; color: var(--p); }
.kp-pod-perex { max-width: 42ch; font-size: var(--t4); line-height: 1.55; color: var(--n700); }
.kp-podobna .kp-foto { filter: grayscale(.9) contrast(.9); }
.kp-podobna .kp-cena { color: var(--n200); }
.kp-pod-body { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.kp-pod-body li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; align-items: center;
  font-size: var(--t3); line-height: 1.45; color: var(--n900); }
.kp-pod-body .ico { width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--plocha);
  border: 1px solid var(--s200); color: var(--p); }
.kp-pod-nahoru { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; min-height: 44px;
  font-size: var(--t3); font-weight: var(--w-med); color: var(--p); text-decoration: underline;
  text-decoration-color: var(--p200); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.kp-pod-nahoru:hover { color: var(--p600); text-decoration-color: currentColor; }
.kp-pod-lb { font-size: var(--t3); line-height: 1.4; color: var(--n900); }
.kp-pod-lb b { font-weight: var(--w-med); }
.kp-pod-lb .nep { display: block; margin-top: 2px; font-size: var(--t2); }
.kp-podobna .kp-dopl { gap: 14px; }
@media (min-width: 700px) {
  .kp-podobna .kp-dopl { gap: 12px; }
}
@media (min-width: 1040px) {
  .kp-podobna .kp-kroky { gap: 24px; padding-top: 6px; }
}
@media (min-width: 1280px) {
  .kp-podobna .mrizka { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kp-podobna .mrizka .plna { grid-column: auto; }
  .kp-podobna .kp-dopl .kval { grid-template-columns: 130px minmax(0, 1fr); align-items: start; }
  .kp-podobna .kp-dopl .kval-lb { padding-top: 10px; }
}
/* ── konec poptávky podobné (s210) ── */

/* ── Lokalita na detailu (s211) ───────────────────────────────────────
   Dva sloupce 5 : 7 od 1040 px: vlevo nadpis, perex (a krátký text), karta
   místa s „Mapa a trasa“; vpravo mřížka aktivit nebo delší text. Aktivity
   bez rámečku, vlasové linky, ikona podle typu. Pod 1040 px pod sebou. */
.lok { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; }
@media (min-width: 1040px) {
  .lok { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: start; }
}
.lok-hlava > .lead { max-width: 52ch; }
.lok-hlava > .lok-txt { margin-top: 18px; }
.lok-txt > p:first-child { margin-top: 0; }
.lok-txt h3 { font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.02em;
  color: var(--n900); margin-top: 24px; }
.lok-txt h3:first-child { margin-top: 0; }
.lok-txt p { font-size: var(--t3); line-height: 1.68; color: var(--n700); margin-top: 10px; max-width: 66ch; }
@media (min-width: 1040px) {
  .lok-text .lok-obsah { padding-top: 6px; }
  .lok-text .lok-obsah > .lok-txt p { font-size: var(--t4); line-height: 1.66; }
}

/* Karta místa: jedno tlačítko (celá plocha), otevře dialog z s206. */
.lok-misto { display: flex; align-items: center; gap: 14px; width: 100%; max-width: 460px;
  margin: 26px 0 0; padding: 14px 18px; min-height: 64px; text-align: left;
  font: inherit; color: var(--n900); background: var(--s50);
  border: 1px solid var(--s200); border-radius: var(--r); }
button.lok-misto { cursor: pointer; transition: border-color .2s ease, background-color .2s ease; }
button.lok-misto:hover { background: var(--s150); border-color: var(--s); }
button.lok-misto:focus-visible { outline: 2px solid var(--p); outline-offset: 3px; }
.lok-misto[hidden] { display: none; }
.lok-misto .flag { width: 27px; height: 18px; }
.lok-misto-t { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; }
.lok-misto-t b { font-size: var(--t3); font-weight: var(--w-med); letter-spacing: -.01em; }
.lok-misto-t span { font-size: var(--t2); color: var(--n700); }
.lok-misto-a { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto;
  font-size: var(--t2); font-weight: var(--w-med); color: var(--p); white-space: nowrap;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--p200); text-decoration-thickness: 1.5px; }
button.lok-misto:hover .lok-misto-a { color: var(--n900); text-decoration-color: currentColor; }
/* V úzké hlavě (mobil, 1040–1279 px) jde „Mapa a trasa“ pod místo. */
.lok-hlava { container-type: inline-size; }
@container (max-width: 440px) {
  .lok-misto { flex-wrap: wrap; row-gap: 6px; }
  .lok-misto-a { flex-basis: 100%; padding-left: 41px; }
}

/* Mřížka aktivit. */
.lok-nad { font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .14em; text-transform: uppercase;
  color: var(--s700); margin: 0 0 12px; }
.lok-body { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); column-gap: 32px; border-bottom: 1px solid var(--n100); }
@media (min-width: 560px) { .lok-body { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lok-body li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0;
  border-top: 1px solid var(--n100); }
.lok-body .ic { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; background: var(--s150); color: var(--p); }
.lok-body .ic svg { width: 20px; height: 20px; }
.lok-body li > span:last-child { font-size: var(--t3); line-height: 1.45; color: var(--n900); text-wrap: pretty; }
.lok-body li > span:last-child::first-letter { text-transform: uppercase; }
/* Položky s názvem (Uluwatu): název nahoře, popis pod ním. Jen **první**
   tučné je název; tučné uvnitř věty zůstává ve větě. */
.lok-bohate li { align-items: flex-start; padding: 20px 0 22px; }
.lok-bohate li > span:last-child { font-size: var(--t2); line-height: 1.6; color: var(--n700); }
.lok-bohate li > span:last-child > b:first-child { display: block; font-size: var(--t3);
  font-weight: var(--w-med); letter-spacing: -.015em; color: var(--n900); margin: 7px 0 4px; }
.lok-bohate li > span:last-child b { color: var(--n900); }
@media (min-width: 1040px) {
  .lok-hlava + .lok-obsah > .lok-nad:first-child { margin-top: 8px; }
}
/* ── konec lokality na detailu (s211) ── */

/* ── Jak to funguje: polish celé stránky (s212) ────────────────────────
   Jeden jazyk kapitol (rytmus, panely, popisky), lišta kapitol od 1280 px,
   sbalená metodika, lepivý bok FAQ. Jen [data-page="jak-to-funguje"]:
   .own, .cmp, .days-out a .year žijí i na jiných stránkách. */
[data-page="jak-to-funguje"] {
  --kap-mezera: 24px;     /* mezi bloky kapitoly */
  --kap-odpoved: 28px;    /* odpověď → první blok */
  --kap-panel-pad: 20px;
}
@media (min-width: 700px) { [data-page="jak-to-funguje"] { --kap-panel-pad: 24px 26px; } }
@media (min-width: 1040px) { [data-page="jak-to-funguje"] { --kap-mezera: 28px; --kap-odpoved: 32px; } }

/* Hlavička: perex drží šířku videa, nesahá do masky fotky */
[data-page="jak-to-funguje"] .phead-bok .lead { max-width: 480px; }

/* Za tmavým shrnutím stačí menší nástup rozcestníku */
@media (min-width: 785px) { [data-page="jak-to-funguje"] .shrnuti + .sec { padding-top: 96px; } }

/* ── Rytmus kapitoly ── */
[data-page="jak-to-funguje"] .chapter { margin-bottom: 72px; }
@media (min-width: 1040px) { [data-page="jak-to-funguje"] .chapter { margin-bottom: 104px; } }
[data-page="jak-to-funguje"] .chapter:last-child { margin-bottom: 0; }
[data-page="jak-to-funguje"] .chapter > .ch-pos + .otazka { margin-top: 10px; }
[data-page="jak-to-funguje"] .chapter .otazka { font-size: var(--t7); font-weight: var(--w-bold); letter-spacing: -.025em;
  line-height: 1.18; max-width: 24ch; text-wrap: balance; }
[data-page="jak-to-funguje"] .chapter > .odpoved { margin-top: 18px; max-width: 62ch; }
[data-page="jak-to-funguje"] .chapter > * + * { margin-top: var(--kap-mezera); }
[data-page="jak-to-funguje"] .chapter > .odpoved + * { margin-top: var(--kap-odpoved); }
/* s204 sází kapitolu 05 s inline odsazením; přebíjí se jen tady */
[data-page="jak-to-funguje"] .chapter > .praha-kap[style] { margin-top: var(--kap-odpoved) !important; }
[data-page="jak-to-funguje"] .chapter > .praha-kap-odk { margin-top: 8px; }
[data-page="jak-to-funguje"] .chapter > .vic { margin-top: 12px; }
[data-page="jak-to-funguje"] .chapter > .dalsi { max-width: none; margin-top: 40px; }
@media (min-width: 1040px) { [data-page="jak-to-funguje"] .chapter > .dalsi { margin-top: 56px; } }
[data-page="jak-to-funguje"] .chapter .fine { max-width: 72ch; }

/* „Podrobněji“: cíl 44 px, obsah s odsazením od odkazu */
[data-page="jak-to-funguje"] .chapter .vic > summary { display: flex; align-items: center; min-height: 44px; padding: 0; }
[data-page="jak-to-funguje"] .chapter .vic .telo { padding: 4px 0 4px; }
[data-page="jak-to-funguje"] .chapter .vic .lead { margin-top: 0; max-width: 62ch; }
[data-page="jak-to-funguje"] .chapter .vic .fine[style] { margin-top: 0 !important; }

/* ── Světlé panely: bílé, bez rámečku, --r ── */
[data-page="jak-to-funguje"] .chapter .jtf-box,
[data-page="jak-to-funguje"] .kap-panel,
[data-page="jak-to-funguje"] .chapter .days-out,
[data-page="jak-to-funguje"] .chapter .next-steps,
[data-page="jak-to-funguje"] .chapter .praha-kap > div {
  background: var(--plocha); border: 0; border-radius: var(--r); padding: var(--kap-panel-pad); }
[data-page="jak-to-funguje"] .chapter .praha-kap { align-items: stretch; gap: var(--kap-mezera); }

/* Popisky faktů v kapitolách bez verzálek (jako „Video“, „Další otázka“) */
[data-page="jak-to-funguje"] .chapter .days-out .lb,
[data-page="jak-to-funguje"] .chapter .own-box .lb,
[data-page="jak-to-funguje"] .chapter .own-arrow .cap,
[data-page="jak-to-funguje"] .chapter .own-lb,
[data-page="jak-to-funguje"] .chapter .next-steps .lab,
[data-page="jak-to-funguje"] .chapter .praha-kap .lab {
  display: block; font-size: var(--t2); font-weight: var(--w-med); letter-spacing: 0; text-transform: none;
  line-height: 1.4; color: var(--n200); }
[data-page="jak-to-funguje"] .chapter .praha-kap-podily .lab { color: var(--s700); }
[data-page="jak-to-funguje"] .chapter .own-arrow .cap { white-space: normal; }

/* Kapitola 01: kroky, schéma vlastnictví a poznámka */
[data-page="jak-to-funguje"] .kap-kroky .steps { row-gap: 20px; }
@media (max-width: 1039px) {
  [data-page="jak-to-funguje"] .kap-kroky .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  [data-page="jak-to-funguje"] .kap-kroky .step { flex-direction: column; gap: 10px; }
}
[data-page="jak-to-funguje"] .kap-zvyr { color: var(--p); }
[data-page="jak-to-funguje"] .own-lb + .owners { margin-top: 8px; }
[data-page="jak-to-funguje"] .chapter .own-box { border: 0; padding: 16px 18px; }
[data-page="jak-to-funguje"] .chapter .own-arrow { color: var(--p); }
@media (min-width: 900px) {
  [data-page="jak-to-funguje"] .chapter .own { grid-template-columns: minmax(0, 1.35fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
  [data-page="jak-to-funguje"] .chapter .own > div:first-child { align-self: end; }
  [data-page="jak-to-funguje"] .chapter .own-arrow { align-self: center; }
  [data-page="jak-to-funguje"] .chapter .own-box { justify-content: center; }
  [data-page="jak-to-funguje"] .chapter .own-arrow { flex-direction: column; align-items: center; gap: 4px; max-width: 104px; text-align: center; }
}
@media (min-width: 900px) and (max-width: 1439px) { [data-page="jak-to-funguje"] .chapter .own-box .nm { font-size: var(--t4); } }
[data-page="jak-to-funguje"] .chapter .own-note { margin-top: 12px; padding: 14px 18px; border-radius: var(--r); background: var(--plocha);
  color: var(--n700); font-size: var(--t2); }
[data-page="jak-to-funguje"] .chapter .own-note b { color: var(--n900); }
[data-page="jak-to-funguje"] .chapter .own-note svg { color: var(--p); }

/* Kapitola 02: rok */
[data-page="jak-to-funguje"] .kap-rok .yearleg { gap: 8px 22px; margin-top: 12px; }
[data-page="jak-to-funguje"] .sw-vase { background: var(--s); }
[data-page="jak-to-funguje"] .sw-ostatni { background: var(--rok-prazdny); }

/* Kapitola 03: dny, výnos, poznámka */
[data-page="jak-to-funguje"] .dny-osa { display: flex; justify-content: space-between; margin-top: 6px; font-size: var(--t1); color: var(--n200); }
[data-page="jak-to-funguje"] .chapter .days-out { gap: 0; margin-top: 12px; padding: 0; overflow: hidden; }
[data-page="jak-to-funguje"] .chapter .days-out > div { padding: var(--kap-panel-pad); }
[data-page="jak-to-funguje"] .chapter .days-out > div + div { border-top: 1px solid var(--n100); }
@media (min-width: 560px) {
  [data-page="jak-to-funguje"] .chapter .days-out > div + div { border-top: 0; border-left: 1px solid var(--n100); }
}
[data-page="jak-to-funguje"] .chapter .days-out .vl { margin-top: 2px; }
[data-page="jak-to-funguje"] .chapter .days-out .hint { font-size: var(--t2); line-height: 1.45; }
[data-page="jak-to-funguje"] .kap-pozn { margin-top: 14px; }

/* Kapitola 04 a 06: tmavé panely */
[data-page="jak-to-funguje"] .kap-tmava,
[data-page="jak-to-funguje"] .chapter .hold { background: var(--p); color: var(--tm-1); border-radius: var(--r); padding: 24px 20px; }
@media (min-width: 700px) {
  [data-page="jak-to-funguje"] .kap-tmava,
  [data-page="jak-to-funguje"] .chapter .hold { padding: 32px 36px; }
}
[data-page="jak-to-funguje"] .kap-tmava .cmp { margin-top: 0; }
[data-page="jak-to-funguje"] .kap-tmava .cmp .hd { font-size: var(--t2); font-weight: var(--w-med); letter-spacing: 0; text-transform: none; }
[data-page="jak-to-funguje"] .kap-cmp-pozn { margin-top: 16px; color: var(--tm-4); }
@media (max-width: 784px) {
  [data-page="jak-to-funguje"] .kap-tmava .cmp > div { padding: 3px 0; }
  [data-page="jak-to-funguje"] .kap-tmava .cmp .q { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tm-linka-2); font-size: var(--t3); color: var(--tm-1); }
  [data-page="jak-to-funguje"] .kap-tmava .cmp .hd + .q { margin-top: 0; padding-top: 0; border-top: 0; }
  [data-page="jak-to-funguje"] .kap-tmava .cmp .them::before,
  [data-page="jak-to-funguje"] .kap-tmava .cmp .us::before { font-size: var(--t1); font-weight: var(--w-med); letter-spacing: 0; text-transform: none; margin-bottom: 0; }
}
[data-page="jak-to-funguje"] .chapter .hold .big small { font-size: var(--t2); letter-spacing: 0; text-transform: none; }
[data-page="jak-to-funguje"] .chapter .hold h3 { line-height: 1.25; text-wrap: balance; }
[data-page="jak-to-funguje"] .chapter .hold p { max-width: 58ch; margin-top: 10px; }
@media (max-width: 899px) { [data-page="jak-to-funguje"] .chapter .hold { gap: 12px; } }

/* Kapitola 06: kroky po rezervaci */
[data-page="jak-to-funguje"] .chapter .next-steps .lab { margin: 0; }
[data-page="jak-to-funguje"] .chapter .next-steps li b { font-size: var(--t3); }
[data-page="jak-to-funguje"] .chapter .next-steps li span { font-size: var(--t2); }
[data-page="jak-to-funguje"] .chapter .next-steps ol { gap: 20px 16px; }

/* Kapitoly 01 a 03: boxy s videem v jedné výšce */
[data-page="jak-to-funguje"] .chapter .jtf-box { gap: 14px; }
@media (max-width: 699px) { [data-page="jak-to-funguje"] .jtf-kryti, [data-page="jak-to-funguje"] .jtf-provoz { gap: var(--kap-mezera); } }

/* ── Lišta kapitol (od 1280 px vedle kapitol, lepivá) ── */
.kap-lista { display: none; }
@media (min-width: 1280px) {
  [data-page="jak-to-funguje"] .guide { grid-template-columns: 208px minmax(0, 1fr); column-gap: 64px; }
  [data-page="jak-to-funguje"] .guide > .rozcestnik { grid-column: 1 / -1; }
  .kap-lista { display: block; }
  .kap-lista ol { position: sticky; top: 112px; display: flex; flex-direction: column; border-left: 1px solid var(--n150); }
  .kap-lista a { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: start;
    min-height: 44px; padding: 9px 0 9px 16px; font-size: var(--t2); line-height: 1.4; color: var(--n700); }
  .kap-lista .n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--n150);
    background: var(--plocha); font-size: var(--t1); font-weight: var(--w-bold); color: var(--n200); font-variant-numeric: tabular-nums;
    transition: background-color .18s var(--doben), border-color .18s var(--doben), color .18s var(--doben); }
  .kap-lista .q { padding-top: 3px; }
  .kap-lista a:hover { color: var(--p); }
  .kap-lista a.on { color: var(--n900); font-weight: var(--w-med); }
  .kap-lista a.on .n { background: var(--p); border-color: var(--p); color: var(--tm-1); }
  .kap-lista a:focus-visible { outline-offset: 0; }

  /* Užší sloupec kapitol: kapitola 01 boxy vedle sebe a video s větou pod nimi */
  [data-page="jak-to-funguje"] .kapitoly .jtf-kryti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kap-mezera); align-items: stretch; }
  [data-page="jak-to-funguje"] .kapitoly .jtf-kryti > .jtf-vid { grid-column: 1 / -1; display: grid;
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 32px; align-items: center; }
  /* kapitola 03: box a video na polovinu, seznam v jednom sloupci, stejná výška */
  [data-page="jak-to-funguje"] .kapitoly .jtf-provoz { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kap-mezera); align-items: stretch; }
  [data-page="jak-to-funguje"] .kapitoly .jtf-provoz .jtf-chk { grid-template-columns: minmax(0, 1fr); }
  [data-page="jak-to-funguje"] .kapitoly .jtf-provoz .lvid { max-width: none; }
}
@media (min-width: 1600px) {
  [data-page="jak-to-funguje"] .kapitoly .jtf-provoz .jtf-chk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── FAQ: bok s kategoriemi lepí ── */
@media (min-width: 1040px) { [data-page="jak-to-funguje"] .faq-bok { position: sticky; top: 112px; } }

/* ── Metodika: závěry nahoře, tabulky a zdroje sbalené ── */
[data-page="jak-to-funguje"] .met .met-dva { margin-top: 12px; }
[data-page="jak-to-funguje"] .met .met-seznam { padding-left: 0; gap: 10px; }
.met-sbal { margin-top: 40px; border-bottom: 1px solid var(--n150); }
.met-det { border-top: 1px solid var(--n150); }
.met-det > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px;
  padding: 10px 0; list-style: none; cursor: pointer; color: var(--n900); }
.met-det > summary::-webkit-details-marker { display: none; }
.met-det > summary .met-h3, .met-det-t { margin: 0; font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.015em; line-height: 1.35; }
.met-det > summary:hover .met-h3, .met-det > summary:hover .met-det-t { color: var(--p); }
.met-det > summary:focus-visible { border-radius: var(--r-xs); }
.met-plus { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--n150); color: var(--p);
  transition: transform .2s var(--doben), background-color .2s var(--doben), color .2s var(--doben); }
.met-plus::before, .met-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px;
  margin: -.75px 0 0 -6px; background: currentColor; border-radius: 1px; }
.met-plus::after { transform: rotate(90deg); }
.met-det[open] .met-plus { transform: rotate(45deg); background: var(--p); border-color: var(--p); color: var(--tm-1); }
.met-det-telo { padding: 4px 0 28px; }
.met-det.met-zdroje { margin-top: 0; }
.met-det.met-zdroje ul { margin-top: 0; }
@media (max-width: 699px), (pointer: coarse) {
  .met-det.met-zdroje ul { gap: 0; }
  .met-det.met-zdroje a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; }
  [data-page="jak-to-funguje"] p.faq-tel a { padding-block: 12px; margin-block: -12px; }
}
@media (prefers-reduced-motion: reduce) { .kap-lista .n, .met-plus { transition: none; } }
/* ── konec polishe Jak to funguje (s212) ── */

/* ── Nálada všude, kde chybí (s213) ──────────────────────────────────
   Klient 16. 9. chce AI fotky ve všech sekcích, kde chybí nálada. Ruší
   „nejvýš dvě na stránku“ z s208. Nové pravidlo: nejvýš jedna AI fotka
   na obrazovku (mezi dvěma aspoň 600 px), nikdy u formuláře pod poli,
   u tabulek a grafů s čísly, u newsletteru, u majitele ani nemovitosti.
   A a B jsou z s208; tady jen hlavička mimo `.phead` a tvar D. */
:root {
  --img-ai-klic-dvere: url(/assets/img/ai/ai-klic-dvere.webp);
  --img-ai-balkon-zapad: url(/assets/img/ai/ai-balkon-zapad.webp);
  --img-ai-zaclony-okno: url(/assets/img/ai/ai-zaclony-okno.webp);
  --img-ai-osusky-more: url(/assets/img/ai/ai-osusky-more.webp);
  --img-ai-stul-more: url(/assets/img/ai/ai-stul-more.webp);
}
@media (max-width: 784px) {
  :root {
    --img-ai-klic-dvere: url(/assets/img/ai/ai-klic-dvere-800.webp);
    --img-ai-balkon-zapad: url(/assets/img/ai/ai-balkon-zapad-800.webp);
    --img-ai-zaclony-okno: url(/assets/img/ai/ai-zaclony-okno-800.webp);
    --img-ai-osusky-more: url(/assets/img/ai/ai-osusky-more-800.webp);
    --img-ai-stul-more: url(/assets/img/ai/ai-stul-more-800.webp);
  }
}

/* A mimo `.phead`: hlavička Splátek je obyčejná krémová sekce. Pravidla
   `.ph-foto + .wrap` z s208 platí beze změny, jen spodní odsazení sekce
   pod 1280 px přebírá pás fotky. */
.hl-nalada { position: relative; overflow: hidden; }
@media (max-width: 1279px) {
  .sec.hl-nalada { padding-bottom: 36px; }
  /* V úzkém pásu by byly vidět jen záclony; posun k oknu a zeleni. */
  .hl-nalada .ph-foto { background-position: 74% center; }
}
@media (min-width: 1280px) {
  .hl-nalada .ph-foto { width: 56%; }
}

/* D · Okno vedle textu. Fotka ve volném sloupci sekce: zaoblená jako
   karta, bez stínu (není s čím pracovat), bez popisku, líně přes
   `loading="lazy"`. Pod 1040 px pod textem přes šířku, 180–300 px vysoká. */
.okno { display: block; overflow: hidden; border-radius: var(--r); background: var(--s150);
  width: 100%; height: clamp(180px, 52vw, 300px); margin-top: 28px; }
.okno img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1040px) {
  /* Bok vedle textu (Investiční: pod boxy „Rychlá odpověď“ a „Co je v ceně“). */
  .two .okno { height: auto; aspect-ratio: 16 / 10; margin-top: 12px; }
  /* O nás: nadpis, perex a čísla vlevo, fotka vpravo přes jejich výšku,
     pruh s odkazem na příběhy pod oběma. */
  .okno-sek > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
    column-gap: 72px; align-items: start; }
  .okno-sek > .wrap > .okno { grid-column: 2; grid-row: 1; align-self: stretch;
    height: auto; min-height: 280px; margin-top: 0; }
  .okno-sek > .wrap > .okno-text { grid-column: 1; grid-row: 1; }
  .okno-sek > .wrap > .cta-strip { grid-column: 1 / -1; }
}
/* ── konec nálady všude (s213) ── */

/* ── Úvodní: princip, náklady a výnos (s216) ───────────────────────────────
   Tři druhy nákladů a výnos ve dvou částech jako políčka, štítky USA/Španělsko,
   schodiště fází. Hodnoty řádků mají jednu velikost (t5), popisy t3. */
.pri-zeme { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.pri-zeme span { font-family: var(--serif); font-size: var(--t5); line-height: 1; letter-spacing: .01em;
  color: var(--tm-1); background: var(--p); border-radius: var(--r-pill); padding: 7px 15px 8px; }
.pri-zeme span + span { background: var(--p400); }
.pri-odk .pri-zeme { max-width: none; }
.pri-cap { font-size: var(--t1); letter-spacing: .14em; text-transform: uppercase; font-weight: var(--w-bold); color: var(--s700); }
.pri-row .d > p + p, .pri-d-pol > p { margin-top: 10px; }
.pri-pole { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pri-pol { display: flex; flex-direction: column; gap: 2px; min-width: 0; border: 1px solid var(--n150);
  border-radius: var(--r-sm); padding: 10px 12px 11px; background: var(--plocha); }
.pri-pol-lb { font-size: var(--t1); font-weight: var(--w-med); letter-spacing: .04em; text-transform: uppercase; color: var(--n200); }
.pri-pol-v { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.2; color: var(--p);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pri-pol-d { font-size: var(--t2); line-height: 1.35; color: var(--n700); }
.pri-pol-fix { background: var(--p); border-color: var(--p); }
.pri-pol-fix .pri-pol-lb, .pri-pol-fix .pri-pol-d { color: var(--tm-3); }
.pri-pol-fix .pri-pol-v { color: var(--tm-1); }
.pri-pole-2 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; max-width: 420px; }
.pri-plus { align-self: center; font-size: var(--t5); color: var(--s600); padding: 0 2px; }
.pri-vynos { background: linear-gradient(90deg, rgb(var(--p-rgb) / .05), rgb(var(--p-rgb) / 0) 70%); }
.pri-schody { display: flex; align-items: flex-end; gap: 4px; height: 26px; margin-top: 12px; }
.pri-schody i { width: 16px; background: var(--p200); border-radius: var(--r-xs) var(--r-xs) 0 0; }
.pri-schody i:nth-child(1) { height: 42%; } .pri-schody i:nth-child(2) { height: 56%; } .pri-schody i:nth-child(3) { height: 70%; }
.pri-schody i:nth-child(4) { height: 85%; } .pri-schody i:nth-child(5) { height: 100%; }
.pri-schody i.on { background: var(--p); }
@media (min-width: 700px) {
  .pri-vynos { margin-inline: -32px; padding-inline: 32px; }
}
@media (max-width: 559px) {
  .pri-pole { grid-template-columns: minmax(0, 1fr); }
  .pri-pole-2 { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .pri-pol { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 10px; }
  .pri-pole-2 .pri-pol { flex-direction: column; align-items: stretch; }
  .pri-pole-2 .pri-pol-lb { flex-basis: auto; }
  .pri-pol-lb { flex-basis: 100%; }
  .pri-vynos { margin-inline: -18px; padding-inline: 18px; }
}
/* ── konec principu (s216) ── */

/* ── Tři druhy nákladů (s217) ──────────────────────────────────────────────
   Detail (#naklady za modelem) a odpověď „Co platím každý měsíc?“ v Jak to
   funguje. Tři sloupce na bílé ploše, prostřední (pevná částka) tmavý. */
.tn-sekce .wrap { padding-top: 0; }
.tn-h { font-size: var(--t6); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.2; color: var(--n900); }
.tn-perex { margin-top: 6px; font-size: var(--t3); color: var(--n700); max-width: 60ch; }
.tn-sl { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 18px; background: var(--plocha);
  border: 1px solid var(--s200); border-radius: var(--r); overflow: hidden; }
.odp .tn-sl { margin-top: 14px; }
@media (min-width: 760px) { .tn-sl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tn-sk { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; }
.tn-sk + .tn-sk { border-top: 1px solid var(--s200); }
@media (min-width: 760px) { .tn-sk + .tn-sk { border-top: 0; border-left: 1px solid var(--s200); } }
.tn-fix { background: var(--p); }
.tn .tn-lb { font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--s700); margin: 0; }
.tn .tn-v { font-size: var(--t6); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.15; color: var(--p);
  font-variant-numeric: tabular-nums; margin: 0; }
.tn-v small { font-size: var(--t3); font-weight: var(--w-text); letter-spacing: 0; color: var(--n200); }
.tn .tn-sk ul { margin: 0; padding-left: 18px; font-size: var(--t2); line-height: 1.5; color: var(--n700); }
.tn .tn-sk li + li { margin-top: 2px; }
.tn .tn-sk ul { list-style: disc; } .tn .tn-sk li::marker { color: var(--s600); }
.tn .tn-fix li::marker { color: var(--s); }
.tn .tn-kdo { margin: auto 0 0; padding: 8px 10px; border-radius: var(--r-sm); background: var(--s150);
  font-size: var(--t2); line-height: 1.4; color: var(--n700); }
.tn-fix .tn-lb { color: var(--tm-2); }
.tn-fix .tn-v { color: var(--tm-1); }
.tn-fix .tn-v small, .tn .tn-fix ul { color: var(--tm-3); }
.tn .tn-fix .tn-kdo { background: var(--tm-plocha-2); color: var(--tm-2); }
.tn .tn-zaver { margin-top: 14px; font-size: var(--t3); color: var(--n700); max-width: 76ch; }
.tn-zaver b { color: var(--n900); font-weight: var(--w-med); }
.tn-zaver a { color: var(--p); font-weight: var(--w-med); white-space: nowrap; }
/* ── konec tří nákladů (s217) ── */

/* ── Karta Již brzy (s218) ─────────────────────────────────────────────────
   Zlatý pruh přes spodek fotky a věta o první fázi místo „bude upřesněna“.
   Rozměr i pořadí prvků stejné jako u ostatních karet. */
.card.soon .brzy-pas { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; align-items: center;
  min-height: 36px; padding: 6px 16px; background: var(--s); color: var(--na-zlate);
  font-size: var(--t2); font-weight: var(--w-bold); letter-spacing: .01em; pointer-events: none; }
.card.soon .dots { bottom: 46px; }
.card.soon .hint { bottom: 46px; }
.card .brzy-roz { grid-template-columns: minmax(0, 1fr) auto; align-items: end; justify-items: stretch; gap: 8px 14px; }
.card .brzy-cena { display: grid; gap: 2px; min-width: 0; }
.card .brzy-cena b { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.01em; line-height: 1.2; color: var(--n900); }
.card .brzy-cena small { font-size: var(--t2); line-height: 1.35; color: var(--n700); }
.card .brzy-hlidat { font-size: var(--t3); font-weight: var(--w-bold); color: var(--s700); white-space: nowrap; }
.card.soon:hover .brzy-hlidat { text-decoration: underline; text-underline-offset: 3px; }
@media (pointer: coarse), (max-width: 699px) { .card .brzy-roz { padding-bottom: 16px; } }
/* ── konec karty Již brzy (s218) ── */

/* ── Mapa: světadíly (s220) ────────────────────────────────────────────────
   Skupina tlačítek vlevo nahoře, naproti + a −. Na úzké mapě se vodorovně
   posouvá, aby nenarazila do ovládání přiblížení. Pod 560 px leží pod mapou,
   nízká mapa by jinak byla z poloviny zakrytá. */
.map-kont { position: absolute; left: 12px; top: 12px; z-index: var(--z-mapa); display: flex; gap: 2px;
  max-width: calc(100% - 70px); overflow-x: auto; scrollbar-width: none; padding: 3px; border-radius: var(--r-pill);
  background: var(--plocha); box-shadow: 0 2px 8px rgb(var(--zavoj) / .18); }
.map-kont::-webkit-scrollbar { display: none; }
.map-kont button { flex: none; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); font-size: var(--t2);
  font-weight: var(--w-med); color: var(--n700); white-space: nowrap; }
.map-kont button:hover { color: var(--p); background: var(--s150); }
.map-kont button[aria-pressed="true"] { background: var(--p); color: var(--tm-1); }
@media (pointer: coarse) { .map-kont button { min-height: 44px; padding: 0 14px; } }
@media (max-width: 559px) {
  .map-kont { position: static; max-width: 100%; margin-top: 8px; width: max-content; box-shadow: none;
    border: 1px solid var(--n150); }
}
/* ── konec světadílů (s220) ── */

/* ── Karta: swipe fotek na dotyku (s222) ───────────────────────────────────
   Jen bez hoveru. Viditelná vrstva `.s222-vid` přebije `.lay.first`,
   tečky jsou vidět pořád. */
@media (hover: none) {
  .card .ph { touch-action: pan-y; }
  .card .dots { opacity: 1; }
  .card .ph.s222-posun .lay { opacity: 0; }
  .card .ph.s222-posun .lay.s222-vid { opacity: 1; }
  .card .dots i.s222-on { background: var(--plocha); }
  .card .ph.s222-posun .hint { opacity: 0; }
}
/* ── konec swipe fotek (s222) ── */

/* ── Jak to funguje: střídavé kapitoly (s223) ──────────────────────────────
   Text + jeden hlavní obraz, na desktopu střídavě vlevo a vpravo. Vedlejší
   bloky pod „Podrobněji“ (schová je až JS přes `data-kap-vice`). */
[data-page="jak-to-funguje"] .kapitoly .jtf-kryti, [data-page="jak-to-funguje"] .kapitoly .jtf-provoz { display: contents; }
[data-page="jak-to-funguje"] .kapitoly .chapter { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
[data-page="jak-to-funguje"] .kapitoly .chapter > * { margin-top: 0; }
[data-page="jak-to-funguje"] .kapitoly .chapter > .ch-pos { order: 1; }
[data-page="jak-to-funguje"] .kapitoly .chapter > .otazka { order: 2; margin-top: 10px; }
[data-page="jak-to-funguje"] .kapitoly .chapter > .odpoved { order: 3; margin-top: 18px; }
[data-page="jak-to-funguje"] .kapitoly .chapter > .kap-puvod { order: 4; margin-top: 18px; }
[data-page="jak-to-funguje"] .kapitoly .chapter > .praha-kap-odk, [data-page="jak-to-funguje"] .kapitoly .chapter > .vic { order: 5; margin-top: 12px; }
/* hlavní obraz */
[data-page="jak-to-funguje"] .kapitoly .jtf-kryti > .jtf-vid, [data-page="jak-to-funguje"] .kapitoly .chapter > .kap-rok, [data-page="jak-to-funguje"] .kapitoly .jtf-provoz > .jtf-vid,
[data-page="jak-to-funguje"] .kapitoly .chapter > .kap-tmava, [data-page="jak-to-funguje"] .kapitoly .chapter > .praha-kap, [data-page="jak-to-funguje"] .kapitoly .chapter > .kap-drzime { order: 6; margin-top: var(--kap-odpoved); }
[data-page="jak-to-funguje"] .kapitoly .chapter > .praha-kap[style] { margin-top: var(--kap-odpoved) !important; }
[data-page="jak-to-funguje"] .kapitoly .chapter > .kap-vice { order: 7; }
/* vedlejší bloky */
[data-page="jak-to-funguje"] .kapitoly .jtf-kryti > .jtf-box, [data-page="jak-to-funguje"] .kapitoly .chapter > .kap-kroky, [data-page="jak-to-funguje"] .kapitoly .chapter > .kap-vlastni,
[data-page="jak-to-funguje"] .kapitoly .chapter > .kap-dny, [data-page="jak-to-funguje"] .kapitoly .jtf-provoz > .jtf-box, [data-page="jak-to-funguje"] .kapitoly .chapter > .next-steps { order: 8; margin-top: var(--kap-mezera); }
[data-page="jak-to-funguje"] .kapitoly .chapter > .dalsi { order: 9; margin-top: 40px; }
[data-page="jak-to-funguje"] .kapitoly[data-kap-vice] .chapter:not(.kap-otevrena) :is(.jtf-kryti > .jtf-box, .jtf-provoz > .jtf-box),
[data-page="jak-to-funguje"] .kapitoly[data-kap-vice] .chapter:not(.kap-otevrena) > :is(.kap-kroky, .kap-vlastni, .kap-dny, .next-steps) { display: none; }

.kap-vice { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; margin-top: 14px;
  padding: 0; font-size: var(--t3); font-weight: var(--w-med); color: var(--p); text-decoration: underline;
  text-underline-offset: 4px; text-decoration-color: var(--s200); }
.kap-vice:hover { text-decoration-color: currentColor; }
.kap-vice svg { width: 18px; height: 18px; transition: transform .2s ease; }
.kap-vice[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .kap-vice svg { transition: none; } }
.kap-puvod p:not(.pri-zeme) { max-width: 52ch; color: var(--n700); }
.kap-puvod .pri-zeme { margin-bottom: 10px; }
.onas-puvod { margin-top: 22px; }

@media (min-width: 1040px) {
  [data-page="jak-to-funguje"] .kapitoly .chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; }
  [data-page="jak-to-funguje"] .kapitoly .chapter > :is(.ch-pos, .otazka, .odpoved, .kap-puvod, .praha-kap-odk, .vic, .kap-vice) { grid-column: 1; }
  [data-page="jak-to-funguje"] .kapitoly :is(.jtf-kryti > .jtf-vid, .chapter > .kap-rok, .jtf-provoz > .jtf-vid, .chapter > .kap-tmava, .chapter > .praha-kap, .chapter > .kap-drzime) {
    grid-column: 2; grid-row: 1 / span 7; align-self: center; margin-top: 0; }
  [data-page="jak-to-funguje"] .kapitoly .chapter > .praha-kap[style] { margin-top: 0 !important; }
  [data-page="jak-to-funguje"] .kapitoly .chapter:nth-of-type(even) > :is(.ch-pos, .otazka, .odpoved, .kap-puvod, .praha-kap-odk, .vic, .kap-vice) { grid-column: 2; }
  [data-page="jak-to-funguje"] .kapitoly .chapter:nth-of-type(even) :is(.jtf-kryti > .jtf-vid, .jtf-provoz > .jtf-vid),
  [data-page="jak-to-funguje"] .kapitoly .chapter:nth-of-type(even) > :is(.kap-rok, .kap-tmava, .praha-kap, .kap-drzime) { grid-column: 1; }
  [data-page="jak-to-funguje"] .kapitoly .chapter > :is(.kap-kroky, .kap-vlastni, .kap-dny, .next-steps, .dalsi), [data-page="jak-to-funguje"] .kapitoly :is(.jtf-kryti, .jtf-provoz) > .jtf-box { grid-column: 1 / -1; }
  [data-page="jak-to-funguje"] .kapitoly .jtf-kryti > .jtf-box { grid-column: auto; }
  [data-page="jak-to-funguje"] .kapitoly .chapter.kap-otevrena .jtf-kryti > .jtf-box:first-child { grid-column: 1; }
  [data-page="jak-to-funguje"] .kapitoly .chapter.kap-otevrena .jtf-kryti > .jtf-box:nth-child(2) { grid-column: 2; }
  [data-page="jak-to-funguje"] .kapitoly .jtf-kryti > .jtf-vid { display: flex; }
  /* 04: srovnání má tři sloupce, v půlce by se mačkalo → pod text přes celou šířku */
  [data-page="jak-to-funguje"] .kapitoly .chapter > .kap-tmava, [data-page="jak-to-funguje"] .kapitoly .chapter:nth-of-type(even) > .kap-tmava { grid-column: 1 / -1; grid-row: auto; margin-top: var(--kap-odpoved); }
  /* 05: byt a podíly pod sebou, v půlce vedle sebe nevejdou */
  [data-page="jak-to-funguje"] .kapitoly .chapter > .praha-kap { grid-template-columns: minmax(0, 1fr); }
  [data-page="jak-to-funguje"] .kapitoly .chapter > .dalsi { margin-top: 56px; }
}
/* ── konec střídavých kapitol (s223) ── */

/* ── Čas: krizové situace (s224) ───────────────────────────────────────────
   Tři modelové situace pod tabulkou času, každá s logem „řeší na místě“. */
.krz { margin-top: 40px; }
@media (min-width: 1040px) { .krz { margin-top: 56px; } }
.krz-hd { display: grid; gap: 6px; max-width: 62ch; }
.krz-nadpis { font-size: var(--t6); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.2; color: var(--n900); }
.krz-hd p { color: var(--n700); }
.krz-karty { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .krz-karty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.krz-k { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px; border-radius: var(--r); background: var(--plocha);
  border: 1px solid var(--n100); }
.krz-kdy { font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--er); }
.krz-h { font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.01em; line-height: 1.3; color: var(--n900); }
.krz-k ol { list-style: decimal; margin: 0; padding-left: 20px; font-size: var(--t2); line-height: 1.5; color: var(--n700); display: grid; gap: 2px; }
.krz-fr { display: flex; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--n100);
  font-size: var(--t2); font-weight: var(--w-med); color: var(--p); }
.krz-fr img { height: 18px; width: auto; }
/* ── konec krizových situací (s224) ── */

/* ── Detail: sub-menu s kotvami (s225) ─────────────────────────────────────
   Lepí se pod hlavičku (top nastavuje JS), pod ní z-index, nad obsahem. */
.dnav { position: sticky; top: 0; z-index: var(--z-lista); background: rgb(var(--bila-rgb) / .96);
  border-block: 1px solid var(--n100); transition: top .26s ease; }
@supports (backdrop-filter: blur(8px)) { .dnav { background: rgb(var(--bila-rgb) / .86); backdrop-filter: blur(8px); } }
.dnav-in { display: flex; align-items: center; gap: 16px; min-height: 56px; }
.dnav-odk { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; min-width: 0; flex: 1; scroll-behavior: smooth; }
.dnav-odk::-webkit-scrollbar { display: none; }
.dnav-odk a { flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  font-size: var(--t2); font-weight: var(--w-med); color: var(--n700); white-space: nowrap; text-decoration: none; }
.dnav-odk a:hover { background: var(--s150); color: var(--p); }
.dnav-odk a[aria-current="true"] { background: var(--p); color: var(--tm-1); }
.dnav-cta { flex: none; transition: opacity .2s ease, visibility .2s; }
/* Hlavička má vlastní „Mám zájem“: v liště jen tehdy, když hlavička ujede. */
.head:not(.away) ~ main .dnav-cta { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 699px) {
  .dnav-in { min-height: 50px; }
  .dnav-cta { display: none; }
  .dnav-odk a { min-height: 44px; padding: 0 12px; }
  .dnav-odk a[aria-current="true"] { min-height: 34px; }
}
@media (prefers-reduced-motion: reduce) { .dnav { transition: none; } .dnav-odk { scroll-behavior: auto; } }
[data-page="detail"] :is(#prehled, #pronajem, #provoz, #podobne, #faze, #model, #naklady, #sezona, #lokalita, #otazky, #zajem) {
  scroll-margin-top: calc(var(--dnav-h, 56px) + 20px); }
/* ── konec sub-menu detailu (s225) ── */

/* ── Prodaná: ověřte si sami (s226) ────────────────────────────────────────
   Tlačítka portálů v sekci Provoz, sazba `.pr-btn` z volného detailu. */
.d-provoz-overte { margin-top: 18px; display: grid; gap: 10px; }
.d-provoz-overte-lb { font-size: var(--t2); font-weight: var(--w-med); color: var(--tm-2); }
.d-provoz-overte .pr-odkazy { display: flex; flex-wrap: wrap; gap: 8px; }
/* ── konec ověřte si sami (s226) ── */

/* ── Balíčky: ukázka roku a aktivity (s227) ────────────────────────────────
   Pás 12 měsíců s bloky míst, záložky ukázek, řádek aktivit ve skládačce. */
.rok-hd { max-width: 62ch; }
.rok-stitek { display: inline-flex; align-items: center; gap: 8px; font-size: var(--t1); font-weight: var(--w-bold);
  letter-spacing: .12em; text-transform: uppercase; color: var(--s700); }
.rok-stitek::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--s); }
.rok-taby { display: inline-flex; gap: 2px; margin-top: 22px; padding: 3px; border-radius: var(--r-pill); background: var(--s150); }
.rok-tab { min-height: 40px; padding: 0 18px; border-radius: var(--r-pill); font-size: var(--t3); font-weight: var(--w-med); color: var(--n700); }
.rok-tab[aria-selected="true"] { background: var(--plocha); color: var(--p); box-shadow: 0 1px 4px rgb(var(--zavoj) / .12); }
@media (pointer: coarse) { .rok-tab { min-height: 44px; } }
.rok-panel { margin-top: 22px; }
.rok-hlava { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.rok-veta { font-size: var(--t6); font-weight: var(--w-bold); letter-spacing: -.02em; line-height: 1.2; color: var(--n900); max-width: 30ch; }
.rok-suma { display: grid; text-align: right; }
.rok-suma b { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.02em; color: var(--p); font-variant-numeric: tabular-nums; }
.rok-suma small { font-size: var(--t2); color: var(--n200); }
.rok-pas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; margin-top: 18px; }
.rok-m { font-size: var(--t1); color: var(--n200); text-align: center; padding-bottom: 4px; }
.rok-blok, .rok-mezera { min-height: 58px; border-radius: var(--r-sm); grid-row: 2; }
.rok-mezera { background: var(--n100); }
.rok-blok { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 8px 10px; color: var(--tm-1); min-width: 0; }
.rok-blok b { font-size: var(--t2); font-weight: var(--w-bold); line-height: 1.2; overflow-wrap: anywhere; }
.rok-blok small { font-size: var(--t1); color: var(--tm-1); line-height: 1.25; }
.rok-p { background: var(--p); } .rok-p400 { background: var(--ac); } .rok-s600 { background: var(--s700); }
.rok-mista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .rok-mista { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rok-mista a { display: flex; justify-content: space-between; gap: 12px; align-items: end; padding: 12px 14px; min-height: 44px;
  border: 1px solid var(--n150); border-radius: var(--r-sm); text-decoration: none; color: var(--n900); font-size: var(--t2); }
.rok-mista a:hover { border-color: var(--s); }
.rok-mista a b { flex: none; font-weight: var(--w-med); color: var(--p); white-space: nowrap; align-self: end; }
.rok-mista a b .cena-m { white-space: nowrap; }
.rok-mista a > span { display: grid; gap: 1px; }
.rok-mista a small { font-size: var(--t1); color: var(--n200); }
@media (max-width: 559px) {
  .rok-suma { text-align: left; }
  .rok-blok, .rok-mezera { min-height: 28px; }
  .rok-blok { padding: 0; }
  .rok-blok b, .rok-blok small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rok-m { font-size: 10px; }
}
.skl-akt { margin-top: 16px; }
.skl-akt-lb { font-size: var(--t2); font-weight: var(--w-med); color: var(--n700); }
.skl-akt-lb span { margin-left: 6px; font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--s700); }
.skl-akt-r { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.akt { min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--p300); background: var(--plocha);
  font-size: var(--t3); font-weight: var(--w-med); color: var(--p); }
.akt:hover { background: var(--s150); }
.akt[aria-pressed="true"] { background: var(--p); border-color: var(--p); color: var(--tm-1); }
@media (pointer: coarse) { .akt { min-height: 44px; } }
/* ── konec ukázky roku (s227) ── */

/* ── Detail: sezóna (s228) ─────────────────────────────────────────────────
   Tabulka 12 měsíců s ikonami. Na úzkém displeji se posouvá do strany,
   první sloupec drží. */
.sz-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sz-tab { margin-top: 18px; overflow-x: auto; background: var(--plocha); border: 1px solid var(--s200); border-radius: var(--r); }
.sz-tab table { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: separate; border-spacing: 3px; font-size: var(--t2); text-align: center; }
.sz-tab thead td:first-child { width: 170px; }
.sz-tab thead td, .sz-tab thead th { font-size: var(--t1); font-weight: var(--w-med); color: var(--n200); padding: 6px 0 2px; }
.sz-tab tbody th { position: sticky; left: 0; z-index: 1; background: var(--plocha); text-align: left; white-space: nowrap;
  font-weight: var(--w-med); color: var(--n700); padding: 6px 12px 6px 10px; }
.sz-tab tbody th span { vertical-align: middle; }
.sz-tab td { position: relative; padding: 6px 0; border-radius: var(--r-xs); vertical-align: middle; font-variant-numeric: tabular-nums; }
.sz-ico { width: 20px; height: 20px; display: inline-block; vertical-align: middle; }
.sz-tab th .sz-ico { margin-right: 8px; }
.sz-n { background: var(--n100); color: var(--n700); }
.sz-s { background: var(--p200); color: var(--p600); }
.sz-v { background: var(--p); color: var(--tm-1); }
.sz-t { color: var(--n900); font-weight: var(--w-med); }
.sz-ne { color: var(--n150); }
.sz-pozn { margin-top: 14px; font-size: var(--t3); color: var(--n700); max-width: 76ch; }
.sz-pozn b { color: var(--n900); font-weight: var(--w-med); }
.sz-zdroj { margin-top: 6px; }
.sz-leg { display: none; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: var(--t1); color: var(--n700); }
.sz-leg i { display: inline-block; width: 12px; height: 12px; border-radius: var(--r-xs); margin-right: 5px; vertical-align: -1px; }
@media (max-width: 699px) {
  .sz-tab table { min-width: 600px; }
  .sz-tab thead td:first-child { width: 118px; }
  .sz-tab tbody th { font-size: var(--t1); padding-inline: 6px 8px; white-space: normal; line-height: 1.25; }
  .sz-tab th .sz-ico { display: none; }
  .sz-tab td[class^="sz-"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sz-tab td[class^="sz-"] { height: 22px; }
  .sz-leg { display: flex; }
}
.sz-kratka { margin-top: 28px; }
.sz-kratka-h { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.02em; color: var(--n900); }
.sz-kratka > p { margin-top: 4px; color: var(--n700); max-width: 64ch; }
/* ── konec sezóny (s228) ── */

/* ── Detail: složení ceny podílu (s229) ────────────────────────────────────
   Vodorovný pruh z pěti dílů a legenda s procenty a částkami. */
.sc { margin-top: 18px; padding: 18px 20px; background: var(--plocha); border: 1px solid var(--s200); border-radius: var(--r); }
.sc-h { font-size: var(--t4); font-weight: var(--w-bold); letter-spacing: -.01em; color: var(--n900); }
.sc-txt { margin-top: 4px; font-size: var(--t2); color: var(--n700); max-width: 76ch; }
.sc-pruh { display: flex; height: 16px; margin-top: 14px; border-radius: var(--r-pill); overflow: hidden; gap: 2px; }
.sc-dil { flex-grow: 0; flex-shrink: 1; }
.sc-dil.sc-p, .sc-leg .sc-p { background: var(--p); }
.sc-dil.sc-p400, .sc-leg .sc-p400 { background: var(--p400); }
.sc-dil.sc-s, .sc-leg .sc-s { background: var(--s); }
.sc-dil.sc-s200, .sc-leg .sc-s200 { background: var(--s200); }
.sc-dil.sc-n150, .sc-leg .sc-n150 { background: var(--n150); }
.sc-leg { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .sc-leg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sc-leg li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: var(--t2); color: var(--n700); }
.sc-leg i { width: 12px; height: 12px; border-radius: var(--r-xs); align-self: center; }
.sc-leg b { font-weight: var(--w-med); color: var(--n900); white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-leg small { font-size: var(--t1); font-weight: var(--w-text); color: var(--n200); margin-left: 4px; }
.sc-pozn { margin-top: 10px; }
/* ── konec složení ceny (s229) ── */

/* ── Ozve se vám David, Lenka nebo Michal (s230) ───────────────────────────
   Avatary přes sebe na všech šířkách, jména jen pro čtečku. */
:root { --img-avatar-lenka: url(/assets/img/avatar-lenka.webp); }
@media (min-width: 1040px) {
  .stul:not(.vyzva) .stul-lide { align-items: flex-start; text-align: left; }
  .stul:not(.vyzva) .stul-lide-t, .stul:not(.vyzva) .stul-pozn { text-align: left; align-self: stretch; }
  .stul:not(.vyzva) .stul-lide .sellers { flex-direction: row; justify-content: flex-start; gap: 0; }
  .stul:not(.vyzva) .stul-lide .seller + .seller { margin-left: -12px; }
  .stul:not(.vyzva) .stul-lide .seller > span:not(.av) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stul:not(.vyzva) .stul-lide .seller .av { width: 52px; height: 52px; border-color: var(--p); }
  .stul:not(.vyzva) .stul-lide .seller .av.ph { border-color: var(--p); }
}
.stul-lide .seller .av.ph { background: var(--s150); color: var(--p); }
.d-kontakt .sellers { flex-wrap: nowrap; gap: 0; flex: none; }
.d-kontakt .seller + .seller { margin-left: -10px; }
.d-kontakt .seller .av { width: 40px; height: 40px; box-shadow: none; }
.d-kontakt .seller .av.ph { font-size: var(--t2); }
.d-kontakt .seller > span:not(.av) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.d-kontakt-tx { display: grid; font-size: var(--t2); line-height: 1.4; min-width: 0; }
.d-kontakt-tx b { color: var(--n900); font-weight: var(--w-med); }
.d-kontakt-tx span { color: var(--n200); }
.d-kontakt-tx a { color: var(--p); font-weight: var(--w-bold); text-decoration: none; justify-self: start; }
@media (pointer: coarse) { .d-kontakt-tx a { display: inline-flex; align-items: center; min-height: 44px; } }
/* ── konec ozve se (s230) ── */

/* ── Jak to funguje: přestavba (s231) ──────────────────────────────────────
   Hlavička s fakty, kratší „Proč“, sub-menu z detailu, kapitoly v jedné šabloně. */
[data-page="jak-to-funguje"] .j2-hero { padding-bottom: 48px; }
[data-page="jak-to-funguje"] .j2-hero .ph-foto { display: none; }
.j2-hero-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 18px; }
@media (min-width: 1040px) { .j2-hero-in { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 64px; align-items: center; } }
.j2-hero h1 { max-width: 16ch; }
.j2-hero .lead { margin-top: 14px; max-width: 48ch; color: var(--n700); }
.j2-fakta { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--s200); }
.j2-fakta li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--s200); }
.j2-ic { width: 40px; height: 40px; border-radius: 50%; background: var(--s150); display: grid; place-items: center; color: var(--p); font-weight: var(--w-bold); }
.j2-fakta b { display: block; font-size: var(--t4); font-weight: var(--w-med); letter-spacing: -.01em; color: var(--n900); }
.j2-fakta span { font-size: var(--t2); color: var(--n700); }
.j2-hero-cta { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; margin-top: 24px; }
.j2-hero .lvid-hlava { max-width: none; }

.j2-ozve { display: flex; align-items: center; gap: 12px; }
.j2-av3 { display: flex; flex: none; }
.j2-av3 i { width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--plocha); background: var(--s150) center / cover no-repeat;
  display: grid; place-items: center; font-style: normal; font-weight: var(--w-med); font-size: var(--t2); color: var(--p); }
.j2-av3 i + i { margin-left: -10px; }
.j2-ozve p { font-size: var(--t2); line-height: 1.35; color: var(--n700); }
.j2-ozve b { display: block; color: var(--n900); font-weight: var(--w-med); }

.j2-proc-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1040px) { .j2-proc-in { grid-template-columns: 380px minmax(0, 1fr); gap: 64px; align-items: start; } }
.j2-proc .h2 { margin: 0 0 18px; }
.j2-vyhody { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.j2-vyhody li { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border-radius: var(--r); background: var(--s50); border: 1px solid var(--s200); }
.j2-vyhody b { font-size: var(--t4); font-weight: var(--w-med); color: var(--n900); }
.j2-vyhody span { font-size: var(--t2); color: var(--n700); }
.j2-vyhody li.j2-nev { background: var(--p); border-color: var(--p); }
.j2-vyhody .j2-nev b { color: var(--tm-1); }
.j2-vyhody .j2-nev span { color: var(--tm-3); }
.j2-vyhody .j2-nev .j2-nev-lb { font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .12em; text-transform: uppercase; color: var(--tm-2); }

[data-page="jak-to-funguje"] .j2-kapitoly { padding-top: 16px; }
[data-page="jak-to-funguje"] .j2-kapitoly .chapter { margin: 0; padding: 48px 0; border-bottom: 1px solid var(--s200); scroll-margin-top: calc(var(--dnav-h, 56px) + 20px); }
[data-page="jak-to-funguje"] .j2-kapitoly .chapter:last-child { border-bottom: 0; }
[data-page="jak-to-funguje"] .j2-kapitoly .chapter > * + * { margin-top: 0; }
[data-page="jak-to-funguje"] :is(#caste-dotazy, #kdo-se-stara, #video-pronajem) { scroll-margin-top: calc(var(--dnav-h, 56px) + 20px); }
.j2-kap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1040px) {
  .j2-kap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  [data-page="jak-to-funguje"] .chapter:nth-of-type(even) .j2-kap:not(.j2-siroka) .j2-obraz { order: -1; }
  .j2-kap.j2-siroka { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  /* vysoký obraz (Praha, časová osa): text nahoře, ne uprostřed */
  [data-page="jak-to-funguje"] :is(#ch05, #ch06) .j2-kap { align-items: start; }
  .j2-kap.j2-siroka .j2-kap-tx { max-width: 720px; }
}
.j2-c { font-size: var(--t2); color: var(--n200); font-variant-numeric: tabular-nums; }
.j2-h { margin-top: 6px; font-size: var(--t7); font-weight: var(--w-bold); letter-spacing: -.025em; line-height: 1.18; color: var(--n900); max-width: 24ch; }
.j2-odp { margin-top: 14px; font-size: var(--t4); line-height: 1.6; color: var(--n700); max-width: 54ch; }
.j2-odp b { color: var(--n900); }
.j2-body { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.j2-body li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; }
.j2-body li::before { content: ""; grid-row: span 2; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; background: var(--p)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3L14.5 7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.j2-body b { font-weight: var(--w-med); color: var(--n900); }
.j2-body span { font-size: var(--t2); color: var(--n700); }
.j2-odkaz { margin-top: 16px; }
.j2-odkaz a { font-weight: var(--w-med); color: var(--p); }
.j2-vice { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; padding: 0; background: none; border: 0;
  font: var(--w-med) var(--t3) var(--sans); color: var(--p); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--s200); }
.j2-vice:hover { text-decoration-color: currentColor; }
.j2-vice svg { width: 18px; height: 18px; transition: transform .2s ease; }
.j2-vice[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .j2-vice svg { transition: none; } }
.j2-detail { margin-top: 22px; }
.j2-detail[hidden] { display: none; }
.j2-panel { padding: 20px 22px; border-radius: var(--r); background: var(--plocha); border: 1px solid var(--n100); }
.j2-panel h3 { font-size: var(--t4); font-weight: var(--w-med); color: var(--n900); }
.j2-panel p { margin-top: 6px; font-size: var(--t2); color: var(--n700); max-width: 72ch; }
.j2-detail .sc { margin-top: 0; }
.j2-detail-dva { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@media (min-width: 900px) { .j2-detail-dva { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.j2-rok { padding: 22px; border-radius: var(--r-lg); background: var(--plocha); border: 1px solid var(--n100); }
.j2-rok-m { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin-bottom: 6px; font-size: var(--t1); color: var(--n200); text-align: center; }
.j2-rok-t { display: grid; grid-template-columns: repeat(52, minmax(0, 1fr)); gap: 2px; }
.j2-rok-t i, .j2-rok-leg i { height: 48px; border-radius: var(--r-xs); background: var(--n100); }
.j2-rok-t i.hl, .j2-rok-leg i.hl { box-shadow: inset 0 -4px 0 var(--p200); }
.j2-rok-t i.moje, .j2-rok-leg i.moje { background: var(--s); }
.j2-rok-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: var(--t2); color: var(--n700); }
.j2-rok-leg i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; }
.j2-rok-veta { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--n100); color: var(--n700); }
.j2-rok-veta b { color: var(--n900); font-weight: var(--w-med); }
@media (max-width: 559px) { .j2-rok-t { grid-template-columns: repeat(26, minmax(0, 1fr)); } .j2-rok-t i { height: 22px; } .j2-rok-m { display: none; } }

.j2-cas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 18px; max-width: 460px; }
.j2-cas > div { display: flex; flex-direction: column; padding: 12px 14px; border-radius: var(--r-sm); background: var(--n100); font-size: var(--t2); color: var(--n700); }
.j2-cas b { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.02em; color: var(--n900); }
.j2-cas .j2-cas-fr { background: var(--p); color: var(--tm-3); }
.j2-cas .j2-cas-fr b { color: var(--tm-1); }
.j2-cas img { height: 16px; width: auto; margin-bottom: 4px; align-self: flex-start; }
.j2-dny { padding: 22px; border-radius: var(--r-lg); background: var(--plocha); border: 1px solid var(--n100); }
.j2-dny label { display: flex; justify-content: space-between; gap: 12px; font-weight: var(--w-med); color: var(--n900); }
.j2-dny output { font-variant-numeric: tabular-nums; }
.j2-dny input { width: 100%; min-height: 32px; margin: 12px 0 8px; accent-color: var(--p); }
.j2-dny-pas { display: flex; height: 40px; border-radius: var(--r-sm); overflow: hidden; font-size: var(--t2); font-weight: var(--w-med); }
.j2-dny-pas div { display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; }
.j2-dny-pas div[hidden] { display: none; }
.j2-b { background: var(--p); color: var(--tm-1); }
.j2-p { background: var(--s); color: var(--na-zlate); }
.j2-vynos { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; margin-top: 16px; }
.j2-vynos div { display: flex; flex-direction: column; padding: 10px 12px; border: 1px solid var(--n150); border-radius: var(--r-sm); }
.j2-vynos small { font-size: var(--t1); font-weight: var(--w-med); letter-spacing: .06em; text-transform: uppercase; color: var(--n200); }
.j2-vynos b { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.02em; color: var(--p); }
.j2-vynos span { font-size: var(--t1); color: var(--n200); }
.j2-vynos em { align-self: center; font-style: normal; font-size: var(--t5); color: var(--s600); }
.j2-vynos-p { margin-top: 8px; font-size: var(--t2); color: var(--n700); }
.j2-cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-top: 28px; padding: 18px 20px;
  border-radius: var(--r); background: var(--s150); }

.j2-zeme { margin-top: 16px; }
.j2-puvod { margin-top: 10px; color: var(--n700); max-width: 52ch; }
[data-page="jak-to-funguje"] .j2-kapitoly .kap-tmava { margin-top: 0; }

[data-page="jak-to-funguje"] .j2-kapitoly .praha-kap[style] { margin-top: 0 !important; }
[data-page="jak-to-funguje"] .j2-kapitoly .j2-obraz .praha-kap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
[data-page="jak-to-funguje"] .j2-kapitoly .j2-obraz .praha-kap-odk { margin-top: 14px; }

.j2-osa { list-style: none; margin: 0; padding: 0; counter-reset: j2o; }
.j2-osa li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; padding-bottom: 18px; counter-increment: j2o; }
.j2-osa li::before { content: counter(j2o); grid-row: span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--plocha); border: 1.5px solid var(--p200); font-weight: var(--w-bold); color: var(--p); position: relative; z-index: 1; }
.j2-osa li:not(:last-child)::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--p200); }
.j2-osa li.zv::before { background: var(--p); border-color: var(--p); color: var(--tm-1); }
.j2-osa b { padding-top: 9px; font-size: var(--t4); font-weight: var(--w-med); color: var(--n900); }
.j2-osa span { font-size: var(--t2); color: var(--n700); }
.j2-7 { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--s); color: var(--na-zlate);
  font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px; }
.j2-kap-tx > .j2-ozve { margin-top: 20px; }

.j2-met { padding-top: 0; }
.j2-met-a { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; padding: 22px 24px;
  border-radius: var(--r-lg); border: 1px solid var(--s200); background: var(--plocha); text-decoration: none; color: var(--n900); }
.j2-met-a:hover { border-color: var(--s); }
.j2-met-a > span { display: grid; gap: 2px; }
.j2-met-a b { font-size: var(--t5); font-weight: var(--w-bold); letter-spacing: -.02em; }
.j2-met-a span span { font-size: var(--t2); color: var(--n700); }
.j2-met-a em { font-style: normal; font-weight: var(--w-med); color: var(--p); }
/* ── konec přestavby Jak to funguje (s231) ── */

/* ── Bali detail doplněný ze starého webu (s232) ──────────────────────────
   Ve výstavbě, bloky lokality s fotkou, Proč Bali (graf), banner balíčky. */
:root {
  --img-n-uluwatu-bali-4kk-1: url(/assets/img/n-uluwatu-bali-4kk-1.webp);
  --img-n-uluwatu-bali-4kk-2: url(/assets/img/n-uluwatu-bali-4kk-2.webp);
  --img-n-uluwatu-bali-4kk-3: url(/assets/img/n-uluwatu-bali-4kk-3.webp);
  --img-n-uluwatu-bali-4kk-4: url(/assets/img/n-uluwatu-bali-4kk-4.webp);
  --img-n-uluwatu-bali-4kk-5: url(/assets/img/n-uluwatu-bali-4kk-5.webp);
  --img-n-uluwatu-bali-4kk-6: url(/assets/img/n-uluwatu-bali-4kk-6.webp);
  --img-n-uluwatu-bali-4kk-7: url(/assets/img/n-uluwatu-bali-4kk-7.webp);
  --img-n-uluwatu-bali-4kk-8: url(/assets/img/n-uluwatu-bali-4kk-8.webp);
  --img-n-uluwatu-bali-4kk-9: url(/assets/img/n-uluwatu-bali-4kk-9.webp);
  --img-n-uluwatu-bali-4kk-10: url(/assets/img/n-uluwatu-bali-4kk-10.webp);
  --img-n-uluwatu-bali-4kk-11: url(/assets/img/n-uluwatu-bali-4kk-11.webp);
  --img-n-uluwatu-bali-4kk-12: url(/assets/img/n-uluwatu-bali-4kk-12.webp);
  --img-n-uluwatu-bali-4kk-13: url(/assets/img/n-uluwatu-bali-4kk-13.webp);
  --img-n-uluwatu-bali-4kk-14: url(/assets/img/n-uluwatu-bali-4kk-14.webp);
  --img-n-uluwatu-bali-4kk-15: url(/assets/img/n-uluwatu-bali-4kk-15.webp);
  --img-n-banga-vila-3kk-9: url(/assets/img/n-banga-vila-3kk-9.webp);
  --img-n-banga-vila-3kk-10: url(/assets/img/n-banga-vila-3kk-10.webp);
  --img-n-banga-vila-3kk-11: url(/assets/img/n-banga-vila-3kk-11.webp);
  --img-n-banga-vila-3kk-12: url(/assets/img/n-banga-vila-3kk-12.webp);
  --img-n-banga-vila-3kk-13: url(/assets/img/n-banga-vila-3kk-13.webp);
  --img-n-banga-vila-3kk-14: url(/assets/img/n-banga-vila-3kk-14.webp);
  --img-n-banga-vila-3kk-15: url(/assets/img/n-banga-vila-3kk-15.webp);
  --img-n-banga-vila-3kk-16: url(/assets/img/n-banga-vila-3kk-16.webp);
  --img-bali-banner: url(/assets/img/bali-banner.webp); }
.d-stavba { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-top: 16px; padding: 12px 16px; border-radius: 12px; background: var(--s150); font-size: var(--t2); color: var(--n700); }
.d-stavba b { color: var(--p); font-weight: var(--w-bold); }
.lok-bloky { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 20px; margin-top: 40px; }
.lok-bloky figure { margin: 0; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px; border-radius: 16px; background: var(--s50); border: 1px solid var(--s200); }
.lok-bloky img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; }
.lok-bloky figcaption { font-size: var(--t2); color: var(--n700); line-height: 1.55; }
.lok-bloky figcaption b { display: block; font-size: 17px; color: var(--n900); margin-bottom: 4px; font-weight: var(--w-bold); }
@media (max-width: 559px) { .lok-bloky figure { grid-template-columns: 1fr; } .lok-bloky img { width: 100%; height: 180px; } }
.navst-in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
@media (min-width: 1040px) { .navst-in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } }
.navst .lead { margin-top: 12px; max-width: 52ch; }
.navst .lead b { color: var(--n900); }
.navst-f { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 22px 0 14px; }
.navst-f div { border-top: 1px solid var(--s200); padding-top: 8px; }
.navst-f dt { font-size: 12px; color: var(--n200); }
.navst-f dd { margin: 2px 0 0; font-size: 21px; font-weight: var(--w-bold); letter-spacing: -.02em; color: var(--p); font-variant-numeric: tabular-nums; }
.navst-g { padding: 18px; border-radius: 16px; background: var(--s50); border: 1px solid var(--n150); }
.navst-graf { display: block; width: 100%; height: auto; }
.navst-g-mrizka { stroke: var(--n150); stroke-width: 1; }
.navst-g-osa { font-size: 12px; fill: var(--n200); }
.navst-g-sl { fill: #A9C1C1; }
.navst-g-vrchol { fill: var(--p); }
.navst-g-hod { font-size: 13px; font-weight: 600; fill: var(--n900); }
.navst-g-pand { font-size: 11px; font-style: italic; fill: var(--n200); }
.navst + .sec.joined > .wrap { border-top-color: transparent; }
@media (max-width: 559px) {
  .navst-f { grid-template-columns: 1fr 1fr; }
  .navst-f dd { font-size: 17px; }
  .navst-g { padding: 8px; }
  .navst-g-osa, .navst-g-pand { font-size: 16px; }
  .navst-g-hod { font-size: 18px; }
}
.d-banner { display: grid; grid-template-columns: minmax(0, 1fr); background: #263E3E; color: #fff; }
@media (min-width: 900px) { .d-banner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.d-banner-foto { min-height: 320px; background: var(--img-bali-banner) center 70% / cover; }
.d-banner-tx { padding: 48px clamp(20px, 5vw, 72px); display: flex; flex-direction: column; gap: 14px; justify-content: center; max-width: 620px; }
.d-banner-tx .lab { color: #CDAF75; }
.d-banner-tx h2 { font-size: clamp(26px, 4.4vw, 36px); font-weight: var(--w-bold); letter-spacing: -.025em; line-height: 1.15; margin: 0; color: #fff; }
.d-banner-tx p { color: rgba(255, 255, 255, .85); margin: 0; }
.d-banner-tx .btn { align-self: flex-start; }
/* ── konec bali detail (s232) ── */

/* ── Čas: graf hodin a jedno 0 h (s233) ───────────────────────────────────
   Místo tabulky s „Řeší Fragmento“ u každého řádku (s201). */
.cas2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 28px; }
@media (min-width: 900px) { .cas2 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 24px; margin-top: 40px; } }
.cas2-l { padding: 24px; border-radius: var(--r); background: var(--plocha); border: 1px solid var(--n100); }
@media (min-width: 900px) { .cas2-l { padding: 32px 36px; } }
.cas2-sum { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 0 0 20px; }
.cas2-sum b { font-size: clamp(44px, 6vw, 60px); font-weight: var(--w-bold); letter-spacing: -.03em; line-height: 1; color: var(--p); font-variant-numeric: tabular-nums; }
.cas2-sum span { color: var(--n700); line-height: 1.4; }
.cas2-rady { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cas2-rady li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nm nm" "tr v"; gap: 6px 14px; align-items: center; }
@media (min-width: 1040px) { .cas2-rady li { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 76px; grid-template-areas: "nm tr v"; } }
.cas2-nm { grid-area: nm; margin: 0; font-size: var(--t2); line-height: 1.4; color: var(--n700); }
.cas2-nm b { color: var(--n900); font-weight: var(--w-med); }
.cas2-nm small { display: block; font-size: 13px; color: var(--n200); }
.cas2-tr { grid-area: tr; position: relative; height: 14px; border-radius: 4px; background: var(--n100); overflow: hidden; }
.cas2-tr i { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.cas2-hi { background: var(--p200); }
.cas2-lo { background: var(--p); }
.cas2-v { grid-area: v; text-align: right; font-weight: var(--w-med); color: var(--n900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cas2-pozn { margin: 20px 0 0; font-size: 13px; line-height: 1.5; color: var(--n200); }
.cas2-p { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 28px; border-radius: var(--r); background: var(--p); color: #fff; }
@media (min-width: 900px) { .cas2-p { padding: 36px; } }
.cas2-p img { height: 30px; width: auto; margin-bottom: 12px; align-self: flex-start; }
.cas2-lb { font-size: var(--t1); font-weight: var(--w-bold); letter-spacing: .1em; text-transform: uppercase; color: var(--s200); }
.cas2-p b { font-size: clamp(56px, 8vw, 80px); font-weight: var(--w-bold); letter-spacing: -.03em; line-height: 1; }
.cas2-p span:last-child { color: rgba(255, 255, 255, .86); max-width: 30ch; }
/* ── konec grafu času (s233) ── */

/* ── Jaké to je: nálada (s235) ────────────────────────────────────────────
   Tón fotek a zrno, hero, měsíce v roce, denní doba u domů, pás kanálů.
   Fotky `ap-*` jsou z Apartiny (beta.apartina.hr), zatím jediné s lidmi. */
:root {
  --img-ap-dite-terasa: url(/assets/img/ap-dite-terasa.webp);
  --img-ap-zapad: url(/assets/img/ap-zapad.webp);
  --img-ap-zmrzlina: url(/assets/img/ap-zmrzlina.webp);
  --img-ap-plaz: url(/assets/img/ap-plaz.webp);
}
[data-page="jake-to-je"] .jtn-m, [data-page="jake-to-je"] .jtn-pas span,
[data-page="jake-to-je"] .mt .ph, [data-page="jake-to-je"] .jt-in span,
[data-page="jake-to-je"] .jt-konec .ph, [data-page="jake-to-je"] .jt-hero .vid,
[data-page="jake-to-je"] .jt-hero { filter: saturate(.9) contrast(1.05) sepia(.08); }
[data-page="jake-to-je"] body::after,
body[data-page="jake-to-je"]::after { content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.jtn-hero { min-height: 92svh; }
.jtn-hero::after { background: linear-gradient(180deg, rgb(var(--zavoj-hluboky) / .30) 0%, rgb(var(--zavoj-hluboky) / 0) 34%,
  rgb(var(--zavoj-hluboky) / .28) 62%, rgb(var(--zavoj-hluboky) / .88) 100%); }
.jtn-hero .in { padding-bottom: 84px; max-width: 760px; }
.jtn-kde { display: flex; align-items: center; gap: 9px; white-space: nowrap; margin-bottom: 18px; font-size: 12px;
  letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.jtn-tec { width: 7px; height: 7px; border-radius: 50%; background: var(--s); box-shadow: 0 0 0 4px rgb(var(--zlata-rgb, 205 175 117) / .22); }
.jtn-hero h1 { font-size: clamp(38px, 6.4vw, 78px); line-height: 1.05; }
.jtn-hero .in > p:last-of-type { max-width: 44ch; }
.jtn-dolu { position: absolute; left: 50%; bottom: 26px; z-index: var(--z-nad-fotkou); width: 30px; height: 46px; translate: -50% 0;
  border: 1px solid rgba(255, 255, 255, .45); border-radius: 20px; display: grid; place-items: start center; padding-top: 8px; }
.jtn-dolu span { width: 3px; height: 9px; border-radius: 2px; background: rgba(255, 255, 255, .85); animation: jtn-pad 1.9s infinite; }
@keyframes jtn-pad { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .jtn-dolu span { animation: none; } }
.jtn-mesice { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 30px; }
@media (min-width: 900px) { .jtn-mesice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
.jtn-m { position: relative; margin: 0; aspect-ratio: 4 / 5.2; border-radius: var(--r); overflow: hidden;
  background-size: cover; background-position: center; display: flex; align-items: flex-end; }
.jtn-m::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(var(--zavoj-hluboky) / .05) 30%, rgb(var(--zavoj-hluboky) / .86) 100%); }
.jtn-m-mes { position: absolute; top: 14px; left: 16px; z-index: var(--z-nad-fotkou); font-family: var(--serif); font-style: italic;
  font-size: clamp(30px, 4vw, 46px); line-height: 1; color: rgba(255, 255, 255, .96); text-shadow: 0 2px 22px rgba(0, 0, 0, .45); }
.jtn-m figcaption { position: relative; z-index: var(--z-nad-fotkou); padding: 16px; display: grid; gap: 5px; }
.jtn-m q { font-family: var(--serif); font-style: italic; font-size: var(--t3); line-height: 1.35; color: var(--tm-1); }
.jtn-m figcaption span { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
@media (max-width: 559px) {
  .jtn-mesice { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 12px;
    margin-inline: calc(var(--okraj, 20px) * -1); padding-inline: var(--okraj, 20px); scrollbar-width: none; }
  .jtn-mesice::-webkit-scrollbar { display: none; }
  .jtn-m { flex: 0 0 74%; scroll-snap-align: center; }
}
.jtn-kdy { display: block; margin-bottom: 6px; font-size: 11px; font-weight: var(--w-bold); letter-spacing: .16em;
  text-transform: uppercase; color: var(--s); }
.jtn-pas { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 26px; }
@media (min-width: 900px) { .jtn-pas { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.jtn-pas span { aspect-ratio: 1; border-radius: 10px; background-size: cover; background-position: center; }
.jtn-pas + .kanaly { margin-top: 16px; }
.kanal-pripr { cursor: default; }
.kanal-pripr .k-jm { color: var(--n200); }
.kanal-pripr .k-uc { color: var(--n200); }
.kanal-pripr img { opacity: .6; }
@media (prefers-reduced-motion: no-preference) {
  [data-page="jake-to-je"] [data-jtn-nabeh] { opacity: 0; transform: translateY(24px);
    transition: opacity .9s ease, transform .9s cubic-bezier(.2, .7, .3, 1); }
  [data-page="jake-to-je"] [data-jtn-nabeh].je { opacity: 1; transform: none; }
}
/* ── konec nálady Jaké to je (s235) ── */

/* ── Akční položka v megamenu (s237) ──────────────────────────────────────
   Spodní řádek megamenu nesl jen odkazy. Poslední položka je výzva, takže
   vypadá jako tlačítko; text i cíl jsou v `_build/globalni.json`. */
.mega-vol .mega-akce { padding: 5px 14px; border-radius: 99px; background: var(--s); color: var(--na-zlate);
  font-weight: var(--w-med); }
.mega-vol .mega-akce:hover { background: var(--s600); color: var(--tm-1); }
/* ── konec akční položky (s237) ── */

/* Fixes on top of the template stylesheet. legacy/template is read-only, so
   scripts/sync-legacy.mjs appends this file to the copied
   public/assets/css/style.css. Uses the template's tokens. */

/* Homepage principle list (s216): the five sentences ran at --t5 (21px), larger
   than every lead paragraph on the page and next to a 15px panel. */
.pri-vety p {
  font-size: var(--t4);
  line-height: 1.45;
  letter-spacing: -0.01em;
  padding: 11px 0;
  max-width: 48ch;
  text-wrap: pretty;
}

/* "USA / Španělsko" were 21px serif pills, unlike every other chip on the
   page; they now match the filter and country chips. */
.pri-zeme span {
  font-family: inherit;
  font-size: var(--t1);
  font-weight: var(--w-bold);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 12px;
}

/* Footer's last line (#35): the privacy and cookies links carry the template's
   4px tap padding (`p a`), the company details and the year do not, so the
   links' text sat 4px lower. Aligned on the text's baseline instead, at every
   width; on phones, where the groups stack, it only affects the links' row. */
.foot .bot,
.bot-firma,
.bot-odk {
  align-items: baseline;
}

/* Legal pages (privacy policy, cookies; components/LegalPage.tsx): long
   running text, so paragraphs are as wide as the lists, lists show their
   bullets and links look like links. */
.pravni p {
  max-width: 62ch;
}
.pravni .odrazky {
  list-style: disc;
}
.pravni .odrazky li::marker {
  color: var(--s);
}
.pravni a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

/* Phone menu (#50, components/Drawer.tsx and the template copies): the client
   zone is for owners, not one of the site's pages, so it leaves their list and
   sits under the call to action, smaller and quieter, with a key. Still a
   whole row of 44px to tap. */
.dr-ks {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 10px;
  font-size: var(--t2);
  font-weight: var(--w-med);
  color: var(--n700);
}
.dr-ks:hover {
  color: var(--p);
}
.dr-ks .ico {
  width: 16px;
  height: 16px;
}

/* Listing (#23): the template drops the bottom padding of the cards' section in
   the grid view (s90), because its package strip was the last thing there. The
   ported listing ends with the cards, which then touched the next section; they
   get the space the filter bar leaves above them (#view-grid's margin-top). */
[data-page="nemovitosti"] .sec.tight:first-of-type:has(#view-grid:not([hidden])) {
  padding-bottom: 48px;
}

/* Property page price box (#42): "Poslední podíl za tuto cenu" stands out from
   the usual "Zbývají 2 podíly…" line with the full gold edge. */
.zeb-strucne.zeb-posledni {
  border-color: var(--s);
  box-shadow: inset 0 0 0 1px var(--s);
}
.zeb-strucne.zeb-posledni b {
  color: var(--s700);
}

/* Inquiry form on property pages (#30, components/InquiryForm.tsx): an error
   under a field of the two-column grid moved every field after it and put the
   columns out of line. Each field there keeps one line for its message (the
   messages are one line long), so showing or clearing one moves nothing; the
   reserved line takes over most of the row gap. A field found right gets a
   quiet green edge. */
.kp-form .mrizka {
  row-gap: 4px;
}
.kp-form .mrizka .chyba {
  display: block;
  min-height: 1.4em;
}
.kp-form .pole-ok .fvstup {
  border-color: var(--ok);
}

/* Phone prefix (#32, components/PhoneCountryPicker.tsx): a button with the
   country's flag and prefix in front of the phone field, opening a list of
   countries with a search across the field's row, in the look of the site's
   select (.vyber, below). Its edge stays neutral when the number shows an
   error or is found right: the mark is the number's. */
.kp-form .predvolba-radek {
  position: relative;
  display: flex;
  gap: 8px;
}
.kp-form .predvolba-radek > .fvstup {
  min-width: 0;
}
.kp-form .predvolba-tl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: 100%;
  padding: 0 11px 0 12px;
  border: 1px solid var(--p300);
  background: var(--plocha);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  transition: border-color 0.15s ease;
}
.kp-form .predvolba-tl:hover,
.kp-form .predvolba-tl[aria-expanded="true"] {
  border-color: var(--p);
}
.kp-form .pole-chyba .predvolba .fvstup:not(:hover, [aria-expanded="true"]),
.kp-form .pole-ok .predvolba .fvstup:not(:hover, [aria-expanded="true"]) {
  border-color: var(--p300);
}
.kp-form .pole-chyba .predvolba .fvstup {
  box-shadow: none;
}
.kp-form .predvolba-vlajka {
  width: 21px;
  height: 14px;
  flex: 0 0 auto;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1);
}
.kp-form .predvolba-sipka {
  width: 12px;
  height: 12px;
  color: var(--n700);
  transition: transform 0.2s ease;
}
.kp-form [aria-expanded="true"] > .predvolba-sipka {
  transform: rotate(180deg);
}
.kp-form .predvolba-pop {
  position: absolute;
  z-index: var(--z-filtr-pop);
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  padding: 6px;
  background: var(--plocha);
  border-radius: var(--r);
  box-shadow: var(--stin-popover);
}
.kp-form .predvolba-pop .predvolba-hledat {
  min-height: 44px;
  padding: 10px 12px;
}
.kp-form .predvolba-seznam {
  max-height: 280px;
  margin-top: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.kp-form .predvolba-moznost {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--t3);
  color: var(--n900);
  cursor: pointer;
}
.kp-form .predvolba-moznost.aktivni {
  background: var(--n50);
}
.kp-form .predvolba-moznost[aria-selected="true"] {
  font-weight: var(--w-med);
  color: var(--p);
}
.kp-form .predvolba-nazev {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kp-form .predvolba-kod {
  margin-left: auto;
  color: var(--n200);
  font-variant-numeric: tabular-nums;
}
.kp-form .predvolba-nic {
  padding: 10px;
  color: var(--n200);
}
@media (forced-colors: active) {
  .kp-form .predvolba-moznost.aktivni {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .kp-form .predvolba-tl,
  .kp-form .predvolba-sipka {
    transition: none;
  }
}

/* Card quote (#37): one sentence from the property's texts, at most two lines
   on the card whatever its length; a longer one ends in an ellipsis. Cards
   without one keep the empty row, so prices stay level across a row. */
.card .ev,
.grid > .card > .bd > .ev {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* Property page gallery (#47, components/GallerySwipe.tsx): a swipe moves the
   photo tiles on, rewriting their data-otevri, so the third tile is hidden on
   phones by its place instead of by data-otevri="2". The tiles leave vertical
   scrolling and zoom to the browser and report sideways swipes; the full-screen
   view, where nothing scrolls, reports swipes down (close) too. */
@media (max-width: 784px) {
  [data-page="detail"] .d-uvod .gal > button[data-otevri]:not(.vic-fotek) {
    display: block;
  }
  [data-page="detail"] .d-uvod .gal > button:nth-child(3):not(.vic-fotek) {
    display: none;
  }
}
[data-page="detail"] .d-uvod .gal > button {
  touch-action: pan-y pinch-zoom;
}
.fgal-scena {
  touch-action: pinch-zoom;
}

/* Links to other sites (#48, components/ExternalLink.tsx and the template
   copies): the new-tab icon after the text, in its colour, and the note for
   screen readers, hidden on screen. */
.ext-ico {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-left: 0.25em;
  vertical-align: -0.08em;
  flex: none;
}
.ext-pozn {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Homepage hero on phones (#45): below 785 px the video is not loaded
   (main.js), and the photo under it was a frame of the video, blurry when
   enlarged. Phones get a sharp portrait photo of the house instead, which
   the page preloads at the same width (scripts/legacy-fixes.mjs). Moved up
   150 px, which frames the house better. */
@media (max-width: 784px) {
  [data-page="home"] .hero .bg {
    --img-hero-poster: url(/assets/img/hero-mobile.webp);
    background-position: center -150px;
  }
}

/* "Video · Uluwatu, Bali" under the hero says just the place where the video
   is not loaded: the same conditions as in main.js. */
@media (max-width: 784px), (prefers-reduced-motion: reduce) {
  [data-page="home"] .hero-misto .hm-video {
    display: none;
  }
}

/* Newsletter strip (s179): main.js hides the form once the server accepted the
   address and shows the "check your e-mail" note in its place, but `.nl-form`
   sets display:grid, which beats the hidden attribute. Never seen before the
   newsletter had a server to answer (#18). */
.nl-form[hidden] {
  display: none;
}

/* Selects on the website (#31, components/Select.tsx): one look for all of
   them, the template's field (`.fvstup`) with a chevron. With a mouse the list
   is the site's own, in the style of the listing's filter popovers; on touch
   screens the native select opens the phone's picker. */
.vyber {
  position: relative;
  min-width: 0;
}
.vyber-pole {
  appearance: none;
  padding-right: 44px;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
div.vyber-pole {
  display: flex;
  align-items: center;
  /* As in the inputs beside it, so the fields are one height. */
  line-height: normal;
  user-select: none;
}
.vyber-pole:hover,
.vyber-pole[aria-expanded="true"] {
  border-color: var(--p);
}
.vyber-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vyber-sipka {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  color: var(--n700);
  pointer-events: none;
  transition: transform 0.2s ease;
}
.vyber-pole[aria-expanded="true"] + .vyber-sipka {
  transform: rotate(180deg);
}
.vyber-seznam {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--z-filtr-pop);
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 6px;
  list-style: none;
  background: var(--plocha);
  border-radius: var(--r);
  box-shadow: var(--stin-popover);
}
.vyber-seznam.vyber-nahoru {
  top: auto;
  bottom: calc(100% + 6px);
}
.vyber-seznam[hidden] {
  display: none;
}
.vyber-volba {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: var(--t3);
  color: var(--n900);
  cursor: pointer;
}
.vyber-volba.vyber-akt {
  background: var(--n50);
}
.vyber-volba[aria-selected="true"] {
  font-weight: var(--w-med);
  color: var(--p);
}
.vyber-volba svg {
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
}
@media (forced-colors: active) {
  .vyber-volba.vyber-akt {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vyber-pole,
  .vyber-sipka {
    transition: none;
  }
}

/* A figure written out in each currency (components/primitives.tsx
   `ByCurrency`, #84): the one the visitor did not choose is not shown. Before
   main.js runs <html> has no data-mena, and koruny are the default. */
html:not([data-mena="eur"]) [data-jen-mena="eur"],
html[data-mena="eur"] [data-jen-mena="czk"] {
  display: none;
}

/* Sticky price bar on a property (#85): its z-index is above the phone menu's,
   so it showed through an open menu with a second "Mám zájem". It steps away
   while the menu, the mega menu (main.js marks <body>) or a dialog is open, and
   comes back when they close. */
body.drawer-otevreno .lista,
body.mega-otevreno .lista,
body:has(dialog[open]) .lista {
  visibility: hidden;
  transform: translateY(100%);
}

/* Currency and language at the foot of phone pages (#86): the phone menu's
   rows (.dr-mena, so main.js treats them the same), repeated where the util
   bar would be on wider screens, recoloured for the dark footer. Every
   [data-mena] button follows the same choice, so both places agree. */
.pata-volby {
  display: none;
}
@media (max-width: 784px) {
  .pata-volby {
    display: block;
    margin-top: 8px;
  }
  .pata-volby .dr-mena {
    border-top-color: var(--tm-linka-2);
  }
  /* The collapsed groups above end with a line of their own. */
  .pata-volby .dr-mena:first-child {
    border-top: 0;
  }
  .pata-volby .dr-lb {
    color: var(--tm-4);
  }
  .pata-volby .dr-mena button.mena {
    border-color: var(--tm-linka-4);
  }
  .pata-volby .dr-mena button.mena [data-m] {
    color: var(--tm-2);
  }
  html:not([data-mena="eur"]) .pata-volby .dr-mena button.mena [data-m="czk"],
  html[data-mena="eur"] .pata-volby .dr-mena button.mena [data-m="eur"] {
    background: var(--tm-1);
    color: var(--p);
  }
  .pata-volby .dr-mena b {
    color: var(--tm-1);
  }
}

/* Comparison on phones (Investiční nemovitosti, #88): the columns become pairs
   of lines that looked alike. The compared side gets a grey tag, Fragmento's
   side its star from the logo and the panel its column has on wide screens;
   each question starts a block of its own. The dark tables (Jak to funguje)
   get the gold star. */
@media (max-width: 784px) {
  .cmp .us::before {
    padding-left: 18px;
    background: url("/assets/brand/favicon.svg") 0 50% / 13px no-repeat;
  }
  .cmp.light .them::before {
    width: fit-content;
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--n100);
    color: var(--n700);
    margin-bottom: 6px;
  }
  .cmp.light .us::before {
    background-image: url("/assets/brand/mark-fragmento.svg");
    margin-bottom: 6px;
  }
  .cmp.light .q {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--s200);
    font-size: var(--t3);
    font-weight: var(--w-bold);
  }
  .cmp.light .hd + .q {
    margin-top: 0;
    padding-top: 6px;
    border-top: 0;
  }
  .cmp.light .them {
    padding: 8px 0 12px;
  }
  .cmp.light .us {
    padding: 12px 14px;
    border-radius: var(--r-sm);
    background: var(--s50);
    box-shadow: inset 3px 0 0 var(--p);
  }
}