/* ============================================================
   AUTOSKLO KRAVČUK — štýly

   Nástupca webu `kravcuk/`. Kostra (tokeny, mriežka, navigácia,
   tlačidlá, karty, otázky, pätka) je odtiaľ prevzatá aj s poznámkami,
   lebo je odmeraná a otestovaná. Zmenilo sa to, čo firma predáva.

   ČO JE INAK OPROTI STAREJ STRÁNKE
   1. INCON sa nikde nespomína. Klient sa od nich odpojil.
   2. Prvé je autosklo, okná a dvere zostávajú ako druhá vetva.
      V stavbe stránky to nesie hierarchia, nie iné farby: autosklo
      má vlastnú podstránku a šesť kariet na úvode, okná jeden pás
      a vlastnú podstránku. Rovnaký slovník tvarov pre obe — je to
      jedna firma, nie dva weby zlepené k sebe.
   3. Akcent je sklenená modrá, nie orechová. Materiál, ktorý firma
      predáva v aute aj v dome, je ten istý — sklo. Modrá to spája,
      teplé drevo by autoskla vylučovalo.
   4. Znakom je STRIEŠKA z loga (`--strecha`, clip-path). Predtým to
      bol oranžový štvorec bez významu. Motto „všetko pod jednou
      strechou" tak nie je len veta v hlavičke, ale znak, ktorý sedí
      pri každom štítku sekcie.

   Poradie: tokeny → poznámka o prechode stránok → základ → lišta a navigácia →
   tlačidlá → hlavička → sekcie → komponenty → galéria → formulár →
   pätka → responzívne.
   ============================================================ */

/* ---------- 1. TOKENY ---------- */
:root {
  --biela:       #FFFFFF;
  /* Pás medzi bielymi sekciami. Späť na TEPLÝ papier (20. 8.).
     Autosklová verzia ho mala chladný (#F4F6F8), lebo teplá sivá pod
     modrým akcentom vyzerá špinavo — oko v nej hľadá žltú, ktorú modrá
     nemá. Po prechode na tehlový akcent platí presný opak: chladná
     sivá pod teplým akcentom vyzerá ako neumytá obrazovka. */
  --papier:      #F8F6F4;
  --tmava:       #14171A;   /* horná lišta a pätka */
  --tmava-2:     #1E2226;

  --text:        #16191C;
  --text-tichy:  #56606A;
  --text-sv:     #EBEEF0;
  --text-sv-tich: #A4ACB3;

  /* TEHLOVÁ — jediná akcentová farba webu (20. 8.).

     PREČO NIE MODRÁ. Autosklová verzia stála na sklenenej modrej
     (#12557E) a dávala zmysel: firma predávala sklo. Servis okien
     a dverí predáva remeslo a to, že k vám niekto príde domov — a tam
     je modrá dvakrát nevýhodná. Je to default každého druhého
     remeselníckeho webu, takže sa ňou nedá odlíšiť, a číta sa
     technicky práve v situáciách, ktoré sú pre zákazníka nepríjemné
     (netesniace okno, zabuchnuté dvere). Teplá farba číta ako
     „príde človek".

     Nie je to ani nová značka: Kravčuk je pôvodom stolárska firma
     a okná na starom webe orechovú už mali.

     PREČO #8F3F14 A NIE #9A4718 Z DRUHEJ VETVY. Orechová z druhej
     vetvy má na bielej 6,4 : 1 — to je AA, ale nie AAA. Kým bola
     farbou jednej podstránky, dalo sa s tým žiť; ako jediná farba
     celého webu už nie. Web má vrstvu pre starších návštevníkov
     (prepínač veľkosti písma) a zhoršiť pri nej kontrast je skutočná
     strata. #8F3F14 je tá istá teplá tehlová o stupeň tmavšie
     a má 7,27 : 1, teda AAA aj pre drobný text. */
  --akcent:      #8F3F14;
  --akcent-tmavy:#7A3410;   /* 9,0 : 1 — pre :hover */
  /* Na tmavej lište 8,1 : 1, na tmavej sekcii 7,2 : 1 — AAA na oboch.
     Tmavší jantár (#D98A4E) mal na tmavej sekcii len 5,9 : 1, čo pri
     drobnom texte v pätke nestačí. */
  --akcent-sv:   #E0A06A;
  --akcent-jemny:#FAF1EA;   /* podklad zvýraznených blokov */

  --linka:       #E0E3E6;
  --linka-sv:    rgba(237, 240, 242, .2);

  /* Chyba vo formulári. Nie čistá červená (#FF0000) — tá na bielej
     žiari a pri troch chybách naraz vyzerá stránka ako poplach.
     Kontrast 6,3 : 1, teda čitateľná aj v drobnom texte pod poľom. */
  --chyba:       #A32219;
  --chyba-jemna: #FCEDEC;

  --sirka: 1240px;

  /* Bočný okraj stránky a z neho odvodená šírka pre prvky, ktoré nesú
     odsadenie AJ `max-width` na tom istom prvku (navigácia, horná lišta,
     hlavička podstránky, text vo video páse).

     Pri `box-sizing: border-box` si odsadenie ukrojí z `max-width`, takže
     ich obsah začínal na 140 px, kým obsah sekcií na 100 px — logo teda
     nestálo na tej istej zvislej osi ako nadpis pod ním. Pripočítaním
     okrajov k šírke sa obsahový box vráti presne na 1240 px a všetko na
     webe stojí na jednej osi. */
  --okraj: clamp(1.1rem, 3.5vw, 2.5rem);
  --sirka-plna: calc(var(--sirka) + 2 * var(--okraj));

  /* Ako hlboko pod navigáciou začína prvý text stránky. Musí to byť
     jedna hodnota pre všetky štyri stránky — pri preklikaní je skok
     v tejto výške to prvé, čo oko zachytí.

     Rozišlo sa to takto: podstránky dostali komponent `.hlava`,
     ale kontakt stojí na obyčajnej `.sekcia`, ktorej 5,5rem hore je
     odsadenie pre predel MEDZI sekciami uprostred stránky, nie pre
     hlavičku. Nadštítok tak bol na kontakte o 38 px nižšie než
     na Realizáciách. */
  --hlava-hore: clamp(2rem, 3.5vw, 3rem);

  /* Rohy. Web predáva okná, teda pravé uhly a rámy — pilulky (999 px) to
     popierali. 2 px nie je nula: úplne ostrý roh pôsobí na obrazovke
     tvrdo a pri 2px obryse sa vonkajšia hrana aj tak zdá ostrá.
     Vedľajší efekt, kvôli ktorému to začalo: pilulka má rovný okraj len
     v zvislom strede, hore a dole sa odtáča preč. Tlačidlo „Cenová
     ponuka" preto vyzeralo užšie než telefón nad ním, hoci obe končili
     presne na 1300 px. Rovná hrana ten klam odstránila. */
  --roh: 2px;

  /* Odznaky ikon. Percento, nie pixely: 54px odznak v páse istôt a 76px
     odznak vo vstupoch tak vyzerajú rovnako zaoblene, hoci sú rôzne veľké.
     Na hover sa roh takmer zrovná — 6 % je pri 54 px 3,2 px a pri 76 px
     4,6 px, teda blízko k `--roh` tlačidiel, ale nie úplná nula. Celkom
     ostrý roh pôsobí v plnej ploche tvrdo. */
  --roh-odznak:       16%;
  --roh-odznak-hover:  6%;

  /* STRIEŠKA — znak prevzatý priamo z loga.
     Sedlová strecha nakreslená jedným ťahom: dva vonkajšie body dole,
     vrchol hore, návrat po vnútornej hrane. Vzniká tak čiara s hrúbkou,
     nie plný trojuholník — presne ako v logu, ktoré je celé čiarové.

     Je to `clip-path` na pseudoprvku, nie SVG súbor ani ikonový font:
     znak sa opakuje pri každom štítku sekcie a takto ho nesie jedno
     pravidlo, farbu berie z `background` a škáluje sa s rozmermi prvku. */
  --strecha: polygon(0% 100%, 50% 0%, 100% 100%, 82% 100%, 50% 33%, 18% 100%);

  /* Medzera v trojstĺpcových mriežkach. Pás istôt a vstupy pod ním stoja
     nad sebou a ich ikony musia sedieť na tej istej osi — to nastane len
     vtedy, keď majú stĺpce rovnakú geometriu. Preto jedna hodnota pre
     oboch, nie dva rovnaké zápisy, ktoré sa raz rozídu. */
  --medzera-mriezka: clamp(1.5rem, 3vw, 3rem);

  --pismo: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --prechod: 220ms cubic-bezier(.2, .6, .2, 1);
}

/* ---------- 2. PRECHOD MEDZI STRÁNKAMI ----------
   ⚠️ ŽIADNY NIE JE, A JE TO ZÁMER. Nehľadaj tu `@view-transition`.

   Do 14. 8. tu bol prechod cez View Transitions: `navigation: auto`,
   `view-transition-name` na hlavičke a pätke a vlastné snímky `odchod`
   a `prichod` pre koreň stránky. Vyzeralo to ako chyba načítania —
   „stránka sa načíta, prebliknem a animácia sa zopakuje".

   Príčina nebola v načítaní. Server dostal na každú stránku presne jednu
   požiadavku (odmerané v logu). Prekrývali sa DVE vstupné animácie:

     1. prechod odsunul celý koreň stránky (opacity 0 → 1, posun 12 px),
     2. hneď pod ním nabiehala hlavička po krokoch (`prilet`, 700 ms
        s oneskorením do 360 ms) a odkrývali sa sekcie (`.odkry`).

   Oko to prečíta ako dve načítania za sebou, lebo tá istá vec — príchod
   obsahu — sa zahrá dvakrát. K tomu prehliadač pri prechode medzi
   dokumentmi drží na obrazovke starú stránku, kým sa nová načíta, takže
   po kliknutí sa chvíľu zdanlivo nedeje nič a potom to skočí.

   Zostala jedna vstupná animácia na stránku: nábeh hlavičky (blok 8)
   a odkrývanie sekcií pri scrolli (blok 21). To stačí.

   Keby sa prechod niekedy vracal, musí ísť preč jedno z tých dvoch —
   nie obe naraz. */

/* ---------- 3. ZÁKLAD ---------- */
*, *::before, *::after { box-sizing: border-box; }

/* ⚠️ TENTO RIADOK JE NUTNÝ, NIE KOZMETICKÝ.
   Atribút `hidden` má v prehliadači len `display: none` s najnižšou
   váhou, takže ho prebije KAŽDÉ vlastné pravidlo s `display` — a tento
   web ich má tri: `.dlazba { display: block }`, `.dlazba--prazdna
   { display: grid }` a `.formular__skupina { display: grid }`.

   Bez tohto riadku by prefiltrovaná galéria ukazovala všetky fotky
   a objednávka na okná by niesla polia o vozidle. Skript pritom robí
   všetko správne — chyba by bola neviditeľná a hľadala by sa dlho. */
[hidden] { display: none !important; }

/* VEĽKOSŤ PÍSMA PRE CELÝ WEB.
   Násobiteľ sedí na koreni, takže sa ním hýbe VŠETKO, čo je zapísané
   v `rem` — písmo, odsadenia, medzery v mriežkach. Prepínač „A A A"
   v hornej lište mu mení hodnotu (blok 9 v script.js).

   Prečo na `html` a nie na `body`: rozmery v `rem` sa počítajú z písma
   koreňa, nie tela. Zväčšenie tela by nafúklo len holý text a rozbilo
   pomer medzi ním a všetkým ostatným.

   `--sirka` zámerne zostáva v pixeloch. Keby sa škálovala aj ona, riadok
   textu by sa pri 130 % roztiahol na 1600 px a čítal by sa horšie, nie
   lepšie — zväčšené písmo má priniesť kratšie riadky, nie dlhšie. */
:root { --mierka: 1; }
html {
  font-size: calc(100% * var(--mierka));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Cieľ kotvy sa musí zastaviť POD lepkavou hlavičkou, nie za ňou.
   Bez tohto skončí po skoku z karty na `kontakt.html#objednavka` prvý
   riadok formulára schovaný pod ňou — a človek nevidí práve to, kvôli
   čomu klikol.

   Hodnota kryje navigáciu AJ orientačnú cestu plus vzduch. Na úvodnej
   stránke, kde cesta nie je, odsadí kotvu o ~48 px viac, než treba — je
   to prázdne miesto nad cieľom, nie chyba, a jedna hodnota pre všetkých
   šesť stránok je lacnejšia než triedy podľa toho, ktorá stránka cestu má.

   ⚠️ ZLOM JE TU TEN ISTÝ AKO PRI LOGU — a musí ním zostať. Kým bola
   hodnota zapísaná ako `clamp(9rem, 13vw, 10.5rem)`, riadila sa šírkou
   okna, kým výška hlavičky sa od 5. 9. riadi zlomom 900 px (nad ním má
   logo 48 px, pod ním 36). Tie dve veci sa rozišli presne medzi 901 px
   a ~1138 px: hlavička tam mala 148 px, ale `13vw` bolo ešte pod spodnou
   hranicou, takže odsadenie zostalo 144 px a kotva skončila 4 px POD
   hlavičkou. Odmerané na 935 px.

   Preto žiadne `vw`: dve hodnoty na tom istom zlome ako logo.
     nad 900 px: hlavička ~150 px, odsadenie 168 px → ~18 px vzduchu
     do 900 px: hlavička ~136 px, odsadenie 148 px → ~12 px vzduchu
   Kto bude meniť výšku loga alebo dosky, nech premeria obe. */
[id] { scroll-margin-top: 10.5rem; }

body {
  margin: 0;
  background: var(--biela);
  color: var(--text);
  font-family: var(--pismo);
  /* 1.0625rem = 17 px pri základnej mierke. V rem, nie v px — inak by
     prepínač veľkosti písma hýbal všetkým naokolo, len nie samotným
     textom odstavcov. */
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; }
/* Prehliadač rozdelí nadpis na riadky tak, aby boli podobne dlhé, namiesto
   toho, aby posledné slovo zostalo samé na treťom riadku. Robí to len pri
   nadpisoch (do ~6 riadkov), takže na odstavce sa to nedáva. Kde to
   prehliadač nevie, zalomí sa nadpis po starom a nič sa nerozbije. */
h1, h2 { text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); }
h3 { font-size: 1.2rem; line-height: 1.3; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }

.preskoc {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--tmava); color: var(--text-sv);
  padding: .8rem 1.2rem; text-decoration: none; font-size: .9rem;
}
.preskoc:focus { left: 1rem; top: 1rem; }

/* Text len pre čítačku obrazovky. `display: none` by ho skryl aj pred
   ňou; toto ho z obrazovky odstráni, ale v strome prístupnosti nechá.
   Nesie napríklad popis tabuľky cenníka, ktorý vidiacemu duplikuje
   nadpis nad ňou. */
