/* =====================================================================
   ferencak.sk — vlastný štýl nového webu
   Hodnoty NIE SÚ odhadnuté. Sú odmerané na origináli cez
   `node scripts/extract-styles.js` (computed styles v Chromiu), takže
   každé číslo tu má presnú predlohu. Meniť ich len s novým meraním.
   ===================================================================== */

:root {
  --modra:  #0a3166;   /* tlačidlá, hlavička */
  --cervena:#c42121;   /* akcent */
  --ruzova: #c47171;   /* pozadie pätičky */
  --biela:  #ffffff;
  --text:   #334155;   /* Astra základný text */
  --nadpis: #1e293b;   /* nadpisy článkov */
  --odkaz:  #046bd2;   /* meta údaje a odkazy v obsahu */
  --sirka:  1140px;    /* šírka obsahového pásu */
}

/* --- reset ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  /* Originál to dedí z Astry (`body{overflow-x:hidden}`). Nie je to kozmetika:
     fotka v hero prichádza sprava z pozície o vlastnú šírku vedľa okna, takže
     bez orezania by sa počas jej príchodu objavil vodorovný posuvník. */
  overflow-x: hidden;
  font: 400 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: var(--text);
  background: var(--biela);
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }

/* Odkaz pre čítačky obrazovky — viditeľný až po zameraní klávesnicou. */
/* Skryté pre oko, čitateľné pre čítačky obrazovky. Nie `left:-9999px` —
   taký prvok si drží rozmery a v porovnaní geometrie vytŕča; originál
   používa orezanie na 1×1 px. */
.skip, .sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip:focus {
  width: auto; height: auto; margin: 0; padding: 1em;
  clip: auto; clip-path: none; z-index: 100;
  background: var(--biela); color: var(--modra);
}

/* Stránka je flex stĺpec, aby pätička držala pri spodku aj na krátkych
   stránkach — originál to rieši rovnako (`.site-content{flex-grow:1}`). */
.site { display: flex; flex-direction: column; min-height: 100vh; }
.site__main { flex-grow: 1; }

/* Obsahový pás: 1140 px na stred. */
.wrap {
  width: 100%; max-width: var(--sirka);
  margin-inline: auto;
}

/* --- tlačidlo ----------------------------------------------------
   Výška 63 px nevzniká z paddingu (20+18+20=58), ale z toho, že obsah
   je inline-level box — pod ním ostáva priestor pre dotiahy písma.
   Preto vnútorný <span> a nie priamy text: bez neho vyjde 58 px.     */
.btn {
  display: inline-block;
  padding: 20px 25px;
  /* Okraj je zámerne NESYMETRICKÝ — hore a vpravo 1 px, dole a vľavo 4 px.
     Nie je to ozdoba: práve tých 5 px navyše robí tlačidlo 63 px vysokým
     (20 + 18 + 20 + 1 + 4). Bez toho je celý web o pár pixelov inde. */
  border: 1px solid var(--cervena);
  border-bottom-width: 4px;
  border-left-width: 4px;
  font: 400 18px/18px Roboto, sans-serif;
  text-align: center;
  color: var(--biela);
  background: var(--modra);
  /* Originál má prechod na všetkých tlačidlách naraz
     (`.elementor-button{transition:all .3s}`), nie len na tých v menu. */
  transition: all .3s;
}
/* Obsah tlačidla je blokový flex, nie inline — inak by pod textom ostal
   priestor pre dotiahy písma a tlačidlo by bolo o ~5 px vyššie. */
.btn__in { display: flex; justify-content: center; align-items: center; gap: 5px; }
.btn svg { width: 18px; height: 18px; fill: currentColor; }

/* --- hlavička ----------------------------------------------------- */
.hdr { position: relative; z-index: 10; }
/* Menu je zarovnané doprava. Originál to rieši `flex-direction: row-reverse`
   pri opačnom poradí v HTML; tu je poradie v HTML rovnaké ako na obrazovke
   (aby sedelo prechádzanie klávesnicou) a zarovnáva sa `justify-content`. */
.hdr__nav {
  display: flex; align-items: center; justify-content: flex-end; gap: 20px;
  max-width: var(--sirka); margin-inline: auto;
}
/* Tlačidlá majú 20 px nad aj pod — spolu 103 px vysoká hlavička. */
.hdr__nav .btn { margin-block: 20px; }
/* Domovská má v origináli VLASTNÚ hlavičku: bez ikony domov a s priehľadnými
   tlačidlami s bielym rámom, lebo leží nad tmavým herom. Ostatné stránky
   majú tmavomodré tlačidlá s červeným rámom. */
.domovska .btn--domov { display: none; }
.domovska .hdr__nav .btn { background: transparent; border-color: var(--biela); }

/* Hover menu má preto tiež dve podoby — obe sú prevzaté z originálu, nie
   vymyslené (post-26.css pre hlavičku, post-20.css pre domovskú):
   vnútorné stránky  modré tlačidlo zbelie a text sčervenie,
   domovská          priehľadné tlačidlo stmavne do modrej a rám sčervenie.
   Ikona domov sa prefarbí sama, `fill` je `currentColor`. */
.hdr__nav .btn:hover, .hdr__nav .btn:focus {
  background: var(--biela); color: var(--cervena); border-color: var(--cervena);
}
.domovska .hdr__nav .btn:hover, .domovska .hdr__nav .btn:focus {
  background: var(--modra); color: var(--biela); border-color: var(--cervena);
}

/* --- príchody (animácie pri načítaní) -----------------------------
   Nie sú vymyslené — originál ich robí Elementorom a v HTML sú zapísané
   ako `data-settings`: hlavička `slideInDown`, fotka v hero `slideInRight`,
   obe s triedou `animated-slow`, čo je v Elementore trvanie 2 s.
   Na domovskej má hlavička navyše `animation_delay: 1000`, na ostatných
   stránkach 0 — preto tam fotka vychádza prvá a menu prichádza po nej.

   Prečo `backwards` a nie `forwards`/`both`: Elementor po dobehnutí triedu
   na prvku ponechá, ale bez `animation-fill-mode` — transformácia z prvku
   zmizne. Pri dopĺňaní dopredu by na fotke ostalo `translate3d(0,0,0)`,
   čo ju drží vo vlastnej vrstve a Chromium ju prevzorkuje inak (ten istý
   jav ako `will-change` v posuvníku). `backwards` platí len počas
   oneskorenia a po dobehnutí nezanecháva nič.

   `verify.js` skracuje obom prehliadačom trvanie aj oneskorenie na nulu,
   takže pixelové porovnanie to neovplyvní. */
@keyframes prichod-zhora  { from { transform: translate3d(0, -100%, 0); } }
@keyframes prichod-zprava { from { transform: translate3d(100%, 0, 0); } }

.hdr { animation: prichod-zhora 2s backwards; }
.domovska .hdr { animation-delay: 1s; }
.hero__foto { animation: prichod-zprava 2s backwards; }

/* Originál vypína animácie pri systémovej voľbe obmedziť pohyb
   (`@media (prefers-reduced-motion:reduce){.animated{animation:none!important}}`). */
@media (prefers-reduced-motion: reduce) {
  .hdr, .domovska .hdr, .hero__foto { animation: none; }
}

/* --- pätička ------------------------------------------------------
   Portrét prečnieva nad farebný pás, preto má pätička hore 250 px
   priehľadného priestoru a stredný stĺpec záporný odstup.            */
.ftr { display: flow-root; }          /* aby sa odstup pásu neprepadol von */
.ftr__band { margin-top: 250px; }
/* Pás pätičky: vlajka EÚ cez ružový podklad, stmavená na polovicu.
   Bez prekryvu je pás presne 2× svetlejší — overené porovnaním pixelov
   (originál srgb(12,29,70) vs. nezatmavené srgb(25,59,141)). */
.ftr__band {
  position: relative;
  background: var(--ruzova) url("/wp-content/uploads/2025/06/bg_eu.webp") 50% 50% / cover no-repeat;
}
/* Stmavenie je samostatná vrstva nad pozadím — rovnako ako v origináli,
   kde je to vlastný <div>. Zlúčenie do jedného `background` cez gradient
   dáva iné zaokrúhlenie pri zmenšovaní obrázka. */
