/* BH Agency — blog.css · майстер-формат статті (blog-master 25.10). Лише сторінки /blog/<slug> (build.py → BLOG_CSS).
   Архетип A4 «Журнальна обкладинка» (мастхед капсом, клейм-H1, hairline-лінії, radius 0) · картка linear.app (шкали й ритм:
   display 1.0/-0.045em, headline 1.1/-0.03em, body 16–18/1.6, caption 12; база 4 px; один акцент на темному).
   Ідентичність BH: шрифти — наявні @font-face з tokens.css (Inter Tight · Inter · Manrope), кольори — токени tokens.css
   (лайм #c8ff3e / текстовий #6b8f00), обидві теми. Структура й прийоми — з нашого референсного блогу
   (зміст, номерні розділи, смуги, pull-цитати, тап-FAQ); код власний. Без JS усе видно: смуги заповнені, зміст відкритий. */

.pgb--blog{
  --bl-line:var(--card-line);
  --bl-line2:color-mix(in srgb,var(--ink) 20%,transparent);
  --bl-card:color-mix(in srgb,var(--ink) 2.5%,transparent);
  --bl-text:color-mix(in srgb,var(--ink) 88%,var(--bg));
  --bl-top:100px;           /* висота шапки сайту над статтею (обкладинка = перший екран) */
}
.bl-wrap{width:calc(100% - 40px);max-width:1240px;margin-inline:auto}
.bl-k,.bl-kick,.bl-mast,.bl-toc__k,.bl-toc__btn,.bl-stat__l{font-family:var(--f-manrope);font-weight:700;font-size:12.5px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase}
.bl-k>span,.bl-kick>span,.bl-toc__k>span,.bl-toc__bk>span{color:var(--accent-text-sm)}
.bl-k{margin:0;color:var(--muted)}

/* ── прогрес читання ── */
.bl-prog{display:none;position:fixed;inset:0 0 auto;height:2px;z-index:120;pointer-events:none}
.js .bl-prog{display:block}
.bl-prog i{display:block;height:100%;background:var(--lime);transform-origin:0 50%;transform:scaleX(0)}

