/* ============================================================
   REZIDENCE VITA — style.css · v1 (S4 build)
   Filozofie: Tichá linka · tokeny dle KONCEPTY_brand_Vita
   Typografie: Outfit = stand-in za Rework (vyměnit po licenci)
   ============================================================ */

/* Rework (Socio Type) — TRIAL řezy pro build; ⚠ před launchem komerční licence */
@font-face { font-family: "Rework Headline"; src: url("fonts/ReworkHeadlineTRIAL-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rework Headline"; src: url("fonts/ReworkHeadlineTRIAL-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Rework Text"; src: url("fonts/ReworkTextTRIAL-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Rework Text"; src: url("fonts/ReworkTextTRIAL-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }

:root {
  --papir: #FAFAF7;
  --grafit: #1D1D1F;
  --pisek: #E9DFCC;
  --pisek-svetly: #F3EDE0;
  --okr: #D9A441;
  --okr-tmavy: #B3841F;
  --slonova: #F7F3EB;
  --kamen: #8C8C88;
  --linka: #E3E1DA;
  /* barva partnera Stelar Advisory — používat VÝHRADNĚ ve financování (zadání D) */
  --sa-cervena: #D31D2B;
  /* cihlová = prodaný dům. Schválena 5. 8. schválně JINÁ než partnerská červená,
     aby #D31D2B zůstala vyhrazená Stelar Advisory. */
  --cihla: #A6382B;

  --font-display: "Rework Headline", "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Rework Text", "Outfit", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", "SF Mono", Menlo, monospace;

  --w-content: 1180px;
  --w-narrow: 760px;
  --gutter: clamp(20px, 4vw, 48px);
  --sekce-y: clamp(72px, 11vh, 140px);
  --dur: 640ms;
  --ease: cubic-bezier(0.22, 0.8, 0.24, 1);

  /* --- motion tokeny reveal systému VITA v1 (zadání D) ---------------------
     Ladí se JEDNO místo. Rytmus celého webu visí na těchhle pěti hodnotách. */
  --dur-reveal: 700ms;
  --dur-mikro: 400ms;
  --ease-vita: cubic-bezier(0.22, 0.61, 0.21, 1);
  --posun-reveal: 28px;
  --stagger: 80ms;
  /* odstín nepřečteného textu u primitivu data-reveal="text" (schváleno 26. 7.) */
  --text-nepreecteno: #DBD9D1;
}
@media (max-width: 860px) { :root { --posun-reveal: 16px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
/* hidden musí přebít i display z komponent (.podcast je grid) */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-text);
  font-weight: 300;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.65;
  color: var(--grafit);
  background: var(--papir);
  -webkit-font-smoothing: antialiased;
}
/* `height: auto` je tu jako pojistka, ne kosmetika. Obrázky mají v HTML
   atributy width/height kvůli rezervaci místa při načítání (jinak stránka
   při dopočítání povyskočí a rozbije kotvy v menu). Prohlížeč ale ty atributy
   bere jako rozměr: jakmile mu CSS přepíše jen šířku (typicky width: 100 %),
   výška zůstane viset na hodnotě z atributu a fotka se svisle roztáhne.
   Přesně to se 6. 8. stalo fotce v sekci Lokalita — 350×1194 místo 350×261.
   Řešilo se to dosud po jednom (.prehled__posuv, .dum-foto, .dispozice__plan);
   od 6. 8. platí plošně a výjimky si nesou vlastní height ve své třídě. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- typografie ---------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; }
h2 { font-size: clamp(30px, 4.2vw, 54px); max-width: 16em; }
section h2 { display: inline-block; position: relative; padding-bottom: 18px; }
section h2::after {
  content: ""; position: absolute; left: 3px; right: 3px; bottom: 0; height: 8px;
  border-bottom: 1.5px solid var(--okr); border-left: 1.5px solid var(--okr); border-right: 1.5px solid var(--okr);
}
h3 { font-size: clamp(20px, 2vw, 26px); }
p { max-width: 34em; }
.lead { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.55; }

/* mono labely — svět stavebních výkresů */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--kamen);
  display: block;
  margin-bottom: 1.1em;
}

/* ---------- kótovací motiv (signature mikroprvek) ---------- */
.kota {
  position: relative;
  display: inline-block;
  padding-bottom: 14px;
}
.kota::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 7px;
  border-bottom: 1.5px solid var(--okr);
  border-left: 1.5px solid var(--okr);
  border-right: 1.5px solid var(--okr);
}

/* ---------- layout ---------- */
.wrap { max-width: var(--w-content); margin: 0 auto; padding: 0 var(--gutter); }
.wrap--narrow { max-width: var(--w-narrow); }
section { padding: var(--sekce-y) 0; }
.sekce--pisek { background: var(--pisek-svetly); }
.sekce--grafit { background: var(--grafit); color: var(--slonova); }

/* ---------- grafitový předěl ----------------------------------------------
   Jediná tmavá plocha na stránce. Nemá co říct navíc — jen claim, značku
   a kótu. Proto je i užší na výšku než ostatní sekce: má se přes ni projet,
   ne v ní číst. */
.predel { padding: clamp(72px, 12vh, 132px) 0; text-align: center; }
/* na mobilu 44 px (odsouhlaseno), na desktopu roste — v malé velikosti se
   značka v té ploše ztrácela */
.predel__znacka { width: clamp(44px, 7vw, 108px); height: auto; color: var(--okr); display: block; margin: 0 auto; }
/* v logu je typografie slonová a znak okrový — stejný poměr jako v navigaci */
.predel__znacka--logo { width: clamp(150px, 21vw, 330px); color: var(--slonova); }
.predel__znacka--logo .znak { stroke: var(--okr); }
.predel__claim {
  margin-top: clamp(22px, 3vw, 34px);
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(32px, 5.4vw, 76px); line-height: 1.08; letter-spacing: -0.025em;
  color: var(--slonova);
  /* výchozí (nepřečtený) odstín pro barevné vyplňování — na tmavém podkladu
     musí být tlumenější než cíl, ne světlejší */
  --nepreecteno: #4C4C50;
}
/* kóta jako pod nadpisy, jen vystředěná */
.predel__kota {
  display: block; width: min(210px, 42vw); height: 1.5px; margin: clamp(24px, 3vw, 34px) auto 0;
  background: var(--okr); position: relative; transform-origin: center;
}
.predel__kota::before, .predel__kota::after {
  content: ""; position: absolute; top: -5px; width: 1.5px; height: 12px; background: var(--okr);
}
.predel__kota::before { left: 0; }
.predel__kota::after { right: 0; }
/* kreslí se od středu na obě strany a až po dojezdu slov claimu */
html.js .predel__kota[data-reveal="kota"] { transform-origin: center; --zpozdeni: 480ms; }

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(28px, 5vw, 72px); align-items: center; }

/* ---------- navigace ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  color: var(--grafit); background: var(--papir);
  border-bottom: 1px solid var(--linka);
  transition: box-shadow var(--dur);
}
.nav.je-scroll { box-shadow: 0 6px 24px rgba(29,29,31,0.06); }
/* Během scrubu (10-90 % dráhy) navigace ustoupí obrazu: papír zprůhlední,
   pod ním se obraz rozostří. Mimo scrub i na mobilu zůstává lišta plná. */
@media (min-width: 901px) {
  .nav {
    transition: box-shadow var(--dur), opacity 300ms var(--ease),
                background-color 300ms var(--ease), backdrop-filter 300ms var(--ease);
  }
  html.je-nav-tlumena .nav {
    background-color: rgba(250, 250, 247, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0.85;
  }
  html.je-nav-tlumena .nav.je-scroll { box-shadow: none; }
}
.nav__in { max-width: var(--w-content); margin: 0 auto; padding: 12px var(--gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav__logo svg { height: 44px; width: auto; display: block; }
.nav__links { display: flex; gap: clamp(14px, 2vw, 30px); list-style: none; }
.nav__links a {
  text-decoration: none; font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 2px; position: relative;
  /* inline-block je tu kvůli podtržení níž: u řádkového (inline) prvku si
     Chrome pro absolutně umístěné ::after odvozuje vztažný rám z řádkových
     boxů a `width: 100%` mu vyšlo na 2 px — podtržení se ukazovalo jako tečka.
     Safari počítalo celou šířku odkazu, proto se chyba projevila jen v Chromu. */
  display: inline-block;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1.5px; width: 100%;
  background: var(--okr); transform: scaleX(0); transform-origin: left;
  transition: transform 320ms var(--ease);
}
.nav__links a:hover::after, .nav__links a:focus-visible::after { transform: scaleX(1); }
.nav__cta { font-size: 14px; padding: 10px 20px; white-space: nowrap; flex: none; }
.nav__tel { font-family: var(--font-mono); font-size: 13px; color: var(--kamen); text-decoration: none; white-space: nowrap; }
@media (max-width: 1240px) { .nav__tel { display: none; } }
@media (max-width: 900px) { .nav__links { display: none; } }

/* ---------- hero: filmový pás (media celá šířka, text v pásu pod ní) ----------
   Od S3 je .hero pouze běhová dráha scrubu; vzhled drží .hero__sticky, což je
   1:1 to, co bývalo .hero. Pozor: globální `section { padding: var(--sekce-y) 0 }`
   se přebíjí právě tady — .hero musí zůstat bez paddingu. */
.hero { position: relative; padding: 0; }
/* výšku okna dodá JS (--vyska-okna) — na iOS se 100svh a skutečná viditelná
   plocha liší podle toho, jestli je vysunutá lišta Safari, a vznikal pod hero
   bílý pruh. 100svh zůstává jako záloha, když JS neběží. */
.hero__sticky { position: relative; height: var(--vyska-okna, 100svh); min-height: 620px; display: flex; flex-direction: column; padding: 76px 0 0; overflow: hidden; }
.hero__media { position: relative; overflow: hidden; flex: 1; min-height: 320px; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__pas {
  flex: none; display: flex; align-items: center; gap: clamp(22px, 3vw, 52px);
  min-height: 112px; padding: 16px var(--gutter);
  background: var(--papir); border-top: 1px solid var(--linka);
}
.hero__claim { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 2.5vw, 42px); line-height: 1.05; letter-spacing: -0.02em; color: var(--grafit); position: relative; padding-bottom: 13px; white-space: nowrap; flex: none; }
.hero__claim::after {
  content: ""; position: absolute; left: 3px; bottom: 0; width: min(100%, 9.2em); height: 7px;
  border-bottom: 1.5px solid var(--okr); border-left: 1.5px solid var(--okr); border-right: 1.5px solid var(--okr);
}
.hero__sub { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--kamen); line-height: 1.9; white-space: nowrap; flex: none; }
.hero__cta { margin-left: auto; display: flex; gap: 14px; flex-wrap: nowrap; flex: none; }
.hero__cta .btn { white-space: nowrap; padding: 12px 22px; font-size: 14.5px; }
.hero__scroll {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em; color: var(--kamen);
  text-transform: uppercase; text-decoration: none; margin-left: clamp(10px, 2vw, 36px); white-space: nowrap;
}
@media (max-width: 1560px) { .hero__scroll { display: none; } }
@media (max-width: 1280px) {
  .hero__pas { flex-wrap: wrap; row-gap: 18px; padding: 26px var(--gutter) 30px; min-height: 0; }
  .hero__cta { margin-left: 0; }
}
@media (max-width: 860px) {
  .hero__sticky { padding-top: 64px; }
  /* media si bere zbytek výšky (dřív pevných 48svh — zakrývalo to moc domů
     a při zapnutí scrubu se rám měnil, takže obraz poskočil) */
  .hero__media { flex: 1; height: auto; min-height: 300px; }
  /* místo pro spodní lištu si drží PÁS, ne celý hero — obraz tak po odjezdu
     pásu dojede až pod lištu a nezůstane nad ní bílý pruh.
     Sazba pásu je stažená (varianta B, schváleno 26. 7.): pás držel 281 px z 844,
     tedy třetinu displeje, a ořezával úvodní fotku. Mění se jen velikosti a mezery,
     text zůstává beze změny včetně zalomení. */
  .hero__pas {
    flex-direction: column; align-items: flex-start; min-height: 0;
    gap: 9px;
    padding: 14px var(--gutter) calc(14px + var(--lista-h, 0px));
  }
  .hero__claim { white-space: normal; font-size: 24px; padding-bottom: 9px; }
  .hero__claim::after { height: 5px; }
  .hero__sub { font-size: 10px; line-height: 1.55; }
  /* tlačítka na plnou šířku ve dvou sloupcích — ušetří řádek a drží pohodlný
     terč pro palec (~44 px) */
  .hero__cta { gap: 8px; width: 100%; }
  .hero__cta .btn { flex: 1; text-align: center; padding: 10px 14px; font-size: 13px; }
}

/* ---------- S3: scroll-scrub sekvence ----------
   Vrstvy v .hero__media: <img> ostrá statika (klidový stav, LCP)
                          → <canvas> sekvence (prolne se přes statiku)
                          → .hero__zavoj papírový závoj (prolnutí do sekce Fakta).
   Celá mechanika se zapíná až třídou .je-scrub na <html>, kterou nasadí JS po
   načtení sekvence. Bez JS, na mobilu, při prefers-reduced-motion i při úsporném
   režimu dat zůstává hero přesně takový, jaký byl — statický, bez stahování sekvence. */
.hero__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity 560ms var(--ease); pointer-events: none;
}
.hero__canvas.je-videt { opacity: 1; }
.hero__zavoj {
  position: absolute; inset: 0; background: var(--papir);
  opacity: 0; pointer-events: none;
}
html.je-scrub .hero { height: calc(100svh + var(--scrub-draha, 200svh)); }
html.je-scrub .hero__sticky { position: sticky; top: 0; }
/* Obraz má v režimu scrubu PEVNOU výšku (celá plocha pod navigací) a je ukotvený
   nahoře. Papírový pás ho zespodu jen zakrývá — jeho odjezdem se odkryje to, co
   bylo pod ním. Kdyby obraz místo toho vyplňoval rostoucí rám, roztahoval by se
   a domy by se deformovaly. */
/* Geometrie obrazu je STEJNÁ ve všech fázích — i v tom krátkém okamžiku mezi
   načtením prvního snímku (plátno se prolne) a zapnutím scrubu. Kdyby se lišila,
   plátno by se do nižšího rámu svisle zmáčklo a při zapnutí scrubu by obraz
   „poskočil". Fallback = přesně ta výška, kterou pak dopočítá JS. */
.hero__media > picture > img,
.hero__canvas {
  top: var(--media-posun, 0px); bottom: auto;
  /* záloha musí vycházet ze STEJNÉ výšky okna jako .hero__sticky — jinak by se
     obraz v okamžiku, kdy JS dopočítá --media-plna, o ten rozdíl přeskládal */
  height: var(--media-plna, calc(var(--vyska-okna, 100svh) - 76px));
  /* statika i plátno musí ořezávat od STEJNÉ hrany. Plátno kreslí ukotvené
     nahoru; kdyby statika ořezávala od středu (výchozí object-position), na
     nízkém okně by se obraz při prolnutí svisle posunul. */
  object-position: center top;
}
/* 0–10 % dráhy: pás odjede dolů (uvolní výšku, media doroste přes celou plochu) */
html.je-scrub .hero__pas {
  margin-bottom: calc(-1 * var(--pas-odjezd, 0) * var(--pas-vyska, 112px));
  opacity: calc(1 - var(--pas-odjezd, 0));
}
/* 90–100 % dráhy: obraz ustoupí do pozadí (závoj jen částečný — plná bílá by
   udělala prázdnou obrazovku) a přes jeho spodek najede sekce Fakta. */
html.je-scrub .hero__zavoj { opacity: var(--zavoj, 0); }
html.je-scrub #fakta {
  position: relative; z-index: 5;
  background: var(--papir);
  margin-top: calc(-1 * var(--prekryv, 0px));
}

/* --- mobilní scrub „light" ---------------------------------------------------
   Stejná choreografie, jen svislá sada snímků (9:19) a kratší dráha.
   Klíčové: obraz má STEJNOU geometrii před načtením sekvence i po něm — pevnou
   výšku celé plochy pod navigací a ukotvení nahoru. Kdyby se lišila, obraz by
   při zapnutí scrubu změnil velikost a poskočil. */
@media (max-width: 900px) {
  html.je-scrub { --scrub-draha: 150svh; }
  .hero__media > picture > img,
  .hero__canvas { height: var(--media-plna, calc(var(--vyska-okna, 100svh) - 64px - var(--lista-h, 0px))); }
}
@media (prefers-reduced-motion: reduce) {
  html.je-scrub .hero { height: 100svh; }
  html.je-scrub .hero__pas { margin-bottom: 0; opacity: 1; }
}

/* ---------- tlačítka: ostré rohy + wipe zleva --------------------------------
   JEDNO pravidlo pro všechna tlačítka včetně CTA v navigaci: výplň najede
   zleva za 340 ms, vždy do „opačné" barvy dvojice okr/grafit. Dřív měla tři
   tlačítka vedle sebe tři různá chování — plné se přebarvovalo do tmavší
   okrové, obrysové do okrové a CTA v navigaci skokem do černé. */
.btn, .nav__cta {
  display: inline-block; text-decoration: none; font-weight: 400;
  border-radius: 3px; border: 1.5px solid transparent;
  position: relative; overflow: hidden; z-index: 1;
  transition: transform 240ms var(--ease), color 240ms var(--ease),
              border-color 240ms var(--ease);
}
.btn { font-size: 15.5px; padding: 14px 28px; }
.btn::before, .nav__cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: left;
  transition: transform 340ms var(--ease);
}
.btn:hover::before, .btn:focus-visible::before,
.nav__cta:hover::before, .nav__cta:focus-visible::before { transform: scaleX(1); }
.btn:active, .nav__cta:active { transform: scale(0.98); }

