/* =========================================================
   Obce v datech – prototyp wireframe (vylepšená verze)
   Sdílený stylopis. Volně upravujte proměnné níže.
   ========================================================= */

/* ---------- SVG ikony (viz assets/icons.js) ---------- */
.ic{display:inline-block;width:1em;height:1em;vertical-align:-0.125em;flex:none;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Material Symbols Outlined (Stitch design) – výchozí styling */
.ms{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;
  font-size:1.35em;line-height:1;display:inline-flex !important;width:1.35em !important;height:1.35em !important;
  align-items:center;justify-content:center;vertical-align:-0.22em;
  letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;
  -webkit-font-feature-settings:'liga';-webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24;
  flex:none;color:inherit;overflow:hidden}

/* ---------- Přepínač jazyků (CS / SK / EN) v topbaru ---------- */
.share-bar .sh-btn{width:38px;height:38px;border-radius:50%;display:inline-flex;
  align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);
  color:var(--navy);cursor:pointer;padding:0;transition:background .15s,border-color .15s,color .15s,transform .12s}
.share-bar .sh-btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-1px)}
.share-bar .sh-btn .ic{width:17px;height:17px}
/* Natívne zdieľanie je na mobile hlavná cesta (WhatsApp, Messenger…), preto
   plná farba. Na dotykových displejoch aj väčší terč – 38 px sa prstom míňa. */
