/* Blog: výpis /blog a články /blog/<adresa>. Navazuje na sluzba.css (barvy, písma, tlačítka, otázky, výzva).
   Třídy mají předponu cl- (články). Ilustrace v článcích jsou HTML a CSS se skutečným textem,
   aby je četly vyhledávače i čtečky obrazovky. Stavebnice: .cl-zk (ve zkratce), .cl-sch (schody cen),
   .cl-vl (co hýbe cenou), .cl-nab (nabídka), .cl-rok (roční náklady), .cl-tip, .cl-cta. */

/* prostřední svislá linka pozadí by běžela přes text */
.cl .sv-lines i:nth-child(2){display:none}
.sv-page .cl-nw{white-space:nowrap}

/* ── Titulní obrázek (SVG): pohyb jen ve viditelné části, s vypnutými animacemi stojí ── */
.cl-cov{display:block;width:100%;height:auto;overflow:visible}
.cl-cov .tg{transform-box:view-box;transform-origin:668px 100px}
.cl-cov .ch{animation:svBob 6s ease-in-out var(--d,0s) infinite alternate;animation-play-state:paused}
.cl-cov .tg{animation:clSwing 3.6s ease-in-out infinite alternate;animation-play-state:paused}
.cl-cov .cn{animation:clDash 1.6s linear infinite;animation-play-state:paused}
.cl-cov.is-live .ch,.cl-cov.is-live .tg,.cl-cov.is-live .cn{animation-play-state:running}
@keyframes clSwing{from{rotate:-2.5deg}to{rotate:3deg}}
@keyframes clDash{to{stroke-dashoffset:-16}}

/* ── Hlavička článku ── */
.cl-hd{position:relative;padding:calc(var(--hl-h,80px) + clamp(20px,3.4vw,56px)) 0 clamp(20px,3vw,44px)}
.cl-hd-w{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);align-items:center;gap:clamp(24px,4vw,72px)}
.cl-hd-t{min-width:0;animation:svFade .4s var(--ease) backwards}
.cl-dr{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px;font:500 12.5px/1 var(--f-mono);letter-spacing:.02em;color:var(--ink-2)}
.cl-dr a{display:inline-flex;align-items:center;min-height:32px;color:var(--mint-ink);text-decoration:none}
.cl-dr a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.cl-dr i{color:var(--ink-3)}
.sv-page .cl-h1{font-family:var(--f-display);font-stretch:125%;font-weight:600;font-size:clamp(2.05rem,1.1rem + 3.1vw,4.1rem);line-height:1.05;letter-spacing:-.028em;color:var(--ink);text-wrap:balance}
.sv-page .cl-perex{max-width:33em;margin-top:20px;font:400 clamp(17px,1rem + .35vw,20.5px)/1.5 var(--f-body);color:var(--ink-2);text-wrap:pretty}
.cl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:28px}
.cl-av{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--ink);color:#fff;font:600 14px/1 var(--f-display);font-stretch:112%;letter-spacing:.03em}
.cl-av.l{width:58px;height:58px;font-size:17px}
.cl-by{display:flex;flex-direction:column;gap:4px;font:600 15px/1.2 var(--f-body);color:var(--ink)}
.cl-by small{font-size:13.5px;font-weight:400;color:var(--ink-2)}
.cl-md{display:flex;flex-wrap:wrap;gap:8px 18px;margin-left:10px;padding-left:20px;border-left:1px solid var(--line-strong);font:400 14px/1.2 var(--f-body);color:var(--ink-2)}
.cl-md>span{display:inline-flex;align-items:center;gap:7px}
.cl-md svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cl-hd-i{position:relative;min-width:0;max-width:600px;justify-self:end;width:100%;animation:svFade .5s var(--ease) .12s backwards}