/* primární: v klidu okrové, najetím se zaplní grafitem */
.btn--plna { background: var(--okr); color: var(--grafit); }
.btn--plna::before { background: var(--grafit); }
.btn--plna:hover, .btn--plna:focus-visible { color: var(--papir); }

/* sekundární a CTA v navigaci: v klidu obrys, najetím se zaplní okrem */
.btn--tmavy, .nav__cta { border-color: var(--grafit); color: var(--grafit); background: transparent; }
.btn--tmavy::before, .nav__cta::before { background: var(--okr); }
.btn--tmavy:hover, .btn--tmavy:focus-visible,
.nav__cta:hover, .nav__cta:focus-visible { color: var(--grafit); border-color: var(--okr); }

/* na tmavém podkladu (hero přes fotku) */
.btn--obrys { border-color: rgba(255,255,255,0.85); color: #fff; }
.btn--obrys::before { background: var(--okr); }
.btn--obrys:hover, .btn--obrys:focus-visible { color: var(--grafit); border-color: var(--okr); }

/* ---------- fakta / čísla ---------- */
.fakta { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px) clamp(20px, 3vw, 40px); }
@media (max-width: 760px) { .fakta { grid-template-columns: repeat(2, 1fr); } }
.faktum { text-align: left; }
/* Náběh sekce Fakta (spec B): každé faktum přijíždí zleva, kóta se pak
   „nakreslí" od levého okraje. Výchozí stav drží skript — bez JS zůstane
   všechno rovnou na místě (třída .je-rizeno se nasadí až v okamžiku,
   kdy skript převezme řízení). */
.fakta.je-rizeno .faktum {
  opacity: 0; transform: translateX(-24px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.fakta.je-rizeno .faktum.je-tady { opacity: 1; transform: none; }
.fakta.je-rizeno .kota::after {
  transform: scaleX(0); transform-origin: left;
  transition: transform 400ms var(--ease);
}
.fakta.je-rizeno .kota.je-nakreslena::after { transform: scaleX(1); }
.faktum__cislo {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4vw, 56px); line-height: 1; letter-spacing: -0.02em;
  white-space: nowrap;
}
.faktum__popis { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kamen); margin-top: 12px; max-width: none; }
.srovnani { margin-top: clamp(40px, 6vw, 72px); border-top: 1px solid var(--linka); padding-top: 34px; }
.srovnani strong { font-weight: 500; }

/* ---------- domy ---------- */
.domy-plan { position: relative; border-radius: 4px; overflow: hidden; }
.domy-plan img { width: 100%; }
.domy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-top: clamp(32px, 5vw, 56px); }
.dum {
  background: var(--papir); border: 1px solid var(--linka); border-radius: 3px;
  padding: 22px 22px 18px; cursor: pointer; position: relative;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms;
}
.dum:hover, .dum:focus-within { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(29,29,31,0.08); border-color: var(--okr); }
/* Karta je od 4. 8. odkaz (<a>), ne <article> — dědila by podtržení a modrou
   barvu odkazu, proto se obojí ruší a display se vrací na block. */
.dum { display: block; text-decoration: none; color: inherit; }
.dum__vice { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--kamen); display: block; margin-top: 14px;
  transition: color var(--dur-mikro) var(--ease-vita); }
