/* ═══════════ article.css — článek blogu v designu Detail Studia ═══════════ */
#pb{position:fixed;top:0;left:0;height:3px;width:0;background:var(--tc,#ffca25);z-index:200;transition:width .1s}
/* HERO */
.ar-hero{position:relative;overflow:hidden;padding:160px clamp(24px,4vw,64px) 70px;background:radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--tc) 55%,transparent) 0,transparent 45%),#0b0b0c;color:#f4f1e8}
.ar-hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(rgba(244,241,232,.07) 1px,transparent 1px);background-size:14px 14px;pointer-events:none}
.ar-hero-word{position:absolute;right:-2vw;bottom:-4vw;font-family:var(--display);text-transform:uppercase;font-size:clamp(7rem,19vw,20rem);line-height:.9;color:transparent;-webkit-text-stroke:1.5px var(--tc);opacity:.22;white-space:nowrap;pointer-events:none}
.ar-hero-in{position:relative;max-width:1100px}
.ar-crumbs{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ar-crumbs a{border-bottom:1px solid currentColor;opacity:.85}
.ar-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 13px;border-radius:30px;background:var(--tc);color:#0b0b0c}
.ar-hero h1{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.6rem,5.6vw,5.8rem);line-height:1.02!important;margin:24px 0 22px;letter-spacing:.005em}
.ar-lead{font-size:clamp(1.12rem,1.5vw,1.4rem);line-height:1.55;max-width:760px;opacity:.9}
.ar-meta{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap}
.ar-meta img{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid var(--tc)}
.ar-meta b{display:block;font-family:var(--brand);font-weight:800}
.ar-meta span{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
/* TĚLO */
.ar-body{background:#f4f1e8;color:#0b0b0c;padding:clamp(60px,9vh,100px) clamp(24px,4vw,64px)}
.ar-grid{display:grid;grid-template-columns:240px minmax(0,740px);gap:clamp(30px,6vw,110px);justify-content:center;max-width:1300px;margin:0 auto}
.ar-toc{position:sticky;top:110px;align-self:start;font-size:.9rem}
.ar-toc b{display:block;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.55;margin-bottom:14px}
.ar-toc a{display:block;padding:8px 0 8px 14px;border-left:2px solid rgba(11,11,12,.12);line-height:1.35;opacity:.7;transition:all .2s}
.ar-toc a:hover,.ar-toc a.on{opacity:1;border-left-color:var(--tc);font-weight:600}
.ar-toc .ar-toc-cta{margin-top:26px;border:0;padding:14px 16px;border-radius:14px;background:#0b0b0c;color:#f4f1e8;opacity:1;font-weight:600;cursor:pointer;width:100%;text-align:left;font:inherit;font-weight:600}
.ar-toc .ar-toc-cta small{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tc);margin-bottom:4px}
.ar{font-size:1.14rem;line-height:1.75}
.ar>*+*{margin-top:1.15em}
.ar h2{font-family:var(--brand);font-weight:800;font-size:clamp(1.7rem,2.6vw,2.3rem);line-height:1.15;letter-spacing:-.02em;margin-top:2.2em;scroll-margin-top:100px}
.ar h2::before{content:'';display:block;width:44px;height:6px;border-radius:3px;background:var(--tc);margin-bottom:18px}
.ar h3{font-family:var(--brand);font-weight:800;font-size:1.35rem;line-height:1.25;margin-top:1.8em}
.ar h4{font-family:var(--mono);font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:1.6em}
.ar p{max-width:70ch}
.ar strong{font-weight:700}
.ar a:not(.btn):not(.rc){text-decoration:underline;text-decoration-color:var(--tc);text-decoration-thickness:3px;text-underline-offset:3px}
.ar ul,.ar ol{padding-left:1.3em}
.ar li{margin:.45em 0}
.ar ul li::marker{color:#0b0b0c}
.ar ol li::marker{font-family:var(--mono);font-weight:700}
/* čísla */
.ar .sg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:2em 0}
.ar .si{background:#0b0b0c;color:#f4f1e8;border-radius:18px;padding:22px 18px}
.ar .sn{font-family:var(--display);font-size:clamp(2rem,3vw,2.8rem);line-height:1;color:var(--tc)}
.ar .sl{font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;margin-top:10px;opacity:.8;line-height:1.5}
/* box a citát */
.ar .box{background:#fff;border-radius:18px;padding:24px 26px;border-left:6px solid var(--tc);box-shadow:0 10px 30px rgba(11,11,12,.06)}
.ar .box p{margin:0}.ar .box p+p{margin-top:.8em}
.ar .bxl{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.ar .pq{font-family:var(--brand);font-weight:800;font-size:clamp(1.4rem,2.3vw,1.9rem);line-height:1.3;padding:10px 0 10px 26px;border-left:6px solid var(--tc);margin:1.8em 0}
/* kroky */
.ar .st{display:grid;gap:10px;margin:1.8em 0}
.ar .s{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;background:#fff;border-radius:18px;padding:20px 22px}
.ar .sn2{grid-row:span 2;font-family:var(--display);font-size:2.4rem;line-height:1;color:#0b0b0c;-webkit-text-stroke:0;background:var(--tc);border-radius:12px;padding:6px 10px;align-self:start}
.ar .st2{font-family:var(--brand);font-weight:800;font-size:1.15rem}
.ar .sb{font-size:1rem;line-height:1.6;opacity:.85}
/* checklist */
.ar .cl{background:#0b0b0c;color:#f4f1e8;border-radius:20px;padding:26px}
.ar .clt{font-family:var(--display);text-transform:uppercase;font-size:1.6rem;margin-bottom:12px}
.ar .ci{display:flex;gap:12px;align-items:flex-start;padding:9px 0;border-top:1px solid rgba(244,241,232,.12)}
.ar .cb{flex:none;width:24px;height:24px;border-radius:50%;background:var(--tc);color:#0b0b0c;display:grid;place-items:center;font-size:.8rem;font-weight:800}
/* dva sloupce */
.ar .tw{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:1.8em 0}
.ar .tc{background:#fff;border-radius:18px;padding:22px}
.ar .tct{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:20px;display:inline-block;margin-bottom:8px}
.ar .tct.g{background:#22c55e;color:#0b0b0c}.ar .tct.r{background:#ef4444;color:#fff}
.ar .tc ul{font-size:1rem}
/* diagnózy */
.ar .diag-card{background:#fff;border-radius:20px;padding:26px;margin:1.4em 0;border-top:6px solid var(--tc)}
.ar .diag-card.red{border-top-color:#ef4444}.ar .diag-card.yellow{border-top-color:#ffca25}
.ar .diag-num{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.6}
.ar .diag-title{font-family:var(--brand);font-weight:800;font-size:1.4rem;margin:6px 0 10px}
.ar .diag-body p+p{margin-top:.8em}
.ar .diag-fix{margin-top:14px;padding:14px 16px;border-radius:12px;background:#f4f1e8;font-size:1rem}
/* tabulky */
.ar table{width:100%;border-collapse:collapse;font-size:.98rem;background:#fff;border-radius:16px;overflow:hidden;display:block;overflow-x:auto}
.ar th{background:#0b0b0c;color:#f4f1e8;text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;padding:13px 14px}
.ar td{padding:12px 14px;border-top:1px solid rgba(11,11,12,.08);vertical-align:top}
/* CTA v článku */
.ar .cta{background:#0b0b0c;color:#f4f1e8;border-radius:22px;padding:30px;margin:2.4em 0}
.ar .ctal{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.7rem,2.8vw,2.4rem);line-height:1.05}
.ar .cta p{opacity:.85;margin-top:12px}
.ar .cta-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.ar .cta .btn{display:inline-flex;padding:13px 18px;border-radius:40px;background:var(--tc);color:#0b0b0c;font-weight:700;font-size:.95rem;text-decoration:none}
.ar .cta .btn-o,.ar .cta .btn2{background:transparent;color:#f4f1e8;border:1.5px solid rgba(244,241,232,.4)}
/* zdroje / další čtení v textu */
.ar .rg{border-top:1.5px solid rgba(11,11,12,.15);padding-top:20px;margin-top:2.6em;font-size:.9rem}
.ar .rg h4{margin:0 0 10px}
.ar .ri{padding:5px 0;opacity:.7}
.ar .rc{display:block;background:#0b0b0c;color:#f4f1e8;border-radius:16px;padding:18px;margin:8px 0}
.ar .rc-c{font-family:var(--mono);font-size:.58rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tc)}
.ar .rc-t{font-family:var(--brand);font-weight:800;margin:6px 0}
.ar .rc-a{font-family:var(--mono);font-size:.58rem;opacity:.7}
.ar .ww{padding:0!important}
/* autor + sdílení */
.ar-author{display:flex;gap:18px;align-items:center;margin-top:3em;padding:24px;border-radius:20px;background:#0b0b0c;color:#f4f1e8}
.ar-author img{width:74px;height:74px;border-radius:50%;object-fit:cover;flex:none}
.ar-author b{font-family:var(--brand);font-weight:800;font-size:1.15rem}
.ar-author p{font-size:.98rem;line-height:1.5;opacity:.85;margin-top:4px}
.ar-share{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.ar-share button,.ar-share a{font-family:var(--mono);font-size:.62rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:11px 15px;border-radius:30px;border:1.5px solid rgba(11,11,12,.25);background:none;color:#0b0b0c;cursor:pointer}
.ar-share button:hover,.ar-share a:hover{background:#0b0b0c;color:#f4f1e8}
/* další články */
.ar-rel{background:#0b0b0c;color:#f4f1e8;padding:clamp(70px,10vh,110px) clamp(24px,4vw,64px)}
.ar-rel-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;max-width:1300px;margin:0 auto 26px}
.ar-rel-head h2{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(2.6rem,5vw,4.6rem);line-height:1!important}
.ar-rel-head a{font-family:var(--mono);font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-bottom:1.5px solid currentColor}
.ar-rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1300px;margin:0 auto}
.bl-card{--tc:#ffca25;position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:26px;min-height:230px;border-radius:20px;padding:24px;background:radial-gradient(circle at 100% 0%,color-mix(in srgb,var(--tc) 45%,transparent) 0,transparent 55%),#151517;border:1px solid rgba(244,241,232,.08);color:#f4f1e8;overflow:hidden;transition:transform .3s,border-color .3s}
.bl-card:hover{transform:translateY(-6px);border-color:var(--tc)}
.bl-k{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.bl-k i{width:9px;height:9px;border-radius:50%;background:var(--tc)}
.bl-card h3{font-family:var(--brand);font-weight:800;font-size:clamp(1.2rem,1.5vw,1.5rem);line-height:1.2}
.bl-m{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.6rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.bl-m b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--tc);color:#0b0b0c;font-size:1rem}
@media(max-width:1000px){.ar-grid{grid-template-columns:minmax(0,1fr)}.ar-toc{display:none}.ar-rel-grid{grid-template-columns:1fr}.ar .tw{grid-template-columns:1fr}}
@media(max-width:600px){.ar{font-size:1.06rem}.ar-author{flex-direction:column;align-items:flex-start}}
.ar .w,.ar .ww{padding:0!important;max-width:none}
.ar .w>*+*,.ar .ww>*+*{margin-top:1.15em}
.ar .dt{margin:1.8em 0}
.ar .rg .rc+.rc{margin-top:8px}
/* logo D v hlavičce článku */
.ar-hero::after{content:'';position:absolute;top:clamp(96px,14vh,130px);right:clamp(24px,4vw,64px);width:clamp(60px,7vw,110px);aspect-ratio:113/110;background:var(--tc);-webkit-mask:url(../images/logo/d-mark.svg) center/contain no-repeat;mask:url(../images/logo/d-mark.svg) center/contain no-repeat}
/* české háčky a čárky u velkých nadpisů se nesmí překrývat — větší řádkování */
html body :is(h1,h2,.display,.reel-label,.pv-manifest,.rf-did-grid b,.ctal,.clt,.pv-flow b,.pv-step b,.pr-box h3,.bl-topic span,.big-h,.end h2,.sec-head h2,.rf-hero h1,.ar-hero h1,.bl-feat h2,.pv-hero h1){line-height:1.2!important}
:is(h1,h2,.big-h){padding-top:.06em}