/* FakturujOnline 2026 – ČLÁNOK (single.php). Načítava sa po zaklad.css a stranka.css (.prose) len pri is_singular("post") (w2_typ() = "clanok").
   Maketa: docs/navrh-webu-2026-10-03/clanok.html (v2). Komponenty: docs/stavba-webu/KOMPONENTY.md. Výzvy zo skratiek (.ctx, .ucty) sú v zaklad.css.
   Zlomy: ≥1280 px tri stĺpce (obsah | článok | bočný panel), 1101–1279 px dva (článok | panel), ≤1100 px jeden.
   Obsahuje aj štýly blokov Gutenbergu, ktoré články používajú (block-library sa na článku nenačítava),
   a vzhľad feedov vit-slider-rss-feed vrátane jadra slick (štýly pluginu ani slick.min.css z cdnjs sa nenačítavajú). */

/* ---------- Rozloženie ---------- */
.art{display:grid;grid-template-columns:200px minmax(0,720px) 280px;gap:44px;justify-content:center;max-width:1360px;margin:0 auto;padding:44px var(--gut) 96px}
.art__a{grid-column:2;grid-row:1;min-width:0}
.toc{grid-column:1;grid-row:1}
.rail{grid-column:3;grid-row:1}
.toc,.rail{position:sticky;top:calc(var(--hdr-h) + 24px);align-self:start}

