/* =====================================================================
   Klára – blog (web/blog/blog.css)
   Navazuje na /site.css: používá jeho tokeny (barvy, písma, mezery).
   Všechny třídy mají prefix bl-, aby se nepletly se zbytkem webu.
   ===================================================================== */

.bl-main{padding:32px 0 72px}
@media (min-width:960px){.bl-main{padding:48px 0 96px}}

.bl-col{max-width:740px;margin:0 auto}
.bl-wide{max-width:var(--max);margin:0 auto}

/* drobečková navigace */
.bl-crumbs{font-size:var(--fs-xs);color:var(--muted);margin:0 0 20px}
.bl-crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 8px}
.bl-crumbs li{display:flex;align-items:center;gap:8px;min-width:0}
.bl-crumbs li+li::before{content:"›";color:var(--line-strong)}
.bl-crumbs a{color:var(--muted);text-decoration:none}
.bl-crumbs a:hover{color:var(--ink);text-decoration:underline}
.bl-crumbs [aria-current]{color:var(--ink-2);overflow-wrap:anywhere}

/* hlavička článku */
.bl-kicker{display:inline-flex;align-items:center;gap:10px;font:600 .75rem/1 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink);margin:0 0 16px}
.bl-kicker::before{content:"";width:22px;height:1.5px;background:var(--accent-deco);border-radius:2px}
.bl-h1{font-family:var(--font-head);font-weight:400;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;overflow-wrap:break-word}
.bl-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;color:var(--muted);font-size:var(--fs-sm);margin:0 0 28px}
.bl-meta img{width:32px;height:32px;border-radius:50%;object-fit:cover}
.bl-meta a{color:var(--ink-2)}

/* stručná odpověď (GEO) */
.bl-answer{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent-deco);border-radius:var(--radius-sm);padding:18px 20px;margin:0 0 28px;box-shadow:var(--shadow-xs)}
.bl-answer-label{display:block;font:600 .75rem/1.2 var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 8px}
.bl-answer p{margin:0;font-size:var(--fs-lg);line-height:1.55;color:var(--ink)}

/* modelová situace – štítek */
.bl-note{background:var(--warn-bg);color:var(--warn-ink);border-radius:var(--radius-sm);padding:12px 16px;font-size:var(--fs-sm);margin:0 0 24px}
.bl-note strong{font-weight:700}

/* obrázek */
.bl-hero{margin:0 0 32px}
.bl-hero img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 35%;border-radius:var(--radius);background:var(--surface-2)}
.bl-hero figcaption{font-size:var(--fs-xs);color:var(--muted);margin-top:8px}

/* text článku */
.bl-body{font-size:var(--fs-md);line-height:1.7;color:var(--ink)}
.bl-body>*:first-child{margin-top:0}
.bl-body p{margin:0 0 1.05em}
.bl-body h2{font-family:var(--font-head);font-weight:400;font-size:clamp(1.55rem,2.6vw,2rem);line-height:1.15;letter-spacing:-.015em;margin:2em 0 .6em}
.bl-body h3{font-family:var(--font);font-weight:650;font-size:var(--fs-h3);line-height:1.3;margin:1.6em 0 .5em;color:var(--ink)}
.bl-body ul,.bl-body ol{margin:0 0 1.1em;padding-left:1.3em}
.bl-body li{margin:0 0 .45em}
.bl-body li::marker{color:var(--accent)}
.bl-body a{color:var(--brand-ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.bl-body a:hover{text-decoration-thickness:2px}
.bl-body strong{font-weight:650}
.bl-body blockquote{margin:1.4em 0;padding:4px 0 4px 18px;border-left:3px solid var(--accent-deco);font-family:var(--font-head);font-size:1.2rem;line-height:1.5;color:var(--ink-2)}
.bl-body blockquote p{margin:0 0 .4em}
.bl-body blockquote cite{display:block;font:400 var(--fs-sm)/1.4 var(--font);font-style:normal;color:var(--muted)}
.bl-body code{font-family:var(--mono);font-size:.92em;background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;overflow-wrap:anywhere;white-space:normal}
.bl-body hr{border:0;border-top:1px solid var(--line);margin:2em 0}

/* definice */
.bl-def{background:var(--surface-2);border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 1.4em}
.bl-def dt{font-weight:650;color:var(--ink)}
.bl-def dd{margin:2px 0 12px;color:var(--ink-2)}
.bl-def dd:last-child{margin-bottom:0}

/* tabulky */
.bl-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 1.4em;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface)}
.bl-table table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);min-width:480px}
.bl-table th,.bl-table td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.bl-table th{background:var(--surface-2);font-weight:650;color:var(--ink)}
.bl-table tr:last-child td{border-bottom:0}
.bl-table caption{caption-side:bottom;text-align:left;padding:8px 12px;font-size:var(--fs-xs);color:var(--muted)}

