/* ─────────────────────────────────────────────────────────────────────────
   web.css — vzhľad verejného webu (bod 6d-c)
   ─────────────────────────────────────────────────────────────────────────
   Usporiadanie podľa zadania (lrarchitectes.com): biele pozadie, logo
   vľavo hore, minimalistická navigácia vpravo hore, **hustá mriežka
   projektov cez celú šírku okna, s názvom na fotke**. Ich CSS ani fotky
   sa nekopírujú (oddiel 4 briefu) — kopíruje sa usporiadanie, nie súbor.

   ⚠ ZMENA 2026-08-06 (Marek): úvodná stránka NIE JE celoobrazovková fotka
   so striedaním. Úvodná stránka JE výpis projektov. Preto tu už nie sú
   štýly `.uvod*` ani `.nad-fotkou` — štýl pre prvok, ktorý nemá vzniknúť,
   je pasca (to isté poučenie ako pri `input[type=date]` v paneli).

   Panel má vlastný panel.css a tento súbor sa ho nedotýka.
   Písmo je DM Sans z /typo/ (u nás, nikdy Google Fonts).
   Žiadny style="" a žiadny vložený <script> — kvôli CSP.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --pozadie: #fff;
  --text: #111;
  --tichy: #6b6b6b;
  /* Tretia úroveň informácie: pätička a znaky typu v archíve. O sedminu
     svetlejšie než `--tichy`, aby bolo na prvý pohľad jasné, že to nie je
     obsah, ale poznámka pod ním (Marek 2026-08-10). */
  --tichsi: #828282;
  --znak: #a6a6a6;
  --linka: #e4e4e4;
  --zvyraz: #111;
  --radius-btn: 2px;
  /* Najdlhší riadok textu na obsahovej stránke. Jedno číslo, lebo ho musia
     poznať dve veci naraz: stĺpec mriežky aj odsek v ňom.
     ⚠ Meno je zámerne krátke a iné než to, ktoré niesla kedysi šírka CELEJ
     stránky. Dve podobné mená vedľa seba si nikto nezapamätá; skúška návrat
     toho starého mena stráži, a stráži ho aj v komentároch. */
  --riadok: 650px;
  /* Šírka obsahu podľa predlohy (Marek 2026-08-06): web NIE JE cez celú
     obrazovku. Na širokom monitore by riadok textu mal dvesto znakov a
     fotky by sa roztiahli do plagátu. Jedno číslo na jednom mieste —
     kto ho zmení, zmení celý web naraz. */
  --sirka: 1160px;
  --okraj: clamp(16px, 3vw, 40px);
  --medzera-mriezky: 2px;
  /* Druhá úroveň navigácie (podkategórie nad mriežkou) na širokom displeji.
     Riadok patrí k FOTKÁM, nie k menu (Marek 2026-08-16) — preto je nad ním
     výrazne viac vzduchu než pod ním. Blízkosť je jediné, čo hovorí, ku
     ktorej veci ten riadok patrí; keď boli obe medzery skoro rovnaké
     (22 a 30 px), riadok visel medzi menu a mriežkou a nepatril nikam.
     ⚠ Medzeru NAD druhou úrovňou tvorí SÚČET dvoch prvkov: spodok hlavičky
     plus vrch hlavy výpisu. Preto je spodok hlavičky samostatná premenná a
     odčítava sa — inak by sa cieľové číslo nedalo prečítať z kódu a pri
     ďalšom ladení by sa ticho rozišlo (presne to sa stalo na mobile). */
  --hlavicka-dole: 18px;
  --nad-druhou-urovnou: 48px;
  --pod-druhou-urovnou: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* Pätička dosadne na spodok okna, keď je obsahu málo (Marek
     2026-08-12: „v Media to vyskočí hore, lebo je tam málo info").
     Stránka je stĺpec vysoký aspoň ako okno a hlavný obsah v ňom rastie,
     takže pätička klesne na dno. NIE `position: fixed` — na dlhej stránke
     má pätička odísť hore s obsahom, nie prekrývať fotky.
     Dve `min-height` zámerne: `dvh` počíta s lištou prehliadača na mobile,
     staršie prehliadače riadok preskočia a zostane im `vh`. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--pozadie);
  color: var(--text);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

/* Hlavný obsah vypĺňa zvyšok okna a tlačí pätičku dole.
   `1 0 auto` = smie rásť, ale nikdy sa nezmenší pod svoju výšku —
   inak by sa dlhý výpis projektov stlačil. */
body > main { flex: 1 0 auto; }

/* Každý vrchný blok drží tú istú šírku a stojí v strede. Do max-width sa
   počíta aj vnútorný okraj (box-sizing: border-box vyššie), preto sa
   pripočítava dvakrát — inak by obsah bol o okraje užší než predloha. */
.hlavicka, .hlava-vypisu, .mriezka, .obsah, .projekt-hero, .projekt-telo,
.paticka-riadok, .prazdne {
  max-width: calc(var(--sirka) + 2 * var(--okraj));
  margin-left: auto;
  margin-right: auto;
}
a { color: inherit; }

/* ── hlavička ────────────────────────────────────────────────────────────
   Bez deliacej linky a bez farebného pásu: hlavička má splynúť so
   stránkou a mriežka má začať hneď pod ňou. Drží sa hore pri posúvaní,
   lebo na dlhom výpise projektov je návrat do menu inak ďaleko. */
