/* ============================================================
   djordjevic.sk - úvodka (pôvodne „smer D - Príbeh", klient si ho vybral)
   Mix smerov A a C vo svetlých odtieňoch. Z céčka si berie
   veľkú typografiu v Montserrate (písmo z loga), červený akcent
   a plagátovú odvahu. Z áčka teplý papier, serifové citáty
   a ľudský tón. Namiesto tmavej plochy je svetlá - web pôsobí
   otvorene, nie konfrontačne.

   Stavba stránky aj názvy sekcií idú podľa toho, ako si to Michal sám
   napísal (naposledy v pripomienkach z 11. 9. 2026):
   MÔJ PRÍBEH → ČO SOM UROBIL → ČO TRÁPI STARÉ MESTO
   → MÔJ PLÁN → PREČO KANDIDUJEM → TÍM STARÉ MESTO
   ============================================================ */
:root{
  --papier:#F8F6F2;   /* teplý svetlý podklad */
  --biela:#FFFFFF;
  --tint:#EDF1F8;     /* studený svetlomodrý panel - odtieň modrej z loga */
  --tus:#16203A;      /* nočná modrá z céčka, tu ako farba textu */
  --tlm:#616B80;
  --cer:#D7101A;
  --cer-tma:#A50C13;
  --cer-svetla:#FDECEC;
  --mod:#2A4A8C;
  --linka:#E4E0D8;
  --linka-mod:#D6DEEC;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:74px}
body{margin:0;background:var(--papier);color:var(--tus);
  font-family:"Inter",system-ui,sans-serif;font-weight:400;font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4,.hg{font-family:"Montserrat",system-ui,sans-serif;font-weight:800;
  letter-spacing:-.028em;line-height:1.06;margin:0;text-transform:uppercase;
  overflow-wrap:break-word}   /* poistka - veľké verzálky nesmú roztiahnuť stránku */
/* 1320 px, nie 1200: so šiestimi položkami v lište sa menu pri 1200 lámalo
   na dva riadky. Rozširuje sa CELÝ .wrap, nie len hlavička - inak by logo
   nesedelo so začiatkom textu pod ním. */
.wrap{max-width:1320px;margin:0 auto;padding:0 28px}
section{padding:92px 0;position:relative}
/* číslovaný nadpis kapitoly - drží príbeh pokope */
.kap{display:flex;align-items:baseline;gap:14px;margin:0 0 16px}
.kap i{font-family:"Montserrat",sans-serif;font-style:normal;font-weight:900;font-size:12px;
  letter-spacing:.16em;color:var(--cer);background:var(--cer-svetla);padding:6px 10px;border-radius:3px}
.kap span{font-family:"Montserrat",sans-serif;font-weight:800;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tlm)}
h2{font-size:clamp(30px,4.3vw,52px);margin:0 0 18px}
h2 em{font-style:normal;color:var(--cer)}
.lede{font-size:18.5px;color:var(--tlm);max-width:64ch;margin:0}

/* ---------- hlavička ---------- */
.hd{position:sticky;top:0;z-index:60;background:rgba(248,246,242,.94);
  backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--linka)}
.hd .wrap{display:flex;align-items:center;gap:22px;height:73px}
.lg{display:inline-flex;align-items:center;gap:11px;text-decoration:none;
  font-family:"Montserrat",sans-serif;line-height:1;--lg-h:34px;flex:none}
.lg svg{height:var(--lg-h);width:auto;display:block;flex:none}
.lg b{display:block;font-weight:800}
.lg .m{font-size:calc(var(--lg-h)*.38);color:var(--mod);letter-spacing:.03em}
.lg .d{font-size:calc(var(--lg-h)*.58);color:var(--cer);margin-top:.1em;letter-spacing:-.01em}
/* Šesť položiek: rozostup aj prestrkanie sú stiahnuté, aby sa lišta zmestila
   na 1280 px. Pri gap:20 a letter-spacing:.08em mala 829 px a pretekala. */