.skryte {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Nadštítok nad nadpisom — verzálky, tichá sivá. */
.nadstitok {
  margin: 0 0 .8rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tichy);
}
/* So strieškou — ten istý znak, aký majú štítky sekcií
   (`.ciara-stitok`). Používajú ho nadštítky, ktoré uvádzajú celú
   stránku, nie položku v mriežke.

   Znak je širší než vysoký (14 × 9), aby sedel s proporciou strechy
   v logu. Zvislé zarovnanie je na `top: 50%` s posunom o polovicu
   výšky — verzálky nemajú dotiahy, takže optický stred riadku je
   presne v jeho geometrickom strede. */
.nadstitok--znak { position: relative; padding-left: 1.35rem; }
.nadstitok--znak::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 9px; margin-top: -5px;
  background: var(--akcent);
  clip-path: var(--strecha);
}

/* ---------- 4. SKLADBA ---------- */
.sekcia {
  padding: clamp(3.5rem, 6vw, 5.5rem) var(--okraj);
}
/* ⚠️ Ľavý okraj sa počíta, nie automaticky centruje.
   Predtým tu stálo `margin-inline: auto`. Kým bol každý priamy potomok
   sekcie na plnú šírku pásu, robilo to správnu vec — vycentrovalo pás
   1240 px v okne. Lenže potomok, ktorý je UŽŠÍ (nadpis sekcie na 30ch,
   úvodná veta podstránky na 52ch, právny text na 68ch), sa tým istým
   pravidlom vycentroval vnútri pásu — a text tak nestál ani na ľavej
   hrane, ani v strede stránky. Odmerané: nadpis „Čo pre vaše auto vieme
   urobiť" začínal na 448 px, kým mriežka kariet pod ním na 100 px.
   Postihnutých bolo 10 prvkov na všetkých šiestich stránkach.

   `max(0px, (100% - --sirka) / 2)` je presne ten odstup, ktorý pás
   odsadzuje od okraja sekcie. Percento sa počíta z obsahovej šírky
   sekcie, takže pri užšom okne vyjde 0 a prvok sadne na okraj.
   Pre prvky na plnú šírku je výsledok ten istý ako predtým. */
.sekcia > * {
  max-width: var(--sirka);
  margin-inline: max(0px, (100% - var(--sirka)) / 2) auto;
}

/* Svetlosivý pás namiesto tmavého bloku. */
.sekcia--tmava { background: var(--papier); }
/* Odsadenia dvoch susedných sekcií sa sčítavajú — pod kontaktom tak
   vznikla medzera 176 px a otázky sa odtrhli od zvyšku stránky. */
.sekcia--tesna { padding-bottom: clamp(1.5rem, 2.5vw, 2.25rem); }
/* Sekcia hneď za hlavičkou podstránky. Plných 5,5rem hore je odsadenie
   pre predel medzi dvomi rovnocennými blokmi — tu nad ňou stojí nadpis
   stránky, ktorý k nej patrí, takže taký odstup ich len rozdeľuje.
   Vďaka tomu sa na Ponuke zmestí všetkých šesť kariet nad ohyb. */
.sekcia--nadvazuje { padding-top: clamp(1.75rem, 3vw, 2.75rem); }
/* Sekcia, ktorá je zároveň hlavičkou stránky (kontakt). Berie tú istú
   výšku ako komponent `.hlava` na podstránkach, aby prvý text začínal
   pri preklikaní všade rovnako. */
.sekcia--hlava { padding-top: var(--hlava-hore); }

/* Nadpis sekcie: nadštítok a pod ním tučný nadpis, zarovnané vľavo. */
.ciara-stitok {
  display: block;
  margin: 0 auto clamp(1.4rem, 2.4vw, 1.9rem);
  max-width: var(--sirka);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tichy);
}
/* Nadpis sekcie pod štítkom. Štítok sám o sebe stačí tam, kde je obsah
   zrejmý (Postup, Galéria); tam, kde sekcia niečo tvrdí, ide pod štítok
   ešte veta. Spodná medzera je na nadpise, nie na mriežke pod ním —
   inak by mriežka bez nadpisu mala navrchu diera po ňom. */
/* 30ch, nie 22ch: pri 22 sa všetky nadpisy sekcií na tomto webe lámali
   na dva riadky, z ktorých druhý mal jedno-dve slová („…vieme / urobiť").
   Pri 30 sa všetky štyri zmestia na jeden riadok a dlhší nadpis sa
   zalomí na miere, ktorá sa ešte číta. */
.nadpis-sekcie {
  max-width: 30ch;
  margin-bottom: clamp(1.4rem, 2.4vw, 1.9rem);
}
/* Štítok tesne nad nadpisom patrí k nemu, tak sa medzera medzi nimi
   sťahuje. Bez toho by medzi dvomi riadkami toho istého bloku bolo
   toľko miesta ako medzi blokmi navzájom. */
.ciara-stitok:has(+ .nadpis-sekcie) { margin-bottom: .55rem; }

.ciara-stitok span { position: relative; padding-left: 1.35rem; }
.ciara-stitok span::before {
  content: "";
  position: absolute; left: 0; top: 50%;
  width: 14px; height: 9px; margin-top: -5px;
  background: var(--akcent);
  clip-path: var(--strecha);
}

/* ---------- 5. HORNÁ LIŠTA ---------- */
.horna-lista {
  background: var(--tmava);
  color: var(--text-sv-tich);
  font-size: .82rem;
}
.horna-lista__vnutro {
  max-width: var(--sirka-plna);
  margin-inline: auto;
  padding: .5rem var(--okraj);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: clamp(.8rem, 2vw, 1.6rem);
}
.horna-lista span { display: flex; align-items: center; gap: .5rem; }
.horna-lista__ciara { width: 1px; height: 14px; background: var(--linka-sv); }
.horna-lista a { color: var(--biela); font-weight: 600; text-decoration: none; }
.horna-lista a:hover { color: var(--akcent-sv); }

/* ---------- 4b. JEDNA FARBA, JEDNA ÚROVEŇ ----------
   Bloky pre druhú vetvu sú PREČ (20. 8.) a je to zámer, nie úklid.

   Autosklová verzia mala dve poschodia: horná lišta patrila firme
   a niesla vstup do druhej vetvy, navigácia patrila značke. Odlišovala
   ich farba — sklo modré, okná orechové. Dávalo to zmysel, kým išlo
   o dva rôzne svety (auto verzus dom) a kým mal predaj ostať potichu.

   Servis a predaj okien a dverí sú ale ten istý svet a ten istý
   zákazník. Schovávať predaj do hornej lišty by znamenalo, že ho
   človek hľadá tam, kde nikto nič nehľadá — v riadku s otváracími
   hodinami. Predaj je preto obyčajná položka navigácie a web má
   JEDNU farbu.

   Hierarchiu drží poradie a obsah, nie odtieň: „Opravy" a „Zámky"
   stoja v menu pred „Predajom", výzvy na akciu hovoria o oprave
   a na každej stránke stojí ponuka nového až za tým, čo sa dá opraviť.

   Zaniklo tým: `.svet-okna`, `.vetva-odkaz`, `.menu__vetva`,
   `.pas-vetva`, `.dvojblok--vetva`, `.filter--vetva`, `.pata__vetva`,
   voľba vo formulári a celá skupina tokenov `--vetva*`. */

/* ---------- 5b. PREPÍNAČ VEĽKOSTI PÍSMA ----------
   Tri stupne: 100 %, 115 %, 130 %. Nie je to ozdoba — na webe pre
   remeselnícku firmu v Prešove je značná časť návštevníkov nad 60 rokov
   a lupa v prehliadači je pre nich skrytá funkcia, o ktorej nevedia.
   „A A A" v lište pozná každý, kto niekedy videl stránku úradu.

   Písmená rastú aj vizuálne (0,8 → 1,05 rem), takže tlačidlo ukazuje,
   čo spraví, ešte pred kliknutím. Aktívny stupeň drží `aria-pressed`,
   nie trieda — čítačka obrazovky tak povie „stlačené". */
.pismo {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-right: auto;           /* tlačí zvyšok lišty doprava */
}
.pismo__popis { color: var(--text-sv-tich); }
.pismo button {
  min-width: 2rem;
  min-height: 1.9rem;
  padding: 0 .4rem;
  background: transparent;
  /* Výraznejší obrys než `--linka-sv` (20 % bielej) — pri tej sa tlačidlá
     na tmavej lište strácali a vyzerali ako obyčajný text. Ovládací
     prvok musí byť vidieť, že je to prvok. */
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: var(--roh);
  color: var(--text-sv);
  font-family: var(--pismo);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background var(--prechod), border-color var(--prechod);
}
.pismo button:nth-of-type(1) { font-size: .8rem; }
.pismo button:nth-of-type(2) { font-size: .92rem; }
.pismo button:nth-of-type(3) { font-size: 1.05rem; }
.pismo button:hover { background: rgba(255, 255, 255, .14); }
.pismo button[aria-pressed="true"] {
  background: var(--biela);
  border-color: var(--biela);
  color: var(--tmava);
}

/* ---------- 6. NAVIGÁCIA ---------- */
/* LEPKAVÝ BLOK: navigácia + orientačná cesta.
   Lepí sa obal, nie jeho dve časti zvlášť. Cesta by inak potrebovala
   `top` vo výške navigácie — a tá nie je konštanta: mení sa so šírkou
   okna (na mobile ju drží tlačidlo Menu so 48 px) a najmä s prepínačom
   veľkosti písma, pri 130 % je navigácia o ~20 px vyššia. Napevno
   zapísané odsadenie by sa pri prvom kliknutí na „A" rozišlo a cesta by
   buď preplávala cez navigáciu, alebo pod ňou nechala dieru.
   Obal nemeria nič — ani v CSS, ani v JavaScripte. */
.hlavicka {
  position: sticky;
  top: 0;
  z-index: 100;
  transition: box-shadow var(--prechod);
}
/* Kým je stránka celkom hore, hlavička splýva s obsahom. Po odscrolovaní
   ju od neho oddelí tieň.

   `je-odscrolovanú` prepína script.js (blok 4) na `#nav` a doteraz na ňu
   nebolo v CSS jediné pravidlo — bola to mŕtva trieda zdedená zo starého
   webu. Teraz má úlohu. `:has()` namiesto zásahu do skriptu: v tomto
   súbore sa už používa na dvoch miestach. */
.hlavicka:has(.je-odscrolovana) { box-shadow: 0 10px 20px -18px rgba(0, 0, 0, .55); }

/* ⚠️ `z-index` na navigácii je nutný, nie kozmetický. Mobilné menu je
   `position: absolute; top: 100%` vnútri nej, kým orientačná cesta stojí
   v kóde ZA hlavičkou. Bez tohto riadku by sa cesta vykreslila NAD
   rozbaleným menu a prekryla jeho prvú položku. */
.nav {
  position: relative;
  z-index: 2;
  background: var(--biela);
  border-bottom: 1px solid var(--linka);
}

.nav__vnutro {
  max-width: var(--sirka-plna);
  margin-inline: auto;
  padding: .9rem var(--okraj);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ZNAČKA — oficiálne logo, nie prekreslené.
   Klientovo logo je čiarová kresba „Kravčuk s.r.o." pod strieškou.
   Neprekresľujeme ho ani neprepisujeme na text: je to jeho majetok
   a je aj na aute a na dielni. Zdroj bol CMYK JPEG 1650 × 420 (698 kB),
   tu je z neho orezaný PNG s priehľadným pozadím (19 kB) — priehľadnosť
   treba na doske v hlavičke, kde sa snímka prevracia filtrom na bielu.

   Vedľa loga stojí nápis SERVIS OKIEN A DVERÍ oddelený vlasovou linkou.
   Logo samo o sebe nepovie, čo firma robí — a zameranie je práve to, čo
   má návštevník prečítať ako prvé. Zápis je zámerne skladačka
   (logo | nápis), nie zásah do loga. */
.znacka { display: flex; align-items: center; gap: .9rem; text-decoration: none; }

/* RÁMIK OKOLO LOGA A LOGO V TEHLOVEJ (5. 9.).
   Logo je čiarová kresba v čistej čiernej a na bielej hlavičke sa stráca:
   tenká čiara nemá plochu, ktorou by sa oko chytilo. Rámik jej tú plochu
   dá bez toho, aby ju zaplnil farbou — plné dosky (tehlová aj tmavá) sa
   skúšali a boli priťažké.

   ⚠️ RÁMIK JE ZÁMERNE TENŠÍ AKO TLAČIDLO VÝZVY? NIE — je rovnaký (2 px)
   a treba o tom vedieť: hlavička má odteraz ohraničený prvok na oboch
   koncoch a značka sa zdiaľky číta podobne ako tlačidlo. Vyvážené je to
   tým, že tlačidlo má text v tmavej a značka je celá tehlová, takže sa
   líšia náplňou, nie obrysom. Keby sa to ukázalo ako problém, prvý krok
   je stenčiť rámik značky na 1 px, nie meniť tlačidlo.

   PREČO DVE OBALOVÉ ZNAČKY. `__ramik` nesie okraj a odsadenie, `__tvar`
   nesie farbu. Nedá sa to zlúčiť: prefarbenie je maska a tá by okraj na
   tom istom prvku odstrihla spolu s pozadím. */
.znacka__ramik {
  display: inline-flex;
  border: 2px solid var(--akcent);
  border-radius: var(--roh);
  padding: .6rem 1rem;
  flex: none;
}
.znacka__tvar { display: inline-flex; }

/* NA MONITORE VÄČŠIE, NA MOBILE NIE.
   Na monitore je v hlavičke miesta nazvyš — značka aj celé menu zaberú
   ~900 px z 1240 — a lepkavá hlavička ukrojí z obrazovky pár percent.
   Na telefóne je to presne naopak: šírka je celá minutá (značka +
   tlačidlo Menu) a každý pixel výšky je pixel, ktorý nevidno z obsahu.

   Preto krok, nie jedna hodnota: 48 px na monitore, 36 px od 900 px
   nadol. 900 px je ten istý zlom, kde sa menu skladá pod hamburger —
   nový by znamenal tretie správanie hlavičky navyše. */
.znacka__logo {
  height: 48px;
  width: auto;
  flex: none;
}

/* PREFARBENIE LOGA NA TEHLOVÚ.
   Logo je čierna kresba na priehľadnom pozadí, takže sa dá použiť ako
   maska: farba dostane jeho tvar a obrázok už len drží rozmer.
   Prefarbiť sa nedá filtrom — `invert`/`sepia`/`hue-rotate` netrafia
   konkrétny odtieň, maska áno, presne.

   ⚠️ `opacity: 0` NA OBRÁZKU, NIE `visibility: hidden`. Skrytý obrázok
   vypadne zo stromu prístupnosti a s ním jeho `alt` — a odkaz na logu by
   zostal bez názvu. Pod 620 px, kde je skrytý aj nápis „Servis okien
   a dverí“, by čítačka ohlásila odkaz úplne bez mena. `opacity` obrázok
   len zneviditeľní a `alt` nechá tam, kde má byť.

   ⚠️ `@supports` NIE JE ZBYTOČNÝ. Bez neho by prehliadač, ktorý masku
   nevie, nakreslil plný tehlový obdĺžnik s neviditeľným obrázkom — teda
   fľak namiesto značky. Takto v ňom zostane pôvodné čierne logo. */
@supports (mask-image: url(a)) or (-webkit-mask-image: url(a)) {
  .znacka__tvar {
    background: var(--akcent);
    -webkit-mask: url(assets/logo-kravcuk.png) left center/contain no-repeat;
            mask: url(assets/logo-kravcuk.png) left center/contain no-repeat;
  }
  .znacka__logo { opacity: 0; }
}

.znacka__ciara { width: 1px; height: 44px; background: var(--linka); flex: none; }
.znacka__co {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--akcent);
  white-space: nowrap;
}

