/* МОДУЛЬ 1 — блог: лента /blog/ и статья (blog/_article.php).
 * Поверх assets/site.css: токены, кнопки, FAQ, карточки, форма — оттуда; здесь только
 * то, чего у коммерческих страниц нет: колонка чтения, «Главное», таблица в тексте,
 * врезка, обложка с хуком. Базовые правила — телефон, @media только min-width.
 */

/* ── Шапка статьи ── */
.art-top{padding-top:4px; padding-bottom:8px}
.art-top .crumbs{margin-bottom:14px}
.art-top h1{max-width:22ch; font-size:clamp(25px,5.6vw,44px)}
/* Длинные слова заголовков («мультифункциональный») на 360 px не влезают в строку и раздвигают страницу. */
.art-top h1,.art h2,.art h3{overflow-wrap:break-word; hyphens:auto}
.art-meta{margin:16px 0 0; font-size:15px; line-height:1.7; color:var(--ink-3,#A4A8AD); max-width:none}
.art-meta span + span::before{content:"·"; margin:0 8px; color:var(--ink-3,#A4A8AD)}
.art-meta b{font-weight:500; color:var(--ink-2,#C9CCD0)}
.art-meta span{display:inline}

/* ── Обложка в статье ── */
.art-cover{margin:24px 0 0}
.art .art-cover{margin:22px 0 28px}
.art-cover__pic{position:relative; border-radius:12px; overflow:hidden; background:var(--bg-raised,#1F2124); aspect-ratio:16/9}
.art-cover__pic img{width:100%; height:100%; object-fit:cover}
.art-cover figcaption{margin-top:10px; font-size:15px; line-height:1.5; color:var(--ink-3,#A4A8AD)}
.art-cover .viz-tag{position:absolute; right:10px; bottom:10px}

/* ── Колонка чтения и оглавление ── */
.art-grid{display:grid; gap:32px; padding-top:32px; padding-bottom:var(--section-y,64px)}
@media (min-width:1180px){ .art-grid{grid-template-columns:minmax(0,760px) minmax(0,300px); gap:64px; justify-content:space-between} }
.art{min-width:0; max-width:760px}
.art p,.art li{font-size:17px; line-height:1.7}
.art p{max-width:none}
.art h2{margin:48px 0 16px; font-size:clamp(22px,4vw,30px); scroll-margin-top:calc(var(--hd-h,64px) + 16px)}
.art h3{margin:30px 0 10px; font-size:clamp(18px,2.4vw,21px); scroll-margin-top:calc(var(--hd-h,64px) + 16px)}
.art h2 + h3{margin-top:18px}
.art ul,.art ol{margin:0 0 18px; padding-left:22px; color:var(--ink-2,#C9CCD0)}
.art li{margin-bottom:8px}
.art li::marker{color:var(--accent-on-dark,#00B9F9)}
.art strong{color:var(--ink,#EEF0F2); font-weight:600}
.art a{text-underline-offset:3px}
.art a:hover{color:var(--ink,#EEF0F2)}
.art-lead{font-size:18px !important; line-height:1.6 !important; color:var(--ink,#EEF0F2) !important}

.toc{display:none}
@media (min-width:1180px){
  .toc{display:block; position:sticky; top:calc(var(--hd-h,76px) + 24px); padding:20px 22px; border-radius:12px;
       background:var(--bg-raised,#1F2124); color:var(--ink,#EEF0F2); border:1px solid var(--line,#2A2D31)}
  .toc b{display:block; margin-bottom:10px; font:600 13px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3,#A4A8AD)}
  .toc ol{list-style:none; margin:0; padding:0; display:grid; gap:4px}
  .toc a:not(.btn){display:block; padding:6px 0; font-size:15px; line-height:1.4; color:var(--ink-2,#C9CCD0); text-decoration:none; transition:color .2s ease}
  .toc a:not(.btn):hover{color:var(--accent-on-dark,#00B9F9)}
  .toc .btn{margin-top:16px; width:100%; justify-content:center}
}

/* ── «Главное» ── */
.tldr{margin:28px 0 8px; padding:20px 20px 8px; border-radius:12px; background:var(--bg-raised,#1F2124); color:var(--ink,#EEF0F2);
      border:1px solid var(--line-strong,#4A4E53); border-left:3px solid var(--accent,#00B9F9)}
.art .tldr h2{margin:0 0 12px; font-size:clamp(22px,3vw,24px)}
.tldr ul{padding-left:20px}
.tldr li{font-size:16px !important; line-height:1.6 !important}

/* ── Таблица в тексте: те же .cmp, но в колонке ── */
.art .cmp{margin:18px 0 26px}
.art .cmp td,.art .cmp th{font-size:16px; line-height:1.55}

/* ── Врезка: мнение производства ── */
.vrezka{margin:26px 0; padding:18px 20px; border-radius:12px; background:var(--bg-deep,#101113); color:var(--ink,#EEF0F2); border:1px solid var(--line,#2A2D31)}
.vrezka b{display:block; margin-bottom:6px; font:600 13px/1.4 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-on-dark,#00B9F9)}
.art .vrezka p{margin:0; font-size:16px; color:var(--ink-2,#C9CCD0)}

/* ── Схема в тексте: рисунок с потолком ширины, подписи вёрсткой ── */
.art .shema{position:static; margin:22px 0 28px; max-width:620px; border:1px solid var(--line,#2A2D31)}
.art .shema figcaption{margin-top:12px}
.art .shema .shema__legend li{font-size:15px}
.art .foto{margin:22px 0 28px}

/* ── Ссылка вниз на услугу ── */
.art-money{margin:40px 0 0; padding:22px; border-radius:12px; background:var(--bg-raised,#1F2124); color:var(--ink,#EEF0F2);
           border:1px solid var(--accent,#00B9F9); display:grid; gap:14px}
.art .art-money p{margin:0; font-size:17px; color:var(--ink,#EEF0F2)}
.art-money .btns{margin:0}

/* ── Лента /blog/ ── */
.blog-top{padding-top:4px}
.blog-top .crumbs{margin-bottom:18px}
.blog-top .lead{margin-top:14px}
.bcards{display:grid; gap:18px}
@media (min-width:641px){ .bcards{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1024px){ .bcards{grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px} }
.bcard{display:flex; flex-direction:column; border-radius:12px; overflow:hidden; background:var(--bg-raised,#1F2124); color:var(--ink,#EEF0F2);
       border:1px solid var(--line,#2A2D31); text-decoration:none; transition:transform .2s ease, border-color .2s ease}
.bcard:hover{transform:translateY(-2px); border-color:var(--accent,#00B9F9)}
.bcard__cov{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-deep,#101113); color:var(--ink,#EEF0F2)}
.bcard__cov img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.bcard:hover .bcard__cov img{transform:scale(1.04)}
.bcard__sh{position:absolute; inset:0; background:linear-gradient(180deg,rgba(11,12,13,0) 20%,rgba(11,12,13,.86) 100%)}
.bcard__hook{position:absolute; left:16px; right:16px; bottom:14px; display:grid; gap:2px; color:#EEF0F2}
.bcard__hook b{font:500 clamp(24px,6vw,30px)/1.1 var(--head); letter-spacing:-.01em; color:#EEF0F2}
.bcard__hook span{font-size:15px; line-height:1.35; color:#EEF0F2}
.bcard__cov--txt{background:linear-gradient(135deg,#1F2124 0%,#101113 100%); color:#EEF0F2}
.bcard__cov--txt::before{content:""; position:absolute; left:16px; top:16px; width:44px; height:3px; background:var(--accent,#00B9F9)}
.bcard__cov .viz-tag{position:absolute; top:10px; right:10px; left:auto; bottom:auto}
.bcard__b{display:flex; flex-direction:column; gap:8px; padding:16px 18px 18px; flex:1}
.bcard__k{font:500 13px/1.4 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3,#A4A8AD)}
.bcard__b h2,.bcard__b h3{font-size:18px; line-height:1.3; color:var(--ink,#EEF0F2)}
.bcard__go{margin-top:auto; padding-top:6px; font-size:15px; font-weight:500; color:var(--accent-on-dark,#00B9F9)}
.bcard__soon{margin-top:auto; padding-top:6px; font-size:15px; color:var(--ink-3,#A4A8AD)}
@media (prefers-reduced-motion:reduce){ .bcard,.bcard__cov img{transition:none} }
@media (min-width:900px){ .art-lead{font-size:19px !important} }