.ftr__band::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .5);
}
.ftr__inner { position: relative; }   /* obsah patrí nad prekryv */
.ftr__inner {
  display: flex;
  max-width: var(--sirka); margin-inline: auto;
  position: relative;
}
.ftr__col { display: flex; flex-direction: column; }
.ftr__col--left  { width: 399px; justify-content: flex-end; gap: 20px; padding-bottom: 50px; }
.ftr__col--mid   { width: 342px; margin-top: -270px; }
.ftr__col--right { width: 399px; justify-content: flex-end; align-items: center; }

/* Pás so sociálnymi sieťami má 91 px: tlačidlo 51 + 20 nad a pod. */
.ftr__social { display: flex; justify-content: center; gap: 20px; }
.ftr__social .btn { margin-block: 20px; }

/* Nadpis: 41,6 px riadok + 20 px pod ním = blok vysoký 61,6 px. */
.ftr__thanks {
  font: 400 26px/41.6px Roboto, sans-serif;
  color: var(--biela); text-align: center;
  padding-bottom: 20px;
}
.ftr__thanks b { font-weight: 700; }
/* Copyright: riadok 26,4 px + 10 px nad a pod = 46,4 px. */
.ftr__copy {
  font: 400 16px/26.4px Roboto, sans-serif;
  color: var(--biela); text-align: center;
  padding-block: 10px;
}

/* --- posuvník (karusel) -------------------------------------------
   Nahrádza Swiper (144 kB). Prelína snímky, jedna viditeľná naraz.
   `data-verify-freeze` na <html> nastavuje scripts/verify.js — vtedy
   sa musí zastaviť na prvej snímke, inak sa web nedá porovnať s originálom. */
.slider { position: relative; overflow: hidden; }
.slider__item {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1s ease;
  /* Swiper v origináli skladá slajdy vo vlastnej vrstve. Vyzerá to ako
     detail, ale mení to CESTU vykresľovania obrázka: bez toho Chromium
     prevzorkuje veľkú fotku (1800 px -> 550) inak než originál a fotka
     sa líši v každom stĺpci. S `will-change` je rozdiel presne 0. */
  will-change: opacity;
}
.slider__item--on { opacity: 1; }
.slider__item:first-child { position: relative; }
html[data-verify-freeze] .slider__item { opacity: 0; transition: none; }
html[data-verify-freeze] .slider__item:first-child { opacity: 1; }

/* --- doplnky namerané na /moja-praca/ ------------------------------ */
/* Priehľadné tlačidlo v pätičke: 15 px odsadenie, výška 51 px. */
.btn--ghost {
  background: transparent;
  border-color: var(--biela);
  padding: 15px;
  font-size: 16px; line-height: 16px;
}
/* Obsahový pás stránky má 10 px nad aj pod. */
.wrap--page { padding-block: 10px; }
/* Prázdny výpis (Moja práca zatiaľ nemá položky) drží jeden riadok. */
.listing-empty { min-height: 26.4px; text-align: center; }

/* Odznak funkcií: obrázok je vyšší (68,3) než viditeľný pás (53,3) a orezáva
   sa ZHORA — je zarovnaný na spodok. Zarovnanie hore posunie odznak o 15 px. */
.ftr__col--left .slider { height: 53.3px; }
.ftr__col--left .slider img { width: 399px; height: auto; margin-top: -15px; }

/* Výšku dopočíta prehliadač z pomeru strán súboru (458×694). Zaokrúhlená
   hodnota v CSS (518,2) je o 0,03 px vedľa a pás pätičky potom vyjde 349
   namiesto 348,9 — čo pri zmenšovaní vlajky na pozadí zmení interpoláciu
   a rozhodí desiatky tisíc pixelov. */
.ftr__col--mid img { width: 342px; height: auto; }

/* --- návrat hore -------------------------------------------------
   Predloha je Astrin `#ast-scroll-top`. Rozmery sú v origináli zadané
   v `em` pri písme 15 px, preto ich tak držíme aj tu:
   tlačidlo 2,1 em = 31,5 x 31,5 px, riadok tiež 2,1 (šípka sedí na stred).
   Do 300 px zrolovania je `display:none` — nie priehľadné. Originál to
   prepína rovnako a nič medzi tým neprelína. */
.totop {
  display: none;
  position: fixed; right: 30px; bottom: 30px; z-index: 99;
  width: 2.1em; height: 2.1em;
  font: 400 15px/2.1 Roboto, sans-serif;
  text-align: center; cursor: pointer;
  color: var(--biela); background: var(--modra);
}
.totop--on { display: block; }
/* Hover len prehodí obe farby: pozadie zbelie, šípka stmavne do modrej. */
.totop:hover, .totop:focus-visible { color: var(--modra); background: var(--biela); }
/* Šípka je v predlohe uložená otočená nadol — hore ju otáča až toto pravidlo,
   plus posun o pätinu vlastnej výšky nahor. Rozmery NIE SÚ pomerné k súboru
   (26 x 16,043): originál ju zámerne stláča na 1,6 x 0,6 em = 24 x 9 px,
   takže sa vykreslí užšia a plochšia. `currentColor` ju prefarbí pri hoveri. */
.totop svg {
  width: 1.6em; height: .6em;
  vertical-align: middle; fill: currentColor;
  transform: translate(0, -20%) rotate(180deg);
}
/* Astra prehadzuje šípku na vlastnom zlome 921 px, nie na 767 ako zvyšok
   webu — na užšom okne je vyššia a užšia (1 x 0,85 em = 15 x 12,75 px). */
@media (max-width: 921px) {
  .totop svg { width: 1em; height: .85em; }
}

/* =====================================================================
   MOBIL (do 767 px) — originál má vlastný zlom na 767 px.
   Hodnoty sú opäť odmerané, nie odhadnuté: hlavička 71 px, pás pätičky
   začína 300 px pod jej vrchom, portrét sa vysúva nad pás.
   ===================================================================== */
@media (max-width: 767px) {
  /* Astra zmenšuje základné písmo na 91,2 % (16 → 14,592 px). */
  body { font-size: 14.592px; line-height: 1.65; }

  /* Hlavička: nižšie tlačidlá, rozostup namiesto zarovnania doprava. */
  .hdr__nav { justify-content: space-around; gap: 0; }
  .hdr__nav .btn { padding: 6px; font-size: 14px; line-height: 14px; }
  /* Ikona sa zmenší spolu s písmom — inak je tlačidlo 35 px namiesto 31
     a celá hlavička o 4 px vyššia. */
  .hdr__nav .btn svg { width: 14px; height: 14px; }

  /* Pätička: stĺpce pod seba. */
  .ftr__band { margin-top: 300px; }
  .ftr__inner { flex-direction: column; }
  .ftr__col { width: 100%; }

  /* Portrét ide navrch a takmer celý sa vysunie NAD pás — v toku po ňom
     ostanú 3 px (295,5 − 292,5). Preto `order`, nie iné poradie v HTML. */
  .ftr__col--mid { order: -1; margin-top: -292.5px; align-items: center; }
  .ftr__col--mid img { width: 195px; height: auto; }

  /* Odznak je užší (369,9) a orezáva sa o 5 px, nie o 15 ako na šírke. */
  .ftr__col--left { padding-bottom: 0; }
  .ftr__col--left .slider { height: 58.3px; margin-inline: 10px; }
  .ftr__col--left .slider img { width: 369.9px; height: auto; margin-top: -5px; }

  /* Na úzkej obrazovke sa tlačidlá rozostupujú rovnomerne po šírke
     (space-around), nie pevným rozostupom ako na šírke — namerané:
     Facebook začína na 16 px, medzery medzi tlačidlami 31,9 px. */
  .ftr__social { justify-content: space-around; gap: 0; }

  /* Pravý stĺpec: medzery robí gap, nie odsadenia jednotlivých prvkov.
     `align-items: stretch` je dôležité — pri `center` by sa nadpis zúžil
     na šírku textu a vycentroval by sa inak než v origináli. */
  .ftr__col--right { gap: 20px; align-items: stretch; }
  .ftr__col--right .ftr__thanks { padding-bottom: 0; }
  .ftr__col--right .ftr__social .btn { margin-block: 0; }
  .ftr__copy { font-size: 14.592px; line-height: 24.0768px; }
}