.dum:hover .dum__vice, .dum:focus-visible .dum__vice { color: var(--okr-tmavy); }
.prehled__akce { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.prehled__akce .prehled__cta { margin-top: 0; flex: 1 1 auto; text-align: center; }
.dum__oznaceni { font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.2em; color: var(--kamen); }
.dum__typ { font-size: 19px; font-weight: 400; margin-top: 6px; }
.dum__parametry { font-size: 14px; color: var(--kamen); margin-top: 10px; line-height: 1.75; }
.dum__cena { font-family: var(--font-display); font-size: 21px; margin-top: 14px; display: inline-block; position: relative; padding-bottom: 12px; }
.dum__cena::after {
  content: ""; position: absolute; left: 1px; right: 1px; bottom: 0; height: 6px;
  border-bottom: 1.2px solid var(--okr); border-left: 1.2px solid var(--okr); border-right: 1.2px solid var(--okr);
}
.dum__stav { position: absolute; top: 20px; right: 20px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 2px; background: transparent; border: 1px solid currentColor; }
.stav--volny { color: #3E5C34; }
.stav--rezervace { color: var(--okr-tmavy); }
.stav--prodano { color: #FFF; background: var(--cihla); border-color: var(--cihla); }
/* Plný odznak potřebuje jiné vnitřní okraje než rámeček:
   - tečka odpadá, na plné ploše nemá co rozlišovat
   - pravý okraj je o ~1,5 px užší než levý, protože letter-spacing přidává
     mezeru ZA poslední písmeno; bez téhle korekce text opticky sedí vlevo */
.dum__stav.stav--prodano { padding: 4px 8px 4px 10px; }
.dum-hlava__stav.stav--prodano { padding: 5px 10px 5px 12px; border-radius: 2px; }
.dum-hlava__stav.stav--prodano::before { content: none; }
.prehled__stav.je-prodano { padding: 3px 7px 3px 9px; }
/* Prodaný dům: cena se nesází jako živá částka. Text „prodáno" má tvar ceny,
   ale barvu kamene — nemá lákat, jen doříct, proč tam žádné číslo není. */
.dum__cena--prodano, .dum-cena--prodano { color: var(--kamen); }

/* ---------- proces / timeline ---------- */
.proces { counter-reset: krok; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; }
.krok { counter-increment: krok; border-top: 1.5px solid var(--linka); padding-top: 18px; position: relative; }
.krok::before {
  content: counter(krok, decimal-leading-zero);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: 0.12em; color: var(--okr);
}
.krok h3 { font-size: 17.5px; margin-top: 8px; }
.krok p { font-size: 14.5px; color: var(--kamen); margin-top: 6px; }

/* ---------- standard ---------- */
.standard-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.polozka {
  background: var(--papir); border: 1px solid var(--linka); border-radius: 3px; padding: 22px;
  transition: border-color 240ms, background 240ms;
}
.polozka:hover { border-color: var(--okr); }
.polozka h3 { font-size: 17px; }
.polozka p { font-size: 14.5px; color: var(--kamen); margin-top: 8px; }

/* ---------- galerie ---------- */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 240px; gap: 12px; }
.galerie a { border-radius: 3px; overflow: hidden; display: block; position: relative; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.galerie a:hover img, .galerie a:focus-visible img { transform: scale(1.045); }
.galerie a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 640px) { .galerie a:nth-child(1) { grid-column: span 1; grid-row: span 1; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(29,29,31,0.94); display: none; align-items: center; justify-content: center; padding: 4vmin; }
.lightbox.otevreny { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 4px; }
.lightbox__zavrit { position: absolute; top: 22px; right: 26px; background: none; border: 0; color: #fff; font-size: 30px; cursor: pointer; line-height: 1; }

/* ---------- lokalita: místa + podcast ---------- */
.mista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.misto {
  background: var(--papir); border: 1px solid var(--linka); border-radius: 3px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
  transition: border-color 240ms;
}
.misto:hover { border-color: var(--okr); }
.misto__kat { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--kamen); }
.misto strong { font-weight: 400; font-size: 15.5px; }
/* Do 31. 7. tu stálo hodnocení (4,8 ★). Klient chtěl místo toho vzdálenosti —
   dojezd se počítá z Topolové, auto první, pěšky druhé (work/vzdalenosti.py). */
.misto__dojezd { font-family: var(--font-mono); font-size: 12.5px; color: var(--okr-tmavy); }
.podcast {
  margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center;
  background: var(--papir); border: 1px solid var(--linka); border-radius: 4px; padding: clamp(22px, 4vw, 40px);
}
.podcast__prehravac {
  border: 1.5px dashed var(--linka); border-radius: 3px; padding: 34px 20px; text-align: center;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--kamen);
}
@media (max-width: 760px) { .podcast { grid-template-columns: 1fr; } }

/* ---------- kalkulačka ---------- */
.kalkulacka { background: var(--pisek-svetly); border-radius: 4px; padding: clamp(24px, 4vw, 40px); }
.kalkulacka__radek { display: grid; grid-template-columns: 1fr; gap: 6px; margin-bottom: 22px; }
.kalkulacka__radek label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kamen); }
.kalkulacka__radek output { font-size: 17px; font-weight: 400; }
.kalkulacka input[type="range"] { width: 100%; accent-color: var(--okr); }
.kalkulacka__vysledek { border-top: 1.5px solid var(--linka); padding-top: 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.kalkulacka__vysledek span { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--kamen); }
.kalkulacka__vysledek strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3vw, 40px); }
.kalkulacka__pozn { font-size: 12.5px; color: var(--kamen); margin-top: 14px; max-width: none; }

/* ---------- aktuality ---------- */
.aktuality { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.aktualita { background: var(--papir); border: 1px solid var(--linka); border-radius: 3px; padding: 24px; }
.aktualita__datum { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--okr-tmavy); }
.aktualita h3 { font-size: 18px; margin-top: 8px; }
.aktualita p { font-size: 14.5px; color: var(--kamen); margin-top: 8px; }

/* ---------- kontakt ---------- */
/* Varianta 2 (vybráno 27. 7.): portrét bez rámu stojí přímo v sekci a opírá se
   o okrovou kótu — stejné gesto jako linka pod nadpisy. Sloupec s ním je stejně
   vysoký jako formulář vedle, takže pod ním nezůstává prázdno. */
.kontakt__mrizka {
  display: grid; grid-template-columns: 300px 1fr;
  gap: clamp(30px, 4vw, 64px); align-items: start; margin-top: 38px;
}
.kontakt__portret { position: relative; }
.kontakt__portret::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1.5px; background: var(--okr);
}
.kontakt__portret img { width: 100%; height: auto; display: block; }
.kontakt__jmeno {
  margin-top: 18px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--kamen); line-height: 1.9;
}
.kontakt__jmeno b { display: block; color: var(--grafit); font-weight: 400; letter-spacing: 0.18em; }
.kontakt__text { margin-top: 16px; color: var(--kamen); }
.kontakt__spojeni { margin-top: 18px; font-family: var(--font-mono); font-size: 14.5px; line-height: 2; }
@media (max-width: 860px) {
  .kontakt__mrizka { grid-template-columns: 1fr; gap: 34px; margin-top: 30px; }
  .kontakt__portret { max-width: 220px; }
  .kontakt__spojeni { font-size: 13.5px; }
}
.form { display: grid; gap: 14px; }
.form input, .form textarea, .form select {
  font: inherit; font-size: 15.5px; width: 100%; padding: 14px 16px;
  border: 1px solid var(--linka); border-radius: 3px; background: var(--papir); color: var(--grafit);
}
.form input:focus-visible, .form textarea:focus-visible, .form select:focus-visible {
  outline: none; border-color: var(--okr); box-shadow: 0 0 0 3px rgba(217,164,65,0.22);
}
.form label { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--kamen); }
/* souhlas se zpracováním údajů je věta, ne popisek pole — .form label ho
   předtím hnalo do verzálek v monu a nedal se přečíst */
.form label.gdpr, .gdpr {
  display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px;
  color: var(--kamen); font-family: var(--font-text);
  text-transform: none; letter-spacing: 0; line-height: 1.6;
}
.gdpr input { width: auto; margin-top: 3px; accent-color: var(--okr); }
/* vlastní šipka, aby select nevypadal jako systémový prvek vedle našich polí */
.form select {
  appearance: none; padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%238C8C88' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}

/* ---------- patička ---------- */
/* Patička byla po doplnění log příliš vysoká — značka, prodávající a partneři
   stáli pod sebou ve třech blocích. Teď jsou značka a prodávající na jedné
   řadě a partneři na jedné lince pod nimi. */
.paticka { background: var(--grafit); color: var(--slonova); padding: clamp(40px, 5vw, 60px) 0 28px; }
.paticka a { color: inherit; }
/* Dvojice značek. Obě strany mají shodnou stavbu: popisek → schránka o pevné
   výšce → logo posazené na její dolní hranu. Popisky proto leží na jedné lince
   a loga na jedné účaří bez ohledu na to, že jedno je svislý lockup a druhé
   vodorovný logotyp. Nestojí u protilehlých okrajů, ale vedle sebe oddělené
   vlasovou linkou — patří k sobě. */
.paticka__hlava { display: flex; align-items: flex-start; flex-wrap: wrap; }
.paticka__blok { display: flex; flex-direction: column; gap: 16px; }
.paticka__blok--delene {
  margin-left: clamp(28px, 4vw, 56px);
  padding-left: clamp(28px, 4vw, 56px);
  border-left: 1px solid rgba(247, 243, 235, 0.16);
}
/* Schránka o pevné výšce drží obě značky. Zarovnávají se na STŘED, ne na dolní
   hranu: Vita je svislý lockup ze tří dílů, Stelar Reality vodorovný logotyp ze
   dvou — na společné účaří by se posadit nedaly, aniž by jedna vybočila.
   Střed schránky je zároveň středem dělicí linky, takže dvojice drží pohromadě. */
.paticka__znak { height: 62px; display: flex; align-items: center; }
.paticka__znak svg { height: 62px; width: auto; display: block; }
/* Změřeno na vykresleném snímku: verzálky VITA 13,5 px. Logotyp Stelar Reality
   má verzálky v polovině výšky, 27 px je tedy dorovná na stejnou velikost. */
.paticka__znak img { height: 27px; width: auto; display: block; }
.paticka__claim { margin-top: 26px; color: rgba(247, 243, 235, 0.75); }
/* Změřeno: verzálky slova VITA mají při výšce značky 62 px 14,0 px; logotyp
   Stelar Reality má verzálky přesně v polovině své výšky, takže 29 px je
   dorovná. Partnerská loga jdou ještě níž — nesmí přebít prodávajícího. */
.partneri__loga .logo-slot--plny img { height: 26px; }
@media (max-width: 620px) {
  /* Na telefonu se dvojice nerozpadá pod sebe — vejde se vedle sebe, jen
     o kus menší. Rozpad by rozbil to hlavní, co ta dvojice říká: projekt
     a prodávající patří k sobě. Poměr verzálek zůstává (52/62 = 24/29). */
  .paticka__znak, .paticka__znak svg { height: 52px; }
  .paticka__znak img { height: 23px; }
  .paticka__blok--delene { margin-left: 20px; padding-left: 20px; }
  .paticka__blok { gap: 12px; }
  /* Meta řádek se na telefonu lámal doprostřed vět a copyright skákal vedle
     odkazu na ochranu údajů — na úzkém displeji patří pod sebe. */
  .paticka__meta { flex-direction: column; gap: 0; }
}
.paticka__meta { font-size: 13px; color: rgba(247,243,235,0.55); margin-top: 30px; display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- loga partnerů (zadání C, 31. 7.) --------------------------------
   Loga zatím nemáme. Sloty proto stojí prázdné v proporcích vodorovných
   logotypů (velký 3,75 : 1, malý 3,4 : 1). Až soubory dorazí, vloží se dovnitř
   <img> a smaže se <span class="logo-slot__nazev"> — nic jiného se nemění.
   Patička je grafitová, takže sem patří SVĚTLÉ varianty log; tmavé by zmizely.
   Na světlém pozadí (financování) slouží varianta .logo-slot--svetly. */
.partneri { margin-top: clamp(28px, 3.5vw, 40px); }
.partneri__popis {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.24em;
  text-transform: uppercase; color: rgba(247,243,235,0.42);
  display: block; margin-bottom: 14px;
}
.partneri__rada { margin-top: 32px; }
.partneri__loga { display: flex; gap: 14px; flex-wrap: wrap; }
.logo-slot {
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(247,243,235,0.26); border-radius: 3px;
  padding: 8px 14px; text-decoration: none;
  transition: border-color 260ms var(--ease-vita);
}
.logo-slot img { max-height: 100%; max-width: 100%; width: auto; }
.logo-slot__nazev {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(247,243,235,0.5); text-align: center;
}
a.logo-slot:hover, a.logo-slot:focus-visible { border-color: rgba(217, 164, 65, 0.8); }
.logo-slot--velky { width: 240px; height: 64px; }
.logo-slot--maly  { width: 150px; height: 44px; }
/* Slot s hotovým logem už nepotřebuje čárkovaný rám ani vnitřní okraj —
   ten je jen značka prázdného místa. Rozměry slotu zůstávají stejné, aby se
   layout po doplnění loga nepřeskládal. */
.logo-slot--plny { border: none; padding: 0; }
.logo-slot--plny img { max-height: 100%; max-width: 100%; }
.logo-slot--svetly { border-color: var(--linka); }
.logo-slot--svetly .logo-slot__nazev { color: var(--kamen); }

/* ---------- podpis Stelar Advisory ve financování (zadání D, 31. 7.) --------
   Červená #D31D2B je barva partnera, ne Vity. Smí se objevit VÝHRADNĚ ve
   financování, a jen jednou: jako kóta pod nadpisem sekce. Tečka u eyebrow tu
   byla do 3. 8. — vypadala jako překlep, protože v žádné jiné sekci nic
   takového není a k mono textu nešla vycentrovat. */
#financovani h2::after,
.fin-podpis h1::after,
.fin-podpis h2::after { border-color: var(--sa-cervena); }
.fin-partner { margin-top: 34px; }
.fin-partner .partneri__popis { color: var(--kamen); }

/* ---------- mobilní sticky lišta ---------- */
.mobil-lista {
  position: fixed; inset: auto 0 0 0; z-index: 95; display: none;
  background: rgba(29,29,31,0.94); backdrop-filter: blur(10px);
}
.mobil-lista a { flex: 1; text-align: center; padding: 15px 4px; color: var(--slonova); text-decoration: none; font-size: 13.5px; }
.mobil-lista a + a { border-left: 1px solid rgba(247,243,235,0.14); }
/* --lista-h drží výšku spodní lišty i pro hero, aby pod ní nemizela tlačítka */
@media (max-width: 760px) {
  :root { --lista-h: 52px; }
  .mobil-lista { display: flex; }
  body { padding-bottom: var(--lista-h); }
}

/* ---------- REVEAL SYSTÉM VITA v1 (zadání D) --------------------------------
   Výchozí (skrytý) stav se nasazuje jen pod html.js — bez JavaScriptu zůstane
   stránka celá viditelná, nikdy z ní nesmí zmizet obsah. */

/* 1 · up — opacity + posun zdola. Výchozí pro texty, karty, tlačítka. */
html.js [data-reveal="up"] {
  opacity: 0;
  transform: translateY(var(--posun-reveal));
  transition: opacity var(--dur-reveal) var(--ease-vita),
              transform var(--dur-reveal) var(--ease-vita);
  transition-delay: var(--zpozdeni, 0ms);
}
html.js [data-reveal="up"].je-videt { opacity: 1; transform: none; }

/* 2 · slova — maskovaný nástup nadpisu po slovech.
   Vnější span ořezává, vnitřní vyjíždí zdola. Odsazení dole je kvůli
   dotahům (y, j) — bez něj by je ořez usekl. */
html.js [data-reveal="slova"] .slovo {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: 0.16em; margin-bottom: -0.16em;
}
html.js [data-reveal="slova"] .slovo__i {
  display: inline-block; transform: translateY(115%);
  transition: transform var(--dur-reveal) var(--ease-vita);
}
html.js [data-reveal="slova"].je-videt .slovo__i { transform: none; }
/* kóta pod nadpisem se dokreslí až po posledním slově */
html.js section h2[data-reveal="slova"]::after {
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mikro) var(--ease-vita);
  transition-delay: var(--zpozdeni-kota, 300ms);
}
html.js section h2[data-reveal="slova"].je-videt::after { transform: none; }

/* 3 · obraz — médium se odkryje zdola a usadí se z mírného přiblížení */
html.js [data-reveal="obraz"] {
  clip-path: inset(0 0 14% 0);
  transition: clip-path 900ms var(--ease-vita);
}
html.js [data-reveal="obraz"].je-videt { clip-path: inset(0 0 0 0); }
html.js [data-reveal="obraz"] img {
  transform: scale(1.06);
  transition: transform 900ms var(--ease-vita);
}
html.js [data-reveal="obraz"].je-videt img { transform: none; }
/* po usazení přebírá transform mikro-parallax (jen desktop) — přechod se
   zkrátí, aby obraz při scrollu neplaval o vteřinu pozadu */
html.js [data-reveal="obraz"].je-usazeno img { transition: transform 120ms linear; }

/* 4 · kota — linka se nakreslí zleva */
html.js [data-reveal="kota"] {
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mikro) var(--ease-vita);
  transition-delay: var(--zpozdeni, 0ms);
}
html.js [data-reveal="kota"].je-videt { transform: none; }

