/* ============================================================
   БЛОГ: страница статьи, список статей, калькуляторы.
   Только токены сайта (site.css / theme.css), новых цветов нет: светлая и тёмная темы работают сами.
   Префиксы: art-* (статья и список), bc-* (калькулятор, assets/blog-calc.js).
   ============================================================ */

/* ---------- шапка статьи ---------- */
.art-hero{max-width:880px}
.art-hero .crumbs span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(52ch,60vw)}
.art-h1{font-size:clamp(30px,4.4vw,54px);line-height:1.1}
.art-sub{font-size:clamp(16px,1.6vw,19px);max-width:62ch}
.art-meta{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;margin:0;font:500 13px var(--font-ui);color:var(--muted-2)}
.art-dir{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--radius-xs);background:var(--chip);color:var(--ink);text-decoration:none;font-weight:600}
.art-dir:hover{background:var(--chip-hover)}

/* ---------- сетка: «Коротко», содержание, текст ---------- */
.art-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-5);padding-bottom:var(--space-7)}
.art-label{margin:0;font:600 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;color:var(--green-ink)}
.art-answer{background:var(--sage);color:var(--sage-ink);border-radius:var(--radius-lg);padding:20px 22px;display:grid;gap:8px}
.art-answer p:last-child{margin:0;font-size:17px;line-height:1.55;color:var(--sage-ink)}
.art-answer .art-label{color:var(--sage-ink);opacity:.8}
.art-toc{background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:18px 20px;display:grid;gap:10px}
.art-toc ol{margin:0;padding:0 0 0 20px;display:grid;gap:6px;font-size:14.5px;line-height:1.35}
.art-toc a{color:var(--text);text-decoration:none}
.art-toc a:hover{color:var(--green-ink);text-decoration:underline}
.art-toc a[aria-current]{color:var(--green-ink);font-weight:600}
@media (min-width:1040px){
  .art-grid{grid-template-columns:minmax(0,740px) 300px;grid-template-areas:"answer toc" "body toc";justify-content:start;column-gap:56px;align-items:start}
  .art-answer{grid-area:answer}
  .art-toc{grid-area:toc;position:sticky;top:96px;align-self:start}
  .art-body{grid-area:body}
}

/* ---------- текст статьи ---------- */
.art-body{font-size:17px;line-height:1.7;color:var(--text);min-width:0}
.art-sec{scroll-margin-top:96px;margin-top:var(--space-7)}
.art-body > :first-child{margin-top:0}
.art-sec h2{font:500 clamp(25px,2.8vw,34px)/1.2 var(--font-display);letter-spacing:-.015em;color:var(--ink);margin:0 0 16px;text-wrap:balance}
.art-sec h3{font:600 clamp(19px,1.8vw,22px)/1.3 var(--font-ui);color:var(--ink);margin:28px 0 8px}
.art-sec p{margin:0 0 16px}
.art-sec ul,.art-sec ol{margin:0 0 16px;padding-left:1.3em;display:grid;gap:6px}
.art-sec li::marker{color:var(--green-ink)}
.art-sec a:not(.btn){color:inherit;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px}
.art-sec a:not(.btn):hover{color:var(--green-ink)}
.art-sec strong{color:var(--ink);font-weight:600}
.art-sec blockquote{margin:0 0 16px;padding:4px 0 4px 18px;border-left:3px solid var(--green);color:var(--muted)}
.art-sec blockquote p:last-child{margin-bottom:0}
.art-note{font-size:13.5px;line-height:1.5;color:var(--muted)}
[data-kw-geo]{white-space:normal}

.art-table{overflow-x:auto;margin:0 0 20px;border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--line)}
.art-table table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.45;min-width:520px}
.art-table th,.art-table td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft)}
.art-table th{background:var(--chip);color:var(--ink);font-weight:600;white-space:nowrap}
.art-table tr:last-child td{border-bottom:0}
.art-table td a{color:inherit}
@media (max-width:640px){
  .art-table{box-shadow:none;border-radius:0;overflow:visible}
  .art-table table{min-width:0;display:block}
  .art-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .art-table tbody{display:grid;gap:12px}
  .art-table tr{display:grid;gap:6px;background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-card);padding:14px 16px}
  .art-table td{display:grid;grid-template-columns:minmax(96px,34%) 1fr;gap:10px;padding:0;border:0}
  .art-table td::before{content:attr(data-label);font:600 12px/1.5 var(--font-ui);color:var(--muted-2)}
  .art-table td:not([data-label])::before{content:none}
}