/* Stránky s článkom majú svetlé pozadie a biely podklad pod textom;
   stránky skladané v Elementore (domov, o mne, moja práca…) sú biele. */
body.clanok { background: #f0f5fa; }
body.clanok .article { background: var(--biela); }

/* =====================================================================
   ŠABLÓNA ČLÁNKU (/cta/…, články v koreni)
   Pás obsahu je tu širší než v hlavičke a pätičke: 1240 px, nie 1140.
   ===================================================================== */
.page {
  width: 100%; max-width: 1240px;
  margin-inline: auto;
  padding-inline: 20px;    /* 1240 − 40 = obsah 1200 px */
}
.page__main { margin-block: 64px; }

.article { padding: 40px; }

.entry-header { margin-bottom: 32px; }
.entry-title {
  font-size: 32px; line-height: 38.4px; font-weight: 600;
  color: var(--nadpis); margin-bottom: 10px;
}
.entry-meta { line-height: 23.2px; color: var(--odkaz); }
.entry-meta a { color: inherit; }

.entry-content p { max-width: 1200px; margin-bottom: 1.6em; }
.entry-content p:last-child { margin-bottom: 0; }

/* Prechod na susedný článok. */
.post-nav { padding-top: 32px; }
.post-nav__links { display: flex; }
.post-nav__prev, .post-nav__next { width: 50%; }
/* Keď má článok len nasledujúci (nie predošlý), musí ostať vpravo — inak by
   ako jediná položka skončil vľavo. */
.post-nav__next { text-align: right; margin-left: auto; }
/* Odkaz sa rozťahuje na 80 % stĺpca, nie na šírku textu — inak by bol
   o 130 px užší a text by sa nezalomil tam, kde v origináli. */
.post-nav a {
  display: inline-block; width: 80%;
  margin: 2px; padding-right: 20px;
  font-weight: 500;
  color: var(--odkaz);
}
/* Popis („PREDOŠLÝ") je v základnej farbe textu, nie v farbe odkazu. */
.post-nav__label { color: var(--text); }
/* Flex, nie block: ikona je vyššia než účtovná čiara riadku a v riadkovom
   kontexte by popis vyšiel 17,2 namiesto 16,6 px — a s ním celá navigácia. */
.post-nav__label {
  display: flex; align-items: center;
  font-size: 13.6px; line-height: 16.6px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.68px;
}
/* Ikona je vo vlastnom inline-flex obale — priamo v riadku by účtovná čiara
   posunula riadok o 0,6 px a s ním celú navigáciu. */
.post-nav__icon { display: inline-flex; align-items: center; line-height: 16px; margin-right: 5px; }
.post-nav__label svg { width: 13.6px; height: 13.6px; fill: currentColor; }
/* Názov susedného článku drží jeden riadok a prebytok sa oreže tromi bodkami —
   dlhý názov by inak navigáciu zdvojnásobil. Text je v základnej farbe, nie
   vo farbe odkazu. */
.post-nav p {
  margin-top: 8px;
  color: var(--text); font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

@media (max-width: 767px) {
  /* Na mobile Astra prepne vonkajšie odsadenie obsahu na vnútorné. */
  .page { max-width: 100%; padding-inline: 7.87968px; }
  .page__main { margin-block: 0; padding-block: 58.368px; }
  .article { padding: 21.888px 14.592px; }
  .entry-header { margin-bottom: 14.592px; }
  .entry-title { font-size: 29.184px; line-height: 35.0208px; }
  .entry-meta { font-size: 14.592px; line-height: 21.1584px; }
  .post-nav { padding-top: 21.888px; }
  /* `width: 100%` je nutné — samotný inline-flex sa zmrští podľa obsahu,
     odkaz potom vyjde 73 px široký, slovo „Predošlý" sa zalomí na dva
     riadky a navigácia je o 12 px vyššia než v origináli. */
  .post-nav__links { display: inline-flex; width: 100%; padding-left: 20px; }
  .post-nav a { width: auto; max-width: 95%; line-height: 14.592px; }
  /* Na mobile originál názov susedného článku nezobrazuje, len šípku a slovo. */
  .post-nav p { display: none; }
  .post-nav__label { font-size: 12.4032px; line-height: 14.592px; letter-spacing: 0.62016px; }
  .post-nav__label svg { width: 12.4032px; height: 12.4032px; }
  .post-nav p { margin-top: 7.296px; }
}

/* =====================================================================
   ŠABLÓNA ČLÁNKU ZO ZAUJÍMAVOSTÍ (/zaujimavosti/…)
   Iná než /cta/…: obsah nerobí Astra, ale Elementor — vlastný pás 1240 px,
   biely podklad, hore fotka a nadpisy vedľa seba, pod tým text.
   ===================================================================== */
.cpt { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }
.cpt__box { background: var(--biela); padding: 40px; }

.cpt__hero { padding-inline: 10px; }
.cpt__hero-in {
  display: flex; max-width: 1140px; margin-inline: auto;
  padding-block: 10px;
}
.cpt__foto { width: 385px; padding: 10px; }
/* Šírku určuje rodič, nie zaokrúhlené číslo v CSS. Originál má 305,094 px;
   napísať 305,1 znamená o šesť tisícin inú mierku.
   Okraj je ten istý nesymetrický motív ako pri tlačidlách — 5 px dole a vľavo.
   Pri `box-sizing: border-box` zmenší plochu obrázka na 360×240, takže bez
   neho je fotka väčšia a vykreslí sa v inej mierke. */
.cpt__foto img {
  width: 100%; height: auto;      /* výška z pomeru strán — každý článok má inú fotku */
  border: 0 solid var(--cervena);
  border-bottom-width: 5px;
  border-left-width: 5px;
}

.cpt__head {
  width: 715px; padding: 10px;
  display: flex; flex-direction: column; gap: 20px 0;
}
.cpt__tema  { font: 400 18px/28.8px Roboto, sans-serif; color: var(--modra); }
.cpt__title { font: 800 40px/55px Roboto, sans-serif;   color: var(--modra); }
.cpt__perex {
  font: 400 26px/41.6px Roboto, sans-serif; color: var(--cervena);
  margin-bottom: 25px;      /* len perex, nie ostatné nadpisy */
}

/* Telo je stĺpec s rozostupom 20 px. Prvá položka je prázdna (v origináli
   nevyplnené pole dátumu) — bez nej by text začínal o 20 px vyššie. */
.cpt__body {
  display: flex; flex-direction: column; gap: 20px;
  padding-block: 40px;
}
.cpt__blok:empty { min-height: 0; }   /* prázdne pole dátumu — drží rozostup */
.cpt__body p {
  font: 400 26px/41.6px Roboto, sans-serif; color: var(--modra);
  margin-bottom: 1.75em;      /* 45,5 px pri 26 px písme */
}

/* Blok „Sledujte ma" pod článkom.
   Ikona nie je 50 px, ale štvorec 130 px s 50 px značkou v strede — rozostup
   medzi nimi je 30 px. Bez toho je blok 91 namiesto 331,6 px vysoký. */
.soc { text-align: center; padding-block: 80px; }
.soc__nadpis { font: 400 26px/41.6px Roboto, sans-serif; color: var(--cervena); }
.soc__nadpis b { font-weight: 700; }
.soc__icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; }
.soc__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 130px; height: 130px;
  background: var(--modra);
}
.soc__icon svg { width: 50px; height: 50px; fill: var(--biela); }