/* rozhovor (modelový) */
.bl-dialog{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;margin:0 0 1.4em}
.bl-dialog p{margin:0 0 .7em}
.bl-dialog p:last-child{margin-bottom:0}
.bl-dialog b{color:var(--brand-ink);font-weight:650;margin-right:.3em}
.bl-dialog .bl-dialog-cap{font-size:var(--fs-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:10px}

/* zápis z hovoru */
.bl-log{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);margin:0 0 1.4em;overflow:hidden}
.bl-log-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 18px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted)}
.bl-log-head strong{color:var(--ink)}
.bl-log-item{padding:14px 18px;border-bottom:1px solid var(--line)}
.bl-log-item:last-child{border-bottom:0}
.bl-tag{display:inline-block;font:700 .6875rem/1 var(--font);letter-spacing:.08em;text-transform:uppercase;padding:5px 8px;border-radius:999px;margin-bottom:8px}
.bl-tag-red{background:var(--red-soft);color:var(--red)}
.bl-tag-blue{background:var(--blue-soft);color:var(--blue)}
.bl-tag-green{background:var(--green-soft);color:var(--green)}
.bl-tag-grey{background:var(--grey-soft);color:var(--grey)}
.bl-log-item p{margin:0 0 .35em;font-size:var(--fs-sm);line-height:1.55}
.bl-log-item dl{display:grid;grid-template-columns:minmax(90px,max-content) 1fr;gap:4px 14px;margin:6px 0 0;font-size:var(--fs-sm)}
.bl-log-item dt{color:var(--muted)}
.bl-log-item dd{margin:0;color:var(--ink)}

/* rámeček (tip, skript) */
.bl-box{background:var(--primary-soft);border-radius:var(--radius-sm);padding:16px 20px;margin:0 0 1.4em}
.bl-box>*:last-child{margin-bottom:0}
.bl-box-title{font-weight:650;margin:0 0 .5em;color:var(--ink)}

/* Co si odnést */
.bl-takeaways{background:var(--deep);color:var(--deep-ink);border-radius:var(--radius);padding:24px 24px 18px;margin:40px 0}
.bl-takeaways h2{font-family:var(--font-head);font-weight:400;font-size:1.6rem;color:var(--deep-ink);margin:0 0 12px}
.bl-takeaways ul{margin:0;padding-left:1.2em}
.bl-takeaways li{margin:0 0 .6em;line-height:1.55}
.bl-takeaways li::marker{color:var(--accent-deco)}

/* FAQ */
.bl-faq{margin:40px 0}
.bl-faq h2{font-family:var(--font-head);font-weight:400;font-size:clamp(1.55rem,2.6vw,2rem);margin:0 0 14px}
.bl-faq details{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);margin:0 0 10px}
.bl-faq summary{cursor:pointer;list-style:none;padding:14px 44px 14px 18px;font-weight:600;position:relative;line-height:1.4}
.bl-faq summary::-webkit-details-marker{display:none}
.bl-faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-size:1.3rem;line-height:1;color:var(--accent)}
.bl-faq details[open] summary::after{content:"–"}
.bl-faq summary:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-sm)}
.bl-faq .bl-faq-a{padding:0 18px 14px;color:var(--ink-2)}
.bl-faq .bl-faq-a p{margin:0 0 .6em}
.bl-faq .bl-faq-a p:last-child{margin:0}