/* 5 · cislo — nástup jako up, count-up a kótu řídí skript */
html.js [data-reveal="cislo"] {
  opacity: 0; transform: translateY(var(--posun-reveal));
  transition: opacity var(--dur-reveal) var(--ease-vita),
              transform var(--dur-reveal) var(--ease-vita);
  transition-delay: var(--zpozdeni, 0ms);
}
html.js [data-reveal="cislo"].je-videt { opacity: 1; transform: none; }
html.js [data-reveal="cislo"] .kota::after {
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-mikro) var(--ease-vita);
}
html.js [data-reveal="cislo"] .kota.je-nakreslena::after { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .galerie img, .dum, .btn { transition: none !important; }
  /* reveal systém: zůstane jen prolnutí, žádné posuny, ořezy ani kreslení */
  html.js [data-reveal] { transform: none !important; clip-path: none !important; }
  html.js [data-reveal="up"], html.js [data-reveal="cislo"] { opacity: 1; }
  html.js [data-reveal="obraz"] img { transform: none !important; }
  html.js section h2[data-reveal="slova"]::after { transform: none !important; }
  /* Fakta: jen prolnutí, žádné posuny ani kreslení kóty */
  .fakta.je-rizeno .faktum { transform: none !important; transition: opacity 400ms linear; }
  .fakta.je-rizeno .kota::after { transform: none !important; transition: none !important; }
}

/* ---------- GALERIE „zoom parallax" -----------------------------------------
   Sekci skládá assets/galerie.js z existující mřížky .galerie. Vzor: komponenta
   ZoomParallax z 21st.dev, přepsaná bez Reactu a Tailwindu.
   Na mobilu, při prefers-reduced-motion a v úsporném režimu se nic nestaví
   a zůstává původní mřížka. */
.galerie--skryta { display: none; }

.zoom {
  position: relative; height: 300vh; margin-top: 44px;
  /* průlom z .wrap na celou šířku okna — rozměry vrstev jsou v jednotkách vw,
     v obsahovém sloupci by fotky nikdy nevyplnily obraz */
  width: 100vw; margin-left: calc(50% - 50vw);
}
.zoom__ram {
  /* rám začíná pod navigací, aby do ní horní vrstvy nezajížděly */
  position: sticky; top: 76px; height: calc(100svh - 76px); overflow: hidden;
  background: var(--papir);
  /* přepočet rozměrů vrstev se drží uvnitř rámu a nezdržuje zbytek stránky */
  contain: strict;
}
.zoom__vrstva {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* Vrstvy jsou přes celý rám a leží na sobě — bez tohohle by ta poslední
     odchytávala kliknutí za všechny ostatní a klikatelná by byla jen jedna. */
  pointer-events: none;
}
.zoom__okno {
  position: relative; display: block; overflow: hidden;
  /* vrstva je flex kontejner — bez tohohle by se okno při zvětšení
     scvrklo zpět na šířku rámu a zoom by se zastavil na 100 vw */
  flex: 0 0 auto;
  border-radius: 3px;                 /* výkresová estetika — ostré rohy */
  box-shadow: 0 18px 60px rgba(29, 29, 31, 0.10);
  pointer-events: auto;
  cursor: zoom-in;
  transition: box-shadow 320ms var(--ease);
}
.zoom__okno:hover, .zoom__okno:focus-visible {
  box-shadow: 0 22px 70px rgba(29, 29, 31, 0.18);
  outline: none;
}
.zoom__okno::after {
  content: ""; position: absolute; inset: 0;
  border: 1.5px solid transparent; border-radius: 3px;
  transition: border-color 320ms var(--ease);
}
.zoom__okno:hover::after, .zoom__okno:focus-visible::after { border-color: var(--okr); }
.zoom__okno img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* prostřední fotka je ta, do které se nakonec vjede — bez stínu, ať se
   při plné velikosti neprozradí, že jde o výřez */
.zoom__vrstva:first-child .zoom__okno { box-shadow: none; }
.zoom__popis {
  position: absolute; left: var(--gutter); bottom: 26px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.28em;
  color: var(--kamen); pointer-events: none;
  transition: opacity 240ms linear;
}
.zoom__popis::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 6px;
  border-bottom: 1.5px solid var(--okr);
  border-left: 1.5px solid var(--okr);
  border-right: 1.5px solid var(--okr);
}
/* sekce galerie nesmí mít spodní odsazení — dráha zoomu ho supluje sama */
html.je-zoom-galerie #galerie { padding-bottom: 0; }

/* ---------- hover: jednotný rukopis pro blokové prvky ------------------------
   Audit (26. 7.) ukázal, že tlačítka, karty domů, standardy a místa na najetí
   reagují, ale kroky procesu, aktuality, kroky financování a fakta historie ne.
   Sjednoceno: prvek s vlasovou linkou dostane okrovou linku nakreslenou zleva
   (stejné gesto jako podtržení v navigaci a kóty), orámovaný prvek okrový rám.
   Nikdy na dotykových zařízeních — tam by hover zůstal „zaseknutý". */
@media (hover: hover) and (pointer: fine) {
  .krok, .fin-krok, .historie-fakt { position: relative; transition: color 260ms var(--ease); }
  .krok::after, .fin-krok::after, .historie-fakt::after {
    content: ""; position: absolute; left: 0; right: 0; height: 1.5px;
    background: var(--okr); transform: scaleX(0); transform-origin: left;
    transition: transform 340ms var(--ease); pointer-events: none;
  }
  .krok::after, .historie-fakt::after { top: -1.5px; }   /* linka je nahoře */
  .fin-krok::after { bottom: -1px; }                     /* tady dole */
  .krok:hover::after, .fin-krok:hover::after, .historie-fakt:hover::after { transform: scaleX(1); }
  .krok:hover p, .fin-krok:hover p, .historie-fakt:hover p { color: var(--grafit); }

  .aktualita { transition: border-color 260ms var(--ease), transform 260ms var(--ease),
                           box-shadow 260ms var(--ease); }
  .aktualita:hover, .aktualita:focus-within {
    border-color: var(--okr); transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(29, 29, 31, 0.07);
  }
  .polozka, .misto { transition: border-color 260ms var(--ease); }

  /* odkazy uvnitř textu — podtržení najíždí zleva (princip z TREF) */
  p a:not(.btn), .aktualita a:not(.btn) {
    text-decoration: none; position: relative;
    background-image: linear-gradient(var(--okr), var(--okr));
    background-repeat: no-repeat; background-position: 0 100%;
    background-size: 0% 1.5px;
    transition: background-size 320ms var(--ease);
  }
  p a:not(.btn):hover, p a:not(.btn):focus-visible,
  .aktualita a:not(.btn):hover { background-size: 100% 1.5px; }
}

/* ---------- sekce Interiéry — varianta B (schváleno 26. 7.) ------------------
   Sekci nese citace autorky vysázená displayem, vedle ní portrét týmu.
   Popisný text ustupuje do kamenné šedé, render je až pod tím jako důkaz.
   Texty se nemění, mění se jen pořadí a váha. */
