/*
 * LLAB — dizajnový systém v2 (biely).
 *
 * Prevzaté 1:1 zo schválenej domovskej ~/Projects/llab/_dev/v2/llab-final.html (15. 9. 2026),
 * riadky 61–384. Cenníkový blok (riadky 386–474) sa prenesie do pluginu llab-blocks
 * (assets/cennik.css je tam zatiaľ ešte vo v1 tónoch).
 * Úpravy dizajnu odteraz robiť tu; mockup je história.
 * Doplnky pre WordPress sú až na konci súboru, pod všetkými pravidlami mockupu.
 *
 * Pravidlá systému (z hlavičky mockupu):
 *  ═══ SYSTÉM — jeden pre celý súbor (Claudov z v3; každý prevzatý Codexov prvok je prepísaný doň) ═══
 *  · Tokeny §2.1: bg #FFF · surface #F7F8FA · line #E3E7ED · line-d rgba(255,255,255,.14) · dark #0E0E29
 *    · ink #101927 · muted #5A6672 · on-dark-muted #A6A6B0 · accent #1A5CFF · accent-hover #0F49D8.
 *  · Písmo: Montserrat 400/600/800/850 + IBM Plex Mono 500. Škála §2.7 + E5: h1 60/40 850 lh 1.02 · h2 38/30 800 lh 1.06
 *    · h3 20/800 lh 1.25 (karty Koho 17/1.3 podľa E12) · lead 18/1.55 muted 58ch · body 16/1.65 60ch · note 14/1.5 muted.
 *  · STUPNICA (16. 9., typografická revízia) — používať len tieto kroky:
 *    60/48/40 h1 (desktop/tablet/mobil) · 38/30 h2 · 28/22 veľký citát a nadpis modálu · 20 h3 · 17 malý nadpis karty · 18 lead
 *    · 16 každý odstavec · 15 hustý text (riadky cenníka, tabuľky) · 14 popisky, odkazy, tlačidlá
 *    · 13 minimum pre bežný text · 12,5 verzálkové štítky · 12 mono štítky.
 *    Rez 850 len pre h1 a veľké číslice. Kurzíva len pre <em> v článkoch (skutočný Montserrat Italic vo fonts.css);
 *    v rozhraní ju nepoužívať.
 *  · Medzera medzi blokmi: 88 px, pod 700 px 44 px (gap) — jediná hodnota.
 *  · Vnútorné medzery (desktop / mobil ≤ 700): eyebrow → h2 12 / 12 · h2 → lead 16 / 12 · hlavička bloku → obsah 20 / 12
 *    · obsah → riadok akcií (.actions) 24 / 12 · hairline → text 16 · mono štítok → nadpis 8.
 *  · Rádiusy: 999 pilulky a tagy · 16 karty, panely, pásy, portréty · 8 rám reportu. Nič iné.
 *  · Tlačidlá: .btn pilulka 48 px (hlavička .btnsm 44), 14/800, padding 0 24, rám 1,5 px. Primárne .btnp = accent
 *    + „→" (::after), plná výplň len hlavička, hero a nič iné na bielom; ghost .btng = rám ink bez šípky.
 *    Na tmavom (.on-dark): primárne biele s ink textom, ghost biely rám.
 *  · Karty: surface bez rámu (Koho, Príbehy) · biely panel + hairline line (Proces) · tmavý panel dark (Po teste, CTA);
 *    panel 56/48, mobil 24/20. Textové karty Learn = hairline hore bez pozadia.
 *  · Eyebrow: Montserrat 12,5/800, verzálky, ls .09em, accent (na tmavom on-dark-muted), vždy NAD h2 (E11).
 *    Rovnaký štýl majú hlavičky stĺpcov pätičky a názvy balíkov v otázkových kartách.
 *  · Mono meta: IBM Plex Mono 500, 12 px, ls .02em, bez verzálok — číslovanie 01–05, „Video · 1:28", označenia kariet,
 *    kategórie článkov, štítky timeline. Jedna varianta.
 *  · Odkazy: v karte .clink 14/800 accent + „ →"; v texte .tlink accent 600 podčiarknutý. Dotykový cieľ 44 px vždy
 *    vlastným priestorom v rozložení, nikdy záporným marginom (E18).
 *  · Plochy zhora: biela → video pás dark → biela → biely panel → biela → surface karty → cenník (stredná karta dark)
 *    → fotopás → biela → panel dark → surface karty → biela → panel dark → pätička dark.
 *    Tmavé na desktope: video, stredná karta cenníka, Po teste, CTA (= 4) + pätička.
 *  · Všetky responzívne prebitia sú v sekcii RESPONZÍVNE až za desktopovými pravidlami (E20); cenník 1:1 na konci.
 */

