/* Komponenty článku, clanok-vizual.js (Juraj 26. 9. 2026: vizuálne bohaté články).
   Len premenné zo styl.css, preto deň aj noc bez vlastného bloku. Mobil 390 px je prvý. */

/* hook: 2 tučné vety hneď pod nadpisom */
.cl-hook{font-size:1.2rem;line-height:1.5;color:var(--text);margin:18px 0 20px;
  padding-left:14px;border-left:4px solid var(--akcent-lem)}
.cl-hook strong{font-weight:750}
.cl-hook .cl-perex-zdroj{font-weight:400}

/* medzinadpis s ikonou */
article.clanok h2.h2-s-ik{display:flex;align-items:flex-start;gap:11px;margin:38px 0 12px}
.h2-ik-o{flex:0 0 36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:var(--akcent-jemna);color:var(--akcent-jemna-text);margin-top:-3px}
.h2-ik{width:21px;height:21px}

/* KPI karty */
.kpi-rad{display:grid;gap:10px;margin:22px 0;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:700px){ .kpi-rad.kpi-3{grid-template-columns:repeat(3,1fr)}
  .kpi-rad.kpi-4{grid-template-columns:repeat(4,1fr)} }
.kpi-rad.kpi-3 > .kpi:first-child:nth-last-child(3){grid-column:1 / -1}
@media (min-width:700px){ .kpi-rad.kpi-3 > .kpi:first-child:nth-last-child(3){grid-column:auto} }
.kpi{position:relative;border-radius:var(--r2);padding:16px 15px 15px;border:1px solid var(--ram2);
  background:var(--plocha);box-shadow:var(--tien);min-width:0}