.interier__mrizka {
  display: grid; grid-template-columns: 320px 1fr;
  gap: clamp(34px, 5vw, 72px); align-items: start; margin-top: 46px;
}
.interier__portret { border-radius: 3px; overflow: hidden; }
.interier__portret img { width: 100%; height: auto; display: block; }
.interier__jmeno {
  margin-top: 16px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--kamen); line-height: 1.9;
}
.interier__jmeno b { display: block; font-weight: 400; letter-spacing: 0.18em; color: var(--grafit); }
.interier__citace {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(24px, 3vw, 40px); line-height: 1.24; letter-spacing: -0.015em;
  color: var(--grafit); max-width: 17em; position: relative; padding-top: 8px;
}
/* okrová linka nad citací — stejné gesto jako kóta, jen bez patek */
.interier__citace::before {
  content: ""; position: absolute; left: 0; top: -18px; width: 74px; height: 1.5px;
  background: var(--okr);
}
.interier__text { margin-top: 30px; color: var(--kamen); max-width: 34em; }
/* tiché odkazy na weby obou firem — čtou se jako popisky na výkrese, ne jako
   tlačítka; podtržení se dokresluje zleva stejně jako wipe u tlačítek */
.interier__odkazy {
  list-style: none; margin-top: 26px; display: flex; flex-direction: column;
  gap: 9px; align-items: flex-start;
}
.interier__odkazy a {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--kamen); text-decoration: none;
  position: relative; padding-bottom: 4px; transition: color var(--dur-mikro) var(--ease-vita);
}
.interier__odkazy a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--okr); transform: scaleX(0); transform-origin: left;
  transition: transform 340ms var(--ease-vita);
}
.interier__odkazy .sipka { color: var(--okr); margin: 0 9px 0 11px; letter-spacing: 0; }
@media (hover: hover) and (pointer: fine) {
  .interier__odkazy a:hover { color: var(--grafit); }
  .interier__odkazy a:hover::after { transform: scaleX(1); }
}
.interier__odkazy a:focus-visible { color: var(--grafit); outline: none; }
.interier__odkazy a:focus-visible::after { transform: scaleX(1); }
.interier__render { margin-top: 54px; border-radius: 3px; overflow: hidden; }
.interier__render img { width: 100%; height: 46vh; min-height: 300px; object-fit: cover; display: block; }
.interier__popiska {
  margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--kamen);
}
/* ---------- materiálová kompozice (Standard) -------------------------------
   Vzor zorge9.estate: vzorky neleží v souměrné mřížce, ale volně v ploše —
   různě velké, mírně natočené, s měkkým stínem, aby působily jako fyzické
   kusy materiálu položené na světlém podkladu. Pohyb dodá vzorky.js.

   Šířky jsou v HTML u každé dlaždice a žádná nepřesahuje 170 px: zdroj má
   283–340 px a nad polovinou by na retině změkl. Není to estetika, je to strop. */
.vzorky { margin-top: clamp(44px, 6vw, 72px); }
.vzorky__label {
  display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--kamen);
}
.vzorky__scena { position: relative; height: clamp(340px, 28vw, 400px); margin-top: 22px; }
.vzorek {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0;
  transform: translateY(var(--posun, 0px)) rotate(var(--r, 0deg));
}
/* stín kreslí box-shadow, ne filter: drop-shadow. Filtr dělá z dlaždice
   vrstvu velkou jako celý rozptyl stínu a na světlém podkladu z toho vzniklo
   viditelné světlé pole s hranou — „rantlík“. Dlaždice jsou neprůhledné
   obdélníky, box-shadow je na ně správný nástroj. */
.vzorek__obraz {
  width: 100%; height: auto; aspect-ratio: 1; object-fit: cover;
  display: block; border-radius: 3px; background: var(--pisek-svetly);
  box-shadow: 0 12px 24px rgba(29, 29, 31, 0.10);
}
.vzorky__seznam {
  margin-top: clamp(26px, 3vw, 38px); display: grid;
  grid-template-columns: auto 1fr; gap: 8px clamp(18px, 2vw, 28px); align-items: baseline;
}
.vzorky__seznam dt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--kamen); white-space: nowrap;
}
.vzorky__seznam dd { margin: 0; font-size: 14.5px; color: var(--grafit); }
.vzorky .btn { margin-top: clamp(26px, 3vw, 38px); }

/* Bez skriptu, na mobilu a při vypnutém pohybu je z kompozice prostá mřížka —
   volné rozmístění bez parallaxu by byl jen nepořádek. */
@media (max-width: 860px) {
  .vzorky__scena {
    position: static; height: auto; display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
  }
  .vzorek { position: static; width: auto; transform: none; }
  .vzorek__obraz { border-radius: 3px; }
  .vzorky__seznam { grid-template-columns: 1fr; gap: 4px; }
  .vzorky__seznam dd { margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .vzorek { transform: rotate(var(--r, 0deg)); }
}

/* ---------- dispozice: přepínač podlaží (návrh D1, schváleno 26. 7.) ----------
   Bez JS je to prostý dokument: oba popisy i oba půdorysy pod sebou. Teprve
   html.js z toho udělá přepínač — proto jsou stavy schované pod tím prefixem. */
/* půdorys je na výšku, textový sloupec o polovinu kratší — proto se levý
   sloupec centruje, jinak pod ním zůstane dvěstě pixelů prázdna */
.dispozice {
  display: grid; grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(34px, 5vw, 76px); align-items: center; margin-top: 46px;
}
.dispozice__zalozky { display: flex; gap: clamp(18px, 3vw, 34px); border-bottom: 1px solid var(--linka); }
.dispozice__zalozka {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 0 2px 14px; font-family: var(--font-mono); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--kamen);
  transition: color var(--dur-mikro) var(--ease-vita);
}
.dispozice__zalozka::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: var(--okr); transform: scaleX(0); transform-origin: left;
  transition: transform 340ms var(--ease-vita);
}
.dispozice__zalozka[aria-selected="true"] { color: var(--grafit); }
.dispozice__zalozka[aria-selected="true"]::after { transform: scaleX(1); }
.dispozice__zalozka:focus-visible { outline: 1.5px solid var(--okr); outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) { .dispozice__zalozka:hover { color: var(--grafit); } }

.dispozice__popis { margin-top: 26px; }
.dispozice__popis p + p { margin-top: 14px; }
.dispozice__plan {
  position: relative; background: #fff; border-radius: 4px;
  padding: clamp(14px, 2vw, 24px); box-shadow: 0 10px 40px rgba(29, 29, 31, 0.05);
}
.dispozice__plan img { width: 100%; height: auto; display: block; }
.dispozice__plan img + img { margin-top: 14px; }
.dispozice__lupa { display: none; }
.dispozice__kota {
  margin-top: 14px; display: flex; justify-content: space-between; gap: 16px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--kamen);
}

html.js .dispozice__popis { display: grid; }
html.js .dispozice__popis > p {
  grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden;
  transition: opacity 320ms var(--ease-vita);
}
html.js .dispozice__popis > p.je-aktivni { opacity: 1; visibility: visible; }
html.js .dispozice__plan { display: grid; }
/* zoom-in jen když neběží náš vlastní kurzor — jinak by nad plánem svítila
   systémová lupa a pod ní ještě naše kolečko */
html.js:not(.je-kurzor) .dispozice__plan { cursor: zoom-in; }
html.js .dispozice__plan img {
  grid-area: 1 / 1; margin-top: 0; opacity: 0; visibility: hidden;
  transition: opacity 380ms var(--ease-vita);
}
html.js .dispozice__plan img.je-aktivni { opacity: 1; visibility: visible; }
html.js .dispozice__lupa {
  display: block; position: absolute; right: 16px; bottom: 16px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--kamen); background: var(--papir);
  border: 1px solid var(--linka); border-radius: 3px; padding: 7px 11px;
  opacity: 0; transition: opacity var(--dur-mikro) var(--ease-vita);
}
@media (hover: hover) and (pointer: fine) {
  html.js .dispozice__plan:hover .dispozice__lupa { opacity: 1; }
}
@media (max-width: 860px) {
  .dispozice { grid-template-columns: 1fr; gap: 30px; margin-top: 34px; }
  html.js .dispozice__lupa { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html.js .dispozice__popis > p,
  html.js .dispozice__plan img,
  .dispozice__zalozka::after { transition: none; }
}

@media (max-width: 860px) {
  .interier__mrizka { grid-template-columns: 1fr; gap: 28px; margin-top: 34px; }
  .interier__portret { max-width: 320px; }
  .interier__citace { max-width: none; }
  .interier__render { margin-top: 36px; }
  .interier__render img { height: auto; min-height: 0; }
}

/* ---------- Koncept prodeje: vodorovná časová osa (návrh 01) -----------------
   Sekci skládá assets/osa.js z existující mřížky .proces. Bez JavaScriptu,
   na mobilu a při prefers-reduced-motion zůstává původní mřížka. */
.proces--skryta { display: none; }

/* 29. 7.: rám byl vysoký jako celé okno a obsah v něm stál svisle na střed.
   Obsah měří jen ~490 px, takže na vysokém monitoru zbývalo přes 300 px prázdna
   NAD nadpisem — díra, ve které nic není. Rám je proto zastropovaný na --osa-ram;
   volné místo zůstane pár desítek pixelů nahoře i dole a zbytek okna je papír,
   do kterého zespodu najíždí další sekce.

   Výška dráhy pak MUSÍ z té výšky vycházet, ne z výšky okna. Čistý scroll uvnitř
   osy = výška dráhy − odsazení shora − výška rámu; kdyby se rám zastropoval a
   dráha zůstala na 170vh, prodloužil by se scroll o rozdíl (na 900px okně
   z 630 na 814 px). Proto se dráha skládá: 70vh čistého scrollu + to, co rám
   zabírá. Tempo osy tak zůstává přesně takové, jaké bylo odsouhlasené 27. 7.
   Stejný výpočet dělá i osa.js — výšku rámu si měří sám, tady se nic nedopisuje. */
/* Druhé kolo 29. 7.: sekce měla proti ostatním pořád víc vzduchu, protože se
   sčítaly TŘI mezery — padding sekce (126,5 px), vlastní margin osy (56 px) a
   vnitřní vycentrování v rámu. Od nadpisu sekce to dělalo 250 px, zatímco
   ostatní sekce mají k eyebrow 155 px. Margin osy je proto pryč a rám je
   utažený tak, aby vnitřní mezera vyšla na ~28 px — součet pak sedí na 155. */
.osa {
  --osa-ram: min(calc(100svh - 76px), 560px);
  position: relative; height: calc(70vh + 76px + var(--osa-ram)); margin-top: 0;
}
.osa__ram {
  position: sticky; top: 76px; height: var(--osa-ram);
  overflow: hidden; display: flex; flex-direction: column; justify-content: center;
  contain: strict;
  /* průlom z obsahového sloupce — osa musí mít celou šířku okna */
  width: 100vw; margin-left: calc(50% - 50vw);
}
.osa__hlava {
  max-width: var(--w-content); margin: 0 auto clamp(34px, 5vh, 60px);
  padding: 0 var(--gutter); width: 100%;
}
.osa__hlava .lead { margin-top: 18px; }
.osa__pas { position: relative; }
/* linka vede od prvního puntíku k poslednímu a jede s nimi; left/width/top
   dopočítá skript podle skutečné polohy puntíků */
.osa__linka { position: absolute; height: 1.5px; background: var(--linka); pointer-events: none; }
.osa__linka::after {
  content: ""; position: absolute; inset: 0; background: var(--okr);
  transform: scaleX(var(--projeto, 0)); transform-origin: left;
}
/* patka na konci linky — výkresová zarážka, ať je vidět, kde cesta končí */
.osa__linka::before {
  content: ""; position: absolute; right: 0; top: -5px;
  width: 1.5px; height: 12px; background: var(--linka);
}
.osa__radek { position: relative; display: flex; will-change: transform; padding-left: var(--gutter); }
.osa__krok { flex: 0 0 clamp(260px, 26vw, 380px); padding: 0 clamp(18px, 2vw, 34px); position: relative; }
.osa__znacka { position: relative; height: 92px; display: flex; align-items: center; }
.osa__znacka::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 11px; height: 11px;
  border-radius: 50%; background: var(--papir); border: 1.5px solid var(--linka);
  transform: translateY(-50%) scale(.8);
  transition: background var(--dur-mikro) var(--ease-vita),
              border-color var(--dur-mikro) var(--ease-vita),
              transform var(--dur-mikro) var(--ease-vita);
}
.osa__krok.je-tady .osa__znacka::before {
  background: var(--okr); border-color: var(--okr); transform: translateY(-50%) scale(1.15);
}
/* číslo sedí vpravo NAD puntíkem — když bylo v jeho ose, linka ho přeškrtávala */
.osa__c {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .24em;
  color: var(--kamen); padding-left: 24px; transform: translateY(-15px);
  transition: color var(--dur-mikro) var(--ease-vita);
}
.osa__krok.je-tady .osa__c { color: var(--okr-tmavy); }
/* Sedmý krok je cíl, ne další zastávka. Rozdíl nese tvar, ne pohyb:
   puntík je o něco větší a po rozsvícení dostane okrový prstenec.
   Rozměry jsou celá čísla a bez scale() — po zvětšení 1,15× vycházel puntík
   na 17,25 px, a proti prstenci pak vypadal o pixel mimo střed. */