/* ═══ tokeny (§2.1) ═══ */
:root{
  --bg:#FFFFFF; --surface:#F7F8FA; --line:#E3E7ED; --line-d:rgba(255,255,255,.14);
  --dark:#0E0E29; --ink:#101927; --muted:#5A6672; --on-dark-muted:#A6A6B0;
  --accent:#1A5CFF; --accent-hover:#0F49D8;
  --wrap:1220px; --pad:24px; --gap:88px;
  --sans:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

/* ═══ základ ═══ */
*{box-sizing:border-box}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3,p,figure,blockquote,ul,ol,address{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button{font-family:inherit}
h1{font-size:60px;font-weight:850;line-height:1.02;letter-spacing:-.02em}
h2{font-size:38px;font-weight:800;line-height:1.06;letter-spacing:-.02em;text-wrap:balance}
h3{font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.eyebrow{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);line-height:1.35}
.eyebrow + h2{margin-top:12px}
.lead{font-size:18px;line-height:1.55;color:var(--muted);max-width:58ch}
.body{max-width:60ch}
.note{font-size:14px;line-height:1.5;color:var(--muted)}
.mono{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.02em;line-height:1.4}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
[id]{scroll-margin-top:88px}
.sec{padding-bottom:var(--gap)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.on-dark{color:#fff}
.on-dark .eyebrow,.on-dark .lead{color:var(--on-dark-muted)}

/* ═══ tlačidlá a odkazy ═══ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;
  font-family:var(--sans);font-size:14px;font-weight:800;line-height:1.2;text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s,transform .2s}
.btn:hover{transform:translateY(-1px)}
.btn--p{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--p::after{content:"\2192"}
.btn--p:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn--g{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn--g:hover{background:var(--ink);color:#fff}
.on-dark .btn--p{background:#fff;border-color:#fff;color:var(--ink)}
.on-dark .btn--p:hover{background:var(--surface);border-color:var(--surface)}
.on-dark .btn--g{border-color:#fff;color:#fff}
.on-dark .btn--g:hover{background:#fff;color:var(--ink)}
.btn--sm{min-height:44px;padding:0 20px}
/* navigácia: medzi ghost tlačidlami odlíšená jemným akcentovým podfarbením, aby bolo vidieť,
   že nevedie na ďalšiu stránku, ale do máp. Ikona dedí currentColor, takže sa prekreslí aj v hoveri. */
.btn--nav{background:rgba(26,92,255,.08);border-color:var(--accent);color:var(--accent)}
.btn--nav:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--nav svg{flex:0 0 auto}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
/* riadok akcií pod obsahom bloku (výstup, príbehy, learn, po teste) */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:24px}
.actions--c{justify-content:center;text-align:center}
.clink{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:800;color:var(--accent);text-decoration:none;transition:color .2s}
.clink::after{content:"\00a0\2192"}
.clink:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}
.tlink{display:flex;align-items:center;min-height:44px;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;transition:color .2s}
.tlink:hover{color:var(--accent-hover)}

/* ═══ 0 · hlavička ═══ */
.skip{position:absolute;left:var(--pad);top:-100px;z-index:60;background:var(--bg)}
.skip:focus{top:12px}
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.hdr__in{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);height:71px;display:flex;align-items:center;gap:28px;position:relative}
.hdr__home{display:flex;align-items:center;min-height:44px}
.hdr__logo{height:42px;width:auto}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{font-size:14px;font-weight:600;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;transition:color .2s}
.nav a:hover{color:var(--accent)}
.burger{display:none;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:14px;font-weight:800;cursor:pointer;transition:background-color .2s,color .2s}
.burger[aria-expanded="true"]{background:var(--ink);color:#fff}

/* ═══ 1 · hero — Claudov layout, Codexove medzery (jednotný gap 24) ═══ */
.hero{padding-top:32px}
.hero__g{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:64px;align-items:center}
.hero__t{max-width:600px;display:grid;gap:24px}
.hero__hl{color:var(--accent)}
.hero__p{width:380px;justify-self:end}
.pbox{aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:var(--surface)}
.pbox img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* ═══ 2 · partneri ═══ */
.partners__row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:40px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.logos{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:12px 16px;align-items:center}
.logos img{width:100%;max-width:120px;height:auto;aspect-ratio:5/2;object-fit:cover;filter:grayscale(1);opacity:.72;margin:0 auto}

/* ═══ 3 · video ═══ */
.video .eyebrow{margin-bottom:16px}
.vid{position:relative;display:block;aspect-ratio:21/9;border-radius:16px;overflow:hidden;background:var(--dark);color:#fff;text-decoration:none}
.vid img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.vid__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,41,.10),rgba(14,14,41,.60))}
.vid__play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:999px;background:#fff;display:grid;place-items:center;transition:transform .2s}
.vid:hover .vid__play{transform:scale(1.06)}
.vid__play svg{width:24px;height:24px;margin-left:4px;color:var(--ink)}
.vid__cap{position:absolute;left:0;right:0;bottom:0;padding:32px 40px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.vid__q{font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.02em;max-width:22ch}
.vid__meta{white-space:nowrap}
/* modál (ZADANIE §11 body 3–5) */
.vmodal{border:0;padding:56px 0 0;background:transparent;overflow:visible;width:min(1100px,92vw);max-width:calc((100vh - 108px) * 16 / 9);margin:auto;color:#fff}
.vmodal::backdrop{background:rgba(14,14,41,.86)}
.vmodal__x{position:absolute;top:4px;right:0;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid #fff;background:transparent;color:#fff;font-size:14px;font-weight:800;cursor:pointer;transition:background-color .2s,color .2s}
.vmodal__x:hover{background:#fff;color:var(--ink)}
.vmodal__frame{position:relative;aspect-ratio:16/9;width:100%;border-radius:16px;overflow:hidden;background:var(--dark)}
.vmodal__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ═══ 4 · na čom to stojí — h2 ≤ 820 px = 3 riadky (E11), 6 tagov v 1 riadku ═══ */
.prin h2{max-width:820px}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.tags li{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;line-height:1.4;white-space:nowrap}
.tags svg{width:20px;height:20px;flex:0 0 20px;fill:var(--muted)}

/* ═══ panely ═══ */
.panel{border-radius:16px;padding:56px 48px}
.panel--w{background:var(--bg);border:1px solid var(--line)}
.panel--d{background:var(--dark)}

/* ═══ 5 · proces ═══ */
.proc{display:grid;grid-template-columns:400px 1fr;gap:64px;align-items:start}
/* Ľavý stĺpec je nižší než zoznam krokov, preto sa pri scrollovaní drží — nadpis ostane vidieť,
   kým čítaš kroky. Lepkavá hlavička má 71 px, preto 88 px (rovnako ako scroll-margin kotiev). */
.proc > div:first-child{position:sticky;top:88px}
.proc h2{margin-bottom:16px}
.steps li{display:grid;grid-template-columns:44px 1fr;gap:8px;padding:9px 0;border-top:1px solid var(--line);align-items:baseline}
.steps li:first-child{border-top:0;padding-top:0}
.steps li:last-child{padding-bottom:0}
.steps .mono{color:var(--accent)}
.steps p{font-size:16px;line-height:1.5;color:var(--muted);margin-top:2px;max-width:60ch}

/* ═══ dvojstĺpcová hlavička (výstup, learn) ═══ */
.head2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:20px}
.head2 h2{max-width:30ch}
.head2 .lead{max-width:48ch}

/* ═══ 6 · výstup — Claudov popis, tesný rám, karta aj riadok centrované ═══ */
/* position:relative drží v karte aj skrytý text pre čítačky (position:absolute!important) — bez neho
   sa jeho rámec počíta od okna, unikne orezaniu vodorovného pásu .repgrid a mobil sa dá ťahať do strán */
.rep{position:relative;display:block;width:fit-content;max-width:100%;margin:0 auto;border:1px solid var(--line);border-radius:8px;padding:16px;text-align:center;text-decoration:none;color:inherit;transition:border-color .2s}
.rep:hover{border-color:var(--ink)}
.rep img{width:1031px;max-width:100%;height:auto;margin:0 auto}
.rep figcaption{margin:8px auto 0;max-width:60ch;font-size:14px;line-height:1.5;color:var(--muted)}
.rep figcaption b{color:var(--ink);font-weight:800}

/* ═══ náhľad výstupu na domovskej — dve pootočené strany reportu a štyri dlaždice ═══
   Rotácia je len na desktope; pod 980 px idú strany do normálneho toku, aby pootočený roh
   nevytlačil stránku do strán (rovnaká pasca ako pri skrytom texte v .repgrid). */
.vyst{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);gap:48px;align-items:center}
.vyst__nahlad{position:relative;min-height:520px}
.vyst__strana{position:absolute;margin:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 24px 60px rgba(14,14,41,.16)}
.vyst__strana img{display:block;width:100%;height:auto}
.vyst__strana--vzadu{top:0;right:0;width:84%;transform:rotate(3deg)}
.vyst__strana--vpredu{bottom:0;left:0;width:92%;transform:rotate(-2deg)}
.vyst__text{display:grid;gap:20px;align-content:start}
.vyst__text .lead{margin:0}
.vyst__metriky{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;padding:0;list-style:none;
  background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.vyst__metriky li{margin:0;padding:16px 18px;background:var(--bg)}
.vyst__metriky b{display:block;font-size:20px;font-weight:850;line-height:1.1;letter-spacing:-.01em}
.vyst__metriky span{display:block;margin-top:4px;font-size:13px;line-height:1.4;color:var(--muted)}
.vyst__text .actions{margin-top:0}
.vyst__text .note{margin:0}

/* ═══ 7 · koho testujeme (E12) ═══ */
.koho h2{max-width:30ch}
.who{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.who li{background:var(--surface);border-radius:16px;padding:20px;display:flex;flex-direction:column}
.who .mono{color:var(--accent);margin-bottom:8px}
.who h3,.who h2{font-size:17px;line-height:1.3;margin-bottom:8px;text-wrap:balance}
.who p{font-size:16px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.who .clink{margin-top:auto;padding-top:8px}

/* ═══ 8 · tri otázky + cenník ═══ */
.cen__head{margin-bottom:20px}
.cen__head .lead{margin-top:16px}
.qs{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-bottom:16px}
.qcard{border-top:2px solid var(--accent);padding-top:6px}
.qcard__q{font-size:18px;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin-top:4px}
.qcard__a{font-size:16px;line-height:1.5;color:var(--muted);margin-top:2px}
/* pomoc s výberom balíka — jedno tlačidlo pod cenníkom, otvára modál so správou */
.cen__pomoc{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:20px}
.cen__pomoc p{font-size:16px;line-height:1.5;color:var(--muted)}
/* kompaktný cenník na domovskej: jedno tlačidlo namiesto troch — objednáva sa na Testovaní */
.cen__objednat{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:24px}
.cen__objednat p{font-size:16px;line-height:1.5;color:var(--muted);max-width:52ch}

/* poznámka pod cenníkom: odkaz = celá veta, riadok 44 px, bez bodky mimo odkazu (E18) */
.cen__note{margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:0 24px}

/* ═══ 9 · citát — pás 1172×272 (E14) ═══ */
.quote{position:relative;height:272px;border-radius:16px;overflow:hidden;background:var(--surface);display:flex;align-items:center}
.quote img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
/* Spolupráca: bežkyňa je v spodnej tretine záberu, pri 50% 0% ostala v páse len obloha (audit F5) */
.llab-typ-spolupraca .quote img{object-position:50% 38%}
.quote__s{position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,14,41,.85),rgba(14,14,41,.35))}
.quote blockquote{position:relative;margin-left:var(--pad);max-width:580px;color:#fff;font-size:28px;font-weight:800;line-height:1.15;letter-spacing:-.02em}

/* ═══ 10 · Leo — grid 360 + 1fr, gap 64 ═══ */
.leo{display:grid;grid-template-columns:360px 1fr;gap:64px;align-items:start}
.leo h2{margin-bottom:16px}
.leo .lead{margin-bottom:16px}
.leo .body{margin-bottom:20px}
.creds{display:grid;grid-template-columns:1fr 1fr;gap:12px 64px;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:24px;max-width:760px}
.creds li{font-size:16px;line-height:1.5;color:var(--muted)}
.creds li b{color:var(--ink);font-weight:800}
.media{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pill{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .2s}
.pill:hover{border-color:var(--ink)}
.media .btn{margin-left:8px}

/* ═══ 11 · po teste ═══ */
.after__head{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;margin-bottom:20px}
.after__head h2{max-width:20ch}
.tl{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line-d);border-radius:16px;overflow:hidden}
.tl li{min-height:84px;padding:18px 20px;border-left:1px solid var(--line-d);display:flex;flex-direction:column;gap:8px;justify-content:center}
.tl li:first-child{border-left:0;background:var(--accent)}
.tl .mono{color:var(--on-dark-muted)}
.tl li:first-child .mono{color:#fff}

/* ═══ 12 · príbehy ═══ */
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
.story{background:var(--surface);border-radius:16px;padding:28px;display:flex;flex-direction:column}
.story blockquote{font-size:16px;line-height:1.6;flex:1;margin-bottom:20px}
.story footer{border-top:1px solid var(--line);padding-top:16px}
.story b{display:block;font-size:16px;font-weight:800}
.story span{display:block;font-size:14px;line-height:1.5;color:var(--muted);margin-top:2px}
@media (min-width:901px){
  /* citát a meno v spoločných riadkoch naprieč kartami → mená v jednej línii (ako subgrid v cenníku) */
  .stories{grid-template-rows:auto auto}
  .story{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}

/* ═══ 13 · learn smarter — celá karta je odkaz ═══ */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.posts li{display:flex}
/* .lpost, nie .post — triedu post dáva post_class() článkom a pravidlá by platili aj na ne */
.lpost{flex:1;border-top:1px solid var(--line);padding-top:16px;display:flex;flex-direction:column;color:inherit;text-decoration:none;transition:border-color .2s}
.lpost:hover{border-color:var(--ink)}
.lpost .mono{color:var(--accent);margin-bottom:8px}
.lpost h3{margin-bottom:8px}
.lpost .clink{margin-top:auto}
.lpost:hover .clink{color:var(--accent-hover);text-decoration:underline;text-underline-offset:3px}

/* ═══ 14 · záverečné CTA ═══ */
.cta{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:end}
.cta h2{max-width:20ch;margin-bottom:16px}
.cta .lead{max-width:48ch}

/* ═══ 15 · pätička — riadky odkazov 44 px vo vlastnom priestore (E18), hlavičky v eyebrow systéme ═══ */
.ftr{background:var(--dark);color:#fff;padding-top:12px}
.ftr__in{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad) 12px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1.15fr;gap:40px}
.ftr__logo{height:34px;width:auto;margin:5px 0 16px}
.ftr__in p:not(.ftr__h),.ftr address{font-style:normal;font-size:14px;line-height:1.6;color:var(--on-dark-muted);max-width:34ch}
.ftr__h{display:flex;align-items:center;min-height:44px;font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-muted);line-height:1.35}
.ftr__h a{display:flex;align-items:center;min-height:44px;color:#fff;text-decoration:none}
.ftr ul a{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:#fff;text-decoration:none}
.ftr__h a:hover,.ftr ul a:hover{text-decoration:underline;text-underline-offset:3px}
.ftr__soc{display:flex;flex-wrap:wrap;gap:4px;margin-left:-10px}
.ftr__soc a{width:44px;height:44px;justify-content:center;color:var(--on-dark-muted)}
.ftr__soc a:hover{color:#fff;text-decoration:none}
.ftr__h--sub{min-height:32px;margin-top:8px;text-transform:none;letter-spacing:0;font-size:13px}
.ftr__legal{border-top:1px solid var(--line-d)}
.ftr__legal .in{max-width:var(--wrap);margin:0 auto;padding:12px var(--pad) 8px;font-size:13px;line-height:1.5;color:var(--on-dark-muted)}
.ftr__legal p{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px}
.ftr__legal a{display:inline-flex;align-items:center;min-height:44px;color:inherit;white-space:nowrap}
.ftr__legal a:hover{color:#fff}

/* ═══ PODSTRÁNKY — nové komponenty v tom istom systéme (tokeny, medzery 12/16/20/24, rádiusy 8/16/999) ═══ */
/* úvod podstránky: eyebrow → h1 12, h1 → lead 16, bez portrétu */
.phead{padding-top:32px}
.phead h1{margin-top:12px;max-width:20ch}
.phead .lead{margin-top:16px;max-width:62ch}
/* výstup: strany reportu v mriežke 2 stĺpce, široká strana cez celý riadok; rám a popis z .rep */
.repgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.repgrid .rep{width:auto;margin:0}
.repgrid .rep--w{grid-column:1 / -1}
.repgrid .rep img{width:100%}
/* podpora: biely panel, text a fotka 3:2 vedľa seba */
.pod{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;align-items:center}
/* panel bez obrázka (formulár správy) — inak by vpravo ostal prázdny box */
.pod--sam{grid-template-columns:minmax(0,1fr)}
.pod h2{margin-bottom:16px}
.pod .body{color:var(--muted);margin-bottom:24px}
.lbox{aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--surface)}
.lbox img{width:100%;height:100%;object-fit:cover}

/* Mapa namiesto fotky (Kontakt) — vykresľuje sa rovno, bez kliknutia. Box drží rozmer 3:2
   po .lbox, takže panel má rovnakú výšku, akú mal s fotkou. */
.mapa iframe{display:block;width:100%;height:100%;border:0}
/* časté otázky: hlavička 400 px ako proces, riadky oddelené hairline, cieľ 56 px */
.faqw{display:grid;grid-template-columns:400px minmax(0,1fr);gap:64px;align-items:start}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;padding:8px 0;font-size:18px;font-weight:800;line-height:1.3;letter-spacing:-.01em;cursor:pointer;list-style:none;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:0 0 auto;font-size:24px;font-weight:600;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq summary:hover{color:var(--accent)}
.faq__a{display:grid;gap:12px;padding-bottom:20px;max-width:65ch}
.faq__a p{font-size:16px;line-height:1.6;color:var(--muted)}
.faq__a b{color:var(--ink);font-weight:800}
/* ponuka (Spolupráca, Vzdelávanie): tmavý panel — úvod 2 stĺpce, časová os .tl, možnosti (h2 v štýle h3), poznámka nad hairline */
.ponuka__intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-bottom:20px}
.ponuka__intro p,.ponuka__moznosti p{max-width:60ch;color:var(--on-dark-muted)}
.on-dark .ponuka__hl{color:#fff;font-weight:600}
.tl__t{font-size:20px;font-weight:800;line-height:1.25;letter-spacing:-.01em}
.ponuka__moznosti{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:24px}
.ponuka__moznosti h2{font-size:20px;line-height:1.25;letter-spacing:-.01em;margin-bottom:8px}
.ponuka__moznosti p + p{margin-top:12px}
.ponuka__note{margin-top:24px;padding-top:16px;border-top:1px solid var(--line-d);font-size:14px;line-height:1.5;color:var(--on-dark-muted);max-width:62ch}
/* témy workshopov: biele panely pod sebou — číslo, názov, popis a pre koho vľavo (400 px ako proces), body vpravo */
.temy{display:grid;gap:16px;margin-top:20px}
.tema{display:grid;grid-template-columns:400px minmax(0,1fr);gap:64px;align-items:start}
.tema .mono{color:var(--accent)}
.tema h3{margin:8px 0}
.tema p{font-size:16px;line-height:1.55;color:var(--muted);max-width:60ch}
.tema__pre{margin-top:12px}
.tema__pre b{color:var(--ink);font-weight:800}
.tema li{padding:9px 0;border-top:1px solid var(--line);font-size:16px;line-height:1.5}
.tema li:first-child{border-top:0;padding-top:0}
/* galéria priestorov: biely panel, hlavička bloku, 4 fotky v riadku (≤ 900 px 2), 4:3, rádius 16 */
.gal__head h2{max-width:30ch}
.gal__head .lead{margin-top:16px}
/* Počet stĺpcov sa riadi počtom fotiek, nie pevnou štvorkou: galéria s dvoma fotkami inak nechala
   pravú polovicu panela prázdnu (nahlásené 16. 9.). V užšom paneli dvojice sa tak dve fotky zmestia
   vedľa seba, v širokom panelu by ostal riadok po štyroch. Minimum 150 px drží fotky vedľa seba
   aj v polovičnom paneli. */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}

/* Dvojica galérií vedľa seba (Kontakt): pod sebou zaberali 1 296 px. Vnútorné sekcie si nesmú
   niesť vlastnú obsahovú šírku ani spodné odsadenie, inak by sa stĺpce rozišli. */
.galpar__obal{margin-bottom:var(--gap)}
.galpar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
.galpar > .sec{padding-bottom:0}
.galpar > .sec > .wrap{max-width:none;padding-inline:0}
.galpar .panel{height:100%}
.gal li{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--surface)}
.gal img{width:100%;height:100%;object-fit:cover}
/* miesto testovania: panel .pod — úvod, adresa zo zdieľaných kontaktov, tlačidlá (na bielom ghost) */
.pod .lead{margin-bottom:20px}
.addr{display:flex;flex-direction:column;gap:2px;font-style:normal;font-size:16px;line-height:1.5;color:var(--muted);margin-bottom:24px}
.addr b{color:var(--ink);font-weight:800;margin-bottom:4px}

/* ═══ BLOG a bežné stránky — výpis článkov, článok, text z editora (.prose), hľadanie ═══ */
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.cats a[aria-current="page"]{background:var(--ink);border-color:var(--ink);color:#fff}
.clanky{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 16px}
.kclanok{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.kclanok__obr{display:block;aspect-ratio:3/2;border-radius:16px;overflow:hidden;background:var(--surface);margin-bottom:16px}
.kclanok__obr img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.kclanok:hover .kclanok__obr img{transform:scale(1.03)}
.kclanok .mono{color:var(--accent);margin-bottom:8px}
.kclanok h2{font-size:20px;line-height:1.25;letter-spacing:-.01em;transition:color .2s}
.kclanok:hover h2{color:var(--accent)}
.kclanok time{margin-top:8px}
.nav-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:40px}
.page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:600;text-decoration:none;transition:border-color .2s}
a.page-numbers:hover{border-color:var(--ink)}
.page-numbers.current{background:var(--ink);border-color:var(--ink);color:#fff}
.page-numbers.dots{border-color:transparent}
.clanok__hlava{max-width:760px;margin:0 auto;padding-top:32px}
/* odkaz v eyebrow je dotykový cieľ 44 px vo vlastnom priestore (E18) — jeho výška nahrádza medzeru nad h1 */
.clanok__hlava .eyebrow a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.clanok__hlava .eyebrow + h1{margin-top:0}
.clanok__meta{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:0 16px}
.clanok__meta .mono{display:inline-flex;align-items:center;min-height:44px;color:var(--accent);text-decoration:none}
/* ═══ fotky v paneloch proces a ponuka (nepovinné) ═══ */
/* Fotka je v týchto paneloch doplnok textu, nie hrdina stránky — preto má strop výšky a orezáva sa.
   Bez stropu vyrástol portrét v ponuke na 640 px a zabral celú obrazovku. */
.proc__obr{margin:24px 0 0;border-radius:16px;overflow:hidden;background:var(--surface)}
/* orez k hornej tretine: pri páse cez celú šírku padnú tváre inak mimo záber (portrét prednášky) */
.proc__obr img{display:block;width:100%;height:auto;aspect-ratio:3/2;max-height:300px;object-fit:cover;object-position:50% 28%}
/* .ponuka__intro má dva stĺpce a fotka v ňom bola bežnou bunkou — vedľa nej ostávala diera cez pol panela */
.ponuka__obr{grid-column:1/-1;margin:8px 0 0;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.06)}
.ponuka__obr img{display:block;width:100%;height:auto;aspect-ratio:21/9;max-height:320px;object-fit:cover;object-position:50% 28%}

/* ═══ formulár správy (Kontakt) ═══ */
.formular{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-top:20px;max-width:560px}
.formular__pole{display:grid;gap:6px;margin:0}
.formular__pole--siroke{grid-column:1/-1}
.formular label{font-size:14px;font-weight:800;color:var(--ink)}
.formular__nepovinne{font-weight:400;color:var(--muted)}
.formular input[type=text],.formular input[type=email],.formular input[type=tel],.formular textarea{
  width:100%;min-height:48px;padding:12px 16px;border:1px solid var(--line);border-radius:8px;
  font:inherit;font-size:16px;color:var(--ink);background:#fff}
.formular textarea{min-height:140px;line-height:1.6;resize:vertical}
.formular input:focus-visible,.formular textarea:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.formular__napoveda{font-size:13px;line-height:1.5;color:var(--muted)}
.formular__suhlas label{display:flex;gap:10px;align-items:flex-start;font-size:14px;font-weight:400;line-height:1.5;color:var(--muted)}
.formular__suhlas input{width:20px;height:20px;margin-top:2px;flex:0 0 auto;accent-color:var(--accent)}
.formular__suhlas a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
/* návnada pre roboty — mimo obrazovky, ale nie display:none (to roboty preskočia) */
.formular__navnada{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular__stav{margin-top:16px;padding:12px 16px;border-radius:8px;font-size:16px;line-height:1.5}
.formular__stav--ok{background:#E8F6EF;color:#0B7A50;border:1px solid #BFE6D6}
.formular__stav--chyba{background:#FDECEA;color:#A32015;border:1px solid #F5C6C0}

/* modál so správou — rovnaký vzor ako video a prehliadač slidov */
/* position:fixed, NIE relative: modálnemu <dialog> dáva prehliadač fixed a prekrytie cez celú
   obrazovku. S relative spadne dialóg do normálneho toku v pätičke a stránka pod ním odskočí
   na začiatok (nahlásené 16. 9.). Absolútne pozicovaný krížik má aj tak o čo sa oprieť. */
.smodal{border:0;border-radius:16px;padding:32px;background:#fff;color:var(--ink);width:min(92vw,620px);max-height:92vh;margin:auto;overflow:auto;position:fixed}
.smodal::backdrop{background:rgba(14,14,41,.86)}
.smodal h2{font-size:28px;line-height:1.15;letter-spacing:-.02em;margin-right:96px}
.smodal__x{position:absolute;top:20px;right:20px;min-height:44px;padding:0 18px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);font-size:14px;font-weight:800;cursor:pointer}
.smodal__x:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.smodal .formular{margin-top:20px;max-width:none}

/* ═══ slidy pôvodného príspevku — prelistovanie nad textom článku ═══ */
.slidy{max-width:1000px;margin:28px auto 0}
.slidy__hint{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted);margin-bottom:10px}
.slidy__hint b{color:var(--ink);font-weight:800}
/* vyššia špecificita: .prose ul{list-style:disc} a .prose li+li sú v súbore neskôr a prebíjali by pás */
.slidy ul.slidy__pas{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 10px;margin:0;list-style:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.slidy .slidy__pas li{flex:0 0 auto;scroll-snap-align:center;margin:0}
.slidy__pas button{display:block;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface);cursor:zoom-in;transition:border-color .2s}
.slidy__pas button:hover{border-color:var(--ink)}
.slidy .slidy__pas img{display:block;height:360px;width:auto;max-width:none;border-radius:0}

/* prehliadač slidov: obrázok, počítadlo a šípky; zatvára Escape, klik mimo aj tlačidlo */
.imodal{border:0;padding:0;background:transparent;max-width:min(96vw,900px);max-height:96vh;margin:auto;color:#fff;overflow:visible}
.imodal::backdrop{background:rgba(14,14,41,.9)}
.imodal__obr{display:block;margin:0 auto;max-height:82vh;max-width:100%;width:auto;height:auto;border-radius:12px;background:#fff}
.imodal__lista{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:12px}
.imodal__lista button{min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);background:transparent;color:#fff;font-size:14px;font-weight:800;cursor:pointer}
.imodal__lista button:hover:not([disabled]){background:#fff;color:var(--ink)}
.imodal__lista button[disabled]{opacity:.35;cursor:default}
.imodal__pocet{font-size:14px;font-weight:600;min-width:64px;text-align:center}

.prose{max-width:760px;margin:32px auto 0;font-size:17px;line-height:1.7}
.prose > * + *{margin-top:20px}
.prose h2{font-size:30px;margin-top:48px}
.prose h3{margin-top:32px}
/* tlačidlá blokového editora (.wp-element-button) si nechajú farby jadra — inak modrý text na tmavom (nález Codexu #2) */
.prose a:not(.wp-element-button):not(.wp-block-button__link){color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.prose ul{list-style:disc;padding-left:24px}
.prose ol{list-style:decimal;padding-left:24px}
.prose li + li{margin-top:8px}
.prose strong{font-weight:800}
.prose blockquote{border-left:2px solid var(--accent);padding-left:20px;font-size:20px;font-weight:600;line-height:1.5}
.prose img{height:auto;border-radius:16px}
.prose figcaption{margin-top:8px;font-size:14px;line-height:1.5;color:var(--muted)}
.prose .clanok__ilu{float:right;width:300px;margin:6px 0 20px 32px}
.prose .clanok__ilu img{width:100%}
.prose .clanok__ilu figcaption{font-size:13px}
.prose h2,.prose hr{clear:both}
.prose hr{border:0;border-top:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;font-size:15px}
.prose th,.prose td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
.search-form{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.search-field{min-height:48px;padding:0 20px;border:1px solid var(--line);border-radius:999px;font:inherit;min-width:0;flex:1 1 240px}
.search-submit{min-height:48px;padding:0 24px;border-radius:999px;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:14px;font-weight:800;cursor:pointer}

/* ═══ RESPONZÍVNE — všetky prebitia až za desktopovými pravidlami (E20), od najširšieho ═══ */
@media (max-width:1219px){
  /* 9 · pás užší než 1172 px posunie hlavu pod text → fotka 3:2 nad tmavou kartou (E3) */
  .quote{height:auto;display:block;background:var(--dark)}
  .quote img{position:static;aspect-ratio:3/2;height:auto;object-position:50% 50%}
  .quote__s{display:none}
  .quote blockquote{margin:0;padding:32px 40px 40px;max-width:760px}
}
@media (min-width:701px) and (max-width:1219px){
  /* 3:2 je na tablete vyššie než obrazovka (1024 → 949 px), fotka preto 16:9 */
  .quote img{aspect-ratio:16/9}
}
@media (max-width:1180px){
  /* 4 · 6 tagov sa nezmestí → zalomia sa a ostanú v obsahovej šírke (mriežka 3×max-content pretekala) */
  .tags{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
}
@media (max-width:1120px){
  .logos{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 24px}
  .faq__a{max-width:60ch}
  .pod .btns .btn{flex:1 1 auto;justify-content:center}
}
@media (max-width:1000px){
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:4px var(--pad) 12px}
  /* otvorené menu stmaví obsah pod sebou, inak hero pokračuje, akoby bolo jeho súčasťou */
  .nav.is-open{display:flex;box-shadow:0 0 0 100vmax rgba(14,14,41,.35)}
  .nav a{min-height:52px;font-size:16px;border-bottom:1px solid var(--line)}
  .nav a:last-child{border-bottom:0}
  .burger{display:inline-flex;align-items:center;margin-left:auto}
}
@media (max-width:980px){
  .hero__g{grid-template-columns:1fr;gap:28px}
  /* dvojica galérií: na užšom okne pod seba, inak by boli dva polovičné stĺpce nečitateľné */
  .galpar{grid-template-columns:1fr;gap:16px}
  .hero__p{width:100%;max-width:280px;justify-self:start}
  .proc{grid-template-columns:1fr;gap:32px}
  /* v jednom stĺpci nie je za čím sa držať — lepkavý úvod by len prekrýval kroky */
  .proc > div:first-child{position:static}
  /* panel je tu jednostĺpcový, z pomeru 3/2 by fotka narástla na pol výšky obrazovky */
  .proc__obr img{aspect-ratio:21/9;max-height:260px}
  .ponuka__obr img{max-height:260px}
  /* náhľad výstupu: strany idú do normálneho toku a bez rotácie — pootočený roh by na užšom
     okne trčal mimo obsahovej šírky a stránka by sa dala ťahať do strán */
  .vyst{grid-template-columns:1fr;gap:28px}
  .vyst__nahlad{position:static;min-height:0;display:grid;gap:12px}
  .vyst__strana{position:static;width:auto;transform:none;box-shadow:0 12px 32px rgba(14,14,41,.10)}
  /* pod sebou by dve celé strany reportu pridali ~500 px scrollovania a povedali to isté —
     na užšom okne stačí predná strana, celý report je aj tak za tlačidlom v PDF */
  .vyst__strana--vzadu{display:none}
  .who{grid-template-columns:1fr 1fr}
  .pod{grid-template-columns:1fr;gap:28px}
  .faqw{grid-template-columns:1fr;gap:20px}
  .tema{grid-template-columns:1fr;gap:20px}
}
@media (min-width:701px) and (max-width:980px){
  .hero__g{grid-template-columns:minmax(0,1fr) 240px;gap:32px}
  .hero__p{width:240px;max-width:240px;justify-self:end}
}
@media (max-width:900px){
  h1{font-size:48px}
  .tl{grid-template-columns:1fr 1fr}
  .tl li:nth-child(3){border-left:0}
  .tl li:nth-child(n+3){border-top:1px solid var(--line-d)}
  .repgrid{grid-template-columns:1fr;gap:12px}
  .partners__row{grid-template-columns:1fr;gap:16px;padding:16px 0}
  .logos{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px 20px}
  .logos img{max-width:112px}
  .head2{grid-template-columns:1fr;gap:16px}
  .qs{grid-template-columns:1fr;gap:8px}
  .cen__note{flex-direction:column;align-items:flex-start;gap:4px}
  .leo{grid-template-columns:1fr;gap:28px}
  .leo .pbox{max-width:216px;order:1}
  .media .btn{margin-left:0}
  .after__head{grid-template-columns:1fr;gap:16px}
  .ponuka__intro,.ponuka__moznosti{grid-template-columns:1fr;gap:16px}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clanky{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prose .clanok__ilu{float:none;width:auto;max-width:360px;margin:20px auto}
  .slidy .slidy__pas img{height:min(64vw,300px)}
  .slidy__hint{font-size:13px}
  .stories{grid-template-columns:1fr}
  /* 13 · kategória + „Čítať tému →" v riadku, názov pod nimi (E13); cieľom je celá karta */
  .posts{grid-template-columns:1fr;gap:0}
  .lpost{display:grid;grid-template-columns:1fr auto;grid-template-areas:"cat link" "title title";column-gap:12px;align-items:center;padding:4px 0}
  .lpost .mono{grid-area:cat;margin:0}
  .lpost h3{grid-area:title;margin:0 0 4px}
  .lpost .clink{grid-area:link;min-height:0;line-height:20px}
  .cta{grid-template-columns:1fr;gap:24px}
  .ftr__in{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px 24px}
  .ftr__brand{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:24px}
  .ftr__brand p{max-width:48ch}
  .ftr__logo{margin:0}
  /* 3 · play vpravo hore už tu — v strede by ho prekrýval citát (E19) */
  .vid__play{width:56px;height:56px;margin:0;left:auto;right:16px;top:16px}
  .vid__play svg{width:20px;height:20px;margin-left:3px}
}
@media (min-width:701px) and (max-width:900px){
  /* portrét Lea vedľa textu — inak ostávalo vpravo ~500 px prázdnych */
  .leo{grid-template-columns:216px minmax(0,1fr);gap:32px}
  .leo .pbox{order:0}
  .story blockquote{max-width:62ch}
}
@media (max-width:700px){
  :root{--pad:16px;--gap:44px}
  h1{font-size:40px}
  h2{font-size:30px}
  .hdr__in{height:63px;gap:10px}
  .hdr__logo{height:28px}
  .burger{padding:0 14px}
  .hdr .btn--sm{padding:0 14px}
  .hero__t{gap:20px}
  .hero__p{max-width:100%}
  /* Portrét 2:3 sa tu orezáva na 4/3, takže je vidieť len polovicu výšky. Pri strede (50 %)
     vypadne hlava — orez preto posúvam nahor, kde je tvár (oči sú asi na 25 % výšky fotky). */
  .hero__p.pbox,.hero__p .pbox{aspect-ratio:4/3}
  .hero__p .pbox img,.hero__p.pbox img{object-position:50% 18%}
  /* 3 · play 56 px vpravo hore — mimo tváre a masky (E19) */
  .vid{aspect-ratio:3/2}
  .vid img{object-position:50% 50%}
  .vid__play{width:56px;height:56px;margin:0;left:auto;right:16px;top:16px}
  .vid__play svg{width:20px;height:20px;margin-left:3px}
  .vid__cap{padding:16px;flex-direction:column;align-items:flex-start;gap:6px}
  .vid__q{font-size:22px}
  /* 4 · 2 krátke páry + 2 dlhé tagy na celú šírku — každý tag 1 riadok, pilulka ostáva pilulkou, výška bloku bez zmeny */
  .tags{grid-template-columns:1fr 1fr;grid-auto-flow:row dense;justify-content:stretch;justify-items:stretch;margin-top:12px}
  .tags li{white-space:normal;height:auto;min-height:40px;padding:6px 12px}
  .tags li:nth-child(4),.tags li:nth-child(5){grid-column:span 2}
  .panel{padding:24px 20px}
  .proc{gap:20px}
  .proc h2{margin-bottom:12px}
  .steps li{grid-template-columns:30px 1fr;gap:6px}
  .head2{gap:12px;margin-bottom:12px}
  .rep{padding:12px}
  .actions{margin-top:12px;gap:8px 16px}
  .who{margin-top:12px}
  .cen__head{margin-bottom:12px}
  .cen__head .lead{margin-top:12px}
  .qs{margin-bottom:12px}
  .qcard{padding-top:4px}
  .qcard__q{margin:2px 0}
  .qcard__a{line-height:1.4;margin-top:0}
  .quote blockquote{padding:20px 20px 24px;font-size:22px;max-width:none}
  .leo h2,.leo .lead,.leo .body{margin-bottom:12px}
  .creds{gap:8px 24px;padding:12px 0;margin-bottom:12px}
  .after__head{gap:12px;margin-bottom:12px}
  .stories{margin-top:12px}
  /* Príbehy sa na mobile listujú vodorovne — pod sebou zaberali 1248 px. Karta má 86 % šírky,
     takže z ďalšej vidno kus a je hneď jasné, že sa dá posúvať (ten istý vzor ako strany reportu).
     position:relative drží prípadný absolútne pozicovaný obsah v karte, aby neunikol orezaniu pásu. */
  .stories{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:4px;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .stories .story{position:relative;flex:0 0 86%;scroll-snap-align:center}
  .story{padding:24px}
  .cta h2{margin-bottom:12px}
  .ftr{padding-top:20px}
  .ftr__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0 16px;padding-bottom:12px}
  .ftr__brand{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px}
  .ftr__brand p{display:none}
  .ftr__nav{grid-column:1/-1;margin-top:12px}
  .ftr__nav .ftr__h{display:none}
  .ftr__nav ul{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;border-block:1px solid var(--line-d);padding:4px 0}
  .ftr__kontakt{order:3}
  .ftr__miesto{order:4}
  .ftr__legal .in{padding:12px var(--pad) 16px;font-size:13px}
  .phead .lead{margin-top:12px}
  /* strany reportu sa na mobile listujú vodorovne — pod sebou mali 1529 px */
  .repgrid{display:flex;align-items:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .repgrid .rep{flex:0 0 86%;scroll-snap-align:center}
  .repgrid .rep--w{grid-column:auto}
  /* na mobile ostáva fotka doplnkom: 16/9 so stropom 200 px, aby sa stránka nenaťahovala do nekonečna */
  .proc__obr img{aspect-ratio:16/9;max-height:200px}
  .ponuka__obr img{aspect-ratio:16/9;max-height:200px}
  /* strana reportu je na 375 px nečitateľná miniatúra za ~250 px scrollovania — dlaždice
     a tlačidlo na vzorový výstup povedia to isté a stránka sa skráti */
  .vyst__nahlad{display:none}
  .formular{grid-template-columns:1fr;max-width:none}
  .smodal{padding:24px 20px;width:100%;max-width:100%;height:100%;max-height:100%;border-radius:0}
  .smodal h2{font-size:22px;margin-right:88px}
  .pod{gap:20px}
  .pod h2,.pod .body{margin-bottom:12px}
  .faqw{gap:12px}
  .faq summary{font-size:17px}
  .faq__a{padding-bottom:16px}
  .ponuka__intro{margin-bottom:12px}
  .ponuka__moznosti{margin-top:12px}
  .ponuka__note{margin-top:12px;padding-top:12px}
  .temy{gap:12px;margin-top:12px}
  .tema{gap:12px}
  .gal{margin-top:12px}
  .gal__head .lead{margin-top:12px}
  .pod .lead,.addr{margin-bottom:12px}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .logos img{max-width:104px}
  .cats{margin-bottom:12px}
  .clanky{grid-template-columns:1fr;gap:32px}
  .nav-links{margin-top:24px}
  .prose{margin-top:20px}
  .prose{font-size:16px}
  .prose h2{font-size:24px;margin-top:32px}
}
@media (max-width:560px){
  /* otázky „pre koho je balík" opakuje úvod karty balíka aj prepínač — na mobile stačí raz */
  .qs{display:none}
  .who{grid-template-columns:1fr}
  .creds{grid-template-columns:1fr}
}

/* ═══ WordPress — doplnky, ktoré mockup nepotreboval ═══ */
/* aktuálna položka hlavného menu — aria-current dopĺňa jadro vo wp_nav_menu() */
.nav a[aria-current="page"]{color:var(--accent)}
/* admin lišta prihláseného používateľa nesmie prekryť lepkavú hlavičku */
.admin-bar .hdr{top:32px}
@media (max-width:400px){
  /* „Interpretácia" presahovala bunku o 12 px */
  .tl{grid-template-columns:1fr}
  .tl li{border-left:0}
  .tl li+li{border-top:1px solid var(--line-d)}
}

@media (orientation:landscape) and (max-height:500px){
  .hdr__in{height:56px}
  .vmodal{padding-top:0;max-width:calc(100vh * 16 / 9)}
  .vmodal__x{top:8px;right:8px;z-index:1}
}

@media (max-width:782px){.admin-bar .hdr{top:46px}}
/* pod 600 px je lišta jadra position:absolute a odroluje sa s obsahom */
@media (max-width:600px){.admin-bar .hdr{top:0}}
/* kotvy pod lepkavou hlavičkou aj s admin lištou (hlavička 72 px + lišta 32/46 px) */
.admin-bar [id]{scroll-margin-top:120px}
@media (max-width:782px){.admin-bar [id]{scroll-margin-top:134px}}
@media (max-width:600px){.admin-bar [id]{scroll-margin-top:88px}}
/* text len pre čítačky — trieda jadra (stránkovanie, formuláre, vyhľadávanie) */
.screen-reader-text{border:0;clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}