.hd nav{display:flex;gap:15px;margin-left:auto;font-family:"Montserrat",sans-serif;
  font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.hd nav a{text-decoration:none;color:var(--tlm);white-space:nowrap}  /* dvojriadková položka vyzerá ako chyba */
.hd nav a:hover{color:var(--cer)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:14px 24px;text-decoration:none;font-family:"Montserrat",sans-serif;
  font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;border-radius:3px;
  background:var(--cer);color:#fff;border:2px solid var(--cer);transition:background .18s,color .18s}
.btn:hover{background:var(--cer-tma);border-color:var(--cer-tma)}
.btn.duty{background:transparent;color:var(--tus);border-color:var(--linka-mod)}
.btn.duty:hover{background:var(--tus);color:#fff;border-color:var(--tus)}
.hd .btn{padding:11px 17px;font-size:11.5px;flex:none}

/* ---------- burger + drawer ---------- */
/* Na mobile je burger JEDINÉ tlačidlo v hlavičke - CTA „Napíšte mi" sa
   skrýva do drawera. Preto je plný a v značkovej červenej, nie tenký obrys:
   inak je to najdôležitejší ovládač stránky a vyzerá ako dekorácia.
   44 px je zároveň minimum na pohodlný dotyk. */
.burger{display:none;margin-left:auto;width:44px;height:44px;border:0;
  background:var(--cer);border-radius:3px;position:relative;cursor:pointer;flex:none;
  box-shadow:0 2px 10px rgba(215,16,26,.32);transition:background .18s,box-shadow .18s}
.burger:hover{background:var(--cer-tma)}
.burger i{position:absolute;left:12px;right:12px;height:2.5px;border-radius:2px;background:#fff;
  transition:transform .25s,opacity .2s}
.burger i:nth-child(1){top:14px} .burger i:nth-child(2){top:21px} .burger i:nth-child(3){top:28px}
.burger.is-open{background:var(--tus);box-shadow:none}
.burger.is-open i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.is-open i:nth-child(2){opacity:0}
.burger.is-open i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.drawer{position:fixed;inset:73px 0 0;z-index:55;background:var(--papier);
  padding:26px;display:none;flex-direction:column;gap:2px;overflow-y:auto}
.drawer.is-open{display:flex}
.drawer a{text-decoration:none;font-family:"Montserrat",sans-serif;font-weight:800;
  text-transform:uppercase;font-size:22px;padding:14px 0;border-bottom:1px solid var(--linka)}
.drawer .btn{margin-top:20px;font-size:14px;padding:16px 22px}
body.is-locked{overflow:hidden}

/* ---------- hero ---------- */
.hero{padding:56px 0 0;overflow:hidden}
/* svetlý klin - tá istá šikmá hrana ako v značke „M", len v jemnom odtieni */
.hero::before{content:"";position:absolute;top:0;right:0;width:52%;height:100%;
  background:var(--tint);clip-path:polygon(28% 0, 100% 0, 100% 100%, 0 100%);pointer-events:none}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;
  gap:40px;align-items:end}
.hero .kto{display:inline-flex;align-items:center;gap:10px;font-family:"Montserrat",sans-serif;
  font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:var(--cer);padding:9px 14px;border-radius:3px;margin-bottom:24px}
/* 62 px je strop preto, aby sa „JE MÔJ DOMOV." zmestilo na jeden riadok.
   Pri 72 px sa lámalo na tri riadky a celý ľavý stĺpec pôsobil natlačene. */
.hero h1{font-size:clamp(34px,4.9vw,62px);font-weight:900;line-height:.99;margin:0 0 22px}
.hero h1 em{font-style:normal;color:var(--cer)}
.hero p.uvod{font-size:19px;color:var(--tlm);max-width:47ch;margin:0 0 30px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.hero .odpocet{display:inline-flex;align-items:center;gap:16px;background:var(--biela);
  border:1px solid var(--linka);border-left:4px solid var(--cer);border-radius:3px;
  padding:14px 20px;margin-bottom:56px}
.hero .odpocet .cislo{font-family:"Montserrat",sans-serif;font-weight:900;font-size:44px;
  line-height:.86;color:var(--cer);letter-spacing:-.04em}
.hero .odpocet .popis{font-family:"Montserrat",sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.hero .odpocet .popis small{display:block;color:var(--tlm);font-weight:600;letter-spacing:.08em}
.hero-foto{align-self:end;position:relative}
.hero-foto img{width:100%;max-width:470px;margin:0 0 0 auto;
  filter:drop-shadow(0 26px 44px rgba(22,32,58,.22))}

/* ---------- pás s číslami (od Polačeka: veľké čísla hneď pod hero) ---------- */
.pas{background:var(--tus);color:#fff}
.pas .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.pas .wrap > div{padding:28px 26px;border-left:1px solid rgba(255,255,255,.16)}
.pas .wrap > div:first-child{border-left:0;padding-left:0}
.pas b{display:block;font-family:"Montserrat",sans-serif;font-weight:900;font-size:40px;
  line-height:1;letter-spacing:-.04em;margin-bottom:7px;color:#FF4A53}
.pas span{font-size:13.5px;color:rgba(255,255,255,.78);line-height:1.45;display:block}

/* ---------- môj príbeh ---------- */
.ktosom{background:var(--papier)}
.ktosom .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:54px;align-items:start}
/* Fotky sa pri dlhom texte prilepia - stĺpec s obrázkami je kratší
   než text vedľa neho, takže inak by pod ním ostala prázdna diera. */
.ktosom .fotky{display:grid;gap:14px;grid-template-columns:1fr 1fr;
  position:sticky;top:95px;align-self:start}
.ktosom .fotky img{border-radius:4px;aspect-ratio:3/4;object-fit:cover;width:100%}
.ktosom .fotky .siroka{grid-column:span 2}
.ktosom .fotky .siroka img{aspect-ratio:16/10}
.ktosom p{margin:0 0 18px;color:var(--tlm)}
.ktosom p.prvy{font-size:19.5px;color:var(--tus)}
/* Jednovetové predely, ktoré má klient vo svojom texte ako tučné riadky.
   Dlhý príbeh sa nimi rozpadne na kapitolky a dá sa čítať po kúskoch. */
.ktosom p.medzi{margin:30px 0 14px;color:var(--tus);font-size:18px;font-weight:600;
  padding-left:18px;border-left:3px solid var(--cer);line-height:1.45}
.citat{margin:32px 0;padding:2px 0 2px 24px;border-left:3px solid var(--cer);
  font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:24px;line-height:1.42;
  color:var(--tus)}
.fakty{margin-top:32px;border-top:1px solid var(--linka)}
.fakty div{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--linka);font-size:15px}
.fakty b{flex:0 0 132px;   /* najdlhší štítok je „Verejné služby" */font-family:"Montserrat",sans-serif;font-weight:800;color:var(--cer);
  font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding-top:4px}
.fakty span{color:var(--tlm)}

/* ---------- čo som urobil ---------- */
.urobil{background:var(--biela);border-top:1px solid var(--linka);border-bottom:1px solid var(--linka)}
.skupina{margin-top:44px}
.skupina > h3{font-family:"Montserrat",sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.18em;color:var(--tus);padding-bottom:12px;border-bottom:2px solid var(--tus);
  margin-bottom:0}
.polozky{margin:0;padding:0;list-style:none}
.polozky li{display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--linka)}
.polozky li .fajka{width:22px;height:22px;border-radius:3px;background:var(--cer-svetla);
  display:grid;place-items:center;margin-top:2px}
.polozky li .fajka svg{width:12px;height:12px;fill:none;stroke:var(--cer);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round}
.polozky li b{display:block;font-family:"Montserrat",sans-serif;font-weight:800;font-size:16.5px;
  letter-spacing:-.01em;margin-bottom:3px;text-transform:none}
.polozky li span{color:var(--tlm);font-size:15.5px;line-height:1.62}
.polozky li mark{background:transparent;color:var(--mod);font-weight:600}
.dokazy{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.dokazy figure{margin:0;position:relative;border-radius:4px;overflow:hidden}
/* 4/3 orezávalo hlavy - zdrojové fotky sú na výšku (3:4).
   4/5 je k nim najbližšie, doorezanie rieši object-position na <img>. */
.dokazy img{aspect-ratio:4/5;object-fit:cover;width:100%}
.dokazy figcaption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;
  font-family:"Montserrat",sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(12,18,36,.88))}
.nie-sluby{margin-top:38px;background:var(--tus);color:#fff;border-radius:4px;padding:30px 34px;
  display:flex;gap:26px;align-items:center;flex-wrap:wrap}
/* POZOR: `flex:none` tu byť nesmie. Nadpis je dlhý a v Montserrate 900
   má cez 420 px - na mobile by sa nezalomil a roztiahol by celý dokument. */
.nie-sluby b{font-family:"Montserrat",sans-serif;font-weight:900;
  font-size:clamp(19px,4.6vw,23px);
  text-transform:uppercase;letter-spacing:-.02em;flex:0 1 auto;min-width:0}
.nie-sluby span{color:rgba(255,255,255,.8);font-size:16px;flex:1 1 240px;min-width:0}

/* ---------- čo trápi Staré Mesto ---------- */
.trapi{background:var(--tint)}
/* Klientov zoznam problémov - dva stĺpce, aby osem riadkov nezabralo
   celú obrazovku ešte pred kartami s riešeniami. */
.tr-zoznam{margin:30px 0 0;padding:0;list-style:none;columns:2;column-gap:38px;
  font-size:16.5px;color:var(--tus)}
.tr-zoznam li{break-inside:avoid;display:flex;gap:11px;padding:7px 0;line-height:1.55}
.tr-zoznam li::before{content:"";flex:none;width:7px;height:7px;margin-top:10px;border-radius:50%;
  background:var(--cer)}
.tr-zaver{margin:22px 0 0;color:var(--tlm);max-width:64ch}
.tr-zaver b{color:var(--tus)}
.tr-grid{margin-top:42px;display:grid;gap:14px}
.tr{background:var(--biela);border-radius:4px;border:1px solid var(--linka-mod);
  display:grid;grid-template-columns:1.05fr 1.35fr;overflow:hidden}
.tr .problem{padding:26px 28px;background:var(--cer-svetla);border-right:1px solid var(--linka-mod)}
.tr .problem .stitok{font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--cer);margin:0 0 10px}
.tr .problem h3{font-size:20px;margin:0 0 8px;text-transform:none;letter-spacing:-.02em}
.tr .problem p{margin:0;color:var(--tlm);font-size:15.5px;line-height:1.6}
.tr .riesenie{padding:26px 28px}
.tr .riesenie .stitok{font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mod);margin:0 0 10px}
.tr .riesenie ul{margin:0;padding:0;list-style:none;font-size:15.5px}
.tr .riesenie li{display:flex;gap:11px;padding:5px 0;color:var(--tlm);line-height:1.6}
.tr .riesenie li::before{content:"";flex:none;width:8px;height:8px;margin-top:9px;
  background:var(--cer);clip-path:polygon(0 0,100% 50%,0 100%)}