.kpi-modra{background:linear-gradient(140deg,var(--panel) 0%,var(--panel2) 70%,#235285 100%);border-color:transparent;color:#fff}
.kpi-zelena{background:var(--akcent-karta);border-color:var(--akcent-lem)}
.kpi-oranz{background:var(--doplnok-karta);border-color:var(--doplnok-lem)}
.kpi-ik{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;margin-bottom:8px;
  background:var(--modra-plocha);color:var(--odkaz)}
.kpi-ik .ik{width:19px;height:19px}
.kpi-modra .kpi-ik{background:rgba(255,255,255,.14);color:#ABDDC1}
.kpi-zelena .kpi-ik{background:var(--akcent-tint);color:var(--akcent-tint-text)}
.kpi-oranz .kpi-ik{background:var(--doplnok-tint);color:var(--doplnok-tint-text)}
.kpi-hod{font-size:clamp(1.45rem,6.4vw,2rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  color:var(--text);overflow-wrap:anywhere}
.kpi-modra .kpi-hod{color:#fff}
.kpi-pop{font-size:.86rem;line-height:1.35;color:var(--text2);margin-top:6px}
.kpi-modra .kpi-pop{color:rgba(255,255,255,.86)}
.kpi-pozn{font-size:.78rem;line-height:1.35;color:var(--text2);margin-top:7px;font-weight:600}
.kpi-modra .kpi-pozn{color:#ABDDC1}
.kpi-tr{font-size:.6em;margin-right:5px;vertical-align:.18em}
.kpi-tr.hore{color:var(--rast)} .kpi-tr.dole{color:var(--pokles)}
.kpi-modra .kpi-tr.hore{color:#ABDDC1} .kpi-modra .kpi-tr.dole{color:#FFB067}

/* grafy */
figure.gv{margin:26px 0;padding:18px 16px 12px;background:var(--plocha);border:1px solid var(--ram2);
  border-radius:var(--r);box-shadow:var(--tien)}
.gv-nad{display:flex;align-items:flex-start;gap:9px;font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--text)}
.gv-ik{flex:0 0 28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--modra-plocha);color:var(--odkaz);margin-top:-2px}
.gv-ik .ik{width:17px;height:17px}
article.clanok p.gv-pop{font-size:.88rem;line-height:1.45;color:var(--text2);margin:6px 0 12px}
.gv-telo{margin:6px 0 4px}
.gv-svg{display:block;width:100%;height:auto;max-width:560px;margin:0 auto;overflow:visible}
.gv-svg text{font-family:inherit}
.gv-os{font-size:10.5px;fill:var(--text2)}
.gv-hod{font-size:11.5px;font-weight:700;fill:var(--text)}
.gv-zaklad{stroke:var(--graf-zaklad);stroke-width:1}
.gv-mriez{stroke:var(--mriez);stroke-width:1;stroke-dasharray:3 3}
article.clanok p.gv-zdroj{font-size:.76rem;line-height:1.4;color:var(--text3);margin:10px 0 0}
figure.gv details.data{margin-top:4px}
figure.gv details.data > summary{font-size:.82rem;color:var(--text3);cursor:pointer;list-style:none;padding:4px 0}
figure.gv details.data > summary::-webkit-details-marker{display:none}
figure.gv details.data > summary::before{content:'▸ '}
figure.gv details.data[open] > summary::before{content:'▾ '}

/* vodorovné pruhy: popis je HTML nad pruhom, na mobile sa nezmenšuje */
.gv-pruhy{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.gv-pr{display:grid;grid-template-columns:1fr auto;column-gap:10px;row-gap:4px;align-items:baseline}
.gv-pl{font-size:.88rem;line-height:1.3;color:var(--text);min-width:0}
.gv-ph{font-size:.88rem;font-weight:700;color:var(--text);white-space:nowrap;font-variant-numeric:tabular-nums}
.gv-pb{grid-column:1 / -1;display:block;width:100%;height:11px;border-radius:4px;overflow:hidden}
.gv-pb-n{fill:var(--text3)}
.gv-pb-z{fill:var(--tint2)}
.gv-pr.gv-tl .gv-pl{color:var(--text2)}
.gv-pr.gv-tl .gv-pb rect + rect{opacity:.55}
.gv-pr.gv-zv .gv-pl,.gv-pr.gv-zv .gv-ph{font-weight:750}

/* prstenec */
.gv-kolac{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 26px}
.gv-kol{flex:0 0 auto;width:190px;height:190px}
.gv-kol-z{stroke:var(--tint2)}
.gv-kol-hod{font-size:6.4px;font-weight:800;fill:var(--text)}
.gv-kol-pop{font-size:2.9px;fill:var(--text2)}
.gv-leg{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.84rem;color:var(--text2)}
.gv-leg li{display:flex;align-items:center;gap:7px}
.gv-bod{flex:0 0 11px;width:11px;height:11px;border-radius:3px}
.gv-leg-k{flex:1 1 200px;flex-direction:column;gap:9px;font-size:.9rem;margin:0}
.gv-leg-k li{display:grid;grid-template-columns:11px 1fr auto;gap:9px;color:var(--text)}
.gv-leg-k strong{font-variant-numeric:tabular-nums}

/* tabuľka so zvýraznením */
.tz table{font-variant-numeric:tabular-nums}
.tz caption{text-align:left;font-weight:700;padding:0 0 8px;color:var(--text)}
.tz td.tz-tucne{font-weight:700;color:var(--text)}
.tz tr.tz-hl td{background:var(--akcent-jemna);font-weight:700;color:var(--text)}
.tz td.tz-hore{color:var(--rast);font-weight:650}
.tz td.tz-dole{color:var(--pokles);font-weight:650}
.tz-sip{font-size:.72em;margin-right:4px;vertical-align:.1em}
.tz td.tz-dobre{color:var(--rast);font-weight:700}
.tz td.tz-zle{color:var(--pokles);font-weight:700}
.tz td.tz-akcent{color:var(--doplnok);font-weight:700}
.tz-pruh{display:block;height:4px;margin-top:4px;border-radius:3px;background:var(--tint2);width:100%}
.tz-pruh > span{display:block;height:100%;border-radius:3px;background:var(--s2)}
details.tz-viac{margin:6px 0 0}
details.tz-viac > summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--odkaz);padding:6px 0}

/* odrážky s ikonou */
ul.cl-odrazky{list-style:none;margin:18px 0;padding:0;display:grid;gap:10px}
ul.cl-odrazky li{display:flex;gap:11px;align-items:flex-start;font-size:1rem;line-height:1.55;
  padding:11px 13px;background:var(--plocha);border:1px solid var(--ram2);border-radius:var(--r3)}
.odr-ik{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--akcent-tint);color:var(--akcent-tint-text);margin-top:0}
.odr-ik .ik{width:15px;height:15px}
ul.cl-odrazky strong{color:var(--text)}

/* Čo z toho plynie */
aside.cl-zaver{margin:30px 0;padding:18px 18px 16px;background:var(--akcent-karta);
  border:1px solid var(--akcent-lem);border-left:5px solid var(--akcent);border-radius:var(--r2)}
.zv-hl{display:flex;align-items:center;gap:9px;font-weight:800;font-size:1.05rem;color:var(--text)}
.zv-ik{flex:0 0 32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:var(--doplnok-plocha);color:var(--doplnok-plocha-text)}
.zv-ik .ik{width:19px;height:19px}
aside.cl-zaver ul{margin:10px 0 0;padding-left:20px;line-height:1.6;color:var(--text)}
aside.cl-zaver li{margin:6px 0}
article.clanok aside.cl-zaver p{margin:10px 0 0;color:var(--text)}

@media (max-width:640px){
  /* 3 stĺpce sa na 390 px zmestia bez posúvania (predtým pretekali o 13 až 36 px) */
  .tz th,.tz td{padding:10px 7px}
  .tz th{font-size:.7rem;letter-spacing:.02em;white-space:normal;vertical-align:bottom}
  .tz th:first-child,.tz td:first-child{padding-left:10px}
  .tz .tz-m-skry{display:none}
  .cl-hook{font-size:1.1rem;padding-left:12px}
  figure.gv{padding:15px 13px 10px;margin:22px 0}
}

/* odkaz v odseku nesmie niesť len farbu (Lighthouse link-in-text-block, 26. 9. 2026) */
article.clanok p a,article.clanok li a,.cl-zaver a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* rozhovor: fotky (protokol clanky.md v8, 27. 9. 2026) */
figure.cl-foto{margin:22px 0}
figure.cl-foto img{display:block;width:100%;height:auto;border-radius:16px}
figure.cl-foto.hl img{max-width:420px;margin:0 auto}
figure.cl-foto figcaption{font-size:.85rem;color:var(--text2);margin-top:6px;text-align:center}