@media (max-width: 767px) {
  .cpt { padding-inline: 7.87968px; }
  .cpt__box { padding: 21.888px 14.592px; }

  /* Fotka a nadpisy idú pod seba. */
  .cpt__hero-in { flex-wrap: wrap; max-width: 767px; }
  .cpt__foto, .cpt__head { width: 100%; }

  .cpt__title { font-size: 30px; line-height: 42px; }
  .cpt__perex { font-size: 20px; line-height: 32px; }

  /* Telo článku má na mobile užší pás než hlavička. */
  .cpt__body-out { padding-inline: 17.25px; }
  /* Odsadenie je v origináli v percentách ŠÍRKY (5 %), nie v pevných px.
     Pri 310,3125 px širokom páse z toho vyjde 15,5156 — ale percento sa
     zaokrúhli na mriežku 1/64 px inak než tá istá hodnota zapísaná v px. */
  .cpt__body { padding-block: 5%; max-width: 767px; }
  .cpt__body p { font-size: 20px; line-height: 32px; }

  /* Na mobile sú štvorce 80 px a lámu sa do troch riadkov; zvislý rozostup
     je 20 px, vodorovný ostáva 30. */
  /* Pás ikon je o 10 px užší z každej strany — inak sa doň zmestia tri
     ikony v riadku namiesto dvoch a blok je o 250 px nižší. */
  .soc__icons { gap: 20px 30px; padding-inline: 10px; }
  .soc__icon { width: 80px; height: 80px; }
  .soc__icon svg { width: 40px; height: 40px; }
}

/* --- galéria pod článkom ------------------------------------------
   Stĺpce rôznej výšky. Originál ich rozkladá skriptom a položky sú
   absolútne pozicované — replikuje to assets/app.js. Do jeho dobehnutia
   sú položky v riadku, aby stránka nepreblikla prázdnym miestom. */
.galeria { position: relative; margin: -10px; }
.galeria__polozka { display: block; padding: 10px; width: 20%; }
.galeria--hotova .galeria__polozka { position: absolute; top: 0; left: 0; }
/* Fotky v galérii sa orezávajú na tvar rámu (object-fit: cover), nie
   zmenšujú — pri odlišnom pomere strán je to viditeľný rozdiel. */
.galeria__polozka img { display: block; width: 100%; height: auto; object-fit: cover; }

@media (max-width: 767px) {
  .galeria__polozka { width: 33.3333%; }
}

/* =====================================================================
   VÝPIS ZAUJÍMAVOSTÍ (/zaujimavosti/) — mriežka kariet
   ===================================================================== */
.archiv-hlavicka {
  background: var(--biela);
  padding: 48px;
  margin-bottom: 32px;
}
.archiv-nazov {
  font-size: 32px; line-height: 1.4; font-weight: 600;
  color: var(--nadpis); margin-bottom: 4px;
}

.karty { display: flex; flex-wrap: wrap; }
/* ⚠️ 33,33 %, nie 33,3333 %. Z prvého vyjde stĺpec 399,953 px, z druhého
   399,984 — a ten tridsatinový rozdiel sa cez tri stĺpce nazbiera do 0,06 px
   posunu tretej karty. Text sa potom vykreslí na inom subpixeli a celý
   pravý stĺpec sa líši, hoci na oko sedí. */
.karta { width: 33.33%; padding-inline: 16px; margin-bottom: 32px; }
/* Karta je sivá s bielym textom — nie biela, ako by sa dalo čakať. */
.karta__telo { background: #6d747f; padding: 24px; height: 100%;
  box-shadow: 0 6px 15px -2px rgba(16, 24, 40, .05); }
.karta__nazov {
  font-size: 20px; line-height: 1.3; font-weight: 600;
  color: var(--biela);
  /* Odstup patrí nadpisu (12 px pod ním), nie údajom pod ním. Originál to má
     tak isto a rozdiel je viditeľný: pri odstupe zhora na údajoch vyšli
     o 1,75 px nižšie a s nimi celý zvyšok stránky. */
  margin-bottom: 12px;
}
.karta__nazov a { color: inherit; }
.karta__meta {
  font-size: 13px; line-height: 1.45;
  color: var(--biela);
  margin-bottom: 15.6px;
}
.karta__meta a { color: inherit; }
/* ⚠️ Riadok bezrozmerný (1,65), nie 26,4 px — inak je každý riadok o 1/64 px
   vyšší a výňatok na siedmich riadkoch vyjde o 0,11 px inak. Vysvetlenie
   pri `.vypis__odkaz`. */
.karta__vynatok { font-size: 16px; line-height: 1.65; color: var(--biela); }

@media (max-width: 767px) {
  .archiv-hlavicka { padding: 43.776px; margin-bottom: 29.184px; }
  .archiv-nazov { font-size: 29.184px; }
  .karta { width: 100%; padding-inline: 14.592px; margin-bottom: 29.184px; }
  .karta__telo { padding: 21.888px; height: auto; }
  /* Astra zmenšuje aj písmo v kartách na 91,2 %. */
  /* Riadkovanie sa NEPREPISUJE — bezrozmerný pomer z desktopu platí ďalej
     a zmenšené písmo si výšku riadku dopočíta samo, presne ako v origináli. */
  .karta__nazov { font-size: 18.24px; margin-bottom: 10.944px; }
  .karta__meta { font-size: 11.856px; margin-bottom: 11.856px; }
  .karta__vynatok { font-size: 14.592px; }
}

/* =====================================================================
   VÝPIS BLOGU (/prispevky/) — dvojstĺpcové karty s fotkou vľavo
   ===================================================================== */
/* ⚠️ `flex-start`, nie predvolené `stretch`. Karty v riadku sa v origináli
   NEDOROVNÁVAJÚ na rovnakú výšku — každá je vysoká presne ako jej vlastný
   text a fotka na pozadí sa jej prispôsobí (375,453 vs 430,047 px v prvom
   riadku). Pri `stretch` sa nižšia karta natiahne, fotka dostane iný pomer
   a prevzorkuje sa po celej ploche — to bol ten 9 % rozdiel na šírke. */
.vypis { display: flex; flex-wrap: wrap; align-items: flex-start; margin-inline: -10px; }
/* 20 px = vonkajší rozostup 10 + vnútorný 10, ako to má originál v dvoch
   vnorených kontajneroch. */
.vypis__karta { width: 50%; padding: 20px; display: flex; }
/* Fotka je pozadie prázdneho stĺpca — rovnako ako v origináli. */
.vypis__foto {
  width: 270px; flex: 0 0 270px; min-height: 250px;
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
}
.vypis__text { flex: 1; padding: 15px 10px; display: flex; flex-direction: column; align-items: flex-start; }
.vypis__nazov {
  font: 800 22px/28.6px Roboto, sans-serif;
  color: var(--modra);
}
.vypis__podnadpis {
  font: 400 18px/26px Roboto, sans-serif;
  color: var(--modra); margin-top: 25px;
}
/* Roboto, nie systémové písmo: to isté slovo je v ňom o 35 px širšie.
   ⚠️ Riadok je zámerne BEZROZMERNÝ (1,65), nie 29,7 px. Vyzerá to ako to isté
   — computed style hlási v oboch prípadoch 29,7 px — ale Blink to inak
   zaokrúhli na svoju mriežku 1/64 px: z px vyjde 29,7031, z bezrozmerného
   29,6875. Originál dedí Astrino bezrozmerné 1,65, takže musíme tiež.
   Tá pätnásťtisícina px sa scvrkne do inej výšky karty a fotka na pozadí
   sa potom prevzorkuje inak — na celej ploche výpisu. */
.vypis__odkaz {
  font: 600 18px/1.65 Roboto, sans-serif;
  text-transform: uppercase;
  color: var(--cervena); margin-top: 25px;
}
.vypis__odkaz a { color: inherit; display: flex; }
/* Riadok opäť bezrozmerný, z rovnakého dôvodu ako pri odkaze vyššie. */
.vypis__cas { font: italic 400 16px/1.65 Roboto, sans-serif; color: var(--cervena); margin-top: -5px; }

@media (max-width: 767px) {
  .vypis { margin-inline: 0; }
  .vypis__karta { width: 100%; flex-direction: column; }
  .vypis__foto { width: 100%; flex: 0 0 auto; }
}

/* =====================================================================
   STRÁNKY SKLADANÉ V ELEMENTORE (články v koreni, O mne, Kontakt, domov)
   ===================================================================== */
/* Nadpis stránky. ⚠️ Je to OBYČAJNÝ blok na stred, nie zvislý flex:
   zvýraznená časť sa v origináli zalomí na druhý riadok sama, lebo sa
   vedľa prvej nezmestí. Pri flexe je každá časť na vlastnom riadku vždy
   a prvý riadok potom vyjde vysoký 90 px namiesto 71. */