/* ---------- čo chcem urobiť ďalej ---------- */
.dalej{background:var(--papier)}
.pl-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px}
.pl{background:var(--biela);border:1px solid var(--linka);border-radius:4px;padding:26px 22px;
  display:flex;flex-direction:column}
.pl .cislo{font-family:"Montserrat",sans-serif;font-weight:900;font-size:34px;line-height:1;
  color:transparent;-webkit-text-stroke:1.6px var(--cer);letter-spacing:-.05em;margin-bottom:16px}
.pl h3{font-size:18px;margin:0 0 9px;letter-spacing:-.02em}
.pl p{margin:0;font-size:15px;color:var(--tlm);line-height:1.6}

/* ---------- prečo kandidujem ---------- */
.preco{background:var(--tus);color:#fff}
.preco .kap span{color:rgba(255,255,255,.6)}
.preco .kap i{background:rgba(215,16,26,.2);color:#FF6068}
.preco h2{color:#fff}
.preco h2 em{color:#FF4A53}
.preco .lede{color:rgba(255,255,255,.75)}
/* Klientov text v tejto sekcii. Dva stĺpce by na tmavom pozadí unavili,
   preto jeden úzky stĺpec - rovnaká šírka riadka ako .lede. */
.pc-text{margin-top:24px;max-width:64ch}
.pc-text p{margin:0 0 16px;color:rgba(255,255,255,.75);font-size:17px;line-height:1.72}
.pc-text b{color:#fff;font-weight:600}
.pc-text .pc-zaver{font-family:"Montserrat",sans-serif;font-weight:800;font-size:19px;
  line-height:1.35;letter-spacing:-.02em;color:#fff;margin-top:26px}
.over-nad{font-family:"Montserrat",sans-serif;font-weight:800;font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.6);margin:44px 0 0}
.pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-top:44px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.14);border-radius:4px;
  overflow:hidden}
.pr-grid > div{background:var(--tus);padding:28px 26px}
.pr-grid h3{font-size:18px;margin:0 0 10px;letter-spacing:-.02em}
.pr-grid p{margin:0;font-size:15px;color:rgba(255,255,255,.72);line-height:1.62}
.overit{margin-top:36px;border-top:1px solid rgba(255,255,255,.16)}
/* Od doplnenia skutočných odkazov (11. 9. 2026) je vpravo doména, nie krátke
   „Doplniť odkaz →". Na 320 px sa „Financovanie kampane - transparentný účet"
   a „transparentneucty.sk →" vedľa seba nezmestia - preto flex-wrap a min-width:0.
   Bez toho riadok pretekal o 4 px a ťahal so sebou celý dokument. */
.overit a,.overit div{display:flex;gap:16px;align-items:baseline;padding:15px 0;
  border-bottom:1px solid rgba(255,255,255,.12);text-decoration:none;flex-wrap:wrap}
.overit b{flex:1 1 12ch;min-width:0;overflow-wrap:break-word;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:16px;
  text-transform:none;letter-spacing:-.01em}
.overit span{color:rgba(255,255,255,.55);font-size:14px;flex:none;overflow-wrap:break-word}
.overit a:hover b{color:#FF6068}

.over-nad + .overit{margin-top:14px}

/* ---------- tím Staré Mesto ----------
   Fotky kandidátov zatiaľ nemáme, preto má každá dlaždica značkovú náhradu:
   iniciály v modrej z loga + pásik „Tím Staré Mesto". Pomer strán drží .tm-foto,
   takže výmena náhrady za <img> nezmení rozloženie ani o pixel. */
.tim{background:var(--papier);border-top:1px solid var(--linka)}
.tm-uvod{margin:18px 0 0;color:var(--tlm);max-width:64ch}
.tm-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px}
.tm{margin:0}
.tm-foto{position:relative;aspect-ratio:3/4;border-radius:4px;overflow:hidden;
  border:1px solid var(--linka-mod);
  background:linear-gradient(155deg,var(--tint) 0%,#DCE4F2 58%,#CBD7EC 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.tm-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
/* značka „M" z loga ako vodoznak - iba v náhrade, pod fotkou by prekážala */
.tm-foto::after{content:"";position:absolute;right:4%;bottom:4%;width:40%;height:40%;
  background:url(/favicon.svg) no-repeat center/contain;opacity:.06;pointer-events:none}
.tm-foto:has(img)::after{display:none}   /* platí aj pre Michala - odkedy majú
     fotku aj ostatní, vodoznak pod jeho portrétom by ho z radu vyčlenil */
.tm-pozn{margin:14px 0 0;font-size:13.5px;color:var(--tlm)}
.tm-ini{font-family:"Montserrat",sans-serif;font-weight:900;font-size:44px;line-height:1;
  letter-spacing:-.04em;color:var(--mod)}
.tm-znacka{font-family:"Montserrat",sans-serif;font-weight:800;font-size:9.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cer)}
.tm figcaption{padding-top:14px}
/* „Martina Dzúr-Gejdošová" má v Montserrate 800 na 320 px viac než stĺpec -
   bez break-word vytrčí z dlaždice do susednej. */
.tm figcaption b{display:block;font-family:"Montserrat",sans-serif;font-weight:800;font-size:16.5px;
  letter-spacing:-.02em;line-height:1.2;overflow-wrap:break-word}
.tm figcaption span{display:block;margin-top:6px;font-size:13.5px;color:var(--tlm);line-height:1.5}
/* Michal je na kandidátke v obvode 3 aj on sám - dlaždica to má priznať */
.tm-ja .tm-foto{border-color:var(--cer);box-shadow:0 0 0 2px var(--cer-svetla)}
.tm-ja figcaption b{color:var(--cer)}
.tm-preco{margin-top:48px;background:var(--biela);border:1px solid var(--linka);border-radius:4px;
  padding:30px 32px;max-width:72ch}
.tm-preco h3{font-size:20px;margin:0 0 14px;text-transform:none;letter-spacing:-.02em}
.tm-preco p{margin:0 0 12px;color:var(--tlm);font-size:16px;line-height:1.7}
.tm-preco p:last-child{margin-bottom:0}
.tm-preco b{color:var(--tus);font-weight:600}

/* ---------- lístok ---------- */
.listok{background:var(--biela);border-top:1px solid var(--linka)}
.lis-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:40px}
.lis{border:1px solid var(--linka-mod);border-radius:4px;padding:24px 22px;
  display:flex;flex-direction:column;background:var(--papier)}
.lis.hlavny{background:var(--cer);border-color:var(--cer);color:#fff}
.lis .rola{font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tlm);margin:0 0 12px}
.lis.hlavny .rola{color:rgba(255,255,255,.85)}
.lis .co{font-family:"Montserrat",sans-serif;font-weight:800;font-size:17px;line-height:1.2;
  letter-spacing:-.02em;margin:0 0 auto;padding-bottom:20px}
.lis .cis{display:flex;align-items:baseline;gap:8px;font-family:"Montserrat",sans-serif;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--tlm);margin:0}
.lis.hlavny .cis{color:rgba(255,255,255,.85)}
.lis .cis b{font-weight:900;font-size:30px;color:var(--cer);letter-spacing:-.03em}
.lis.hlavny .cis b{color:#fff}
.pozn{margin-top:22px;font-size:13.5px;color:var(--tlm)}

/* ---------- medzi ľuďmi ---------- */
.ludia{background:var(--papier)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:42px}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:4px}
.gal img{aspect-ratio:4/5;object-fit:cover;width:100%;transition:transform .5s ease}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 12px;
  font-family:"Montserrat",sans-serif;font-size:11px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:linear-gradient(transparent,rgba(12,18,36,.88))}
.gal .siroky{grid-column:span 2} .gal .siroky img{aspect-ratio:8/5}

/* ---------- podnet ---------- */
.podnet{background:var(--tint);border-top:1px solid var(--linka-mod)}
.podnet .wrap{display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:start}
/* Bez `min-width:0` si položky mriežky držia min-content šírku vstupov
   a na úzkych displejoch roztiahnu celý dokument. */
.podnet .wrap > *{min-width:0}
.form input,.form textarea,.form select{min-width:0}
.form{background:var(--biela);border:1px solid var(--linka-mod);border-radius:4px;padding:32px}
.form label{display:block;font-family:"Montserrat",sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tlm);margin:0 0 7px}
.form input,.form textarea,.form select{width:100%;font-family:inherit;font-size:16px;
  padding:12px 14px;border:1px solid var(--linka-mod);border-radius:3px;background:var(--biela);
  color:var(--tus);margin-bottom:18px}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid rgba(215,16,26,.3);border-color:var(--cer)}
