/* Алтор Веб · v2 · раздел «Блог» (19.10.2026)
   Витрина: фильтр по теме. Статья: первый экран с обложкой, «Коротко», схемы кодом внутри глав.
   Подключается после v2.css и v2-issl.css (главы, графики, карточки). Сетка 12 колонок × 24px, внутри глав — 9 колонок с тем же шагом.
   Движение — только transform/opacity, скрытые состояния — под html.v2-motion: без скрипта и при «меньше движения» всё в итоговом виде. */

/* ---------- витрина: фильтр по теме ---------- */
.bfilt{display:none;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:12px;align-items:end;margin:56px 0 40px}
.v2-js .bfilt{display:grid}
.bfilt__g{grid-column:1 / span 9;display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.bfilt__g>.label{flex-basis:100%;margin-bottom:4px}
.bfilt__n{grid-column:10 / span 3;text-align:right;font-size:14px;color:var(--ink3);padding-bottom:10px}
.bfilt__n b{color:var(--ink);font-variant-numeric:tabular-nums}
@media (max-width:760px){ .bfilt__g,.bfilt__n{grid-column:1 / -1;text-align:left} .bfilt__n{padding-bottom:0} .bfilt{margin:40px 0 32px} }
/* узкая карточка статьи: цифра короче, чем у исследований */
.blog .ccard--txt .ccard__n{font-size:clamp(40px,4vw,60px)}
.blog .ccard__n{white-space:normal}
/* строки исследований и кейсов под карточками */
.bmore-rl{margin-top:56px}

/* ---------- статья: первый экран ---------- */
.bhero .h1{font-size:clamp(36px,4vw,60px)}
.bcov{position:relative;border-radius:var(--r-box);overflow:hidden;border:1px solid var(--line2);background:var(--bg3);box-shadow:var(--shadow);aspect-ratio:16/9}
.bcov img{width:100%;height:100%;object-fit:cover}
.bmeta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;font-size:14px;font-weight:600;color:var(--ink3)}
.bmeta>span+span::before{content:"";display:inline-block;width:4px;height:4px;margin:0 12px 2px -10px;border-radius:50%;background:var(--ink3);vertical-align:middle}
.bmeta a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line2)}
.bmeta a:hover{color:var(--ink);border-color:var(--limeInk)}

/* ---------- «Коротко»: номер 1–2, тезис 3–10 ---------- */
.bkey-sec{padding-top:96px}
.bkey{margin-top:48px;border-top:1px solid var(--line2)}
.bkey__row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
.bkey__k{grid-column:1 / span 2;font-size:15px;font-weight:800;color:var(--limeInk);font-variant-numeric:tabular-nums}
.bkey__row p{grid-column:3 / span 8;font-size:clamp(20px,1.8vw,26px);font-weight:700;letter-spacing:-.02em;line-height:1.35;color:var(--ink);text-wrap:balance}
@media (max-width:760px){ .bkey-sec{padding-top:72px} .bkey__row{grid-template-columns:2.4em minmax(0,1fr);column-gap:12px;padding:20px 0} .bkey__k{grid-column:1} .bkey__row p{grid-column:2} }

/* ---------- схемы внутри глав: общий отступ ---------- */
.chap>.gf--vs,.chap>.gf--chain,.chap>.gf--fork,.chap>.gf--time,.chap>.gf--check,.chap>.gf--paths{margin-top:48px}
.chap>.gf+.crit{margin-top:48px}
.chap>.crit+.gf,.chap>.callout+.gf,.chap>.gf+.callout{margin-top:48px}
.chap>p+.crit,.chap>p+.gf{margin-top:40px}
.chap>.gf+p{margin-top:32px}
.chap>p a{color:var(--ink);text-decoration-color:var(--limeInk)}