.nadpis {
  font: 600 60px/90px Roboto, sans-serif;
  color: var(--modra); text-align: center;
  margin-bottom: 20px;
}
/* Nadpis na stránke „O mne" je menší — 40 px pri rovnakom riadku 90. */
.nadpis--male { font-size: 40px; }
.nadpis__zvyraz { position: relative; display: inline-block; font-weight: 900; }
/* Podčiarknutie je dekoratívne SVG — leží pod textom a je o 10 px väčšie
   na každú stranu než zvýraznené slová (v origináli `calc(100% + 20px)`
   a posun na stred). ⚠️ Na výške tu záleží viac, než sa zdá: viewBox sa
   `preserveAspectRatio="none"` roztiahne nerovnomerne, takže z výšky
   vychádza aj hrúbka ťahu. Pri nízkom SVG je z hrubého ťahu tenká čiarka. */
.nadpis__zvyraz svg {
  position: absolute; left: 50%; top: 50%;
  width: calc(100% + 20px); height: calc(100% + 20px);
  transform: translate(-50%, -50%); overflow: visible;
}
.nadpis__zvyraz svg path {
  fill: none; stroke: var(--cervena); stroke-width: 9;
  stroke-linecap: round; stroke-linejoin: round;
  /* Ťah sa v origináli pri načítaní „nakreslí" — je to bežný `stroke-dasharray`
     od nuly po plnú dĺžku, 1,2 s. Koncový stav je plne vykreslený ťah. */
  stroke-dasharray: 1500 1500;
  animation: nadpis-ciara 1.2s backwards;
}
@keyframes nadpis-ciara { from { stroke-dasharray: 0 1500; } }
@media (prefers-reduced-motion: reduce) {
  .nadpis__zvyraz svg path { animation: none; }
}
.blok__nadpis {
  font: 400 26px/41.6px Roboto, sans-serif;
  color: var(--cervena); text-align: center;
  margin-bottom: 25px;
}
.blok__nadpis b { font-weight: 700; }

/* ⚠️ Obrázok je BLOKOVÝ. Ako riadkový (`inline-block`) by pod ním v riadku
   ostalo 8,391 px pre dotiahy písma a obal by vyšiel 433,48 namiesto 425,09.
   Ten istý jav ako pri fotke v hero na domovskej. */
.blok__obrazok { text-align: center; }
.blok__obrazok img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
/* V stĺpci sa obrázok roztiahne na jeho šírku, mimo neho si drží vlastnú. */
.stlpec .blok__obrazok img { width: 100%; }

/* Riadok bezrozmerný (1,65) — v px by bol každý o 1/64 px vyšší, čo sa
   na ôsmich riadkoch prejaví. Vysvetlenie pri `.vypis__odkaz`. */
.blok__text {
  font: 400 18px/1.65 Roboto, sans-serif;
  color: var(--modra);
}
/* ⚠️ Odstup si ponecháva aj POSLEDNÝ odstavec. Stĺpec je flex, takže odstup
   z neho neujde a patrí do jeho výšky (769,2 namiesto 740,41 px). */
.blok__text p { margin-bottom: 1.6em; }
.blok__text strong { font-weight: 700; }

@media (max-width: 767px) {
  .nadpis, .nadpis--male { font-size: 24px; line-height: 33.6px; }
  /* Perex má na mobile navyše 10 px po stranách — na šírke ich nemá. */
  .blok__nadpis { font-size: 18px; line-height: 28.8px; padding-inline: 10px; }
}

/* --- sekcie, rady a stĺpce ----------------------------------------
   Stavba je prevzatá z Elementorových kontajnerov originálu a je všade
   rovnaká, preto stačí jedna sada tried na všetkých päť skladaných stránok:
   sekcia (1140 na stred, 10 px nad a pod) > rad (vodorovný, medzera 20,
   odsadenie 10) > stĺpec (zvislý, medzera 20, odsadenie 10).
   Z toho vychádza šírka stĺpca: (1140 − 20 − 2×20) / 3 = 360 px. */
.sekcia {
  width: 100%; max-width: var(--sirka);
  margin-inline: auto; padding-block: 10px;
  display: flex; flex-direction: column;
}
/* Sekcia, ktorá si výšku robí sama obsahom (blok „Sledujte ma"). */
.sekcia--tesna { padding-block: 0; }
/* Kontakt: odsadenie nesie vnútorný obal (40 px zhora, 30 zdola), samotná
   sekcia je bez neho. Na mobile sa to rozdelí — bočné odsadenie patrí
   sekcii a horné obalu, lebo je zadané v percentách jeho šírky. */
.sekcia--kontakt { padding: 0; }
.sekcia--kontakt > .sekcia__in {
  width: 100%; max-width: var(--sirka); margin-inline: auto;
  display: flex; flex-direction: column;
  padding: 40px 0 30px;
}
.kontakt__blok { display: flex; flex-direction: column; }
/* Prázdny odstavec pod formulárom (1,6 em) je už súčasťou samotného
   formulára — rovnako ako na domovskej. Netreba ho pridávať znova. */
/* ⚠️ Stĺpce sú zvislo na STRED, nie natiahnuté. Preto každý začína inde
   a nižší stĺpec nie je pretiahnutý cez celú výšku radu. */
.rad {
  display: flex; align-items: center; gap: 20px; padding: 10px;
}
.rad > .stlpec {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 20px; padding: 10px;
}
/* ⚠️ Rad na stránke „O mne" NEDELÍ šírku rovnomerne: stĺpce majú pevných
   30 % (336 px) a rozostupujú sa na krajoch, takže medzi nimi ostane 56 px,
   hoci medzera je zadaná ako 20. Vnútri stĺpca nie je medzera žiadna. */
/* Tu sa stĺpce naopak NATIAHNU na rovnakú výšku (`stretch`), na rozdiel
   od radov na článkoch, kde sú zvislo na stred. */
.rad--rozostup { justify-content: space-between; align-items: stretch; }
.rad--rozostup > .stlpec { width: 30%; flex: 0 0 auto; gap: 0; }

/* Nadpis vnútri stĺpca (25/40, tučný) a odstavec pod ním. */
.blok__h { font: 800 25px/40px Roboto, sans-serif; color: var(--modra); }
.blok__odsek {
  font: 400 18px/28.8px Roboto, sans-serif;
  color: var(--cervena); margin-bottom: 25px;
}
.blok__odsek--modry { color: var(--modra); }
.blok__odsek b { font-weight: 700; }
/* Emotikon je obrázok vysoký ako riadok — v origináli ho tak vykresľuje
   WordPress namiesto znaku. */
.emotikon { display: inline; height: 1em; max-height: 1em; vertical-align: baseline; }

/* ⚠️ Rám fotky je NESYMETRICKÝ: 2 px hore a vpravo, 10 px dole a vľavo —
   rovnaký rukopis ako pri tlačidlách. Nie je to detail: rám sa počíta
   do šírky, takže z 316 px ostane fotke 304 a jej výška vyjde 214,77
   namiesto 210,77. */
.blok__obrazok--ram img {
  border: 2px solid var(--cervena);
  border-bottom-width: 10px; border-left-width: 10px;
}
/* Prostredná fotka v prvom stĺpci má pod sebou 50 px. */
.blok__obrazok--medzera { padding-bottom: 50px; }

.blok__video video, .blok__video iframe { width: 100%; display: block; border: 0; }
/* Video je na výšku (9:16) — z 340 px šírky vyjde 604,44 px. */
.blok__video video { aspect-ratio: 9 / 16; }
/* Záznam z YouTube na celú šírku sekcie je naopak na šírku (16:9). */
.blok__video--siroke iframe { aspect-ratio: 16 / 9; }