/* ── ① обкладинка (A4): мастхед → кікер → клейм-H1 → смуга 4 чисел → лід ── */
.bl-cover__in{display:flex;flex-direction:column;min-height:calc(100svh - var(--bl-top));padding:clamp(16px,2vw,24px) 0 clamp(36px,4vw,56px)}
.bl-mast{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 28px;padding:13px 0;border-block:1px solid var(--bl-line2);color:var(--muted)}
.bl-mast .pg-crumbs__list{font:inherit;letter-spacing:inherit;color:var(--muted);gap:4px 10px}
.bl-mast .pg-crumbs__list li{gap:10px}
.bl-mast .pg-crumbs__list a{display:inline-flex;align-items:center;min-height:24px;color:var(--muted);text-decoration:none;transition:color .2s var(--ease-out-q)}
.bl-mast .pg-crumbs__list li:last-child{display:none}   /* поточна сторінка = H1 нижче; у JSON-LD BreadcrumbList лишається */
.bl-mast__m{display:flex;flex-wrap:wrap;gap:4px 0;margin:0}
.bl-mast__m>*+*::before{content:"·";margin:0 12px;color:var(--muted)}
@media (hover:hover) and (pointer:fine){.bl-mast .pg-crumbs__list a:hover{color:var(--ink)}}
.bl-cover__main{flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,5vw,72px) 0 clamp(32px,4vw,56px)}
.bl-kick{margin:0;color:var(--ink)}
.bl-h1{margin:clamp(16px,2vw,24px) 0 0;max-width:14ch;font:700 clamp(40px,6.6vw,96px)/.97 var(--f-tight);letter-spacing:-.045em;color:var(--ink-strong);text-wrap:balance}
.bl-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--bl-line2)}
.bl-stat{min-width:0;padding:20px 22px 22px;border-left:1px solid var(--bl-line)}
.bl-stat:first-child{border-left:0;padding-left:0}
.bl-stat__v{display:block;font:600 clamp(28px,2.7vw,40px)/1.02 var(--f-tight);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--ink-strong);overflow-wrap:anywhere}
.bl-stat.is-hl .bl-stat__v{color:var(--accent-text)}
.bl-stat__l{display:block;margin-top:12px;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.bl-lede{margin:clamp(22px,2.6vw,32px) 0 0;max-width:62ch;font:400 clamp(18px,1.45vw,21px)/1.55 var(--f-inter);color:var(--muted);text-wrap:pretty}

/* ── сітка статті: ⑧ «Коротко» · ② зміст · тіло ── */
.bl-post{padding-bottom:clamp(56px,7vw,104px)}
.bl-grid{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1100px){
  .bl-grid{grid-template-columns:232px minmax(0,780px);grid-template-areas:"toc brief" "toc body";column-gap:clamp(56px,6.5vw,120px)}
  .bl-toc{grid-area:toc;align-self:start;position:sticky;top:104px;max-height:calc(100vh - 128px);overflow:auto;scrollbar-width:thin}
  .bl-brief{grid-area:brief}
  .bl-body{grid-area:body}
}

/* ⑧ «Коротко» — answer-first, текст у HTML */
.bl-brief{margin-bottom:clamp(28px,3vw,40px);padding:24px 28px 26px;border:1px solid var(--bl-line2);background:var(--bl-card)}
.bl-brief__l{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px;counter-reset:b}
.bl-brief__l li{counter-increment:b;position:relative;padding-left:40px;font:500 17px/1.5 var(--f-inter);color:var(--ink)}
.bl-brief__l li::before{content:counter(b,decimal-leading-zero);position:absolute;left:0;top:2px;font:600 13px/1.6 var(--f-tight);font-variant-numeric:tabular-nums;color:var(--accent-text-sm)}

/* ② зміст: липкий бічний (≥ 1100) / розкривний (телефон, blog.js) / без JS — відкритий */
.bl-toc{margin-top:28px;border-block:1px solid var(--bl-line2)}
.bl-toc__btn{display:none;width:100%;align-items:center;gap:12px;min-height:52px;padding:0;border:0;background:none;color:var(--ink);cursor:pointer;text-align:left}
.bl-toc__c{margin-left:auto;color:var(--muted);letter-spacing:.08em}
.bl-toc__ic{position:relative;flex:none;width:14px;height:14px}
.bl-toc__ic::before,.bl-toc__ic::after{content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:currentColor;transition:transform .25s var(--ease-out-q)}
.bl-toc__ic::after{transform:rotate(90deg)}
.bl-toc.is-open .bl-toc__ic::after{transform:rotate(0)}
.bl-toc__k{margin:0;padding:14px 0 10px;color:var(--ink)}
.bl-toc__l{list-style:none;margin:0;padding:0 0 10px}
.bl-toc__l a{display:flex;gap:12px;align-items:baseline;padding:9px 0;border-top:1px solid var(--bl-line);color:var(--muted);text-decoration:none;font:500 14.5px/1.35 var(--f-inter);transition:color .2s var(--ease-out-q)}
.bl-toc__l a i{flex:0 0 22px;font:600 12px/1 var(--f-tight);font-style:normal;font-variant-numeric:tabular-nums;color:var(--muted)}
.bl-toc__l a[aria-current="true"]{color:var(--ink-strong)}
.bl-toc__l a[aria-current="true"] i{color:var(--accent-text-sm)}
@media (hover:hover) and (pointer:fine){.bl-toc__l a:hover{color:var(--ink-strong)}}
@media (max-width:1099.98px){
  .js .bl-toc__btn{display:flex}
  .js .bl-toc__k{display:none}
  .js .bl-toc:not(.is-open) .bl-toc__l{display:none}
}
@media (min-width:1100px){.bl-toc{margin-top:0}}

/* ── тіло ── */
.bl-body{min-width:0;font:400 18px/1.68 var(--f-inter);color:var(--bl-text)}
/* міра рядка ≈ 70 знаків (62ch у Inter 18 px); таблиці, FAQ, pull-цитати й сітка ul-карток — ширші */
.bl-body p{margin:0 0 1.1em;max-width:62ch}
.bl-body a{color:var(--ink-strong);text-decoration:underline;text-decoration-color:var(--accent-text);text-decoration-thickness:1.5px;text-underline-offset:4px}
.bl-body strong{font-weight:600;color:var(--ink-strong)}

/* ③ розділ: великий номер → H2 → «навіщо» → зміст */
.bl-sec{margin-top:clamp(56px,7vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--bl-line2);scroll-margin-top:96px}
.bl-sec__hd{margin-bottom:clamp(22px,2.4vw,30px)}
.bl-sec__n{display:block;font:600 clamp(56px,6vw,84px)/.82 var(--f-tight);letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:transparent;-webkit-text-stroke:1px var(--muted)}
.bl-sec__h{margin:18px 0 0;max-width:24ch;font:650 clamp(28px,2.9vw,40px)/1.1 var(--f-tight);letter-spacing:-.03em;color:var(--ink-strong);text-wrap:balance}
.bl-body .bl-why{margin:12px 0 0;max-width:56ch;font:500 16.5px/1.5 var(--f-inter);color:var(--muted)}

/* ④ таблиці — справжні <table>; числові колонки → смуги (transitionDelay у розмітці) */
.bl-tbl{margin:28px 0 32px;overflow-x:auto;border-block:1px solid var(--bl-line2);outline-offset:4px}
.bl-tbl table{width:100%;border-collapse:collapse;font:400 15.5px/1.5 var(--f-inter)}
.bl-tbl th{padding:14px 18px 12px 0;text-align:left;vertical-align:bottom;font:700 12px/1.3 var(--f-manrope);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--bl-line2)}
.bl-tbl td{padding:16px 18px 16px 0;vertical-align:top;border-bottom:1px solid var(--bl-line)}
.bl-tbl tr:last-child td{border-bottom:0}
.bl-tbl td.has-bar{min-width:150px}
.bl-tbl td:first-child{font-weight:600;color:var(--ink-strong)}
.bl-tbl a{color:inherit}
.bl-bar{position:relative;display:block;height:5px;margin-top:10px;max-width:220px;background:var(--bl-line)}
.bl-bar i{position:absolute;top:0;bottom:0;left:calc(var(--a) * 100%);width:max(5px,calc((var(--b) - var(--a)) * 100%));background:var(--accent-text);transform-origin:0 50%;transition:transform .9s var(--ease-out-q)}
.js .bl-tbl:not(.in) .bl-bar i{transform:scaleX(0)}
@media (hover:hover) and (pointer:fine){.bl-tbl tbody tr{transition:background-color .2s var(--ease-out-q)}.bl-tbl tbody tr:hover{background:var(--bl-card)}}
@media (max-width:640px){   /* телефон: рядок = картка, без горизонтального скролу */
  .bl-tbl{overflow:visible;border-bottom:0}
  .bl-tbl table,.bl-tbl tbody,.bl-tbl tr,.bl-tbl td{display:block;width:100%}
  .bl-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .bl-tbl tr{padding:16px 0 4px;border-bottom:1px solid var(--bl-line2)}
  .bl-tbl td{padding:0 0 12px;border:0}
  .bl-tbl td:first-child{font:600 19px/1.3 var(--f-tight);letter-spacing:-.01em}
  .bl-tbl td.is-key::before{content:attr(data-label) " ";font:inherit;letter-spacing:inherit;text-transform:none;color:var(--muted)}
  .bl-tbl td+td::before{content:attr(data-label);display:block;margin-bottom:3px;font:700 12px/1.3 var(--f-manrope);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
  .bl-bar{max-width:none}
}

/* ⑤ списки → картки (ul/ol/li ті самі) */
.bl-list{list-style:none;margin:24px 0 30px;padding:0;display:grid;gap:10px}
@media (min-width:720px){.bl-list--ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bl-list li{position:relative;padding:18px 20px 18px 46px;border:1px solid var(--bl-line);background:var(--bl-card);font-size:16.5px;line-height:1.55;transition:border-color .2s var(--ease-out-q),background-color .2s var(--ease-out-q)}
.bl-list--ul li::before{content:"";position:absolute;left:20px;top:29px;width:12px;height:2px;background:var(--accent-text)}
.bl-list--lead li>strong:first-child{display:block;margin-bottom:6px;font:600 18px/1.3 var(--f-tight);letter-spacing:-.01em}
.bl-list--ol{counter-reset:o;max-width:62ch}
.bl-list--ol li{counter-increment:o;padding-left:58px}
.bl-list--ol li::before{content:counter(o,decimal-leading-zero);position:absolute;left:20px;top:20px;font:600 14px/1.6 var(--f-tight);font-variant-numeric:tabular-nums;color:var(--accent-text-sm)}
@media (hover:hover) and (pointer:fine){.bl-list li:hover{border-color:var(--bl-line2);background:color-mix(in srgb,var(--ink) 4.5%,transparent)}}

/* абзаци з жирним реченням-заголовком поспіль → рядки з номером (теги <p> ті самі) */
.bl-facts{margin:6px 0 28px;max-width:62ch;border-top:1px solid var(--bl-line2);counter-reset:f}
.bl-body .bl-facts>p{counter-increment:f;position:relative;max-width:none;margin:0;padding:18px 0 18px 58px;border-bottom:1px solid var(--bl-line)}
.bl-facts>p::before{content:counter(f,decimal-leading-zero);position:absolute;left:0;top:21px;font:600 14px/1.6 var(--f-tight);font-variant-numeric:tabular-nums;color:var(--accent-text-sm)}
.bl-facts>p>strong:first-child{display:block;margin-bottom:4px;font:600 19px/1.3 var(--f-tight);letter-spacing:-.01em}

/* ⑥ цитата-виноска (дублює речення статті → aria-hidden) */
.bl-pull{margin:clamp(32px,4vw,48px) 0;padding:4px 0 4px clamp(20px,2.4vw,32px);border-left:2px solid var(--accent-text)}
.bl-body .bl-pull p{margin:0;max-width:30ch;font:500 clamp(23px,2.3vw,31px)/1.28 var(--f-tight);letter-spacing:-.02em;color:var(--ink-strong);text-wrap:balance}
.bl-pull p::before{content:"«"}
.bl-pull p::after{content:"»"}

/* ⑦ FAQ — тап-картки (наявний faq_section; JSON-LD незмінний) */
.bl-faq{margin-top:clamp(56px,7vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--bl-line2);scroll-margin-top:96px}
.bl-faq .pg-sec2{padding:0}
.bl-faq .pg-wrap{width:auto;max-width:none;margin:0}
.bl-faq .pg-h2{margin:0;font:650 clamp(28px,2.9vw,40px)/1.1 var(--f-tight);letter-spacing:-.03em;color:var(--ink-strong);background:none;-webkit-text-fill-color:currentColor}
.bl-faq .sv-faq{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:24px;counter-reset:q}
.bl-faq .sv-faq__c{display:contents}
.bl-faq .pg-qa{counter-increment:q;padding:0 20px;border:1px solid var(--bl-line);background:var(--bl-card);transition:border-color .2s var(--ease-out-q)}
.bl-faq .pg-qa[open]{border-color:var(--bl-line2)}
.bl-faq .pg-qa summary{gap:16px;padding:18px 0;font-size:clamp(17px,1.5vw,19px)}
.bl-faq .pg-qa summary>span{flex:1}
.bl-faq .pg-qa summary::before{content:counter(q,decimal-leading-zero);flex:0 0 28px;font:600 13px/1 var(--f-tight);font-variant-numeric:tabular-nums;color:var(--accent-text-sm)}
.bl-faq .pg-qa__a{padding:0 0 20px 44px}
.bl-faq .pg-qa__a p{font-size:16.5px;color:var(--bl-text)}
@media (hover:hover) and (pointer:fine){.bl-faq .pg-qa:hover{border-color:var(--bl-line2)}}

/* ── телефон ── */
@media (max-width:767.98px){
  .pgb--blog{--bl-top:104px}
  .bl-cover__in{min-height:0}
  .bl-mast{gap:6px 18px;padding:11px 0}
  .bl-mast__m{gap:4px 14px}
  .bl-mast__m>*+*::before{content:none}
  .bl-mast,.bl-kick,.bl-toc__btn,.bl-toc__k{font-size:12px}
  .bl-cover__main{padding:36px 0 30px}
  .bl-h1{letter-spacing:-.04em;line-height:1.02}
  .bl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bl-stat{padding:16px 14px 18px}
  .bl-stat:nth-child(odd){border-left:0;padding-left:0}
  .bl-stat:nth-child(n+3){border-top:1px solid var(--bl-line)}
  .bl-brief{padding:20px 18px 22px;margin-top:4px}
  .bl-brief__l li{font-size:16.5px;padding-left:34px}
  .bl-body{font-size:17px;line-height:1.65}
  .bl-list li{padding:16px 16px 16px 40px}
  .bl-list--ul li::before{left:16px;top:27px;width:10px}
  .bl-list--ol li{padding-left:50px}
  .bl-list--ol li::before{left:16px;top:18px}
  .bl-body .bl-facts>p{padding-left:40px}
  .bl-facts>p::before{top:20px}
  .bl-faq .pg-qa{padding:0 16px}
  .bl-faq .pg-qa__a{padding-left:0}
}

/* телефон ≤ 640: розкривний зміст одразу під шапкою (після ліду), перед «Відповіддю коротко»; на ширших — як було */
@media (max-width:640px){
  .bl-toc{order:-1;margin:0 0 20px}
  .bl-brief{margin-top:0}
}

/* без руху: кінцевий стан одразу */
@media (prefers-reduced-motion:reduce){
  .bl-bar i,.bl-list li,.bl-toc__ic::after,.bl-toc__l a,.bl-faq .pg-qa,.bl-tbl tbody tr{transition:none!important}
  .js .bl-tbl:not(.in) .bl-bar i{transform:none}
}