.osa__krok--cil .osa__znacka::before { width: 17px; height: 17px; }
.osa__krok--cil.je-tady .osa__znacka::before { transform: translateY(-50%); }
.osa__krok--cil .osa__znacka::after {
  content: ""; position: absolute; left: 0; top: 50%; width: 31px; height: 31px;
  transform: translate(-7px, -50%) scale(.7); transform-origin: 50% 50%;
  border-radius: 50%; border: 1.5px solid var(--okr); opacity: 0;
  transition: opacity var(--dur-mikro) var(--ease-vita),
              transform var(--dur-mikro) var(--ease-vita);
}
.osa__krok--cil.je-tady .osa__znacka::after { opacity: 1; transform: translate(-7px, -50%) scale(1); }
.osa__krok--cil .osa__c { padding-left: 30px; }
/* kóta pod značkou — patky výkresu; odsazená, aby netvořila souvislou linku */
.osa__kota {
  position: absolute; left: clamp(18px, 2vw, 34px); top: calc(50% + 14px);
  width: calc(100% - 2 * clamp(18px, 2vw, 34px)); height: 7px;
  border-bottom: 1.5px solid var(--linka); border-left: 1.5px solid var(--linka);
  border-right: 1.5px solid var(--linka); opacity: .55;
}
.osa__obsah {
  opacity: .3; transform: translateY(18px);
  transition: opacity var(--dur-reveal) var(--ease-vita), transform var(--dur-reveal) var(--ease-vita);
}
.osa__krok.je-tady .osa__obsah { opacity: 1; transform: none; }
.osa__obsah h3 { font-size: clamp(19px, 1.8vw, 24px); margin-top: 0; }
.osa__obsah p { font-size: 14.5px; color: var(--kamen); margin-top: 8px; }
/* sekce s osou si nese odsazení sama — dráha ho supluje */
html.je-osa #koncept { padding-bottom: 0; }

/* ---------- nájezd fotek z boků (návrh 02) ---------- */
[data-bok] { overflow: hidden; border-radius: 3px; }
[data-bok] img { display: block; width: 100%; will-change: transform; }

/* ---------- kurzor se zpožděním (návrh 04) ----------------------------------
   Tvar terče je zatím kolečko = placeholder, varianty se vybírají zvlášť. */
/* třídu nasazuje až skript — viz kurzor.js */
/* Vyjmenovávat prvky po jednom nefungovalo: `cursor` se dědí, takže cokoli
   s vlastním `cursor: pointer/zoom-in` (karty domů, tlačítka, popisky, plán)
   si systémový kurzor vytáhlo zpátky a svítil pod naším kolečkem. Proto to
   bereme přes všechny potomky a výjimky se vracejí níž. */
html.je-kurzor, html.je-kurzor * { cursor: none; }
/* výjimky: kde se píše nebo vybírá, patří nativní kurzor */
html.je-kurzor input, html.je-kurzor textarea, html.je-kurzor select,
html.je-kurzor [contenteditable] { cursor: auto; }
html.je-kurzor input[type="range"] { cursor: ew-resize; }

.kurzor {
  position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  border: 1.5px solid var(--okr); opacity: 0;
  transition: width 260ms var(--ease-vita), height 260ms var(--ease-vita),
              margin 260ms var(--ease-vita), background 260ms var(--ease-vita),
              opacity 260ms linear;
}
.kurzor.je-tu { opacity: 1; }
.kurzor::after {
  content: attr(data-popis); position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--grafit); white-space: nowrap;
  opacity: 0; transition: opacity 200ms linear;
}
.kurzor.je-velky { width: 96px; height: 96px; margin: -48px 0 0 -48px;
  background: rgba(217, 164, 65, .92); border-color: transparent; }
.kurzor.je-velky::after { opacity: 1; }
.kurzor__zar {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 460px; height: 460px; margin: -230px 0 0 -230px; border-radius: 50%;
  background: radial-gradient(circle, rgba(217,164,65,.16), rgba(217,164,65,0) 62%);
  opacity: 0; transition: opacity 500ms linear;
}
.kurzor__zar.je-tu { opacity: 1; }
@media (hover: none) { .kurzor, .kurzor__zar { display: none; } }

/* ---------- S5 · interaktivní přehled domů -----------------------------------
   Varianta B: klik na dům → nálet na blok → uvnitř bloku se přepíná bez létání.
   Obrysy jsou SVG polygony v procentech obrázku (viewBox 0 0 100 100,
   preserveAspectRatio none), takže vrstva sedí na jakékoli šířce bez přepočtu.
   Bez JavaScriptu zůstane plán obyčejný obrázek — vrstva se nevykreslí. */
.prehled { position: relative; }
.prehled__scena {
  position: relative; border-radius: 4px; overflow: hidden;
  background: var(--pisek-svetly);
}
/* posuv nese dozoomování; obraz i obrysy se hýbou spolu, jinak by se rozešly */
.prehled__posuv {
  position: relative; transform-origin: 50% 50%;
  transition: transform var(--prehled-let, 900ms) var(--ease-vita);
  will-change: transform;
}
/* height:auto je tu povinné. Obrázek má v HTML atributy width/height (kvůli
   rezervaci místa při načítání) a ty se chovají jako CSS výška. Když se
   nastaví jen šířka na 100 %, výška zůstane na 1493 px a plán se svisle
   roztáhne — na okně 1440 px vycházel poměr 0,73 místo 1,34. */
.prehled__posuv img { width: 100%; height: auto; display: block; }
.prehled__klip {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none;
}
.prehled.je-klip .prehled__klip { opacity: 1; }
.prehled.je-klip .prehled__posuv img { opacity: 0; }

.prehled__vrstva { position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible;   /* aby se záře neořízla na hraně plánu */ }
/* V klidu jsou obrysy NEVIDITELNÉ — plán zůstane fotkou. Dům se pod myší
   jen ROZSVÍTÍ, a to bez jediné hrany: polygon je zúžený (viz zuz() v
   prehled.js) a projde gaussovským rozostřením. Obrys je ruční odečet ze
   střechy a na desetinu procenta se trefit nedá — rozmazaná skvrna ale nemá
   co porovnávat, takže nepřesnost přestává být vidět i v přiblížení. */
.prehled__dum {
  fill: transparent; stroke: none;
  cursor: pointer; outline: none;
  filter: url(#vita-zar);
  transition: fill 260ms var(--ease-vita);
}
@media (hover: hover) and (pointer: fine) {
  .prehled__dum:hover { fill: rgba(217, 164, 65, 0.55); }
}
/* na dotyku hover neexistuje — domy musí být poznat, že jdou stisknout */
@media (hover: none) {
  .prehled__dum { fill: rgba(217, 164, 65, 0.26); }
}
.prehled__dum:focus-visible { fill: rgba(217, 164, 65, 0.55); }
.prehled__dum.je-vybrany { fill: rgba(217, 164, 65, 0.82); }

/* V přiblíženém bloku musí být na první pohled jasné, KTERÝ dům je vybraný.
   Dřív měl vybraný i dům pod myší shodně 0,42 a nedaly se rozeznat. Teď drží
   odstup tři stupně: vybraný svítí naplno, dům pod myší jen naznačí, zbytek
   bloku dostane jemný grafitový závoj (schváleno 29. 7.).
   Pořadí pravidel je záměrné — mají stejnou sílu, takže rozhoduje pozice. */
.prehled[data-stav="blok"] .prehled__dum:not(.je-vybrany) { fill: rgba(29, 29, 31, 0.1); }
/* na dotyku závoj neříká „jde stisknout" — ostatní domy zůstanou ochrové */
@media (hover: none) {
  .prehled[data-stav="blok"] .prehled__dum:not(.je-vybrany) { fill: rgba(217, 164, 65, 0.2); }
}
.prehled[data-stav="blok"] .prehled__dum:focus-visible:not(.je-vybrany) {
  fill: rgba(217, 164, 65, 0.3);
}
.prehled[data-stav="blok"] .prehled__dum.je-vybrany { fill: rgba(217, 164, 65, 0.78); }
@media (hover: hover) and (pointer: fine) {
  .prehled[data-stav="blok"] .prehled__dum:hover:not(.je-vybrany) {
    fill: rgba(217, 164, 65, 0.3);
  }
  .prehled__dum.je-prodano:hover { fill: rgba(29, 29, 31, 0.5); }
}
.prehled__dum.je-prodano { cursor: default; }
/* při náletu i v bloku se ostatní bloky nenabízejí */
.prehled[data-blok] .prehled__dum { pointer-events: none; opacity: 0; }
.prehled[data-blok="A"] .prehled__dum[data-blok="A"],
.prehled[data-blok="B"] .prehled__dum[data-blok="B"],
.prehled[data-blok="C"] .prehled__dum[data-blok="C"] { opacity: 1; }
.prehled[data-stav="blok"][data-blok="A"] .prehled__dum[data-blok="A"],
.prehled[data-stav="blok"][data-blok="B"] .prehled__dum[data-blok="B"],
.prehled[data-stav="blok"][data-blok="C"] .prehled__dum[data-blok="C"] { pointer-events: auto; }
/* během letu se neklikne nikam */
.prehled[data-stav="nalet"] .prehled__vrstva { pointer-events: none; }

.prehled__napoveda {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grafit);
  background: rgba(250, 250, 247, 0.9); padding: 8px 16px; border-radius: 3px;
}
.prehled__zpet {
  display: block; width: 100%; margin-bottom: 16px; text-align: left;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--kamen); cursor: pointer;
  background: transparent; border: 0; border-bottom: 1px solid var(--linka);
  padding: 0 0 12px;
}
.prehled__zpet:hover { color: var(--grafit); border-color: var(--okr); }