/* NA ÚZKOM OKNE NÁPIS ZMIZNE.
   Kým vedľa loga stálo jedno slovo („Autosklo"), zmestilo sa všade.
   „Servis okien a dverí" je 20 znakov v prestrkanom monospace, čo je
   pri 390 px o ~90 px viac, než v hlavičke zostáva — nápis podliezol
   pod tlačidlo Menu a prekryl ho. Zalomiť sa nedá (`nowrap` tu drží
   nápis na jednom riadku, inak by hlavička narástla na dva) a zmenšiť
   ho nemožno donekonečna: prepínač veľkosti písma ho vie ešte
   1,3× zväčšiť.

   Preto sa pod 620 px skryje aj s linkou. Nie je to strata: hneď pod
   hlavičkou stojí nadpis stránky, ktorý hovorí to isté, a v menu je
   „Opravy". Logo zostáva, takže značka je stále vidieť. */
@media (max-width: 620px) {
  .znacka__co, .znacka__ciara { display: none; }
}

.menu { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.9rem); }
.menu a {
  position: relative;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  padding: .3rem 0;
  transition: color var(--prechod);
}
.menu a:hover { color: var(--akcent); }
.menu a[aria-current="page"] { color: var(--akcent); }

/* Linka pod položkou vyrastie zľava. Je to ten istý prvok pre aktívnu
   stránku aj pre prejdenie myšou — aktívna ju má len natrvalo roztiahnutú,
   takže sa obe stavy nebijú. Tlačidlo výzvy je vyňaté, to má vlastný
   obrys a podčiarknutie by v ňom viselo. */
.menu a:not(.menu__cta)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -.15rem;
  height: 2px;
  background: var(--akcent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--prechod);
}
.menu a:not(.menu__cta):hover::after,
.menu a[aria-current="page"]:not(.menu__cta)::after { transform: scaleX(1); }
.menu__tel { display: none; }         /* číslo je v hornej lište */

/* Hlavná výzva v navigácii — pilulka s obrysom, ako u Andersenu. */
.menu__cta {
  border: 2px solid var(--akcent);
  border-radius: var(--roh);
  padding: .5rem 1.2rem !important;
  color: var(--text) !important;
  transition: background var(--prechod), color var(--prechod);
}
.menu__cta:hover { background: var(--akcent); color: var(--biela) !important; }
.menu__cta::after { display: none; }

/* HAMBURGER SO SLOVOM „MENU".
   Tri čiarky sú dohoda, nie značka. Kto ju nepozná — a to je značná časť
   ľudí nad 60 — nevie, že sa pod ňou skrýva celá navigácia, a na mobile
   je za ňou úplne všetko okrem loga. Slovo vedľa ikony to rieši úplne
   a stojí 44 px šírky.

   Text sa mení na „Zavrieť", keď je menu otvorené (rieši script.js),
   takže tlačidlo hovorí, čo spraví, nie kde ste. */
.hamburger {
  display: none;
  align-items: center;
  gap: .55rem;
  min-width: 44px; min-height: 48px;
  padding: 0 .2rem;
  background: none; border: 0; cursor: pointer;
  font-family: var(--pismo);
  font-size: .95rem;
  font-weight: 700;
  color: var(--text);
}
/* Bez zákazu zalomenia by sa „Zavrieť" pri najväčšom písme zlomilo na
   dva riadky a tlačidlo by pri prepnutí zmenilo výšku — celá navigácia
   by pri otvorení menu poskočila. */
.hamburger__text { white-space: nowrap; }

.hamburger__ciarky {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 26px; height: 20px;
}
.hamburger__ciarky span {
  display: block; height: 2px; width: 26px;
  background: var(--text);
  transition: transform var(--prechod);
}
.hamburger[aria-expanded="true"] .hamburger__ciarky span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__ciarky span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- 6b. ORIENTAČNÁ CESTA ----------
   Pás pod navigáciou na každej podstránke: „Domov › Autoskla".

   Robí dve veci naraz a obe sú pre staršieho návštevníka podstatné:
   povie MU, KDE JE (na webe bez toho človek po troch preklikoch nevie,
   či je ešte na tej istej stránke), a dá mu cestu späť jedným klikom.

   Prečo nie plávajúci domček v rohu, čo bolo pôvodné zadanie: samotná
   ikona sa musí uhádnuť a plávajúci prvok prekrýva obsah. Cesta má
   SLOVO „Domov", stojí vždy na tom istom mieste a nič nezakrýva.
   Domček je vedľa slova, nie namiesto neho.

   Odsadenie je veľké zámerne (48 px na dotyk) — je to najčastejšia
   záchranná brzda na celom webe. */
.cesta {
  position: relative;
  z-index: 1;              /* pod navigáciou — kvôli mobilnému menu */
  background: var(--papier);
  border-bottom: 1px solid var(--linka);
  font-size: .95rem;
}

/* Poistka na nízke okno. Telefón naležato má okolo 400 px na výšku
   a lepkavá hlavička s cestou by z toho zjedla tretinu. Pod 480 px sa
   cesta skryje — „Domov" zostáva v menu aj v pätke. Skrýva sa cesta,
   nie navigácia: navigácia nesie telefón aj výzvu na objednanie. */
@media (max-height: 480px) {
  .cesta { display: none; }
}
/* ⚠️ Cesta MUSÍ zostať na jednom riadku, odkedy je lepkavá.
   Kým sa smela zalomiť, narástla pri 360 px a najväčšom písme na dva
   riadky a s ňou celá lepkavá hlavička na 182 px — teda skoro štvrtina
   telefónu trvale preč. Odmerané na stránkach s dlhým názvom („Ochrana
   osobných údajov", „Kontakt a objednávka").

   Namiesto zalomenia sa skráti NÁZOV STRÁNKY (blok nižšie). Odkaz
   „Domov" je akčná časť a nesmie zmiznúť ani sa skrátiť, preto `flex: none`. */
.cesta__vnutro {
  max-width: var(--sirka-plna);
  margin-inline: auto;
  padding: 0 var(--okraj);
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: nowrap;
}
.cesta__domov {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;              /* akčná časť sa nesmie skrátiť */
  min-height: 48px;
  padding-right: .2rem;
  font-weight: 700;
  color: var(--akcent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cesta__domov:hover { color: var(--akcent-tmavy); }
.cesta__domov svg {
  width: 19px; height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linejoin: round;
  flex: none;
}
.cesta__sipka { color: var(--text-tichy); flex: none; }
/* Aktuálna stránka NIE JE odkaz — odkaz na miesto, kde človek už stojí,
   je jedna z vecí, ktoré ľudí na weboch najviac mätú.

   Keď sa nezmestí, radšej sa skráti tromi bodkami, než by zalomila celý
   pás na dva riadky. Je to údaj o polohe, nie ovládací prvok: aj skrátený
   „Ochrana osobných úda…" povie, kde človek je, a nič sa tým nestratí. */
.cesta__tu {
  color: var(--text-tichy);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 6c. SPÄŤ HORE ----------
   Objaví sa až po odscrolovaní o výšku obrazovky a má ikonu AJ slovo.
   Na dlhej stránke je návrat do navigácie inak otázka niekoľkých
   sekúnd šúchania — a klávesu Home pozná málokto.

   Na mobile sadá NAD lištu na palec (blok 20), inak by ju prekrylo. */
.hore {
  position: fixed;
  right: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(1rem, 2.5vw, 2rem);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .7rem 1.15rem;
  background: var(--biela);
  border: 2px solid var(--akcent);
  border-radius: var(--roh);
  color: var(--akcent);
  font-family: var(--pismo);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35);
  /* Skryté tlačidlo nesmie zostať v poradí tabulátora, preto sa aj
     zneviditeľní, nielen odsunie. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--prechod), transform var(--prechod), visibility var(--prechod),
              background var(--prechod), color var(--prechod);
}
.hore.je-vidiet { visibility: visible; opacity: 1; transform: none; }
.hore:hover { background: var(--akcent); color: var(--biela); }
.hore svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; }

/* ---------- 7. TLAČIDLÁ ----------
   Pilulka s obrysom a šípkou. Plná verzia je pre hlavnú akciu.

   `min-height` a `justify-content` sú tu preto, aby dve tlačidlá vedľa
   seba vyzerali ako jeden pár, nie ako dva náhodné útvary. Výška bola
   predtým daná len vnútorným odsadením, takže obe boli síce rovnako
   vysoké, ale rôzne široké — šírku určoval počet písmen v texte.
   Šírku teraz drží mriežka (`.uvod__tlacidla`), výšku toto pravidlo.
   3.25rem je zároveň nad hranicou 44 px na pohodlný dotyk prstom. */
.tlacidlo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .85rem 1.7rem;
  border: 2px solid var(--akcent);
  border-radius: var(--roh);
  background: var(--akcent);
  color: var(--biela);
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  transition: background var(--prechod), color var(--prechod),
              border-color var(--prechod);
}
/* Pri prejdení myšou sa posunie šípka, nie medzera. `gap` je vlastnosť
   rozloženia — jej animovanie núti prehliadač prepočítať skladbu pri
   každej snímke. `transform` beží na kompozitore a nehýbe ničím okolo. */
.tlacidlo::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
  transition: transform var(--prechod);
}
.tlacidlo:hover { background: var(--akcent-tmavy); border-color: var(--akcent-tmavy); }
.tlacidlo:hover::after { transform: translateX(4px); }

/* Vedľajšia akcia. Na svetlom podklade musí byť jasne slabšia než hlavná,
   inak si obe pýtajú klik rovnako nahlas a návštevník neklikne ani na jedno. */
.tlacidlo--obrys {
  background: transparent;
  color: var(--text);
}
.tlacidlo--obrys:hover { background: var(--akcent); border-color: var(--akcent); color: var(--biela); }

/* Na fotke a na tmavom podklade. Akcentová modrá tam prestáva fungovať —
   na tmavom pozadí padne kontrast pod 3 : 1 a tlačidlo sa stratí presne
   v tom bloku, kde má byť najvýraznejšie. Biely obrys drží kontrast
   za každých okolností, lebo pod ním je vždy stmavená fotka. */
.tlacidlo--svetle {
  background: transparent;
  border-color: rgba(255, 255, 255, .75);
  color: var(--biela);
}
.tlacidlo--svetle:hover {
  background: var(--biela);
  border-color: var(--biela);
  color: var(--text);
}

/* Textový odkaz so šípkou. Odsadenie zhora a zdola je tu kvôli dotyku —
   bez neho má odkaz výšku jedného riadku (26 px) a stojí samostatne,
   teda nie je to odkaz vnútri odstavca, ktorý sa zväčšiť nedá. */
.dalej {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding-block: .5rem;
  margin-top: 1rem;
  font-weight: 600;
  font-size: .98rem;
  text-decoration: none;
  color: var(--akcent);
  transition: gap var(--prechod);
}
.dalej::after { content: "→"; }
.dalej:hover { gap: .9rem; }

/* ---------- 8. HLAVIČKA STRÁNKY ----------
   Text vedľa fotky, nie v nej.

   Predtým ležal text v pravej polovici obrázka pod tmavým prechodom.
   Stálo to dvakrát: nadpis nezačínal na tej istej zvislej osi ako zvyšok
   stránky (mriežka sa rozišla hneď v prvom bloku) a z fotky bola vidieť
   len ľavá tretina, zvyšok prekryl závoj. Dve polovice vedľa seba dajú
   plnú fotku aj nadpis na osi, kde ho oko čaká. */
/* Spodné odsadenie je malé zámerne — sekcia istôt pod ním má vlastné
   a obe sa sčítavajú. Pri 4.5rem tu vznikalo 136 px prázdna medzi fotkou
   a prvou ikonou a hlavička sa vizuálne odtrhla od zvyšku stránky. */
.uvod {
  padding: var(--hlava-hore) var(--okraj) clamp(1rem, 2vw, 1.75rem);
}

/* Nábeh hlavičky pri načítaní. Zvyšok stránky sa odkrýva pri scrolli
   cez `.odkry` a IntersectionObserver, ale hlavička je na obrazovke hneď
   — tam by pozorovateľ nemal čo pozorovať. Preto čistý CSS s oneskorením
   po krokoch: nadštítok → nadpis → text → tlačidlá → poznámka, a fotka
   súbežne. Bez JavaScriptu a bez rizika, že prvok zostane priehľadný.

   Pri zapnutom obmedzení pohybu blok 23 skráti trvanie na 0,01 ms;
   vďaka `both` prvky rovno dosadnú do konečného stavu. */
@keyframes prilet   { from { opacity: 0; transform: translateY(16px); } }
@keyframes doFotky  { from { opacity: 0; transform: translateY(20px); } }
@keyframes odzoom   { from { transform: scale(1.06); } }

.uvod__blok > * { animation: prilet 700ms cubic-bezier(.2, .6, .2, 1) both; }
.uvod__blok > *:nth-child(1) { animation-delay:  40ms; }
.uvod__blok > *:nth-child(2) { animation-delay: 120ms; }
.uvod__blok > *:nth-child(3) { animation-delay: 200ms; }
.uvod__blok > *:nth-child(4) { animation-delay: 280ms; }
.uvod__blok > *:nth-child(5) { animation-delay: 360ms; }

.doska { animation: doFotky 800ms cubic-bezier(.2, .6, .2, 1) 120ms both; }
/* Obraz sa zároveň zľahka odzoomuje. Rám stojí, hýbe sa len fotka vnútri,
   takže to pôsobí, že sa záber usadil, nie že sa celý blok pohol. */
.doska > img { animation: odzoom 1400ms cubic-bezier(.2, .6, .2, 1) 120ms both; }

.uvod__mriezka {
  max-width: var(--sirka);
  margin-inline: auto;
  display: grid;
  /* Fotka o kúsok širšia než text — text má strop na 34rem a zvyšok
     šírky je pre neho aj tak stratený. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  /* `start`, nie `center`: pri centrovaní sedel text o 35 px nižšie než
     vrch fotky vedľa neho a zároveň nižšie než nadštítok na podstránkach.
     Takto majú text aj fotka spoločnú hornú hranu a prvý text stránky je
     na všetkých štyroch stránkach v rovnakej výške. */
  align-items: start;
}

/* Obal existuje kvôli pečiatke: `.doska` orezáva fotku (`overflow:
   hidden`), takže prvok, ktorý má z fotky prečnievať, nesmie byť v nej.
   Obal sám nič neorezáva a nábeh fotky ostáva na `.doska`. */
.doska-obal { position: relative; }

.doska {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--roh);
  background: var(--papier);
}
/* Okno s montážnikom je v ľavej tretine záberu — pri orezaní na 4:3
   ho stred posunie mimo. 38 % ho drží v obraze. */