/* zdroje a upozornění */
.bl-sources{margin:32px 0;font-size:var(--fs-sm)}
.bl-sources h2{font-family:var(--font);font-weight:650;font-size:var(--fs-lg);margin:0 0 8px}
.bl-sources ol{padding-left:1.3em;margin:0}
.bl-sources li{margin:0 0 .4em;overflow-wrap:anywhere}
.bl-sources a{color:var(--brand-ink)}
.bl-disclaimer{border:1px dashed var(--line-strong);border-radius:var(--radius-sm);padding:12px 16px;font-size:var(--fs-sm);color:var(--ink-2);margin:24px 0}

/* CTA */
.bl-cta{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:28px 24px;margin:40px 0;box-shadow:var(--shadow);text-align:left}
.bl-cta h2{font-family:var(--font-head);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.9rem);margin:0 0 8px}
.bl-cta p{margin:0 0 18px;color:var(--ink-2)}
.bl-cta .btn{width:100%}
@media (min-width:600px){.bl-cta .btn{width:auto}}

/* autor */
.bl-author{display:flex;gap:16px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:40px 0}
.bl-author img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none}
.bl-author p{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.bl-author .bl-author-name{font-weight:650;color:var(--ink);font-size:var(--fs-md);margin-bottom:2px}
.bl-author a{color:var(--brand-ink)}

/* související a výpis */
.bl-related h2,.bl-list-h{font-family:var(--font-head);font-weight:400;font-size:clamp(1.5rem,2.4vw,1.9rem);margin:0 0 16px}
.bl-cards{display:grid;grid-template-columns:1fr;gap:16px;list-style:none;margin:0;padding:0}
@media (min-width:700px){.bl-cards{grid-template-columns:1fr 1fr}}
@media (min-width:1040px){.bl-cards.bl-cards-3{grid-template-columns:repeat(3,1fr)}}
.bl-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-xs);transition:transform .18s,box-shadow .18s;min-width:0}
.bl-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.bl-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:center 35%;background:var(--surface-2)}
.bl-card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.bl-card-meta{font-size:var(--fs-xs);color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}
.bl-card-meta span:first-child{color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.bl-card h3{font-family:var(--font);font-size:1.125rem;font-weight:650;line-height:1.35;margin:0}
.bl-card h3 a{color:var(--ink);text-decoration:none}
.bl-card h3 a::after{content:"";position:absolute;inset:0}
.bl-card{position:relative}
.bl-card h3 a:focus-visible{outline:none}
.bl-card:focus-within{outline:2px solid var(--focus);outline-offset:2px}
.bl-card p{margin:0;font-size:var(--fs-sm);color:var(--ink-2);line-height:1.55}

/* úvod výpisu */
.bl-intro{max-width:760px;margin:0 0 36px}
.bl-intro p{font-size:var(--fs-lg);color:var(--ink-2);margin:0}
.bl-topics{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none}
.bl-topics li{font-size:var(--fs-xs);background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:5px 12px;color:var(--ink-2)}

.nav-links a[aria-current="page"]{background:var(--surface-2);color:var(--ink)}

/* nezlomitelné výrazy (T-Mobile) a kód mimo tělo článku */
.bl-nw{white-space:nowrap}
.bl-answer code,.bl-faq code,.bl-takeaways code,.bl-log code{font-family:var(--mono);font-size:.9em;border-radius:6px;padding:1px 6px;overflow-wrap:anywhere;white-space:normal}
.bl-answer code,.bl-faq code,.bl-log code{background:var(--surface-2);border:1px solid var(--line)}
.bl-takeaways code{background:var(--deep-2);border:1px solid var(--deep-line);color:var(--deep-ink)}

/* site.css dává každé <section> velký padding – v článku ho rušíme */
.bl-main section:not(.bl-takeaways){padding:0}