/* panel s daty — na desktopu vpravo v ploše, na mobilu spodní list */
.prehled__panel {
  /* svisle na střed scény — sekce je vyšší než okno, u horní hrany by panel
     při vycentrované sekci vyjel mimo obraz */
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  z-index: 3; width: 300px;
  background: var(--papir); border: 1px solid var(--linka); border-radius: 4px;
  padding: 22px 22px 20px; box-shadow: 0 18px 44px rgba(29, 29, 31, 0.12);
}
.prehled__hlava { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.prehled__blok, .prehled__stav {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
}
.prehled__blok { color: var(--kamen); }
.prehled__stav.je-volny { color: var(--okr-tmavy); }
.prehled__stav.je-rezervace { color: var(--kamen); }
.prehled__stav.je-prodano { color: #FFF; background: var(--cihla); border-color: var(--cihla); border-radius: 2px; }
/* Číslo domu a severka stojí v jedné řadě zarovnané na střed, aby střelka
   ležela ve svislé ose s číslem (rozhodnutí Vlastimila 3. 8.). Severka patří
   VÝHRADNĚ sem — do detailu karty v sekci Výběr domu. */
.prehled__radek { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.prehled__id { font-size: 30px; font-weight: 400; margin: 10px 0 2px; }
.prehled__typ { color: var(--kamen); font-size: 14.5px; }
.prehled__sever { flex: none; display: block; margin-top: 8px; }
.prehled__sever svg { display: block; }
.prehled__udaje { margin: 18px 0 0; display: grid; gap: 9px; }
.prehled__udaje > div { display: flex; justify-content: space-between; gap: 12px;
  border-bottom: 1px solid var(--linka); padding-bottom: 8px; }
.prehled__udaje dt { color: var(--kamen); font-size: 13.5px; }
.prehled__udaje dd { margin: 0; font-size: 14.5px; }
.prehled__prepinac { display: flex; gap: 6px; margin-top: 18px; flex-wrap: wrap; }
.prehled__prepinac button {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.12em;
  padding: 9px 12px; border: 1px solid var(--linka); border-radius: 3px;
  background: transparent; color: var(--kamen); cursor: pointer;
  transition: border-color 200ms, color 200ms;
}
.prehled__prepinac button:hover { border-color: var(--okr); color: var(--grafit); }
.prehled__prepinac button.je-aktivni { border-color: var(--okr); background: var(--okr); color: #fff; }
.prehled__cta { margin-top: 18px; width: 100%; }

@media (max-width: 900px) {
  /* Na dotyku panel nezakrývá plán, vyjede zespodu jako list — ale POZOR na
     pořadí vykreslení. Panel leží uvnitř scény a při náletu se plán zvětšuje
     na 1,5×, takže vizuálně přetéká přes něj. Ořez scény tomu nezabrání, ta
     zvětšený obraz i panel obsahuje. Do 3. 8. tak zvětšený plán zakrýval
     horních 84 px panelu, tedy přesně tlačítko „Celkový pohled" — nešlo vidět
     ani stisknout. Řeší to vlastní vrstva: position: relative + z-index. */
  .prehled__panel {
    position: relative; z-index: 3; transform: none; width: auto;
    margin-top: 14px; box-shadow: none;
    /* Panel si po výběru domu sám najíždí do obrazu (viz vyberDum v prehled.js).
       Bez odsazení by ho horní lišta překryla — a v ní je tlačítko zpět. */
    scroll-margin-top: 92px; scroll-margin-bottom: 64px;
  }
  .prehled__zpet { min-height: 44px; }
  /* Na šířku má plán přes tisíc pixelů a panel končil hluboko pod obrazovkou —
     po klepnutí na dům nebyla vidět ani cena. V landscape proto stojí vedle
     sebe: plán vlevo, panel vpravo. Na výšku zůstává pod plánem jako dřív. */
  @media (orientation: landscape) {
    .prehled__scena { display: flex; align-items: center; gap: 14px; }
    .prehled__scena > .prehled__posuv { flex: 1 1 auto; min-width: 0; }
    /* Panel je vyšší než displej na šířku (466 vs 390 px), takže by přerůstal
       přes horní hranu i s tlačítkem zpět. Dostane strop výšky a vlastní
       posuv — vejde se celý a nic z něj nezmizí. */
    .prehled__panel {
      flex: 0 0 46%; max-width: 320px; margin-top: 0; align-self: center;
      max-height: calc(100svh - 96px); overflow-y: auto;
      padding: 16px 16px 14px;
    }
    .prehled__panel .prehled__id { font-size: 26px; margin-top: 6px; }
    .prehled__panel .prehled__udaje { margin-top: 12px; }
    .prehled__napoveda { left: 12px; bottom: 12px; }
  }
  .prehled__napoveda { font-size: 10.5px; padding: 10px 12px; }
  .prehled__prepinac button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .prehled__posuv { transition: none; }
}

/* ---------- UVÍTÁNÍ · papírová plocha se značkou -----------------------------
   Zapíná se třídou html.uvitani-bezi, kterou nastaví inline skript v hlavičce
   ještě před prvním vykreslením. Bez JavaScriptu se překryv nevykreslí vůbec —
   stránka tedy nikdy nezůstane schovaná pod ním.

   Choreografie: stříška se nakreslí jedním tahem (stroke-dasharray), doplní se
   logotyp, a po otevření brány značka odletí na své místo v hlavičce. Let se
   nepočítá pevnými čísly, ale změřením obou poloh — proto sedí na jakékoli
   šířce okna i po změně velikosti loga v navigaci. */
.uvitani {
  position: fixed; inset: 0; z-index: 200;
  background: var(--papir); color: var(--grafit);
  display: grid; place-items: center;
}
html:not(.uvitani-bezi) .uvitani { display: none; }
/* zámek scrollu — kompenzace šířky lišty drží layout, aby se po odemčení
   nezměnila šířka okna a scrub si nepřepočítával plátno */
html.uvitani-bezi { overflow: hidden; }
html.uvitani-bezi .nav__logo { opacity: 0; }
/* Konec letu: logo v hlavičce se odkryje ještě POD vrstvou, aby značka nebyla
   ani na snímek nikde. Vrstva zmizí až potom, plynule. */
html.uvitani-bezi.uvitani-konec .nav__logo { opacity: 1; }

/* 29. 7. večer: velikost se zadává ŠÍŘKOU, ne výškou. Původní výška
   clamp(92,11vw,128) po vynásobení 2,5× dávala na telefonu logo 627 px široké
   na displeji, který má 390 — přeteklo by. Šířkou se to omezí samo a poměr
   stran si SVG udrží. Desktop 880 px, mobil 390 px → 335 px. */
.uvitani__znak {
  width: min(86vw, 880px); height: auto; display: block;
  transform-origin: 50% 50%; will-change: transform;
}
/* Kreslení jede z CSS, ne z JavaScriptu. Kdyby ho spouštěla třída přidaná
   deferovaným skriptem, koukal by návštěvník půl vteřiny na prázdný papír,
   než se skript vůbec dostane ke slovu. Délka cesty stříšky je změřená
   (getTotalLength = 87,11), proto je tu natvrdo — dráha se nemění. */
.uvitani__strecha {
  stroke-dasharray: 88; stroke-dashoffset: 88;
  animation: uvitani-kresba 1040ms var(--ease-vita) 160ms forwards;
}
@keyframes uvitani-kresba { to { stroke-dashoffset: 0; } }
.uvitani__slovo {
  opacity: 0;
  animation: uvitani-slovo 720ms var(--ease-vita) 920ms forwards;
}
@keyframes uvitani-slovo { to { opacity: 1; } }
/* odlet: podklad zprůhlední (odkryje hero) a značka doletí do hlavičky */
.uvitani.odlet { background: transparent; transition: background 1040ms var(--ease-vita); }
.uvitani.odlet .uvitani__znak { transition: transform 1120ms var(--ease-vita); }
.uvitani.pryc { opacity: 0; transition: opacity 240ms var(--ease-vita); pointer-events: none; }

/* Pozor: tady schválně NENÍ pravidlo pro prefers-reduced-motion. Rozhodnutí,
   jestli uvítání běžet má, patří skriptu v hlavičce — ten předvolbu respektuje.
   Kdyby to hlídal i styl s !important, schoval by uvítání i ve chvíli, kdy ho
   vynutíš přes ?intro=1, a nešlo by ukázat klientovi na stroji, který má
   „Omezit pohyb" zapnuté. */

/* ---------- dotykové plochy (mobile pass 27. 7.) ---------------------------
   Apple doporučuje 44 × 44 px, Android 48. Zvětšuje se PLOCHA, ne písmo:
   typografie zůstává, mění se jen svislý padding a velikost ovládacích prvků.
   Platí jen na dotykových šířkách — na desktopu se rozvržení nemění. */

/* ============================================================
 PODSTRÁNKY DOMŮ — šablona schválená 3. 8., přesunuto sem 4. 8.
 Používá ji všech jedenáct stránek v domy/. Mobilní blok je na konci
 souboru u ostatních mobilních pravidel, ne tady.
 ============================================================ */
.dum-hlava { padding: calc(76px + clamp(44px, 7vh, 80px)) 0 0; }
.dum-hlava__mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 64px); align-items: end; }
.dum-hlava h1 { font-size: clamp(38px, 5.4vw, 72px); }
.dum-drobky { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--kamen); display: flex; gap: 10px; align-items: center; margin-bottom: 22px; }
.dum-drobky a { text-decoration: none; border-bottom: 1px solid var(--linka); }
.dum-drobky a:hover { border-color: var(--okr); }
.dum-hlava__stav { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; }
.dum-hlava__stav::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.dum-cena { font-family: var(--font-display); font-size: clamp(28px, 3.2vw, 42px); line-height: 1; margin-top: 6px; }
.dum-cena small { display: block; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--kamen); margin-bottom: 10px; }
.dum-hlava__akce { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.dum-foto { margin-top: clamp(32px, 5vw, 60px); }
/* height:auto je povinné — v HTML má fotka atributy width/height a bez
   tohohle prohlížeč vezme height="1194" jako pevnou výšku a fotku svisle
   natáhne (na mobilu až na čtyřnásobek) */
.dum-foto img { width: 100%; height: auto; border-radius: 4px; }

/* orientační mapka — překreslené schéma architektů, zvýrazněný konkrétní dům */
.dum-mapka { margin-top: 30px; display: flex; align-items: center; gap: 18px; }
.dum-mapka__svg { width: 208px; height: auto; flex: none; }
.dum-mapka__popis { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--kamen); line-height: 1.8; }
.dum-mapka__popis b { display: block; color: var(--grafit); font-weight: 400; }

/* parametry — výkresová tabulka, ne „karty" */
.dum-parametry { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linka); border: 1px solid var(--linka); margin-top: clamp(34px, 5vw, 56px); }
.dum-parametr { background: var(--papir); padding: 20px clamp(14px, 1.6vw, 22px); }
.dum-parametr span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--kamen); display: block; }
.dum-parametr strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(20px, 1.9vw, 26px); display: block; margin-top: 8px; line-height: 1.1; }
.dum-parametr em { font-style: normal; font-size: 14px; color: var(--kamen); }

/* dispozice */
/* Výkres je celý list A3 na šířku (2:1) — ve sloupci by byl nečitelný,
   proto jde přes celou šířku a text s tabulkou až pod něj. */