@media (max-width: 767px) {
  /* Sekcia je na mobile bez odsadenia zhora aj zdola — celú výšku určuje obsah. */
  .sekcia { padding-block: 0; }
  /* ⚠️ Na mobile pribudne sekcii 80 px zhora aj zdola — a to NAVYŠE k tým,
     ktoré má samotný blok „Sledujte ma". Po stranách je to 10 px sekcie
     + 10 px vnútorného obalu = obsah 350 px. Na šírke sekcia odsadenie nemá,
     takže sa to nedá zapísať raz pre obe veľkosti. */
  .sekcia--tesna { padding: 80px 20px; }
  /* Kontakt na mobile: 5 % šírky po stranách (19,5 px) na sekcii,
     30 % šírky obalu zhora (105,3 px) na obale. Zdola nič. */
  .sekcia--kontakt { padding-inline: 5%; }
  .sekcia--kontakt > .sekcia__in { padding: 30% 0 0; }
  /* Blok „Sledujte ma" má na mobile ešte 10 px po stranách navyše — nadpis
     tak dostane 331 px a zalomí sa na štyri riadky, nie na tri. */
  .sekcia--kontakt .soc { padding-inline: 10px; }
  /* Rovnakých 10 px má na mobile aj formulár — vyjde tak na 331 px. */
  .kontakt__blok .jf { padding-inline: 10px; }
  /* ⚠️ Rad ostáva VODOROVNÝ a iba sa zalomí (`wrap`), stĺpce majú 100 %.
     Pri `flex-direction: column` by ich `align-items: center` zúžilo na
     šírku obsahu namiesto na celú šírku okna. */
  /* Nadpis v stĺpci si na mobile ponecháva veľkosť 25 px, ale riadok
     sa zmenší zo 40 na 35 px. (Musí stáť AŽ ZA definíciou `.blok__h` —
     médiový dotaz sám o sebe prednosť nedáva.) */
  .blok__h { line-height: 35px; }
  .rad { flex-wrap: wrap; }
  .rad > .stlpec, .rad--rozostup > .stlpec { width: 100%; flex: 0 1 auto; }
  /* Originál posúva niektoré stĺpce na koniec (Elementor na to používa
     `order: 99999`) — na tejto stránke ide obrázok pod video a text. */
  .stlpec--nakoniec { order: 99999; }
}

/* --- časté otázky -------------------------------------------------
   Viditeľná sekcia aj štruktúrované dáta FAQPage vznikajú z JEDNÉHO zoznamu
   (`scripts/faq.js`). Google vyžaduje, aby sa zhodovali — pri dvoch oddelených
   zdrojoch by sa skôr či neskôr rozišli a hrozí ručný postih.
   Vzhľadom je to ten istý rozbaľovací prvok ako tlačová správa na článku. */
.faq { padding-block: 40px 60px; }
.faq__nadpis {
  font: 800 32px/1.4 Roboto, sans-serif;
  color: var(--modra); text-align: center; margin-bottom: 24px;
}
/* Na počítači sú otázky v TROCH stĺpcoch, na mobile pod sebou. Mriežka, nie
   `columns` — tie by rozbalenú odpoveď zalomili do druhého stĺpca uprostred.
   `align-items: start` drží položky pri vrchu, takže rozbalenie jednej otázky
   nenaťahuje tú vedľa nej. */
.faq__zoznam { display: grid; gap: 10px; }
/* Pri troch stĺpcoch sa otázka často zalomí do dvoch riadkov. Ikona potom pri
   zvislom vycentrovaní „plavala" v strede — zarovnáme ju na prvý riadok
   (riadok 29,7 px, ikona 15 px, teda 7,35 px zhora). */
.faq .rozbal__lista { align-items: flex-start; }
.faq .rozbal__ikona { padding-top: 7.35px; }
@media (min-width: 768px) {
  .faq__zoznam { grid-template-columns: repeat(3, 1fr); column-gap: 20px; align-items: start; }
}
/* ⚠️ Počas pixelového overovania sa naše PRÍDAVKY skryjú — sekcia s otázkami
   aj bod menu „Voľby 2026“. Originál ich nemá, takže bez toho by sa každá
   stránka líšila výškou a porovnanie by stratilo zmysel. Takto ostáva zvyšok
   webu strážený prísne a rozdiel by hneď vypadol. Atribút nastavuje verify.js. */
html[data-verify-freeze] .faq,
html[data-verify-freeze] .btn--volby { display: none; }

@media (max-width: 767px) {
  .faq { padding-block: 30px 40px; padding-inline: 10px; }
  .faq__nadpis { font-size: 24px; }
}

/* --- rozbaľovacia časť (tlačová správa) ---------------------------
   Natívny <details>: zavretý obsah nepridáva stránke výšku, takže nie je
   potrebný žiadny skript. Lišta má 51,688 px = riadok 29,688 + 10 px nad
   a pod + 1 px rámu. Ikona (13,125 × 15) je VĽAVO od nadpisu, hoci
   v origináli stojí v HTML za ním — tu je v HTML rovno vpredu. */
.rozbal { display: flex; flex-direction: column; }
.rozbal__lista {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; cursor: pointer;
  border: 1px solid #d5d8dc;
  color: var(--modra);
  list-style: none;
}
/* Bez tohto nechá WebKit pred lištou vlastný trojuholník a odsadí obsah. */
.rozbal__lista::-webkit-details-marker { display: none; }
.rozbal__nazov { font: 600 18px/1.65 Roboto, sans-serif; }
.rozbal__ikona { display: flex; align-items: center; }
.rozbal__ikona svg { height: 15px; width: auto; fill: currentColor; }
/* Zavreté ukazuje plus, otvorené mínus. */
.rozbal__minus, .rozbal[open] .rozbal__plus { display: none; }
.rozbal[open] .rozbal__minus { display: block; }
.rozbal__telo {
  display: flex; flex-direction: column; gap: 20px;
  padding: 10px; border: 1px solid #d5d8dc; border-top: 0;
}
.rozbal__text { font: 400 18px/22px Roboto, sans-serif; padding: 10px; }
.rozbal__text p { margin-bottom: 28.8px; }
.rozbal__text ul { margin: 0 0 28.8px; padding-left: 40px; }

/* --- kontaktný formulár --------------------------------------------
   Rozloženie je odmerané na origináli (JetFormBuilder v Elementore).
   Čísla, ktoré sa nedajú uhádnuť:
   - pole je vysoké presne 62 px pri odsadení 30 px zhora aj zdola —
     obsahový box teda vyjde nulový a text si prehliadač vycentruje sám;
   - obal poľa so správou je o 8,391 px vyšší než samotné pole (na mobile
     o 7,078) — je to miesto pod účtovnou čiarou riadku, v ktorom textové
     pole stojí. Bez neho je formulár o 8 px nižší než originál;
   - popisky sú 1 px vysoké a biele, teda pre oko neviditeľné;
   - zaškrtávacie políčko je skryté a kreslí ho `::before` textu (24 px). */
/* WordPress drží stĺpce vedľa seba `flex-wrap:nowrap` a pod 782 px ich
   zalomí — preto sa 30 % + 70 % nezalomí, hoci je to spolu 100 %. */
.jf__cols { display: flex; flex-wrap: nowrap; gap: 24px; }
/* Stĺpce si držia pomer 30/70 (a vnútri 40/40/20); medzeru si odpočítajú
   zmrštením, preto 30 % z 1140 dá 334,8 px a nie 342. */
.jf__col { flex-grow: 0; flex-shrink: 1; min-width: 0; }
.jf__col--30 { flex-basis: 30%; }
.jf__col--70 { flex-basis: 70%; }
.jf__col--40 { flex-basis: 40%; }
.jf__col--20 { flex-basis: 20%; }
.jf__cols--vnutro { margin-top: 24px; }

.jf__row { display: flex; flex-direction: column; margin-top: 10px; padding-block: 5px; }
/* Popisok je v origináli zámerne zmenšený na 1 px a biely. Nemažeme ho —
   čítačky obrazovky ho potrebujú a jeho 1,6 px výška je v rozložení. */
.jf__label { font: 400 1px/1.65px Roboto, sans-serif; color: var(--biela); }
.jf__wrap { position: relative; line-height: 0; }
.jf__wrap--sprava { height: 208.391px; }

