/* ===== VODOZNAKY — sekundární vrstva identity (29. 9. 2026) ======================
   Obsah je hlavní, tohle je až pátá vrstva: nejdřív nadpis, vůz, mapa, karta, text,
   a teprve na druhý pohled, že pozadí má vlastní rukopis. Pravidlo pro ladění: když
   si vodoznaku všimneš jako první, je moc silný.

   JEDNA SITUACE NA STRÁNKU, KAŽDÁ JINÁ. Dvě rodiny tvarů podle obsahu stránky:
   - plynulé linky pro pohyb a příběh (Domů = silnice, O firmě = kůň z loga),
   - konstruované glyphy pro fakta (Dokumenty = výkres palety, Kontakty = stopa
     běhounu).
   Záměrně BEZ vodoznaku: Vozový park (vozy jsou samy dost silné), mapa Kam jezdíme,
   Časté dotazy (červená plocha s kurtou), hero, patička (je na každé stránce, takže
   cokoli v ní by bylo přesně to opakování, které nechceme) a Ochrana osobních údajů
   (právní text má zůstat klidný).

   KOTVENÍ K OBSAHU, NE K OKNU. Každý motiv má „tvarovou“ část (ohyb silnice, zlom
   linek, hlava koně, čtverec výkresu, stopa) a ta se měří od obsahu: od hrany karet,
   od sloupce citátu, od konce seznamu. K okraji okna dojíždí jen rovný úsek, který
   je v SVG dlouhý 2400 px. Na 1440 i na 2560 px proto kompozice vypadá stejně:
   vztah ke kartám a textu se nemění, širší okno jen prodlouží rovinku. (Koně
   u motta nic neprodlužuje: prameny hřívy se k ocasu samy zužují do ztracena.)

   TECHNIKA. Každý motiv je SVG maska (assets/brand/vodoznak/, generuje je
   tools/gen-vodoznaky.py). Barva jde z background-color, síla z opacity. Rozdíly
   uvnitř motivu (pás silnice vs. osa) nese alfa v SVG. Pseudoprvek leží v izolovaném
   rodiči na z-index -1: nad podkladem sekce, pod veškerým obsahem, bez kliknutí,
   bez vlivu na rozvržení. Ořez motivu dělá rámeček pseudoprvku a poloha masky.
   Kde má motiv odjet až za okraj okna, sahá rámeček na 50vw od středu. 100vw je ale
   o šířku posuvníku víc než obsah (8 px navíc, změřeno) a body { overflow-x: clip }
   to nespraví: prohlížeč ho přenese na okno jako hidden, posuvník se neukáže, ale
   stránka je o 8 px širší a na dotykovém displeji jde odsunout do strany. Proto má
   každá taková sekce vlastní overflow-x: clip (ořízne na své šířce, netvoří
   stacking context ani posuvný kontejner, svisle nic neořezává).

   HOST PRVKY. U služeb nese vodoznak .wrap, ne sekce: sekce musí zůstat statická,
   jinak by svým pozadím překryla 48 px desky pod flotilou, která do ní zasahuje
   (uvod-reference.css, ŠEV MEZI DESKOU A SEKCÍ). Ostatní hosté pozadí nemají. */

.sluzby > .wrap,
.pribeh-motto,
.ndm-dokumenty .doklady-list,
.ndm-dokumenty .doklady,
.ndm-kontakty .stranka-uvod {
  position: relative;
  isolation: isolate;
}

.sluzby,
.ndm-dokumenty .doklady { overflow-x: clip; }

.sluzby > .wrap::before,
.sluzby > .wrap::after,
.pribeh-motto::before,
.pribeh-motto::after,
.ndm-dokumenty .doklady-list::after,
.ndm-dokumenty .doklady::before,
.ndm-kontakty .stranka-uvod::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ---- DOMŮ · NAŠE SLUŽBY (tmavý asfalt) -----------------------------------------
   Pás silnice vjíždí z levého okraje ve výšce wordmarku, jednou zatočí a zajede pod
   levou kartu. Vpravo menší odpověď: svazek pěti linek, zlom 45° a pod pravou kartu.
   Mezi nimi zůstává celý wordmark v klidu. Na papírové barvě: pás 3,4 %, osa 6 %.
   Pás má šířku jako silnice na mapě Kam jezdíme o sekci níž, takže na sebe navazují
   jazykem, ale mapa zůstává jediná červená trasa.

   Obě plátna začínají 40 px nad .wrap (horní hrana wordmarku), horní hrana karet je
   pak ve výšce 163 plátna: wordmark 93 + mezera 30 + 40.
   - silnice (::before): rámeček od levého okraje okna po levou hranu karet + 150 px,
     maska zarovnaná vpravo. Osa svislého úseku je tak vždy 120 px od levé hrany karty
     (za zaobleným rohem, pod kartou), vnější hrana oblouku 148 px.
   - linky (::after): rámeček od pravé hrany karet − 300 px po pravý okraj okna, maska
     zarovnaná vlevo. Šikmý úsek protne horní hranu karty 200 px od její pravé hrany.
   Proměnná --s zmenšuje silnici na užších oknech, kde by oblouk dojel k wordmarku
   (ten je široký 530 px na středu; drží se odstup aspoň 50 px). */