/* ── Text a obsah po straně ── */
.cl-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,42rem) minmax(0,1fr);column-gap:clamp(28px,3vw,56px);padding-block:clamp(16px,2.4vw,32px) clamp(48px,6vw,88px)}
.cl-side{grid-column:1;min-width:0}
.cl-tx{grid-column:2;min-width:0}
.cl-toc{position:sticky;top:120px;max-width:250px;margin-left:auto}
.sv-page .cl-toc-h{margin-bottom:14px;font:500 11.5px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.cl-toc ol{counter-reset:k;border-left:1px solid var(--line)}
.cl-toc li{counter-increment:k}
.cl-toc a{position:relative;display:flex;gap:10px;padding:7px 0 7px 16px;font:500 14px/1.38 var(--f-body);color:var(--ink-2);text-decoration:none;transition:color .2s}
.cl-toc a::before{content:counter(k,decimal-leading-zero);flex:none;font:500 11.5px/1.75 var(--f-mono);color:var(--ink-3);transition:color .2s}
.cl-toc a::after{content:"";position:absolute;left:-1px;top:7px;bottom:7px;width:2px;border-radius:2px;background:var(--mint);transform:scaleY(0);transition:transform .31s var(--ease)}
.cl-toc a:hover,.cl-toc a.is-on{color:var(--ink)}
.cl-toc a.is-on::before{color:var(--mint-ink)}
.cl-toc a.is-on::after{transform:none}

/* typografie článku: nadpisy, odstavce, seznamy, odkazy */
.cl-tx{font:400 clamp(16.5px,.98rem + .2vw,18px)/1.72 var(--f-body);color:var(--ink-2)}
.cl-tx>*+*{margin-top:1.1em}
.sv-page .cl-tx>h2{margin-top:2.5em;scroll-margin-top:110px;font-family:var(--f-display);font-stretch:125%;font-weight:600;font-size:clamp(1.55rem,1.12rem + 1.2vw,2.2rem);line-height:1.12;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sv-page .cl-tx>h3{margin-top:1.9em;font:600 clamp(18px,1.05rem + .3vw,20.5px)/1.3 var(--f-body);letter-spacing:-.01em;color:var(--ink)}
.cl-tx>h2+*,.cl-tx>h3+*{margin-top:.65em}
.cl-tx>h2+h3{margin-top:1em}
.cl-tx p b,.cl-tx li b{font-weight:600;color:var(--ink)}
.cl-tx a:not([class]){color:var(--ink);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:3px;transition:text-decoration-color .2s}
.cl-tx a:not([class]):hover{text-decoration-color:var(--ink)}
.cl-tx .cl-ul>li{position:relative;padding-left:28px}
.cl-tx .cl-ul>li+li{margin-top:.55em}
.cl-tx .cl-ul>li::before{content:"";position:absolute;left:4px;top:.68em;width:8px;height:8px;border-radius:50%;background:var(--mint)}
.cl-tx .cl-ol{counter-reset:o}
.cl-tx .cl-ol>li{position:relative;padding-left:44px;counter-increment:o}
.cl-tx .cl-ol>li+li{margin-top:.9em}
.cl-tx .cl-ol>li::before{content:counter(o);position:absolute;left:0;top:.05em;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:color-mix(in srgb,var(--mint) 16%,#fff);font:600 14px/1 var(--f-mono);color:var(--mint-ink)}

/* ── Ve zkratce ── */
.cl-zk{padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px) clamp(22px,2.6vw,32px);border:1px solid color-mix(in srgb,var(--mint) 40%,transparent);border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 9%,#fff),#fff 78%);box-shadow:var(--shadow-s)}
.sv-page .cl-zk-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mint-ink)}
.sv-page .cl-zk-a{font-size:1.06em;line-height:1.6;color:var(--ink)}
.cl-zk-a b{font-weight:650;background:linear-gradient(var(--marker),var(--marker)) no-repeat 0 88%/100% 32%}
.cl-zk ul{margin-top:16px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--mint) 26%,transparent)}
.sv-page .cl-zk-f{margin-top:14px;font:500 12.5px/1.3 var(--f-mono);color:var(--ink-3)}
.cl-zk li{position:relative;padding-left:32px;color:var(--ink)}
.cl-zk li+li{margin-top:.6em}
.cl-zk li svg{position:absolute;left:0;top:.28em;width:20px;height:20px;padding:3px;border-radius:50%;background:var(--mint);fill:none;stroke:var(--a-on-accent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cl-zk li b{font-weight:600}

/* ── Schody cen: čím vyšší schod, tím dražší web. Karty mají stejnou výšku (--kh),
   sloupec je o schod (--st) vyšší než předchozí a zbytek vyplní zelený stupeň. ── */
.cl-sch{--kh:172px;--st:clamp(18px,2.2vw,30px);display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));align-items:end;gap:10px;margin-block:1.6em 1.4em}
.cl-sch>li{display:flex;flex-direction:column;min-width:0;min-height:calc(var(--kh) + 10px + var(--h) * var(--st))}
.cl-sch-k{position:relative;flex:none;display:flex;flex-direction:column;gap:6px;min-height:var(--kh);padding:16px 14px 16px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:var(--shadow-s)}
.cl-sch-k.is-me{border-color:color-mix(in srgb,var(--mint) 55%,transparent)}
.cl-sch-ic{display:block;width:44px;height:34px;margin-bottom:4px}
.cl-sch-ic svg{display:block;width:100%;height:100%}
.sv-page .cl-sch-n{font:600 15px/1.25 var(--f-body);color:var(--ink)}
.sv-page .cl-sch-c{font-family:var(--f-display);font-stretch:112%;font-weight:650;font-size:clamp(17px,1rem + .3vw,19.5px);line-height:1.15;letter-spacing:-.01em;color:var(--ink);font-variant-numeric:tabular-nums}
.sv-page .cl-sch-c small{font:500 12.5px/1 var(--f-body);font-stretch:100%;letter-spacing:0;color:var(--ink-2);white-space:nowrap}
.sv-page .cl-sch-t{font:400 13px/1.35 var(--f-body);color:var(--ink-2)}
.cl-sch-st{flex:1;min-height:var(--st);margin-top:10px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,color-mix(in srgb,var(--mint) 30%,#fff),color-mix(in srgb,var(--mint) 6%,#fff));transform-origin:bottom}
.cl-sch-lv{display:none}

/* ── Promo studia: velké sdělení s tlačítkem, v článku nejvýš jednou ── */
.cl-pr{position:relative;margin-block:1.8em;padding:clamp(24px,3.4vw,40px);border:1px solid color-mix(in srgb,var(--mint) 45%,transparent);border-radius:26px;background:radial-gradient(120% 140% at 100% 0%,color-mix(in srgb,var(--mint) 16%,#fff),#fff 62%);box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.cl-pr::after{content:"";position:absolute;z-index:-1;right:-70px;bottom:-70px;width:260px;aspect-ratio:1;background-image:radial-gradient(var(--dot) 1.3px,transparent 1.7px);background-size:18px 18px;-webkit-mask-image:radial-gradient(closest-side,#000,transparent);mask-image:radial-gradient(closest-side,#000,transparent)}
.sv-page .cl-pr-k{display:inline-flex;align-items:center;gap:10px;font:500 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mint-ink)}
.sv-page .cl-pr-h{margin-top:16px;font-family:var(--f-display);font-stretch:125%;font-weight:600;font-size:clamp(1.7rem,1.12rem + 2vw,2.7rem);line-height:1.1;letter-spacing:-.025em;color:var(--ink);text-wrap:balance}
.cl-pr-h mark{background:linear-gradient(var(--marker),var(--marker)) no-repeat 0 88%/100% 30%;color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sv-page .cl-pr-p{max-width:34em;margin-top:16px;line-height:1.6;color:var(--ink-2)}
.cl-pr .sv-btn{margin-top:22px}

/* ── Co hýbe cenou: vodorovné ukazatele ── */
.cl-vl{margin-block:1.4em;border-top:1px solid var(--line)}
.cl-vl>li{display:grid;grid-template-columns:40px minmax(0,1fr) minmax(120px,.42fr);align-items:center;gap:6px 16px;padding:16px 0;border-bottom:1px solid var(--line)}
.cl-vl .ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--mint) 13%,#fff);color:var(--mint-ink)}
.cl-vl .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sv-page .cl-vl h3{margin:0;font:600 16.5px/1.3 var(--f-body);color:var(--ink)}
.sv-page .cl-vl p{margin-top:3px;font-size:15px;line-height:1.5}
.cl-vl-b{position:relative;display:block;height:8px;border-radius:8px;background:var(--card-2);overflow:hidden}
.cl-vl-b i{position:absolute;inset:0 auto 0 0;width:calc(var(--v) * 100%);border-radius:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--mint) 55%,#fff),var(--mint));transform-origin:left}
.sv-page .cl-vl-s{display:flex;justify-content:space-between;grid-column:3;font:500 11px/1 var(--f-mono);letter-spacing:.04em;color:var(--ink-3)}
.cl-vl>li.cl-vl-hl{padding-block:10px 8px;border-bottom:0}

/* ── Nabídka: doklad s řádky, které v ní mají být ── */
.cl-nab{position:relative;margin-block:1.6em;padding:clamp(18px,2.4vw,28px);border:1px solid var(--line);border-radius:22px;background:var(--card);box-shadow:var(--shadow)}
.cl-nab-h{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.cl-nab-h .lg{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--ink);color:#fff;font:700 15px/1 var(--f-display);font-stretch:125%}
.cl-nab-h b{display:block;font:600 16px/1.2 var(--f-body);color:var(--ink)}
.cl-nab-h small{display:block;margin-top:3px;font:400 13px/1.2 var(--f-body);color:var(--ink-2)}
.cl-nab-h em{margin-left:auto;padding:6px 11px;border-radius:999px;background:color-mix(in srgb,var(--mint) 14%,#fff);font:500 11.5px/1 var(--f-mono);color:var(--mint-ink)}
.cl-nab ul{margin-top:6px}
.cl-nab li{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dashed var(--line-strong)}
.cl-nab li:last-child{border-bottom:0}
.cl-nab li .ok{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--mint)}
.cl-nab li .ok svg{width:14px;height:14px;fill:none;stroke:var(--a-on-accent);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.cl-nab li span{font:500 15.5px/1.35 var(--f-body);color:var(--ink)}
.cl-nab li span small{display:block;font-size:13.5px;font-weight:400;color:var(--ink-2)}
.cl-nab li u{display:block;width:clamp(48px,9vw,86px);height:8px;border-radius:8px;background:var(--card-2);text-decoration:none}
.cl-nab-f{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:16px;border-top:1px solid var(--line-strong);font:600 15.5px/1 var(--f-body);color:var(--ink)}
.cl-nab-f u{display:block;width:clamp(80px,14vw,130px);height:12px;border-radius:12px;background:var(--ink);opacity:.85;text-decoration:none}

/* ── Roční náklady ── */
.cl-rok{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-block:1.5em 1em}
.cl-rok>li{display:flex;flex-direction:column;gap:6px;padding:18px 18px 20px;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:var(--shadow-s)}
.cl-rok .ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:6px;border-radius:12px;background:color-mix(in srgb,var(--c,var(--mint)) 15%,#fff);color:color-mix(in srgb,var(--c,var(--mint)) 72%,#06150f)}
.cl-rok .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sv-page .cl-rok h3{margin:0;font:600 15.5px/1.25 var(--f-body);color:var(--ink)}
.sv-page .cl-rok .c{font-family:var(--f-display);font-stretch:112%;font-weight:650;font-size:19px;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.sv-page .cl-rok p{font-size:14px;line-height:1.45;color:var(--ink-2)}

/* ── Příklad na tři roky: výroba a provoz v jednom pruhu ── */
.cl-tri{padding:clamp(18px,2.4vw,26px);border:1px solid var(--line);border-radius:20px;background:var(--card);box-shadow:var(--shadow-s)}
.sv-page .cl-tri-h{font:500 12.5px/1.45 var(--f-mono);letter-spacing:.02em;color:var(--ink-2)}
.cl-tri-b{display:flex;height:16px;margin-top:14px;border-radius:16px;overflow:hidden;background:var(--card-2)}
.cl-tri-b i{display:block;height:100%;transform-origin:left}
.cl-tri-b .v{flex:0 0 74.1%;background:var(--mint)}
.cl-tri-b .p{flex:0 0 25.9%;background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--lilac) 52%,#fff) 0 6px,color-mix(in srgb,var(--lilac) 28%,#fff) 6px 12px)}
.cl-tri-l{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:14px 22px;margin:16px 0 0}
.cl-tri-l>div{display:flex;flex-direction:column;gap:5px;min-width:0}
.cl-tri-l dt{display:flex;align-items:center;gap:8px;font:500 13.5px/1.2 var(--f-body);color:var(--ink-2)}
.cl-tri-l .v dt::before,.cl-tri-l .p dt::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:var(--mint)}
.cl-tri-l .p dt::before{background:color-mix(in srgb,var(--lilac) 50%,#fff)}
.cl-tri-l dd{margin:0;font-family:var(--f-display);font-stretch:112%;font-weight:650;font-size:18.5px;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums}
.cl-tri-l dd small{display:block;margin-top:5px;font:400 12.5px/1.4 var(--f-body);color:var(--ink-2)}
.cl-tri-l .s{padding-left:22px;border-left:1px solid var(--line);text-align:right}
.cl-tri-l .s dd{font-size:21px}

/* ── Tip a výzva uprostřed článku ── */
.cl-tip{display:grid;grid-template-columns:38px minmax(0,1fr);gap:14px;padding:18px 20px;border-radius:18px;background:var(--bg-soft)}
.cl-tip .ic{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:var(--mint-ink)}
.cl-tip .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cl-tip p{font-size:.95em;line-height:1.6}
.cl-cta{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 24px;margin-block:2em;padding:clamp(22px,3vw,32px);border-radius:24px;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate}
.cl-cta::before{content:"";position:absolute;z-index:-1;right:-20%;top:-60%;width:70%;aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(20,207,147,.32),transparent)}
.cl-cta-t{flex:1 1 300px;min-width:0}
.sv-page .cl-cta-h{font-family:var(--f-display);font-stretch:125%;font-weight:600;font-size:clamp(1.3rem,1rem + .9vw,1.75rem);line-height:1.15;letter-spacing:-.015em;color:#fff}
.sv-page .cl-cta-p{margin-top:8px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.74)}
.sv-page .cl-cta .sv-btn{background:#fff;color:var(--ink)}
.sv-page .cl-cta .sv-btn:hover{color:var(--ink)}

/* ── Patička článku: datum a autor ── */
.cl-ft{margin-top:3em;padding-top:26px;border-top:1px solid var(--line)}
.sv-page .cl-upr{font:500 12.5px/1 var(--f-mono);letter-spacing:.02em;color:var(--ink-3)}
.cl-autor{display:flex;align-items:center;gap:18px;margin-top:18px}
.sv-page .cl-autor p{font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.cl-autor b{font-weight:600;color:var(--ink)}
.cl-in{color:var(--ink);text-decoration:underline;text-decoration-color:var(--mint);text-decoration-thickness:2px;text-underline-offset:3px;white-space:nowrap}
.sv-page .cl-faq{padding-top:clamp(24px,3vw,48px)}

/* ── Výpis článků ── */
.cl-lhd{position:relative;padding:calc(var(--hl-h,80px) + clamp(28px,4.4vw,72px)) 0 clamp(28px,3.4vw,48px)}
.sv-page .cl-lh1{margin-top:22px;font-family:var(--f-display);font-stretch:125%;font-weight:600;font-size:clamp(2.2rem,1rem + 4.3vw,5rem);line-height:1.02;letter-spacing:-.032em;color:var(--ink)}
.cl-lh1 .ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.cl-lh1 .ln>span{display:block;animation:svUp .55s var(--ease) backwards}
.cl-lh1 .ln:nth-child(2)>span{animation-delay:.07s}
.cl-lst{padding-bottom:clamp(24px,4vw,56px)}
.cl-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cl-card>a{display:flex;flex-direction:column;height:100%;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:var(--shadow-s);color:var(--ink);text-decoration:none;overflow:hidden;transition:transform .37s var(--ease),box-shadow .37s var(--ease)}
.cl-card>a:hover{color:var(--ink);transform:translateY(-5px);box-shadow:var(--shadow)}
.cl-card>a:focus-visible{border-radius:24px}
.cl-card-i{display:grid;place-items:center;padding:clamp(12px,2vw,28px);background:var(--bg-soft)}
.cl-card-i .cl-cov{max-width:560px;transition:transform .74s var(--ease)}
.cl-card>a:hover .cl-cov{transform:scale(1.03)}
.cl-card-t{display:flex;flex:1;flex-direction:column;align-items:flex-start;gap:10px;padding:22px 24px 24px}
.sv-page .cl-card-k{display:flex;flex-wrap:wrap;gap:4px 8px;font:500 12px/1.3 var(--f-mono);letter-spacing:.02em;color:var(--ink-2)}
.cl-card-k i{color:var(--ink-3)}
.sv-page .cl-card-h{font-family:var(--f-display);font-stretch:125%;font-weight:600;font-size:clamp(1.2rem,1rem + .6vw,1.5rem);line-height:1.15;letter-spacing:-.015em;text-wrap:balance}
.sv-page .cl-card-p{max-width:32em;font:400 16px/1.6 var(--f-body);color:var(--ink-2);text-wrap:pretty}
.cl-card-l{display:inline-flex;align-items:center;gap:12px;margin-top:auto;padding-top:8px;font:600 15px/1 var(--f-body)}
.cl-card-l .ar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--card-2);transition:background .22s,transform .31s var(--ease)}
.cl-card-l svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.cl-card>a:hover .cl-card-l .ar{background:var(--mint);transform:translateX(3px)}
.cl-card.is-big{grid-column:1/-1}
.cl-card.is-big>a{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}
.cl-card.is-big .cl-card-t{justify-content:center;gap:14px;padding:clamp(24px,4vw,56px)}
.cl-card.is-big .cl-card-i .cl-cov{max-width:480px}
.cl-card.is-big .cl-card-l{margin-top:10px}
.sv-page .cl-card.is-big .cl-card-h{font-size:clamp(1.6rem,1.05rem + 1.8vw,2.7rem);line-height:1.08}

/* ── Postupné objevení ilustrací (text článku je vidět vždy) ── */
.sv-page.sv-js.cl .cl-sch[data-in] .cl-sch-st{transform:scaleY(0)}
.sv-page.sv-js.cl .cl-sch[data-in].is-in .cl-sch-st{transform:none;transition:transform .8s var(--ease) calc(var(--i) * 90ms + .1s)}
.sv-page.sv-js.cl .cl-sch[data-in] .cl-sch-k{opacity:0;transform:translateY(14px)}
.sv-page.sv-js.cl .cl-sch[data-in].is-in .cl-sch-k{opacity:1;transform:none;transition:opacity .45s ease calc(var(--i) * 90ms + .3s),transform .6s var(--ease) calc(var(--i) * 90ms + .3s)}
.sv-page.sv-js.cl .cl-vl[data-in] .cl-vl-b i{transform:scaleX(0)}
.sv-page.sv-js.cl .cl-vl[data-in].is-in .cl-vl-b i{transform:none;transition:transform .9s var(--ease) calc(var(--i,0) * 80ms + .15s)}
.sv-page.sv-js.cl .cl-nab[data-in] li .ok{transform:scale(0)}
.sv-page.sv-js.cl .cl-nab[data-in].is-in li .ok{transform:none;transition:transform .45s var(--ease) calc(var(--i,0) * 110ms + .25s)}
.sv-page.sv-js.cl .cl-tri[data-in] .cl-tri-b i{transform:scaleX(0)}
.sv-page.sv-js.cl .cl-tri[data-in].is-in .cl-tri-b .v{transform:none;transition:transform .9s var(--ease) .15s}
.sv-page.sv-js.cl .cl-tri[data-in].is-in .cl-tri-b .p{transform:none;transition:transform .6s var(--ease) .95s}
.sv-page.sv-js.cl .cl-pr[data-in]{opacity:0;transform:translateY(22px)}
.sv-page.sv-js.cl .cl-pr[data-in].is-in{opacity:1;transform:none;transition:opacity .45s ease,transform .62s var(--ease)}
.sv-page.sv-js.cl .cl-pr[data-in] mark{background-size:0% 30%}
.sv-page.sv-js.cl .cl-pr[data-in].is-in mark{background-size:100% 30%;transition:background-size 1s var(--ease) .35s}
.sv-page.sv-js.cl .cl-cta[data-in]{opacity:0;transform:translateY(18px)}
.sv-page.sv-js.cl .cl-cta[data-in].is-in{opacity:1;transform:none;transition:opacity .45s ease,transform .62s var(--ease)}
.sv-page.sv-js.cl .cl-rok[data-in]>li,.sv-page.sv-js.cl .cl-cards[data-in] .cl-card{opacity:0;transform:translateY(20px)}
.sv-page.sv-js.cl .cl-rok[data-in].is-in>li,.sv-page.sv-js.cl .cl-cards[data-in].is-in .cl-card{opacity:1;transform:none;transition:opacity .45s ease calc(var(--i,0) * 70ms),transform .62s var(--ease) calc(var(--i,0) * 70ms)}

/* ── Menší obrazovky ── */
@media (max-width:1199.98px){
.cl-grid{grid-template-columns:minmax(0,1fr);max-width:calc(42rem + 24px)}
.cl-side,.cl-tx{grid-column:1}
.cl-toc{position:static;max-width:none;margin:0 0 8px;padding:18px 20px 12px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.cl-toc ol{border-left:0}
.cl-toc a{padding-left:0}
.cl-toc a::after{display:none}
}
@media (max-width:991.98px){
.cl-hd-w{grid-template-columns:minmax(0,1fr)}
.cl-hd-i{justify-self:center;max-width:460px}
.cl-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.cl-card.is-big>a{display:flex}
}
@media (max-width:767.98px){
.cl-sch{grid-template-columns:minmax(0,1fr);gap:8px}
.cl-sch>li{min-height:0}
.cl-sch-st{display:none}
.cl-sch-k{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:2px 14px;min-height:0;padding:14px 16px}
.cl-sch-ic{grid-row:1/4;margin:0}
.cl-sch-n,.cl-sch-c,.cl-sch-t{grid-column:2}
.cl-sch-lv{grid-column:3;grid-row:1/4;align-self:center}
.cl-sch-lv{display:flex;gap:4px;margin-top:4px}
.cl-sch-lv i{width:16px;height:5px;border-radius:5px;background:var(--card-2)}
.cl-sch-lv i.on{background:var(--mint)}
.cl-vl>li{grid-template-columns:40px minmax(0,1fr)}
.cl-vl-b{grid-column:2}
.cl-vl>li.cl-vl-hl{display:none}
.cl-rok{grid-template-columns:minmax(0,1fr)}
.cl-tri-l{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.cl-tri-l .s{grid-column:1/-1;flex-direction:row;align-items:baseline;justify-content:space-between;padding:12px 0 0;border-left:0;border-top:1px solid var(--line);text-align:left}
}
@media (max-width:575.98px){
.cl-md{width:100%;margin-left:0;padding-left:0;border-left:0}
.cl-hd-i{max-width:360px}
.cl-cards{grid-template-columns:minmax(0,1fr)}
.cl-autor{align-items:flex-start}
.cl-nab li{grid-template-columns:24px minmax(0,1fr)}
.cl-nab li u{display:none}
}