/* ---------- FAQ и источники ---------- */
.art-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.art-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font:600 17px/1.4 var(--font-ui);color:var(--ink)}
.art-faq summary::-webkit-details-marker{display:none}
.art-faq summary::after{content:"";flex:none;width:8px;height:8px;margin-top:7px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s}
.art-faq details[open] summary::after{transform:rotate(-135deg)}
.art-faq details p{margin:10px 0 0;color:var(--muted)}
.art-src ol{font-size:15px}
.art-pub{color:var(--muted-2)}

/* ---------- вставки: квиз, кейсы, продукты ---------- */
.art-quiz{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;margin:var(--space-6) 0;padding:clamp(20px,3vw,32px);border-radius:var(--radius-xl);background:var(--g-forest-card);color:var(--forest-text);position:relative;overflow:hidden}
.art-quiz-t{display:grid;gap:8px;max-width:56ch}
.art-quiz .art-label{color:var(--lime)}
.art-quiz-h{margin:0;font:500 clamp(22px,2.6vw,30px)/1.2 var(--font-display);letter-spacing:-.01em;color:#fff}
.art-quiz p{margin:0;color:var(--forest-muted);font-size:15.5px;line-height:1.5}
.art-quiz .btn{flex:none}
.art-quiz--list{margin:0 0 var(--space-6)}
.art-quiz--end{margin:var(--space-6) 0 0}
@media (max-width:560px){.art-quiz .btn{width:100%}}
.art-label + .art-cards{margin-top:12px}
.art-cases,.art-prods{margin:var(--space-6) 0;display:grid}
.art-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px}
.art-prod,.art-case,.art-rel{display:grid;align-content:start;gap:6px;padding:18px 20px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-card);text-decoration:none;color:var(--text);transition:transform .18s,box-shadow .18s}
.art-prod:hover,.art-case:hover,.art-rel:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.art-prod-n,.art-case-n,.art-rel-n{font:600 17px/1.3 var(--font-ui);color:var(--ink)}
.art-prod-p{font:500 22px/1.1 var(--font-display);color:var(--ink)}
.art-prod-d,.art-case-d,.art-rel-d{font-size:14px;line-height:1.5;color:var(--muted)}
.art-case-t,.art-rel-t{font:500 12px var(--font-ui);color:var(--muted-2)}
.art-go{margin-top:4px;font:600 13.5px var(--font-ui);color:var(--green-ink)}
.art-go::after{content:" →"}
.art-end{padding-bottom:var(--space-9)}
.art-end-h{margin:0 0 16px;font:500 clamp(24px,2.6vw,32px)/1.2 var(--font-display);color:var(--ink)}