.sluzby > .wrap::before,
.sluzby > .wrap::after {
  top: -40px;
  background-color: var(--na-tmave);
  opacity: .06;
}
.sluzby > .wrap::before {
  --s: 1;
  left: calc(50% - 50vw);
  right: calc(100% - var(--okraj) - 150px * var(--s));
  height: calc(400px * var(--s));
  -webkit-mask-image: url('../brand/vodoznak/ndm_vodoznak_silnice.svg');
  mask-image: url('../brand/vodoznak/ndm_vodoznak_silnice.svg');
  -webkit-mask-position: right 0 top 0;
  mask-position: right 0 top 0;
  -webkit-mask-size: calc(2400px * var(--s)) calc(400px * var(--s));
  mask-size: calc(2400px * var(--s)) calc(400px * var(--s));
}
.sluzby > .wrap::after {
  left: calc(100% - var(--okraj) - 300px);
  right: calc(50% - 50vw);
  height: 220px;
  -webkit-mask-image: url('../brand/vodoznak/ndm_vodoznak_linky.svg');
  mask-image: url('../brand/vodoznak/ndm_vodoznak_linky.svg');
  -webkit-mask-position: left 0 top 0;
  mask-position: left 0 top 0;
  -webkit-mask-size: 2400px 220px;
  mask-size: 2400px 220px;
}
/* Linky jsou nad kartou 170 px od její pravé hrany; wordmark končí 265 px od středu.
   Pod 1120 px by mezi nimi zbylo méně než 80 px, tak zůstane jen silnice. */
@media (max-width: 1119px) {
  .sluzby > .wrap::after { content: none; }
}
@media (max-width: 1059px) {
  .sluzby > .wrap::before { --s: .64; }
}
/* Karty pod sebou: vedle wordmarku zbývá pár desítek px, silnice by byla jen šmouha
   v rohu. Na telefonu služby bez vodoznaku. */
@media (max-width: 900px) {
  .sluzby > .wrap::before { content: none; }
}

/* ---- O FIRMĚ · MOTTO ----------------------------------------------------------
   Kůň z loga (Kryštof 29. 9.: „spíš reálného koně, co mají, a z druhé strany znova,
   ale zrcadlit“): vlevo běží doprava, vpravo jeho zrcadlo běží doleva, oba k větě
   „Naším cílem…“ uprostřed. Hlavy se zastaví 40 px před sloupcem citátu; šířka rámu
   se počítá v ch písma citátu (p má max-width 19ch), aby bezpečná zóna držela při
   každé velikosti titulku. Výška koně = 84 % citátu s podpisem, na středu.
   Na 1440 px ořízne okraj okna konce hřívy, na širokém monitoru je kůň celý a prameny
   se k ocasu zužují do ztracena, takže nikde nekončí useknutou hranou.
   Zrcadlo je týž rámeček přes scaleX(-1): stejná maska, stejná bezpečná zóna.
   Kůň z loga je kresba z tenkých tahů, proto víc než plošné motivy: grafit 6 %. */
.pribeh-motto::before,
.pribeh-motto::after {
  font: 700 var(--t-h2) / 1 var(--f-display);
  top: clamp(48px, 7vw, 112px);
  bottom: 0;
  left: 0;
  width: calc(50% - 9.5ch - 40px);
  background-color: var(--text);
  opacity: .06;
  -webkit-mask-image: url('../brand/vodoznak/ndm_vodoznak_kun.svg');
  mask-image: url('../brand/vodoznak/ndm_vodoznak_kun.svg');
  -webkit-mask-position: right center;
  mask-position: right center;
  -webkit-mask-size: auto 84%;
  mask-size: auto 84%;
}
.pribeh-motto::after {
  left: auto;
  right: 0;
  transform: scaleX(-1);
}
/* Pod 1100 px by z koní zbyly jen hlavy natlačené na citát; na telefonu je motto
   přes celou šířku a vedle něj není kam. */