.hlavicka {
  /* ⚠ `width: 100%` NIE JE zbytocne. Telo stranky je od 2026-08-12
     zvisly flex (kvoli paticke na spodku okna) a hlavicka je jeho
     polozka. Automaticke bocne okraje z pravidla vyssie v priecnom
     smere ZRUSIA rozahnutie flex polozky — hlavicka sa zmrstila na
     sirku svojho obsahu a logo aj menu skoncili v strede obrazovky
     (Marek 2026-08-12). Urcita sirka to vracia: 100 % tela, `max-width`
     ju zhora orezava a `margin: auto` blok centruje ako predtym. */
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 32px;
  padding: 22px var(--okraj) var(--hlavicka-dole);
  background: var(--pozadie);
}
/* Logo je jediná silná vec vľavo hore. Zmenšené o pätinu (Marek
   2026-08-10) — nadpis stránky sa medzitým stíšil natoľko, že s ním už
   nesúperí, a logo nemusí kričať, aby bolo prvé. */
.znacka {
  /* Bežný rez 400, nie polotučný (Marek 2026-08-16: „logo daj normal, nie
     bold"). Logo je prvé vďaka VEĽKOSTI a polohe, nie hrúbke — a hrúbka má
     na tomto webe jedinú úlohu: rez 600 označuje AKTÍVNU položku navigácie.
     Kým bolo logo 500, stálo medzi bežnou a aktívnou položkou a tú jedinú
     úlohu hrúbky rozmazávalo. */
  font-weight: 400;
  font-size: clamp(18px, 2.1vw, 25px);
  letter-spacing: 0;
  text-decoration: none;
}
.menu { display: flex; flex-wrap: wrap; gap: 4px 26px; }
/* Celá navigácia malými písmenami (Marek 2026-08-06) — menu, podkategórie
   aj nadpis výpisu. `text-transform` mení len to, ako sa text vykreslí;
   v HTML zostáva tak, ako ho napísal klient v admine, takže čítačka
   obrazovky ani vyhľadávač o veľké písmená neprídu. */
.menu a {
  text-decoration: none;
  color: var(--text);
  font-size: 15px;
  text-transform: lowercase;
}
/* Aktívna položka sa pozná HRÚBKOU písma, nie farbou ani linkou. Rez 600
   (semibold) je REÁLNY: DM Sans je premenné písmo a jeho os hrúbky siaha
   po 600, takže sa nič nedopočítava (Marek 2026-08-06). aria-current
   ostáva pre čítačky obrazovky, ktoré hrúbku písma neohlásia. */
.menu a[aria-current="page"] { font-weight: 600; }

/* ── hlava výpisu (nadpis + podkategórie) ────────────────────────────────
   Podkategórie sú tu, a nie ako rozbaľovacie menu v hlavičke: rozbaľovacie
   menu sa na dotykovom displeji ovláda zle a klávesnicou ešte horšie.
   Tu je každá kategória vidieť naraz, dá sa na ňu odkázať adresou
   a funguje bez skriptu. */
.hlava-vypisu {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 28px;
  /* Nad riadkom je `--nad-druhou-urovnou` (znížené o spodok hlavičky, ktorá
     medzi nimi stojí), pod ním `--pod-druhou-urovnou`. Pomer je zámerne
     výrazný, nie jemný: riadok sa má čítať ako popiska mriežky. */
  padding: calc(var(--nad-druhou-urovnou) - var(--hlavicka-dole))
           var(--okraj) var(--pod-druhou-urovnou);
}
/* Nadpis výpisu ostáva v HTML pre čítačku obrazovky (aj pre vyhľadávač
   a tlač), ale vizuálne sa NEOPAKUJE: „selected works" už stojí v hlavnom
   menu a v druhej úrovni nad mriežkou by len zaberalo miesto (Marek
   2026-08-06). Odsunutý je mimo obraz, nie display:none — to by ho vzalo
   aj čítačke obrazovky. */