/* ---------- список статей (pages/blog.html) ---------- */
.art-card{height:100%;align-content:start;transition:transform .18s,box-shadow .18s}
.art-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-float)}
.art-card .body p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.art-cover{position:relative;display:grid;align-content:space-between;padding:14px 16px;overflow:hidden;color:#fff;background:linear-gradient(150deg,#183F34,#0F1E18)}
.art-cover b{font:500 54px/1 var(--font-display);opacity:.35;letter-spacing:-.03em}
.art-cover span{font:600 12px var(--font-ui);letter-spacing:.06em;text-transform:uppercase;opacity:.9}
.art-cover[data-dir="sites"]{background:linear-gradient(150deg,#1B4D3E,#0E2821)}
.art-cover[data-dir="apps"]{background:linear-gradient(150deg,#2B3A4A,#141B22)}
.art-cover[data-dir="saas"]{background:linear-gradient(150deg,#34403A,#171C1A)}
.art-cover[data-dir="shop"]{background:linear-gradient(150deg,#5A4A22,#1F1A0C)}
.art-cover[data-dir="eu"]{background:linear-gradient(150deg,#24453A,#0B1814)}
.art-cover[data-dir="seo"]{background:linear-gradient(150deg,#3F4A12,#161A06)}
.art-cover[data-dir="marketing"]{background:linear-gradient(150deg,#6B3A1C,#22120A)}
.art-cover[data-dir="bots"]{background:linear-gradient(150deg,#1F4A55,#0C1A1E)}
.art-cover[data-dir="brand"]{background:linear-gradient(150deg,#4C2F4F,#1A1019)}
.art-cover[data-dir="software"]{background:linear-gradient(150deg,#2F3A52,#111520)}
.art-cover[data-dir="contractor"]{background:linear-gradient(150deg,#3B4A44,#161B19)}
.art-cover::after{content:"";position:absolute;right:-24px;bottom:-24px;width:110px;height:110px;border-radius:50%;background:var(--lime);opacity:.16}

/* ---------- калькулятор ---------- */
.art-calc-sec{background:var(--bg-2);border-radius:var(--radius-xl);padding:clamp(16px,3vw,28px);margin-left:calc(-1 * clamp(0px,1vw,12px));margin-right:calc(-1 * clamp(0px,1vw,12px))}
.art-calc-sec > h2{font-size:clamp(22px,2.4vw,28px)}
.bc{display:grid;gap:16px;font-size:15px;line-height:1.5}
.bc:not(.bc-ready) ul{font-size:15px}
.bc-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
@media (min-width:760px){.bc-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}.bc-out{position:sticky;top:96px}}
.bc-in{display:grid;gap:14px;min-width:0}
.bc-fs{border:0;margin:0;padding:0;min-width:0;display:grid;gap:8px}
.bc-fs legend{padding:0;margin-bottom:8px;font:600 14px var(--font-ui);color:var(--ink)}
.bc-fs--f{gap:14px}
.bc-opt{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--surface);border-radius:var(--radius-md);padding:12px 14px;box-shadow:var(--shadow-card);cursor:pointer;min-height:48px}
.bc-opt input{width:20px;height:20px;margin:0;accent-color:var(--green)}
.bc-opt-t{display:grid;gap:2px;min-width:0}
.bc-opt-t b{font:600 14.5px/1.35 var(--font-ui);color:var(--ink)}
.bc-opt-t small{font-size:12.5px;color:var(--muted-2)}
.bc-opt-p{font:500 15px var(--font-display);color:var(--ink);white-space:nowrap}
.bc-opt:has(input:checked){box-shadow:0 0 0 2px var(--green),var(--shadow-card)}
.bc-opt:has(input:focus-visible){box-shadow:var(--shadow-focus)}
.bc-opt--chk{grid-template-columns:auto 1fr auto}
.bc-qty{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;background:var(--surface);border-radius:var(--radius-md);padding:10px 14px;box-shadow:var(--shadow-card)}
.bc-qty label{display:grid;gap:2px}
.bc-qty label b{font:600 14.5px/1.35 var(--font-ui);color:var(--ink)}
.bc-qty label small{font-size:12.5px;color:var(--muted-2)}
.bc-stepper{display:flex;align-items:center;gap:6px}
.bc-step{width:44px;height:44px;border:0;border-radius:var(--radius-sm);background:var(--chip);color:var(--ink);font:600 20px var(--font-ui);cursor:pointer;box-shadow:var(--shadow-chip)}
.bc-step:hover{background:var(--chip-hover)}
.input.bc-qn{width:56px;text-align:center;padding:0 4px}
.bc-f{display:grid;gap:6px}
.bc-f label{font:500 14px/1.35 var(--font-ui);color:var(--ink)}
.bc-f .input{max-width:100%}
.bc-range{width:100%;margin:2px 0 0;accent-color:var(--green)}
.bc-tools{display:grid;gap:12px;margin-bottom:12px}
.bc-tools .field{max-width:260px}

/* итоги: тёмная панель, как у калькулятора на странице услуг */
.bc-out{display:grid;gap:12px;background:var(--g-graphite);color:#fff;border-radius:var(--radius-lg);padding:clamp(18px,3vw,26px);min-width:0}
.bc-out .btn-lime{color:#121512}
.bc-ml{margin:0;font:500 13px var(--font-ui);color:#B9C1BD}
.bc-total{font:500 clamp(30px,4.4vw,44px)/1.05 var(--font-display);color:#fff;overflow-wrap:anywhere}
.bc-term{margin:0;font-size:14px;color:#CDD2CF}
.bc-lines{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;color:#CDD2CF}
.bc-lines li{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:6px}
.bc-lines b{font-weight:600;color:#fff;white-space:nowrap}
.bc-note{margin:0;font-size:13px;line-height:1.5;color:var(--muted)}
.bc-out .bc-note{color:#9EA4A1}
.bc-cta{margin-top:4px}
.bc-cta .btn{width:100%;white-space:normal;text-align:center}   /* длинные надписи (pt, de) переносятся, а не распирают сетку */
.bc-m{display:grid;gap:2px;min-width:0}
.bc-ml{overflow-wrap:anywhere}
.bc-mv{font:500 clamp(22px,3vw,28px)/1.15 var(--font-display);color:#fff;overflow-wrap:anywhere}
.bc-m--big .bc-mv{font-size:clamp(22px,2.2vw,30px);color:var(--lime);word-break:normal;overflow-wrap:normal;hyphens:manual;line-height:1.15}
.bc-ms{font-size:12.5px;line-height:1.4;color:#9EA4A1}
.bc-ms2{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px 16px;padding:12px 0;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1)}
.bc-rt{margin:0;font:600 18px/1.3 var(--font-ui);color:#fff}
.bc-rx{margin:0;font-size:14px;color:#CDD2CF}
.bc-todo{margin:0;padding-left:1.2em;display:grid;gap:4px;font-size:13.5px;color:#CDD2CF}
.bc-meter{height:10px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.bc-meter i{display:block;height:100%;width:0;background:var(--green);transition:width .25s}
.bc-funnel{display:grid;gap:4px}
.bc-funnel i{display:block;height:8px;border-radius:999px;background:var(--green);transition:width .25s}
.bc-funnel i:nth-child(2){background:var(--lime)}
.bc-funnel i:nth-child(3){background:var(--amber)}
.bc-sum.vis-hidden{position:absolute}

/* график и таблица внутри панели */
.bc-chart{background:var(--surface);border-radius:var(--radius-md);padding:10px 8px 6px;color:var(--text);min-width:0}
.bc-chart svg{display:block;max-width:100%;height:auto}
.bc-grid-l{stroke:var(--line);stroke-width:1}
.bc-ax{fill:var(--muted);font:500 11px var(--font-ui)}
.bc-line{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.bc-s1{stroke:var(--green)}
.bc-s2{stroke:var(--amber)}
.bc-dot{fill:var(--surface);stroke:var(--ink);stroke-width:2.5}
.bc-mk{fill:var(--ink);font:600 12px var(--font-ui);paint-order:stroke;stroke:var(--surface);stroke-width:4px;stroke-linejoin:round}
.bc-legend{list-style:none;margin:6px 6px 2px;padding:0;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12.5px;color:var(--muted)}
.bc-legend li{display:flex;align-items:center;gap:6px}
.bc-sw{display:inline-block;width:14px;height:4px;border-radius:2px}
.bc-sw1{background:var(--green)}
.bc-sw2{background:var(--amber)}
.bc-details{background:rgba(255,255,255,.06);border-radius:var(--radius-md);padding:10px 14px;font-size:13.5px;color:#E7EEEA}
.bc-details summary{cursor:pointer;font-weight:600}
.bc-details .art-table{margin:10px 0 0;box-shadow:none;color:var(--text)}
.bc-details .art-table table{min-width:0;background:var(--surface)}
@media (max-width:640px){.bc-details .art-table table{background:transparent}.bc-details .art-table tr{background:var(--surface)}}
.bc-company{display:grid;gap:12px}
.bc-company .art-table{margin:0}
.bc-company .bc-cta .btn{width:auto}
.bc-company .bc-cta .btn-lime{color:#121512}