.doska > img { width: 100%; height: 100%; object-fit: cover; object-position: 38% center; }

/* `min-width: 0` je nutné: prvok mriežky má vo východzom stave
   `min-width: auto` a nesmie klesnúť pod min-content svojho obsahu. */
.uvod__blok { max-width: 34rem; min-width: 0; }

.uvod__blok h1 { max-width: 16ch; }
.uvod__text {
  margin-top: 1.2rem;
  max-width: 46ch;
  font-size: 1.09rem;
  color: var(--text-tichy);
}

/* Mriežka, nie flex: `auto-fit` dá obom tlačidlám rovnaký diel šírky,
   takže dlhší text jedno z nich nenafúkne. Pod ~32rem sa poskladajú
   pod seba na plnú šírku.

   Stĺpec musí byť dosť široký na najdlhší popis („Chcem cenovú ponuku")
   aj so šípkou — pri 12.5rem sa text zalamoval na tri riadky a z pilulky
   bola kocka. Preto 15rem a `white-space: nowrap` ako poistka, keby text
   niekto neskôr predĺžil: radšej nech je vidieť, že sa nezmestil.

   `min(11rem, 100%)` a nie holé `11rem`: v úzkom stĺpci by pevná spodná
   hranica mriežku nafúkla na 2 plné stĺpce, tie by cez min-content
   vytlačili rodičovský stĺpec a celá stránka by dostala vodorovný
   posuvník. Stalo sa — na 360 px merala stránka 509 px namiesto 360.

   Šírka dvojice je zviazaná s najdlhším riadkom nadpisu („Staré okná
   von," = 7,1 × veľkosť písma). Predtým to bolo pevných 528 px a spod
   nadpisu prečnievala o 131 px — pôsobilo to, akoby text a tlačidlá
   patrili k dvom rôznym mriežkam.

   Prečo `calc` a nie pevná hodnota: nadpis má `clamp` a pod 1273 px sa
   zmenšuje. Pevná šírka by mu pod tou hranicou znova prerástla. Takto
   sa dvojica zmenšuje s ním a keď na dve tlačidlá vedľa seba prestane
   byť miesto, `auto-fit` ich poskladá pod seba — stále presne na šírku
   nadpisu. */
.uvod__tlacidla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: .7rem;
  margin-top: 2rem;
  max-width: calc(7.1 * clamp(2.2rem, 4.4vw, 3.5rem));
  min-width: 0;
}
/* Užšie odsadenie než majú tlačidlá inde: šírku určuje mriežka a v nej
   musí zostať miesto na text. `nowrap` je poistka — keby popis niekto
   predĺžil, nech je vidieť, že sa nezmestil, namiesto tichého zalomenia
   na dva riadky. */
.uvod__tlacidla .tlacidlo { white-space: nowrap; padding-inline: 1rem; }
.uvod__poznamka {
  margin-top: 1rem;
  font-size: .88rem;
  color: var(--text-tichy);
}

/* ---------- PEČIATKA „OD REMESELNÍKA · 25 ROKOV" ----------

   Pýtal si ju klient (24. 8. 2026). Nie je to odznak kvality, aké si
   firmy udeľujú samy — hovorí jedno overiteľné číslo a jednu vetu o tom,
   kto príde.

   PREČO KRUH A PREČO NA FOTKE. Prvá verzia bola hranatá a stála pod
   textom v ľavom stĺpci. Splývala tam: obdĺžnik s textom medzi ďalšími
   obdĺžnikmi s textom oko preskočí. Kruh je jediný oblý tvar na celej
   stránke (web má `--roh: 2px`, čiže samé ostré rohy), takže sa nedá
   prehliadnuť ani periférne. A keďže sedí na rohu fotky a prečnieva
   z nej, prerušuje obraz — to je jediné miesto, kde sa pohľad zastaví
   sám od seba.

   Biely podklad a tieň sú nutné, nie ozdobné: pod pečiatkou je fotka
   a tehlový text na fotografii by sa stratil.

   `rotate:` a nie `transform: rotate()`. Susedné prvky majú nábehy,
   ktoré transformom hýbu; samostatná vlastnosť sa s nimi nebije.
   Kde ju prehliadač nepozná, pečiatka je rovná a nič sa nerozbije. */
.peciatka {
  position: absolute;
  z-index: 2;
  /* Pravý dolný roh fotky. Doprava prečnieva do okraja stránky, nadol
     do bieleho pod fotkou — nikdy nie mimo stránky: `.uvod` má po
     stranách `--okraj` (najmenej 1,1rem), takže -1rem je stále vnútri.

     Do 25. 8. 2026 sedela vľavo dole, na vnútornej hrane fotky. Vpravo
     je jednak rovnaká strana ako na mobile (jedno správanie namiesto
     dvoch), jednak v tom rohu fotky býva prázdna stena, nie človek. */
  right: -1rem;
  bottom: -1.5rem;

  display: grid;
  place-content: center;
  justify-items: center;
  gap: .12rem;
  width: clamp(7rem, 11vw, 9.75rem);
  aspect-ratio: 1;
  margin: 0;
  /* Odsadenie od prstenca. Menej než 0,9rem a text sa ho dotýka —
     v kruhu je to vidieť viac než v obdĺžniku, lebo vzdialenosť
     k okraju sa mení s každým riadkom. */
  padding: .9rem;
  border-radius: 50%;
  border: 2px solid var(--akcent);
  /* Druhý prstenec. `outline` sleduje `border-radius`, takže netreba
     ďalší prvok ani pseudoprvok. */
  outline: 1px solid var(--akcent);
  outline-offset: 4px;
  background: var(--biela);
  box-shadow: 0 12px 30px rgba(20, 23, 26, .16);

  color: var(--akcent);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  text-align: center;
  line-height: 1.2;
  rotate: -9deg;
}
.peciatka__vrch,
.peciatka__spodok {
  font-size: clamp(.5rem, .62vw, .6rem);
  font-weight: 500;
}
/* „rokov skúseností" sa do kruhu na jeden riadok nezmestí. Šírka ho
   zalomí na dva a v kruhu to vyzerá zámerne, nie ako nedostatok miesta.
   Menšie preloženie než zvyšok pečiatky: dva riadky s rovnakým
   preložením ako jednoriadkový vrch pôsobia širšie než sú. */
.peciatka__spodok { max-width: 7.5em; letter-spacing: .06em; line-height: 1.3; }
/* Číslo je jediná vec, ktorá sa má prečítať cez miestnosť. Ide vo fonte
   stránky, nie v mono — v mono sú číslice úzke a „25" by sa v pečiatke
   stratilo. */
.peciatka__cislo {
  font-family: var(--pismo);
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  margin-block: .22rem .18rem;
}
@media (prefers-reduced-motion: reduce) {
  .peciatka { rotate: none; }
}

/* Hlavička podstránky. Jedna os vľavo: nadštítok → nadpis → jedna veta.
   Predtým to bola dvojstĺpcová mriežka s vetou vpravo zarovnanou na
   spodok — dve osi a text, ktorý nikam nepatril.

   `.hlava__vnutro` NIE je navyše: `.sekcia > *` dáva každému priamemu
   dieťaťu `max-width` a `margin-inline: auto`, takže veta s vlastnou
   menšou šírkou by sa vycentrovala na stred sekcie. Tá istá pasca ako
   na kontakte. */
.hlava {
  padding-top: var(--hlava-hore);
  padding-bottom: clamp(1.2rem, 2vw, 1.75rem);
}
.hlava__uvod {
  margin-top: 1rem;
  max-width: 52ch;
  font-size: 1.06rem;
  color: var(--text-tichy);
}


/* ---------- 9b. NÚDZOVÝ PÁS ----------
   Zabuchnuté dvere sú jediná služba na webe, ktorú človek hľadá
   v PANIKE — vonku, na mobile, bez trpezlivosti čítať. Preto to nie je
   karta v mriežke, ale samostatný pás cez celú šírku, a preto je v ňom
   TELEFÓN, nie odkaz na formulár.

   PREČO TMAVÝ. Ponúkalo sa dať mu signálnu červenú, ale tá je na tomto
   webe obsadená chybou vo formulári (`--chyba`). Od 20. 8. je navyše
   akcent celého webu tehlový, takže „teplá farba" už sama o sebe
   nerozlišuje nič — pás by v nej splynul so zvyškom stránky. Tmavý pás
   medzi bielou hlavičkou a papierovým pásom istôt je najsilnejší predel,
   aký sa na stránke dá spraviť; urgentnosť tu nesie kontrast a veľkosť
   čísla, nie odtieň.
   ⚠️ Ak klient jazdí NONSTOP, oplatí sa to prehodnotiť: vtedy má pás
   niesť aj slovo, ktoré konkurencia nemá.

   Tri stĺpce (znak · text · tlačidlo) sa pri 860 px skladajú pod seba
   a tlačidlo ide na plnú šírku — palec ho tak trafí bez mierenia. */
.nudza {
  background: var(--tmava-2);
  color: var(--text-sv);
  padding: clamp(1.3rem, 2.6vw, 1.9rem) var(--okraj);
}
.nudza__vnutro {
  max-width: var(--sirka);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.4vw, 1.8rem);
}
.nudza__znak {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  background: rgba(224, 160, 106, .16);
  border-radius: 14%;
}
.nudza__znak svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--akcent-sv);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.nudza__text { flex: 1 1 auto; min-width: 0; }
.nudza__nadpis {
  margin: 0;
  font-weight: 700;
  font-size: clamp(1.02rem, 1.7vw, 1.2rem);
  line-height: 1.3;
}
.nudza__veta {
  margin: .3rem 0 0;
  color: var(--text-sv-tich);
  font-size: .95rem;
  max-width: 60ch;
}
/* Telefón v tlačidle je zámerne celé číslo, nie slovo „Zavolať".
   Kto stojí pred dverami, potrebuje vidieť, že tam číslo naozaj je —
   a na počítači, kde `tel:` nič neurobí, si ho prečíta a vytočí. */
.nudza__tel {
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* Veľká verzia — hlavička stránky Zámky, kde je pás to prvé pod
   navigáciou a nesie celú váhu stránky. */
.nudza--velka { padding-block: clamp(1.8rem, 3.4vw, 2.6rem); }
.nudza--velka .nudza__znak { width: 66px; height: 66px; }
.nudza--velka .nudza__znak svg { width: 34px; height: 34px; }
.nudza--velka .nudza__nadpis { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }

@media (max-width: 860px) {
  .nudza__vnutro {
    flex-wrap: wrap;
    /* Znak a nadpis zostávajú v jednom riadku, tlačidlo padá pod ne. */
    row-gap: 1.1rem;
  }
  .nudza__text { flex: 1 1 12rem; }
  .nudza__tel { flex: 1 0 100%; text-align: center; }
}

/* ---------- 10. ISTOTY ----------
   Pás cez celú šírku okna, oddelený od zvyšku farbou aj vlasovými
   linkami. Predtým to bola voľne stojaca trojica na bielom a splývala
   s trojicou vstupov hneď pod sebou — dva rady po troch, rovnaké
   okrúhle ikony, len raz 62 px a raz 76 px. Vyzeralo to ako jedna
   rozbitá mriežka, nie ako dva bloky.

   DVE VRSTVY SÚ NUTNÉ. Vonkajšia nesie pozadie a ide na plnú šírku,
   vnútorná drží `max-width` a bočné odsadenie — presne to, čo robí
   `.sekcia > *`. Keď to bolo na jednom prvku, odsadenie si pri
   `box-sizing: border-box` ukrojilo zo šírky (obsah 1160 namiesto 1240)
   a ikony sa s tými pod nimi rozišli o 27 px na každom kraji. Pri
   1200 px to zhodou okolností sedelo, takže sa to ľahko prehliadne. */
/* Vonkajšia vrstva nesie pozadie a odsadenie, vnútorná šírku a mriežku —
   presne ako `.sekcia` a `.sekcia > *`. Odsadenie MUSÍ byť na vonkajšej:
   keď bolo na tej istej vrstve ako `max-width`, ukrojilo si zo šírky
   (obsah 1160 namiesto 1240) a stĺpce sa rozišli s tými pod nimi. */
.istoty {
  background: var(--papier);
  border-block: 1px solid var(--linka);
  padding: clamp(2rem, 3.5vw, 2.75rem) var(--okraj);
}
.istoty__vnutro {
  max-width: var(--sirka);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--medzera-mriezka);
  text-align: center;
}
/* `.istoty__vnutro--styri` (štvorstĺpcová varianta) tu stála do
   24. 8. 2026. Klient dal štvrtú istotu „Prídeme do 48 hodín" preč,
   zostali tri a tie sedia v základnej trojstĺpcovej mriežke. Trieda je
   zmazaná aj z HTML — mŕtve pravidlo v CSS je horšie než žiadne, lebo
   ho niekto raz použije a bude sa čudovať. */
.istota {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Deliaca linka ako pseudoprvok posunutý o pol medzery doľava, nie ako
   `border` na položke. Border by sedel na okraji stĺpca, teda o 24 px
   vedľa skutočného stredu medzi stĺpcami. */
.istota + .istota::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(var(--medzera-mriezka) / -2);
  border-left: 1px solid var(--linka);
}

.istota__odznak {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: var(--roh-odznak);
  background: var(--akcent);
  margin-bottom: .9rem;
  transition: border-radius var(--prechod);
}
/* Istoty nie sú odkazy, tak sa pri prejdení myšou mení LEN roh — žiadne
   nadvihnutie ani zmena farby. Tie by sľubovali kliknutie, ktoré nikam
   nevedie. Zrovnanie rohu je odozva, nie pozvánka.

   Odozva sa spúšťa nad SAMOTNÝM odznakom (54 × 54 px), nie nad celým
   stĺpcom. Kým visela na `.istota:hover`, mala citlivá plocha cez 300 × 150
   px — pri prechode myšou cez pás sa striedavo rozblikali všetky štyri
   odznaky, hoci kurzor nebol ani blízko pri nich. Malý cieľ znamená, že
   sa odozva objaví vtedy, keď si ju človek naozaj vypýtal. */