.hlava-vypisu h1 {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.filter { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.filter a {
  text-decoration: none;
  font-size: 15px;
  text-transform: lowercase;
  color: var(--text);
}
/* Druhá úroveň má rovnakú veľkosť písma ako menu a aktívna položka rovnaký
   reálny rez 600. */
.filter a[aria-current="page"] { font-weight: 600; }

/* Hover a klávesnicový fokus: 1px linka, ktorá vyrastie ZO STREDU do
   krajov (Marek 2026-08-06). Je to ::after, nie border — dá sa animovať
   transformom a keď nie je vidno, nezaberá miesto. currentColor sadne na
   čiernu. Aktívna položka podčiarknutie natrvalo NEMÁ (poznať ju treba
   hrúbkou), ukáže sa len pri prejdení myšou alebo fokuse. */
.menu a, .filter a { position: relative; }
.menu a::after, .filter a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.menu a:hover::after, .menu a:focus-visible::after,
.filter a:hover::after, .filter a:focus-visible::after { transform: scaleX(1); }
/* Aktívna položka hover-podčiarknutie NEMÁ — poznať ju treba hrúbkou písma
   (Marek 2026-08-06). Atribútový selektor pridá špecificitu, takže prepíše
   pravidlo vyššie a linka sa pri prejdení myšou/fokuse neukáže. */
.menu a[aria-current="page"]:hover::after, .menu a[aria-current="page"]:focus-visible::after,
.filter a[aria-current="page"]:hover::after, .filter a[aria-current="page"]:focus-visible::after { transform: scaleX(0); }

/* ── mriežka projektov ───────────────────────────────────────────────────
   MASONRY, nie mriežka rovnakých dlaždíc (Marek 2026-08-06, podľa
   lrarchitectes.com): fotka si drží svoj vlastný pomer strán a stĺpce sa
   nezarovnávajú do riadkov. Robí to viacstĺpcová sadzba (`columns`) —
   žiadny skript, žiadne počítanie výšok v prehliadači, funguje aj keď
   JavaScript nebeží.
   ⚠ Cena za jednoduchosť: poradie ide PO STĹPCOCH, nie po riadkoch.
   Prvý projekt je vľavo hore (tam, kde naň človek pozrie), ale druhý je
   pod ním, nie vedľa neho. Poradie po riadkoch by znamenalo počítať výšky
   skriptom a mriežka by pri vypnutom skripte spadla na jeden stĺpec.
   Medzery sú zámerne veľké — fotky majú dýchať, nie tvoriť dlažbu. */
.mriezka {
  columns: 3 300px;
  column-gap: clamp(28px, 3.5vw, 72px);
  /* ⚠ NIE `margin: 0` — skratka by prepísala aj `margin-left/right: auto`
     zo spoločného pravidla vyššie a mriežka by sa prilepila doľava.
     Presne to sa 2026-08-06 aj stalo. */
  margin-top: 0;
  margin-bottom: 0;
  padding: 0 var(--okraj) clamp(24px, 3vw, 48px);
  list-style: none;
}
.dlazdica {
  /* Fotka sa nesmie rozlomiť medzi dva stĺpce. */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(32px, 4vw, 80px);
}
/* Mriežka po RIADKOCH (public/masonry.js). Bez skriptu ostáva columns
   vyššie (plnenie po stĺpcoch); so skriptom sa dlaždice uložia absolútne
   do najkratšieho stĺpca v poradí — prvý riadok 1·2·3. Poradie v HTML sa
   nemení, mení sa len umiestnenie. */
.mriezka.js-masonry { columns: auto; position: relative; }
.js-masonry .dlazdica { margin: 0; transition: top .25s ease, left .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .js-masonry .dlazdica { transition: none; }
}
.dlazdica a { position: relative; display: block; text-decoration: none; }
.dlazdica img { width: 100%; height: auto; background: #f2f2f2; }
/* Názov leží NA fotke a ukáže sa pri prejdení myšou alebo pri prechode
   klávesnicou; fotka pod ním stmavne. V HTML je názov vždy — skrytý je
   len priehľadnosťou, takže ho čítačka obrazovky prečíta aj tak. */
.dlazdica-popis {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  color: #fff;
  background: rgba(0, 0, 0, .42);
  opacity: 0;
  transition: opacity .3s ease;
}
.dlazdica a:hover .dlazdica-popis,
.dlazdica a:focus-visible .dlazdica-popis { opacity: 1; }
.dlazdica-nazov { font-size: 17px; font-weight: 500; line-height: 1.3; }
/* Na dotykovom displeji hover neexistuje. Tam je názov natrvalo vidieť —
   inak by sa návštevník na mobile nedozvedel, na čo klikol. */
@media (hover: none) {
  .dlazdica-popis {
    opacity: 1;
    align-items: flex-end;
    justify-content: flex-start;
    text-align: left;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 55%);
  }
}
.dlazdica-bez-fotky {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 2; background: #f2f2f2;
  color: var(--tichy); font-size: 14px;
}
/* ── obsahové stránky ────────────────────────────────────────────────── */
.obsah { padding-left: var(--okraj); padding-right: var(--okraj); }
.blok { padding-top: clamp(8px, 2vw, 24px); padding-bottom: clamp(32px, 5vw, 64px); }
.uzky { max-width: 68ch; }

h1 { font-size: clamp(23px, 2.8vw, 32px); font-weight: 500; line-height: 1.2; margin: 0 0 10px; text-transform: lowercase; }
/* Nadpis obsahovej stránky (About, Media) je NÁZOV SEKCIE, nie druhé logo
   (Marek 2026-08-10). Preto obyčajný rez a 26 px namiesto tridsiatich —
   na jednej zvislici s logom by dve podobne veľké slová súperili a oko by
   nevedelo, ktoré čítať prvé. Pravidlo je viazané na `.obsah`, nie na h1
   vo všeobecnosti: nadpis projektu má vlastnú skladbu. */
.obsah h1 { font-size: 22px; font-weight: 400; }
.obsah > h1 { margin-bottom: 25px; }
h2 { font-size: clamp(18px, 2vw, 22px); font-weight: 500; margin: 32px 0 8px; }
p { margin: 0 0 16px; }
/* Tučné v texte (klient píše **takto**) aj štítky údajov: reálny rez 600. */
strong { font-weight: 600; }

/* ── detail projektu ─────────────────────────────────────────────────────
   Podľa predlohy: veľká titulná fotka hore, pod ňou vľavo úzky stĺpec
   textu a údajov, vpravo zvyšok fotiek v dvoch stĺpcoch. Na úzkej
   obrazovke sa to poskladá pod seba — text prvý. */
.projekt-hero { padding: 0 var(--okraj); }
.projekt-hero img { width: 100%; height: auto; }
.projekt-telo {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2.4fr;
  /* Výšky riadkov sú určené PEVNE (Marek 2026-08-19). Bez toho boli
     oba riadky `auto` a galéria, ktorá ide cez oba, rozdelila svoju
     nadvýšku medzi ne rovnakým dielom: prvý riadok narástol o polovicu
     výšky galérie a odkaz „späť" spadol do polovice stránky. Prvý riadok
     je preto veľký presne ako text, druhý (`1fr`) pohltí všetok zvyšok.
     Odkaz sadne na jeho začiatok, teda hneď pod text — o to sa stará
     `align-items: start` nižšie. */
  grid-template-rows: min-content 1fr;
  /* Medzera medzi stĺpcami a medzera medzi riadkami sú dve rôzne veci,
     preto NIE skratka `gap`. Medzi riadkami je na širokom displeji nula:
     druhý riadok je odkaz „späť" a jeho odstup od textu robí jeho vlastný
     `padding-top`. Skratka by sem pridala ďalších 72 px navyše. */
  column-gap: clamp(28px, 3.5vw, 72px);
  row-gap: 0;
  align-items: start;
  padding: clamp(28px, 3.5vw, 64px) var(--okraj) 0;
}
/* Rozloženie na širokom displeji robí MRIEŽKA, nie poradie v HTML
   (Marek 2026-08-18): text vľavo hore, galéria vpravo cez oba riadky,
   odkaz „späť" hneď pod textom. V HTML stojí odkaz až za galériou —
   to je poradie pre mobil a pre čítačku obrazovky, kde sa stĺpce
   poskladajú pod seba a odkaz preč patrí pod všetky fotky.
   Miesta sú určené PEVNE, nie automatickým ukladaním: projekt s jedinou
   fotkou galériu vôbec nevykreslí a odkaz by sa inak presťahoval hore
   do druhého stĺpca. */
.projekt-text { grid-column: 1; grid-row: 1; }
.projekt-galeria { grid-column: 2; grid-row: 1 / span 2; }
.projekt-telo > .prazdne { grid-column: 2; grid-row: 1; }
.projekt-telo > .spat { grid-column: 1; grid-row: 2; justify-self: start; }
.projekt-text h1 {
  font-size: 30px; font-weight: 600; margin: 0 0 18px;
  text-transform: lowercase;
}
.projekt-text p { font-size: 15px; }
/* Nadpis v texte projektu (klient píše `## takto`, Marek 2026-08-17).
   Globálne `h2` má 18–22 px, čo je v tomto úzkom stĺpci so 15 px textom
   priveľa — vyzeralo by ako druhý názov projektu. 16 px v reze 600 je
   zreteľne nadpis a zreteľne PODRADENÝ názvu nad ním. Medzera zhora je
   výrazne väčšia než zdola: nadpis patrí k textu POD sebou, nie nad. */
.projekt-text h2 { font-size: 16px; font-weight: 600; margin: 26px 0 6px; }
.projekt-text h2:first-child { margin-top: 0; }
.udaje { margin: 0 0 20px; padding: 0; list-style: none; font-size: 15px; }
.udaje li { margin-bottom: 2px; }
.udaje b { font-weight: 600; }
.projekt-galeria {
  columns: 2 260px;
  column-gap: clamp(20px, 2.5vw, 48px);
  margin: 0; padding: 0; list-style: none;
}
.projekt-galeria li { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 clamp(20px, 2.5vw, 48px); }
.projekt-galeria img { width: 100%; height: auto; background: #f2f2f2; }

/* ── výkresy (Marek 2026-08-17) ──────────────────────────────────────────
   Pôdorysy a rezy stoja v PRVOM stĺpci, pod textom, jeden pod druhým.
   Jeden stĺpec, nie mriežka: výkres sa číta zľava doprava po celej šírke
   a dva vedľa seba v už tak úzkom stĺpci by boli nečitateľné.

   Podklad je BIELY, nie sivý ako pri fotkách. Výkres je čierna kresba na
   bielom papieri — sivý podklad, ktorý pri fotke len drží miesto, kým sa
   načíta, by tu presvital okolo kresby a vyzeral ako rám, ktorý tam nemá
   čo robiť. Tenká linka okolo hovorí „toto je list papiera" a zároveň
   ohraničuje výkres, ktorý má okraje biele a inak by sa rozplynul do
   stránky. */
.projekt-vykresy {
  margin: 34px 0 0; padding: 0; list-style: none;
}
.projekt-vykresy li { margin: 0 0 14px; }
.projekt-vykresy li:last-child { margin-bottom: 0; }
.projekt-vykresy img {
  display: block; width: 100%; height: auto;
  background: #fff; border: 1px solid #e6e6e6;
}
/* Odkaz „Back to works" je AŽ POD textom projektu (Marek 2026-08-07):
   celý čierny, s minimalistickou šípkou doľava, 30px medzera nad ním.
   Na prejdenie myšou/fokus sa šípka posunie doľava a slovo podčiarkne. */
.spat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-top: 30px;
  margin: 0;
  font-size: 14px;
  text-transform: lowercase;
  color: var(--text);
  text-decoration: none;
}
.spat-ikona { width: 15px; height: 15px; display: block; transition: transform .25s ease; }
.spat:hover .spat-ikona, .spat:focus-visible .spat-ikona { transform: translateX(-4px); }
.spat span { position: relative; }
.spat span::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
.spat:hover span::after, .spat:focus-visible span::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .spat-ikona, .spat span::after { transition: none; }
}
/* ── stránka „about" (profil + kontakt) ───────────────────────────────────
   Dva stĺpce, ktoré NIE SÚ rovnaké. Text drží väčšinu plochy, kontakt je
   úzky stĺpec vedľa. Rovnaké polovice by tvrdili, že sú rovnako dôležité —
   oko by nevedelo, kde má začať.
   Zlom je 900 px: pod ním sa stĺpce poskladajú pod seba a kontakt ide
   NADOL, za text. Kontakt hore by odsunul to, kvôli čomu sem človek prišiel.
   Meria sa šírka okna, nie zariadenie — rozhoduje miesto, ktoré je. */
.o-mriezka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
@media (min-width: 900px) {
  /* Sirka textu je urcena CITATELNOSTOU (62 znakov na riadok), sirka
     kontaktu jeho obsahom. Zvysok sa nerozdeli — vytlaci sa medzi ne, takze
     kontakt sadne presne na lavy okraj obsahu, na tu istu zvislicu ako
     logo a nadpis nad nim, a text konci na pravom okraji. Bez toho
     vznikala medzera z dvoch roznych obmedzeni naraz a posobila nahodne. */
  .o-mriezka {
    grid-template-columns: minmax(285px, 360px) minmax(0, var(--riadok));
    justify-content: space-between;
    column-gap: 48px;
    align-items: start;
  }
  /* Nadpis stránky stojí v PRAVOM stĺpci, nad fotkou (Marek 2026-08-10).
     Vľavo hore tak zostáva jediná silná vec — logo, a súboj dvoch slov na
     jednej zvislici zmizne. Nadpis má vlastný riadok mriežky, takže kontakt
     vľavo začína až pod ním, na tej istej linke ako fotka.
     Kontakt je VĽAVO, obsah vpravo. Poradie v HTML sa NEMENÍ — nadpis,
     obsah, kontakt — aby sa pod 900 px poskladali práve v tomto poradí.
     Prehodenie robí až umiestnenie do mriežky, teda len tam, kde sú
     stĺpce naozaj dva. */
  .o-nadpis { grid-column: 2; grid-row: 1; }
  .o-hlavne { grid-column: 2; grid-row: 2; }
  /* Kontakt zostáva na očiach aj pri dlhom texte. `top` má nad sebou výšku
     lepiacej sa hlavičky a ešte kus vzduchu, inak by sa oň otieral. */
  .o-bok { grid-column: 1; grid-row: 2; position: sticky; top: 104px; }
}
/* Nadpis obsahovej stránky má od hlavičky odstup (Marek 2026-08-10:
   90–110 px), aby nesúperil s logom. Platí pre VŠETKY obsahové stránky,
   nie len pre About — nadpis Media má začínať v tej istej výške, inak by
   pri prepnutí medzi stránkami poskočil. Na úzkom okne sa odstup zmenšuje:
   tam je hlavička nižšie a taká medzera by bola len prázdna obrazovka. */
.obsah.blok { padding-top: clamp(40px, 7vw, 96px); }
.o-nadpis { margin: 0; }
.o-text { max-width: var(--riadok); }
/* Prvý odsek už NIE JE väčší (Marek 2026-08-10). Text má plynúť ako jeden
   celok; zvýraznená úvodná veta robila na krátkej stránke tretiu úroveň
   nadpisu tam, kde stačia dve. Zostáva mu len väčšia medzera pod sebou. */
.o-text > p:first-child { margin-bottom: 22px; }
.o-text > p:last-child { margin-bottom: 0; }

/* Portrét stojí v druhom stĺpci nad textom (Marek 2026-08-10). Nie je taký
   široký ako stĺpec: hlavné je tu čítanie, fotka je k nemu, nie namiesto
   neho. 250 px je zhruba o tretinu menej, než mal v úzkom stĺpci.
   `max-width` a nie pevná šírka — na úzkom okne sa fotka zmestí tak či tak. */
.o-portret { margin: 0 0 32px; max-width: 240px; }
.o-portret img { width: 100%; height: auto; }
.o-bok { margin: 0; font-style: normal; }
.o-polozka + .o-polozka { margin-top: 24px; }
/* Štítok hovorí, ČO to je. Odlíšený je len veľkosťou a miernym rozpalom —
   farbou nie (Marek 2026-08-10: čierne). Veľké písmená sa na tomto webe
   nepoužívajú nikde a skúška to stráži. Medzera pod ním je tesná zámerne:
   štítok a jeho hodnota sú jedna vec, nie dve. */
.o-stitok {
  font-size: 14px; letter-spacing: .04em;
  color: var(--text); margin-bottom: 3px;
}
.o-hodnota { font-size: 18px; line-height: 1.35; }
/* Odkazy sa podčiarkujú rovnako jemne ako všade inde na webe: čiara je
   stále na mieste, mení sa len jej farba, takže sa dá plynulo nabehnúť. */
.o-hodnota a {
  text-decoration: underline; text-decoration-color: transparent;
  text-underline-offset: 3px; transition: text-decoration-color .28s ease;
}
.o-hodnota a:hover, .o-hodnota a:focus-visible { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .o-hodnota a { transition: none; } }
.prazdne-vnutri { color: var(--tichy); }

/* ── Médiá ─────────────────────────────────────────────────────────────
   Od 2026-08-17 je Media tá istá mriežka ako výpis projektov (Marek):
   fotka je dlaždica, pri prejdení myšou sa na stmavenej fotke objaví
   názov, zdroj a dátum. Archívny zoznam riadkov (.zoznam-medii,
   .medium-*) je preto celý preč — nezostal ako záloha, lebo pravidlá,
   ktoré nič nekreslia, sa časom rozídu s tým, čo kreslí HTML.

   MRIEŽKU, stmavenie ani správanie na dotykovom displeji tu NIČ nerobí
   znova: platia `.mriezka` a `.dlazdica` vyššie. Tu je len to, čo má
   dlaždica článku navyše — druhý riadok pod názvom. */

/* Oba riadky sú v JEDNOM bloku, takže `.dlazdica-popis` má naďalej jedno
   dieťa. Práve preto na Médiách platí jeho zvislé aj vodorovné
   zarovnanie — vrátane mobilnej výnimky @media (hover: none) — bez toho,
   aby sa muselo písať druhýkrát pre dva riadky. Keby boli deti dve,
   `align-items` by sa musel prepnúť na `flex-direction: column` a tá
   zmena by prekreslila aj dlaždice projektov. */
.dlazdica-text { display: block; }
.dlazdica-druhy-riadok {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 7px;
  font-size: 14px;
  /* NIE var(--tichy): pod textom je fotka, nie biele pozadie, a sivá by
     na svetlej fotke zmizla. Priehľadná biela drží rovnaký vzťah
     k názvu nad ňou na každej fotke. */
  color: rgba(255, 255, 255, .82);
}
/* Znak typu je značka pri dátume, nie tretí prvok riadku: menší než
   písmo a v jeho farbe. `flex: none` — inak by sa pri dlhom názve
   zdroja stlačil. */
.dlazdica-ikona { flex: none; width: 14px; height: 14px; }
@media (hover: none) {
  /* Na dotykovom displeji stojí popis vľavo dole (viď .dlazdica-popis),
     takže druhý riadok sa nesmie centrovať — názov by bol vľavo
     a dátum v strede. */
  .dlazdica-druhy-riadok { justify-content: flex-start; }
}
/* Záznam bez PDF aj bez odkazu nie je odkaz (databáza to nepripustí, ale
   stránka sa nemá rozsypať ani vtedy, keby tá podmienka raz padla).
   Popis sa mu ukáže natrvalo: nie je čo kliknúť, takže nie je na čo
   prejsť myšou. */
.dlazdica > .dlazdica-plocha { position: relative; display: block; }
.dlazdica > .dlazdica-plocha .dlazdica-popis { opacity: 1; }

/* Nadpis Médií drží odstup ako na obsahovej stránke, ale pod ním už
   nasleduje mriežka, nie text — spodný priestor `.blok` by tu bol
   druhou medzerou navrch tej, ktorú si mriežka nesie sama. */
.media-hlava { padding-bottom: clamp(6px, 1.2vw, 16px); }
/* ── kontakt ─────────────────────────────────────────────────────────── */
.kontakt { margin: 0; font-style: normal; }
.kontakt div { margin-bottom: 4px; }
/* Rozostup medzi skupinami kontaktu (meno · e-mail+telefón · adresa) —
   aspoň 30px (Marek). Iba MEDZI susednými skupinami, takže prázdna
   skupina (napr. nevyplnená adresa) medzeru nespraví. */
.kontakt-skupina + .kontakt-skupina { margin-top: 32px; }
.kontakt a { text-decoration: none; border-bottom: 1px solid var(--linka); }
.kontakt a:hover, .kontakt a:focus-visible { border-bottom-color: var(--text); }

/* ── pätička ─────────────────────────────────────────────────────────── */
.paticka {
  margin-top: 56px;
  padding-top: 24px;
  padding-bottom: 32px;
  color: var(--tichsi);
  font-size: 14px;
}
.paticka-riadok {
  padding-left: var(--okraj); padding-right: var(--okraj);
  display: flex; flex-wrap: wrap; gap: 6px 24px;
  border-top: 1px solid var(--linka);
  padding-top: 22px;
}
.paticka a { text-decoration: none; }
/* Podpis tvorcu drží pravý okraj riadka; pri zalomení sa odsadí sám. */
.paticka-autor { margin-left: auto; }
.paticka a:hover, .paticka a:focus-visible { color: var(--text); }

/* Prázdna stránka to povie vetou — prázdne miesto vyzerá ako porucha. */
.prazdne { color: var(--tichy); padding-left: var(--okraj); padding-right: var(--okraj); }

@media (max-width: 900px) {
  /* Text ide pred fotky: kto číta na mobile, nemá najprv prejsť
     dvadsať fotiek, aby sa dostal k tomu, čo projekt je. */
  /* Pevné výšky riadkov sa rušia spolu s pevnými miestami: tu už je
     jediný stĺpec a o poradí rozhoduje HTML. */
  .projekt-telo {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: clamp(28px, 3.5vw, 72px);
  }
  /* Tu už o poradí rozhoduje HTML: text, fotky, a AŽ POTOM odkaz preč
     (Marek 2026-08-18). Preto sa pevné miesta z mriežky rušia — inak by
     odkaz zostal zaklinený medzi textom a prvou fotkou.
     `justify-self: start` sa NERUŠÍ: odkaz má byť široký ako slovo, nie
     ako celá obrazovka — podčiarknutie pri dotyku by inak prešlo cez
     celý riadok. */
  .projekt-text, .projekt-galeria, .projekt-telo > .prazdne,
  .projekt-telo > .spat { grid-column: 1; grid-row: auto; }
  /* Odstup nad odkazom už dáva medzera medzi riadkami mriežky. */
  .projekt-telo > .spat { padding-top: 8px; }
}

/* ── mobil ──────────────────────────────────────────────────────────────
   Na úzkom displeji sa logo, menu aj podkategórie zalamovali ako jeden
   dlhý riadok textu: tri skupiny s takmer rovnakou veľkosťou písma
   a rovnakým riadkovaním vedľa seba (Marek 2026-08-12: „bez ladu
   a skladu"). Poriadok robí HIERARCHIA, nie linky ani rámy:
     1. logo — vlastný riadok, zreteľne najväčšie,
     2. menu — pod ním, tesné riadkovanie,
     3. podkategórie — o stupeň drobnejšie a ešte tesnejšie.
   Medzera medzi úrovňami je menšia než medzera pod celou navigáciou,
   takže tri riadky čítame ako jeden blok a mriežka začína zreteľne inde. */
@media (max-width: 700px) {
  /* Medzera medzi úrovňami navigácie je JEDNO číslo (Marek 2026-08-16:
     „rovnaký space medzi logom a 1. úrovňou aj medzi 1. a 2. úrovňou").
     Logo a menu delí margin značky; menu a podkategórie delí spodné
     odsadenie hlavičky PLUS horné odsadenie hlavy výpisu — a to je iný
     prvok, preto by dve ručne zadané čísla raz nevyhnutne ušli od seba.
     Spodné odsadenie hlavičky musí zostať samostatné: hlavička je lepiaca
     a je to vzduch, pod ktorý sa pri posúvaní podsúva mriežka. */
  :root {
    --mob-medzera-navigacie: 11px;
    --mob-hlavicka-dole: 8px;
  }
  .hlavicka {
    /* Blok, nie flex: logo stojí NAD menu zámerne, nie ako to,
       čo sa do riadka nezmestilo. */
    display: block;
    padding: 18px var(--okraj) var(--mob-hlavicka-dole);
  }
  .znacka {
    display: block;
    font-size: 26px;
    line-height: 1.15;
    margin-bottom: var(--mob-medzera-navigacie);
  }
  .menu { gap: 3px 22px; line-height: 1.3; }
  /* Nad druhou úrovňou je presne toľko vzduchu, koľko je medzi logom
     a menu — celý blok navigácie má tak rovnomerný krok (Marek
     2026-08-16). Odčítava sa spodné odsadenie hlavičky, lebo tá stojí
     medzi nimi a jej vzduch sa do medzery počíta tiež.
     (Nahrádza pôvodných 20 px z 2026-08-12, keď boli obe medzery zadané
     zvlášť a druhá vyšla skoro trojnásobná.) */
  .hlava-vypisu {
    padding: calc(var(--mob-medzera-navigacie) - var(--mob-hlavicka-dole))
             var(--okraj) 24px;
  }
  /* Obsahove stranky (Media, About, Contact) zacinaju na mobile o 20 px
     vyssie. Na sirokom displeji drzi nadpis odstup od navigacie clamp,
     ktory je na mobile trvale na svojej dolnej hranici 40 px — a na
     uzkom displeji je to prilis vela prazdneho miesta nad kratkym
     nadpisom (Marek 2026-08-12). */
  .obsah.blok { padding-top: 20px; }
  .filter { gap: 2px 16px; line-height: 1.3; }
  .filter a { font-size: 14px; }
  .mriezka { columns: 1; }
  .projekt-galeria { columns: 1; }

  /* Pätička: jeden stĺpec zarovnaný doľava. Podpis tvorcu sa na mobile
     NEODTLÁČA k pravému okraju — osamotený text na vlastnom riadku pri
     protiľahlej strane vyzeral ako zabudnutý (Marek 2026-08-12). */
  .paticka { margin-top: 40px; padding-bottom: 24px; }
  .paticka-riadok { flex-direction: column; gap: 3px; }
  .paticka-autor { margin-left: 0; margin-top: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .dlazdica-popis { transition: none; }
  .menu a::after, .filter a::after { transition: none; }
}

/* ─────────────────────────────────────────────────────────────────────────
   Prehliadač fotiek projektu (public/prehliadac.js)
   ─────────────────────────────────────────────────────────────────────────
   Čisté biele plátno, jedna fotka veľká na stred, počítadlo vľavo dole.
   Klik na ľavú/pravú polovicu mení fotku. Navigácia webu hore ostáva
   viditeľná. Žiadny sivý overlay, žiadny tieň, žiadne náhľady. */

/* ── odkazy V TEXTE od klienta ────────────────────────────────────────────
   Odkaz musí byť poznať aj bez farby (oddiel 6 kostry: informáciu nikdy
   nenesie len farba). Celý web je čiernobiely, takže farbou sa odlíšiť
   ani nedá — nesie to podčiarknutie. Je tiché, so odsadením od písmen,
   a pri prejdení myšou zosilní.
   Pravidlo je viazané na text OD KLIENTA (`p`, `h2`, `li` v obsahu
   a v texte projektu), nie na `a` vo všeobecnosti — menu, dlaždice
   ani pätička podčiarknuté byť nemajú a majú vlastné pravidlá. */
.projekt-text p a, .projekt-text h2 a, .obsah p a, .obsah h2 a, .obsah li a {
  text-decoration: underline;
  text-decoration-color: var(--linka);
  text-underline-offset: 3px;
  transition: text-decoration-color .28s ease;
}
.projekt-text p a:hover, .projekt-text h2 a:hover, .obsah p a:hover,
.obsah h2 a:hover, .obsah li a:hover,
.projekt-text p a:focus-visible, .obsah p a:focus-visible {
  text-decoration-color: currentColor;
}
@media (prefers-reduced-motion: reduce) {
  .projekt-text p a, .obsah p a { transition: none; }
}

/* Fotky projektu naznačia kurzorom, že sa dajú otvoriť. */
.projekt-hero img, .projekt-galeria img, .projekt-vykresy img { cursor: zoom-in; }

/* Kým je plátno otvorené: zamkni scroll a zdvihni navigáciu NAD plátno,
   aby ostala viditeľná a klikateľná. */
body.lupa-otvorena { overflow: hidden; }
body.lupa-otvorena .hlavicka { z-index: 2147483647; }

.lupa {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Horné odsadenie uvoľní miesto pod lepiacou hlavičkou, dolné pod
     počítadlom — fotka sa tak s ničím neprekrýva. Sú to premenné, lebo tú
     istú plochu musí poznať aj `.lupa-posun` nižšie; dve rovnaké trojice
     čísel by sa raz rozišli a fotka by pri posune poskočila. */
  --lupa-hore: clamp(64px, 9vh, 116px);
  --lupa-boky: clamp(16px, 4vw, 56px);
  --lupa-dole: clamp(48px, 8vh, 84px);
  padding: var(--lupa-hore) var(--lupa-boky) var(--lupa-dole);
}
/* Biele plátno je samostatná vrstva POD fotkou — dá sa plynule zjaviť,
   kým fotka rastie (fotka nesmie zmiznúť spolu s ním). */
.lupa-plato { position: absolute; inset: 0; background: #fff; z-index: 0; }
.lupa-foto {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: top left;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
}
/* Počas prekliku sú na plátne DVE fotky naraz — stará odchádza, nová
   prichádza a idú spolu ako jeden pás (Marek 2026-08-10: „iba posun, bez
   fade"). Preto sa na ten okamih obe vyberú z riadku a stoja voľne nad
   sebou; `inset` + `margin: auto` ich drží presne tam, kde ich predtým
   držal flex, takže na začiatku ani na konci nič nepreskočí. */
.lupa-posun .lupa-foto {
  position: absolute;
  top: var(--lupa-hore); right: var(--lupa-boky);
  bottom: var(--lupa-dole); left: var(--lupa-boky);
  margin: auto;
  /* ⚠ Hranice sa MUSIA prepočítať. `max-width: 100%` sa u voľne stojaceho
     prvku meria od okraja plátna vrátane odsadenia, nie od plochy vnútri
     neho — fotka by sa v okamihu posunu zväčšila a po ňom zase zmenšila.
     Zmerané: 664 → 800 → 664 px. */
  max-width: calc(100% - 2 * var(--lupa-boky));
  max-height: calc(100% - var(--lupa-hore) - var(--lupa-dole));
}
/* Polovice obrazovky = posun. Priehľadné tlačidlá NAD fotkou, aby klik
   kdekoľvek (aj na fotku) fungoval; kurzor napovie smer. */
.lupa-zona {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  z-index: 2;
  background: transparent;
  border: 0; padding: 0; margin: 0;
  -webkit-appearance: none; appearance: none;
}
/* Kurzor navigácie prehliadača (Marek 2026-08-07): systémový w-resize/
   e-resize má výplň aj tieň — nahrádza ho čistá tenká šípka bez výplne a
   bez tieňa (rastrový PNG z /public; Chrome SVG kurzor neberie, preto
   PNG). Systémový kurzor ostáva ako záloha, keby vlastný nešiel. */
.lupa-zona-vlavo { left: 0; cursor: url('/kurzor-vlavo.png') 16 16, w-resize; }
.lupa-zona-vpravo { right: 0; cursor: url('/kurzor-vpravo.png') 16 16, e-resize; }
/* Počítadlo vľavo dole, krížik vpravo dole — obe NAD zónami, takže klik
   na ne posun nespustí (skript ich rieši osobitne). */
.lupa-pocitadlo {
  position: absolute;
  left: clamp(16px, 4vw, 40px);
  bottom: clamp(16px, 4vh, 32px);
  z-index: 3;
  color: var(--tichy);
  font-size: 14px;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.lupa-zavri {
  position: absolute;
  right: clamp(16px, 4vw, 40px);
  bottom: clamp(14px, 4vh, 30px);
  z-index: 3;
  background: transparent;
  border: 0;
  padding: 6px 2px;
  cursor: pointer;
  color: var(--tichy);
  font-size: 14px;
  text-transform: lowercase;
  -webkit-appearance: none; appearance: none;
}
.lupa-zavri:hover, .lupa-zavri:focus-visible { color: var(--text); }