/* сравнение двумя колонками: слева 1–4, стрелка 5, справа 6–9 */
.bvs__head{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:24px;padding-bottom:12px;border-bottom:1px solid var(--line2);font-size:13px;font-weight:700;color:var(--ink3)}
.bvs__head>:nth-child(1){grid-column:1 / span 4}
.bvs__head>:nth-child(2){grid-column:6 / span 4;color:var(--limeInk)}
.bvs__row{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:24px;row-gap:12px;padding:24px 0;border-bottom:1px solid var(--line);align-items:start}
.bvs__a{grid-column:1 / span 4}.bvs__arr{grid-column:5;color:var(--limeInk);padding-top:4px}.bvs__b{grid-column:6 / span 4}
.bvs__a>b,.bvs__b>b{display:block;font-size:18px;font-weight:800;letter-spacing:-.01em;line-height:1.3;margin-bottom:6px}
.bvs__a>b{color:var(--ink2);font-weight:700}
.bvs__a>span:not(.sr-only),.bvs__b>span:not(.sr-only){display:block;font-size:16px;line-height:1.55}
.bvs__a>span{color:var(--ink3)}.bvs__b>span{color:var(--ink2)}
.bvs__row{transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(120ms + var(--k,0) * 90ms)}
.v2-motion .gf:not(.is-in) .bvs__row{opacity:0;transform:translateY(10px)}
@media (max-width:760px){
  .bvs__head{display:none}
  .bvs__row{grid-template-columns:minmax(0,1fr);padding:20px 0}
  .bvs__a,.bvs__b,.bvs__arr{grid-column:1}
  .bvs__arr{transform:rotate(90deg);transform-origin:14px 8px;width:28px;padding:0}
  .bvs__a .sr-only,.bvs__b .sr-only{position:static!important;width:auto;height:auto;margin:0 0 4px;clip:auto;overflow:visible;white-space:normal;display:block;font-size:13px;font-weight:700;color:var(--ink3)}
  .bvs__b .sr-only{color:var(--limeInk)}
}