.istota__odznak:hover { border-radius: var(--roh-odznak-hover); }
.istota__odznak svg { width: 25px; height: 25px; fill: none; stroke: var(--biela); stroke-width: 1.7; }
.istota__nadpis { font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
.istota p { color: var(--text-tichy); font-size: .92rem; max-width: 34ch; }

/* ---------- 12. PÁS S VIDEOM ---------- */
.pas {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: clamp(400px, 52vh, 460px);
  max-height: 78vh;
  overflow: hidden;
  background: var(--tmava);
}
.pas__plagat, .pas__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Video leží nad plagátom a plagát je tá istá snímka, z ktorej vzniklo. */
.pas__video { opacity: 0; transition: opacity 900ms ease; z-index: 1; }
.pas__video.je-vidiet { opacity: 1; }

.pas__zavoj {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, rgba(10, 12, 14, .8) 0%, rgba(10, 12, 14, .4) 45%, rgba(10, 12, 14, 0) 78%);
}
.pas__text {
  position: relative; z-index: 3;
  max-width: var(--sirka-plna);
  height: 100%;
  margin-inline: auto;
  /* Spodná hranica 2,25rem, nie 1,5: pri 390 px vychádzalo zo 4vw len
     24 px a text sa v celoplošnom páse lepil na hornú hranu. */
  padding: clamp(2.25rem, 4vw, 3rem) var(--okraj);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--biela);
}
.pas__text .nadstitok { color: rgba(255, 255, 255, .8); }
.pas__veta {
  margin: 0;
  max-width: 28ch;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
/* Doveta pod hlavnou vetou pásu. Užšia než veta nad ňou (34ch oproti
   28ch pri väčšom písme), aby zostal blok textu zľava zarovnaný do
   podobného obdĺžnika a nerozbil sa do schodov. */
.pas__doveta {
  margin: 1rem 0 0;
  max-width: 44ch;
  color: rgba(255, 255, 255, .82);
  font-size: 1rem;
}
.pas__text .tlacidlo { align-self: start; margin-top: 1.6rem; }

/* ⚠️ TEXT SA DVÍHA NAD GEOMETRICKÝ STRED, A JE TO ZÁMER.
   `justify-content: center` posadí blok presne do stredu pásu — odmerané,
   185 px nad ním aj pod ním. Na obrazovke to napriek tomu vyzerá nízko
   a dôvody sú dva, oba skutočné:

     1. Lepkavá hlavička (~75 px) prekrýva vrch pásu vždy, keď pás vyplní
        obrazovku. Viditeľná plocha je teda o tých 75 px nižšia a stred
        obsahu sa v nej ocitá pod stredom.
     2. Blok je zarovnaný vľavo a ťažký hore (štítok + veľký nadpis).
        Taký útvar oko vníma nižšie, než kde naozaj je — optický stred
        leží nad geometrickým.

   Prídavok naspodku zdvihne obsah o svoju polovicu. Vyjde z toho stred
   obsahu na 40 % výšky pásu namiesto 50 %.

   `min(13vh, 7vw)` a nie samotné `13vh`: výška pásu je `min(16/9 šírky,
   78vh)`, takže pri úzkom okne ju určuje ŠÍRKA a prídavok počítaný len
   z výšky okna bol na taký pás priveľký — obsah vyliezol až k hornej
   hrane (odmerané 8 px pri 900 × 800 a mierke 1,3). Menšia z dvoch
   hodnôt drží zdvih na ~9 % pásu pri každom pomere strán.

   Podmienka `min-height: 820px` vypína zdvih na nízkych oknách, kde je
   pás krátky a obsah ho aj tak takmer vypĺňa. Pod 900 px šírky sa
   neuplatní vôbec. */
@media (min-width: 900px) and (min-height: 820px) {
  .pas__text { padding-bottom: calc(clamp(2.25rem, 4vw, 3rem) + min(13vh, 7vw)); }
}

/* ---------- 13. PONUKA ----------
   Mriežka 3 × 2. Karta nesie všetko naraz: značku typu otvárania, názov,
   jednu vetu a podpoložky. Predošlý rozbaľovací hárok mal šesť riadkov
   po 100 px, šiesty začínal na 943 px pri výreze 950 — celú ponuku
   nebolo vidieť bez scrollovania a obsah až po kliknutí.

   Stĺpce sú zadané napevno (3 → 2 → 1), nie cez `auto-fit`. Pri šírke
   1240 px a mieste na štyri stĺpce by ich `auto-fit` štyri aj spravil
   a rozpadlo by sa to na 4 + 2. */
.ponuka {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.25rem);
}

/* Zvislý flex, nie mriežka. Rozdiel je jediný, ale podstatný: v stĺpcovom
   flexe vie posledný prvok cez `margin-top: auto` zhltnúť voľné miesto
   a sadnúť na spodok karty. Vďaka tomu stojí výzva „Objednať →" na tej
   istej výške vo všetkých kartách riadku, hoci majú rôzne dlhé texty.
   V mriežke s `align-content: start` to nejde — voľné miesto tam ostáva
   za poslednou stopou, mimo dosahu okrajov prvku. */
.karta {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: clamp(1rem, 1.5vw, 1.25rem);
  background: var(--biela);
  border: 1px solid var(--linka);
  border-radius: var(--roh);
  transition: border-color var(--prechod);
}
.karta:hover { border-color: var(--akcent); }

/* Karta ako odkaz do formulára. Je to skutočný `<a>`, nie `<article>`
   s poslucháčom na kliknutie: takto sa dá otvoriť v novom paneli, funguje
   klávesnica aj čítačka obrazovky a odkaz sa dá skopírovať. */
/* `h2` aj `h3`: karty autoskiel na úvode používajú `h3` (nad mriežkou je
   nadpis sekcie), karty okien `h2` (nad nimi je len štítok). Keby tu stálo
   len `h3`, polovica kariet by na prejdenie myšou nereagovala. */
.karta--odkaz { text-decoration: none; }
.karta--odkaz:hover h2, .karta--odkaz:hover h3 { color: var(--akcent); }
.karta--odkaz h2, .karta--odkaz h3 { transition: color var(--prechod); }

/* Výzva na spodku karty. Bez nej by nič nenaznačovalo, že sa karta dá
   kliknúť — obrys, ktorý na hover zmodrie, vidí len myš, nie prst.
   Preto je to trvalý text, nie stav pri prejdení. */
.karta__vyzva {
  margin-top: auto;
  padding-top: .5rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .88rem;
  font-weight: 600;
  color: var(--akcent);
}
/* Hýbe sa šípka, nie medzera — `gap` je vlastnosť rozloženia a jeho
   animovanie núti prehliadač prepočítať skladbu pri každej snímke. */
.karta__vyzva::after { content: "→"; transition: transform var(--prechod); }
.karta--odkaz:hover .karta__vyzva::after { transform: translateX(4px); }

/* Značka typu otvárania z výrobného výkresu — jediné, čo z pôvodného
   hárku zostalo. Je to čiarová kresba, nie plný odznak: odznaky nesú
   istoty a vstupy na úvodnej, tieto sú výkres. */
.karta__znak { display: block; margin-bottom: .15rem; }
.karta__znak svg {
  width: 24px; height: 32px;
  fill: none;
  stroke: var(--akcent);
  stroke-width: 1.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.karta h2, .karta h3 { font-size: 1.1rem; line-height: 1.25; }
.karta__popis { margin: 0; font-size: .93rem; color: var(--text-tichy); }

/* Podpoložky ako jeden tichý riadok oddelený bodkami, nie ako štítky
   v rámčekoch. Rámčeky by pri štyroch položkách nafúkli kartu o dva
   riadky a šesť kariet by sa prestalo zmestiť na obrazovku. */
/* Položky idú POD SEBA, nie v riadku (24. 8. 2026).

   Predtým to bol zalamovaný riadok oddelený bodkami: „výmena vložky ·
   bezpečnostné zámky · kľúče na jeden systém". Klient ich dal preč a mal
   pravdu — pri troch a viac položkách sa z toho stala jedna dlhá veta,
   v ktorej sa oddeľovač strácal, a pri zalomení na dva riadky nebolo
   vidieť, kde jedna položka končí a druhá začína.

   Bodka zostala, ale ako značka na začiatku riadku. Tam robí to, čo má:
   hovorí „toto je zoznam". */
.karta__polozky {
  margin: .35rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .18rem;
  font-size: .83rem;
  color: var(--text-tichy);
}
.karta__polozky li {
  display: grid;
  grid-template-columns: .7rem 1fr;
  align-items: baseline;
}
.karta__polozky li::before {
  content: "·";
  color: var(--akcent);
  font-weight: 700;
}

/* ---------- 14. PROFILY A MATERIÁLY ---------- */
.profily {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.8rem;
  border-top: 1px solid var(--linka);
}
.profily__stitok {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-tichy);
  margin-bottom: 1rem;
}
.profily__zoznam {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem;
}
.profily__zoznam li {
  border: 1px solid var(--linka);
  border-radius: var(--roh);
  background: var(--biela);
  padding: .45rem 1.1rem;
  font-weight: 600;
  font-size: .92rem;
}
.profily__pozn { margin-top: 1.2rem; color: var(--text-tichy); max-width: 62ch; }

.materialy {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.material { padding-top: 1.2rem; border-top: 3px solid var(--akcent); }
.material h2 { font-size: 1.4rem; margin-bottom: .6rem; }
.material p { color: var(--text-tichy); font-size: .97rem; }
.material__pozn { margin-top: .9rem !important; font-size: .88rem; font-weight: 600; color: var(--text); }

/* ---------- 15. PREDTÝM A POTOM (len Okná a dvere) ---------- */
.porovnanie {
  --pos: 22%;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--tmava);
  user-select: none;
  cursor: ew-resize;
  /* Zvislé scrollovanie prstom po fotke nechávame prehliadaču, vodorovné
     patrí nám. Bez toho by sa buď nedalo prejsť sekciou na telefóne,
     alebo by sa čiara nedala potiahnuť. */
  touch-action: pan-y;
}
.porovnanie img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
/* Vrchná vrstva sa oreže po deliacu čiaru — obe fotky zostanú v plnej
   šírke a nič sa nedeformuje. */
.porovnanie__po {
  position: absolute; inset: 0;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}
.porovnanie.taha { cursor: grabbing; }

.porovnanie__delic {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: var(--biela);
  pointer-events: none;
}
.porovnanie__uchyt {
  position: absolute;
  top: 50%; left: 50%;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;
  border-radius: 50%;
  background: var(--biela);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}
.porovnanie__uchyt::before, .porovnanie__uchyt::after {
  content: "";
  position: absolute;
  top: 50%; margin-top: -5px;
  border-block: 5px solid transparent;
}
.porovnanie__uchyt::before { left: 10px; border-right: 7px solid var(--akcent); }
.porovnanie__uchyt::after { right: 10px; border-left: 7px solid var(--akcent); }

.porovnanie__popis {
  position: absolute;
  top: 1rem;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--biela);
  background: rgba(10, 12, 14, .65);
  border-radius: var(--roh);
  padding: .35rem .9rem;
  pointer-events: none;
}
.porovnanie__popis--vlavo { left: 1rem; }
.porovnanie__popis--vpravo { right: 1rem; }

/* ⚠️ 16. 8. tu bol posuvník pod fotkou (`.porovnanie__ovladanie`).
   Je preč aj s pravidlami — nie zakomentovaný. Mŕtve pravidlo na tomto
   webe už raz spôsobilo živú chybu (`grid-column: 2` v kontakte).
   Ovláda sa priamo fotka, klávesnicou deliaca čiara. */

/* Zameranie klávesnicou musí byť vidieť na fotke aj na bielom úchyte,
   preto akcentový prstenec a nie štandardný obrys. Kreslí sa na úchyt,
   lebo samotná čiara je vysoká cez celý obrázok a jej obrys by lemoval
   celú fotku. */
.porovnanie__delic:focus-visible { outline: none; }
.porovnanie__delic:focus-visible .porovnanie__uchyt {
  outline: 3px solid var(--akcent);
  outline-offset: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .3), 0 0 0 6px rgba(255, 255, 255, .35);
}

/* Veľká verzia na Realizáciách. Musí stáť ZA `.porovnanie`, inak jej
   rovnako špecifické pravidlo prebije pomer strán. Šírku nerobíme cez
   `100vw` — tá počíta aj so zvislým posuvníkom. */
/* Blok porovnania na Realizáciách — úzky a vycentrovaný. Predtým išiel
   cez celú šírku okna a pri 16:9 z toho na 1440px obrazovke bolo
   1440 × 810 — zabralo to celý výrez a pokyn „potiahnite čiaru" ostal
   mimo obrazovky. 46rem = 736 px, pri 16:9 teda 414 px na výšku: aj
   s hlavičkou stránky sa celé zmestí nad ohyb.

   (Na starom webe niesol tento max-width iný obal, ktorý sa volal
   `.rozdiel`; ten je aj s ukážkou na úvode preč.) */
.porovnanie-blok {
  max-width: 46rem;
  margin-inline: auto;
}
/* Pokyn patrí k obrázku, tak stojí hneď pod ním a na jeho osi — nie
   v hlavičke stránky o pol obrazovky vyššie. */
.porovnanie-blok__popis {
  margin: 1.1rem auto 0;
  max-width: 46ch;
  text-align: center;
  font-size: .97rem;
  color: var(--text-tichy);
}

/* Porovnanie cez celý pás (Opravy, „A keď sa oprava naozaj neoplatí").
   Strop 46rem vyššie je pre stránku, kde porovnanie stálo hneď pod
   hlavičkou a muselo sa zmestiť nad ohyb; tu je až na konci stránky,
   takže smie byť veľké — 1240 px pri 16:9 je 698 px na výšku.

   Odsadenie zhora ho oddeľuje od textu nad ním. Zaoblenie si nesie samo:
   nestojí v `.dvojblok__foto`, ktorý ho inde dáva obrázkom. */

/* ---------- 16. POSTUP ---------- */
/* Kroky sú karty s rovnakou rečou ako karty v Ponuke — biele, tenký
   obrys, ostrý roh. Predtým to bol stĺpec textu pod hrubou oranžovou
   linkou; štyri také linky vedľa seba kričali viac než samotné kroky
   a text bez rámca sa v širokej sekcii ťažko držal pokope.

   Číslo je v technickom písme (mono), ako štítky sekcií — je to údaj,
   nie nadpis, a takto sa nebije s názvom kroku. */
.postup {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.25rem);
}
.krok {
  display: grid;
  align-content: start;
  gap: .4rem;
  padding: clamp(1rem, 1.5vw, 1.35rem);
  background: var(--biela);
  border: 1px solid var(--linka);
  border-radius: var(--roh);
  transition: border-color var(--prechod);
}
.krok:hover { border-color: var(--akcent); }
.krok__cislo {
  display: block;
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--akcent);
}
.krok h2, .krok h3 { font-size: 1.06rem; line-height: 1.25; }
.krok p { color: var(--text-tichy); font-size: .93rem; }

.doplnok { margin-top: clamp(1.8rem, 3vw, 2.5rem); color: var(--text-tichy); }
.doplnok a { color: var(--akcent); font-weight: 600; text-decoration: none; border-bottom: 2px solid currentColor; }
.doplnok a:hover { color: var(--akcent-tmavy); }

/* ---------- 17. OTÁZKY ---------- */
.otazky { border-top: 1px solid var(--linka); }
.otazka { border-bottom: 1px solid var(--linka); }
.otazka summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.2rem 2.6rem 1.2rem 0;
  font-size: 1.1rem;
  font-weight: 700;
  transition: color var(--prechod);
}
.otazka summary::-webkit-details-marker { display: none; }
.otazka summary:hover { color: var(--akcent); }
.otazka summary::after {
  content: "";
  position: absolute;
  right: .4rem; top: 50%;
  width: 13px; height: 13px; margin-top: -6px;
  background:
    linear-gradient(var(--akcent), var(--akcent)) center/13px 2px no-repeat,
    linear-gradient(var(--akcent), var(--akcent)) center/2px 13px no-repeat;
  transition: transform var(--prechod);
}
.otazka[open] summary::after { transform: rotate(45deg); background-size: 13px 2px, 0 0; }
.otazka p { padding: 0 3rem 1.4rem 0; color: var(--text-tichy); max-width: 66ch; }