.form .btn{width:100%}
.form .mini{font-size:13px;color:var(--tlm);margin:14px 0 0;line-height:1.6}
.kontakt-blok{margin-top:28px;border-top:1px solid var(--linka-mod)}
.kontakt-blok a,.kontakt-blok div{display:flex;gap:16px;padding:15px 0;
  border-bottom:1px solid var(--linka-mod);text-decoration:none;align-items:baseline}
.kontakt-blok b{flex:0 0 104px;font-family:"Montserrat",sans-serif;font-size:11px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--cer)}
/* `michal@djordjevic.sk` je jedno dlhé slovo bez medzery - bez `min-width:0`
   a zalamovania roztiahne riadok a s ním celý dokument na úzkych displejoch. */
.kontakt-blok span{color:var(--tlm);min-width:0;overflow-wrap:anywhere}
.kontakt-blok a:hover span{color:var(--tus)}

/* ---------- pätička ---------- */
footer{background:var(--tus);color:rgba(255,255,255,.62);padding:56px 0 0;font-size:14.5px}
footer .wrap{display:flex;gap:40px;flex-wrap:wrap;justify-content:space-between;align-items:flex-start}
footer .lg .m{color:rgba(255,255,255,.9)} footer .lg .d{color:#FF4A53}
footer nav{display:flex;flex-direction:column;gap:9px}
footer a{text-decoration:none} footer a:hover{color:#fff}
.ukazka{margin-top:44px;border-top:1px solid rgba(255,255,255,.14);padding:18px 0;
  font-size:13px;color:rgba(255,255,255,.45);display:flex;gap:10px 26px;flex-wrap:wrap;
  justify-content:space-between}
/* Označenie objednávateľa je pri volebnej kampani povinné - zákon č. 181/2014 Z. z. */
.ukazka b{font-weight:600;color:rgba(255,255,255,.7)}
.ukazka a{color:rgba(255,255,255,.7);text-underline-offset:2px}
.ukazka a:hover{color:#fff}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .65s ease,transform .65s ease}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ---------- responzívne ---------- */
@media (max-width:1080px){
  .pl-grid{grid-template-columns:repeat(3,1fr)}
  .pr-grid{grid-template-columns:1fr 1fr}
  .lis-grid{grid-template-columns:1fr 1fr}
  .tm-grid{grid-template-columns:repeat(3,1fr)}
  .pas .wrap{grid-template-columns:1fr 1fr}
  .pas .wrap > div:nth-child(3){border-left:0;padding-left:0}
}
/* Montserrat je široký a v lište je po novom šesť položiek („Tím Staré Mesto"
   pribudol z klientových pripomienok) - hlavička sa prestane zmestiť skôr
   než čokoľvek iné, preto burger nastupuje už tu, nie pri 900 px.
   Hranicu NEHÁDAJ - zmeraj šírky detí .hd .wrap (recept je v README). */
@media (max-width:1180px){
  .hd nav{display:none}
  .hd .btn{display:none}          /* CTA ide do drawera, nie preč */
  .burger{display:block}
}
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:0}
  .hero::before{width:100%;clip-path:polygon(0 46%,100% 30%,100% 100%,0 100%)}
  .hero-foto img{max-width:330px;margin:0 auto}
  .ktosom .wrap,.podnet .wrap{grid-template-columns:1fr;gap:38px}
  .ktosom .fotky{grid-template-columns:1fr 1fr;position:static}
  .tr{grid-template-columns:1fr}
  .tr .problem{border-right:0;border-bottom:1px solid var(--linka-mod)}
  .dokazy{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .tm-grid{grid-template-columns:repeat(2,1fr)}
  .tm-preco{padding:26px 24px}
}
@media (max-width:640px){
  section{padding:64px 0}
  .wrap{padding:0 20px}
  .lg{--lg-h:29px}
  .pl-grid,.pr-grid,.lis-grid{grid-template-columns:1fr}
  .tr-zoznam{columns:1}
  .tm-ini{font-size:34px}
  .tm figcaption b{font-size:15px}
  .pas .wrap{grid-template-columns:1fr}
  .pas .wrap > div{border-left:0;padding-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .pas .wrap > div:first-child{border-top:0}
  .hero .odpocet{width:100%}
  .nie-sluby{padding:24px}
  .smery .back{margin-left:0;width:100%}
}

/* ---------- lightbox (galéria) ----------
   Bez knižnice. Zbiera fotky podľa selektora v skripte na konci súboru,
   ovláda sa klikom, šípkami a Esc. Funguje na svetlom aj tmavom smere,
   lebo má vlastné tmavé pozadie. */
.lb{position:fixed;inset:0;z-index:200;background:rgba(7,11,20,.95);
  display:grid;place-items:center;padding:60px 20px;
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.lb[hidden]{display:none}
.lb-box{margin:0;display:flex;flex-direction:column;gap:14px;
  max-width:min(1180px,94vw);max-height:86vh}
.lb-box img{margin:0 auto;max-width:100%;max-height:74vh;width:auto;height:auto;
  object-fit:contain;border-radius:3px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.lb-box figcaption{display:flex;gap:16px;justify-content:center;align-items:baseline;
  flex-wrap:wrap;color:rgba(255,255,255,.82);font-family:"Inter",system-ui,sans-serif;
  font-size:14.5px;font-weight:400;line-height:1.5;text-align:center;text-transform:none;
  letter-spacing:0}
.lb-box figcaption em{font-style:normal;color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;flex:none}
.lb button{position:absolute;background:rgba(255,255,255,.1);color:#fff;cursor:pointer;
  border:1px solid rgba(255,255,255,.25);border-radius:3px;line-height:1;padding:0;
  font-family:system-ui,sans-serif;transition:background .18s,border-color .18s}
.lb button:hover{background:rgba(255,255,255,.22);border-color:rgba(255,255,255,.5)}
.lb button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.lb-x{top:18px;right:18px;width:44px;height:44px;font-size:24px}
.lb-p,.lb-n{top:50%;transform:translateY(-50%);width:46px;height:66px;font-size:30px}
.lb-p{left:16px} .lb-n{right:16px}
[data-lb]{cursor:zoom-in}
[data-lb]:focus-visible{outline:3px solid var(--cer,#D7101A);outline-offset:3px}
@media (max-width:640px){
  .lb{padding:56px 10px}
  .lb-x{top:10px;right:10px;width:40px;height:40px}
  .lb-p,.lb-n{width:36px;height:52px;font-size:24px}
  .lb-p{left:6px} .lb-n{right:6px}
  .lb-box img{max-height:66vh}
}

/* ---------- „Nie som bez chýb" (návrh, klient musí schváliť) ---------- */
.otvorene{background:var(--biela);border-top:1px solid var(--linka)}
.ot-box{max-width:64ch;margin:0 auto;text-align:center}
.ot-oko{font-family:"Montserrat",sans-serif;font-size:11.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tlm);margin:0 0 14px}
.otvorene h2{font-size:clamp(28px,3.6vw,44px);margin:0 0 22px}
.otvorene p{color:var(--tlm);margin:0 0 16px;font-size:17.5px}
.otvorene .ot-zaver{font-family:"Newsreader",Georgia,serif;font-style:italic;font-size:21px;
  line-height:1.5;color:var(--tus);margin:26px auto 0;padding-top:24px;
  border-top:1px solid var(--linka);max-width:54ch}

/* ============================================================
   NADPIS HERA (nové heslo z kampaňových bannerov)
   „Košice sú moje rodné mesto." je rozbeh, „Staré Mesto je môj
   domov." je pointa - preto stúpajúca veľkosť, nie dva rovnaké
   riadky. Prehnuté linky sú prevzaté z bannerov: červená pod
   rozbehom, modrá pod nadpisom.
   ============================================================ */
.nadheslo{font-family:"Montserrat",sans-serif;font-weight:800;
  font-size:clamp(15px,2.1vw,22px);line-height:1.16;letter-spacing:-.005em;
  text-transform:uppercase;color:var(--mod);margin:0 0 9px}
/* Na banneri sú pod heslom prehnuté linky. Oblúk sme skúsili a nefunguje -
   takmer vodorovná krivka sa antialiasingom rozmaže do šmuhy a proti
   hranatej geometrii webu pôsobí cudzo. Rovná linka je ostrá pri každom
   rozlíšení a farby (červená / modrá) význam nesú rovnako. */
.ciara{display:block;height:5px;border-radius:2px}
.ciara.cer{width:min(300px,62%);background:var(--cer);margin:0 0 16px}
.ciara.mod{width:min(360px,74%);background:var(--mod);margin:0 0 20px}
/* tichý podpis pod tlačidlami - tvrdenie, ktoré web hneď aj dokazuje */
.podpis{font-family:"Montserrat",sans-serif;font-weight:800;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tlm);margin:0 0 26px}
.hero .cta{margin-bottom:18px}

/* ============================================================
   HERO B - varianta s fotkou Košíc
   Prepína sa atribútom data-hero na <html> (skript v <head>).
   Fotka je svetlá, preto dva závoje naraz - vodorovný pre text
   vľavo a zvislý pod hlavičku. Bez toho sa nadpis stratí.
   ============================================================ */
html[data-hero="a"] .hero-b,html[data-hero="a"] .hero-c{display:none}
html[data-hero="b"] .hero-a,html[data-hero="b"] .hero-c{display:none}
html[data-hero="c"] .hero-a,html[data-hero="c"] .hero-b{display:none}

/* ============================================================
   HERO B - fotka centra Košíc cez celú plochu
   Fotka je svetlá, preto dva závoje naraz - vodorovný, aby sa dal
   vľavo čítať text, a zvislý pod hlavičku.
   ============================================================ */
.hero-b{padding:0;position:relative;overflow:hidden;background:var(--papier);
  min-height:min(660px,88vh);display:flex;align-items:flex-end}
.hb-foto{position:absolute;inset:0;
  background:url(/assets/img/hero-mesto.jpg) center bottom/cover no-repeat}
.hb-zavoj{position:absolute;inset:0;background:
  linear-gradient(to right,rgba(248,246,242,.975) 0%,rgba(248,246,242,.93) 33%,
                  rgba(248,246,242,.46) 62%,rgba(248,246,242,.08) 100%),
  linear-gradient(to bottom,rgba(248,246,242,.92) 0%,rgba(248,246,242,0) 24%)}
.hero-b .wrap{position:relative;z-index:2;width:100%;   /* flex item - bez šírky by sa zmrštil na obsah */
  display:grid;grid-template-columns:1.06fr .94fr;gap:30px;align-items:end;padding-top:52px}
.hb-text{padding-bottom:54px}
.hero-b .kto{display:inline-flex;align-items:center;gap:10px;font-family:"Montserrat",sans-serif;
  font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:var(--cer);padding:9px 14px;border-radius:3px;margin-bottom:22px}
/* Béčko nemá .ciara. Odsadenia, ktoré dovtedy robili tie čiarky (16 px nad
   nadpisom, 20 px pod ním), preto musia byť na samotnom texte - inak sa
   heslo, nadpis a odstavec zlepia. */
.hero-b .nadheslo{margin-bottom:16px}
.hero-b h1{font-size:clamp(34px,4.7vw,60px);font-weight:900;line-height:.99;margin:0 0 28px}
.hero-b h1 em{font-style:normal;color:var(--cer)}
.hero-b p.uvod{font-size:18px;color:var(--tlm);max-width:44ch;margin:0 0 26px}
.hero-b .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hero-b .podpis{margin-bottom:26px}
.hero-b .odpocet{display:inline-flex;align-items:center;gap:16px;background:var(--biela);
  border:1px solid var(--linka);border-left:4px solid var(--cer);border-radius:3px;
  padding:14px 20px;margin:0}
.hero-b .odpocet .cislo{font-family:"Montserrat",sans-serif;font-weight:900;font-size:44px;
  line-height:.86;color:var(--cer);letter-spacing:-.04em}
.hero-b .odpocet .popis{font-family:"Montserrat",sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.hero-b .odpocet .popis small{display:block;color:var(--tlm);font-weight:600;letter-spacing:.08em}
.hb-portret{align-self:end}
/* Zdrojová fotka je orezaná pri pleciach aj v páse. Skúšali sme spodok
   rozpúšťať maskou, ale robilo to postavu priesvitnou - presvitala cez ňu
   ohrada. Netreba to: portrét končí presne na spodnej hrane sekcie, takže
   rez splynie s prechodom do pásu s číslami.
   Postava zámerne pretŕča von z mriežky, aby mala v hero váhu;
   `.hero-b` má `overflow:hidden`, takže nič nepresahuje. */
.hb-portret img{width:118%;max-width:none;margin:0 -8% 0 auto;
  filter:drop-shadow(0 18px 38px rgba(22,32,58,.34))}

@media (max-width:900px){
  .hero-b{min-height:0}
  .hero-b .wrap{grid-template-columns:1fr;gap:0}
  .hb-text{padding-bottom:30px}
  .hb-zavoj{background:linear-gradient(to bottom,rgba(248,246,242,.97) 0%,
             rgba(248,246,242,.9) 42%,rgba(248,246,242,.3) 100%)}
  .hb-portret img{width:100%;max-width:360px;margin:0 auto}
}
@media (max-width:640px){
  .hero-b .odpocet{width:100%}
}

/* ============================================================
   HERO C - svetlá varianta s Dómom
   Klient si pri výbere smeru vybral svetlé déčko práve namiesto
   tmavého „Kampaň", takže tmavý panel tu bol proti jeho vlastnému
   rozhodnutiu. Céčko je preto na papieri; vľavo text, vpravo Dóm,
   medzi nimi gradient - nie hrana.

   Fotka je zámerne INÝ SÚBOR než v béčku (`hero-mesto-dom.jpg`).
   V pôvodnom zábere je Dóm celkom vľavo a pri tomto rozložení by ho
   zakryl text; výrez ho posúva do pravej polovice, kde je vidieť.
   Preto tu nefunguje ani posúvanie cez `background-position` - pri
   širokom okne je hero širší než fotka, takže sa horizontálne
   neoreže a nie je čím hýbať.
   ============================================================ */
.hero-c{position:relative;overflow:hidden;padding:0;background:var(--papier);
  min-height:min(660px,88vh);display:flex;align-items:stretch}
.hc-foto{position:absolute;right:0;top:0;bottom:0;left:34%;
  background:url(/assets/img/hero-mesto-dom.jpg) 34% center/cover no-repeat}
/* závoj len na ľavej tretine fotky - vpravo musí Dóm ostať čistý */
.hc-zavoj{position:absolute;right:0;top:0;bottom:0;left:34%;background:
  linear-gradient(to right,var(--papier) 0%,rgba(248,246,242,.88) 16%,
                  rgba(248,246,242,.30) 42%,rgba(248,246,242,0) 66%)}
.hero-c .wrap{position:relative;z-index:2;width:100%;display:grid;
  grid-template-columns:1.02fr .98fr;gap:30px;align-items:end;padding-top:58px}
.hc-text{padding:0 0 58px;max-width:33rem}
.hero-c .kto{display:inline-flex;align-items:center;gap:10px;font-family:"Montserrat",sans-serif;
  font-size:11.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#fff;
  background:var(--cer);padding:9px 14px;border-radius:3px;margin-bottom:22px}
.hero-c h1{font-size:clamp(34px,4.7vw,60px);font-weight:900;line-height:.99;margin:0 0 22px}
.hero-c h1 em{font-style:normal;color:var(--cer)}
.hero-c p.uvod{font-size:18px;color:var(--tlm);max-width:40ch;margin:0 0 26px}
.hero-c .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hero-c .podpis{margin-bottom:28px}
.hero-c .odpocet{display:inline-flex;align-items:center;gap:16px;background:var(--biela);
  border:1px solid var(--linka);border-left:4px solid var(--cer);border-radius:3px;
  padding:14px 20px;margin:0;box-shadow:0 10px 26px rgba(22,32,58,.07)}
.hero-c .odpocet .cislo{font-family:"Montserrat",sans-serif;font-weight:900;font-size:44px;
  line-height:.86;color:var(--cer);letter-spacing:-.04em}
.hero-c .odpocet .popis{font-family:"Montserrat",sans-serif;font-size:11.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.hero-c .odpocet .popis small{display:block;color:var(--tlm);font-weight:600;letter-spacing:.08em}
.hc-portret{align-self:end;height:100%;display:flex;align-items:flex-end}
.hc-portret img{width:100%;max-width:430px;margin:0 0 0 auto;
  filter:drop-shadow(0 26px 44px rgba(22,32,58,.28))}

@media (max-width:900px){
  /* Na mobile je fotka pod textom cez celú šírku a závoj ide zhora nadol. */
  .hero-c{min-height:0;display:block}
  .hc-foto,.hc-zavoj{left:0}
  .hc-zavoj{background:linear-gradient(to bottom,var(--papier) 0%,
             rgba(248,246,242,.92) 30%,rgba(248,246,242,.25) 100%)}
  .hero-c .wrap{grid-template-columns:1fr;gap:0;padding-top:44px}
  .hc-text{padding-bottom:32px;max-width:none}
  .hc-portret{display:block;height:auto}
  .hc-portret img{max-width:300px;margin:0 auto}
  .hero-c .odpocet{width:100%}
}

/* ============================================================
   Portréty v hero sa nemajú dať chytiť a potiahnuť myšou.
   `-webkit-user-drag` vypne ťahanie, `pointer-events:none` navyše
   aj kontextové menu nad obrázkom. Lightbox to neovplyvní - ten si
   fotky berie zo sekcií nižšie, nie z hera.
   Pozor: nie je to ochrana obsahu, fotku si stále vie ktokoľvek
   stiahnuť z adresy súboru. Je to len proti nechcenému potiahnutiu.
   ============================================================ */
.hero-foto img,.hb-portret img,.hc-portret img,.hb-foto,.hc-foto{
  -webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}

/* ============================================================
   DOČASNÝ PREPÍNAČ HERA - na ukážku pre klienta.
   NIE JE súčasťou návrhu webu, pred ostrým spustením ide preč
   aj so skriptom v <head> a s nevybranými variantami hera.

   Vpravo HORE pod hlavičkou a `z-index` nad lištou cookies
   (`.ck` má 300, panel 310). Dole byť nemôže - lišta cookies je
   tiež fixná na spodku a celý prepínač prekryje.
   ============================================================ */
/* Varianta je vybraná (B), prepínač sa preto nezobrazuje. Zmazaním tohto
   jedného riadka sa vráti späť - kód prepínača aj oboch variant zostáva. */
.hero-prep{display:none!important}
.hero-prep{position:fixed;right:16px;top:86px;z-index:320;display:flex;align-items:center;
  gap:6px;background:rgba(22,32,58,.94);color:#fff;border-radius:4px;padding:7px 9px;
  font-family:"Montserrat",sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;box-shadow:0 10px 26px rgba(12,18,36,.3)}
.hero-prep b{font-weight:800;color:rgba(255,255,255,.5);padding-right:4px}
.hero-prep button{font:inherit;color:#fff;background:transparent;cursor:pointer;
  border:1px solid rgba(255,255,255,.3);border-radius:3px;padding:6px 10px}
.hero-prep button:hover{border-color:rgba(255,255,255,.7)}
.hero-prep button[aria-pressed="true"]{background:var(--cer);border-color:var(--cer)}
@media (max-width:640px){.hero-prep{right:10px;top:80px;font-size:10px;padding:5px 7px}
  .hero-prep b{display:none} .hero-prep button{padding:5px 7px}}