/* цепочка шагов: точка 1, номер и название 2–4, пояснение 5–9; лаймовая линия прорисовывается при появлении */
.bch{position:relative;display:grid;gap:0}
.bch__line{position:absolute;left:11px;top:14px;bottom:14px;width:2px;border-radius:2px;background:var(--line2);overflow:hidden}
.bch__line i{position:absolute;inset:0;background:var(--lime);transform-origin:top;transition:transform 1600ms var(--ease) 200ms}
.v2-motion .gf:not(.is-in) .bch__line i{transform:scaleY(0)}
.bch__row{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:24px;row-gap:4px;padding:0 0 32px;align-items:baseline}
.bch__row:last-child{padding-bottom:0}
.bch__dot{grid-column:1;grid-row:1 / span 2;align-self:start;width:24px;height:24px;margin-top:2px;border-radius:50%;background:var(--bg2);border:2px solid var(--lime);position:relative;z-index:1}
:root[data-theme="light"] .sec--alt .bch__dot{background:var(--bg3)}
.bch__n{grid-column:1;grid-row:1 / span 2;align-self:start;margin:4px 0 0 40px;font-size:13px;font-weight:800;color:var(--limeInk);font-variant-numeric:tabular-nums}
.bch__k{grid-column:2 / span 3;font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.bch__t{grid-column:5 / span 5;font-size:16px;line-height:1.55;color:var(--ink2)}
.bch__row--end .bch__dot{background:var(--lime);box-shadow:0 0 0 6px var(--limeSoft)}
.bch__row--end .bch__k{color:var(--limeInk)}
.bch__row--end .bch__n{color:var(--ink3);font-weight:700}
.bch__row:not(.bch__line){transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(150ms + var(--k,0) * 110ms)}
.v2-motion .gf:not(.is-in) .bch__row{opacity:0;transform:translateY(10px)}
@media (max-width:760px){
  .bch__row{grid-template-columns:24px minmax(0,1fr);column-gap:16px;padding-bottom:24px}
  .bch__dot{grid-row:1 / span 3}
  .bch__n{grid-column:2;grid-row:1;margin:2px 0 0}
  .bch__k,.bch__t{grid-column:2}
}

/* развилка решения: вопрос на всю ширину, ветви 1–4 и 6–9, общий вывод внизу */
.bfk{--c:calc((100% - 192px) / 9);display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:24px}
.bfk__q{grid-column:1 / -1;padding:20px 24px;border-radius:var(--r-card);border:1px dashed var(--line2);text-align:center;font-size:clamp(18px,1.6vw,22px);font-weight:800;letter-spacing:-.015em}
.bfk__wire{grid-column:1 / -1;position:relative;height:56px}
.bfk__wire::before{content:"";position:absolute;left:50%;top:0;height:28px;width:2px;margin-left:-1px;background:var(--line2)}
.bfk__wire i{position:absolute;top:27px;bottom:0;left:calc(var(--c) * 2 + 36px);right:calc(var(--c) * 2 + 36px);border:2px solid var(--line2);border-bottom:0;border-radius:12px 12px 0 0}
.bfk__b{grid-column:1 / span 4;display:flex;flex-direction:column;padding:22px 24px 26px;border-radius:var(--r-card);border:1px solid var(--line2);background:var(--bg)}
.bfk__b+.bfk__b{grid-column:6 / span 4}
.bfk__if{font-size:13px;font-weight:700;color:var(--ink3)}
.bfk__down{display:block;width:2px;height:24px;margin:12px 0;background:linear-gradient(var(--limeInk),transparent)}
.bfk__ans{font-size:clamp(30px,3vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1;color:var(--limeInk)}
.bfk__why{margin-top:8px;font-size:16px;color:var(--ink2)}
.bfk__both{grid-column:1 / -1;margin-top:24px;padding:20px 24px;border-radius:var(--r-card);background:var(--limeSoft);font-size:17px;line-height:1.55;color:var(--ink)}
.bfk__both b{font-weight:800}
.bfk__b,.bfk__both{transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(150ms + var(--k,0) * 140ms)}
.v2-motion .gf:not(.is-in) .bfk__b,.v2-motion .gf:not(.is-in) .bfk__both{opacity:0;transform:translateY(12px)}
@media (max-width:760px){
  .bfk{grid-template-columns:minmax(0,1fr);row-gap:12px}
  .bfk__wire{display:none}
  .bfk__b,.bfk__b+.bfk__b,.bfk__both{grid-column:1}
  .bfk__both{margin-top:0}
}

/* срок по шкале: три отрезка по 3 колонки */
.btm{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:24px;padding-top:40px}
.btm__line{position:absolute;left:0;right:0;top:11px;height:2px;border-radius:2px;background:var(--line2);overflow:hidden}
.btm__line i{position:absolute;inset:0;background:linear-gradient(90deg,var(--line2),var(--lime));transform-origin:left;transition:transform 1600ms var(--ease) 200ms}
.v2-motion .gf:not(.is-in) .btm__line i{transform:scaleX(0)}
.btm__s{grid-column:span 3;position:relative;min-width:0}
.btm__dot{position:absolute;left:0;top:-40px;width:24px;height:24px;border-radius:50%;background:var(--bg2);border:2px solid var(--line2)}
:root[data-theme="light"] .btm__dot{background:var(--bg2)}
.btm__s--hot .btm__dot{background:var(--lime);border-color:var(--lime);box-shadow:0 0 0 6px var(--limeSoft)}
.btm__s>b{display:block;font-size:clamp(30px,3vw,44px);font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;color:var(--ink)}
.btm__s--hot>b{color:var(--limeInk)}
.btm__s>span{display:block;margin-top:10px;font-size:15px;line-height:1.5;color:var(--ink2);max-width:26ch}
.btm__s{transition:opacity 700ms var(--ease),transform 700ms var(--ease);transition-delay:calc(200ms + var(--k,0) * 220ms)}
.v2-motion .gf:not(.is-in) .btm__s{opacity:0;transform:translateY(10px)}
@media (max-width:760px){
  .btm{grid-template-columns:minmax(0,1fr);row-gap:28px;padding:0 0 0 44px}
  .btm__line{left:11px;right:auto;top:12px;bottom:12px;width:2px;height:auto}
  .btm__line i{background:linear-gradient(180deg,var(--line2),var(--lime));transform-origin:top}
  .v2-motion .gf:not(.is-in) .btm__line i{transform:scaleY(0)}
  .btm__s{grid-column:1}
  .btm__dot{left:-44px;top:4px}
}

/* состав работ: таблица с отметками */
.bchk table{font-size:16px}
.bchk th.c,.bchk td.c{text-align:center;width:24%}
.bchk td.c small{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:var(--ink3)}
.bm{display:inline-block;width:14px;height:14px;border-radius:50%;border:1.5px dashed var(--line2);vertical-align:middle}
.bm--on{border:0;background:var(--lime);box-shadow:0 0 0 5px var(--limeSoft)}
.bchk tbody tr{transition:opacity 600ms var(--ease),transform 700ms var(--ease);transition-delay:calc(var(--i,0) * 60ms + 120ms)}
.v2-motion .gf:not(.is-in) .bchk tbody tr{opacity:0;transform:translateY(8px)}
/* таблица внутри схемы появляется вместе со схемой, а не своим наблюдателем */
.v2-motion .gf.is-in .bchk tbody tr{opacity:1;transform:none}
html:not(.v2-motion) .bchk tbody tr{opacity:1}
@media (max-width:560px){ .bchk table{font-size:14px} .bchk th.c,.bchk td.c{width:26%} }

/* путь к заявке: сайт 1–5, лендинг 6–9 */
.bpt{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));column-gap:24px;row-gap:24px}
.bpt__p{grid-column:1 / span 5;min-width:0}
.bpt__p+.bpt__p{grid-column:6 / span 4}
.bpt__box{border-radius:var(--r-card);border:1px solid var(--line2);background:var(--bg);padding:12px 8px;margin-bottom:16px}
.bpt__p--on .bpt__box{border-color:var(--limeInk);box-shadow:inset 0 0 0 1px var(--limeSoft)}
.bpt__svg{display:block;width:100%;height:auto;max-height:260px;margin:0 auto}
.bpt__p>b{display:block;font-size:19px;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.bpt__p--on>b{color:var(--limeInk)}
.bpt__p>span{display:block;margin-top:4px;font-size:16px;line-height:1.5;color:var(--ink2)}
.bpt__l{fill:none;stroke:var(--line2);stroke-width:2;stroke-linecap:round}
.bpt__l--on{stroke:var(--lime);stroke-width:2.4;opacity:.9}
:root[data-theme="light"] .bpt__l--on{stroke:#5f7d00}
.bpt__l--one{stroke-width:3}
.bpt__n{fill:var(--ink3)}
.bpt__n--on{fill:var(--lime)}
:root[data-theme="light"] .bpt__n--on{fill:#5f7d00}
.bpt__x{fill:none;stroke:var(--ink3);stroke-width:1.5}
.bpt__s{fill:var(--ink)}
.bpt__goal{fill:var(--lime);stroke:var(--limeSoft);stroke-width:8}
.bpt__scr{fill:var(--bg2);stroke:var(--line2);stroke-width:1.5}
.bpt__t{font-family:inherit;font-size:13px;font-weight:700;fill:var(--ink3)}
.bpt__t--on{fill:var(--ink)}
.bpt__l,.bpt__n,.bpt__x,.bpt__scr{transition:opacity 600ms var(--ease);transition-delay:calc(200ms + var(--k,0) * 70ms)}
.v2-motion .gf:not(.is-in) .bpt__l,.v2-motion .gf:not(.is-in) .bpt__n,.v2-motion .gf:not(.is-in) .bpt__x,.v2-motion .gf:not(.is-in) .bpt__scr{opacity:0}
@media (max-width:760px){ .bpt{grid-template-columns:minmax(0,1fr)} .bpt__p,.bpt__p+.bpt__p{grid-column:1} }

/* кольца в статьях: появляются прозрачностью и масштабом (дуга сразу в итоговом виде) */
.blog .gr__arc{transition:none}
.v2-motion .blog .gf:not(.is-in) .gr__arc{stroke-dashoffset:calc(100 - var(--v))}
.blog .gr__fig{transition:opacity 800ms var(--ease),transform 900ms var(--ease);transition-delay:calc(150ms + var(--k,0) * 120ms)}
.v2-motion .blog .gf:not(.is-in) .gr__fig{opacity:0;transform:scale(.9)}

/* столбики в статье: на сетке главы, каждый по 2 колонки из 9 */
@media (min-width:561px){
  .blog .gf--cols .gc__plot{grid-template-columns:repeat(9,minmax(0,1fr));column-gap:24px}
  .blog .gf--cols .gc{grid-column:span 2}
}
/* подписи панелей первого экрана — блоком, с обычным интервалом */
.blog .scene .stat__c{display:block}
/* линия цепочки — отрезками от точки к следующей точке: заканчивается ровно на итоге */
.bch__line{display:none}
.bch__row:not(:last-child)::before{content:"";position:absolute;left:11px;top:26px;bottom:2px;width:2px;border-radius:2px;background:var(--lime);opacity:.85}