/* Mapa sa načíta až na kliknutie — do tej chvíle stránka nekomunikuje
   so žiadnou treťou stranou. Je v užšom stĺpci, tak je nižšia než keď
   stála na plnú šírku. */
/* Bez zadanej výšky: mapa sa roztiahne na výšku svojho riadku, ktorý je
   rovnaký ako riadok panelu nad ňou. `min-height` platí až na mobile,
   kde mriežka spadne do jedného stĺpca a riadky sa nevyrovnávajú. */
.mapa {
  position: relative;
  min-height: 200px;
  background: var(--papier);
  border: 1px solid var(--linka);
  border-radius: var(--roh);
  overflow: hidden;
}
/* Spúšťač nesie ikonu a adresu, nie len odkaz uprostred prázdna.
   Predtým to bola sivá plocha s drobným textom v strede a pôsobila ako
   diera v stránke, nie ako mapa, ktorá čaká na kliknutie. */
.mapa__spustac {
  position: absolute; inset: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--pismo);
  font-size: 1rem;
  font-weight: 600;
  color: var(--akcent);
  transition: background var(--prechod);
}
.mapa__spustac svg {
  width: 28px; height: 28px;
  fill: none;
  stroke: var(--akcent);
  stroke-width: 1.6;
  margin-bottom: .2rem;
}
.mapa__adresa {
  font-size: .88rem;
  font-weight: 400;
  color: var(--text-tichy);
}
.mapa__spustac:hover { background: rgba(176, 84, 29, .06); }
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; }

/* ---------- 18b. ZOZNAM SO STRIEŠKOU ----------
   Odrážkový zoznam, kde odrážku robí znak značky. Používa sa tam, kde
   ide o výpočet toho, čo zákazník dostane — nie na súvislý text.
   Odrážka sedí na prvom riadku (`top: .55em`), nie na strede položky:
   dvojriadková položka by inak mala znak medzi riadkami. */
.zoznam {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .65rem;
}
.zoznam li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--text-tichy);
}
.zoznam li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 12px; height: 8px;
  background: var(--akcent);
  clip-path: var(--strecha);
}
.zoznam--svetly li { color: var(--text-sv-tich); }
.zoznam--svetly li::before { background: var(--akcent-sv); }

/* ---------- 18b2. SÚVISLÝ TEXT ----------
   Právne stránky a všetko, čo sa naozaj číta po riadkoch. 68ch je horná
   hranica, pri ktorej oko ešte trafí začiatok ďalšieho riadku; pri plnej
   šírke 1240 px by riadok mal cez 120 znakov a text by sa čítal zle
   napriek tomu, že by „vyzeral dobre". */
.text { max-width: 68ch; }
.text h2 {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  margin-bottom: .8rem;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}
.text > h2:first-child { margin-top: 0; }
.text p { margin-bottom: 1rem; }
.text .zoznam { margin-bottom: 1.4rem; }
/* Odkaz v súvislom texte sa NESMIE líšiť len farbou. Farbosleposť má
   asi každý dvanásty muž a s vekom klesá aj citlivosť na kontrast —
   podčiarknutie je jediná značka odkazu, ktorá funguje vždy.
   Odsadenie od účiaria drží podčiarknutie pod dotiahmi písmen (p, y, j),
   takže text zostáva čitateľný. */
.text a,
.zoznam a,
.karta__popis a,
.otazka p a,
.upozornenie a,
.suhlas a,
.dvojblok__uvod a {
  color: var(--akcent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.text a:hover,
.zoznam a:hover,
.otazka p a:hover,
.suhlas a:hover { color: var(--akcent-tmavy); text-decoration-thickness: 2px; }
.text__datum {
  margin-top: clamp(2rem, 3.5vw, 2.75rem);
  padding-top: 1.2rem;
  border-top: 1px solid var(--linka);
  font-family: var(--mono);
  font-size: .85rem;
  color: var(--text-tichy);
}

/* ---------- 18c. UPOZORNENIE ----------
   Blok, ktorý nesie jednu dôležitú vetu navyše (spoluúčasť, lehota,
   podmienka). Ľavý pruh v akcente namiesto rámčeka dookola: rámček by
   z vety spravil kartu rovnocennú s okolím, pruh ju len pripne k textu,
   ku ktorému patrí. */
.upozornenie {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  padding: 1.1rem 1.3rem;
  background: var(--akcent-jemny);
  border-left: 3px solid var(--akcent);
  border-radius: 0 var(--roh) var(--roh) 0;
  font-size: .96rem;
}
.upozornenie strong { color: var(--akcent-tmavy); }

/* ---------- 18d. PÁS „VŠETKO POD JEDNOU STRECHOU" ----------
   Most medzi dvomi vetvami firmy. Autoskla sú prvé a majú na úvode
   šesť kariet; okná a dvere dostanú jeden pás — dosť na to, aby bolo
   jasné, že sa nezrušili, málo na to, aby odviedli pozornosť.

   Text je vľavo a fotka vpravo, teda opačne než v hlavičke stránky.
   Nie je to náhoda: rovnaké poradie by z pásu spravilo druhú hlavičku
   a oko by hľadalo ďalší nadpis stránky. */
.dvojblok {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.dvojblok__text h2 { margin-bottom: 1.1rem; max-width: 18ch; }
.dvojblok__uvod { color: var(--text-tichy); max-width: 46ch; margin-bottom: 1.4rem; }

/* Tlačidlo potrebuje vzduch nad sebou. Kým tu bol textový odkaz `.dalej`,
   niesol si vlastné odsadenie; plné tlačidlo ho nemá a lepilo sa na
   poslednú odrážku zoznamu nad ním. */
.dvojblok__text .tlacidlo { margin-top: clamp(1.5rem, 2.6vw, 2.1rem); }

.dvojblok__foto {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--roh);
  background: var(--papier);
}
.dvojblok__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Porovnanie ako pravý stĺpec sekcie „A keď sa oprava naozaj neoplatí".

   Prečo vedľa textu a nie pod ním: pod textom sa pás s pomerom 16 : 9
   a plnou šírkou 1240 px natiahne na 698 px a spolu s nadpisom, textom
   a pokynom sa do jednej obrazovky nezmestí. Stlačiť ho na výšku, aby
   sa zmestil, znamená pomer 3,7 : 1 — z fotky sa stane pás na plot.
   Vedľa textu je oboje v jednom výreze samo od seba a pás si smie
   nechať poctivý tvar.

   ⚠️ Toto pravidlo musí stáť ZA `.dvojblok`, nie pred ním. Špecificitu
   majú rovnakú, takže rozhoduje poradie — spredu ho `1fr 1fr` z
   `.dvojblok` prebilo a stĺpce zostali rovnaké.

   Stĺpce nie sú 1 : 1. Odstavec a zoznam znesú 430 px bez toho, aby
   sa lámali po dvoch slovách, a všetko, čo zvýši, patrí obrázku —
   ten je jediný dôvod, prečo sekcia takto vyzerá. */
.dvojblok--porovnanie {
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(1.75rem, 3.5vw, 3.25rem);
}
/* ⚠️ `margin-inline: 0` a `width: 100%` sú obe nutné. `.porovnanie-blok`
   sa inde centruje cez `margin-inline: auto`, lenže auto-okraje v mriežke
   rušia roztiahnutie na stĺpec: blok sa scvrkol na obsah a z obrázka
   zostalo 409 px namiesto 754. Zaoblenie si porovnanie nesie samo —
   nestojí v `.dvojblok__foto`, ktorý ho inde dáva obrázkom. */
.porovnanie-blok--vedla {
  max-width: none;
  width: 100%;
  margin-inline: 0;
}
.porovnanie-blok--vedla .porovnanie {
  width: 100%;
  border-radius: var(--roh);
}

/* Prehodené poradie — fotka vľavo, text vpravo. Používa sa na
   podstránke Autoskla, kde idú tri takéto bloky pod sebou: keby mali
   fotku stále vpravo, vznikol by na pravej strane stránky súvislý
   stĺpec obrázkov a stránka by sa čítala ako dva nesúvisiace pásy.
   `order` a nie iné poradie v kóde: v jednom stĺpci na mobile musí
   text zostať prvý na všetkých blokoch rovnako. */
.dvojblok--opacne .dvojblok__text { order: 2; }

/* Veľká strieška nad nadpisom pásu je PREČ (15. 8.). Hneď pod ňou stál
   druhý, malý znak pri štítku „Druhá vetva" — dve striešky nad sebou
   v jednom bloku si navzájom brali silu. Zostala tá pri štítku. */

/* ---------- 18e. VÝZVA NA ZÁVER ----------
   Posledný blok stránky. Na svetlom tehlovom podklade, nie na tmavom:
   tmavý pás máme v pätke hneď pod ním a dva tmavé bloky nad sebou
   splynú do jedného ťažkého konca stránky. */
.vyzva {
  background: var(--akcent-jemny);
  border-block: 1px solid #EBD9C9;
  padding: clamp(2.5rem, 5vw, 4rem) var(--okraj);
  text-align: center;
}
.vyzva > * { max-width: var(--sirka); margin-inline: auto; }
.vyzva h2 { max-width: 20ch; margin-inline: auto; }
.vyzva__veta {
  margin: 1rem auto 1.8rem;
  max-width: 52ch;
  color: var(--text-tichy);
  font-size: 1.05rem;
}
.vyzva__tlacidla {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .8rem;
}

/* ---------- 18f. GALÉRIA ----------
   Mriežka dlaždíc s filtrom nad ňou a zväčšením po kliknutí.

   Filtrovanie je na `hidden`, nie na `display: none` v CSS triede:
   skrytá dlaždica tak vypadne aj z prístupnostného stromu a z poradia
   tabulátora naraz, jedným atribútom. */
.filtre {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: clamp(1.4rem, 2.5vw, 2rem);
}
/* 48 px na výšku, nie 36 — filtre sú prvá vec, na ktorú sa v galérii
   klikne, a malý cieľ trafí prstom presne ten, kto ho trafiť nepotrebuje.
   48 px je hranica, pod ktorou sa chybovosť dotyku prudko dvíha, a pri
   trasúcej sa ruke to platí dvojnásobne. */
.filter {
  min-height: 48px;
  padding: .5rem 1.3rem;
  background: var(--biela);
  border: 1px solid var(--linka);
  border-radius: var(--roh);
  font-family: var(--mono);
  font-size: .86rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--text);
  cursor: pointer;
  transition: border-color var(--prechod), background var(--prechod), color var(--prechod);
}
.filter:hover { border-color: var(--akcent); }
.filter[aria-pressed="true"] {
  background: var(--akcent);
  border-color: var(--akcent);
  color: var(--biela);
}
.filtre__pocet {
  margin-left: auto;
  align-self: center;
  font-family: var(--mono);
  font-size: .82rem;
  color: var(--text-tichy);
}

.galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.9rem, 1.6vw, 1.25rem);
}
/* Dlaždica je tlačidlo, nie odkaz s `href="#"`. Otvára zväčšenie na tej
   istej stránke — to je akcia, nie navigácia, a klávesnica aj čítačka
   obrazovky to tak majú počuť. */
.dlazba {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--papier);
  border: 1px solid var(--linka);
  border-radius: var(--roh);
  cursor: zoom-in;
  transition: border-color var(--prechod);
}
.dlazba:hover { border-color: var(--akcent); }
.dlazba img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 500ms cubic-bezier(.2, .6, .2, 1);
}
.dlazba:hover img { transform: scale(1.045); }
/* Popis leží na fotke v prechode zdola. Prechod, nie plný pruh: pruh
   by odrezal spodok fotky vodorovnou hranou a mriežka by pri rôznych
   dĺžkach popisov vyzerala nerovno. */
.dlazba__popis {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.2rem .9rem .7rem;
  background: linear-gradient(rgba(10, 12, 14, 0), rgba(10, 12, 14, .78));
  color: var(--biela);
  font-size: .86rem;
  font-weight: 600;
  text-align: left;
}

/* Prázdna dlaždica — miesto, kam príde klientova fotka. Prerušovaný
   obrys hovorí „sem ešte niečo príde" bez toho, aby to musel niekto
   napísať do e-mailu. Pri odovzdaní webu sa jednoducho zmažú. */
.dlazba--prazdna {
  display: grid;
  place-items: center;
  gap: .4rem;
  border: 1px dashed #C3CBD2;
  cursor: default;
  color: var(--text-tichy);
  font-family: var(--mono);
  font-size: .8rem;
  text-align: center;
  padding: 1rem;
}
.dlazba--prazdna:hover { border-color: #C3CBD2; }
.dlazba--prazdna::before {
  content: "";
  width: 26px; height: 16px;
  background: #C3CBD2;
  clip-path: var(--strecha);
}

/* ---------- 18g. ZVÄČŠENIE FOTKY ----------
   Vlastné, nie <dialog>: dialóg by na starších Safari nefungoval bez
   polyfillu a tu ide o obrázok, nie o formulár. Zatvára ho Escape,
   kliknutie mimo fotky aj tlačidlo — každý zvyk je obslúžený. */
.lupa {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(8, 10, 12, .93);
}
.lupa.je-otvorena { display: grid; }
.lupa__obal { position: relative; max-width: 100%; }
.lupa img {
  max-width: min(94vw, 1400px);
  max-height: 78vh;
  width: auto; height: auto;
  border-radius: var(--roh);
}
.lupa__popis {
  margin-top: .9rem;
  color: var(--text-sv);
  font-family: var(--mono);
  font-size: .86rem;
  text-align: center;
}
.lupa__zavri, .lupa__krok {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--roh);
  color: var(--biela);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--prechod);
}
.lupa__zavri:hover, .lupa__krok:hover { background: rgba(255, 255, 255, .26); }
.lupa__zavri { top: -58px; right: 0; }
.lupa__krok--spat { left: -58px; top: 50%; margin-top: -23px; }
.lupa__krok--dalej { right: -58px; top: 50%; margin-top: -23px; }

/* ---------- 18h. CENNÍK ----------
   Tabuľka, nie mriežka kariet. Ceny sa čítajú porovnávaním riadkov pod
   sebou a karta každú cenu ostrovčekuje. Posledný stĺpec je vpravo
   a nezalamuje sa — číslo má stáť na jednej osi so všetkými ostatnými. */
.cennik-obal { overflow-x: auto; }
.cennik {
  width: 100%;
  border-collapse: collapse;
  font-size: .97rem;
}
.cennik th {
  padding: .7rem 1rem .7rem 0;
  text-align: left;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tichy);
  border-bottom: 1px solid var(--linka);
  white-space: nowrap;
}
.cennik td {
  padding: .95rem 1rem .95rem 0;
  border-bottom: 1px solid var(--linka);
  vertical-align: top;
}
.cennik td:first-child { font-weight: 600; }
.cennik td:last-child, .cennik th:last-child {
  padding-right: 0;
  text-align: right;
  white-space: nowrap;
}
.cennik td:last-child { font-weight: 700; }
.cennik__pozn { color: var(--text-tichy); font-size: .9rem; }