.dum-plan__cely { margin-top: 26px; }
.dum-plan { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 3.5vw, 54px); align-items: start; margin-top: 34px; }
/* bez min-width:0 si sloupec vynutí šířku nejširší buňky tabulky a na
   mobilu pak celá legenda vyteče za okraj stránky */
.dum-plan > div { min-width: 0; }
.dum-plan__ram { display: block; border: 1px solid var(--linka); background: #fff; border-radius: 3px; padding: clamp(10px, 1.4vw, 18px); position: relative; cursor: zoom-in; transition: border-color var(--dur-mikro) var(--ease-vita); }
.dum-plan__ram:hover { border-color: var(--okr); }
.dum-plan__ram img { width: 100%; height: auto; }
.dum-plan__ram img[hidden] { display: none; }
.dum-plan__lupa { position: absolute; right: 14px; bottom: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--kamen); background: rgba(250,250,247,.9); padding: 6px 10px; border: 1px solid var(--linka); }
.dum-mistnosti { width: 100%; border-collapse: collapse; font-size: 15px; }
.dum-mistnosti caption { text-align: left; font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--kamen); padding-bottom: 12px; }
.dum-mistnosti th, .dum-mistnosti td { text-align: left; padding: 9px 0; border-bottom: 1px solid var(--linka); }
.dum-mistnosti th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--kamen); font-weight: 400; }
.dum-mistnosti td:first-child { font-family: var(--font-mono); font-size: 12.5px; color: var(--okr-tmavy); width: 3.6em; }
.dum-mistnosti td:last-child, .dum-mistnosti th:last-child { text-align: right; font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
/* poznámka pod tabulkou je jediná buňka přes tři sloupce — je tedy zároveň
   first-child i last-child a bez tohohle přebíjení by zdědila nowrap
   a pevnou šířku prvního sloupce, čímž by roztáhla celou tabulku */
.dum-mistnosti tfoot td, .dum-mistnosti tfoot td:last-child, .dum-mistnosti tfoot td:first-child {
  border-bottom: 0; padding-top: 14px; font-size: 13.5px; line-height: 1.5;
  color: var(--kamen); white-space: normal; width: auto; text-align: left;
  font-family: var(--font-text); letter-spacing: 0; }
.dum-plan__pod { margin-top: 20px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.dum-plan__pdf { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--okr); text-decoration: none; padding-bottom: 2px; }
/* Výkresy jsou typové — na stránkách dvojdomů nese razítko jméno RD 4B,
   u řadovek RD 2C. Popisek to říká rovnou, ať to nikoho nepřekvapí. */
.dum-plan__zdroj { margin-top: 12px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--kamen); max-width: none; line-height: 1.7; }

/* galerie domu */
.dum-galerie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.dum-galerie a { display: block; border-radius: 3px; overflow: hidden; }
/* width:100% je nutnost, ne kosmetika — dokud se lazy fotka nestáhne, má
   nulovou vlastní šířku a aspect-ratio z ní udělá nulovou výšku; mřížka
   se pak sesype a dolní řada fotek vůbec nevznikne. */
.dum-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform var(--dur-mikro) var(--ease-vita); }
.dum-galerie a:hover img { transform: scale(1.03); }
.dum-galerie a:first-child { grid-column: span 2; grid-row: span 2; }
.dum-galerie a:first-child img { aspect-ratio: 4 / 3; height: 100%; }
.dum-galerie__pozn { margin-top: 16px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--kamen); max-width: none; }

/* standard v ceně */
.dum-standard { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 clamp(28px, 4vw, 64px); margin-top: 34px; }
.dum-standard > div { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--linka); }
.dum-standard i { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--okr-tmavy); padding-top: 5px; }
.dum-standard b { font-weight: 400; }
.dum-standard p { font-size: 14.5px; color: var(--kamen); margin-top: 2px; max-width: none; }


/* ---- Soubory ke stažení -------------------------------------------------
   Energetický štítek není ikona, ale plnohodnotná grafika z PENB — proto
   stojí vlevo jako obraz a seznam souborů běží vedle něj. */
.stahnout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(28px, 4vw, 64px); align-items: start; margin-top: 38px; }
.stahnout__stitek { margin: 0; }
.stahnout__stitek img { width: 100%; height: auto; border: 1px solid var(--linka); border-radius: 3px; background: #fff; }
.stahnout__stitek figcaption { margin-top: 12px; font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kamen); line-height: 1.7; }
.stahnout__seznam { list-style: none; border-top: 1px solid var(--linka); }
.stahnout__seznam li { border-bottom: 1px solid var(--linka); }
.stahnout__polozka { display: flex; align-items: baseline; gap: 18px; padding: 20px 2px;
  text-decoration: none; transition: color var(--dur-mikro) var(--ease-vita); }
.stahnout__polozka b { font-weight: 400; font-size: clamp(17px, 1.5vw, 20px); flex: 1 1 auto; }
.stahnout__polozka span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--kamen); flex: none; }
.stahnout__polozka::after { content: "↓"; font-family: var(--font-mono); font-size: 15px;
  color: var(--okr-tmavy); flex: none; transition: transform var(--dur-mikro) var(--ease-vita); }
@media (hover: hover) { .stahnout__polozka:hover::after { transform: translateY(3px); } }
/* Karta domu je zatím prázdná schránka — vypadá stejně, jen zšedlá a bez odkazu. */
.stahnout__polozka--ceka { opacity: .45; pointer-events: none; }
.stahnout__polozka--ceka::after { content: "—"; }
.stahnout__shrnuti { margin-top: 22px; font-size: 15px; color: var(--kamen); max-width: 34em; }
.stahnout__shrnuti b { color: var(--grafit); font-weight: 400; }
@media (max-width: 900px) {
  .stahnout { grid-template-columns: 1fr; gap: 26px; }
  .stahnout__stitek { max-width: 240px; }
}

/* další domy */
.dum-sousede { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.dum-soused { border: 1px solid var(--linka); border-radius: 3px; padding: 16px 20px; text-decoration: none; transition: border-color var(--dur-mikro) var(--ease-vita); }
.dum-soused:hover { border-color: var(--okr); }
.dum-soused span { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--kamen); display: block; }
.dum-soused strong { font-family: var(--font-display); font-weight: 400; font-size: 22px; display: block; margin-top: 6px; }
.dum-soused em { font-style: normal; font-size: 14px; color: var(--kamen); }

@media (max-width: 900px) {
  .dum-hlava__mrizka { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .dum-mapka__svg { width: 132px; }
  .dum-parametry { grid-template-columns: repeat(2, 1fr); }
  .dum-plan { grid-template-columns: 1fr; }
  .dum-galerie { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dum-galerie a:first-child { grid-column: span 2; grid-row: auto; }
  .dum-standard { grid-template-columns: 1fr; }
}

/* ===== S6 · údaj o aktuálnosti stavů ======================================
   Doplňuje assets/stavy.js po úspěšném načtení /data/stavy.json. Bez dat
   zůstává prvek s atributem hidden a na stránce po něm nezbyde ani mezera. */
.stav-info {
  font-family: var(--font-mono);
  max-width: none;            /* globální p { max-width: 34em } by zúžilo box */
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--kamen);
  margin: 18px 0 0;
}
.domy-grid + .stav-info { text-align: right; }
.dum-cena + .stav-info { margin-top: 10px; }
.stav-info[hidden] { display: none; }

/* ---------- přesné doskočení na kotvu (oprava 6. 8.) -----------------------
   Navigace je fixní a vysoká 70 px — bez odsazení skončil nadpis sekce přesně
   pod ní. scroll-margin-top platí i pro plynulý scroll, protože prohlížeč ho
   započítá do cílové pozice, ne až po doskočení. */
section[id], [id="uvod"] { scroll-margin-top: 86px; }
@media (max-width: 900px) { section[id] { scroll-margin-top: 74px; } }

/* ---------- patička v.3 — dvě úrovně (oprava 6. 8.) ------------------------
   Značka projektu a prodávající stojí nahoře a jsou VĚTŠÍ. Ostatní tři jsou
   pod nimi, všichni ve stejné velikosti a bez pořadí významnosti. Claim patří
   ke značce, ne mezi loga — proto stojí hned pod dvojicí. */
.paticka__hlavni { display: flex; align-items: flex-start; flex-wrap: wrap; }
.paticka__vrstvy .paticka__znak { height: 76px; }
.paticka__vrstvy .paticka__znak svg { height: 76px; }
.paticka__vrstvy .paticka__znak img { height: 33px; }
.paticka__vrstvy .paticka__claim { margin-top: 22px; }
/* Tři spolupracující firmy: jedna výška pro všechny, žádné rámečky. */
.partneri__loga--rovne { display: flex; align-items: center; gap: clamp(26px, 3.6vw, 52px); flex-wrap: wrap; }
.partneri__loga--rovne img { height: 22px; width: auto; display: block; opacity: 0.9; }
.partneri__loga--rovne a, .partneri__loga--rovne span { display: block; }
@media (max-width: 760px) {
  .paticka__vrstvy .paticka__znak, .paticka__vrstvy .paticka__znak svg { height: 62px; }
  .paticka__vrstvy .paticka__znak img { height: 27px; }
  .partneri__loga--rovne { gap: 22px 30px; }
  .partneri__loga--rovne img { height: 19px; }
}

/* ---------- [S7] formulář: past na roboty a stavová hláška ------------------
   .past musí zůstat v layoutu (ne display:none), jinak ji část robotů pozná
   a přeskočí. Odsune se mimo obraz a vypne pro odečítače. */
.past { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__stav { font-size: 14.5px; line-height: 1.6; margin-top: 4px; }
.form__stav--ok { color: #3E5C34; }
.form__stav--chyba { color: var(--cihla); }
.form__stav a { color: inherit; }
.form .cf-turnstile { margin-top: 2px; }

@media (max-width: 900px) {
  .btn, .nav__cta {
    min-height: 46px; display: inline-flex; align-items: center; justify-content: center;
  }
  /* odkazy v textu a v patičce: plocha pod prstem, řádkování zůstává.
     POZOR: .nav__tel sem NEPATŘÍ. Telefon v horní liště se od šířky 1240 px
     schovává (display: none) a tohle pravidlo ho na mobilu zase zapínalo —
     lišta pak měla 501 px místo 390 a tlačítko „Domluvit prohlídku" vyjelo
     111 px mimo obrazovku. Číslo je na dosah v patičce i v sekci Kontakt. */
  .paticka__meta a,
  .kontakt__spojeni a,
  .interier__odkazy a { display: inline-block; padding: 12px 0; }
  .paticka__meta { gap: 4px 20px; }
  /* přepínač podlaží je hlavní ovládání sekce — měl 28 px */
  .dispozice__zalozka { padding: 14px 4px 16px; }
  /* zaškrtávátko souhlasu mělo 13 px, na dotyk se do něj nedalo trefit */
  /* flex: none — bez toho ho flex srazil zpátky na 13 px na šířku,
     i když výška 22 px zabrala */
  .gdpr input[type="checkbox"] { width: 22px; height: 22px; margin-top: 1px; flex: none; }
  .gdpr { gap: 14px; }
  /* posuvníky kalkulačky se táhnou prstem — plocha přes padding, ne výškou,
     aby se nenatáhla samotná dráha posuvníku */
  .kalkulacka input[type="range"] { padding: 14px 0; box-sizing: content-box; }
}