.jf__pole {
  display: block; width: 100%; height: 62px;
  padding: 30px 25px;
  font: 400 18px/24px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: #475569; background: var(--biela);
  border: 1px solid #d1d5db; border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.jf__pole--sprava { height: 200px; resize: vertical; }
.jf__pole::placeholder { color: #9ca3af; opacity: 1; }

/* Zaškrtávacie pole: pôvodné políčko je skryté, viditeľný štvorec kreslí
   `::before` textu — 24 px s rámom 1 px a rohom 10 %, 10 px od textu. */
.jf__zaskrt { display: inline-flex; align-items: center; width: 100%; }
.jf__zaskrt input { position: absolute; z-index: -1; opacity: 0; }
.jf__zaskrt span {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: 500 14px/20px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: var(--modra);
}
.jf__zaskrt span::before {
  content: ""; display: block; flex: 0 0 auto;
  width: 24px; height: 24px;
  border: 1px solid #adb5bd; border-radius: 10%;
  background-repeat: no-repeat; background-position: center; background-size: 50% 50%;
}
.jf__zaskrt input:checked + span::before {
  border-color: #0b76ef; background-color: #0b76ef;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");
}

.jf__odoslat-wrap { display: flex; align-items: flex-start; }
.jf__odoslat {
  display: flex; justify-content: flex-start;
  height: 63px; padding: 20px 25px; cursor: pointer;
  font: 400 18px/18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  color: var(--modra); background: var(--biela);
  border: solid var(--modra); border-width: 1px 1px 4px 4px; border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

/* Pasca na roboty — pre človeka neviditeľná, pre čítačky skrytá. */
.form__pasca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Prázdny odstavec pod formulárom má v origináli pod sebou 1,6 em —
   teda 25,6 px na šírke a 23,35 px na mobile, kde Astra zmenšuje písmo.
   Preto `em`, nie pevné pixely: s pevnými je mobil o 2,3 px vyšší. */
.form__hlaska { font-family: Roboto, sans-serif; margin: 0 0 1.6em; }
.form__hlaska--ok { color: #0a7a3d; }
.form__hlaska--chyba { color: var(--cervena); }

@media (max-width: 767px) {
  .jf__wrap--sprava { height: 207.078px; }
}
/* WordPress skladá stĺpce blokov pod seba už pod 782 px, nie 768 — preto
   tu výnimočne nie je zlom webu, ale zlom WordPressu. */
@media (max-width: 781px) {
  .jf__cols { flex-wrap: wrap; }
  .jf__cols > .jf__col { flex-basis: 100%; }
  /* Zložené stĺpce majú pod sebou 20 px navyše — okrem posledného.
     Bez toho je formulár na mobile o 60 px nižší než originál. */
  .jf__cols > .jf__col:not(:last-child) { margin-bottom: 20px; }
}

/* --- mriežka kariet (odkazy na témy na domovskej) ------------------- */
/* =====================================================================
   DOMOVSKÁ — hero
   Čísla sú namerané na origináli, nie odhadnuté:
   sekcia 1440x820 od y=-2, vnútro 1140 s odsadením 150 zhora,
   stĺpce 565,1 a 554,9 s medzerou 20 px.
   ===================================================================== */
.hero {
  position: relative;
  background: url("/wp-content/uploads/2025/06/bg_slovakia.webp") 50% 50% / cover no-repeat;
  /* Hero podlieza hlavičku: tá má v origináli záporný spodný odstup -105 px
     a leží nad ním (z-index 10). Bez toho začína hero až pod ňou a celý
     obsah je o 103 px nižšie. */
  margin-top: -105px;
}
/* Vlajka je stmavená čiernou na 60 % — rovnaký motív ako pás v pätičke. */
.hero::before { content: ""; position: absolute; inset: 0; background: #000; opacity: .6; }
.hero__in { position: relative; }
.hero__in {
  display: flex; gap: 20px;
  width: 100%; max-width: 1140px; margin-inline: auto;
  padding-top: 150px; min-height: 820px;
}
.hero__text { width: 565.125px; padding: 10px; display: flex; flex-direction: column; }
.hero__h1    { font: 800 80px/90px Roboto, sans-serif; color: var(--biela); }
.hero__citat { font: 500 40px/52px Roboto, sans-serif; color: var(--biela); margin: 50px 0 15px; }
/* Podpis NIE JE v Robote — originál tu má písankové „Oooh Baby". */
.hero__meno  { font: 600 24px/31.2px "Oooh Baby", sans-serif; color: var(--biela); text-align: right; }
/* Pás funkcií sa vysúva 15 px nad podpis (v origináli záporný odstup obalu). */
.hero__odznak { margin-top: -15px; }
/* Šírka je slajd Swiperu, nie šírka stĺpca — líšia sa o dve desatiny
   a pri fotke cez pol obrazovky to zmení prevzorkovanie v každom pixeli. */
.hero__odznak img { width: 544.906px; height: auto; }
.hero__foto { width: 554.875px; text-align: center; }
/* Blokový obrázok, nie inline-block: v riadku by pod ním ostalo 8,4 px
   miesta pre dotiahy a hero by bolo o toľko vyššie. */
.hero__foto img { width: 554.875px; height: auto; display: block; margin-inline: auto; }

@media (max-width: 767px) {
  /* Na mobile podlieza hero hlavičku len o 75 px (na desktope o 105). */
  .hero { margin-top: -75px; }
  .hero__in { flex-direction: column; padding-top: 100px; min-height: 0; }
  .hero__text { width: 100%; padding: 0 20px; }
  .hero__foto { width: 100%; }
  .hero__h1 { font-size: 40px; line-height: 56px; }
  .hero__citat { font-size: 24px; line-height: 31.2px; margin: 15px 0; }
  .hero__meno { font-size: 20px; line-height: 26px; }
  .hero__odznak { margin-top: 0; }
  .hero__odznak img { width: 349.938px; }
  .hero__foto img { width: 100%; }
}

/* =====================================================================
   DOMOVSKÁ — sekcie pod herom
   Stavba je všade rovnaká: pás na celú šírku a vnútro 1140 px na stred.
   Odsadenia sa medzi sekciami líšia (100 vs. 120 px zhora) a na mobile
   sú zadané v percentách šírky — presne ako v origináli.
   ===================================================================== */
.dom { display: flex; flex-direction: column; position: relative; }
.dom__in {
  width: 100%; max-width: min(100%, 1140px); margin-inline: auto;
  display: flex; flex-direction: column; flex-grow: 1;
}
.dom__in--clanky, .dom__in--online { padding-top: 100px; padding-bottom: 30px; }
.kont__in, .profil__in { padding-top: 120px; padding-bottom: 30px; }

.dom__h1 { font: 800 60px/90px Roboto, sans-serif; color: var(--modra); text-align: center; }
/* Nadpisy nad profilom a formulárom majú riadok 84, nie 90 px. */
.dom__h1--tesny { line-height: 84px; }
.dom__h2 { font: 400 26px/41.6px Roboto, sans-serif; color: var(--cervena); text-align: center; }
.dom__h2 b { font-weight: 700; }
.dom__h2--medzera { margin-bottom: 25px; }
.dom__tlacidlo { text-align: center; }
/* Instagram feed (Elfsight, tretia strana) sa vysúva presne o tých 25 px,
   ktoré má nadpis nad ním pod sebou. Záporný odstup patrí VNÚTORNÉMU obalu,
   nie vonkajšiemu: kým sa feed nenačíta, výška vonkajšieho bloku sa zrazí
   na nulu (výška nemôže byť záporná). Keby bol odstup na vonkajšom, stránka
   by bola o tých 25 px nižšia než originál. */
.dom__elfsight-in { margin-top: -25px; padding-inline: 15px; }

/* --- karty s témami pod herom -------------------------------------
   Podliezajú hero o 150 px. Nadpis drží pri spodku odsadenie zhora
   vo výške 80 % šírky karty (na mobile 100 %) a smer column-reverse. */
.cta { margin-top: -150px; }
.cta__mriezka { display: flex; flex-wrap: wrap; margin-inline: -10px; }
.cta__pol { flex: 0 0 25%; max-width: 25%; padding: 10px; display: flex; }
.cta__karta {
  position: relative; flex: 1 1 auto;
  display: flex; flex-direction: column;
  padding-inline: 13.5px;
  border: 10px solid var(--biela);
  box-shadow: 0 0 10px rgba(0, 0, 0, .5);
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
}
/* Prekryv fotky: čierno-ružový prechod na 50 % priehľadnosti. Leží LEN na
   fotke, biely rám ostáva biely (v origináli má prekryv síce odsadenie
   -10 px, ale rám ho prekresľuje — overené odberom farby: rám je 255,255,255).
   Bez prekryvu sú karty výrazne svetlejšie než originál. */
.cta__karta::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(#000 0%, #fc003f 100%);
  opacity: .5;
  /* Prechod je v origináli dlhý sekundu (`--overlay-transition:1s`),
     nie predvolených 0,3 s. */
  transition: opacity 1s;
}
/* Pri prejdení myšou karta stmavne — originál len zosilní ten istý prekryv
   z 50 na 80 % (`--overlay-opacity` 0.5 -> 0.8 v post-59.css). Hover si
   nastavuje aj bielu farbu pozadia, tú však úplne zakrýva fotka a prechod
   nad ňou, takže na obraze sa neprejaví a nekopírujeme ju. */
.cta__karta:hover::before { opacity: .8; }
.cta__in {
  display: flex; flex-direction: column-reverse; gap: 20px; flex-grow: 1;
  padding-top: 80%; padding-bottom: 5%;
}
/* Nadpis musí byť pozicovaný — inak ho prekryv prekreslí. */
.cta__nadpis { position: relative; }
.cta__nadpis { font: 800 24px/31.2px Roboto, sans-serif; color: var(--biela); }
.cta__odkaz { position: absolute; inset: 0; }

/* --- výpis článkov („Menej rečí, viac činov") ----------------------
   Fotka je pozadím prázdneho štvorca 250 px, nie <img>. Pätička karty
   drží odkaz a čas čítania; odkaz má pod sebou -5 px, aby medzi nimi
   ostalo 24,7 px namiesto 29,7. */
.clanky { display: flex; flex-wrap: wrap; margin-inline: -10px; }
.novinka { flex: 0 0 25%; max-width: 25%; padding: 10px; display: flex; }
.novinka__in { flex: 1 1 auto; display: flex; flex-direction: column; padding-inline: 10px; }
.novinka__foto {
  min-height: 250px;
  background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;
}
.novinka__nadpis { font: 800 22px/28.6px Roboto, sans-serif; color: var(--modra); margin-block: 5px; }
.novinka__perex { font: 400 18px/26px Roboto, sans-serif; color: var(--modra); }
.novinka__pata { display: flex; flex-direction: column; justify-content: space-between; padding-block: 5px; }
/* Roboto a veľké písmená: to isté slovo je v systémovom písme o 35 px užšie. */
.novinka__odkaz {
  display: flex; justify-content: center; align-items: center; align-self: flex-start;
  font: 600 18px/29.7px Roboto, sans-serif; text-transform: uppercase;
  color: var(--cervena); margin-bottom: -5px;
}
.novinka__cas { font: italic 400 16px/26.4px Roboto, sans-serif; color: var(--cervena); }

/* --- dve tlačidlá, ktoré nepatria do schémy webu -------------------
   „Zobraziť všetky články" je v origináli nepoštýlované predvolené
   tlačidlo Elementora (sivé, roh 3 px) — kopírujeme ho verne. */
.btn-el {
  display: inline-block; padding: 12px 24px;
  font: 500 15px/15px Roboto, sans-serif;
  color: var(--biela); background: #cecece;
  border-radius: 3px; text-align: center;
}
.btn-el__in { display: flex; justify-content: center; gap: 5px; }
/* Tlačidlo s rámom: hore a vpravo 1 px, dole a vľavo 4 px — práve tých
   5 px robí tlačidlo vysoké 63 px. */
.btn-ram {
  display: inline-block; padding: 20px 25px;
  font: 400 18px/18px Roboto, sans-serif;
  color: var(--modra); background: transparent; text-align: center;
  border: solid var(--modra); border-width: 1px 1px 4px 4px;
}

/* --- profilová sekcia ----------------------------------------------
   Stĺpce nie sú 50/50, ale 50,599 % a 49,401 % — odmerané. */
.profil__in { flex-direction: row; }
.profil__l {
  width: 50.599%; padding-right: 27px;
  display: flex; flex-direction: column; justify-content: center;
}
.profil__meno { display: flex; align-items: center; }
.profil__pred, .profil__za {
  font: 800 20px/20px Roboto, sans-serif; color: var(--modra);
  text-align: center; padding-top: 25px;
}
.profil__pred { margin-right: 10px; }
.profil__za { margin-left: 5px; }
.profil__h1 { font: 800 60px/84px Roboto, sans-serif; color: var(--modra); text-align: center; }
.profil__r { width: 49.401%; display: flex; flex-direction: column; }
/* Pás funkcií sa vysúva 25 px nahor a tých istých 25 px pridá pod seba. */
.profil__odznak { margin-top: -25px; margin-bottom: 25px; }
/* Namerané šírky slajdov (nie šírka stĺpca — Swiper ich zaokrúhľuje inak). */
/* `max-width:none` je nutné — slajd je o 0,16 px širší než stĺpec a
   globálne `max-width:100%` by ho zrezalo späť na šírku stĺpca. */
.profil__foto img { width: 549.984px; max-width: none; height: auto; }
/* Veľkú fotku v profile vykresľuje originál na šírke BEZ vlastnej vrstvy
   (na mobile s ňou). Je to len iná cesta prevzorkovania, ale na fotke cez
   pol obrazovky to robí 0,9 % plochy celej stránky. Namerané, nie odhad. */
@media (min-width: 768px) {
  .profil__foto .slider__item { will-change: auto; }
}
.profil__odznak img { width: 562.984px; height: auto; }
.profil__text { font: 400 26px/41.6px Roboto, sans-serif; color: var(--cervena); text-align: left; }
.profil__text b { font-weight: 700; }
.profil__tlacidlo { margin-block: 20px; }

@media (max-width: 767px) {
  /* Sekcie majú po stranách 5 % šírky okna (19,5 px pri 390). */
  .dom { padding-inline: 19.5px; }
  .dom__in { max-width: min(100%, 767px); }
  .dom__h1, .dom__h1--tesny { font-size: 40px; line-height: 56px; }
  /* Časť podnadpisov je na mobile o 10 px užšia z každej strany. */
  .dom__h2--uzsi { padding-inline: 10px; }
  .dom__in--clanky { padding-top: 40%; padding-bottom: 0; }
  .dom__in--online { padding-top: 40%; padding-bottom: 30%; }
  .kont__in { padding-top: 30%; padding-bottom: 0; }
  .profil__in { padding-top: 0; padding-bottom: 0; }
  .dom__elfsight-in { margin-top: -5px; }
  .dom__soc { padding-inline: 10px; }
  .dom__tlacidlo { padding-block: 25px; }
  .btn-el { display: block; border-radius: 0; }

  /* Karty s témami majú na mobile užší okraj sekcie (10 px, nie 5 %),
     tenší rám a idú po dvoch. */
  .cta { padding-inline: 10px; }
  .cta__mriezka { margin-inline: -5px; }
  .cta__pol { flex-basis: 50%; max-width: 50%; padding: 5px; }
  .cta__karta { border-width: 5px; padding-inline: 9px; }

  .cta__in { padding-top: 100%; }
  .cta__nadpis { font-size: 16px; line-height: 19.2px; }

  .novinka { flex-basis: 100%; max-width: 100%; }

  .profil__in { flex-direction: column; }
  .profil__l, .profil__r { width: 100%; padding-right: 0; }
  .profil__meno { justify-content: center; flex-wrap: wrap; }
  .profil__pred, .profil__za { font-size: 14px; line-height: 14px; padding-top: 5px; }
  .profil__h1 { font-size: 24px; line-height: 33.6px; }
  .profil__odznak { margin-top: -10px; margin-bottom: 0; padding-inline: 10px; }
  .profil__foto img { width: 351px; }
  .profil__odznak img { width: 330.938px; }
  .profil__text { text-align: center; padding-inline: 10px; }
  .profil__tlacidlo { padding-inline: 10px; text-align: center; }

  .kont__in .jf { padding-inline: 10px; }
}