/* ---------- 18i. FORMULÁR ----------
   Objednávka. Delí sa na dve vetvy podľa toho, čo si návštevník vyberie
   v prvom kroku — autosklo alebo okná a dvere. Vetva, ktorá sa netýka,
   je `hidden`, takže z formulára zmizne aj pre čítačku obrazovky
   a jej polia nevstupujú do kontroly pri odoslaní.

   Prečo výber ako prvý a nie meno: pri autoskle a pri oknách sa pýtame
   na úplne iné veci (značka a rok výroby vs. obec a počet kusov).
   Keby sa pýtali všetky naraz, formulár má 16 polí a nevyplní ho nikto. */
.objednavka {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: start;
}

.formular { display: grid; gap: 1.15rem; }
.formular__skupina {
  display: grid;
  gap: 1.15rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linka);
}
.formular__stitok {
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tichy);
}
.formular__dvojica {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.15rem;
}

.pole { display: grid; gap: .4rem; min-width: 0; }
.pole > label {
  font-size: .84rem;
  font-weight: 600;
}
.pole--nutne > label::after {
  content: "*";
  margin-left: .25rem;
  color: var(--akcent);
}
.pole input, .pole select, .pole textarea {
  width: 100%;
  padding: .8rem .95rem;
  background: var(--biela);
  border: 1px solid #C9D0D6;
  border-radius: var(--roh);
  font-family: var(--pismo);
  font-size: 1rem;
  color: var(--text);
  transition: border-color var(--prechod), box-shadow var(--prechod);
}
.pole textarea { min-height: 7.5rem; resize: vertical; }
.pole input:focus, .pole select:focus, .pole textarea:focus {
  outline: none;
  border-color: var(--akcent);
  box-shadow: 0 0 0 3px rgba(18, 85, 126, .15);
}
.pole__pomoc { font-size: .85rem; color: var(--text-tichy); }

/* Pole predvyplnené z adresy (príchod z karty na úvodnej stránke).
   Krátke zvýraznenie povie „toto sme za teba vybrali" — bez neho človek
   nevie, či sa voľba prenieslaAlebo či to tak bolo od začiatku, a pre istotu
   ju preklikáva znova. Po 2,6 s zhasne; trvalé zvýraznenie by vyzeralo
   ako chyba vo formulári. */
@keyframes zhasni {
  from { border-color: var(--akcent); box-shadow: 0 0 0 3px rgba(18, 85, 126, .22); }
  to   { border-color: #C9D0D6;      box-shadow: 0 0 0 3px rgba(18, 85, 126, 0); }
}
.pole.je-predvyplnene select { animation: zhasni 2600ms ease-out both; }

/* Chyba sa píše POD pole, nie do neho ako zástupný text. Zástupný text
   zmizne, keď sa začne písať, a s ním aj informácia o tom, čo bolo zle. */
.pole__chyba {
  display: none;
  font-size: .85rem;
  font-weight: 600;
  color: var(--chyba);
}
.pole.je-zla input, .pole.je-zla select, .pole.je-zla textarea { border-color: var(--chyba); }
.pole.je-zla .pole__chyba { display: block; }

/* Výber vetvy — dve veľké dlaždice s prepínačom vnútri. Skutočné
   `input[type=radio]`, len vizuálne skryté: klávesnica ich obsluhuje
   šípkami, čítačka ich hlási ako skupinu a formulár funguje aj bez
   JavaScriptu. */
.vetvy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .8rem;
  border: 0;
  margin: 0;
  padding: 0;
}
.vetvy legend {
  padding: 0;
  margin-bottom: .7rem;
  font-size: .84rem;
  font-weight: 600;
}
.vetva {
  position: relative;
  display: grid;
  gap: .25rem;
  padding: 1.1rem 1.2rem;
  background: var(--biela);
  border: 1px solid #C9D0D6;
  border-radius: var(--roh);
  cursor: pointer;
  transition: border-color var(--prechod), background var(--prechod);
}
.vetva:hover { border-color: var(--akcent); }
.vetva input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.vetva__meno { font-weight: 700; font-size: 1.05rem; }
.vetva__popis { font-size: .88rem; color: var(--text-tichy); }
.vetva:has(input:checked) {
  border-color: var(--akcent);
  background: var(--akcent-jemny);
  box-shadow: inset 0 0 0 1px var(--akcent);
}
.vetva:has(input:focus-visible) { outline: 2px solid var(--akcent); outline-offset: 3px; }

/* Pasca na roboty. Odsun mimo plochu, nie `display: none` ani
   `visibility: hidden` — tie časť robotov pozná a pole preskočí.
   `aria-hidden` a `tabindex="-1"` v HTML ho držia mimo dosahu čítačky
   aj tabulátora, takže človek sa k nemu nedostane ani omylom. */
.pole-pasca {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* `.suhlas` (GDPR súhlas) — do 7. 9. zdieľaná s `.zaskrt` (príplatok za
   prednostný termín), ktorý bol vtedy zrušený a triedu si so sebou vzal. */
.suhlas {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .7rem;
  align-items: start;
  font-size: .9rem;
  color: var(--text-tichy);
}
/* 24 px, nie 20 — do súhlasu sa netrafiť znamená neodoslanú objednávku.
   Kliknuteľný je aj text vedľa (je to `<label>`), ale to človek nevie,
   kým to neskúsi. */
.suhlas input { width: 24px; height: 24px; margin: .1rem 0 0; accent-color: var(--akcent); }
.suhlas a { color: var(--akcent); font-weight: 600; }
.suhlas.je-zla { color: var(--chyba); }

/* Odoslanie je `button`, nie `.tlacidlo` odkaz — tlačidlo formulára sa
   musí dať stlačiť aj Enterom v poli a odkaz to nevie. */
.formular__odoslat {
  justify-self: start;
  border: 2px solid var(--akcent);
  cursor: pointer;
  font-family: var(--pismo);
}
/* Počas odosielania je tlačidlo vypnuté (skript mu prepíše aj popis na
   „Odosielam…"), nech dvojklik nevyrobí dve objednávky. Musí byť vidieť,
   že sa niečo deje — inak to človek stlačí znova. */
.formular__odoslat[disabled] { opacity: .6; cursor: progress; }

/* Hláška po odoslaní. `role="status"` v HTML ju čítačke prečíta sama,
   bez presunu zamerania — zameranie by pri chybe skočilo preč od poľa,
   ktoré treba opraviť. */
.hlaska {
  display: none;
  padding: 1rem 1.2rem;
  border-radius: var(--roh);
  font-size: .95rem;
}
.hlaska.je-vidiet { display: block; }
.hlaska--ok { background: var(--akcent-jemny); border-left: 3px solid var(--akcent); }
.hlaska--zle { background: var(--chyba-jemna); border-left: 3px solid var(--chyba); color: var(--chyba); }

/* Bočný panel vedľa formulára — telefón pre tých, čo formuláre nevypĺňajú.
   Pri remeselníkoch je to väčšina dopytov, tak nesmie byť až v pätke. */
.bok {
  display: grid;
  gap: 1.4rem;
  align-content: start;
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  background: var(--papier);
  border: 1px solid var(--linka);
  border-radius: var(--roh);
}
.bok h2 { font-size: 1.25rem; }
.bok__tel {
  display: inline-block;
  padding-block: .35rem;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}
.bok__tel:hover { color: var(--akcent); }
/* Meno vetvy nad číslom. Vlastný obal, lebo `.bok` má medzi položkami
   1,4 rem — štítok by od svojho čísla odplával a čítal by sa ako
   nadpis celého panela. */
.bok__linka { display: grid; justify-items: start; gap: .25rem; }
.bok__tel-meno {
  margin: 0 !important;
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-tichy);
}
.bok__blok { display: grid; gap: .3rem; }
.bok__blok dt {
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-tichy);
}
.bok__blok dd { margin: 0; }
.bok dl { margin: 0; display: grid; gap: 1.1rem; }

/* ---------- 19. PÄTKA ----------
   Oproti starej stránke je pätka väčšia, a nie z estetických dôvodov.
   Nesie povinné identifikačné údaje podnikateľa podľa § 3a Obchodného
   zákonníka — obchodné meno, sídlo, IČO a označenie registra s číslom
   zápisu. Na webe firmy to musí byť dostupné na každej stránke, a pätka
   je jediné miesto, ktoré na každej stránke je.

   Štyri stĺpce: značka s mottom, odkazy, spojenie, firemné údaje.
   `auto-fit` s minimom 13rem ich preskladá sám — pri štyroch pevných
   stĺpcoch by sa na tablete stĺpec s registrom zúžil na dve slová
   na riadok. */
.pata {
  background: var(--tmava);
  color: var(--text-sv-tich);
  padding: clamp(2.5rem, 5vw, 3.75rem) var(--okraj) clamp(1.5rem, 3vw, 2rem);
}
.pata > * { max-width: var(--sirka); margin-inline: auto; }
.pata__vnutro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: clamp(1.8rem, 3.5vw, 3rem);
  font-size: .9rem;
  line-height: 1.6;
}
/* ⚠️ Nulovanie odsadenia odstavcov MUSÍ byť zúžené na vnútro pätky.
   Kým bolo zapísané ako `.pata p`, platilo aj na `.pata__spodok`, ktorý
   je tiež odstavec — a prebilo mu `margin-inline: auto` z pravidla
   `.pata > *` (0,1,1 je viac než 0,1,0). Spodný riadok s copyrightom
   tak stál o 60 px vľavo od stĺpcov nad ním a deliaca linka nad ním
   bola širšia než celý obsah pätky. */
.pata__vnutro p { margin: 0; }

/* TEN ISTÝ RÁMIK AKO V HLAVIČKE, len v jantárovej — tehlová #8F3F14 má
   na tmavej pätke 2,4 : 1 a bola by takmer nečitateľná. `--akcent-sv` má
   na tomto pozadí 7,2 : 1, teda AAA aj pre tenkú čiaru loga.

   Doteraz tu bolo biele logo bez rámika. Bolo vidieť, ale splývalo
   s textom vedľa, lebo aj ten je svetlý na tmavom, a značka tak nemala
   v pätke žiadnu váhu.

   Prefarbenie a poistky sú rovnaké ako v hlavičke — dôvody sú popísané
   pri `.znacka__tvar`, netreba ich čítať dvakrát. */
.pata__ramik {
  display: inline-flex;
  border: 2px solid var(--akcent-sv);
  border-radius: var(--roh);
  padding: .6rem 1rem;
  max-width: 100%;
}
.pata__tvar { display: inline-flex; }

@supports (mask-image: url(a)) or (-webkit-mask-image: url(a)) {
  .pata__tvar {
    background: var(--akcent-sv);
    -webkit-mask: url(assets/logo-kravcuk.png) left center/contain no-repeat;
            mask: url(assets/logo-kravcuk.png) left center/contain no-repeat;
  }
  .pata__logo { opacity: 0; }
}

/* ⚠️ ŠÍRKA, NIE VÝŠKA — inak sa logo v úzkom stĺpci ROZTIAHNE.
   Globálne `img { max-width: 100% }` (blok 1) zastropuje šírku obrázka
   šírkou stĺpca, ale pevná výška by ju držala napevno — a z toho je
   skreslené logo, nie menšie. Odmerané pri 760 px: výška 48 px, šírka
   178 px namiesto 210, teda stlačené o 15 %. Na prvý pohľad to nevidno,
   na klientovom logu to je neprípustné.

   Zápisom cez šírku sa výška dopočíta z pomeru snímky (4,38 : 1), takže
   210 px = tých istých 48 px na výšku — a keď stĺpec nestačí, zmenší sa
   logo celé a v pomere. Rovnako veľké ako v hlavičke: je to tá istá
   značka na tom istom webe a pätka nie je lepkavá, takže výška tu nič
   nestojí. */
.pata__logo {
  width: 210px;
  height: auto;
}
.pata__motto {
  margin-top: .9rem !important;
  color: var(--text-sv);
  font-weight: 600;
}

.pata__znacka, .pata__stlpec { display: grid; align-content: start; gap: .45rem; }
.pata__znacka { justify-items: start; }
.pata__nadpis {
  margin-bottom: .35rem !important;
  color: var(--biela);
  font-family: var(--mono);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}
/* Odsadenie zhora a zdola robí z odkazu v pätke cieľ vysoký ~35 px
   namiesto 22 px. Odmerané: bez neho mali odkazy v pätke výšku jedného
   riadku textu a na dotyk sa medzi nimi ľahko netrafí — a pätka je
   presne to miesto, kde človek hľadá telefón, keď sa mu nechce
   scrollovať späť hore. */
.pata a {
  padding-block: .5rem;
  color: var(--text-sv-tich);
  text-decoration: none;
  justify-self: start;
  transition: color var(--prechod);
}
.pata a:hover { color: var(--akcent-sv); }

/* Dve telefónne čísla v pätke — servis a predaj. Vlastný grid, nie
   priame deti `.pata__stlpec`: meno a číslo musia stáť tesne pri sebe,
   kým medzi dvojicami je odstup stĺpca. Bez toho by sa „Okná a dvere"
   opticky viazalo skôr na číslo NAD sebou než pod sebou. */
.pata__linka { display: grid; justify-items: start; }
.pata__linka-meno {
  margin: 0 !important;
  color: var(--text-sv);
  font-size: .84rem;
  font-weight: 600;
}

/* Orgán dozoru je povinný údaj, ale nie ten, kvôli ktorému človek chodí
   do pätky. Menšie písmo a väčší odstup ho oddelia od kontaktov nad ním
   bez toho, aby ho schovali — a schovávať sa nesmie. */
.pata__dozor {
  margin-top: .5rem !important;
  font-size: .82rem;
  line-height: 1.5;
  color: #8A9299;
}

/* ---------- COOKIE LIŠTA ----------
   Vidno ju len vtedy, keď je vyplnený merací kód (`cookies.js`).
   Zámerne NEBLOKUJE stránku: kto prišiel s pokazeným oknom, má
   vidieť telefón aj vtedy, keď si lišty nevšimne. Modálne okno cez
   celú obrazovku by ho oddelilo od jedinej veci, kvôli ktorej prišiel.

   Sedí nad lištou na palec (`.lista`, z-index 90), preto 95 — inak
   by na mobile prekryla „Zavolať". */
.cookies {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem clamp(1rem, 3vw, 2rem);
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1rem, 5vw, 3rem);
  background: var(--tmava);
  border-top: 2px solid var(--akcent-sv);
  color: var(--text-sv);
}
.cookies__text {
  flex: 1 1 22rem;
  margin: 0 !important;
  font-size: .95rem;
  line-height: 1.55;
}
/* Jantárová, nie tehlová — tehlová má na tmavom podklade 2,4 : 1
   a v drobnom texte by bola nečitateľná. Rovnaký dôvod ako v pätke. */
.cookies__text a {
  color: var(--akcent-sv);
  text-decoration: underline;
}
.cookies__akcie {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
}
/* Obe tlačidlá rovnako veľké a vedľa seba. Úrad žiada, aby bolo
   odmietnutie rovnako ľahko dostupné ako prijatie — sivý text vedľa
   farebného tlačidla je tmavý vzor, aj keď formálne tlačidlo je. */