/* ---------- Obsah článku (TOC) ---------- */
.toc{font-size:14px;max-height:calc(100vh - var(--hdr-h) - 48px);overflow:auto}
.toc__h{font:700 12px/1.3 var(--f-text);text-transform:uppercase;letter-spacing:.08em;color:var(--mut);margin-bottom:14px}
.toc ol{margin:0;padding:0;list-style:none}
.toc a{display:block;color:#475467;line-height:1.4;padding:7px 0 7px 14px;border-left:2px solid var(--line)}
.toc a:hover{color:var(--blue);text-decoration:none}
.toc a.on{color:var(--blue);border-left-color:var(--blue)} /* bez zmeny hrúbky písma – iné zalomenie by posúvalo položky */
.toc__prog{height:4px;background:var(--line);border-radius:4px;margin-top:20px;overflow:hidden}
.toc__prog i{display:block;height:100%;background:var(--blue);border-radius:4px;transform:scaleX(0);transform-origin:0 50%}

.mtoc{display:none;border:1px solid var(--line);border-radius:14px;margin:0 0 28px;background:#fff}
.mtoc>summary{list-style:none;cursor:pointer;padding:14px 46px 14px 16px;font:600 15px/1.4 var(--f-text);color:var(--navy);position:relative}
.mtoc>summary::-webkit-details-marker{display:none}
.mtoc>summary::after{content:"";position:absolute;right:20px;top:50%;width:8px;height:8px;border-right:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:translateY(-70%) rotate(45deg)}
.mtoc[open]>summary::after{transform:translateY(-25%) rotate(-135deg)}
.mtoc ol{margin:0;padding:0 16px 16px 38px;font-size:15px;line-height:1.45}
.mtoc li{margin:0;padding:5px 0}
.mtoc li::marker{color:var(--blue);font-weight:700}
.mtoc a{color:var(--ink)}

/* ---------- Hlavička článku ---------- */
.crumb{font-size:13.5px;line-height:1.5;color:var(--mut);margin-bottom:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb a{color:var(--mut)}
.crumb a:hover{color:var(--blue)}
.crumb__s{margin:0 3px;color:#98a2b3}
.art__cat{text-decoration:none!important}
.art__cat:hover{background:var(--blue-100)}
.art__h1{font-size:44px;line-height:1.12;margin:14px 0 18px;overflow-wrap:break-word}
.art__h1--dlhy{font-size:34px;line-height:1.18}
.art__lead{font-size:20px;line-height:1.6;color:#3c475a}
.by{display:flex;align-items:center;gap:12px;margin:22px 0 28px;font-size:14px;line-height:1.5;color:var(--mut)}
.by__av{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--blue);color:#fff;font:800 14px/1 var(--f-head);letter-spacing:.02em}
.by__n{display:block;color:var(--navy);font-weight:700}
a.by__n:hover{color:var(--blue)}
.art__fig{margin:0 0 34px}
.art__img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:18px;background:var(--bg)}
.art__cap{font-size:13px;line-height:1.5;color:var(--mut);margin-top:8px}

/* ---------- Text článku (doplnky k .prose zo stranka.css) ---------- */
.art .prose{font-size:18px}
.art .prose p{margin-bottom:20px}
.art .prose h2{margin-top:44px}
.art .prose>*:first-child{margin-top:0}
.art .prose .code-block{margin:0!important} /* obal Ad Insertera (style="margin: 8px 0") – medzeru robí výzva sama */
.art .prose .ucty__h a{text-decoration:none} /* odkaz boxu, nie odkaz v texte */
/* bloky Gutenbergu, ktoré články používajú (block-library sa nenačítava) */
.prose .wp-block-image{margin:0 0 22px}
.prose .wp-block-image img{height:auto;max-width:100%;vertical-align:bottom}
.prose .wp-block-image.aligncenter,.prose .wp-block-image .aligncenter{text-align:center;margin-left:auto;margin-right:auto}
.prose .wp-block-image .aligncenter img{margin:0 auto}
.prose .wp-element-caption{font-size:13.5px;color:var(--mut);margin-top:8px;line-height:1.5}
.prose .wp-block-embed{margin:0 0 22px}
.prose .wp-block-embed__wrapper{max-width:100%;overflow-wrap:anywhere}
.prose .wp-block-quote p:last-child{margin-bottom:0}
.prose figure.wp-caption{width:auto!important} /* [caption] dáva vložené style="width: 1280px" */
.prose .wp-caption img{display:block;width:100%;height:auto}
.prose .vit-sb{max-width:100%} /* vložený obsah blokovaný do súhlasu (vit-suhlas) */
/* príspevok z X blokovaný do súhlasu (skript widgets.js čaká na súhlas s externým obsahom) – informácia a tlačidlo ako pri iframe
   (vit-suhlas ich pri skripte nepridáva); po vykreslení príspevku sa skryje. Zobrazí ju clanok.js, len keď súhlas nie je daný. */
.prose .w2x{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:12px 0 0;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--bg);font-size:14.5px;line-height:1.5;color:#475467}
.prose .w2x p{margin:0;flex:1 1 240px}
.prose .w2x[hidden],.prose .twitter-tweet-rendered~.w2x{display:none}

/* ---------- Koniec článku ---------- */
.art__end{margin-top:44px}
.art__end .end__x{font-size:15.5px;line-height:1.6}
.art__rel{display:none;margin-top:48px}
.art__rel h2{font-size:26px;margin-bottom:20px}
.art__feeds{margin-top:48px}
.art__feeds .widget-area{margin:0}
.art__feeds p:empty,.art__feeds .clearfix{display:none}

/* ---------- Bočný panel ---------- */
.rail{display:grid;gap:20px}
.rail .box .box__t{font:800 19px/1.25 var(--f-head);color:var(--navy);margin:0 0 8px} /* rovnaké ako .box__t v zaklad.css (pôvodne obchádzka – .box p prebíjal .box__t, opravené .box p:not(.box__t)) */
.rail .ico{margin-bottom:14px}
.rail .btn{width:100%}
.rail__pozn{margin:12px 0 0!important;font-size:12.5px!important;text-align:center}
.rail__rel ol{margin:12px 0 0;padding-left:20px;display:grid;gap:12px;font-size:14.5px;line-height:1.45}
.rail__rel li::marker{color:var(--blue);font-weight:800}
.rail__rel a{color:var(--ink)}
.rail__rel a:hover{color:var(--blue)}

/* ---------- Feedy vit-slider-rss-feed: pevná výška pred aj po načítaní (bez posunu obsahu) ---------- */
.art .vitsf-feed{--fi:120px;display:block;box-sizing:border-box;height:calc(var(--fi) + 204px);min-height:0;margin:0 0 24px;padding:22px 24px 18px;border:1px solid var(--line);border-radius:18px;background:var(--bg);overflow:hidden;color:var(--ink)}
.art .vitsf-feed__title{font:800 20px/1.3 var(--f-head);color:var(--navy);margin:0 0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.art .vitsf-list{margin:0 -8px;padding:0;position:relative}
.art .vitsf-list:not(.slick-initialized){display:none}
.art .vitsf-list__article{padding:0 8px}
.art .vitsf-list__image{position:relative;height:var(--fi);margin:0 0 10px;padding:0;border-radius:12px;overflow:hidden;background:#e4e9f2}
.art .vitsf-list__image a{display:block;height:100%}
.art .vitsf-list__image img{position:static;width:100%;height:100%;object-fit:cover}
.art .vitsf-list__title{display:block;height:4.2em;overflow:hidden;font:600 14.5px/1.4 var(--f-text)}
.art .vitsf-list__title a{color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art .vitsf-list__title a:hover{color:var(--blue);text-decoration:none}
.art .vitsf-feed .slick-arrow{position:absolute;top:calc(var(--fi) / 2 - 18px);z-index:2;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:var(--sh);font-size:0;color:transparent;cursor:pointer}
.art .vitsf-feed .slick-prev{left:0}
.art .vitsf-feed .slick-next{right:0}
.art .vitsf-feed .slick-arrow::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.art .vitsf-feed .slick-prev::before{transform:translate(-30%,-50%) rotate(135deg)}
.art .vitsf-feed .slick-next::before{transform:translate(-70%,-50%) rotate(-45deg)}
.art .vitsf-feed .slick-arrow.slick-disabled{opacity:0;pointer-events:none}
.art .vitsf-feed .slick-dots{display:flex;flex-wrap:nowrap;justify-content:center;overflow:hidden;height:24px;margin:12px 0 0;padding:0;list-style:none}
.art .vitsf-feed .slick-dots li{margin:0;line-height:0}
.art .vitsf-feed .slick-dot{position:relative;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer}
.art .vitsf-feed .slick-dot::before{content:"";position:absolute;top:8px;left:8px;width:8px;height:8px;border-radius:50%;background:#c5cfdf}
.art .vitsf-feed .slick-active .slick-dot::before{background:var(--blue)}
/* jadro slick (slick.css 1.8.1) */
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list{position:relative;display:block;overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}
.slick-slider .slick-track,.slick-slider .slick-list{transform:translate3d(0,0,0)}
.slick-track{position:relative;top:0;left:0;display:block;margin-left:auto;margin-right:auto}
.slick-track::before,.slick-track::after{content:"";display:table}
.slick-track::after{clear:both}
.slick-slide{display:none;float:left;height:100%;min-height:1px}
.slick-initialized .slick-slide{display:block}
.slick-arrow.slick-hidden{display:none}

/* ---------- 1101–1279 px: bez ľavého stĺpca, obsah ako rozbaľovací zoznam ---------- */
@media (max-width:1279px){
  .art{grid-template-columns:minmax(0,720px) 280px;gap:40px}
  .art__a{grid-column:1}
  .rail{grid-column:2}
  .toc{display:none}
  .mtoc{display:block}
}
/* ---------- Tablet a mobil: jeden stĺpec, súvisiace pod článkom ---------- */
@media (max-width:1100px){
  .art{grid-template-columns:minmax(0,720px);padding-top:36px}
  .rail{display:none}
  .art__rel{display:block}
  .art .vitsf-feed{--fi:150px}
}
@media (max-width:760px){
  .art{padding:22px var(--gut) 72px;gap:0}
  .crumb{margin-bottom:14px}
  .art__h1{font-size:31px;margin-top:12px}
  .art__h1--dlhy{font-size:26px}
  .art__lead{font-size:17.5px}
  .by{margin:18px 0 22px}
  .art__fig{margin:0 calc(-1 * var(--gut)) 28px}
  .art__img{border-radius:0;aspect-ratio:16/10}
  .art__cap{padding:0 var(--gut)}
  .art .prose{font-size:17px}
  .art .prose h2{font-size:24px;margin-top:36px}
  .art__end{margin-top:36px}
  .art__rel h2{font-size:23px}
  /* súvisiace na mobile ako riadky (malý obrázok vľavo) – tri veľké karty zaberali ~1 100 px */
  .art__rel .pgrid{gap:12px}
  .art__rel .pcard{flex-direction:row;align-items:stretch}
  .art__rel .pcard__img{width:112px;flex:none;aspect-ratio:auto;height:auto;min-height:96px;align-self:stretch}
  .art__rel .pcard__b{padding:12px 14px;gap:6px}
  .art__rel .pcard__cat{font-size:11px}
  .art__rel .pcard__t{font-size:16px}
  .art__rel .pcard__m{font-size:12.5px}
  .art .vitsf-feed{--fi:160px;height:calc(var(--fi) + 222px);margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:20px var(--gut) 16px;border-radius:0;border-left:0;border-right:0}
  /* nadpis feedu na mobile na 2 riadky (bez „…“) – miesto je vyhradené vopred, výška rámu sa po načítaní nemení */
  .art .vitsf-feed__title{font-size:18px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:2.6em}
  .art .vitsf-feed .slick-dot{width:16px}
  .art .vitsf-feed .slick-dot::before{left:4px}
}
@media (max-height:640px){
  .toc,.rail{position:static}
}
@media print{
  .toc,.mtoc,.rail,.art__feeds,.art__end,.art__rel,.code-block{display:none!important}
  .art{display:block;padding:0}
}