@media (max-width: 1099px) {
  .pribeh-motto::before,
  .pribeh-motto::after { content: none; }
}

/* ---- DOKUMENTY ----------------------------------------------------------------
   Jediný technický motiv v prázdném poli pod seznamem: konstrukční výkres palety
   (glyph v2 v modulové síti 12). Síť odchází za pravý okraj okna jako list výkresu,
   který pokračuje. Žádný řádek dokumentu nezdobí. Grafit: obrys 7 %, síť 3,5 %,
   plocha 2,4 %.
   Kotví se od KONCE SEZNAMU, ne od spodku sekce: poznámka pod seznamem má různou
   výšku a od spodku by výkres vyjel nahoru do posledního dokladu.
   - od 1200 px vedle poznámky: čtverec výkresu 396 px od pravé hrany seznamu, síť
     začíná 460 px od ní; poznámka má max. 62ch ≈ 580 px, takže mezi ní a sítí
     zbývá při 1200 px aspoň 40 px a na širších oknech víc,
   - užší: pod poznámkou, v papírovém pásu před patičkou (2 × --sekce: spodek sekce
     + horní okraj patičky). Tmavá deska patičky je positioned a leží v DOM později,
     takže případný přesah výkresu vždy zakryje. */
.ndm-dokumenty .doklady-list::after {
  top: calc(100% + 28px);
  left: calc(100% - 468px);
  right: calc(50% - 50vw);
  height: 260px;
  background-color: var(--text);
  opacity: .07;
  -webkit-mask-image: url('../brand/vodoznak/ndm_vodoznak_konstrukce.svg');
  mask-image: url('../brand/vodoznak/ndm_vodoznak_konstrukce.svg');
  -webkit-mask-position: left 0 top 0;
  mask-position: left 0 top 0;
  -webkit-mask-size: 2400px 260px;
  mask-size: 2400px 260px;
}
.ndm-dokumenty .doklady::before { content: none; }
@media (max-width: 1199px) {
  .ndm-dokumenty .doklady-list::after { content: none; }
  .ndm-dokumenty .doklady::before {
    content: "";
    top: calc(100% - var(--sekce) + 20px);
    right: 0;
    width: 286px;
    height: 143px;
    background-color: var(--text);
    opacity: .07;
    -webkit-mask-image: url('../brand/vodoznak/ndm_vodoznak_konstrukce.svg');
    mask-image: url('../brand/vodoznak/ndm_vodoznak_konstrukce.svg');
    -webkit-mask-position: left 0 top 0;
    mask-position: left 0 top 0;
    -webkit-mask-size: 1320px 143px;
    mask-size: 1320px 143px;
  }
}

/* ---- KONTAKTY -----------------------------------------------------------------
   Stopa běhounu (glyph Trakce z v2) vpravo v řádku nadpisu: šípy dezénu míří dolů
   a zajíždějí pod letecký snímek, jako by sem vůz právě přijel. Mapa je silná,
   takže nic dalšího na stránce. Uzel trasy (glyph Uzel) byl zkoušený a vyřazený:
   ve výřezu pod mapou z něj zbyla horní půlka a četla se jako písmeno „f“.
   Pravá hrana drží 40 px od hrany mapy (tedy od obsahu, ne od okna), aby stopa
   nevykoukla z jejího zaobleného rohu. Grafit 4,5 %. */
.ndm-kontakty .stranka-uvod::after {
  --stopa: clamp(120px, 16.7vw, 240px);
  width: var(--stopa);
  height: var(--stopa);
  right: max(calc(var(--okraj) + 40px), calc(50% - var(--max) / 2 + 40px));
  bottom: calc(var(--stopa) * -.42);
  background-color: var(--text);
  opacity: .045;
  -webkit-mask-image: url('../brand/vodoznak/ndm_vodoznak_trakce.svg');
  mask-image: url('../brand/vodoznak/ndm_vodoznak_trakce.svg');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

/* Tisk a vynucené barvy: vodoznak je jen atmosféra, pryč s ním. */
@media print, (forced-colors: active) {
  .sluzby > .wrap::before,
  .sluzby > .wrap::after,
  .pribeh-motto::before,
  .pribeh-motto::after,
  .ndm-dokumenty .doklady-list::after,
  .ndm-dokumenty .doklady::before,
  .ndm-kontakty .stranka-uvod::after { content: none; }
}