.share-bar .sh-btn-nativ{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.share-bar .sh-btn-nativ:hover{background:var(--brand-darker);border-color:var(--brand-darker)}
@media (pointer:coarse){ .share-bar .sh-btn{width:44px;height:44px} }
.share-bar .sh-btn.sh-ok{background:var(--accent,#2E7D34);border-color:var(--accent,#2E7D34);color:#fff}

/* ---------- Design tokens ---------- */
:root{
  --navy:#0C2B33;
  --navy-2:#14424E;
  /* sjednotený gradient pre VŠETKY navy bloky – diagonálne od svetlejšej navy cez hlavnú do tmavej */
  --navy-gradient:linear-gradient(140deg, #1C7A8C 0%, #136273 55%, #0C4552 100%);
  /* modrá „žiara“ v rohu navy pruhov a kariet – VŠADE rovnaká */
  --navy-glow:radial-gradient(circle at 100% 0%,rgba(28,109,208,.3) 0%,transparent 55%);
  --brand:#2EADC2;
  --brand-dark:#238A9B;
  /* tmavsi odtien pre :hover primarneho tlacidla – samotny --brand
     mal s bielym textom kontrast 2,97:1, teda pod hranicou AA 4,5:1 */
  --brand-darker:#1B7284;
  --brand-soft:#E1F5F9;
  --accent:#2E7D34;
  --accent-soft:#E4F4DF;
  --amber:#F5C632;
  --amber-soft:#FBEFDC;
  --red:#CC1F14;
  --red-soft:#FBE7E2;
  /* jednotná skóre paleta — klasický red/yellow/green diverging (Tailwind amber-500) */
  /* Verdikt (finál 11. 9. 2026, po ukážke šéfovi): pôvodná PESTRÁ rodina –
     dobré = trávová zelená, stred = zlatá, zlé = červená (tmavá rudá je len
     špička mapy). Mapy: spojitá škála MAP_STOPS (app.js) UKOTVENÁ na pätiny
     20/60/20; tri verdiktové farby na malých prvkoch (číslo, chip, bodka,
     prúžok). Text na bielej vždy z *-text odtieňov (AA). */
  --sc-hi:#3FA046;  --sc-hi-soft:#E4F4DF;  --sc-hi-text:#2E7D34;
  --sc-lo-text:#CC1F14; --sc-mid-text:#B45309;
  --sc-mid:#F5C632; --sc-mid-soft:#FBF1CB;
  --sc-lo:#CC1F14;  --sc-lo-soft:#FBE3E0;
  --ink:#0C2B33;
  --muted:#5B6B7C;
  --muted-2:#626F82;
  --line:#E6ECF3;
  --bg:#FFFFFF;
  --bg-soft:#F4F6F9;
  --bg-tint:#EDF2F8;
  --radius:10px;
  --radius-sm:5px;
  /* mäkké vrstvené tiene – echo glass kariet, jednotné na celom webe */
  --shadow:0 2px 4px rgba(12,43,51,.04),0 16px 40px -12px rgba(12,43,51,.14);
  --shadow-sm:0 1px 2px rgba(12,43,51,.04),0 8px 24px -10px rgba(12,43,51,.10);
  /* 1264 = 1216 px obsahu + 2x24 px padding. Zhoda so šírkou obsahu na
     obcevdatech.cz, aby si weby vizuálne odpovedali. */
  --maxw:1264px;
  --font:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --font-head:'Montserrat',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  font-size:16px;
  padding-top:70px;          /* miesto pre fixnú nav lištu */
  min-height:100vh;          /* krátka stránka nesmie nechať pod pätičkou biely pruh */
  display:flex;
  flex-direction:column;
}
/* Krátka stránka (404, budúce tenké stránky) nechávala pod pätičkou biely pruh:
   telo skončilo skôr než okno. margin-top:auto ju pritlačí dole – funguje aj
   tam, kde sú sekcie mimo <main> (homepage), na dlhej stránke nerobí nič. */
body > .footer{margin-top:auto}
img{max-width:100%;display:block}
a{color:var(--brand-dark);text-decoration:none}
a:hover{text-decoration:underline}
em{font-style:italic;font-weight:700}   /* kurzíva = aj tučné */
/* OvD brand (logomanuál 2026): všetko Montserrat – nadpisy ExtraBold, labely SemiBold, text Regular */
h1,h2,h3,h4,h5,h6{font-family:var(--font-head)}
.hs-num,.tbig,.hrk-city,.hrk-score{font-family:var(--font-head)}
ul{list-style:none}

/* ---------- Layout ---------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
/* Vertikální rytmus – tři úrovně místo jediných 38px všude.
   Datové sekce (mapa, žebříček) dostanou --sp-loose, ať mají prostor;
   navazující/odkazové sekce --sp-tight, ať se drží u sebe. */
:root{--sp-tight:34px;--sp:58px;--sp-loose:88px}
.section{padding:var(--sp) 0}
.section-sm{padding:var(--sp-tight) 0}
.section-loose{padding:var(--sp-loose) 0}
.section-soft{background:#fff}
.section-tint{background:var(--bg-tint)}
.section-navy{background:var(--navy-gradient);color:#fff}
.section-navy h2,.section-navy h3{color:#fff}
/* jednotný podtitulek v tmavé CTA sekci */
.cta-sub{color:rgba(255,255,255,.78);margin:10px auto 18px;max-width:540px}
.narrow{max-width:760px;margin:0 auto}
.grid{display:grid;gap:22px}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.center{text-align:center}
.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mt-3{margin-top:32px}
.spread{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}

/* ---------- Typography ----------
   Sedmistupňová škála. Každá velikost na webu má být jedna z těchto hodnot,
   ne "skoro stejná" mezihodnota. Odstup mezi stupni je dost velký na to,
   aby čtenář poznal hierarchii bez přemýšlení. */
:root{
  --t-h1:48px;   /* titulek stránky – jen jednou na stránce */
  --t-h2:34px;   /* nadpis sekce – musí unést sekci sám */
  --t-h3:22px;   /* nadpis karty/bloku */
  --t-lead:17px; /* perex pod nadpisem */
  --t-body:15px; /* běžný text */
  --t-small:13px;/* popisky, vysvětlivky */
  --t-label:11px;/* verzálkové labely nad čísly (malé) */
  --t-label-lg:12.5px;/* verzálkové medzititulky (eyebrow, hlavičky tabuliek) */
}
h1,h2,h3,h4{color:var(--navy);line-height:1.22;font-weight:700;letter-spacing:-.01em}
h1{font-size:var(--t-h1);font-weight:800;letter-spacing:-.022em;line-height:1.06}
h2{font-size:var(--t-h2);font-weight:800;letter-spacing:-.02em;line-height:1.15}
h3{font-size:var(--t-h3)}
h4{font-size:var(--t-body)}
p{color:var(--ink)}
/* Perex je sadzba hlavičky stránky. Vnútri textu vyzeral ako omyl:
   17 px sivý odstavec hneď vedľa 16 px tmavého (15. 9. 2026). Vnútri
   obsahu má preto sadzbu bežného odstavca, v hlavičkách ostáva perexom. */
.lead{font-size:16px;color:var(--ink);line-height:1.7}
.hero .lead,.hero-listing .lead,.hero-listing--plain .lead,.ikz-hero .lead,
.obec-hero-band .lead,.section-navy .lead,.cta .lead{
  font-size:var(--t-lead);line-height:1.65}
/* ---------- Právne stránky (cookies, podmienky, ochrana údajov) ----------
   Používajú holé <h2>/<p>/<ul>, ktoré globálny reset zbavil okrajov aj odrážok.
   Táto trieda im vracia čitateľnú typografiu dokumentu. */
/* Doľava ako všetky ostatné bloky – vycentrovaný stĺpec pôsobil odtrhnuto
   od hlavičky sekcie. Šírka riadku zostáva kvôli čitateľnosti. */
.legal{max-width:820px;margin:0}
.legal h2{font-family:var(--font-head);font-size:21px;color:var(--navy);
  margin:34px 0 10px;line-height:1.3}
.legal h2:first-of-type{margin-top:0}
.legal p{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 14px}
.legal ul{list-style:disc;padding-left:22px;margin:0 0 16px}
.legal li{font-size:16px;line-height:1.7;color:var(--ink);margin-bottom:7px}
.legal li::marker{color:var(--brand)}
.legal strong{color:var(--navy)}
.legal a{color:var(--brand-dark);font-weight:600}
.legal .table{margin:6px 0 16px}

/* ---------- Cookie lišta ---------- */
/* Kartička vľavo dole (vzor obcevdatech.cz), nie pruh cez celú šírku. */
.cookiebar{position:fixed;left:20px;bottom:20px;z-index:9000;width:min(380px,calc(100vw - 40px));
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 18px 44px -12px rgba(12,43,51,.35);padding:0;
  transform:translateY(calc(100% + 24px));opacity:0;
  transition:transform .35s cubic-bezier(.16,1,.3,1),opacity .3s}
.cookiebar.is-open{transform:none;opacity:1}
.cookiebar-in{position:relative;padding:18px 18px 16px}
.ckb-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border:0;background:transparent;
  color:var(--muted);font-size:20px;line-height:1;cursor:pointer;border-radius:50%}
.ckb-x:hover{background:var(--bg-soft);color:var(--navy)}
.ckb-ttl{display:block;font-family:var(--font-head);font-weight:800;font-size:15px;
  color:var(--navy);margin:0 20px 8px 0;line-height:1.35}
.ckb-txt{font-size:12.5px;line-height:1.55;color:var(--muted);margin:0 0 14px}
.ckb-txt a{color:var(--brand-dark);text-decoration:underline}
.cookiebar-btns{display:flex;gap:8px}
.cookiebar-btns+.cookiebar-btns{margin-top:6px}
.ckb-btn--text{background:none;border:0;color:var(--muted);font-weight:600;
  text-decoration:underline;padding:6px 0 0}
.ckb-btn--text:hover{color:var(--navy)}
/* kategórie v podrobnom nastavení – nič nie je predznačené */
.ckb-detail{border-top:1px solid var(--line);margin:0 0 12px}
.ckb-kat{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.ckb-kat b{display:block;font-size:12.5px;color:var(--navy)}
.ckb-kat small{display:block;font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:1px}
.ckb-kat input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--brand-dark)}
/* plávajúce tlačidlo na opätovné otvorenie lišty */
.ckb-znovu{position:fixed;left:14px;bottom:14px;z-index:8990;background:#fff;
  border:1px solid var(--line);border-radius:999px;padding:7px 13px;
  font:600 12px/1 var(--font);color:var(--muted);cursor:pointer;
  box-shadow:var(--shadow-sm)}
.ckb-znovu:hover{color:var(--navy);border-color:#cdd9e6}
.ckb-znovu[hidden]{display:none}
.ckb-btn{flex:1;padding:9px 10px;border-radius:999px;font-size:11.5px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;cursor:pointer;white-space:nowrap;min-height:36px}
.ckb-btn--plny{background:var(--brand-dark);border:1.5px solid var(--brand-dark);color:#fff}
.ckb-btn--plny:hover{background:var(--brand-darker);border-color:var(--brand-darker)}
.ckb-btn--obrys{background:#fff;border:1.5px solid var(--navy);color:var(--navy)}
.ckb-btn--obrys:hover{background:var(--bg-tint)}
@media(max-width:620px){.cookiebar{left:12px;right:12px;bottom:12px;width:auto}}

/* Blok, ktorý zastupuje mapu, kým používateľ neodsúhlasí cookies tretích strán */
.consent-ph{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;height:100%;min-height:300px;padding:28px;text-align:center;background:var(--bg-soft)}
.consent-ph p{font-size:14px;color:var(--muted);margin:0;max-width:340px;line-height:1.6}

/* Kanonický bežný text – jednotný na celom webe (žiadne inline štýly odstavcov) */
.prose{max-width:720px}
.prose p{font-size:16px;line-height:1.7;color:var(--ink);margin:0 0 14px}
.prose p:last-child{margin-bottom:0}
.muted{color:var(--muted)}
.small{font-size:14px}
.tiny{font-size:12.5px}
.eyebrow{
  display:inline-block;font-size:var(--t-label-lg);font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;color:var(--brand-dark);margin-bottom:12px;
}
.section-navy .eyebrow{color:#7FD3E2}
.section-head{max-width:720px;margin-bottom:28px}
.section-head .lead{margin-top:8px}
.section-head.center{margin-left:auto;margin-right:auto}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  font-family:var(--font);font-size:15px;font-weight:600;cursor:pointer;
  padding:12px 20px;border-radius:var(--radius-sm);border:1.5px solid transparent;
  transition:.15s;text-decoration:none;white-space:nowrap;
}
/* na úzkych mobiloch nechaj dlhé texty tlačidiel zalomiť — inak pretečú viewport */
@media(max-width:480px){
  .btn{white-space:normal;text-align:center;max-width:100%}
}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--brand-dark);color:#fff;border-color:var(--brand-dark)}
.btn-primary:hover{background:var(--brand-darker);border-color:var(--brand-darker)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{filter:brightness(.93)}
.btn-ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand-dark)}
.btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.28)}
.btn-light:hover{background:rgba(255,255,255,.2)}
.btn-lg{padding:15px 28px;font-size:16px}
.btn-sm{padding:8px 14px;font-size:13.5px}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- Header / Nav ---------- */
.topbar{background:var(--navy);color:#cdd9e6;font-size:13px}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{color:#cdd9e6}
.topbar a:hover{color:#fff;text-decoration:none}
.topbar-links{display:flex;gap:18px}

.nav{
  position:fixed;top:0;left:0;right:0;z-index:1100;background:rgba(255,255,255,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
  transition:background .28s ease,box-shadow .28s ease,border-color .28s ease;
}
.nav.scrolled{box-shadow:0 6px 24px -12px rgba(12,43,51,.22)}
/* Hlavička má vlastnú, širšiu šírku než obsah. Je to bežný a zaužívaný
   postup: obsah sa drží úzko kvôli dĺžke riadku pri čítaní, navigácia
   ale text nečíta a so siedmimi položkami by v 1264 px zostávalo len
   38 px rezervy – pri dlhšom preklade alebo priblížení by sa zalomila. */
.nav .container{max-width:1420px;display:flex;align-items:center;gap:26px;height:70px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;color:var(--navy);
  font-size:17px;letter-spacing:-.01em}
.logo:hover{text-decoration:none}
.logo-mark{width:30px;height:30px;border-radius:4px;background:var(--brand);
  display:flex;align-items:flex-end;justify-content:center;gap:2.5px;padding:6px}
.logo-mark span{width:4px;background:#fff;border-radius:2px;display:block}
.logo-mark span:nth-child(1){height:8px}
.logo-mark span:nth-child(2){height:14px}
.logo-mark span:nth-child(3){height:11px}
/* Produkční SVG logo (z OvD-dev brand) */
.logo-img{height:28px;width:auto;display:block}
.footer .logo .logo-img{filter:brightness(0) invert(1)}  /* bílé na tmavém footeru */
.nav-links{display:flex;gap:4px;margin-left:8px}
.nav-links a{
  color:var(--ink);font-size:14.5px;font-weight:600;padding:8px 11px;border-radius:4px;white-space:nowrap;
}
.nav-links a:hover{background:var(--bg-soft);text-decoration:none;color:var(--brand-dark)}
.nav-links a.active{color:var(--brand-dark)}
/* Bez transformu. Obe skupiny tu mali transform:translateY(0px) ako
   ovládač na doladenie zvislej polohy. Nulová hodnota nerobila nič, ale
   transform robí z prvku vzťažný rámec pre absolútne pozicované potomky
   – a rozbalené vyhľadávanie na mobile sa tým prestalo držať šírky okna
   a vybiehalo von. Zvislú polohu rieši align-items:center. */
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px}
.nav-search{
  display:flex;align-items:center;gap:7px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:4px;padding:8px 12px;font-size:13.5px;
  color:var(--muted);min-width:170px;
}
.nav-search input{border:0;background:transparent;font-family:var(--font);font-size:13.5px;
  outline:none;width:100%;color:var(--ink)}
/* flex + gap (nie margin) = deterministické. gap 6px → rozteč 8px (sudá) =
   na HiDPI (DPR 1.25/1.5/2) padajú všetky 3 čiary na rovnaký sub-pixel = rovnako hrubé */
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;
  gap:6px;width:40px;height:40px;background:none;border:0;cursor:pointer;padding:0}
.burger span{display:block;width:22px;height:2px;background:var(--navy);border-radius:2px;
  transition:transform .32s cubic-bezier(.4,0,.2,1),opacity .2s ease,background .28s}
/* hamburger → X morf riadený stavom otvoreného menu (.nav.open) — rozteč 8px → translateY 8 */
.nav.open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0;transform:scaleX(.4)}
.nav.open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
@media (prefers-reduced-motion: reduce){.burger span{transition:opacity .2s ease,background .28s}}

/* aktívna položka v menu – jemné podčiarknutie */
.nav-links a.active{color:var(--brand-dark);font-weight:700;position:relative}
.nav-links a.active::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;border-radius:2px;background:var(--brand)}


/* === Transparentná nav nad hero (homepage) → plné sklo po odscrollovaní === */
.nav--transparent{background:transparent;border-bottom-color:transparent;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.nav--transparent .logo{color:#fff}
.nav--transparent .logo-img{filter:brightness(0) invert(1)}
.nav--transparent .nav-links a{color:rgba(255,255,255,.88)}
.nav--transparent .nav-links a:hover{color:#fff;background:rgba(255,255,255,.12)}
.nav--transparent .nav-links a.active{color:#fff}
.nav--transparent .nav-links a.active::after{background:#fff}
.nav--transparent .nav-search{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25)}
.nav--transparent .nav-search input{color:#fff}
.nav--transparent .nav-search input::placeholder{color:rgba(255,255,255,.6)}
.nav--transparent .nav-search .ms,.nav--transparent .nav-search [data-ic]{color:rgba(255,255,255,.8)}
.nav--transparent .burger span{background:#fff}
/* otvorené mobilné menu má biele pozadie → odkazy späť tmavé aj v transparentnom stave */
.nav.open .nav-links a{color:var(--ink)}
.nav.open .nav-links a:hover{color:var(--brand-dark)}
.nav.open .nav-links a.active{color:var(--brand-dark)}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(170deg,#F4F8FD 0%,#EAF1F9 60%,#FFFFFF 100%);
  border-bottom:1px solid var(--line)}
.hero .container{padding-top:64px;padding-bottom:64px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:46px}
/* Perex pod H1: jeden odstup na všetkých hero pásoch webu. 16. 9. 2026 mal
   perex mimo domova margin 0 a lepil sa na nadpis (hlási validate-sadzba). */
.hero .lead,.hero-listing .lead,.ikz-hero .lead{margin-top:18px}

/* ---------- Cards ---------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-sm);
}
.card-pad{padding:28px}
.card-hover{transition:.16s}
.card-hover:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#cdd9e6}
.card h3{margin-bottom:8px}
.card-icon{
  width:44px;height:44px;border-radius:var(--radius-sm);background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:14px;
  transition:background .15s ease,color .15s ease;
}
/* .green/.amber varianty zrušené – barva ikony nenesla datový význam.
   Jednotná značková modrá, na hover plná (bílá ikona na brand). */
.card-icon.green,.card-icon.amber{background:var(--brand-soft);color:var(--brand-dark)}
.card-hover:hover .card-icon,a.card:hover .card-icon{background:var(--brand-dark);color:#fff}
.card.center .card-icon{margin-left:auto;margin-right:auto}
/* Kanonický textový odkaz „… →" (jednotný na celom webe) */
.card-link{font-weight:700;font-size:14.5px;display:inline-flex;align-items:center;margin-top:8px;
  color:var(--brand-dark);text-decoration:none;transition:color .15s}
.card-link:hover{color:var(--brand);text-decoration:none}
/* na tmavom podklade (glass/navy) je odkaz biely */
.hero-dark .card-link,.section-navy .card-link,.card-glass .card-link,.story-ov-more{color:#fff}
/* jednotná šípka, ktorá sa na hover odsunie (prebrané z tematických analýz) */
.card-link::after,.story-more::after,.story-ov-more::after{content:"→";display:inline-block;margin-left:5px;transition:transform .18s ease}
.card-link:hover::after,.story-card:hover .story-more::after,.story-ov:hover .story-ov-more::after,
.card-link:hover .story-arrow,.story-ov:hover .story-arrow{transform:translateX(4px)}

/* ---------- Pills / badges / tags ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
  padding:4px 10px;border-radius:999px;background:var(--bg-tint);color:var(--navy-2);
}
.pill-brand{background:var(--brand-soft);color:var(--brand-dark)}
.tag{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-dark)}

/* ---------- Stats ----------
   Pás veľkých čísel má jediný modul: .hero-stats (definícia pri hero).
   Sklenené .stats--glass a biele .stat karty zjednotené 11. 9. 2026 (bod 25). */
/* Jedno veľké číslo v bielej karte (roky na o-projektu, čísla v blogu) –
   NIE je to pás, tie rieši .hero-stats. */
.stat-num{font-family:var(--font-head);font-size:30px;font-weight:800;color:var(--navy);line-height:1}
.stat-num--brand{color:var(--brand-dark)}

/* Karty datasetov (pre-média): tlačidlá XLSX/CSV vždy pri spodnej hrane –
   dvojriadkový titulok ich inak posúval a rad kariet vyzeral rozhádzane. */
.karta-datasetu{display:flex;flex-direction:column}
.karta-datasetu .btn-row{margin-top:auto;padding-top:14px}
.karta-datasetu p{margin-bottom:0!important}

/* ---------- Audience cards ---------- */
.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.audience-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow-sm);
}
.audience-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.audience-card .ac-ico{width:46px;height:46px;border-radius:var(--radius-sm);background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;margin-bottom:18px;
  transition:background .15s ease,color .15s ease}
.audience-card:hover .ac-ico{background:var(--brand);color:#fff}
.audience-card h3{font-size:20px;color:var(--navy);margin:0 0 10px}
.audience-card .ac-desc{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0 0 22px}
.ac-checks{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-direction:column;gap:11px;flex:1}
.ac-checks li{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--ink)}
.ac-checks .ac-chk{color:var(--accent);flex:none;display:flex;margin-top:1px}
.audience-card .btn{margin-top:auto}
/* zvýraznená stredná karta (samosprávy) – navy */
.audience-card.featured{background:var(--navy-gradient);border-color:var(--navy);color:#fff;
  box-shadow:0 20px 44px -20px rgba(12,43,51,.55)}
.audience-card.featured h3{color:#fff}
.audience-card.featured .ac-desc{color:rgba(255,255,255,.72)}
.audience-card.featured .ac-ico{background:rgba(255,255,255,.12);color:#fff}
.audience-card.featured .ac-checks li{color:rgba(255,255,255,.86)}
/* fajfky na tmavej featured karte – rovnaká svetlá zelená ako .card-navy,
   tmavá var(--accent) na navy zanikala (16. 9. 2026) */
.audience-card.featured .ac-chk{color:#9EE07F}
.audience-card.featured .ac-chk .ic{stroke-width:3}
.audience-card.featured .btn{background:#fff;color:var(--navy);border-color:#fff}
.audience-card.featured .btn:hover{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--navy)}
@media(max-width:880px){.audience{grid-template-columns:1fr}}

/* ---------- Audience v2: horizontálne riadky (alternatívny prístup) ---------- */
.aud2{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden}
.aud2-row{display:flex;align-items:center;gap:24px;padding:24px 30px;border-bottom:1px solid var(--line);
  text-decoration:none;transition:background .15s}
.aud2-row:last-child{border-bottom:0}
.aud2-row:hover{background:var(--bg-soft)}
.aud2-ico{width:52px;height:52px;border-radius:var(--radius-sm);background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;flex:none;
  transition:background .15s ease,color .15s ease}
.aud2-row:hover .aud2-ico{background:var(--brand);color:#fff}
.aud2-main{flex:1;min-width:0}
.aud2-main h3{font-size:19px;color:var(--navy);margin:0 0 4px}
.aud2-main p{font-size:14.5px;color:var(--muted);margin:0;line-height:1.5}
.aud2-link{flex:none;white-space:nowrap;margin-top:0}
@media(max-width:760px){.aud2-row{flex-wrap:wrap;gap:14px}}

/* blokové/kartové odkazy sa na hover NEpodčiarkujú (afordancia = pozadie + posun šípky) */
.story-card:hover,.story-ov:hover,.release-card:hover,.audience-card:hover,.aud2-row:hover,
.aud3-card:hover,.tcard:hover,.card-hover:hover,a.card:hover,.logo:hover,
.vidref:hover,.vidref:hover *{text-decoration:none}

/* ---------- Audience v3: čisté farebné karty ---------- */
.aud3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:stretch}
.aud3-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;
  box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.aud3-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.aud3-ico{width:50px;height:50px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  margin-bottom:18px;background:var(--brand-soft);color:var(--brand-dark);transition:background .15s ease,color .15s ease}
/* .c-green/.c-amber zrušené – dekorativní barva bez datového významu */
.aud3-card:hover .aud3-ico{background:var(--brand);color:#fff}
.aud3-card h3{font-size:20px;color:var(--navy);margin:0 0 10px}
.aud3-card p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0 0 20px;flex:1}
@media(max-width:880px){.aud3{grid-template-columns:1fr}}

/* ---------- Prečo my: 3-krokový proces + CityBrain ---------- */
.proces{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.proces-step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);overflow:hidden;transition:transform .2s ease,box-shadow .2s ease}
.proces-step:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.proces-ico{position:relative;z-index:1;width:48px;height:48px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;
  margin-bottom:16px;background:var(--brand-soft);color:var(--brand-dark);transition:background .15s ease,color .15s ease}
/* .s-amber/.s-green zrušené – dekorativní barva bez datového významu */
.proces-step:hover .proces-ico{background:var(--brand);color:#fff}
.proces-step h3{position:relative;z-index:1;font-size:19px;color:var(--navy);margin:0 0 10px}
.proces-step p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}
@media(max-width:880px){.proces{grid-template-columns:1fr}}
.citybrain{margin-top:26px;display:flex;align-items:center;gap:22px;border-radius:var(--radius);padding:26px 30px;color:#fff;
  background:radial-gradient(130% 130% at 85% -20%,#14424E 0%,var(--navy) 60%);box-shadow:0 18px 40px -20px rgba(12,43,51,.5)}
.citybrain-ico{width:52px;height:52px;border-radius:12px;background:rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;flex:none}
.citybrain-txt h3{color:#fff;font-size:18px;margin:0 0 4px}
.citybrain-txt p{color:rgba(255,255,255,.78);font-size:14.5px;line-height:1.55;margin:0}
@media(max-width:560px){.citybrain{flex-direction:column;align-items:flex-start}}

/* Prečo my v4: jeden panel rozdelený do 3 stĺpcov (Stripe/Linear štýl) */
.flow{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden;margin-top:6px}
.flow-step{position:relative;padding:36px 32px 32px;border-right:1px solid var(--line);transition:background .2s ease}
.flow-step:last-child{border-right:0}
.flow-step:hover{background:var(--bg-soft)}
.flow-num{position:absolute;top:18px;right:24px;font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.06em;
  color:var(--muted-2)}
.flow-step.s-teal .flow-num{color:#0E9B9B}
.flow-step.s-green .flow-num{color:var(--accent)}
.flow-step .flow-num.s-brand{color:var(--brand-dark)}
.flow-link,.flow-node{display:none}
@media(max-width:760px){
  .flow{grid-template-columns:1fr}
  .flow-step{border-right:0;border-bottom:1px solid var(--line)}
  .flow-step:last-child{border-bottom:0}
}
/* postupný nábeh uzlov 1→2→3 */
.flow-step:nth-child(1) .flow-node{animation-delay:.05s}
.flow-step:nth-child(2) .flow-node{animation-delay:.2s}
.flow-step:nth-child(3) .flow-node{animation-delay:.35s}
@keyframes nodePop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
/* hover: uzol aj ikona ožijú */
.flow-step:hover .flow-node{transform:scale(1.08)}
/* putujúci bod po linke = „prúdiace dáta" */
.flow-card{display:contents}  /* prepáľané: stará karta — necháme len ako wrapper bez vplyvu */
.flow-ico{width:46px;height:46px;border-radius:var(--radius-sm);margin:0 0 18px;background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s ease,color .15s ease}
/* .s-teal / .s-green zrušené – barva tady nenesla žádný datový význam,
   byla čistě dekorativní (viz pravidlo v CLAUDE.md) */
.flow-step:hover .flow-ico{background:var(--brand);color:#fff}
.flow-step h3{font-size:18px;color:var(--navy);margin:0 0 8px}
.flow-step p{font-size:14.5px;color:var(--muted);line-height:1.55;margin:0}

/* ---------- Video reference (kompaktný riadok) ---------- */
.vidref{display:grid;grid-template-columns:280px 1fr auto;gap:24px;align-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-radius:var(--radius);padding:18px;margin-bottom:26px}
.vidref-thumb{position:relative;height:140px;border-radius:7px;overflow:hidden;
  background:linear-gradient(135deg,#14424E,var(--navy));display:flex;align-items:center;justify-content:center}
.vidref-thumb .play-btn{width:54px;height:54px;border-radius:50%;background:#fff;color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:20px;box-shadow:0 6px 18px rgba(0,0,0,.4);transition:transform .2s ease}
.vidref:hover .vidref-thumb .play-btn{transform:scale(1.08)}
.vidref-time{position:absolute;left:10px;bottom:10px;background:rgba(0,0,0,.55);color:#fff;font-size:11.5px;font-weight:600;padding:3px 8px;border-radius:3px}
.vidref-txt .eyebrow{color:rgba(255,255,255,.65)}
.vidref-txt h3{color:#fff;font-size:17px;margin:6px 0 6px}
.vidref-txt p{color:rgba(255,255,255,.78);font-size:14px;line-height:1.5;margin:0}
@media(max-width:760px){.vidref{grid-template-columns:1fr}}

/* ---------- Testimoniály (asymetria: 1 featured + 2 menšie) ---------- */








.testi-meta{display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1)}
.testi-ava{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--brand),#0D3F88);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:14.5px;flex:none}

.testi-info{font-size:13.5px;line-height:1.35}

.testi-info strong{color:#fff;display:block;font-weight:700}
.testi-info span{color:rgba(255,255,255,.6)}
/* Pätka so sociálnou metrikou */




/* ---------- Záverečné CTA (navy, glow-free) ---------- */
.cta-final{position:relative;overflow:hidden;border-radius:var(--radius);padding:60px 50px;
  background:var(--navy-gradient);color:#fff;
  display:grid;grid-template-columns:1.4fr auto;gap:40px;align-items:center}
/* mestská fotka v pozadí, silne stmavená — pre konzistenciu s hero */
.cta-final::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("hero-bratislava.jpg");background-size:cover;background-position:center 45%;
}
/* odberový blok má vlastnú fotku – na Pre médiá stál hrad dvakrát pod sebou */
.cta-final--odber::before{background-image:url("hero-spis.jpg");background-position:center 55%;
  opacity:1}
/* gradient overlay: vľavo plne tmavé (čitateľný text), vpravo prepúšťa fotku */
.cta-final::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(9,36,46,.95) 0%, rgba(9,36,46,.85) 5%, rgba(9,36,46,0) 24%),
    linear-gradient(100deg, rgba(9,36,46,.88) 0%, rgba(9,36,46,.66) 42%, rgba(9,36,46,.14) 100%)}
.cta-final > *{position:relative;z-index:1}
.cta-final-eyebrow{display:block;font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.62);margin-bottom:10px;position:relative;z-index:1}
.cta-final h2{color:#fff;font-size:clamp(24px,2.6vw,34px);line-height:1.2;margin:0 0 12px;max-width:620px;position:relative;z-index:1}
.cta-final p{color:rgba(255,255,255,.78);font-size:16.5px;line-height:1.55;margin:0;max-width:560px;position:relative;z-index:1}
.cta-final-actions{display:flex;gap:12px;flex-wrap:wrap;position:relative;z-index:1;justify-content:flex-end}
.cta-final .btn-primary{background:#fff;color:var(--navy);border-color:#fff}
.cta-final .btn-primary:hover{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--navy)}
.cta-final .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.cta-final .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
@media(max-width:760px){.cta-final{grid-template-columns:1fr;padding:42px 30px;text-align:left}
  .cta-final-actions{justify-content:flex-start}}

/* ---------- FAQ v4 (zoznam otázok vľavo + panel s odpoveďou vpravo, vzor rs) ---------- */
.fqx{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:22px;align-items:start}
.fqx-list{display:flex;flex-direction:column;gap:6px}
.fqx-q{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:none;
  border:1px solid transparent;border-radius:var(--radius);padding:12px 16px;cursor:pointer;
  font-family:var(--font);font-size:14.5px;font-weight:600;color:var(--navy);line-height:1.35;
  transition:background .15s,border-color .15s}
.fqx-q:hover{background:var(--bg-soft)}
.fqx-q.active{background:var(--brand-soft);border-color:var(--brand)}
.fqx-ic{flex:none;width:36px;height:36px;border-radius:var(--radius-sm);background:var(--bg-soft);
  display:flex;align-items:center;justify-content:center;font-size:17px;color:var(--navy)}
.fqx-q.active .fqx-ic{background:#fff}
.fqx-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 30px}
.fqx-a{display:none}
.fqx-a.active{display:block}
.fqx-a-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fqx-a-head h3{margin:0;font-size:19px;line-height:1.3}
.fqx-a p{margin:0;color:var(--muted);font-size:15px;line-height:1.68}
@media(max-width:820px){.fqx{grid-template-columns:1fr}}
@media(max-width:760px){.flow{grid-template-columns:1fr;gap:30px}.flow::before{display:none}}
.sc-xl{width:128px;height:128px}
.s-high{background:var(--sc-hi)}
.s-mid{background:var(--sc-mid)}
.s-low{background:var(--sc-lo)}

/* ============ Profil mesta — full-bleed navy hero pás (zhodný s homepage/IKŽ) ============ */
.obec-hero-band{position:relative;overflow:hidden;background:var(--navy-gradient);color:#fff;
  padding:36px 0 44px}
.obec-hero-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("hero-bratislava.jpg");background-size:cover;background-position:center 45%;
  opacity:1}
/* Overlay ve třech vrstvách. Fotky měst jsou různě světlé (obloha, sníh, beton),
   takže samotný diagonální gradient nestačí – text by se na světlé fotce ztratil.
   1. plošné ztmavení dá jistotu bez ohledu na fotku (16. 9. 2026 zesíleno
      z 10 na 18 %, Skalica měla pod perexem 4,3:1 při limitu 4,5)
   2. diagonála drží levou půlku, kde leží nadpis a KPI, ještě tmavší
   3. spodní pás váže hero na obsah pod ním */
.obec-hero-band::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(9,36,46,.95) 0%, rgba(9,36,46,.88) 6%, rgba(9,36,46,0) 26%),
    linear-gradient(100deg, rgba(9,36,46,.9) 0%, rgba(9,36,46,.72) 46%, rgba(9,36,46,.16) 100%),
    linear-gradient(rgba(9,36,46,.18), rgba(9,36,46,.18))}
.obec-hero-band > .container{position:relative;z-index:1}
.obec-hero-band .crumbs-hero{margin-bottom:20px}
.obec-hero-top{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:32px;align-items:stretch}
.obec-hero-textcol{display:flex;flex-direction:column;justify-content:center;min-width:0}
.obec-hero-tag{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.obec-hero-tag h1{font-size:clamp(34px,4vw,46px);line-height:1.05;margin:0;color:#fff}
.obec-hero-pill{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.2)}
.obec-hero-band .lead{font-size:16.5px;line-height:1.5;color:rgba(255,255,255,.82);max-width:780px;margin:18px 0 22px}
/* 4 KPI v rade s extra info pod hodnotou — biele na navy */
.obec-hero-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:20px 0 0;
  border-top:1px solid rgba(255,255,255,.16)}
.obec-hero-kpis .kpi-label{display:block;font-size:var(--t-label);text-transform:uppercase;
  letter-spacing:.05em;font-weight:700;color:rgba(255,255,255,.62);margin-bottom:8px}
.obec-hero-kpis .kpi-val{display:flex;align-items:baseline;gap:8px}
.obec-hero-kpis .kpi-val .big{font-family:var(--font-head);font-size:30px;font-weight:800;color:#fff;line-height:1}
.obec-hero-kpis .kpi-val .kpi-meta{font-size:12.5px;color:rgba(255,255,255,.7);font-weight:500}
.obec-hero-kpis .kpi-extra{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:8px;line-height:1.4}
.obec-hero-kpis .kpi-extra.muted{color:rgba(255,255,255,.55)}
.obec-hero-kpis .bar-track.sm{height:4px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden;margin-top:10px}
.obec-hero-kpis .bar-track.sm .bar-fill{height:100%;border-radius:999px}
/* mini mapa karta vpravo — glass (na navy páse) */
.obec-hero-mapcard{color:#fff;border-radius:var(--radius);padding:20px 20px 18px;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55);text-decoration:none;cursor:pointer;
  transition:transform .22s,border-color .22s}
.obec-hero-mapcard:hover{text-decoration:none;transform:translateY(-2px);border-color:rgba(255,255,255,.32)}
/* Tá istá karta mimo tmavého hero (stránka obce): glass podklad by na
   bielej zmizol, preto plná navy. Všetko ostatné zostáva zhodné. */
.obec-hero-mapcard--solid{background:var(--navy-gradient);border-color:transparent;position:relative;overflow:hidden;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:var(--shadow-sm)}
.obec-hero-mapcard--solid:hover{border-color:transparent;box-shadow:var(--shadow)}
.obec-hero-mapcard--solid::after{content:"";position:absolute;inset:0;background:var(--navy-glow);pointer-events:none}
.obec-hero-mapcard--solid>*{position:relative;z-index:1}
/* "Poloha v SR" – tučne, na strede */
.obec-hero-mapcard .kpi-label{color:#fff;position:relative;z-index:1;margin-bottom:0;
  font-weight:800;text-align:center;display:block}
.obec-hero-mapcard .obec-loc{position:relative;z-index:1;width:100%;aspect-ratio:1.62/1;
  background:transparent;border:0;border-radius:0;overflow:visible}
.obec-hero-mapcard .obec-loc .leaflet-container{background:transparent;font:inherit}
/* zvýraznený okres mesta – glow efekt */
.obec-hero-mapcard .obec-loc .leaflet-interactive[stroke="#14424E"]{
  filter:drop-shadow(0 0 8px rgba(255,255,255,.55))}
/* zvýraznený polygon = aktuálny okres, drží svoju (score) farbu */
.obec-hero-mapcaption{font-size:12.5px;color:rgba(255,255,255,.78);text-align:center;
  font-weight:600;margin-top:auto;padding-top:2px;position:relative;z-index:1;line-height:1.4}
.obec-hero-mapcaption strong{display:block;color:#fff;font-size:13.5px;margin-top:2px;letter-spacing:.01em}
/* Tu stála druhá kópia pravidiel pre .kpi-label a .kpi-val, zdedená
   z čias, keď KPI blok stál na bielej karte. Selektor .obec-hero-kpis
   .kpi-label bol rovnako špecifický ako ten správny o 30 riadkov vyššie,
   len neskôr v súbore – vyhrával teda tmavosivý --muted-2 a popisky
   „IKŽ SKÓRE“, „PORADIE V SR“ boli na navy hero prakticky nečitateľné
   (1,7:1). Bloky .kpi-val boli mŕtve: hero má vlastné, špecifickejšie. */
/* navy panel "Prehľad" */
.obec-hero-side{background:var(--navy-gradient);color:#fff;border-radius:var(--radius);padding:22px;
  display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.obec-hero-side::before{content:"";position:absolute;top:-40px;right:-40px;width:200px;height:200px;
  background:var(--navy-glow);pointer-events:none}
.hero-side-eyebrow{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,.62);position:relative;z-index:1}
.obec-hero-side h3{color:#fff;font-size:17px;line-height:1.4;margin:0;font-weight:700;position:relative;z-index:1}
.obec-hero-side p{color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.55;margin:0;position:relative;z-index:1}
.hero-side-loc{flex:1;display:flex;align-items:center;justify-content:center;position:relative;z-index:1;
  min-height:80px;margin:6px -6px}
.hero-side-loc .obec-loc{width:100%;aspect-ratio:1.62/1;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.1);border-radius:8px;overflow:hidden}
.hero-side-loc .obec-loc .leaflet-container{background:transparent}
.hero-side-loc .obec-loc svg path{fill:rgba(255,255,255,.08);stroke:rgba(255,255,255,.18)}
.obec-hero-side .btn-light{background:#fff;color:var(--navy);border:0;position:relative;z-index:1;justify-content:center}
.obec-hero-side .btn-light:hover{background:var(--brand-soft);color:var(--navy)}

/* 3 bento karty pilierov */
/* overflow-x:clip zachytí skryté nowrap tooltipy tečiek pri okraji (žiadny sticky vnútri) */
.obec-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;overflow-x:clip}
.bento-pilier{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;
  transition:.18s ease;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit}
.bento-pilier:hover{transform:translateY(-2px);box-shadow:0 14px 32px -18px rgba(12,43,51,.4);border-color:var(--brand)}
/* top: nadpis vľavo (väčší, v farbě piliera), váha pill vpravo */
.bp-top{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:flex-start;gap:14px}
.bento-pilier h4{line-height:1.15;margin:0;letter-spacing:-0.01em}
.bp-weight{font-size:11px;font-weight:700;background:var(--bg-tint);padding:4px 9px;border-radius:var(--radius-sm);color:var(--muted);white-space:nowrap}
.bp-meta-top{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.bp-rank{font-size:var(--t-label);color:var(--muted-2);font-weight:700;letter-spacing:.05em;text-transform:uppercase}
.bento-pilier h4{font-size:15.5px;margin:0 0 6px;color:var(--navy);line-height:1.3;font-weight:700}
.bp-score{font-size:28px;font-weight:800;font-family:var(--font-head);line-height:1}
.bp-score span{font-size:12px;font-weight:500;color:var(--muted);margin-left:8px;font-family:var(--font);display:block;margin-top:3px}
/* dvojica KPI v bento — rovnaký vizuálny jazyk ako hero KPI */
.bp-kpis{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding-top:6px;border-top:1px solid var(--line);padding-top:14px}
.bp-kpi-l{display:block;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.05em;
  font-weight:700;color:var(--muted-2);margin-bottom:8px}
.bp-kpi-v{display:flex;align-items:baseline;gap:6px}
.bp-kpi-big{font-family:var(--font-head);font-size:28px;font-weight:800;color:var(--navy);line-height:1}
.bp-kpi-meta{font-size:12px;color:var(--muted);font-weight:500}
/* cieľový riadok tabuľky po kliknutí na tečku — flash highlight */
.idx-row{scroll-margin-top:90px}
.idx-row:target{animation:idxRowFlash 1.6s ease-out}
@keyframes idxRowFlash{
  0%,30%{background:color-mix(in srgb, var(--brand) 18%, transparent)}
  100%{background:transparent}
}
@media (prefers-reduced-motion: reduce){
  .idx-row:target{animation:none;background:color-mix(in srgb, var(--brand) 12%, transparent)}
}
/* rozsah min–max — len šípka + názov + skóre (klikateľné, scrollne do tabuľky) */
.bp-range{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.bp-range-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
  gap:10px;font-size:13px;text-decoration:none;padding:6px 8px;margin:0 -8px;border-radius:6px;
  transition:background .15s}
.bp-range-row:hover{background:var(--bg-soft);text-decoration:none}
.bp-range-arrow{font-size:18px;display:inline-flex;align-items:center;line-height:1}
.bp-range-arrow .ms{font-size:18px}
.bp-range-n{color:var(--navy);font-weight:600;font-size:13px;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-range-v{font-weight:800;font-variant-numeric:tabular-nums;font-size:15px}
.bp-sub-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:12.5px;color:var(--navy);margin-bottom:5px}
.bp-sub-head span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-sub-head b{font-variant-numeric:tabular-nums;color:var(--muted)}

@media(max-width:980px){
  .obec-hero-v2{grid-template-columns:1fr}
  /* v3 hero — mapa pod textom, nie vedľa (inak sa stláča a prekrýva) */
  .obec-hero-top{grid-template-columns:1fr;gap:24px}
  .obec-hero-mapcard{max-width:420px}
  .obec-hero-kpis{gap:28px}
  .obec-bento{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* 4 KPI do mriežky 2×2 na úzkych mobiloch */
  .obec-hero-kpis{grid-template-columns:1fr 1fr;gap:20px 18px}
  .obec-hero-band{padding:24px 0 28px}
  /* mapa karta — menší padding a širší pomer boxu (SR je široká),
     aby mapa vyplnila priestor namiesto navy prázdnoty */
  .obec-hero-mapcard{max-width:none;padding:16px 14px 14px;gap:10px}
  .obec-hero-mapcard .obec-loc{aspect-ratio:2.1/1}
}

/* === animácie načítania === */
@keyframes obecFadeUp{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes obecDotPop{
  from{opacity:0;transform:translate(-50%,-50%) scale(0)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}
@keyframes obecBarGrow{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
/* karty score+bento jednotlivo, stagger */
.bento-pilier:nth-child(1){animation-delay:.07s}
.bento-pilier:nth-child(2){animation-delay:.14s}
.bento-pilier:nth-child(3){animation-delay:.21s}
/* hero KPI bar fill animuje šírku */
.obec-hero-kpis .bar-track.sm .bar-fill{transform-origin:left;
  animation:obecBarGrow .8s cubic-bezier(.22,.61,.36,1) .15s both}
/* mini distribučná track tečky majú custom stagger cez --i */

/* respektovať prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .bento-pilier,.bp-dot,.obec-hero-kpis .bar-track.sm .bar-fill{animation:none}
  .bento-pilier:hover{transform:none}
}

/* === Silné stránky / Rezervy — TOP-5 zoznam na navy gradient === */
.ss-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ss-col{background:var(--navy-gradient);border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);padding:26px 22px 18px;color:#fff;
  display:flex;flex-direction:column;gap:18px;transition:.18s}
.ss-col{position:relative;overflow:hidden}
.ss-col::after{content:"";position:absolute;inset:0;background:var(--navy-glow);pointer-events:none}
.ss-col>*{position:relative;z-index:1}
.ss-col:hover{box-shadow:0 20px 44px -24px rgba(0,0,0,.55);transform:translateY(-2px)}
.ss-head{padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.ss-head h3{font-family:var(--font-head);font-size:22px;margin:0 0 4px;color:#fff;
  font-weight:700;letter-spacing:-.01em}
.ss-head p{font-size:13px;color:rgba(255,255,255,.78);margin:0;line-height:1.45}
.ss-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ss-row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:16px;
  padding:14px 12px;border-radius:9px;text-decoration:none;color:inherit;
  transition:background .18s,transform .18s}
.ss-row:hover{background:rgba(255,255,255,.06);text-decoration:none;transform:translateX(2px)}
.ss-pos{font-family:var(--font-head);font-size:30px;font-weight:700;
  color:rgba(255,255,255,.55);line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.ss-row:hover .ss-pos{color:#fff}
.ss-body{display:flex;flex-direction:column;gap:6px;min-width:0}
.ss-name{font-size:15px;font-weight:700;color:#fff;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-meta{font-size:12.5px;color:rgba(255,255,255,.75);font-variant-numeric:tabular-nums}
.ss-bar{display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.16);
  overflow:hidden;margin-top:2px}
.ss-bar i{display:block;height:100%;border-radius:999px;transition:width .6s ease}
.ss-score{font-family:var(--font-head);font-size:28px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.ss-score small{font-size:11px;font-weight:500;color:rgba(255,255,255,.7);
  margin-left:3px;font-family:var(--font)}
@media(max-width:880px){.ss-grid{grid-template-columns:1fr}
  .ss-name{white-space:normal}}

/* Stitch-style tabuľka 29 indexov */
/* === Stack of expandable index blocks (Kompletný rozbor 29 indexov) === */
.idx-stack{display:flex;flex-direction:column;gap:28px}
.idx-pil-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.idx-pil-head{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;background:var(--navy-gradient);color:#fff;position:relative;overflow:hidden}
.idx-pil-head::after{content:"";position:absolute;inset:0;
  background:var(--navy-glow);
  pointer-events:none}
.idx-pil-head>*{position:relative;z-index:1}
.idx-pil-head-l{display:flex;align-items:center;gap:14px;min-width:0}
.idx-pil-ic{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.12);
  display:inline-flex;align-items:center;justify-content:center;color:#fff;flex:0 0 auto}
.idx-pil-ic .ic{width:18px;height:18px}
.idx-pil-ic .ms{font-size:20px}
.idx-pil-ttl{font-family:var(--font);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;color:#fff;
  letter-spacing:.08em}
.idx-pil-meta{font-size:12px;color:rgba(255,255,255,.78);font-variant-numeric:tabular-nums;
  font-weight:600}
.idx-pil-list{display:flex;flex-direction:column}
.idx-block{border-bottom:1px solid var(--line)}
.idx-block:last-child{border-bottom:0}
.idx-block[open]{background:var(--bg-soft)}
.idx-sum{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;
  padding:0;cursor:pointer;list-style:none;transition:background .15s}
.idx-sum::-webkit-details-marker{display:none}
.idx-sum-name{padding:14px 22px;display:flex;flex-direction:column;justify-content:center;gap:5px;
  min-width:0;transition:background .15s}
.idx-name{font-size:14.5px;font-weight:700;color:var(--navy);line-height:1.3;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.idx-name-meta{display:flex;gap:8px;align-items:center}
.idx-waha{background:var(--bg-tint);color:var(--muted);font-weight:700;padding:2px 8px;
  border-radius:var(--radius-sm);font-size:11px;letter-spacing:.02em;line-height:1.4;
  font-variant-numeric:tabular-nums}
.idx-sum:hover .idx-sum-name{background:var(--bg-soft)}
.idx-block[open] .idx-sum-name{background:var(--bg-soft)}
/* svetlý stat strip vpravo */
.idx-sum-stats{display:flex;align-items:stretch;background:var(--bg-soft);
  border-left:1px solid var(--line)}
.idx-stat{padding:10px 18px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;border-right:1px solid var(--line);min-width:90px}
.idx-stat-ring{padding:8px 16px;min-width:auto}
.idx-ring{display:block}
.idx-stat-lbl{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2);line-height:1}
.idx-stat-v{font-family:var(--font-head);font-size:22px;font-weight:700;color:var(--navy);
  line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;margin-top:3px}
.idx-stat-of{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums;
  font-weight:500;line-height:1}
.idx-chev{font-size:14px;color:var(--muted-2);transition:transform .25s,color .15s;
  padding:0 18px;display:inline-flex;align-items:center;justify-content:center;
  border-right:0}
.idx-sum:hover .idx-chev{color:var(--navy)}
.idx-block[open] .idx-chev{transform:rotate(180deg);color:var(--navy)}
.idx-body{padding:22px 24px 26px;background:#fff;border-top:1px solid var(--line);
  animation:idxOpen .25s ease}
@keyframes idxOpen{from{opacity:0;transform:translateY(-2px)}to{opacity:1;transform:translateY(0)}}
.idx-desc-wrap{display:flex;flex-direction:column;gap:6px}
.idx-desc-lbl{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-dark)}
.idx-desc{line-height:1.65;margin:0;max-width:680px}
.idx-waha-ic{width:32px;height:32px;border-radius:7px;background:#fff;color:var(--brand);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.idx-waha-ic .ic{width:18px;height:18px}
.idx-waha-ic .ms{font-size:20px}
.idx-waha-tx{display:flex;flex-direction:column;gap:3px}
@media(max-width:680px){
  .idx-body{grid-template-columns:1fr;gap:16px;padding:18px 14px 20px}
  .idx-sum{grid-template-columns:minmax(0,1fr)}
  .idx-sum-name{padding:12px 14px}
  .idx-sum-stats{padding:0}
  .idx-stat{padding:8px 10px;min-width:auto;flex:1}
  .idx-stat-ring{padding:8px 10px;flex:0 0 auto}
  .idx-stat-v{font-size:17px}
  .idx-chev{padding:0 12px}
}
/* veľmi úzke mobily — rank staty kompaktnejšie: hodnota + "z X" na jednom riadku */
@media(max-width:430px){
  .idx-sum-stats{align-items:center}
  .idx-stat-col{flex-direction:row;flex-wrap:wrap;gap:0 5px;padding:8px 8px;
    align-items:baseline;justify-content:center;text-align:center}
  .idx-stat-col .idx-stat-lbl{flex:0 0 100%;margin-bottom:2px}
  .idx-stat-col .idx-stat-v{font-size:16px;margin-top:0}
  .idx-stat-ring svg{width:40px;height:40px}
  .idx-chev{padding:0 9px}
}
/* Váha info – jeden riadok medzi popisom a rank kachľami */
.idx-meta-line{font-size:13px;color:var(--muted);padding:8px 0 0;border-top:1px dashed var(--line)}
/* 2 farebné rank kachle (V SR / V kraji) */
.idx-rank-cards{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.idx-rk-lbl{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2)}
/* === VS2 — 4 cards in row, full-width === */
.vs2-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.vs2-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 20px;
  display:flex;flex-direction:column;gap:16px;transition:.2s}
.vs2-card:hover{box-shadow:0 16px 36px -22px rgba(12,43,51,.32);transform:translateY(-2px)}
.vs2-card-hl{background:var(--navy-gradient);border-color:transparent;color:#fff;
  position:relative;overflow:hidden}
.vs2-card-hl::after{content:"";position:absolute;inset:0;
  background:var(--navy-glow);
  pointer-events:none}
.vs2-card-hl>*{position:relative;z-index:1}
.vs2-card-hl .vs2-nm{font-weight:800;color:#fff}
.vs2-card-hl .vs2-ic{background:rgba(255,255,255,.12);color:#fff}
.vs2-card-hl .vs2-tick{color:rgba(255,255,255,.55)}
.vs2-card-hl .vs2-tick::after{background:rgba(255,255,255,.2)}
.vs2-card-hl .vs2-bar{background:rgba(255,255,255,.16)}
.vs2-card-hl .vs2-mark-kr::before{background:#fff;opacity:1}
.vs2-card-hl .vs2-mark-sr::before{background:#94A3B8;opacity:1;background-image:none}
.vs2-card-hl .vs2-deltas{border-top-color:rgba(255,255,255,.15)}
.vs2-card-hl .vs2-delta-l{color:rgba(255,255,255,.6)}
.vs2-card-hl .vs2-score small{color:rgba(255,255,255,.55)}
.vs2-head{display:flex;align-items:center;gap:10px}
.vs2-ic{width:34px;height:34px;border-radius:8px;background:var(--bg-soft);color:var(--navy);
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.vs2-ic .ic{width:18px;height:18px}
.vs2-nm{font-size:14px;font-weight:700;color:var(--navy);line-height:1.25}
.vs2-score-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;flex-wrap:wrap}
.vs2-score{font-family:var(--font-head);font-size:42px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.vs2-score small{font-size:14px;font-weight:500;color:var(--muted);margin-left:3px;font-family:var(--font)}
.vs2-band{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 8px;border-radius:var(--radius-sm);white-space:nowrap}
/* scale s tickmi + bar + 2 markery */
.vs2-scale{position:relative;height:38px;margin-top:6px}
.vs2-axis{position:absolute;left:0;right:0;top:0;height:14px}
.vs2-tick{position:absolute;top:0;transform:translateX(-50%);font-size:10px;font-weight:600;
  color:var(--muted-2);font-variant-numeric:tabular-nums}
.vs2-tick span{display:block;text-align:center}
.vs2-tick::after{content:"";display:block;width:1px;height:5px;background:#D8DEE6;margin:2px auto 0}
.vs2-bar{position:absolute;left:0;right:0;top:22px;height:8px;border-radius:999px;
  background:var(--bg-tint);overflow:hidden}
.vs2-bar i{display:block;height:100%;border-radius:999px;
  animation:vs2Grow .8s cubic-bezier(.2,.85,.25,1) both}
@keyframes vs2Grow{from{width:0!important}}
/* markery — obe rovnako široké, žiadne dashy (kvôli vizuálnej konzistencii) */
.vs2-mark{position:absolute;top:18px;width:0;pointer-events:auto;cursor:help}
.vs2-mark::before{content:"";display:block;width:2.5px;height:16px;border-radius:1px;margin-left:-1.25px}
.vs2-mark-kr::before{background:#14424E}
.vs2-mark-sr::before{background:#94A3B8;opacity:.9}
/* unified legend v section-head */
.vs2-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;padding-top:14px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);font-weight:600}
.vs2-cl{display:inline-flex;align-items:center;gap:8px;line-height:1}
.vs2-cl-bar{width:18px;height:6px;border-radius:999px;background:var(--accent);
  display:inline-block;flex:0 0 auto}
.vs2-cl-tick{display:inline-block;width:2.5px;height:14px;border-radius:1px;flex:0 0 auto}
.vs2-cl-kraj{background:#14424E}
.vs2-cl-sr{background:#94A3B8}
/* delty: 2 řádky vedle sebe */
.vs2-deltas{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:10px;
  border-top:1px solid var(--line)}
.vs2-delta{display:flex;flex-direction:column;gap:2px}
.vs2-delta-l{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2)}
.vs2-delta b{font-family:var(--font-head);font-size:20px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
@media(max-width:1100px){.vs2-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vs2-grid{grid-template-columns:1fr}}
@media(max-width:720px){
  .vs-row{grid-template-columns:1fr 80px;gap:10px;padding:12px 6px}
  .vs-scale{grid-column:1/-1;margin-top:6px}
  .vs-row-hl .vs-v{font-size:26px}
}
/* === Datové príbehy (datove-pribehy.html) === */
/* Featured flagship report card */
.dp-feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:inherit;transition:transform .25s,box-shadow .25s,border-color .25s;
  margin-bottom:8px}
.dp-feat:hover{transform:translateY(-2px);box-shadow:0 24px 56px -26px rgba(12,43,51,.36);
  border-color:#BFE4EB;text-decoration:none}
.dp-feat-media{position:relative;min-height:340px;overflow:hidden;
  background:var(--navy-gradient)}
.dp-feat-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 30%;transition:transform .6s ease}
.dp-feat:hover .dp-feat-media img{transform:scale(1.05)}
.dp-feat-scrim{position:absolute;inset:0;background:linear-gradient(135deg,
  rgba(12,43,51,.55) 0%,rgba(12,43,51,.15) 60%,transparent 100%);pointer-events:none}
.dp-feat-flag{position:absolute;top:16px;left:16px;z-index:1;display:inline-flex;
  align-items:center;background:rgba(255,255,255,.95);color:var(--navy);font-size:var(--t-label);
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 11px;border-radius:var(--radius-sm);
  backdrop-filter:blur(6px)}
.dp-feat-body{padding:36px 38px;display:flex;flex-direction:column;gap:14px;justify-content:center}
.dp-feat-cat{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-dark)}
.dp-feat-ttl{font-family:var(--font-head);font-size:28px;font-weight:700;color:var(--navy);
  margin:0;letter-spacing:-.02em;line-height:1.18}
.dp-feat-p{font-size:15px;color:var(--ink);line-height:1.6;margin:0;max-width:46ch}
.dp-feat-meta{display:flex;gap:18px;flex-wrap:wrap;padding-top:6px}
.dp-feat-meta-i{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-label);font-weight:700;
  color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.dp-feat-meta-i .ic{width:14px;height:14px;color:var(--brand-dark)}
.dp-feat-meta-i .ms{font-size:14px;color:var(--brand-dark)}
.dp-feat-cta{font-family:var(--font-head);font-size:14px;font-weight:700;color:var(--brand-dark);
  letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;padding-top:6px}
.dp-feat-cta span{transition:transform .2s}
.dp-feat:hover .dp-feat-cta span{transform:translateX(4px)}
@media(max-width:840px){
  .dp-feat{grid-template-columns:1fr}
  .dp-feat-media{min-height:200px}
  .dp-feat-body{padding:24px 22px}
  .dp-feat-ttl{font-size:22px}
}

/* Filter row + grid head */
.dp-grid-head{display:flex;justify-content:space-between;align-items:center;gap:18px;
  margin-bottom:18px;flex-wrap:wrap}
.dp-grid-ttl{font-family:var(--font-head);font-size:24px;font-weight:700;color:var(--navy);
  margin:0;letter-spacing:-.01em}
.dp-filter{display:flex;gap:6px;flex-wrap:wrap}
.dp-tag{font:inherit;font-size:12.5px;font-weight:700;color:var(--muted);background:#fff;
  border:1px solid var(--line);border-radius:6px;padding:7px 12px;cursor:pointer;
  transition:.15s;letter-spacing:.01em}
.dp-tag:hover{border-color:var(--brand);color:var(--navy)}
.dp-tag.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* Story cards grid – s fotkou */
.dp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.dp-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  transition:transform .22s,box-shadow .22s,border-color .22s;position:relative;overflow:hidden}
.dp-card:hover{transform:translateY(-2px);box-shadow:0 20px 44px -24px rgba(12,43,51,.34);
  border-color:#BFE4EB;text-decoration:none}
/* Photo zone */
.dp-card-media{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:linear-gradient(135deg,#14424E 0%,#0C2B33 100%)}
.dp-card-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease}
.dp-card:hover .dp-card-media img{transform:scale(1.06)}
.dp-card-media::after{content:"";position:absolute;inset:auto 0 0 0;height:50%;
  background:linear-gradient(to top,rgba(12,43,51,.55) 0%,transparent 100%);pointer-events:none}
.dp-card-cat{position:absolute;top:14px;left:14px;z-index:1;
  font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy);background:rgba(255,255,255,.95);padding:5px 10px;border-radius:var(--radius-sm);
  backdrop-filter:blur(6px)}
/* Body */
.dp-card-body{padding:20px 22px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.dp-card-ttl{font-family:var(--font-head);font-size:19px;font-weight:700;color:var(--navy);
  margin:0;letter-spacing:-.01em;line-height:1.25}
.dp-card-p{font-size:13.5px;color:var(--muted);line-height:1.55;margin:0;flex:1}
.dp-card-foot{display:flex;justify-content:space-between;align-items:baseline;gap:8px;
  padding-top:10px;border-top:1px dashed var(--line);margin-top:6px}
.dp-card-date{font-size:11.5px;color:var(--muted-2);font-weight:600;
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.dp-card-cta{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--brand-dark)}
.dp-card-cta span{display:inline-block;transition:transform .2s;margin-left:3px}
.dp-card:hover .dp-card-cta span{transform:translateX(3px)}
@media(max-width:980px){.dp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.dp-grid{grid-template-columns:1fr}.dp-grid-head{flex-direction:column;align-items:flex-start}}
@media(max-width:760px){.pf-stats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:980px){.pf-themes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.pf-themes{grid-template-columns:1fr}}
@media(max-width:760px){.pf-prods{grid-template-columns:1fr}}
@media(max-width:980px){.pf-audience{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pf-audience{grid-template-columns:1fr}}
@media(max-width:760px){.pf-steps{grid-template-columns:1fr}}
@media(max-width:820px){.pf-quote{grid-template-columns:1fr;padding:24px 22px}}

/* ===== PRAVIDLO HERO (v2, 11. 9. 2026) =====
   VŠETKY stránky z hlavnej navigácie majú plný hero s fotkou
   (.hero-dark / .hero-listing / .obec-hero-band) – každá inú, slovenskú
   (viď triedy .hero-foto-* a /zdroje-fotografii/). Strohý
   .hero-listing--plain ostáva stránkam MIMO navigácie: metodika, blog,
   právne texty, zdroje fotografií. Bez fotky pôsobila stránka z menu
   vedľa ostatných „rozbito“.
   .ikz-hero je už len modifikátor .hero-listing (padding + hl-karty). */
.hero-listing{position:relative;overflow:hidden;background:var(--navy-gradient);color:#fff;
  padding:48px 0 56px}
.hero-listing::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("hero-bratislava.jpg");background-size:cover;background-position:center 42%;
  opacity:1}
/* Rovnako silný prechod ako pri príbehoch. Slabšia verzia tu nechala
   Pre médiá so svetlým Štrbským plesom na 3,9:1 (16. 9. 2026). */
.hero-listing::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(9,36,46,.95) 0%, rgba(9,36,46,.88) 5%, rgba(9,36,46,0) 26%),
    linear-gradient(100deg, rgba(9,36,46,.9) 0%, rgba(9,36,46,.7) 46%, rgba(9,36,46,.2) 100%)}
.hero-listing>.container{position:relative;z-index:1}
.hero-listing .crumbs{color:rgba(255,255,255,.6);margin-bottom:18px}
.hero-listing .crumbs a{color:rgba(255,255,255,.85);text-decoration:none}
.hero-listing .crumbs a:hover{color:#fff;text-decoration:underline}
.hero-listing .crumbs>span{color:#fff;font-weight:600}
/* tlačítka v dark hero — ghost button musí být viditelný */
.hero-listing .btn-ghost{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.hero-listing .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.hero-listing .eyebrow{color:#7FD3E2}
.hero-listing h1{color:#fff;max-width:760px}
.hero-listing .lead{color:rgba(255,255,255,.82);max-width:680px}
/* Nad fotkou je 82 % biela najslabší článok hlavičky: nadpis aj eyebrow
   prejdú, perex nie (tlačová správa mala 4,4:1 pri limite 4,5). Na fotkových
   hlavičkách je preto plne biely – stráži validate-hero-kontrast.py */

.hero-listing .lead em{color:#fff;font-style:normal;font-weight:700}
/* trust strip variant pre tmavý hero — 4 samostatné glass-morphism karty
   (rovnaký pattern ako .hero-rank-card / .ikz-hero .hl-card) */






/* === Trust strip + Person card (shared pre-obce / pre-firmy) === */







/* Case quote — konkrétna výpoveď s metrikou */
.case-quote{background:var(--brand-soft);border:1px solid #BFE4EB;border-radius:var(--radius);
  padding:20px 24px;margin-top:18px;display:grid;grid-template-columns:auto 1fr;gap:18px;
  align-items:center}
.case-quote-body{font-size:14px;color:var(--navy);line-height:1.55;font-weight:500}
.case-quote-body b{color:var(--navy);font-weight:800}
.case-quote-body small{display:block;font-size:var(--t-label);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-2);margin-top:6px}
@media(max-width:600px){
  .case-quote{grid-template-columns:1fr}
}
@media(max-width:880px){.po-hero-grid{grid-template-columns:1fr;gap:28px}.po-hero-img{aspect-ratio:4/3}}
@media(max-width:760px){.po-trust-bar{grid-template-columns:repeat(2,1fr);gap:8px;padding:20px}
  .po-trust-bar-it{border-right:0}.po-trust-bar-it:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}}
@media(max-width:980px){.po-use{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.po-use{grid-template-columns:1fr}}
@media(max-width:980px){.po-tier3{grid-template-columns:1fr}}
@media(max-width:880px){
  .po-cat-hero{grid-template-columns:1fr;padding:24px 22px;gap:18px}
  .po-cat-hero-r{grid-template-columns:1fr;gap:16px}
}
@media(max-width:880px){.po-cat-up{grid-template-columns:1fr}}
@media(max-width:880px){.po-lead{grid-template-columns:1fr}.po-lead-r{border-left:0;border-top:1px solid var(--line)}
  .po-lead-l,.po-lead-r{padding:30px 24px}}
@media(max-width:760px){.po-testim{grid-template-columns:1fr}}
@media(max-width:760px){.po-how{padding:24px 22px 22px}.po-how-steps{grid-template-columns:1fr}}
@media(max-width:920px){.po-tiers{grid-template-columns:1fr}}
@media(max-width:820px){.po-refs{grid-template-columns:1fr}}

.idx-table-card{padding:0;overflow:hidden}
.idx-cat-row td{padding:12px 22px}
.idx-cat{display:inline-flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.02em;
  text-transform:uppercase;font-size:var(--t-label-lg)}
.idx-cat .ic{width:20px;height:20px}
.idx-cat-w{color:var(--muted);font-weight:600;letter-spacing:0;text-transform:none;font-size:12.5px;margin-left:4px}
.idx-row{border-bottom:1px solid var(--line);transition:background .15s}
.idx-row:last-child{border-bottom:0}
.idx-row:hover{background:var(--bg-soft)}
.idx-row td{padding:14px 22px;vertical-align:middle}
.idx-row-name{font-weight:600;color:var(--navy);font-size:14px;line-height:1.3}
.idx-row-desc{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45;
  max-width:380px}
.idx-row-score{font-weight:800;font-variant-numeric:tabular-nums;font-size:16px}
.idx-row-rank{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;font-size:13px}
.idx-row-rank .muted{font-weight:500;color:var(--muted);font-size:12px}
@media(max-width:760px){
  .idx-row td{padding:12px 14px}
  .idx-cat-row td{padding:10px 14px}
  .idx-row-desc{display:none}
}

.bar-track{height:6px;background:var(--bg-tint);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;border-radius:50px;background:var(--brand)}
.bar-fill.green{background:var(--sc-hi)}
.bar-fill.amber{background:var(--sc-mid)}
.bar-fill.red{background:var(--sc-lo)}

/* ---------- Tables ---------- */
.table{width:100%;border-collapse:collapse;font-size:14.5px}
.table th,.table td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.table th{font-size:var(--t-label-lg);text-transform:uppercase;letter-spacing:.02em;color:var(--muted);
  font-weight:700}
.table tr:last-child td{border-bottom:0}
.table-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  /* overflow-x:auto namiesto hidden: široká tabuľka sa na mobile posúva,
     hidden ju bez náznaku odrezával (kánon: tabuľky rolujú vo vlastnom ráme) */
  overflow-x:auto;overflow-y:hidden}
.rank-row td{vertical-align:middle}
.rank-num{font-weight:700;color:var(--muted-2);width:46px}
.rank-name{font-weight:600;color:var(--navy)}
.rank-score{font-weight:800;text-align:right;width:64px}

/* ---------- Compare widget ---------- */
.compare{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;box-shadow:var(--shadow-sm)}
.compare-selects{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}
.select{
  width:100%;font-family:var(--font);font-size:14.5px;padding:11px 13px;
  border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
}
.compare-table{width:100%;border-collapse:collapse;margin-top:18px;font-size:14px;table-layout:fixed}
.compare-table th,.compare-table td{padding:10px 12px;border-bottom:1px solid var(--line);
  text-align:center}
.compare-table th:first-child,.compare-table td:first-child{text-align:left;color:var(--muted);
  font-weight:600;width:36%}
.compare-table thead th{color:var(--navy);font-weight:800;font-size:15px;height:52px;vertical-align:middle;line-height:1.2}
.compare-table .big{font-size:18px;font-weight:800}

/* === Porovnanie miest – mriežka číslo + bar === */
@property --cmpA{syntax:'<angle>';initial-value:0deg;inherits:false}
.cmp-grid{--cols:3;margin-top:18px}
.cmp-row{display:grid;grid-template-columns:1.5fr repeat(var(--cols),1fr);gap:18px;align-items:stretch;
  padding:7px 6px;border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:0}
.cmp-head{border-bottom:2px solid var(--line);padding-bottom:13px;margin-bottom:10px}
.cmp-cityh{text-align:center;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.cmp-city{font-weight:800;color:var(--navy);font-family:var(--font-head);line-height:1.15}
.cmp-rank{font-size:11.5px;color:var(--muted-2)}
/* bunka: číslo + bar ako jedna vycentrovaná skupina (rovnaký priestor hore aj dole) */
.cmp-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:64px;
  padding:10px 16px;border-radius:7px;transition:transform .25s ease,box-shadow .25s ease}
/* Víťaza nezvýrazňujeme podfarbením celej bunky. Mesto s najvyšším skóre
   vyhrávalo vo všetkých riadkoch, takže sa z toho stal farebný stĺpec{position:relative}
/* oddeľovacia čiara medzi IKŽ a piliermi */
.cmp-divider{height:1px;background:var(--line);margin:10px 4px}
/* Riadok s celkovým IKŽ – pokojné odlíšenie namiesto gradientu, tieňa a animácie */
.cmp-overall{border-bottom:0;border-radius:7px;padding:9px 16px;margin:0;
  background:var(--bg-soft);border:1px solid var(--line)}
.cmp-overall .cmp-cell{min-height:76px}
@media(max-width:560px){.cmp-row{gap:8px}.cmp-city{font-size:13px}.cmp-cell{min-height:58px}.cmp-overall .cmp-cell{min-height:66px}}

/* ---------- Pricing tiers ---------- */
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start}
.tier{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column;height:100%}
.tier.featured{border:2px solid var(--brand);box-shadow:var(--shadow);position:relative}
.tier-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);
  background:var(--brand);color:#fff;font-size:11.5px;font-weight:700;padding:4px 11px;
  border-radius:var(--radius-sm);letter-spacing:.02em}
.tier-name{font-size:15px;font-weight:700;color:var(--navy)}
.tier-price{font-size:32px;font-weight:800;color:var(--navy);margin:10px 0 2px}
.tier-price small{font-size:14px;font-weight:600;color:var(--muted)}
.tier ul{margin:16px 0 22px;flex:1}
.tier li{padding:7px 0 7px 26px;position:relative;font-size:13.8px;border-bottom:1px solid #F0F3F7}
.tier li:last-child{border-bottom:0}
.tier li::before{content:"✓";position:absolute;left:0;top:7px;color:var(--accent);font-weight:800}
.tier li.no{color:var(--muted-2)}
.tier li.no::before{content:"–";color:var(--muted-2)}

/* ---------- Accordion ---------- */
.acc-item{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:10px;background:#fff;
  overflow:hidden}
.acc-q{width:100%;text-align:left;background:none;border:0;padding:16px 20px;cursor:pointer;
  font-family:var(--font);font-size:15.5px;font-weight:600;color:var(--navy);
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.acc-q .acc-ic{flex-shrink:0;font-size:20px;color:var(--brand);transition:.2s}
.acc-item.open .acc-ic{transform:rotate(45deg)}
.acc-a{padding:0 20px;max-height:0;overflow:hidden;transition:.22s;color:var(--muted)}
.acc-item.open .acc-a{padding:0 20px 18px;max-height:340px}

/* ---------- Story cards (tematické analýzy – Stitch-inspired) ---------- */
.story-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;box-shadow:var(--shadow-sm)}
.story-card:hover{box-shadow:var(--shadow);transform:translateY(-2px)}
.story-thumb{position:relative;height:200px;overflow:hidden;
  background:linear-gradient(135deg,var(--brand) 0%,var(--navy-2) 100%)}
.story-thumb.t-green{background:linear-gradient(135deg,var(--accent) 0%,#0C6E4C 100%)}
.story-thumb.t-amber{background:linear-gradient(135deg,var(--amber) 0%,#9C6312 100%)}
.story-thumb.t-red{background:linear-gradient(135deg,var(--red) 0%,#8C2E1F 100%)}
.story-img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.story-card:hover .story-img{transform:scale(1.06)}
.story-badge{position:absolute;top:14px;left:14px;background:rgba(12,43,51,.78);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;
  font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:var(--radius-sm)}
.story-body{padding:22px;display:flex;flex-direction:column;flex:1}
.story-body .date{font-size:12.5px;color:var(--muted-2);font-weight:600;margin-bottom:8px}
.story-body h3{font-size:18px;margin:0 0 10px;color:var(--navy);line-height:1.25}
.story-body p{font-size:14.5px;color:var(--muted);flex:1;line-height:1.55;margin:0 0 18px}
.story-more{font-weight:700;color:var(--brand-dark);display:inline-flex;align-items:center;gap:6px;font-size:14.5px}
.story-arrow{transition:transform .15s ease}
.story-card:hover .story-arrow{transform:translateX(4px)}

/* ---------- Story overlay cards (image-forward, nenápadná kategória) ---------- */
.story-ov{position:relative;display:block;min-height:330px;border-radius:var(--radius);overflow:hidden;
  text-decoration:none;background:linear-gradient(135deg,var(--brand) 0%,var(--navy-2) 100%);
  box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease}
.story-ov.t-green{background:linear-gradient(135deg,var(--accent) 0%,#0C6E4C 100%)}
.story-ov.t-amber{background:linear-gradient(135deg,var(--amber) 0%,#9C6312 100%)}
.story-ov.t-red{background:linear-gradient(135deg,var(--red) 0%,#8C2E1F 100%)}
.story-ov:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.story-ov-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.story-ov:hover .story-ov-img{transform:scale(1.05)}
/* Scrim je natoľko silný, aby text vydržal aj svetlú fotku. Pôvodné
   hodnoty stačili na jednofarebný gradient, ale nad fotkou klesla malá
   kategória na 4,2:1. Kontrolu robí tools/validate-fotky-pribehov.py,
   preto sa tieto čísla nesmú meniť bez jej prepočtu. */
.story-ov-scrim{position:absolute;inset:0;
  background:linear-gradient(to top, rgba(11,28,48,.95) 0%, rgba(11,28,48,.86) 30%,
    rgba(11,28,48,.72) 45%, rgba(11,28,48,.3) 68%, rgba(11,28,48,0) 88%)}
.story-ov-body{position:absolute;left:0;right:0;bottom:0;padding:22px 22px 20px;color:#fff;z-index:1}
.story-ov-cat{display:block;font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.88);margin-bottom:9px}
.story-ov-title{font-size:19px;line-height:1.28;color:#fff;margin:0 0 12px}
.story-ov-more{font-size:13.5px;font-weight:700;color:#fff;display:inline-flex;align-items:center;gap:6px}
.story-ov:hover .story-ov-more .story-arrow{transform:translateX(4px)}
/* Odznak dielu je súrodenec scrimu, nie potomok .story-ov-body:
   telo karty je absolútne pozicované pri spodku, takže by sa odznak
   prilepil k nemu a nie k hornému okraju. */
.story-ov-diel{position:absolute;top:16px;left:18px;z-index:1;
  font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);
  padding:5px 11px;border-radius:999px}

/* Veľká úvodná karta série: text ide zľava, aby fotka ostala vidieť. */
.story-ov-wide{min-height:390px;margin-bottom:24px}
.story-ov-wide .story-ov-scrim{
  background:linear-gradient(to right, rgba(11,28,48,.94) 0%, rgba(11,28,48,.82) 48%, rgba(11,28,48,.22) 100%),
             linear-gradient(to top, rgba(11,28,48,.8) 0%, rgba(11,28,48,.3) 55%, rgba(11,28,48,0) 80%)}
.story-ov-wide .story-ov-body{padding:34px 36px 32px;max-width:660px}
.story-ov-wide .story-ov-title{font-size:30px;line-height:1.16;margin-bottom:12px}
.story-ov-perex{font-size:15px;line-height:1.6;color:rgba(255,255,255,.93);margin:0 0 18px}
.pribehy-dalsie .story-ov{min-height:290px}
@media (max-width:640px){
  .story-ov-wide{min-height:330px}
  .story-ov-wide .story-ov-title{font-size:23px}
  .story-ov-wide .story-ov-body{padding:24px 22px 22px}
  .story-ov-perex{display:none}
}

/* ---------- Callouts / notes ---------- */
.callout{background:var(--brand-soft);
  padding:16px 20px;border-radius:var(--radius-sm)}
.callout.green{background:var(--accent-soft)}
.callout.amber{background:var(--amber-soft)}
.note-pill{display:inline-flex;gap:8px;align-items:center;background:var(--accent-soft);
  color:var(--accent);font-size:13px;font-weight:600;padding:7px 12px;border-radius:var(--radius-sm)}

/* prototype annotation – žluté komentáre k doporučením */
.anno{
  display:block;border:1px dashed #C99A1E;background:#FFF8E6;border-radius:4px;
  padding:8px 12px;font-size:12.5px;color:#8A6608;margin-top:10px;
}
.anno b{color:#6E5106}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:13px;color:var(--muted);padding:16px 0}
.crumbs a{color:var(--muted)}
.crumbs span{color:var(--ink);font-weight:600}

/* ---------- Forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13.5px;font-weight:600;color:var(--navy);margin-bottom:6px}
.input,textarea.input{
  width:100%;font-family:var(--font);font-size:14.5px;padding:11px 13px;
  border:1px solid var(--line);border-radius:4px;background:#fff;color:var(--ink);
}
.input:focus,textarea.input:focus{outline:2px solid var(--brand-soft);border-color:var(--brand)}
textarea.input{resize:vertical;min-height:110px}

/* ---------- Embed box (média) ---------- */
.embed-box{background:var(--navy);border-radius:6px;padding:20px;color:#cdd9e6;
  font-family:'SFMono-Regular',Consolas,monospace;font-size:12.5px;overflow:auto}
.embed-box .ln{color:#7FD3E2}

/* ---------- Dataset list ---------- */
.ds-row{display:flex;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--line)}
.ds-row:last-child{border-bottom:0}
.ds-ic{width:42px;height:42px;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}
.ds-meta{flex:1}
.ds-meta .nm{font-weight:600;color:var(--navy)}
.ds-meta .sub{font-size:12.5px;color:var(--muted)}

/* ---------- Footer ---------- */
.footer{background:var(--navy-gradient);color:rgba(255,255,255,.8);padding:54px 0 28px;font-size:14px}
.footer h4{color:#fff;font-size:14px;margin-bottom:14px}
.footer a{color:rgba(255,255,255,.8);display:block;padding:4px 0}
.footer a:hover{color:#fff;text-decoration:none}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:34px;padding-bottom:34px;
  border-bottom:1px solid rgba(255,255,255,.1)}
.footer-brand p{color:rgba(255,255,255,.8);font-size:13.5px;margin-top:12px;max-width:280px}
/* kontakt priamo v pätičke – podľa vzoru obcevdatech.cz */
.footer-kontakt{display:flex;flex-direction:column;gap:5px;margin-top:16px;font-size:13.5px}
.footer-kontakt a,.footer-kontakt span{color:rgba(255,255,255,.8)}
.footer-kontakt a:hover{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:22px;
  flex-wrap:wrap;font-size:13px}
.footer-bottom .fb-links{display:flex;gap:18px}


/* ---------- Misc ---------- */
.divider{height:1px;background:var(--line);margin:32px 0}
.kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line);
  font-size:14.5px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:700;color:var(--navy)}

/* === Teaser karty IKŽ – jednotný štýl (echo hero karty: label + score bary) === */
#ikzTeaser .tcard{display:flex;flex-direction:column;padding-top:24px}
#ikzTeaser .tag{color:var(--muted-2)}
#ikzTeaser .card-link{margin-top:auto;padding-top:4px}
#ikzTeaser .tkv-list{margin-top:16px;margin-bottom:10px;display:flex;flex-direction:column;gap:15px}
.tkv-head{display:flex;align-items:baseline;gap:9px;font-size:14.5px;margin-bottom:7px}
.tkv-rank{color:var(--muted-2);font-weight:700;font-size:13px;min-width:20px}
.tkv-name{flex:1;color:var(--navy);font-weight:600}
.tkv-score{font-weight:800}
.tkv-track{height:6px;border-radius:999px;background:var(--bg-tint);overflow:hidden}
.tkv-fill{height:100%;border-radius:999px}
.tbig{font-size:50px;font-weight:800;line-height:1;letter-spacing:-.02em;margin:14px 0 0}
.kv-outof{font-size:19px;font-weight:600;color:var(--muted-2);letter-spacing:0}
.locked{filter:blur(4px);user-select:none;opacity:.55}
.lock-row{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:s}
.step{position:relative;padding-left:48px}
.step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;
  width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700}
.logos-wall{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.logo-chip{background:#fff;border:1px solid var(--line);border-radius:4px;padding:10px 18px;
  font-weight:700;color:var(--muted);font-size:14px}
.logo-chip-more{background:transparent;border-style:dashed;color:var(--muted-2);font-weight:600;font-style:italic}

/* ---------- Responsive ---------- */
/* Navigácia sa zbalí skôr než zvyšok layoutu: sedem položiek plus vyhľadávanie
   potrebuje 1231 px (odmerané), kým ostatné mriežky vydržia do 980 px. Preto
   vlastný breakpoint – inak by sa navigácia pretekala von z okna.
   Hranica je 1260 px, nie 1231: názvy položiek sa menia a systémové písmo
   pred načítaním Montserratu sádže o niečo širšie. Predtým tu stálo 1200,
   takže medzi 1201 a 1230 px hlavička pretekala. */
@media (max-width:1260px){
  .nav-links,.topbar,.nav-search{display:none}
  .burger{display:flex}
  /* obsah navigácie sa na úzkom okne nevošiel a rozťahoval stránku do strany */
  .nav .container{gap:12px;min-width:0}
  .logo{min-width:0}
  /* Pevná výška, aby panel s odkazmi nadviazal presne: 70 + 56 = 126.
     Pri automatickej výške medzi nimi presvitala stránka. */
  .nav.open .nav-search{display:flex;position:absolute;top:70px;left:0;right:0;z-index:2;
    height:56px;margin:0;border-radius:0;padding:10px 16px;background:#fff;
    border-bottom:1px solid var(--line)}
  .nav.open .nav-search input{font-size:16px;flex:1}
  /* Rozbalené vyhľadávanie má biely podklad, ale na stránkach s priehľadnou
     hlavičkou (hero na domovskej) si text aj lupa nechávali bielu farbu
     z .nav--transparent – pole tak vyzeralo prázdne a nikto netušil, že
     tam vyhľadávanie je. */
  .nav.open .nav-search{border:1px solid var(--line);background:#fff}
  .nav.open .nav-search input{color:var(--ink)}
  .nav.open .nav-search input::placeholder{color:var(--muted);opacity:1}
  .nav.open .nav-search .ms,.nav.open .nav-search [data-ic]{color:var(--muted)}
  /* margin-left:8px zo základného pravidla by panel odsunulo o 8 px doprava */
  .nav.open .nav-links{display:flex;position:absolute;top:126px;left:0;right:0;
    margin-left:0;flex-direction:column;background:#fff;
    border-bottom:1px solid var(--line);padding:12px}
}

@media (max-width:980px){
  .input,.select,textarea.input{font-size:16px}
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .g-4,.stats,.tiers,.audience{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1 / -1}
  h1,.hero h1{font-size:34px}
  h2{font-size:25px}
  .compare-selects,.steps{grid-template-columns:1fr}
}
@media (max-width:620px){
  .g-2,.g-3,.g-4,.stats,.tiers,.audience{grid-template-columns:1fr}
  .section{padding:44px 0}
  .nav .container{gap:10px}
  .container{padding:0 18px}
  .rl-name{width:120px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}

/* ---------- Našeptávač obcí ---------- */
.nav-search{position:relative}
.ac-wrap{position:relative;display:block;flex:1}
/* Výsledkov je najviac 8, takže rám je na osem urobený – pri 320 px sa
   posledný riadok orezal v polovici a spodná hrana pôsobila rovno, akoby
   zoznam nemal zaoblenie. Na nízkych oknách drží strop 60 vh. */
.ac-list{position:absolute;top:calc(100% + 8px);left:0;min-width:248px;
  max-width:calc(100vw - 32px);
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);max-height:min(380px,60vh);overflow:auto;
  overscroll-behavior:contain;z-index:80;display:none;padding:5px}
.ac-list.open{display:block}
.ac-item{display:flex;justify-content:space-between;gap:12px;align-items:center;
  padding:9px 11px;border-radius:var(--radius-sm);cursor:pointer;font-size:14px;color:var(--ink)}
.ac-item:hover,.ac-item.sel{background:var(--bg-soft)}
.ac-item .ac-kraj{color:var(--muted);font-size:12px;white-space:nowrap}
/* Vo vyhľadávaní v hlavičke rastie zoznam doľava. Je širší než samotné
   pole a pole sedí pri pravom okraji okna, takže zarovnaný doľava mu
   stĺpec s krajom vybiehal von z obrazovky. */
.nav-search .ac-list{left:auto;right:0}
.ac-empty{padding:10px 12px;color:var(--muted);font-size:13px}

.icon-sm{width:34px;height:34px;border-radius:4px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;font-size:16px;margin-bottom:8px}
.play-btn{width:60px;height:60px;border-radius:50%;background:#fff;display:flex;
  align-items:center;justify-content:center;font-size:20px;color:var(--brand);
  box-shadow:0 6px 18px rgba(12,43,51,.28)}

/* ---------- Vyhledávací lišta v hero ---------- */
.searchbar{display:flex;align-items:stretch;background:#fff;border:1px solid var(--line);
  border-radius:6px;box-shadow:var(--shadow-sm);max-width:520px;transition:.15s}
.searchbar:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.searchbar .sb-ic{display:flex;align-items:center;padding-left:16px;color:var(--muted-2);font-size:15px}
.searchbar input{flex:1;width:100%;min-width:0;border:0;outline:none;background:transparent;
  font-family:var(--font);font-size:15px;color:var(--ink);padding:14px 14px}
.searchbar .sb-btn{display:flex;align-items:center;border:0;cursor:pointer;text-decoration:none;
  font-family:var(--font);font-size:15px;font-weight:600;color:#fff;background:var(--brand);
  padding:0 26px;border-radius:0 6px 6px 0;transition:.15s}
.searchbar .sb-btn:hover{background:var(--brand-dark);text-decoration:none}

/* ---------- Stránka Index kvality života ---------- */
.rank-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
/* === Kvadrant ovládače === */
.quad-controls{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:center}
.quad-ctrl{font-weight:700;letter-spacing:.05em;font-size:var(--t-label);display:flex;align-items:center;gap:7px}
.quad-ctrl .select{width:auto}
.quad-ctrl-kraj{margin-left:auto}              /* select kraje odsadený doprava (desktop) */
.quad-ctrl-kraj .quad-ctrl-lbl{display:none}   /* popis „Filter — kraj" len na mobile */
@media(max-width:560px){
  /* stack — label NAD full-width selectom; kraj filter vizuálne oddelený */
  .quad-controls{flex-direction:column;align-items:stretch;gap:12px}
  .quad-ctrl{flex-direction:column;align-items:flex-start;gap:5px;width:100%;
    font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:11px;color:var(--muted-2)}
  .quad-ctrl .select{width:100%;font-size:14px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--ink)}
  .quad-ctrl-kraj{margin-left:0;margin-top:4px;padding-top:14px;border-top:1px solid var(--line)}
  .quad-ctrl-kraj .quad-ctrl-lbl{display:block}   /* popis kraja zobrazený na mobile */
  /* kompaktnejší popis + legenda pod grafom (menej prázdneho miesta) */
  .ikz-advanced .quad-note{margin-top:2px;font-size:11.5px}
  .ikz-advanced .band-legend{margin-top:4px!important}
}
.viewtoggle{display:inline-flex;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:#fff}
.viewtoggle button{border:0;background:#fff;font-family:var(--font);font-size:13.5px;font-weight:600;
  color:var(--muted);padding:9px 20px;cursor:pointer;transition:.15s}
.viewtoggle button.active{background:var(--brand-dark);color:#fff}
.rank-table th.ce{text-align:center}
/* Triedenie kliknutím na hlavičku (16. 9. 2026). Šípka sa ukazuje len na
   aktívnom stĺpci – učí, že hlavičky sú klikacie, bez šiestich šípok naraz.
   POZOR: nedávaj sem white-space:nowrap – dlhé popisky („Zdravie a prostredie“)
   sa vtedy nezalomia na dva riadky a tabuľka sa roztiahne cez okraj karty. */
.rank-table th.rank-sort{cursor:pointer;user-select:none}
.rank-table th.rank-sort:hover{color:var(--navy)}
.rank-table th.rank-sort::after{content:'';display:inline-block;width:0;height:0;margin-left:5px;
  vertical-align:middle;border-left:4px solid transparent;border-right:4px solid transparent}
.rank-table th.rank-sort.is-asc::after{border-bottom:5px solid var(--brand-dark)}
.rank-table th.rank-sort.is-desc::after{border-top:5px solid var(--brand-dark)}
.rank-table td.heat{text-align:center;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.rank-table .rank-posun{text-align:right;font-weight:700}
.rank-table .rank-num{width:48px}
.band-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px;font-size:12.5px;color:var(--muted)}
.band-legend span{display:inline-flex;align-items:center;gap:6px}
.band-legend i{width:14px;height:14px;border-radius:2px;display:inline-block}
.map-svg{width:100%;height:auto;display:block}
.map-dot{cursor:pointer;stroke:#fff;stroke-width:1.5;transition:opacity .15s}
.map-dot:hover{stroke:var(--navy);stroke-width:2}
.map-kraj{font-size:11px;fill:#9aa7b4;font-weight:700;text-anchor:middle;
  text-transform:uppercase;letter-spacing:.02em;pointer-events:none}
.quad-svg{width:100%;height:auto;display:block}
.q-dot{cursor:pointer;stroke:#fff;stroke-width:1.2;transition:.12s}
.q-dot:hover{stroke:var(--navy);stroke-width:2.4}
.q-axis{font-size:12px;fill:var(--muted);font-weight:700;text-anchor:middle}
.q-quad{font-size:10.5px;fill:var(--muted-2);font-weight:600}
.radar-svg{width:100%;max-width:320px;height:auto;display:block;margin:0 auto}
.radar-lbl{font-size:11px;fill:var(--muted);font-weight:600;text-anchor:middle}
.dist-n{font-size:10px;fill:var(--muted);text-anchor:middle;font-weight:700}
.dist-x{font-size:9.5px;fill:var(--muted-2);text-anchor:middle}
.dist-legend{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.dist-legend span{display:inline-flex;align-items:center;gap:6px}
.dist-legend i{width:14px;height:14px;border-radius:2px;display:inline-block}
/* klikateľný histogram → mestá v pásme */
.dist-col .dist-bar{transition:opacity .15s}
.dist-col:hover .dist-bar{opacity:.78}
.dist-col.active .dist-bar{stroke:var(--navy);stroke-width:2}
.dist-list{max-height:0;overflow:hidden;transition:max-height .3s ease;margin-top:0}
.dist-list.show{max-height:600px;margin-top:14px}
.dist-list-head{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:10px}
.dist-list-head span{color:var(--muted);font-weight:500}
.dist-chips{display:flex;flex-wrap:wrap;gap:8px}
.dist-chip{display:inline-flex;align-items:center;gap:7px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:5px 10px;font-size:13px;
  font-weight:600;color:var(--navy);text-decoration:none;transition:.15s}
.dist-chip:hover{border-color:var(--brand);background:#fff;text-decoration:none}
.dist-chip .dc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.dist-chip b{font-variant-numeric:tabular-nums;color:var(--muted)}
/* seznam + mapa vedle sebe */
.rankmap-grid{display:grid;grid-template-columns:370px 1fr;gap:20px;align-items:start}
.rank-scroll{max-height:524px;overflow-y:auto;overflow-x:auto}
.rank-scroll table{margin:0}
.rank-scroll thead th{position:sticky;top:0;background:#fff;z-index:1}
.sizebtns{display:inline-flex;gap:6px;flex-wrap:wrap}
.sizebtns button{border:1px solid var(--line);background:#fff;font-family:var(--font);cursor:pointer;
  padding:6px 12px;border-radius:4px;transition:.15s;display:flex;flex-direction:column;
  align-items:flex-start;line-height:1.2;gap:1px}
.sizebtns button b{font-size:12.5px;font-weight:700;color:var(--navy)}
.sizebtns button span{font-size:10.5px;font-weight:500;color:var(--muted)}
.sizebtns button:hover{border-color:var(--brand)}
.sizebtns button.active{background:var(--brand-dark);border-color:var(--brand-dark)}
.sizebtns button.active b,.sizebtns button.active span{color:#fff}
/* mapa okresov aj mapa krajov maju ROVNAKU pevnu velkost – prepinanie
   zalozky nesmie menit vysku karty (14. 9. 2026) */
#ikzMap,#ikzKrajMap{aspect-ratio:1.85/1;min-height:300px;border-radius:4px;overflow:hidden;background:#F4F6F9}
/* Mapa na homepage – užšia karta a plochejší pomer, aby nezaberala pol obrazovky.
   Pomer 2,05:1 zodpovedá tvaru Slovenska, takže nevznikne prázdne miesto po stranách. */
/* mapa je hlavní datový objekt webu – nechat ji na plnou šířku kontejneru */
.home-map-card{max-width:none}
.home-map-card #ikzMap{aspect-ratio:2.4/1;min-height:0}
@media(max-width:600px){.home-map-card #ikzMap{aspect-ratio:1.6/1;min-height:240px}}
#ikzMap .leaflet-container{background:#fff;font-family:var(--font)}
.leaflet-tooltip.orp-tip{background:#0C2B33;color:#fff;border:0;border-radius:4px;padding:8px 11px;font-size:12.5px;line-height:1.55;font-weight:400;max-width:250px;box-shadow:0 6px 18px rgba(12,43,51,.28);opacity:1}
.leaflet-tooltip.orp-tip strong,.leaflet-tooltip.orp-tip b{font-weight:700;color:#fff}
.leaflet-tooltip.orp-tip:before{display:none}
@media(max-width:860px){.rankmap-grid{grid-template-columns:1fr}}
/* mapa na mobile — nižší a širší pomer (SR je široká), nech nie je obrovská.
   Vyššia špecificita prebíja #rankMap #ikzMap{flex:1} ktoré ju inak naťahuje. */
@media(max-width:560px){
  #rankMap .card #ikzMap{flex:none;aspect-ratio:1.6/1;min-height:0;height:auto}
}
/* ploché hero karty IKŽ */
.hl-card{display:flex;align-items:center;gap:14px;padding:14px 16px;text-decoration:none}
.hl-card:hover{text-decoration:none}
.hl-ic{font-size:23px;width:44px;height:44px;border-radius:var(--radius-sm);background:var(--bg-tint);
  display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hl-name{font-size:18px;font-weight:800;color:var(--navy);margin:3px 0 1px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* sklenený vzhľad kariet v IKŽ hero je nižšie pri ostatných pravidlách hera –
   dve definície sa rozišli (radius 10 vs 9 px), tak je len jedna */
.ikz-hero .hl-card .tiny{color:rgba(255,255,255,.65)}

/* ---------- IKŽ podstránka: tmavý hero (konzistentný s homepage/CTA) ---------- */
.ikz-hero{padding:48px 0 54px}
/* Každá hlavná podstránka má vlastnú fotku (Envato; kredity na
   /zdroje-fotografii/). Hrad ostáva domovu, profilom miest a CTA.
   Override VŽDY nahrádza background-image – žiadne vrstvenie,
   prehliadač by sťahoval obe fotky. */
.ikz-hero::before{background-image:url("hero-kosice.jpg");background-position:center 60%}
.hero-foto-projekt::before{background-image:url("hero-most.jpg");background-position:center 45%}
.hero-foto-media::before{background-image:url("hero-tatry.jpg");background-position:center 62%}
.hero-foto-faq::before{background-image:url("hero-spis.jpg");background-position:center 55%}
.hero-foto-kontakt::before{background-image:url("hero-kontakt.jpg");background-position:center 32%}
.crumbs-hero{margin-bottom:18px}
/* rovnaké farby ako .hero-listing .crumbs – jedna konvencia drobčekov na navy */
.crumbs-hero{color:rgba(255,255,255,.6)}
.crumbs-hero a{color:rgba(255,255,255,.85);text-decoration:none}
.crumbs-hero a:hover{color:#fff;text-decoration:underline}
.crumbs-hero span{color:#fff;font-weight:600}
.ikz-hero .eyebrow{color:#7FD3E2}
.ikz-hero h1{color:#fff;max-width:760px}
.ikz-hero .lead{color:rgba(255,255,255,.82)}
/* JEDNO pravidlo pre všetky hlavičky s fotkou: perex je plne biely.
   82 % biela je nad fotkou najslabší článok – nadpis aj eyebrow prejdú,
   perex nie (tlačová správa mala 4,4:1 pri limite 4,5). Platí rovnako pre
   listingové hlavičky, rebríček aj profily miest – 16. 9. 2026, stráži
   validate-hero-kontrast.py. */
.hero-listing[class*="hero-foto"] .lead,
.ikz-hero .lead,
.obec-hero-band .lead{color:#fff}
.ikz-hero .lead em{color:#fff}
/* glass highlight karty na tmavom */
.ikz-hero .hl-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:var(--radius);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55);transition:border-color .2s,transform .2s,background .2s}
.ikz-hero .hl-card:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.26);
  transform:translateY(-2px)}
.ikz-hero .hl-ic{background:rgba(255,255,255,.1);color:#fff}
.ikz-hero .hl-card .tag{color:#7FD3E2}
.ikz-hero .hl-name{color:#fff}
.ikz-hero .hl-card .muted{color:rgba(255,255,255,.6)}
/* "Ako čítať index" – kompaktný kontext, svetlá karta prekrývajúca spodok hera */
.ikz-dist-wrap{margin-top:28px;position:relative;z-index:5;padding-bottom:8px;scroll-margin-top:90px}
.ikz-dist-wrap .card{box-shadow:0 18px 50px -22px rgba(12,43,51,.4)}
.ikz-read{padding:28px 28px 36px;background:var(--bg-soft)}
.ikz-read-head h2{font-size:21px;margin:0 0 6px}
.ikz-read-head p{font-size:14.5px;line-height:1.55;max-width:820px;margin:0 0 22px;color:var(--muted)}
/* 3 piliere ako rad kariet (klikacie → modal s indexmi) */
.ikz-read-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ikz-pillar{display:block;text-align:left;width:100%;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 16px 18px;font-family:var(--font);cursor:pointer;
  transition:.15s;position:relative}
.ikz-pillar:hover{border-color:var(--brand);box-shadow:0 10px 26px -16px rgba(12,43,51,.45);transform:translateY(-2px)}
.ikz-pillar .hl-ic{width:42px;height:42px;font-size:21px;margin-bottom:12px}
.ikz-pillar-nm{font-weight:700;color:var(--navy);font-size:15.5px;line-height:1.25}
.ikz-pillar-w{font-size:12.5px;color:var(--muted);margin-top:3px}
.ikz-pillar-bar{height:6px;border-radius:999px;background:var(--bg-tint);overflow:hidden;margin-top:13px}
.ikz-pillar-bar i{display:block;height:100%;border-radius:999px;background:var(--brand)}
.ikz-pillar::after{content:"→";position:absolute;top:15px;right:15px;color:var(--brand-dark);
  font-weight:700;opacity:0;transform:translateX(-4px);transition:.15s}
.ikz-pillar:hover::after{opacity:1;transform:translateX(0)}
.ikz-pillar-hint{font-size:12.5px;color:var(--muted-2);margin:12px 2px 24px;line-height:1.4}
.ikz-dist-cap{font-size:var(--t-label);font-weight:700;color:var(--muted-2);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:10px}
@media(max-width:760px){.ikz-read-pillars{grid-template-columns:1fr}}

/* ---------- IKŽ blok 2: rebríček so sidebarom filtrov ---------- */
/* SPOLOČNÁ výška sidebaru a main = 620px (zarovnaný spodok vo VŠETKÝCH pohľadoch) */
.ikz-rank-layout{display:grid;grid-template-columns:264px minmax(0,1fr);gap:24px;align-items:start}
/* rovnaká výška ako mapový stĺpec; obsah je flex, takže tlačidlo „Zrušiť filtre"
   sa cez margin-top:auto pripne na spodok a pod filtrami nezostane prázdne miesto */
.ikz-filters{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  height:620px;box-sizing:border-box;overflow:hidden;display:flex;flex-direction:column}
.ikz-filt-foot{margin-top:auto;margin-bottom:0}
#zebricek.view-list .ikz-filt-foot,#zebricek.view-map .ikz-filt-foot{display:block}
.ikz-rank-main{height:620px;display:flex;flex-direction:column}
.ikz-rank-toolbar{flex-shrink:0}
#rankMap,#rankList,#rankKraje,#rankKrajMap{flex:1;height:auto}
.ikz-filters h4{font-size:15px;font-weight:700;color:var(--navy);margin:0 0 18px;
  display:flex;align-items:center;gap:8px}
.ikz-filt-grp{margin-bottom:18px}
.ikz-filt-grp:last-child{margin-bottom:0}
.ikz-filt-lbl{display:block;font-size:var(--t-label);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-2);margin-bottom:8px}
.ikz-filters .select,.ikz-filters .input,.ikz-filters .ac-wrap{width:100%!important;max-width:none!important;flex:1 1 auto!important}
.ikz-filt-hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.ikz-filters .input,.ikz-filters .select{height:44px;box-sizing:border-box}
.ikz-filters .sizebtns{flex-direction:column;width:100%;gap:8px}
.ikz-filters .sizebtns button{width:100%;height:44px;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:600;color:var(--navy);padding:0 12px;gap:0}
.ikz-filters .sizebtns button.active{color:#fff}
.ikz-rank-main{min-width:0;display:flex;flex-direction:column}
.ikz-rank-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
/* Voľba ukazovateľa – patrí k mape, preto stojí v lište nad ňou (nie medzi filtrami vľavo,
   kde ju používatelia prehliadali). Tón var(--brand-soft) je rovnaký ako pri ostatných
   zvýraznených blokoch webu. */
.metric-pick{display:none;align-items:center;gap:9px;background:var(--navy);
  border-radius:var(--radius-sm);padding:5px 5px 5px 13px;cursor:pointer}
#zebricek.view-map #metricPickMesta,
#zebricek.view-krajemap #metricPickKraje{display:inline-flex}
.metric-pick-lbl{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-label);font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:#fff;white-space:nowrap}
.metric-pick-lbl .ic,.metric-pick-lbl .ms{font-size:15px}
/* vlastné odsadenie – základné .select má padding 11px, ktorý sa do nízkeho ovládača nezmestí
   a text „IKŽ celkem" sa orezal */
.metric-pick .select{height:auto;min-width:190px;max-width:240px;font-size:13.5px;
  background:#fff;border-color:transparent;padding:7px 28px 7px 10px;line-height:1.25}
@media(max-width:760px){
  .metric-pick{width:100%;justify-content:space-between}
  .metric-pick .select{min-width:0;flex:1;max-width:none}
}
.ikz-rank-count{font-size:13px;color:var(--muted);margin-left:auto}
/* mapa/zoznam/kraje vyplnia spoločnú výšku → spodok zarovnaný so sidebarom */
#rankMap,#rankList,#rankKraje,#rankKrajMap{display:flex;flex-direction:column;min-height:0}
#rankMap>.card,#rankList>.card,#rankKraje>.card,#rankKrajMap>.card{flex:1;display:flex;flex-direction:column;min-height:0}
#rankMap #ikzMap,#rankKrajMap #ikzKrajMap{flex:none;width:100%}
#rankList .rank-scroll,#rankKraje .rank-scroll{max-height:none;flex:1;overflow-y:auto;min-height:0}
/* pri užšom okne sa rebríček zmestí tesnejšími bunkami – vodorovný
   posuvník vznikal len zo šírky buniek, nie z obsahu (14. 9. 2026) */
@media(max-width:1200px){.rank-table th,.rank-table td{padding-left:8px;padding-right:8px}}
@media(max-width:1060px){.rank-table th,.rank-table td{padding-left:6px;padding-right:6px;font-size:13.5px}}
/* poznámka pod kartou krajov nemá zaberať flex výšku, len si zabrať svoju */
#rankKraje>p,#rankKrajMap>p{flex-shrink:0;margin:10px 4px 0}
.rank-export{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:none;
  border:0;color:var(--brand-dark);font-family:var(--font);font-size:13.5px;font-weight:700;
  cursor:pointer;padding:6px 4px;transition:color .15s}
.rank-export:hover{color:var(--navy)}
.rank-export .ms{font-size:18px}
@media(max-width:900px){.ikz-rank-layout{grid-template-columns:1fr}
  .ikz-filters{position:static}
  .ikz-filters .sizebtns{flex-direction:row;flex-wrap:wrap}
  .ikz-filters .sizebtns button{width:auto}
  /* zruš fixné desktop výšky 620px — na mobile spôsobovali veľké prázdne miesto
     v sidebare filtrov aj pod mapou */
  .ikz-filters{height:auto}
  .ikz-rank-main{height:auto}
  #rankMap>.card,#rankList>.card,#rankKraje>.card,#rankKrajMap>.card{flex:none}}

/* mini bary pilierov v tabuľke */
.rank-cell{display:flex;flex-direction:column;align-items:center;gap:4px}
.rank-cell .rc-num{font-weight:700;font-variant-numeric:tabular-nums;font-size:13px}
.rank-mini{width:48px;height:4px;border-radius:999px;background:var(--bg-tint);overflow:hidden}
.rank-mini-fill{height:100%;border-radius:999px;transition:width .5s ease}

/* ---------- IKŽ blok 3: pokročilé analýzy na navy (rounded box) ---------- */
.ikz-advanced{background:var(--navy-gradient);color:#fff;border-radius:var(--radius);
  padding:44px 40px;position:relative;overflow:hidden}
.ikz-advanced .eyebrow{color:#7FD3E2}
.ikz-advanced h2,.ikz-advanced h3{color:#fff}
.ikz-advanced .section-head .lead,.ikz-advanced .section-head p{color:rgba(255,255,255,.78)}
.ikz-advanced .quad-note,.ikz-advanced .tiny.muted{color:rgba(255,255,255,.6)}
.ikz-advanced .quad-note{margin-top:4px}
/* karty grafov ostávajú svetlé pre čitateľnosť SVG – kontrast na navy */
.ikz-advanced .card{box-shadow:0 20px 50px -24px rgba(0,0,0,.6)}
@media(max-width:700px){.ikz-advanced{padding:32px 20px}}
.rank-table td.rank-val{text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.rank-table td.rank-ikz{font-weight:800}
/* ---------- Rebríček krajů ---------- */
/* kraje/krajemap: sidebar OSTÁVA (drží šírku → žiadne preskakovanie layoutu),
   len sa skryjú nefunkčné filtre miest a namiesto nich sa zobrazí info o rebríčku krajov */
.ikz-kraje-filters{display:none}
.ikz-kraje-hint{display:block;font-size:12px;color:var(--brand-dark);margin-top:7px;font-weight:600;min-height:1px}
/* kraje/krajemap: skryť filtre miest (priame deti aside), zobraziť filtre krajov */
#zebricek.view-kraje .ikz-filters > h4,
#zebricek.view-kraje .ikz-filters > .ikz-filt-grp,
#zebricek.view-kraje .ikz-filters > .ikz-filt-hr,
#zebricek.view-krajemap .ikz-filters > h4,
#zebricek.view-krajemap .ikz-filters > .ikz-filt-grp,
#zebricek.view-krajemap .ikz-filters > .ikz-filt-hr{display:none}
#zebricek.view-kraje .ikz-kraje-filters,
#zebricek.view-krajemap .ikz-kraje-filters{display:block}
.kraj-row-hl{background:var(--brand-soft)}
.kraj-row-hl .rank-name{color:var(--brand-dark)}
.rank-table td.ce{text-align:center}
.kraj-table td{padding-top:14px;padding-bottom:14px}
.kraj-row{cursor:pointer;transition:background .12s}
.kraj-row:hover{background:var(--bg-soft)}
.kraj-row .rank-name{font-size:15px}
.kraj-range{display:flex;align-items:center;gap:10px;min-width:160px}
.kr-track{position:relative;flex:1;min-width:96px;height:6px;border-radius:999px;background:var(--bg-tint)}
.kr-fill{position:absolute;top:0;bottom:0;border-radius:999px;opacity:.9}
.kr-lbl{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* ---------- Porovnanie obcí – tečkový graf ---------- */
.cmp-chart{width:100%;height:auto;display:block}
.cmp-legend{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.cmp-leg-item{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink)}
.cmp-leg-sw{width:12px;height:12px;border-radius:2px;display:inline-block;flex-shrink:0}
.dp-tick{font-size:9px;fill:#A8B2BC;text-anchor:middle}
.dp-lbl-head{font-size:13px;font-weight:800;fill:var(--navy)}
.dp-lbl{font-size:11px;font-weight:600;fill:var(--muted)}
.dp-sub{font-size:8.5px;fill:var(--muted-2)}
.dp-name{font-size:8.5px;fill:var(--muted);text-anchor:middle}
.dp-cap{font-size:8.5px;font-weight:700;fill:var(--muted-2);letter-spacing:.02em}
/* hodnota nad tečkou + legenda miest + hover */
.dp-val{font-size:10px;font-weight:700;text-anchor:middle;font-family:var(--font-head)}
.cmp-legend{margin:0 0 4px}
.cl-item{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--navy)}
.cl-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.cmp-chart .dp-dot{cursor:pointer;transition:stroke-width .12s}
.cmp-chart .dp-dot:hover{stroke-width:3.5}
/* graf vývoja v čase + akční titulky + kvadrant */
.dev-ytick{font-size:9px;fill:#8593A2;text-anchor:end}
.dev-xtick{font-size:9px;fill:#8593A2;text-anchor:middle}
.dev-end{font-size:10.5px}
.chart-take{font-size:13.5px;color:var(--navy);font-weight:600;margin:0 0 10px;line-height:1.45}
.quad-corner{font-size:9.5px;font-weight:700;letter-spacing:.02em;fill:#8A97A6}
.quad-note{font-size:12px;color:var(--muted);margin:10px 2px 0;line-height:1.5}
/* momentum u pilierů */
.pil-score{text-align:right;line-height:1.15}
.pil-mom{display:block;font-size:11.5px;font-weight:700;margin-top:4px;white-space:nowrap}
.pil-mom-yr{font-weight:500;color:var(--muted-2)}
/* === Rank card (Postavenie medzi mestami) — unifikovaná karta === */
.rank-card{padding:0;overflow:hidden}
.rank-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:22px 26px;background:var(--navy-gradient);color:#fff}
.rank-hero-l{display:flex;align-items:center;gap:22px;min-width:0}
.rank-hero-r{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:0 0 auto}
.rank-hist{padding:22px 26px 12px}
.rank-hist-cap{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--navy);margin-bottom:8px}
.rank-hist-cap .muted{font-weight:600;text-transform:none;letter-spacing:0;color:var(--muted-2)}
/* Peer comparison riadky */
.peer-cmp{padding:26px 28px 22px}
.peer-cap{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;
  flex-wrap:wrap;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.peer-cap-lt{display:flex;flex-direction:column;gap:4px;min-width:0}
.peer-cap-t{font-family:var(--font-head);font-size:17px;font-weight:700;color:var(--navy);
  letter-spacing:-.01em;line-height:1.2}
.peer-cap-sub{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.peer-cap-sub b{color:var(--navy);font-weight:800;font-size:14px}
.peer-leg{display:flex;gap:14px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.pl{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.pl i{display:inline-block;width:11px;height:11px;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1px var(--line)}
.peer-row{display:grid;grid-template-columns:230px 1fr 60px;align-items:center;gap:18px;
  padding:14px 14px;border-bottom:1px dashed var(--line);border-radius:8px}
.peer-row:last-child{border-bottom:0}
.peer-row-hl{background:var(--bg-soft);padding:18px 14px;margin-bottom:6px}
.peer-row-hl .peer-nm{font-size:15px;font-weight:800;
  display:flex;flex-direction:column;gap:2px}
.peer-row-hl .peer-nm::after{content:"celkové skóre";font-size:var(--t-label);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
.peer-row-hl .peer-delta{font-size:22px}
.peer-nm{font-size:14px;font-weight:700;color:var(--navy);line-height:1.3}
.peer-scale{position:relative;height:28px}
.peer-axis{position:absolute;left:0;right:0;top:13px;height:2px;background:var(--bg-tint);
  border-radius:2px}
.peer-dot{position:absolute;top:7px;width:14px;height:14px;border-radius:50%;
  transform:translateX(-50%);border:2px solid #fff;box-shadow:0 0 0 1px var(--line);
  transition:transform .15s}
.peer-dot:hover{transform:translateX(-50%) scale(1.25);z-index:2}
/* Medián je väčší než bod mesta, aby okolo neho vytvoril obrubu aj vtedy,
   keď mesto leží presne na ňom. Predtým bol bod mesta väčší a medián pod ním
   úplne zmizol – pôsobilo to, že údaj chýba (napr. Trebišov, Vzťahy: rozdiel
   0,9 % šírky osi). */
.peer-dot-md{background:#94A3B8;width:20px;height:20px;top:4px;z-index:1}
.peer-dot-me{width:13px;height:13px;top:7.5px;z-index:2;box-shadow:0 0 0 1px rgba(0,0,0,.08),
  0 2px 6px rgba(12,43,51,.18)}
/* hodnotu mediánu skryť, keď je takmer zhodná s mestom – čísla by sa prekryli;
   presný rozdiel je aj tak v stĺpci vpravo */
.peer-dot-md>span{color:var(--muted)}
.peer-dot>span{position:absolute;top:-22px;left:50%;transform:translateX(-50%);
  font-size:11px;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;
  white-space:nowrap;background:#fff;padding:1px 6px;border-radius:4px;
  border:1px solid var(--line);opacity:0;pointer-events:none;transition:opacity .15s}
.peer-dot:hover>span{opacity:1}
.peer-dot-me>span{opacity:1;border-color:var(--navy);color:var(--navy)}
.peer-delta{font-family:var(--font-head);font-size:20px;font-weight:700;
  font-variant-numeric:tabular-nums;text-align:right;line-height:1}
@media(max-width:680px){.peer-row{grid-template-columns:1fr 50px;gap:10px}
  .peer-scale{grid-column:1/-1;margin-top:6px}}
@media(max-width:700px){.rank-hero{flex-direction:column;align-items:flex-start;gap:14px}
  .rank-hero-r{flex-direction:row;align-items:baseline;gap:8px}}
/* exponát „V reportu naviac" – zamčené náhledy */
.lock-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:20px}
.lock-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:18px}
.lock-card-h{font-weight:800;color:var(--navy);font-size:15px;display:flex;align-items:center;gap:8px}
.lc-ic{font-size:18px}
.lock-card-d{font-size:12.5px;color:var(--muted);margin:8px 0 13px;line-height:1.5}
.lock-prev{position:relative;background:var(--bg-soft);border-radius:4px;padding:14px;overflow:hidden}
.lp-skel{display:flex;flex-direction:column;gap:7px}
.lp-skel span{height:8px;border-radius:2px;background:#dbe2ea;display:block}
.lp-skel span:nth-child(1){width:88%}
.lp-skel span:nth-child(2){width:62%}
.lp-skel span:nth-child(3){width:78%}
.lp-lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(244,246,249,.62);font-size:12px;font-weight:700;color:var(--muted)}
/* hover tooltip kvadrantu */
.q-tip,.idx-tip{position:fixed;z-index:200;pointer-events:none;opacity:0;transition:opacity .12s;
  background:#0C2B33;color:#fff;font-size:12.5px;line-height:1.55;padding:8px 11px;
  border-radius:4px;box-shadow:0 6px 18px rgba(12,43,51,.28);max-width:250px}
.q-tip strong,.idx-tip strong{color:#fff;font-weight:700}

/* ---------- Metodika IKŽ ---------- */
.method-text{max-width:768px;margin-bottom:34px}
.method-text p{color:var(--muted);margin-bottom:13px}
.method-text p:last-of-type{margin-bottom:0}
.scale-strip{display:flex;align-items:center;gap:14px;margin-top:20px}
.scale-bar{flex:1;height:11px;border-radius:3px;
  background:linear-gradient(90deg,var(--sc-lo),var(--sc-mid) 52%,var(--sc-hi))}
.scale-cap{font-size:12.5px;color:var(--muted);white-space:nowrap}
.scale-cap b{color:var(--navy);font-size:15px;margin-right:3px}
.scale-cap-r b{margin-right:0;margin-left:3px}
.method-sub{font-size:20px;color:var(--navy);margin-bottom:6px}
.method-lead{max-width:720px;margin-bottom:18px}
/* ploché karty pilierů (ikona vedle textu) */
.method-card{display:flex;align-items:flex-start;gap:14px;text-align:left;width:100%;
  font-family:inherit;cursor:pointer;padding:18px}
/* terminologie – glosář (ikona vedle textu) */
.term-grid{max-width:900px;margin-top:2px}
.term-card{display:flex;gap:13px;align-items:flex-start;padding:17px 18px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:6px}
.term-ic{width:38px;height:38px;border-radius:var(--radius-sm);background:#fff;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.term-card h4{font-size:15px;color:var(--navy);margin:3px 0 5px}
.term-card p{font-size:13px;color:var(--muted);margin:0;line-height:1.58}
/* pojmy – feature grid (4 v rade, kruhová ikona hore, názov + popis pod) */
.term-list{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;max-width:none;margin:8px 0 0}
.term-row{display:block}
.term-ico{width:46px;height:46px;border-radius:50%;background:var(--brand-soft);color:var(--brand-dark);
  display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:15px;transition:.15s}
.term-row:hover .term-ico{background:var(--brand);color:#fff}
.term-list dt{font-size:15px;font-weight:700;color:var(--navy);margin:0 0 6px}
.term-list dd{font-size:13px;color:var(--muted);margin:0;line-height:1.58}
@media(max-width:860px){.term-list{grid-template-columns:1fr 1fr;gap:26px}}
@media(max-width:520px){.term-list{grid-template-columns:1fr}}

/* ---------- Modální okno (čiastkový indexy piliere) ---------- */
.modal-ovl{position:fixed;inset:0;z-index:1200;background:rgba(12,43,51,.55);
  display:flex;align-items:center;justify-content:center;padding:24px;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.modal-ovl[hidden]{display:none}
.modal{background:#fff;border-radius:8px;width:100%;max-width:640px;max-height:86vh;
  display:flex;flex-direction:column;position:relative;overflow:hidden;
  box-shadow:0 24px 64px rgba(12,43,51,.4);animation:modalIn .18s ease}
@keyframes modalIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.modal-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:var(--radius-sm);
  border:0;background:var(--bg-tint);color:var(--navy);font-size:14px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;z-index:2}
.modal-x:hover{background:#dbe3ec}
.modal-head{display:flex;gap:14px;padding:24px 26px 17px;border-bottom:1px solid var(--line)}
.modal-head .eyebrow{margin-bottom:1px}
.modal-body{overflow-y:auto;padding:6px 26px}
.modal-foot{padding:13px 26px;border-top:1px solid var(--line);background:var(--bg-soft)}
.idx-row{padding:13px 0;border-bottom:1px solid var(--line)}
.idx-row:last-child{border-bottom:0}
.idx-row-top{display:flex;justify-content:space-between;gap:14px;align-items:baseline}
.idx-name{font-weight:700;color:var(--navy);font-size:14.5px;line-height:1.35}
.idx-w{font-weight:800;color:var(--navy);font-size:13.5px;white-space:nowrap;
  font-variant-numeric:tabular-nums}
/* popis výpočtu zbalený za "Ako sa počíta" – dlhé texty robili z modalu
   stenu textu; pruhy váh odišli (šírka proti maximu klamala) */
.idx-det{margin:7px 0 0}
.idx-det summary{cursor:pointer;font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand-dark);list-style:none;user-select:none;-webkit-user-select:none}
.idx-det summary::-webkit-details-marker{display:none}
.idx-det summary::before{content:"▸ "}
.idx-det[open] summary::before{content:"▾ "}
.idx-desc{font-size:12.8px;color:var(--muted);margin:8px 0 0;line-height:1.55}
@media(max-width:560px){
  .modal-head{padding:22px 18px 15px}
  .modal-body{padding:6px 18px}
  .modal-foot{padding:12px 18px}
  .scale-strip{flex-wrap:wrap}
}

/* ---------- Profil obce ---------- */
.obec-hero{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.obec-hero-id{display:flex;gap:22px;align-items:center;flex:1;min-width:280px}
.obec-locator{width:212px;flex-shrink:0}
.locator-svg{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:6px}
@media(max-width:640px){.obec-locator{width:100%;max-width:280px;margin:0 auto}}
/* co report přidává */
.report-adds{display:grid;grid-template-columns:repeat(3,1fr);gap:16px 22px;margin-top:18px}
.report-add{display:flex;gap:11px;align-items:flex-start}
.report-add>span{font-size:20px;flex-shrink:0;line-height:1.3}
.report-add strong{display:block;color:var(--navy);font-size:14.5px;margin-bottom:2px}
.report-add p{font-size:12.8px;color:var(--muted);margin:0;line-height:1.5}
@media(max-width:760px){.report-adds{grid-template-columns:1fr}}
/* zdieľanie */
.share-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* lokalizační mapka (miniatura mapy SR) */
.obec-loc{width:100%;aspect-ratio:1.62/1;border:1px solid var(--line);border-radius:var(--radius-sm);
  overflow:hidden;background:#F4F6F9}
.obec-loc .leaflet-container{background:#F4F6F9;font:inherit}
/* hover popisek indexu */
.has-tip{cursor:help;text-decoration:underline;text-decoration-style:dotted;
  text-decoration-color:var(--muted-2);text-underline-offset:3px}
/* bublina profilu je tá istá ako pri kvadrante – viď .q-tip */
/* pavučinový graf – legenda */
.radar-leg{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin-top:6px;
  font-size:12.5px;color:var(--ink)}
.radar-leg span{display:inline-flex;align-items:center;gap:6px}
.radar-leg i{width:14px;height:14px;border-radius:2px;display:inline-block}
.radar-leg i.ln{width:20px;height:0;border-radius:0;border-top:2px solid #8593A2}
.radar-leg i.ln-dash{border-top-style:dashed}
.radar-leg i.ln-dot{border-top-color:#B4C0CD;border-top-style:dotted;border-top-width:3px}
/* === V okolí v3 — mapa vľavo + mestá vpravo === */
.nx-layout{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:stretch}
.nx-map-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  display:flex;flex-direction:column}
/* unifikovaný navy gradient header — zhodný výškou s nx-cities-head */
.nx-map-bar{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:18px 22px;min-height:64px;background:var(--navy-gradient);color:#fff;
  position:relative;overflow:hidden;flex-wrap:nowrap}
.nx-map-bar::after,.nx-cities-head::after{content:"";position:absolute;inset:0;
  background:var(--navy-glow);
  pointer-events:none}
.nx-map-bar>*,.nx-cities-head>*{position:relative;z-index:1}
.nx-map-bar-l{display:flex;flex-direction:column;gap:3px;min-width:0}
.nx-map-tt{font-family:var(--font-head);font-size:15px;font-weight:700;color:#fff;
  line-height:1.2;letter-spacing:-.01em}
.nx-map-sub{font-size:11.5px;color:rgba(255,255,255,.7)}
.nx-radius{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}
.nx-radius-l{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.65)}
.nx-radius-sel{font:inherit;font-size:13px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:6px;
  padding:6px 28px 6px 10px;cursor:pointer;font-variant-numeric:tabular-nums;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center}
.nx-radius-sel:hover{background-color:rgba(255,255,255,.2);border-color:rgba(255,255,255,.35)}
.nx-radius-sel option{color:var(--navy);background:#fff}
/* OSM dlaždice stlmené do svetlosivej – náhrada za CARTO light (vodoznak bez kľúča) */
.tile-tichy{filter:saturate(.75) brightness(1.03)}
.nx-map{width:100%;flex:1;display:flex;flex-direction:column;min-height:360px}
.nx-map .dist-map{flex:1;min-height:0;border-radius:0}
.nx-legend{display:flex;flex-wrap:wrap;gap:14px;padding:10px 18px;border-top:1px solid var(--line);
  background:var(--bg-soft);font-size:11.5px;color:var(--muted);font-weight:600}
.nx-legend span{display:inline-flex;align-items:center;gap:6px}
.nx-legend i{display:inline-block;width:11px;height:11px;border-radius:3px}
/* Cities card vpravo */
.nx-cities-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  display:flex;flex-direction:column;overflow:hidden}
.nx-cities-head{display:flex;flex-direction:column;justify-content:center;gap:3px;
  padding:18px 22px;min-height:64px;background:var(--navy-gradient);color:#fff;
  position:relative;overflow:hidden}
.nx-cities-ttl{font-family:var(--font-head);font-size:15px;font-weight:700;color:#fff;
  margin:0;letter-spacing:-.01em;line-height:1.2}
.nx-cities-sub{font-size:11.5px;color:rgba(255,255,255,.7)}
/* Mestá ako kompaktné riadky */
.nx-cities{display:flex;flex-direction:column;padding:8px;flex:1;overflow-y:auto}
/* Jeden riadok na mesto, bez prúžku a šípky; riadky sa roztiahnu na výšku
   karty (flex:1), takže pod posledným mestom neostáva prázdny priestor */
.nx-city{display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:12px;
  flex:1 1 0;min-height:0;padding:6px 12px;border-radius:8px;text-decoration:none;color:inherit;
  transition:background .18s}
.nx-city:hover{background:var(--bg-soft);text-decoration:none}
.nx-city-rank{font-family:var(--font-head);font-size:16px;font-weight:700;color:var(--muted-2);
  line-height:1;text-align:center;font-variant-numeric:tabular-nums}
.nx-city:hover .nx-city-rank{color:var(--navy)}
.nx-city-info{display:flex;align-items:baseline;gap:8px;min-width:0}
.nx-city-name{font-size:16px;font-weight:700;color:var(--navy);line-height:1.3;white-space:nowrap}
.nx-city-meta{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nx-city-km{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.nx-city-score{font-family:var(--font-head);font-size:20px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  display:inline-flex;align-items:baseline;gap:2px;white-space:nowrap;min-width:58px;justify-content:flex-end}
.nx-city-score small{font-size:10px;font-weight:500;color:var(--muted);font-family:var(--font);
  letter-spacing:0}
@media(max-width:920px){
  .nx-layout{grid-template-columns:1fr}
  .nx-map{min-height:320px}
}
@media(max-width:920px){
  .near-grid{grid-template-columns:1fr}
  .near-map-wrap{border-right:0;border-bottom:1px solid var(--line)}
  .near-list-body{max-height:none}
}
/* histogram „kde obec stojí" */
.hist-cap{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:2px}
.hist-svg{width:100%;height:auto;display:block;max-height:248px}
.ps-svg{max-height:180px}
.ps-num{font-size:11px;fill:var(--muted-2);text-anchor:middle;font-weight:600;
  font-variant-numeric:tabular-nums}
.ps-ref{font-size:var(--t-label);font-weight:700;fill:var(--muted);text-anchor:middle;
  text-transform:uppercase;letter-spacing:.05em}
.ps-ref-v{font-size:13px;font-weight:700;fill:var(--navy);text-anchor:middle;
  font-variant-numeric:tabular-nums}
.ps-end{font-size:var(--t-label);fill:var(--muted-2);text-transform:uppercase;
  letter-spacing:.05em;font-weight:700}
.ps-call{font-size:13px;font-weight:800;fill:#fff;text-anchor:middle;
  font-variant-numeric:tabular-nums}
.ds-svg{max-height:210px}
.ds-dot{transition:transform .15s,fill .15s;cursor:help;transform-origin:center}
.ds-dot:hover{fill:var(--navy);transform:scale(1.5)}
.ds-ref{font-size:var(--t-label);font-weight:700;fill:var(--muted);text-anchor:middle;
  text-transform:uppercase;letter-spacing:.05em}
.ds-axis{font-size:11px;fill:var(--muted-2);text-anchor:middle;
  font-variant-numeric:tabular-nums;font-weight:600}
.ds-axis-end{font-size:var(--t-label);fill:var(--muted-2);text-transform:uppercase;
  letter-spacing:.05em;font-weight:700}
.ds-call{font-size:13px;font-weight:800;fill:#fff;text-anchor:middle;
  font-variant-numeric:tabular-nums}
.hist-bar{transition:opacity .12s;cursor:help}
.hist-bar:hover{opacity:.82}
.hist-n{font-size:11px;font-weight:700;fill:var(--navy);text-anchor:middle}
.hist-x{font-size:10.5px;fill:var(--muted-2);text-anchor:middle}
.hist-med{font-size:10.5px;fill:var(--muted);text-anchor:middle}
.hist-call{font-size:13px;font-weight:800;fill:#fff;text-anchor:middle}
/* distanční radar okolních obcí */
.dist-svg{width:100%;max-width:380px;height:auto;display:block;margin:0 auto}
.dist-dot{cursor:pointer;stroke:#fff;stroke-width:1.5;transition:opacity .12s}
.dist-dot:hover{opacity:.78}
.dist-map{width:100%;flex:1;min-height:420px;border-radius:var(--radius-sm);overflow:hidden;background:#f4f6f9}
.dist-map .leaflet-container{font-family:inherit}
.dist-km-lbl{font-size:9px;color:#aaa;white-space:nowrap;display:inline-block;font-weight:500;
  text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 -1px 0 #fff,0 1px 0 #fff,-1px 0 0 #fff,1px 0 0 #fff}
.dist-compass{font-size:12px;font-weight:700;color:#666;
  display:flex;align-items:center;justify-content:center;
  text-shadow:-1px -1px 0 #fff,1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff,0 -1px 0 #fff,0 1px 0 #fff,-1px 0 0 #fff,1px 0 0 #fff}
.leaflet-tooltip.dist-me-tip{background:#0C2B33;color:#fff;border:none;
  font-weight:700;font-size:12px;padding:3px 8px;box-shadow:0 2px 8px rgba(0,0,0,0.2)}
.leaflet-tooltip.dist-me-tip::before{border-right-color:#0C2B33}
/* prodejní sekce – co v reportu / produkty */
.report-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.rg-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 15px}
.rg-ic{font-size:19px;margin-bottom:6px}
.rg-card strong{display:block;color:var(--navy);font-size:14px;margin-bottom:3px}
.rg-card p{font-size:12.3px;color:var(--muted);margin:0;line-height:1.5}
.prod-more{margin-top:22px;border-top:1px solid #BFE4EB;padding-top:16px}
.prod-more h4{color:var(--navy);margin-bottom:10px}
.prod-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.prod-item{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 14px;text-decoration:none;transition:.15s}
.prod-item:hover{text-decoration:none;border-color:#bcd3ea;box-shadow:var(--shadow-sm)}
.prod-item strong{display:block;color:var(--navy);font-size:13.5px;margin-bottom:3px}
.prod-item span{font-size:12px;color:var(--muted);line-height:1.5;display:block}
/* konkrétní produkty k obci (PDF karty) */
.prod-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px}
.prod-doc{display:flex;align-items:flex-start;gap:14px;background:#fff;border:1px solid var(--line);
  border-radius:6px;padding:18px 20px;text-decoration:none;transition:.2s;position:relative;overflow:hidden}
.prod-doc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:transparent;transition:.18s;border-radius:6px 0 0 6px}
.prod-doc:hover{text-decoration:none;border-color:#BFE4EB;
  box-shadow:0 4px 18px rgba(12,43,51,.08);transform:translateY(-1px)}
.prod-doc:hover::before{background:var(--brand)}
.pd-ic{width:46px;height:46px;border-radius:6px;display:flex;align-items:center;justify-content:center;
  font-size:22px;flex-shrink:0}
.pd-ic-blue{background:var(--brand-soft)}
.pd-ic-green{background:var(--accent-soft)}
.pd-ic-amber{background:var(--amber-soft)}
.pd-ic-navy{background:#E8EDF2}
.pd-body{flex:1;min-width:0}
.pd-tag{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:4px}
.pd-t{font-size:15px;font-weight:700;color:var(--navy);line-height:1.35;margin-bottom:4px}
.pd-s{font-size:12.8px;color:var(--muted);line-height:1.5}
.pd-cta{font-size:20px;color:var(--brand);font-weight:600;flex-shrink:0;align-self:center;
  transition:.15s}
.prod-doc:hover .pd-cta{color:var(--brand-dark);transform:translateX(3px)}
@media(max-width:760px){
  .report-grid,.prod-list,.prod-grid{grid-template-columns:1fr}
}

/* ---------- Pre obce – katalog produktů ---------- */
.tier-list{margin-top:12px}
.tier-list li{font-size:13.5px;padding:6px 0 6px 24px;position:relative;
  border-bottom:1px solid var(--line);color:var(--navy)}
.tier-list li:last-child{border-bottom:0}
.tier-list li::before{position:absolute;left:2px;font-weight:800}
.tier-list li.yes::before{content:"✓";color:var(--sc-hi)}
.tier-list li.no{color:var(--muted-2)}
.tier-list li.no::before{content:"–";color:var(--muted-2)}
.cat-group{font-family:var(--font-head);font-size:var(--t-label-lg);text-transform:uppercase;
  letter-spacing:.02em;color:var(--brand-dark);margin:36px 0 14px 0;font-weight:700;
  display:flex;align-items:center;gap:14px}
.cat-group::after{content:"";flex:1;height:1px;background:var(--line)}
.cat-group:first-of-type{margin-top:6px}
.prod-block{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;margin-bottom:16px;box-shadow:var(--shadow-sm);scroll-margin-top:20px;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.prod-block:hover{box-shadow:0 18px 38px -22px rgba(12,43,51,.28);transform:translateY(-2px);
  border-color:#BFE4EB}
@media(max-width:880px){
  .po-hero-prod{grid-template-columns:1fr;padding:28px 26px;gap:22px}
  .po-hero-prod-r{display:none}
  .po-hero-prod h3{font-size:24px}
  .po-hero-prod ul{grid-template-columns:1fr}
}
@media(max-width:980px){.po-soon-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.po-soon-grid{grid-template-columns:1fr}}
.prod-block.hl{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft),var(--shadow-sm)}
.prod-block-head{display:flex;gap:24px;justify-content:space-between;flex-wrap:wrap}
.prod-block-main{flex:1;min-width:270px;display:flex;flex-direction:column}
.prod-ic{width:40px;height:40px;border-radius:9px;background:var(--brand-soft);
  color:var(--brand-dark);display:inline-flex;align-items:center;justify-content:center;
  flex:0 0 auto;margin-bottom:10px}
.prod-ic .ic{width:20px;height:20px}
.prod-ic .ms{font-size:22px}
.prod-block h3{margin:0 0 8px;font-family:var(--font-head);font-size:21px;font-weight:700;
  color:var(--navy);letter-spacing:-.01em;line-height:1.2}
.avail{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.avail span{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:var(--radius-sm)}
.avail-yes{background:var(--sc-hi-soft);color:#2E7D34}
.avail-yes::before{content:"✓ "}
.avail-no{background:var(--bg-tint);color:var(--muted-2)}
.avail-no::before{content:"– "}
.prod-preview{width:240px;flex-shrink:0;background:var(--brand-soft);border:1px solid #BFE4EB;
  border-radius:9px;padding:14px 16px}
.prod-variants{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.pv{border:1px solid var(--line);border-radius:9px;padding:16px 18px;background:var(--bg-soft);
  transition:.18s}
.pv:hover{border-color:#BFE4EB;background:#fff}
.prod-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-top:15px;padding-top:14px;border-top:1px solid var(--line)}
.prod-det{margin-top:16px;border-top:1px solid var(--line)}
.prod-det summary{cursor:pointer;font-weight:600;color:var(--brand-dark);font-size:13.5px;
  padding:14px 0 14px;list-style:none;display:flex;align-items:center;gap:10px;transition:.15s;
  user-select:none}
.prod-det summary:hover{color:var(--brand)}
.prod-det summary::-webkit-details-marker{display:none}
.prod-det summary::before{content:"";width:0;height:0;border-style:solid;
  border-width:5px 0 5px 7px;border-color:transparent transparent transparent var(--brand-dark);
  transition:transform .18s}
.prod-det[open] summary::before{transform:rotate(90deg)}
.prod-det[open] summary{color:var(--navy)}
.prod-det-body{font-size:13.5px;color:var(--ink);line-height:1.65;padding:4px 0 16px 16px;
  margin:0 0 4px 5px}
.prod-det-body ul{margin:0 0 10px;padding-left:18px;list-style:disc}
.prod-det-body li{padding:3px 0;color:var(--ink)}
.prod-det-body li::marker{color:var(--brand)}
.prod-det-body p{margin:0;font-size:12.5px;color:var(--muted)}
@media(max-width:680px){
  .prod-preview{width:100%}
  .prod-variants{grid-template-columns:1fr}
}

/* ---------- Objednávka ---------- */
.obj-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:24px;align-items:start}
.obj-step{margin-bottom:14px}
.obj-step-h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.obj-step-h h3{margin:0}
.obj-num{width:28px;height:28px;border-radius:50%;background:var(--brand);color:#fff;
  font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.obj-chosen{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  background:var(--sc-hi-soft);border-radius:var(--radius-sm);padding:11px 14px;font-size:14px;
  font-weight:600;color:#2E7D34}
.obj-chosen strong{color:#2F6322}
.obj-change{background:none;border:0;color:var(--brand-dark);font-weight:700;font-size:13px;
  cursor:pointer;text-decoration:underline;font-family:inherit;padding:0}
.pay-opts{display:grid;gap:10px}
.pay-opt{position:relative;display:block;border:1.5px solid var(--line);border-radius:6px;
  padding:14px 16px 14px 44px;cursor:pointer;transition:.14s}
.pay-opt:hover{border-color:#bcd3ea}
.pay-opt.active{border-color:var(--brand);background:var(--brand-soft)}
.pay-opt input{position:absolute;left:15px;top:16px;width:17px;height:17px;accent-color:var(--brand)}
.pay-t{display:block;font-weight:800;color:var(--navy);font-size:14.5px}
.pay-d{display:block;font-size:12.8px;color:var(--muted);margin-top:2px;line-height:1.5}
.obj-consent{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:13px;color:var(--muted)}
.obj-consent input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--brand)}
#objErr{display:none;color:var(--sc-lo);font-weight:600;margin-top:10px;font-size:13px}
.req{color:var(--sc-lo);font-weight:700}
/* Pre firmy – produktové karty */
.firm-prod{display:flex;flex-direction:column}
.firm-prod-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--brand-dark)}
/* Blog – filtr a karty */
.blog-filter{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.bf-tag{font-family:inherit;font-size:13.5px;font-weight:700;padding:7px 14px;border-radius:6px;
  border:1px solid var(--line);background:#fff;color:var(--muted);cursor:pointer;transition:.14s}
.bf-tag:hover{border-color:#bcd3ea;color:var(--navy)}
.bf-tag.active{background:var(--brand);border-color:var(--brand);color:#fff}
.blog-card{display:flex;flex-direction:column}
/* Karta-odkaz s CTA vždy zarovnaným na spodok (šípka „→" v rovnakej výške naprieč gridom) */
.card-cta{display:flex;flex-direction:column;text-decoration:none;color:inherit}
.blog-card:hover{text-decoration:none}
.blog-meta{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.blog-card h3{margin:0 0 6px}
.blog-card .card-link{margin-top:auto;padding-top:8px}

/* ===== Unified blog article (zhodné pre všetky 3 typy: Názor / Novinka / Dobrá praxe) ===== */
.article-byline{display:flex;align-items:center;gap:14px;margin-top:24px;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.16)}
.article-byline .testi-ava{flex:none;width:46px;height:46px;font-size:15px}
.article-byline .article-meta strong{display:block;color:#fff;font-weight:700;font-size:15px}
.article-byline .article-meta span{color:rgba(255,255,255,.7);font-size:13px}
.article-byline [data-share-bar]{margin-left:auto}
/* 2-col layout: článok vľavo, sticky sidebar vpravo (rovnaký princíp ako metodika) */
.article-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:60px;align-items:start}
.article-side{position:sticky;top:94px;font-size:13.5px;line-height:1.55}
.article-side > * + *{margin-top:24px}
.article-side .side-block{padding-bottom:22px;border-bottom:1px solid var(--line)}
.article-side .side-block:last-child{border-bottom:0;padding-bottom:0}
.article-side h4{font-size:var(--t-label);font-weight:700;color:var(--muted-2);letter-spacing:.05em;
  text-transform:uppercase;margin:0 0 12px}
.article-side .side-author{display:flex;align-items:center;gap:12px}
.article-side .side-author .testi-ava{flex:none;width:44px;height:44px;font-size:14px}
.article-side .side-author strong{display:block;color:var(--navy);font-size:14px;font-weight:700}
.article-side .side-author span{color:var(--muted);font-size:12.5px}
.article-side .side-toc a{display:block;color:var(--muted);text-decoration:none;
  padding:6px 0 6px 12px;border-left:2px solid var(--line);transition:color .15s,border-color .15s,font-weight .15s}
.article-side .side-toc a:hover{color:var(--brand);border-color:var(--brand)}
.article-side .side-toc a.active{color:var(--brand-dark);border-color:var(--brand);font-weight:700}
.article-side .side-share [data-share-bar]{display:flex;gap:8px}
@media(max-width:980px){
  /* minmax(0,1fr): holé 1fr berie min-width:auto z obsahu a široké tabuľky
     pretiahli stránku na mobile o 200–340 px (QA 16. 9. 2026) */
  .article-layout{grid-template-columns:minmax(0,1fr);gap:36px}
  .article-side{position:static}
}
.article-body{font-size:16px;line-height:1.7;color:var(--ink);max-width:none;min-width:0}
.article-body > * + *{margin-top:14px}
/* tw diely v article-layout (redizajn 14. 9. 2026): kontajnery prototypu
   sa roztiahnu na stĺpec článku – šírku a okraje rieši vonkajší .container;
   vo flexoch prototypu rytmus nerobia marginy ale gap, tak sa deti nulujú */
.article-body .pribeh-tw [class*="container"]{max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0}
.article-body .pribeh-tw [class*="flex"] > *{margin-top:0 !important;margin-bottom:0 !important}

/* ============ KÁNON VERTIKÁLNEHO RYTMU (celý web, 14. 9. 2026) ============
   Jediný zdroj zvislých medzier v toku článku sú TIETO pravidlá. Bloky si
   NESMÚ niesť vlastné zvislé marginy – ani v triede, ani inline. Preto
   !important: prvá verzia kánonu prehrávala s inline margin:0 0 10px na
   kartách a medzery boli zas raz rôzne (blok–odstavec 18 px hore, 0 px dole).
   Hodnoty: odstavec+odstavec 14 px, blok pred aj za sebou VŽDY 22 px.
   Mriežky si medzery riadia gap-om – ich deti sa nulujú nižšie. */
.article-body p + p{margin-top:14px}
.article-body :is(h2,h3) + :is(p,ul,ol){margin-top:10px}
.article-body :is(div,figure,table,pre,blockquote) + p{margin-top:22px !important}
.article-body p + :is(div,figure,table,pre,blockquote){margin-top:22px !important}
.article-body > :is(div,figure,table,pre,blockquote){margin-top:22px !important;margin-bottom:22px !important}
.article-body :is(div,figure,table,pre,blockquote) + :is(div,figure,table,pre,blockquote){margin-top:22px !important}
/* vnútro mriežok: rytmus rieši gap, marginy detí by rozbili riadky.
   Patria sem VŠETKY gap-ované kontajnery – aj tie, čo nemajú „grid“
   v názve (.sl-flat rozhodil karty o 22 px, 14. 9. 2026). Nový layout
   s display:grid/flex a gap-om MUSÍ pribudnúť do tohto zoznamu.
   Inline zapísané flexy a mriežky (style="display:flex/grid" v skriptom
   skladanom markupe príbehov) sem patria tiež – bez nich dostal druhý bar
   v dueli dielu 5 kánonových 22 px zhora a dvojica barov nesedela na
   jednej linke (16. 9. 2026). */
.article-body :is([class*="grid"],[class*="g-2"],[class*="g-3"],
  [style*="display:flex"],[style*="display:grid"],
  .sl-flat,.sl-split,.sl-kv,.rank-list,.sl-pill) > *{margin-top:0 !important;margin-bottom:0 !important}
.article-body h2{font-family:var(--font-head);font-size:24px;color:var(--navy);
  margin:36px 0 0;line-height:1.3;letter-spacing:-.01em;scroll-margin-top:94px}
.article-body h3{font-family:var(--font-head);font-size:19px;color:var(--navy);
  margin:28px 0 0;font-weight:600}
/* „… v skratke“ – dvojice popisok/hodnota v karte faktov. Rytmus článku
   (blok+blok = 22 px) platí v akejkoľvek hĺbke, takže vnútri dvojice bolo
   viac miesta než medzi dvojicami a hodnota vyzerala, že patrí k ďalšiemu
   popisku (16. 9. 2026). Dvojica je komponent: drží sa pokope sama. */
.fakty{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 28px}
.fakty .fakty-i{margin:0 !important}
.fakty .fakty-k{font-size:12.5px;line-height:1.35;text-transform:uppercase;
  letter-spacing:.04em;font-weight:600;color:var(--muted);margin:0 0 4px !important}
.fakty .fakty-v{font-weight:600;color:var(--navy);margin:0 !important}
.fakty a.fakty-v{color:var(--brand-dark)}

.article-body p{margin:0}
/* obsah článku a bočný panel s osnovou začínajú na rovnakej výške */
.article-body > :first-child{margin-top:0 !important}
/* diel 1 začína nadpisom, ktorý má z kánonu 36 px zhora – v mriežke
   s osnovou musí obsah začať na rovnakej výške ako bočný panel */
.article-body > h2:first-child,.article-body > h3:first-child{margin-top:0 !important}
.article-body strong{color:var(--navy)}
/* Popisky verzálkami v kartách článku nesú farbu značky – stránka potom nie je
   len čierny text na bielej (15. 9. 2026, na žiadosť). */
.article-body [style*="uppercase"],.article-body .tiny.muted[style*="uppercase"]{
  color:var(--brand-dark)}
.article-body em{font-style:italic}
.article-body ul,.article-body ol{padding-left:24px;line-height:1.7}
/* globálny reset ul{list-style:none} nechával odsadený zoznam bez odrážok –
   vyzeral ako nezarovnané odstavce. Priame zoznamy článku odrážky majú;
   dizajnové zoznamy hlbšie (karty, piluľky) si štýl riadia samy. */
.article-body > ul{list-style:disc}
.article-body > ul > li::marker{color:var(--muted-2)}
.article-body li + li{margin-top:8px}
.article-body a{color:var(--brand-dark);font-weight:600}
.article-body .pull-quote{border-left:0;background:var(--bg-soft);border-radius:8px;
  padding:24px 28px;margin:28px 0;font-family:var(--font-head);font-size:21px;
  line-height:1.5;color:var(--navy);font-style:italic;font-weight:500}
.article-bio{display:flex;gap:18px;align-items:flex-start;margin-top:36px}
.article-bio .testi-ava{flex:none;width:56px;height:56px;font-size:18px}
.article-bio .lbl{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:6px}
.article-bio p{margin:0;font-size:14.5px;line-height:1.6;color:var(--muted)}
.article-share-foot{text-align:center;padding:36px 0 0;border-top:1px solid var(--line);margin-top:36px}
.article-share-foot h3{margin:0 0 22px;color:var(--navy);font-size:18px}
.article-share-foot [data-share-bar]{justify-content:center;display:flex}
.obj-summary{position:sticky;top:18px}
.obj-sum-cap{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-2)}
.obj-sum-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;
  border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}
.obj-sum-row:first-of-type{margin-top:10px}
.obj-sum-row strong{color:var(--navy);font-variant-numeric:tabular-nums}
.obj-sum-total{border-bottom:0;color:var(--navy);font-weight:700;padding-top:11px}
.obj-sum-total strong{font-size:19px}
.thanks-ic{width:62px;height:62px;border-radius:50%;background:var(--sc-hi-soft);color:var(--sc-hi);
  font-size:32px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
@media(max-width:780px){
  .obj-grid{grid-template-columns:1fr}
  .obj-summary{position:static}
}

/* === STITCH-INSPIROVANÉ KOMPONENTY (profil okresu) === */
/* Header row: breadcrumb + h1 + meta + tlačítko download */
.obec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:20px}
.obec-head .crumbs-mini{font-size:13px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.obec-head .crumbs-mini a{color:var(--brand);text-decoration:none}
.obec-head .crumbs-mini strong{color:var(--navy)}
.obec-head .obec-meta{display:flex;gap:14px;flex-wrap:wrap;align-items:center;font-size:14px;margin-top:6px}
.obec-head .obec-meta .ms{color:var(--brand);font-size:1.15em}
.obec-dl{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;
  padding:11px 18px;border-radius:4px;font-weight:600;font-size:13px;text-transform:uppercase;
  letter-spacing:0.02em;text-decoration:none;transition:transform .12s,box-shadow .12s}
.obec-dl:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(12,43,51,0.2);color:#fff;text-decoration:none}
.obec-dl .ms{font-size:1.25em}

/* Bento grid */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.bento-gauge{grid-column:span 12;display:flex;flex-direction:column;align-items:center;text-align:center}
.bento-stats{grid-column:span 12;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bento-ai{grid-column:span 12}
@media(min-width:920px){
  .bento-gauge{grid-column:span 5}
  .bento-stats{grid-column:span 7}
}
@media(max-width:560px){.bento-stats{grid-template-columns:1fr}}

/* Bottom row pod donutem */
.gauge-foot{display:flex;align-items:center;width:100%;margin-top:18px;padding-top:16px;
  border-top:1px solid var(--line);justify-content:space-around}
.gf-cell{text-align:center;flex:1}
.gf-sep{width:1px;height:32px;background:var(--line)}

/* Tmavá navy karta */
.card-navy{background:var(--navy-gradient);color:#fff;position:relative;overflow:hidden}
.card-navy h2,.card-navy h3,.card-navy h4{color:#fff}
.card-navy .eyebrow,.eyebrow-light{color:rgba(255,255,255,0.62)}
.card-navy .card-ic{position:absolute;top:18px;right:18px;font-size:24px;color:var(--brand)}
.card-navy::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--navy-glow)}
.card-navy>*{position:relative;z-index:1}
/* ac-checks na navy podklade — biele odfajknutia + biely text */
.card-navy .ac-checks li{color:rgba(255,255,255,.92)}
.card-navy .ac-chk{color:#9EE07F}
.card-navy .ac-chk .ic{stroke-width:3}
.card-navy p{color:rgba(255,255,255,.78)}
.card-navy a:not(.btn){color:#fff}
/* ac-checks vycentrované horizontálne (varianta s class) */

/* Ghost button na navy podklade */
/* na navy podklade: primár biely (ako .cta-final), ghost priehľadný – jeden predpis */
.card-navy .btn-primary{background:#fff;color:var(--navy);border-color:#fff}
.card-navy .btn-primary:hover{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--navy)}
.card-navy .btn-ghost,.btn-on-navy{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.card-navy .btn-ghost:hover,.btn-on-navy:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
/* Form na navy podklade */
.card-navy .field label{color:rgba(255,255,255,.75)}
.card-navy .input,.card-navy .select{background:rgba(255,255,255,.95);border-color:rgba(255,255,255,.2);color:var(--navy)}
.card-navy .input:focus,.card-navy .select:focus{border-color:#fff;background:#fff}
.card-navy .tiny.muted{color:rgba(255,255,255,.55)!important}
.rank-lbl{font-size:15px;color:rgba(255,255,255,0.78);margin:0 0 14px;line-height:1.35}
.rank-trend{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--accent);font-weight:600}
.rank-trend.down{color:var(--red)}
@media(max-width:680px){.ai-grid{grid-template-columns:1fr}}

/* === Stitch-inspired tmavý hero (homepage) === */
.hero-dark{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;background:var(--navy-gradient);margin-top:-70px}
.hero-dark-bg{position:absolute;inset:0;z-index:0}
.hero-dark-bg img{width:100%;height:100%;object-fit:cover;object-position:center}
.hero-dark-overlay{position:absolute;inset:0;
  background:
    linear-gradient(to top, rgba(9,36,46,.95) 0%, rgba(9,36,46,.85) 5%, rgba(9,36,46,0) 24%),
    linear-gradient(100deg, rgba(9,36,46,.88) 0%, rgba(9,36,46,.66) 42%, rgba(9,36,46,.14) 100%)}
.hero-dark-inner{position:relative;z-index:1;color:#fff;padding-top:118px;padding-bottom:180px}
.hero-dark-inner h1{color:#fff;font-size:clamp(30px,4.4vw,52px);line-height:1.08;letter-spacing:-0.01em;max-width:760px;margin:0 0 18px}
.hero-dark-lead{color:rgba(255,255,255,0.86);font-size:clamp(15px,1.5vw,19px);line-height:1.55;max-width:600px;margin:0 0 26px}
.hero-search{position:relative;max-width:600px;margin-bottom:16px}
.hero-search input{width:100%;height:60px;padding:0 130px 0 52px;border-radius:6px;
  border:1px solid rgba(255,255,255,0.18);
  font-family:inherit;font-size:16px;color:#fff;background:rgba(255,255,255,0.08);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 36px -10px rgba(0,0,0,0.4);outline:none;transition:border-color .15s,background .15s}
.hero-search input::placeholder{color:rgba(255,255,255,0.62)}
.hero-search input:focus{border-color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.12);
  box-shadow:0 0 0 3px rgba(46,173,194,0.45),0 12px 36px -10px rgba(0,0,0,0.4)}
.hero-search-ic{position:absolute;left:0;top:0;bottom:0;width:52px;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.9);font-size:12px;z-index:1;pointer-events:none}
.hero-search-btn{position:absolute;right:8px;top:8px;bottom:8px;display:inline-flex;align-items:center;gap:7px;
  padding:0 22px;border-radius:var(--radius-sm);background:var(--brand-dark);color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:background .15s}
.hero-search-btn .ms,.hero-search-btn [data-ic]{font-size:18px}
.hero-search-btn:hover{background:var(--brand-dark,#238A9B);color:#fff;text-decoration:none}
.hero-quick{font-size:13.5px;color:rgba(255,255,255,0.72);margin-bottom:34px}
.hero-quick a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.35)}
.hero-quick a:hover{border-color:#fff}
.hero-stats{display:flex;gap:48px;flex-wrap:wrap}
.hero-listing .hero-stats{margin-top:26px}
.hero-stats .hs-num{display:block;font-size:30px;font-weight:800;line-height:1;color:#fff}
.hero-stats .hs-lbl{font-weight:700;display:block;font-size:var(--t-label);text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,0.66);margin-top:6px}
@media(max-width:640px){
  .hero-dark{min-height:480px}
  .hero-search input{height:54px;padding-right:108px}
  .hero-stats{gap:28px}
  .hero-stats .hs-num{font-size:24px}
}

/* === Hero 2-stĺpcový grid + žebříček top okresů === */
.hero-dark-grid{display:grid;grid-template-columns:1fr;gap:36px;align-items:center}
@media(min-width:980px){.hero-dark-grid{grid-template-columns:minmax(0,1fr) 410px;gap:48px}}
/* === Hero žebříček: rotujúca Top-3 glass karta (Stitch design) === */
.hero-rank-card{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.18);
  border-radius:var(--radius);padding:32px 32px 26px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 24px 60px -18px rgba(0,0,0,0.55);color:#fff}
.hrk-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:26px}
.hrk-eyebrow{font-size:var(--t-label-lg);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:rgba(255,255,255,0.7)}
.hrk-dots{display:flex;gap:7px}
.hrk-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.22);cursor:pointer;transition:all .25s}
.hrk-dot.is-active{background:#fff;transform:scale(1.25)}
.hrk-slides{position:relative;min-height:272px}
.hrk-slide{position:absolute;inset:0;display:block;text-decoration:none;color:#fff;
  opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .5s ease,transform .5s ease}
.hrk-slide.is-active{position:relative;opacity:1;transform:none;pointer-events:auto}
.hrk-slide-top{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:28px}
.hrk-place{display:block;font-size:var(--t-label-lg);font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--brand-2,#7fb1f0);margin-bottom:4px}
.hrk-city{margin:0;font-size:32px;line-height:1.1;font-weight:800;color:#fff}
.hrk-kraj{display:block;font-size:13.5px;color:rgba(255,255,255,0.6);margin-top:4px}
.hrk-score-wrap{text-align:right;flex-shrink:0}
.hrk-score{font-size:46px;font-weight:800;line-height:1;display:block}

/* === Prístupnosť (a11y) === */
/* Viditeľný focus iba pri navigácii klávesnicou (myš ho nevyvolá) */
a:focus-visible,button:focus-visible,.btn:focus-visible,select:focus-visible,.select:focus-visible,
input:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
.nav-links a:focus-visible,.lang-link:focus-visible,.burger:focus-visible,.acc-q:focus-visible{
  outline:2px solid var(--brand-dark);outline-offset:2px;border-radius:2px}
/* na tmavom podklade (hero, transparentná nav, navy sekcie) svetlý focus */
.hero-dark :focus-visible,.nav--transparent :focus-visible,.section-navy :focus-visible{outline-color:#fff}
/* Rešpektuj používateľov s obmedzením pohybu – stlmí animácie */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}
.hrk-score-lbl{font-weight:700;display:block;font-size:var(--t-label);letter-spacing:.05em;text-transform:uppercase;color:rgba(255,255,255,0.55);margin-top:5px}
.hrk-bars{display:flex;flex-direction:column;gap:17px}
.hrk-bar-head{display:flex;justify-content:space-between;font-size:14px;font-weight:500;color:rgba(255,255,255,0.82);margin-bottom:7px}
.hrk-track{height:8px;border-radius:999px;background:rgba(255,255,255,.16);overflow:hidden}
.hrk-fill{height:100%;border-radius:999px;transition:width .6s ease}
.hrk-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:26px;
  font-size:14px;font-weight:700;color:rgba(255,255,255,0.65);text-decoration:none;transition:color .15s}
.hrk-foot:hover{color:#fff}
.hrk-foot:hover .hrk-arrow{transform:translateX(3px)}
.hrk-arrow{transition:transform .15s}
@media(max-width:979px){.hero-rank-card{max-width:440px}}

/* === Nové vydanie: blok prekrývajúci hero (Stitch design) === */
/* Karta prekrýva spodok hera (margin-top -110px), preto je horných 110 px
   priehľadných. Zvyšok mal prechod do --bg-soft, aby nadviazal na vtedy šedú
   sekciu pod sebou – tá je dnes biela (.section-soft{background:#fff}), takže
   z prechodu ostal osamotený šedý pruh cez celú šírku. Bez pozadia sa pás
   zlieva s bielym telom aj s nasledujúcou sekciou. */
.release-wrap{position:relative;z-index:20;margin-top:-110px;padding-bottom:42px}
.release-card{display:flex;flex-direction:column;background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 30px 70px -28px rgba(12,43,51,0.55);text-decoration:none;color:inherit;
  transition:transform .25s ease,box-shadow .25s ease}
.release-card:hover{transform:translateY(-2px);box-shadow:0 42px 84px -28px rgba(12,43,51,0.6);text-decoration:none}
.release-media{position:relative;min-height:220px;background:linear-gradient(135deg,var(--brand),var(--navy))}
.release-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
.release-media.no-img img{display:none}
.release-badge{position:absolute;top:16px;left:16px;background:var(--navy);color:#fff;
  font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:6px 11px;border-radius:var(--radius-sm)}
.release-body{padding:30px 34px;display:flex;flex-direction:column;justify-content:center;flex:1}
.release-body h2{margin:8px 0 12px;color:var(--navy);font-size:clamp(21px,2.4vw,30px);line-height:1.16}
.release-body p{color:var(--muted);font-size:16px;line-height:1.55;margin:0 0 24px;max-width:48ch}
.release-cta{align-self:flex-start}
@media(min-width:760px){
  .release-card{flex-direction:row}
  .release-media{flex:0 0 46%;min-height:300px}
  .release-body{padding:40px 44px}
}

/* === Glass moment: tmavá referenčná sekcia s frosted kartami === */
.ref-glass-section{position:relative;overflow:hidden;
  background:var(--navy-gradient)}
/* fotka mesta v pozadí pre vizuálnu konzistenciu s hero/CTA – silne stmavená */
.ref-glass-section::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("hero-bratislava.jpg");background-size:cover;background-position:center 55%;
  opacity:1}
.ref-glass-section::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to top, rgba(9,36,46,.95) 0%, rgba(9,36,46,.85) 5%, rgba(9,36,46,0) 24%),
    linear-gradient(100deg, rgba(9,36,46,.88) 0%, rgba(9,36,46,.66) 42%, rgba(9,36,46,.14) 100%)}
.ref-glass-section > .container{position:relative;z-index:1}
.ref-glass-section .muted{color:rgba(255,255,255,.78)}
.ref-glass-section .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.ref-glass-section .btn-ghost:hover{background:rgba(255,255,255,.2);color:#fff;border-color:rgba(255,255,255,.45)}
.card-glass{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#fff;
  box-shadow:0 24px 60px -28px rgba(0,0,0,0.55)}
.card-glass h3,.card-glass strong{color:#fff}
.card-glass p,.card-glass .small{color:rgba(255,255,255,0.86)}
.card-glass .muted{color:rgba(255,255,255,0.58)}
.card-glass.card-hover:hover{border-color:rgba(255,255,255,0.3)}

/* CTA pruhy na podstránkach = frosted glass panel na gradiente (bez zásahu do HTML).
   Cieli iba CTA pruhy (.container.center vnútri .section-navy), nie homepage referenciu. */
.section-navy .container.center{
  max-width:720px;width:calc(100% - 32px);margin-left:auto;margin-right:auto;
  background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -28px rgba(0,0,0,0.55);
  padding:clamp(30px,5vw,48px) clamp(22px,4vw,44px)}
.section-navy .container.center .input{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.22);color:#fff}
.section-navy .container.center .input::placeholder{color:rgba(255,255,255,0.55)}

/* === Pre-sales režim: skryť predajné prvky (1.–3. rok len ukázať) ===
   Zrušenie predaja = zmazať tento blok. */
.presale-hide{display:none!important}
a[href^="objednavka"]{display:none!important}
.pay-opts,.pay-opt,.pay-t,.pay-d,.prod-foot,.firm-prod-foot{display:none!important}

/* === §2b Katalóg 29 indexov – rozbaľovací per-index výpočet === */
.met-kat-det{margin-top:5px}
.met-kat-det>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
  font-size:12.5px;font-weight:700;color:var(--brand-dark);letter-spacing:.02em;user-select:none}
.met-kat-det>summary::-webkit-details-marker{display:none}
.met-kat-det>summary::before{content:"+";font-weight:700;font-size:15px;line-height:1;width:12px;text-align:center}
.met-kat-det[open]>summary::before{content:"\2013"}
.met-kat-body{margin-top:8px;padding:12px 14px;background:var(--bg-soft);
  border:1px solid var(--line);border-radius:8px}
/* #metKatalog scope – prebije .met-sec p{font-size:16px} z inline <style> stránky */
#metKatalog .met-kat-body p{margin:0 0 8px;font-size:12.5px;line-height:1.55}
#metKatalog .met-kat-body p:last-child{margin-bottom:0}
#metKatalog .met-kat-src{color:var(--muted);font-size:12.5px}
/* pevný layout – sloupce Váha/Zdroj zarovnané naprieč piliermi aj po rozbalení */
#metKatalog table.met-kat-table{width:100%;table-layout:fixed}
.met-kat-table .c-idx{width:84%}
.met-kat-table .c-vaha{width:16%}
.met-kat-table td{vertical-align:top;overflow-wrap:break-word}

/* === OvD rebrand: logo = znak + HTML wordmark (SK lokalizace logotypu) === */
.logo-znak{height:28px;width:auto;display:block;flex:none}
.logo-word{font-family:var(--font);font-weight:800;font-size:17.5px;letter-spacing:.01em;color:inherit;white-space:nowrap;line-height:1}
.logo-word em{font-style:normal;font-weight:300;letter-spacing:.14em}
/* === Referencie: prípadová štúdia (náhrada video-referencie) === */
.vidref-stat{height:140px;border-radius:7px;background:linear-gradient(135deg,#14424E,var(--navy));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px}
/* === Formspree formuláre – stavová hláška === */
.fs-msg{display:none;margin-top:12px;padding:12px 14px;border-radius:8px;font-size:14px;color:#fff}

/* === Tím: karty s medailónikom (uneseú dlhší text – ľavé zarovnanie, 2 stĺpce) === */
/* Karty tímu majú rovnakú stavbu, aby v riadku začínali aj končili na rovnakej
   úrovni: avatar má pevnú veľkosť (hlavička je teda všade rovnako vysoká),
   .team-ident drží meno a rolu na spoločnej základni aj pri dvojriadkovom mene
   a .team-bio sa roztiahne, takže e-mail sedí na spodku každej karty bez ohľadu
   na dĺžku životopisu. */
.team-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  align-items:stretch}
.team-card{display:flex;flex-direction:column;height:100%;background:#fff;
  border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;
  box-shadow:var(--shadow-sm)}
.team-head{display:flex;align-items:center;gap:18px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--line);min-height:104px}
/* Iniciály ostávajú v HTML pod fotkou ako záloha: keby sa obrázok
   nenačítal, koliesko nie je prázdne. Fotka ich prekryje. */
.team-ava{width:84px;height:84px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;background:var(--bg-tint);color:var(--navy);
  font-family:var(--font-head);font-weight:700;font-size:26px;letter-spacing:.01em;
  position:relative;overflow:hidden}
.team-ava img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  border-radius:50%}
.team-ident{min-width:0}
.team-name{margin:0;font-size:17.5px;line-height:1.25;color:var(--navy)}
.team-role{margin:5px 0 0;font-size:12.5px;font-weight:600;color:var(--brand-dark)}
.team-bio{flex:1}
.team-bio p{margin:0 0 11px;font-size:14px;line-height:1.7;color:var(--muted)}
.team-bio p:last-child{margin-bottom:0}
@media(max-width:860px){.team-grid{grid-template-columns:1fr}
  .team-card{padding:22px 22px}
  .team-head{min-height:0}
  .team-ava{width:66px;height:66px;font-size:21px}}

/* ============================================================
   Fotka mesta v hero páse profilu obce
   ------------------------------------------------------------
   Každé mesto má vlastnú fotku v assets/mesta/<slug>.jpg.
   Zámerne bez záložnej vrstvy: prehliadač sťahuje každú vrstvu
   background-image, aj tú prekrytú, takže záloha stála 121 kB
   na každom profile. Mestá bez fotky majú vlastné pravidlo nižšie.
   Nahradenie fotky = nahrať súbor, nič v kóde.
   ============================================================ */
body[data-obec="banovce-nad-bebravou"] .obec-hero-band::before,
body[data-obec="banovce-nad-bebravou"] .cta-final::before{background-image:url("mesta/banovce-nad-bebravou.jpg")}  /* Bánovce nad Bebravou */
body[data-obec="banska-bystrica"] .obec-hero-band::before,
body[data-obec="banska-bystrica"] .cta-final::before{background-image:url("mesta/banska-bystrica.jpg")}  /* Banská Bystrica */
body[data-obec="banska-stiavnica"] .obec-hero-band::before,
body[data-obec="banska-stiavnica"] .cta-final::before{background-image:url("mesta/banska-stiavnica.jpg")}  /* Banská Štiavnica */
body[data-obec="bardejov"] .obec-hero-band::before,
body[data-obec="bardejov"] .cta-final::before{background-image:url("mesta/bardejov.jpg")}  /* Bardejov */
body[data-obec="bratislava"] .obec-hero-band::before,
body[data-obec="bratislava"] .cta-final::before{background-image:url("mesta/bratislava.jpg")}  /* Bratislava */
body[data-obec="brezno"] .obec-hero-band::before,
body[data-obec="brezno"] .cta-final::before{background-image:url("mesta/brezno.jpg")}  /* Brezno */
body[data-obec="bytca"] .obec-hero-band::before,
body[data-obec="bytca"] .cta-final::before{background-image:url("mesta/bytca.jpg")}  /* Bytča */
body[data-obec="cadca"] .obec-hero-band::before,
body[data-obec="cadca"] .cta-final::before{background-image:url("mesta/cadca.jpg")}  /* Čadca */
body[data-obec="detva"] .obec-hero-band::before,
body[data-obec="detva"] .cta-final::before{background-image:url("mesta/detva.jpg")}  /* Detva */
body[data-obec="dolny-kubin"] .obec-hero-band::before,
body[data-obec="dolny-kubin"] .cta-final::before{background-image:url("mesta/dolny-kubin.jpg")}  /* Dolný Kubín */
body[data-obec="dunajska-streda"] .obec-hero-band::before,
body[data-obec="dunajska-streda"] .cta-final::before{background-image:url("mesta/dunajska-streda.jpg")}  /* Dunajská Streda */
body[data-obec="galanta"] .obec-hero-band::before,
body[data-obec="galanta"] .cta-final::before{background-image:url("mesta/galanta.jpg")}  /* Galanta */
body[data-obec="gelnica"] .obec-hero-band::before,
body[data-obec="gelnica"] .cta-final::before{background-image:url("mesta/gelnica.jpg")}  /* Gelnica */
body[data-obec="hlohovec"] .obec-hero-band::before,
body[data-obec="hlohovec"] .cta-final::before{background-image:url("mesta/hlohovec.jpg")}  /* Hlohovec */
body[data-obec="kezmarok"] .obec-hero-band::before,
body[data-obec="kezmarok"] .cta-final::before{background-image:url("mesta/kezmarok.jpg")}  /* Kežmarok */
body[data-obec="komarno"] .obec-hero-band::before,
body[data-obec="komarno"] .cta-final::before{background-image:url("mesta/komarno.jpg")}  /* Komárno */
body[data-obec="kosice"] .obec-hero-band::before,
body[data-obec="kosice"] .cta-final::before{background-image:url("mesta/kosice.jpg")}  /* Košice */
body[data-obec="krupina"] .obec-hero-band::before,
body[data-obec="krupina"] .cta-final::before{background-image:url("mesta/krupina.jpg")}  /* Krupina */
body[data-obec="kysucke-nove-mesto"] .obec-hero-band::before,
body[data-obec="kysucke-nove-mesto"] .cta-final::before{background-image:url("mesta/kysucke-nove-mesto.jpg")}  /* Kysucké Nové Mesto */
body[data-obec="levice"] .obec-hero-band::before,
body[data-obec="levice"] .cta-final::before{background-image:url("mesta/levice.jpg")}  /* Levice */
body[data-obec="levoca"] .obec-hero-band::before,
body[data-obec="levoca"] .cta-final::before{background-image:url("mesta/levoca.jpg")}  /* Levoča */
body[data-obec="liptovsky-mikulas"] .obec-hero-band::before,
body[data-obec="liptovsky-mikulas"] .cta-final::before{background-image:url("mesta/liptovsky-mikulas.jpg")}  /* Liptovský Mikuláš */
body[data-obec="lucenec"] .obec-hero-band::before,
body[data-obec="lucenec"] .cta-final::before{background-image:url("mesta/lucenec.jpg")}  /* Lučenec */
body[data-obec="malacky"] .obec-hero-band::before,
body[data-obec="malacky"] .cta-final::before{background-image:url("mesta/malacky.jpg")}  /* Malacky */
body[data-obec="martin"] .obec-hero-band::before,
body[data-obec="martin"] .cta-final::before{background-image:url("mesta/martin.jpg")}  /* Martin */
body[data-obec="medzilaborce"] .obec-hero-band::before,
body[data-obec="medzilaborce"] .cta-final::before{background-image:url("mesta/medzilaborce.jpg")}  /* Medzilaborce */
body[data-obec="michalovce"] .obec-hero-band::before,
body[data-obec="michalovce"] .cta-final::before{background-image:url("mesta/michalovce.jpg")}  /* Michalovce */
body[data-obec="myjava"] .obec-hero-band::before,
body[data-obec="myjava"] .cta-final::before{background-image:url("mesta/myjava.jpg")}  /* Myjava */
body[data-obec="namestovo"] .obec-hero-band::before,
body[data-obec="namestovo"] .cta-final::before{background-image:url("mesta/namestovo.jpg")}  /* Námestovo */
body[data-obec="nitra"] .obec-hero-band::before,
body[data-obec="nitra"] .cta-final::before{background-image:url("mesta/nitra.jpg")}  /* Nitra */
body[data-obec="nove-mesto-nad-vahom"] .obec-hero-band::before,
body[data-obec="nove-mesto-nad-vahom"] .cta-final::before{background-image:url("mesta/nove-mesto-nad-vahom.jpg")}  /* Nové Mesto nad Váhom */
body[data-obec="partizanske"] .obec-hero-band::before,
body[data-obec="partizanske"] .cta-final::before{background-image:url("mesta/partizanske.jpg")}  /* Partizánske */
body[data-obec="pezinok"] .obec-hero-band::before,
body[data-obec="pezinok"] .cta-final::before{background-image:url("mesta/pezinok.jpg")}  /* Pezinok */
body[data-obec="poprad"] .obec-hero-band::before,
body[data-obec="poprad"] .cta-final::before{background-image:url("mesta/poprad.jpg")}  /* Poprad */
body[data-obec="povazska-bystrica"] .obec-hero-band::before,
body[data-obec="povazska-bystrica"] .cta-final::before{background-image:url("mesta/povazska-bystrica.jpg")}  /* Považská Bystrica */
body[data-obec="presov"] .obec-hero-band::before,
body[data-obec="presov"] .cta-final::before{background-image:url("mesta/presov.jpg")}  /* Prešov */
body[data-obec="prievidza"] .obec-hero-band::before,
body[data-obec="prievidza"] .cta-final::before{background-image:url("mesta/prievidza.jpg")}  /* Prievidza */
body[data-obec="puchov"] .obec-hero-band::before,
body[data-obec="puchov"] .cta-final::before{background-image:url("mesta/puchov.jpg")}  /* Púchov */
body[data-obec="rimavska-sobota"] .obec-hero-band::before,
body[data-obec="rimavska-sobota"] .cta-final::before{background-image:url("mesta/rimavska-sobota.jpg")}  /* Rimavská Sobota */
body[data-obec="roznava"] .obec-hero-band::before,
body[data-obec="roznava"] .cta-final::before{background-image:url("mesta/roznava.jpg")}  /* Rožňava */
body[data-obec="ruzomberok"] .obec-hero-band::before,
body[data-obec="ruzomberok"] .cta-final::before{background-image:url("mesta/ruzomberok.jpg")}  /* Ružomberok */
body[data-obec="sabinov"] .obec-hero-band::before,
body[data-obec="sabinov"] .cta-final::before{background-image:url("mesta/sabinov.jpg")}  /* Sabinov */
body[data-obec="sala"] .obec-hero-band::before,
body[data-obec="sala"] .cta-final::before{background-image:url("mesta/sala.jpg")}  /* Šaľa */
body[data-obec="senec"] .obec-hero-band::before,
body[data-obec="senec"] .cta-final::before{background-image:url("mesta/senec.jpg")}  /* Senec */
body[data-obec="senica"] .obec-hero-band::before,
body[data-obec="senica"] .cta-final::before{background-image:url("mesta/senica.jpg")}  /* Senica */
body[data-obec="skalica"] .obec-hero-band::before,
body[data-obec="skalica"] .cta-final::before{background-image:url("mesta/skalica.jpg")}  /* Skalica */
body[data-obec="snina"] .obec-hero-band::before,
body[data-obec="snina"] .cta-final::before{background-image:url("mesta/snina.jpg")}  /* Snina */
body[data-obec="sobrance"] .obec-hero-band::before,
body[data-obec="sobrance"] .cta-final::before{background-image:url("mesta/sobrance.jpg")}  /* Sobrance */
body[data-obec="spisska-nova-ves"] .obec-hero-band::before,
body[data-obec="spisska-nova-ves"] .cta-final::before{background-image:url("mesta/spisska-nova-ves.jpg")}  /* Spišská Nová Ves */
body[data-obec="stara-lubovna"] .obec-hero-band::before,
body[data-obec="stara-lubovna"] .cta-final::before{background-image:url("mesta/stara-lubovna.jpg")}  /* Stará Ľubovňa */
body[data-obec="svidnik"] .obec-hero-band::before,
body[data-obec="svidnik"] .cta-final::before{background-image:url("mesta/svidnik.jpg")}  /* Svidník */
body[data-obec="topolcany"] .obec-hero-band::before,
body[data-obec="topolcany"] .cta-final::before{background-image:url("mesta/topolcany.jpg")}  /* Topoľčany */
body[data-obec="trencin"] .obec-hero-band::before,
body[data-obec="trencin"] .cta-final::before{background-image:url("mesta/trencin.jpg")}  /* Trenčín */
body[data-obec="trnava"] .obec-hero-band::before,
body[data-obec="trnava"] .cta-final::before{background-image:url("mesta/trnava.jpg")}  /* Trnava */
body[data-obec="turcianske-teplice"] .obec-hero-band::before,
body[data-obec="turcianske-teplice"] .cta-final::before{background-image:url("mesta/turcianske-teplice.jpg")}  /* Turčianske Teplice */
body[data-obec="tvrdosin"] .obec-hero-band::before,
body[data-obec="tvrdosin"] .cta-final::before{background-image:url("mesta/tvrdosin.jpg")}  /* Tvrdošín */
body[data-obec="velky-krtis"] .obec-hero-band::before,
body[data-obec="velky-krtis"] .cta-final::before{background-image:url("mesta/velky-krtis.jpg")}  /* Veľký Krtíš */
body[data-obec="vranov-nad-toplou"] .obec-hero-band::before,
body[data-obec="vranov-nad-toplou"] .cta-final::before{background-image:url("mesta/vranov-nad-toplou.jpg")}  /* Vranov nad Topľou */
body[data-obec="zarnovica"] .obec-hero-band::before,
body[data-obec="zarnovica"] .cta-final::before{background-image:url("mesta/zarnovica.jpg")}  /* Žarnovica */
body[data-obec="ziar-nad-hronom"] .obec-hero-band::before,
body[data-obec="ziar-nad-hronom"] .cta-final::before{background-image:url("mesta/ziar-nad-hronom.jpg")}  /* Žiar nad Hronom */
body[data-obec="zilina"] .obec-hero-band::before,
body[data-obec="zilina"] .cta-final::before{background-image:url("mesta/zilina.jpg")}  /* Žilina */
body[data-obec="zlate-moravce"] .obec-hero-band::before,
body[data-obec="zlate-moravce"] .cta-final::before{background-image:url("mesta/zlate-moravce.jpg")}  /* Zlaté Moravce */
body[data-obec="zvolen"] .obec-hero-band::before,
body[data-obec="zvolen"] .cta-final::before{background-image:url("mesta/zvolen.jpg")}  /* Zvolen */

/* ---------- Ochrana proti vodorovnému přetečení ----------
   Mapa (leaflet) i široké tabulky umějí roztáhnout stránku do strany.
   Tělo stránky se nesmí posouvat vodorovně nikdy; široký obsah
   se posouvá uvnitř svého vlastního rámu. */
/* Guard dáváme na konkrétní viníky, ne na html/body:
   overflow na kořeni rozbíjí scrollování i position:sticky. */
.home-map-card{overflow:hidden}
.grid > *{min-width:0}

/* Logotyp na úzkém mobilu – musí být až tady, za definicí .logo-word výše,
   jinak ho přebije. Bez zmenšení se logo, jazyky a hamburger nevejdou
   do 375px a stránka se dala posouvat do strany. */
@media (max-width:620px){
  .logo-word{font-size:15px}
  .logo-znak{height:24px}
}
@media (max-width:400px){
  .logo-word{font-size:13.5px}
}

/* Porovnání tří měst – na mobilu se grid (1.5fr + 3×1fr) nevešel do 375px
   a roztahoval celou stránku do strany. Buňky musí smět zmenšit pod obsah. */
.cmp-row > *{min-width:0}
@media(max-width:560px){
  .cmp-row{gap:10px;padding:7px 2px;grid-template-columns:1.15fr repeat(var(--cols),1fr)}
}
@media(max-width:400px){
  .cmp-row{gap:7px}
}

/* ============================================================
   Hero pro obsahové stránky – varianta bez fotky
   ------------------------------------------------------------
   Stejný tmavý pás s fotkou Bratislavy běžel na devíti stránkách.
   Na metodice ani na blogu fotka nic nesděluje, jen zabírá místo
   a všechny stránky vypadají stejně. Třída .hero-listing--plain
   fotku vypne, pás zúží a nechá jen nadpis s perexem.
   Použití: <section class="hero-listing hero-listing--plain">
   ============================================================ */
.hero-listing--plain{padding:38px 0 40px}
.hero-listing--plain::before{display:none}
.hero-listing--plain::after{background:
  linear-gradient(100deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%)}
.hero-listing--plain h1{max-width:20ch}
.hero-listing--plain .lead{max-width:62ch}
/* dlaždice s čísly indexu na obsahových stránkách nedávají smysl */

/* Rozcestník dátových príbehov je stránka o vizuálnom rozprávaní – holý
   jednofarebný pás na nej pôsobil ako nedorobok. Fotku preto zapíname
   späť, ale len tu a s vlastnou: dôvodom pre --plain bola rovnaká
   Bratislava na každej stránke, nie fotka ako taká. Dlaždice s číslami
   ostávajú skryté, tvrdili by o sérii veci, ktoré zatiaľ neplatia. */
.hero-listing--plain.hero-foto-pribehy{padding:48px 0 56px}
.hero-listing--plain.hero-foto-pribehy::before{display:block;
  background-image:url("hero-stiavnica.jpg");background-position:center 42%}
.hero-listing--plain.hero-foto-pribehy::after{background:
  linear-gradient(to top, rgba(9,36,46,.95) 0%, rgba(9,36,46,.88) 5%, rgba(9,36,46,0) 26%),
  linear-gradient(100deg, rgba(9,36,46,.9) 0%, rgba(9,36,46,.7) 46%, rgba(9,36,46,.2) 100%)}

/* Detail príbehu preberá fotku svojej prehľadovej karty – adresu dodáva
   generate-pribehy.js cez premennú --pribeh-foto (rovnaký overlay ako
   rozcestník, aby séria pôsobila jednotne). */
.hero-listing--plain.hero-foto-pribeh{padding:48px 0 56px}
.hero-listing--plain.hero-foto-pribeh::before{display:block;
  background-image:var(--pribeh-foto);background-position:center 40%}
.hero-listing--plain.hero-foto-pribeh::after{background:
  linear-gradient(to top, rgba(9,36,46,.95) 0%, rgba(9,36,46,.88) 5%, rgba(9,36,46,0) 26%),
  linear-gradient(100deg, rgba(9,36,46,.9) 0%, rgba(9,36,46,.7) 46%, rgba(9,36,46,.2) 100%)}

/* Bez záložnej vrstvy hero-bratislava.jpg: prehliadač sťahuje všetky vrstvy
   background-image, aj tie, ktoré nikdy neuvidí. Na profile mesta s vlastnou
   fotkou to bolo 121 kB navyše a fotka iného mesta v zálohe. Mestá bez fotky
   riešia pravidlá nižšie.

   14. 9. 2026: všetkých 71 miest už fotku má – posledná pätica
   (Nové Zámky, Poltár, Revúca, Stropkov, Trebišov) doplnená ručným
   výberom z Commons, autori v assets/mesta/ZDROJE.json. */
body[data-obec="nove-zamky"] .obec-hero-band::before,
body[data-obec="nove-zamky"] .cta-final::before{background-image:url("mesta/nove-zamky.jpg")}
body[data-obec="stropkov"] .obec-hero-band::before,
body[data-obec="stropkov"] .cta-final::before{background-image:url("mesta/stropkov.jpg")}
body[data-obec="revuca"] .obec-hero-band::before,
body[data-obec="revuca"] .cta-final::before{background-image:url("mesta/revuca.jpg")}
body[data-obec="trebisov"] .obec-hero-band::before,
body[data-obec="trebisov"] .cta-final::before{background-image:url("mesta/trebisov.jpg")}
body[data-obec="humenne"] .obec-hero-band::before,
body[data-obec="humenne"] .cta-final::before{background-image:url("mesta/humenne.jpg")}
body[data-obec="poltar"] .obec-hero-band::before,
body[data-obec="poltar"] .cta-final::before{background-image:url("mesta/poltar.jpg")}
body[data-obec="piestany"] .obec-hero-band::before,
body[data-obec="piestany"] .cta-final::before{background-image:url("mesta/piestany.jpg")}
body[data-obec="ilava"] .obec-hero-band::before,
body[data-obec="ilava"] .cta-final::before{background-image:url("mesta/ilava.jpg")}  /* Ilava – z webu mesta, NA SCHVALENIE */

/* === Články, v ktorých sa mesto spomína (profil obce) === */
.clanok-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.clanok-card{display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;box-shadow:var(--shadow-sm);
  text-decoration:none;color:inherit;transition:box-shadow .16s ease,transform .16s ease,border-color .16s ease}
.clanok-card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:#cdd9e6;text-decoration:none}
.clanok-cat{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-dark)}
.clanok-ttl{font-size:var(--t-h3);line-height:1.28;color:var(--navy);margin:0}
.clanok-perex{font-size:var(--t-small);color:var(--muted);line-height:1.6;margin:0}
.clanok-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:auto;
  padding-top:12px;border-top:1px solid var(--line);font-size:var(--t-small);color:var(--muted-2)}

/* Zdroje fotografií – textová tabuľka, všetko vľavo
   (.table je stavaná na čísla, tie sa zarovnávajú doprava) */
.tbl-text th,.tbl-text td{text-align:left}
.tbl-text td:first-child{font-weight:600;color:var(--navy)}

/* ============================================================
   Porovnanie miest – karta pre každé mesto
   ============================================================ */
.cb-grid{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:18px}
.cb-card{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;background:#fff}
.cb-city{font-size:17px;font-weight:800;color:var(--navy);margin:0}
.cb-rank{font-size:12px;color:var(--muted-2);margin:2px 0 14px}
.cb-score{font-size:38px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cb-score small{font-size:14px;font-weight:600;color:var(--muted-2);letter-spacing:0}
.cb-pil{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.cb-prow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13px;padding:6px 0}
.cb-prow .nm{color:var(--muted);flex:1}
.cb-prow b{font-variant-numeric:tabular-nums;font-size:14px}
.cb-bar{width:64px;height:6px;border-radius:999px;background:var(--bg-tint);overflow:hidden;flex:none}
.cb-bar i{display:block;height:100%;border-radius:999px}
@media(max-width:760px){.cb-grid{grid-template-columns:1fr}}

/* Zdroje fotografií – fotka čakajúca na súhlas mesta */
.zf-caka{display:inline-block;padding:2px 8px;border-radius:999px;
  background:var(--amber-soft);color:var(--amber);font-size:12px;font-weight:700;
  white-space:nowrap}

/* B – delený pás. Popis nad pásom aj prahy v legende sú zámerné:
   bez nich si čitateľ pás vyloží ako skóre, nie ako počty indexov. */
.pb-wrap{margin:14px 0 4px}
.pb-cap{font-size:12px;color:var(--muted);margin:0 0 7px}
.pb-bar{display:flex;height:24px;border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-tint)}
.pb-seg{display:flex;align-items:center;justify-content:center;color:#fff;font-size:12.5px;font-weight:800;min-width:20px}
/* v riadku – na šírku karty sa zmestia všetky tri; pri úzkom okne
   sa zalomia samy vďaka flex-wrap */
.pb-key{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:9px;font-size:11.5px;color:var(--muted)}
.pb-key span{white-space:nowrap}
.pb-key i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px;vertical-align:-1px}

/* vysvetlenie pásiem raz POD kartami pilierov (nad nimi pôsobilo, že platí
   pre celú kartu vrátane skóre a poradia) */
.bento-vysvetlenie{font-size:12px;color:var(--muted-2);line-height:1.6;margin:14px 0 0;max-width:78ch}

/* cieľ odkazu z karty piliera: odsadenie pod fixnú hlavičku (70 px + rezerva)
   a krátke zvýraznenie, nech je vidieť, kam sa stránka posunula */
.idx-block{scroll-margin-top:90px}
.idx-block.hl{box-shadow:inset 3px 0 0 var(--brand)}

/* odkaz z karty piliera na jeho skupinu v kompletnom rozbore nižšie */
.bp-vsetky{display:block;margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
  font-size:12.5px;font-weight:700;color:var(--brand-dark)}
.bp-vsetky:hover{color:var(--navy)}
.idx-pil-block{scroll-margin-top:90px}

/* spojnica medián–mesto: pri blízkych hodnotách sa body prekrývali
   a medián zmizol pod mestom, takže to vyzeralo ako chýbajúci údaj */
.peer-link{position:absolute;top:12.5px;height:3px;border-radius:2px;opacity:.42}
/* mierka pod grafom – bez nej sa poloha bodu nedala odčítať */
.peer-osa{display:grid;grid-template-columns:230px 1fr 60px;gap:18px;padding-top:4px}
.peer-osa-s{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted-2);
  font-variant-numeric:tabular-nums}
@media(max-width:760px){.peer-osa{grid-template-columns:1fr}
  .peer-osa span:first-child,.peer-osa span:last-child{display:none}}

/* ============================================================
   Blok „proti porovnateľne veľkým mestám“ – poradie v skupine
   ============================================================ */
.pv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:24px 28px}
.pv-card{border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;background:#fff}
.pv-card-hl{background:var(--bg-soft)}
.pv-card-nm{font-size:12.5px;font-weight:700;color:var(--navy);min-height:34px;line-height:1.3}
.pv-card-por{display:flex;align-items:baseline;gap:5px;margin:6px 0 4px}
.pv-card-por b{font-family:var(--font-head);font-size:30px;font-weight:800;line-height:1}
.pv-card-por span{font-size:12px;color:var(--muted-2)}
.pv-card-hi .pv-card-por b{color:var(--sc-hi-text,#2E7D34)}
.pv-card-mid .pv-card-por b{color:var(--navy)}
.pv-card-lo .pv-card-por b{color:var(--sc-lo,#EF4444)}
/* skóre mesta a medián skupiny drobným písmom – z čoho poradie vzniklo */
.pv-card-sk{font-size:12.5px;font-weight:700;color:var(--navy);margin-bottom:3px;
  font-variant-numeric:tabular-nums}
.pv-card-sk span{font-weight:600;color:var(--muted-2)}
.pv-card-d{font-size:12px;font-weight:700}
@media(max-width:900px){.pv-grid{grid-template-columns:repeat(2,1fr)}}

/* Kompletný rozbor: zobrazí sa prvých päť indexov piliera, zvyšok pod
   tlačidlom. Skryté riadky ostávajú v HTML, aby na ne fungoval odkaz
   #idx-... z karty piliera – app.js ich pri skoku odkryje. */
.idx-block.idx-skryty{display:none}
.idx-viac{display:block;width:100%;margin-top:2px;padding:12px;border:0;
  border-top:1px solid var(--line);background:none;cursor:pointer;
  font-family:var(--font);font-size:13px;font-weight:700;color:var(--brand-dark)}
.idx-viac:hover{background:var(--bg-soft);color:var(--navy)}

/* Vysvetlivka pri odbornom pojme – funguje na kliknutie aj z klávesnice,
   nie len na prejdenie myšou ako title atribút. */
.vysv{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;margin-left:6px;padding:0;border:1px solid var(--line);
  border-radius:50%;background:#fff;color:var(--muted);font-family:var(--font);
  font-size:10px;font-weight:800;line-height:1;cursor:pointer;vertical-align:2px}
.vysv:hover,.vysv.on{background:var(--navy);border-color:var(--navy);color:#fff}
.vysv-text{position:absolute;left:50%;top:calc(100% + 8px);transform:translateX(-50%);
  width:270px;max-width:78vw;padding:11px 13px;border-radius:8px;background:var(--navy);
  color:#fff;font-size:12.5px;font-weight:500;line-height:1.5;text-align:left;
  letter-spacing:0;text-transform:none;box-shadow:0 14px 30px -14px rgba(12,43,51,.5);
  opacity:0;visibility:hidden;transition:opacity .15s;z-index:60;pointer-events:none}
.vysv.on .vysv-text,.vysv:hover .vysv-text{opacity:1;visibility:visible}
/* širšia bublina pre dlhšie vysvetlenie so zoznamom miest */
.vysv--siroka .vysv-text{width:360px}
.vysv-text::before{content:"";position:absolute;left:50%;top:-5px;width:10px;height:10px;
  transform:translateX(-50%) rotate(45deg);background:var(--navy)}

/* „splnené“ namiesto čísla v karte odstupu – kratšie než číslo, aby
   nerozhodilo výšku riadku vedľa ostatných kariet */
.pv-card-ok{font-size:19px !important}

/* dve karty odstupov pod sebou, rovnaká medzera ako medzi sekciami profilu */
.gap-stack{display:flex;flex-direction:column;gap:18px}

/* Na mobile bublina vystrčená pod tlačidlom vyliezala z ľavého okraja
   (je vycentrovaná pod „?“, ktoré stojí hneď za nadpisom). Namiesto
   toho sa ukotví k spodku obrazovky ako lišta – vždy celá na obrazovke. */
@media(max-width:760px){
  /* aj .vysv--siroka – tá má vyššiu špecifickosť a pevných 360 px by inak vyhralo */
  .vysv .vysv-text,.vysv--siroka .vysv-text{position:fixed;left:12px;right:12px;bottom:12px;
    top:auto;width:auto;max-width:none;transform:none}
  .vysv-text::before{display:none}
}

/* Kým je našeptávač otvorený, hero pás nesmie orezať zoznam presahujúci
   pod jeho spodnú hranu a musí byť nad nasledujúcou sekciou – tá sa naň
   prekrýva (release-wrap začína ešte nad koncom hera). */
.hero-dark.ac-open,.ikz-hero.ac-open,.hero-listing.ac-open{overflow:visible;z-index:60}

/* ---------- Porovnanie miest (stránka rebríčka) ----------
   Tabuľka je široká: pri piatich mestách sa na mobile nezmestí, preto vodorovný
   posun vnútri .cmp2-scroll (nie celej stránky) a prilepený prvý stĺpec, aby
   bolo pri posune stále vidieť, ktorý ukazovateľ sa číta. */
/* ---------- Obec bez vlastného skóre (/obec-rozcestnik/) ----------
   Stránku vidí každý, kto hľadal jednu z 2 816 obcí mimo okresných miest.
   Priznanie, že čísla patria okresu, stojí hneď navrchu – predtým to bola
   samostatná karta vedľa dát a vážila tým rovnako ako samotná odpoveď. */
.obr-hero h1{margin:4px 0 6px}
/* Bez pásu a bez ikony: taký tvar web inde používa pre chyby a varovania,
   a toto chyba nie je – pre 2 816 z 2 887 obcí je to normálny stav.
   Jedna veta, tenká linka vľavo, dôvod si rozbalí ten, kto ho chce. */
.obr-pozn{border-left:3px solid var(--brand);padding-left:18px;margin-bottom:24px}
.obr-pozn-veta{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink);max-width:74ch}
.obr-pozn-veta strong{color:var(--navy)}
.obr-pozn-det{margin-top:10px}
.obr-pozn-det summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--brand-dark);
  display:inline-flex;align-items:center;gap:6px;list-style:none}
.obr-pozn-det summary::-webkit-details-marker{display:none}
.obr-pozn-det summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:2px;margin-top:-3px}
.obr-pozn-det[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.obr-pozn-det p{margin:10px 0 0;font-size:14px;color:var(--muted);max-width:74ch;line-height:1.65}

.obr-okres{margin-bottom:20px}
.obr-okres h2{margin:3px 0 3px;font-size:26px}
.obr-okres-pod{margin:0}
/* Čísla ako v dlaždiciach na profile mesta (.bp-kpi) – prstenec web
   nikde inde nepoužíva, takže by tu bol jediný svojho druhu. */
/* Čísla vľavo, mapka vpravo – pravá polovica karty bola predtým prázdna. */
.obr-telo{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:34px;align-items:stretch}
.obr-cisla{min-width:0}
/* Linka, čísla aj pásiky pilierov majú JEDNU šírku – šírku ľavého
   stĺpca. Predtým linka bežala ďalej než pásiky a čísla sa krčili
   vľavo; teraz všetko končí na tej istej hrane. */
.obr-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;
  margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.obr-kpi-track{height:6px;border-radius:999px;background:var(--bg-tint);overflow:hidden;margin-top:10px}
.obr-kpi-track i{display:block;height:100%;border-radius:999px}
.obr-piliere{margin-top:20px}
.obr-pil{margin-bottom:10px}
.obr-pil-r{display:flex;justify-content:space-between;font-size:13px;margin-bottom:4px}
.obr-pil-r span{color:var(--muted)}
.obr-pil-r b{font-weight:800}
.obr-pil-t{height:6px;background:var(--bg-tint);border-radius:999px;overflow:hidden}
.obr-pil-t i{display:block;height:100%;border-radius:999px}
.obr-cta{margin-top:18px}

.obr-studia{display:flex;align-items:center;justify-content:space-between;gap:26px;
  flex-wrap:wrap;margin-top:20px}
.obr-studia h3{margin:6px 0 6px;color:#fff;font-size:clamp(19px,2.2vw,25px)}
.obr-studia p{margin:0;color:rgba(255,255,255,.8);max-width:56ch;line-height:1.55}
.obr-zdroj{margin-top:16px}
@media (max-width:860px){
  .obr-telo{grid-template-columns:1fr}
  .obr-telo .obec-hero-mapcard{max-width:340px;margin:0 auto;width:100%}
}
@media (max-width:720px){
  .obr-kpis{grid-template-columns:1fr 1fr;gap:16px}
  .obr-studia{gap:16px}
}

/* Pravý stĺpec na kontakte: údaje o prevádzkovateľovi a pod nimi výzva
   na hovor. Obe karty pod sebou vyplnia stĺpec vedľa formulára. */
.kont-bok{display:flex;flex-direction:column;gap:18px}

.cmp2-picker{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:18px}
/* Výbery vyplnia celú šírku a reset sedí pri pravom okraji – rovnako
   široko ako tabuľka pod nimi, nie schúlené do ľavej tretiny. */
/* Tri rovnaké výbery a za nimi reset. Krížik pri každom selecte odišiel –
   lepil sa na jeho šípku a miesto sa aj tak nedalo uvoľniť, len prepísať. */
.cmp2-pick{display:flex;flex-direction:column;gap:4px;flex:1 1 190px}
.cmp2-lbl{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.cmp2-reset{align-self:flex-end;flex:0 0 auto;margin-left:auto}
/* Vodorovné posúvanie drží obal, aby sa všetky bloky posúvali spolu
   a stĺpce miest ostali pod sebou. Rámik má každý blok vlastný. */
.cmp2-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp2-tab{border-collapse:collapse;width:100%;min-width:640px;font-size:14px;font-variant-numeric:tabular-nums}
.cmp2-tab th,.cmp2-tab td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--line)}
/* Hlavička svetlá s navy linkou – tmavý slab pôsobil ťažko a čísla pod ním
   kričali. Sticky potrebuje plné pozadie, inak by riadky presvitali. */
.cmp2-tab thead th{position:sticky;top:0;background:#fff;color:var(--navy);
  font-size:15px;font-weight:800;z-index:2;border-bottom:2px solid var(--navy)}
.cmp2-tab thead th a{color:var(--navy)}
.cmp2-th-nm{min-width:230px;font-size:var(--t-label);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.cmp2-th-sub{display:block;font-weight:600;font-size:11.5px;color:var(--muted);margin-top:1px}
.cmp2-tab tbody th{font-weight:400;color:var(--ink);min-width:230px;
  position:sticky;left:0;background:#fff;z-index:1}
.cmp2-waha{display:block;font-size:11px;color:var(--muted-2)}
.cmp2-td{min-width:160px}
.cmp2-bl{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:4px}
.cmp2-v{font-weight:800;font-size:15px}
.cmp2-r{font-size:11.5px;color:var(--muted-2)}
.cmp2-trk{display:block;height:6px;border-radius:999px;background:var(--bg-tint);overflow:hidden}
.cmp2-trk i{display:block;height:100%;border-radius:999px}
.cmp2-na{color:var(--muted-2);text-align:center}
/* Hierarchia rovnaká ako v Kompletnom rozbore na profile mesta: pilier
   je vlastný blok s tmavým záhlavím, pod ním jeho čiastkové indexy.
   Jedna dlhá tabuľka nefungovala – pilier v nej vyzeral rovnako ako
   index pod ním, nech sme naň dali akýkoľvek prúžok či štítok. */
.cmp2-stack{display:flex;flex-direction:column;gap:22px}
.cmp2-blok{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;min-width:640px}
/* Stĺpce drží colgroup: bloky sú samostatné tabuľky a bez pevného
   rozvrhnutia by sa mestá v každom pilieri rozišli o pár pixelov. */
.cmp2-blok .cmp2-tab{table-layout:fixed;min-width:640px}
.cmp2-col-nm{width:34%}
.cmp2-blok .cmp2-tab tbody tr:last-child th,
.cmp2-blok .cmp2-tab tbody tr:last-child td{border-bottom:0}
.cmp2-uroven{display:block;font-size:var(--t-label);font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-2);margin-top:2px}

/* Veľké číslo. Anatómia z dlaždíc na profile mesta (.bp-kpi): číslo
   v farbe pásma, za ním nenápadné „/ 10“, pod tým poradie. Hierarchiu
   nesie veľkosť čísla – súhrn 34 px, pilier 24 px, index 15 px – nie
   odtiene sivého podkladu, ktoré sa v tabuľke stratili. */
.cmp2-kpi{display:flex;align-items:baseline;gap:6px}
.cmp2-kpi-v{font-family:var(--font-head);font-weight:800;line-height:1;font-size:24px}
.cmp2-kpi-meta{font-size:12px;color:var(--muted-2);font-weight:600}
.cmp2-kpi-r{display:block;font-size:12.5px;font-weight:700;color:var(--navy);margin:7px 0 6px}
.cmp2-kpi-r em{font-style:normal;font-weight:500;color:var(--muted-2)}

/* súhrn – hlavné číslo celej stránky. 26 px, nie 34: väčšie číslo
   pôsobilo neúmerne a hierarchiu aj tak neurobilo. */
.cmp2-blok-suhrn{border-color:var(--navy)}
.cmp2-blok-suhrn .cmp2-tab thead th{border-bottom-width:1px;border-bottom-color:var(--line)}
.cmp2-tab tbody tr.cmp2-row-hl th{font-weight:700;font-size:var(--t-label);letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted-2);vertical-align:top;padding-top:19px}
.cmp2-tab tbody tr.cmp2-row-hl th,.cmp2-row-hl td{background:var(--bg-tint)}
.cmp2-td-hl{padding-top:15px;padding-bottom:16px}
.cmp2-td-hl .cmp2-kpi-v{font-size:26px}
.cmp2-td-hl .cmp2-kpi-meta{font-size:13px}
.cmp2-td-hl .cmp2-trk{height:8px}

/* Skóre piliera je tmavé, akoby pokračovalo zo záhlavia nad ním –
   oddelenie robí podklad, nie veľkosť čísla. Text je biely; pásmo
   nesie prúžok vo výplňovej farbe (na navy 3,2–5,9:1) a vypísané
   poradie, takže sa farebný signál nestratí. */
.cmp2-tab tbody tr.cmp2-row-pil th,.cmp2-row-pil td{background:var(--navy);
  color:#fff;border-bottom:0}
.cmp2-tab tbody tr.cmp2-row-pil th{font-weight:700;font-size:var(--t-label);letter-spacing:.05em;
  text-transform:uppercase;color:#fff;vertical-align:top;padding-top:16px}
.cmp2-td-pil{padding-top:13px;padding-bottom:14px}
.cmp2-td-pil .cmp2-kpi-v{font-size:22px}
.cmp2-td-pil .cmp2-kpi-meta{color:rgba(255,255,255,.6)}
.cmp2-td-pil .cmp2-kpi-r{color:#fff}
.cmp2-td-pil .cmp2-kpi-r em{color:rgba(255,255,255,.66)}
.cmp2-td-pil .cmp2-trk{background:rgba(255,255,255,.16)}
.cmp2-row-idx th{font-size:13.5px}
/* Záhlavie bloku je rovnaké ako na profile, len tu nesmie byť lepkavé –
   blokov je viac pod sebou a lepili by sa cez seba. */
.cmp2-blok .idx-pil-head{border-radius:0}
@media (max-width:620px){ .cmp2-pick{min-width:100%} .cmp2-th-nm,.cmp2-tab tbody th{min-width:180px} }

/* ---------- Prihlásenie k odberu (Ecomail) ---------- */
/* Formulár stojí v pravej polovici .cta-final, kde overlay zámerne
   prepúšťa fotku mesta. Drobný text súhlasu bol nad rozsvietenými oknami
   Bratislavy nečitateľný – a je to povinný právny text, nie dekorácia.
   Preto má formulár vlastnú tmavú podložku, ktorá nezávisí od toho, aká
   fotka je pod ním. */
.odber-form{display:flex;flex-direction:column;gap:10px;max-width:400px;
  background:rgba(8,28,36,.88);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--radius);padding:20px 22px;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.odber-lbl{font-size:var(--t-label);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:rgba(255,255,255,.72)}
   /* 16 px, inak iOS pri fokuse stránku priblíži */
.odber-suhlas{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.5;
  color:rgba(255,255,255,.9)}
.odber-suhlas input{margin-top:3px;flex:0 0 auto}
.odber-suhlas a{color:#fff;text-decoration:underline}
/* ---------- Krajské dátové prílohy na Pre médiá (generuje generate-krajske-prilohy.py) ---------- */
.dl-skupina{margin:26px 0 10px;font-size:13px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:var(--brand-dark)}
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:12px}
.dl-karta{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.dl-nazov{font-weight:700;color:var(--navy);font-size:13.5px;line-height:1.35}
.dl-velkost{font-size:11.5px;color:var(--muted)}
.dl-karta .btn{margin-top:8px}

.odber-ok{display:flex;gap:10px;align-items:flex-start;color:#fff;font-weight:600;
  background:rgba(255,255,255,.10);border-radius:8px;padding:14px 16px;max-width:380px}
.odber-ok .ic{width:20px;height:20px;flex:0 0 auto;color:#7DD15F}

/* Hlavička mapovej sekcie: text vľavo, tlačidlá do voľného miesta vpravo. */
.map-head{max-width:none;display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.map-head-txt{flex:1;min-width:min(100%,420px)}
.map-head-txt .lead{margin-bottom:0}
.map-head-cta{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:2px}
@media(max-width:760px){ .map-head-cta{width:100%} .map-head-cta .btn{flex:1} }