.cookies__akcie .tlacidlo {
  min-height: 2.9rem;
  padding: .7rem 1.4rem;
  font-size: .95rem;
}
/* Na tmavom podklade musí mať obrysové tlačidlo svetlý obrys,
   inak splynie s pozadím a „Odmietnuť" prestane byť rovnocenné. */
.cookies__akcie .tlacidlo--obrys {
  border-color: var(--akcent-sv);
  background: transparent;
  color: var(--akcent-sv);
}
.cookies__akcie .tlacidlo--obrys:hover {
  background: var(--akcent-sv);
  color: var(--tmava);
}

/* Odkaz na odvolanie súhlasu. Dopĺňa ho `cookies.js`, v HTML nie je —
   bez analytiky by to bola mŕtva položka. */
.pata__cookies {
  color: var(--text-sv-tich);
  text-decoration: underline;
}

@media (max-width: 40rem) {
  /* Na úzkom displeji pod sebou, tlačidlá na celú šírku — inak sa
     „Odmietnuť" a „Súhlasím" zmestia len ako dva úzke prúžky. */
  .cookies { flex-direction: column; align-items: stretch; }
  .cookies__akcie .tlacidlo { flex: 1; }
  /* ⚠️ `flex: 1 1 22rem` z desktopu tu MUSÍ padnúť. V stĺpcovom smere
     sa flex-basis vzťahuje na VÝŠKU, takže text si nárokoval 22rem
     (352 px) a lišta narástla na 448 px — viac než polovica displeja
     telefónu. Odmerané 9. 9. 2026 pri 390 × 844. */
  .cookies__text { flex: 0 0 auto; }
}

/* Druhá vetva v pätke — oddelená od stránok autoskiel čiarou a štítkom,
   v orechovej. Rovnaké rozdelenie ako v hlavičke. */
.pata__spodok {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem) !important;
  padding-top: 1.2rem;
  /* Miesto pre tlačidlo „Späť hore". Je `position: fixed` vpravo dole
     a na konci stránky si sadlo presne na „Web: KC Digital", ktorý je
     v tomto riadku tiež vpravo — odmerané prekrytie 75 × 22 px, meno
     autora webu z neho bolo čitateľné ako „We".

     Tlačidlo má 48 px a odstup 32 px od spodku, takže 5rem ho odsunie
     mimo textu. Pätka je tmavý blok, kúsok vzduchu navyše v nej
     nevidno — a je to spoľahlivejšie než skrývať tlačidlo skriptom. */
  padding-bottom: 5rem;
  border-top: 1px solid var(--linka-sv);
  font-size: .84rem;
}

/* ODKAZ NA AUTORA WEBU.
   Jediný odkaz z tohto weba von, takže sa otvára v novej karte —
   návštevník, ktorý si prezerá servis okien, nemá skončiť inde a musieť
   sa vracať. `rel="noopener"` k tomu patrí: bez neho dostane otvorená
   stránka cez `window.opener` prístup k tejto.

   Prečo jantárová a podčiarknutá, keď ostatné odkazy v pätke sú tiché:
   tie tiché sú v stĺpcoch pod nadpisom „Stránky“ a „Spojenie“, kde je
   z kontextu jasné, že sa dá klikať. Tento stojí sám vo vete na konci
   riadku s copyrightom — bez farby a linky sa číta ako obyčajný text
   a nikto naň neklikne. `--akcent-sv` má na tmavej pätke 7,2 : 1.

   ⚠️ ZÁPIS MUSÍ BYŤ `.pata .pata__autor`, NIE `.pata__autor`. Samotná
   trieda má váhu 0,1,0 a `.pata a` nad ňou 0,1,1 — podčiarknutie sa
   neprejavilo a odkaz vyzeral ako obyčajný text presne ako predtým.
   Dvojica tried váhu vyrovná bez `!important`.

   Odsadenie zhora a zdola sa ZÁMERNE necháva na `.pata a` (.5rem).
   Odkaz je vnútri odstavca, takže zvislé odsadenie na ňom nehýbe
   riadkom, ale zväčšuje klikaciu plochu z 15 px na ~35 — a to je pri
   odkaze na konci pätky, kam sa mieri palcom, rozdiel medzi trafiť
   a netrafiť. */
.pata .pata__autor {
  color: var(--akcent-sv);
  text-decoration: underline;
  text-underline-offset: .2em;
  font-weight: 600;
}
.pata .pata__autor:hover { color: var(--biela); }

/* ---------- 20. LIŠTA NA PALEC (mobil) ---------- */
.lista {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  transform: translateY(100%);
  transition: transform var(--prechod);
}
.lista.je-vidiet { transform: none; }
.lista a {
  flex: 1;
  padding: 1rem .5rem;
  text-align: center;
  font-weight: 700;
  font-size: .95rem;
  text-decoration: none;
}
.lista__tel { background: var(--tmava); color: var(--biela); }
.lista__ponuka { background: var(--akcent); color: var(--biela); }

/* ---------- 21. ODKRÝVANIE PRI SCROLLI ---------- */
.odkry {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms ease, transform 600ms cubic-bezier(.2, .6, .2, 1);
}
.odkry.je-viditelna { opacity: 1; transform: none; }
/* Pre obsah, ktorý návštevník preskočil — objaví sa rovno, bez prechodu.
   Pozri poistku v script.js, blok 1. */
.odkry.bez-prechodu { transition: none; }

/* ---------- 22. RESPONZÍVNE ---------- */
@media (max-width: 1000px) {
  .materialy { grid-template-columns: 1fr; }

  .dvojblok { grid-template-columns: 1fr; gap: 2rem; }
  .dvojblok__foto { max-height: 22rem; }
  /* V jednom stĺpci je text vždy prvý — aj v prehodených blokoch.
     Bez tohto riadku by na mobile začínala polovica sekcií fotkou
     bez nadpisu a človek by nevedel, na čo sa pozerá. */
  .dvojblok--opacne .dvojblok__text { order: 0; }

  .galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Formulár a bočný panel pod seba. Panel ide DRUHÝ (v kóde je druhý,
     takže sa nič neprehadzuje) — kto prišiel vyplniť formulár, má ho
     mať hore; kto chce volať, má číslo v hornej lište aj v lište na
     palec, teda po ruke stále. */
  .objednavka { grid-template-columns: 1fr; }

  /* Pás sa poskladá pod seba a zvislé linky sa preklopia na vodorovné —
     inak by ostali visieť medzi položkami naprieč. */
  .istoty__vnutro { grid-template-columns: 1fr; }
  .istota + .istota::before {
    top: calc(var(--medzera-mriezka) / -2);
    bottom: auto;
    left: 0; right: 0;
    border-left: 0;
    border-top: 1px solid var(--linka);
  }
  .postup { grid-template-columns: repeat(2, 1fr); gap: 1.6rem 2rem; }
  .ponuka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Menu sa skladá do hamburgeru už pri 900 px, nie pri 760 ako na starej
   stránke. Dôvod je počítateľný: položiek je päť namiesto štyroch a značka
   je širšia (logo + slovo AUTOSKLO, 236 px oproti 150). Pri 820 px sa
   posledná položka dotýkala tlačidla výzvy a pri 780 už pretekala. */
@media (max-width: 900px) {
  .hamburger { display: flex; }
  .menu {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--biela);
    border-bottom: 1px solid var(--linka);
    padding: .25rem var(--okraj) 1.2rem;
    box-shadow: 0 18px 26px -24px rgba(0, 0, 0, .5);
    /* Zatvorené menu nesmie byť len priehľadné — inak sa naň dá dostať
       tabulátorom a klikať na neviditeľné odkazy. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--prechod), transform var(--prechod), visibility var(--prechod);
  }
  .menu.je-otvorene { visibility: visible; opacity: 1; transform: none; }
  .menu a { padding: .9rem .1rem; border-bottom: 1px solid var(--linka); }
  .menu a[aria-current="page"]::after { display: none; }
  .menu__cta { justify-content: center; margin-top: 1rem; border-bottom: 0; }

  /* Menšie logo od chvíle, keď sa menu skladá pod hamburger. Dôvod je
     pri `.znacka__logo` hore: na monitore je v hlavičke miesto, na
     telefóne sa doska delí o šírku s tlačidlom Menu a výška lepkavej
     hlavičky ukrojí z obsahu. */
  .znacka__ramik { padding: .55rem .9rem; }
  .znacka__logo { height: 36px; }
  /* Nižšia hlavička = kratšie odsadenie kotvy. Stojí to tu, a nie pri
     `[id]` hore, aby sa obe hodnoty menili na jednom mieste — rozišli
     sa už raz a kotva skončila pod hlavičkou. */
  [id] { scroll-margin-top: 9.25rem; }
}

@media (max-width: 760px) {
  body { font-size: 1rem; }

  /* Na mobile zostáva v lište len to, čo sa naozaj používa: prepínač
     veľkosti písma vľavo a telefón vpravo. Pôsobisko a otváracie hodiny
     idú preč — sú aj v pätke a na kontakte, a tu by sa lámali na tri
     riadky. Popis „Veľkosť písma" tiež, samotné A A A je zrozumiteľné
     a čítačka obrazovky si vezme `aria-label` z tlačidiel. */
  /* Na dotyku sú tlačidlá písma vyššie. Je to ovládanie prístupnosti —
     cieľ 30 px by musel presne trafiť práve ten, komu sa ruka trasie.
     Výšku hornej lišty to zdvihne, ale na mobile v nej ostali len dve
     veci, takže je na to miesto. */
  .pismo button { min-height: 44px; min-width: 2.6rem; }
  /* Odsadenie okolo loga tu bývalo kvôli dotyku: holý obrázok mal 30 px
     a to je na palec málo. Doska (5. 9.) má sama 36 px obrázka plus
     2 × .6rem odsadenia, teda ~55 px — cieľ je splnený plochou, nie
     odsadením naokolo. Ponechať oboje by hlavičku na mobile zdvihlo na
     ~71 px, čo je pri lepkavej navigácii zbytočne ukrojená obrazovka. */

  .horna-lista__vnutro { justify-content: space-between; }
  .horna-lista > .horna-lista__vnutro > span:not(:last-child),
  .horna-lista__ciara,
  .pismo__popis { display: none; }
  .pismo { margin-right: 0; }

  /* Ručné zalomenia nadpisov platia len na širokej obrazovke. */
  h1 br, h2 br { display: none; }

  /* Jeden stĺpec. V kóde je text pred fotkou, takže nadpis aj obe
     tlačidlá sú hore bez scrollovania a fotka ide hneď za nimi. */
  .uvod__mriezka { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .uvod__blok { max-width: none; }
  .doska { aspect-ratio: 16 / 11; }

  /* Pečiatka dovnútra. Stranu už rieši desktop, tu ide len o to, že
     v jednom stĺpci je fotka na plnú šírku — `-1rem` by ju vysunulo za
     okraj stránky (na 375 px trčala o 6 px von a orezalo jej to písmo). */
  .peciatka {
    right: .5rem;
    bottom: -1.25rem;
    width: 7.25rem;
  }

  .postup { grid-template-columns: 1fr; }

  /* Na dotyku nie je kurzor, tak ho nepredstierame. Pomer 4:3 namiesto
     16:9: na 375 px vychádzalo šestnásť ku deviatim na 325 × 183 px
     a v takom prúžku nebolo vidieť, čo sa vlastne mení. Na výšku má
     teraz 244 px. Orezanie je vecou `object-fit: cover`, takže obe
     fotky ostávajú v strede záberu, len užšie. */
  .porovnanie {
    cursor: default;
    aspect-ratio: 4 / 3;
  }

  /* ⚠️ Pás poistnej udalosti sa na mobile prestáva riadiť pomerom strán
     a rastie podľa textu. Pomer 16/9 dával pri 390 px pás vysoký 416 px
     a pri najväčšom písme sa doň text nezmestil — `overflow: hidden` mu
     odrezal vrch aj spodok (odmerané: presahoval o 11 px na každej
     strane). Fotka je v páse absolútne umiestnená s `object-fit: cover`,
     takže vyplní akúkoľvek výšku; `min-height` drží spodnú hranicu. */
  .pas { aspect-ratio: auto; max-height: none; }

  .lista { display: flex; }
  .pata { padding-bottom: 5.5rem; }     /* miesto pod lištou */

  /* „Späť hore" sadá nad lištu na palec — inak by tlačidlo prekrylo
     presne to „Zavolať", ktoré je na mobile najdôležitejšie. */
  .hore { bottom: 4.5rem; }

  /* Vetvy formulára a dvojice polí pod seba. Dve polia vedľa seba majú
     pri 360 px šírku 148 px — do „Značka a model" sa vojdú štyri znaky
     a človek nevidí, čo píše. */
  .vetvy, .formular__dvojica { grid-template-columns: 1fr; }

  /* Ovládanie zväčšeniny sa presunie DO fotky. Mimo nej je pri 360 px
     56 px miesta na tri tlačidlá po 46 px — nevojdú sa a vypadli by
     za okraj obrazovky. */
  .lupa__zavri { top: .5rem; right: .5rem; }
  .lupa__krok--spat { left: .5rem; }
  .lupa__krok--dalej { right: .5rem; }
  .lupa__zavri, .lupa__krok { background: rgba(8, 10, 12, .6); }
}

@media (max-width: 560px) {
  .galeria { grid-template-columns: 1fr; }

  /* Karty na jeden stĺpec. Dva stĺpce vydržia do 560 px, nižšie už majú
     pod 156 px a text sa v nich láme po dvoch slovách — „Okno fúka, drhne
     / o rám alebo sa / nedá dotlačiť." Nadpis „Vchodové dvere a poškodené
     krídlo" zabral na 375 px štyri riadky. */
  .ponuka { grid-template-columns: minmax(0, 1fr); }
  .vyzva__tlacidla .tlacidlo { width: 100%; }

  /* Copyright a autor webu každý na svoj riadok, oba doľava.
     `space-between` ich na jednom riadku tlačí k okrajom, takže autor
     skončí vpravo dole — presne v stĺpci, kadiaľ pri scrollovaní
     preplával plávajúci „Späť hore“ (odmerané pri 390 px: odkaz
     x 267–327, tlačidlo x 195–329). Prekrytie to nespôsobí, lebo pätka
     má dole 5rem miesta navyše, ale odkaz je pri poslednom ťahu palcom
     schovaný za tlačidlom a nedá sa naň trafiť. Vľavo je z jeho cesty
     preč po celý čas. */
  .pata__spodok { justify-content: flex-start; }
  .pata__spodok > span { flex-basis: 100%; }
}

/* ---------- 23. OBMEDZENÝ POHYB ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    /* Bez tohto riadku zostane prvok neviditeľný počas celého oneskorenia.
       Skrátené trvanie nepomôže — animácia sa dovtedy vôbec nezačne
       a `animation-fill-mode: both` drží prvok v úvodnom stave, teda na
       nulovej priehľadnosti. Nábeh hlavičky má krok až 360 ms a poznámka
       pod tlačidlami toľko naozaj chýbala (odmerané). */
    animation-delay: 0s !important;
  }
  .odkry { opacity: 1; transform: none; }
}