/* ============================================================================
   BLOG-V5 — стили лонгрида (Т3) и блог-хаба (Т4) поверх tokens-v5 + partials-v5
   ============================================================================
   Автор: designer, 12.07.2026. Единый файл для всех страниц /blog/ (5+ страниц
   разделяют одну типографику лонгрида — DRY, вместо копии <style> в каждой).
   Писатель — только designer (single-writer): правка бьёт по всему блогу.

   ПРАВИЛО КАНОНА: ни одного цветового литерала — только var(--*) из tokens-v5.
   ПРАВИЛО ЛОНГРИДА (норма designer-памяти 11.07 + задача 12.07): проза не терпит
   чередования т/с посреди текста. Тёмные — ТОЛЬКО hero-компакт и футер; всё тело,
   FAQ и перелинковка — светлые; жёлтая CTA-полоса разделяет светлый хвост и футер.
   Читаемость: колонка прозы ~700px (≈66 знаков/строку), кегль тела 17px (≥16 на
   мобильном), интерлиньяж 1.75 (web-typography).
   ============================================================================ */

/* ---------------- КРОШКИ (на тёмном hero-компакте) ---------------- */
.breadcrumbs{ margin-bottom:1.6rem; font-size:var(--fs-13); }
.breadcrumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .35rem; }
.breadcrumbs li{ display:flex; align-items:center; gap:.35rem; color:var(--on-dark-faint); }
.breadcrumbs li + li::before{ content:'/'; color:var(--dark-line); }
.breadcrumbs a{ color:var(--on-dark-dim); padding-block:.5rem; display:inline-block; }
.breadcrumbs a:hover{ color:var(--on-dark-strong); }
.breadcrumbs [aria-current]{ color:var(--on-dark); }

/* ---------------- HERO-КОМПАКТ (Т): рубрика + H1 + мета + лид ---------------- */
.article-hero{ padding-block:clamp(2.5rem,5vw,4rem) clamp(2.75rem,5vw,4rem); }
.article-hero .hero-inner{ max-width:800px; }
/* длинное слово (напр. «металлообработке») не должно распирать 390px — перенос вместо overflow */
.article-hero h1{ margin-top:.2rem; overflow-wrap:break-word; }
.article-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem .9rem;
  margin-top:1.4rem; font-size:var(--fs-14); color:var(--on-dark-dim);
}
.article-meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--accent); }
.article-meta time{ color:var(--on-dark); }
.article-lede{
  margin-top:1.5rem; max-width:62ch;
  font-size:var(--fs-18); line-height:1.6; color:var(--on-dark);
}

/* ---------------- ТЕЛО ЛОНГРИДА (С): узкая колонка прозы ---------------- */
.article-body{ padding-block:clamp(2.75rem,5vw,4.25rem) clamp(3rem,6vw,4.75rem); }
/* ширина колонки прозы ≈66 знаков/строку (web-typography): 620px при 17px тела */
.longread{ max-width:620px; margin-inline:auto; }

/* оглавление — светлая пластина над прозой (JS не нужен, якоря) */
.article-toc{
  margin-bottom:2.6rem; padding:1.15rem 1.4rem 1.25rem;
  background:var(--plate-grad); border:1px solid var(--line-strong);
  border-left:3px solid var(--accent); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.article-toc .toc-head{
  font-size:var(--fs-11); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-bottom:.7rem;
}
.article-toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc;
  display:flex; flex-direction:column; gap:.1rem; }
.article-toc li{ counter-increment:toc; }
.article-toc a{
  position:relative; display:block; padding:.4rem 0 .4rem 1.9rem;
  font-size:var(--fs-15); color:var(--ink-700);
}
.article-toc a::before{
  content:counter(toc,decimal-leading-zero); position:absolute; left:0; top:.4rem;
  font-family:var(--ff-display); font-weight:800; font-size:var(--fs-12); color:var(--accent-deep);
}
.article-toc a:hover{ color:var(--ink); }

/* ---- проза: h2/h3, абзацы, списки, ссылки, цитаты, таблицы ---- */
.prose{ color:var(--ink-700); }
.prose > * + *{ margin-top:1.2rem; }
.prose h2{
  margin-top:2.6rem; font-size:var(--fs-h2); line-height:var(--lh-head);
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.prose h2 + p, .prose h2 + h3{ margin-top:1rem; }
.prose h3{
  margin-top:1.9rem; font-family:var(--ff-display); font-weight:800; text-transform:uppercase;
  font-size:var(--fs-16); letter-spacing:.01em; color:var(--ink);
  scroll-margin-top:calc(var(--header-h) + 16px);
}
.prose h3 + p{ margin-top:.75rem; }
.prose p{ font-size:var(--fs-17); line-height:1.75; }
.prose strong, .prose b{ color:var(--ink); font-weight:700; }
.prose a{
  color:var(--ink); font-weight:600; border-bottom:2px solid var(--accent);
  padding-bottom:1px; transition:background-color var(--dur-1) var(--ease);
}
.prose a:hover{ background:var(--accent); color:var(--ink); }

.prose ul, .prose ol{ padding-left:0; display:flex; flex-direction:column; gap:.7rem; }
.prose ul li, .prose ol li{ position:relative; font-size:var(--fs-17); line-height:1.7; }
/* маркер списка — только absolute-псевдоэлемент (анти-паттерн: не flex на li) */
.prose ul li{ padding-left:1.6rem; }
.prose ul li::before{
  content:''; position:absolute; left:.15rem; top:.62em; width:8px; height:8px;
  background:var(--accent);
}
.prose ol{ counter-reset:li; }
.prose ol li{ padding-left:2.3rem; counter-increment:li; }
.prose ol li::before{
  content:counter(li); position:absolute; left:0; top:.05em;
  width:1.6rem; height:1.6rem; display:grid; place-items:center;
  font-family:var(--ff-display); font-weight:800; font-size:var(--fs-13); color:var(--ink);
  background:var(--accent); border-radius:var(--radius);
}
.prose li strong, .prose li b{ color:var(--ink); }

/* цитата-врезка (вводный CTA-абзац черновика «> …») — светлая, акцент-полосой */
.prose blockquote{
  margin-top:1.6rem; padding:1.05rem 1.3rem; border-left:3px solid var(--accent);
  background:var(--plate-grad); border-radius:var(--radius);
  box-shadow:var(--shadow-card);
}
.prose blockquote p{ font-size:var(--fs-16); color:var(--ink-700); margin:0; }

/* таблица в прозе — стальная пластина, скролл на узком экране */
.table-wrap{ margin-top:1.6rem; overflow-x:auto; border-radius:var(--radius); }
.prose table{
  width:100%; border-collapse:collapse; min-width:440px;
  background:var(--plate-grad); border:1px solid var(--line-strong);
  font-size:var(--fs-15);
}
.prose thead th{
  text-align:left; padding:.85rem 1.1rem; vertical-align:bottom;
  font-family:var(--ff-display); font-weight:800; font-size:var(--fs-12);
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  border-bottom:2px solid var(--line-strong);
}
.prose tbody td{ padding:.8rem 1.1rem; color:var(--ink-700); border-bottom:1px solid var(--line); vertical-align:top; }
.prose tbody tr:last-child td{ border-bottom:none; }
.prose tbody td:first-child{ font-weight:600; color:var(--ink); }
.prose .pending{ color:var(--faint); } /* фактовые заглушки [уточняется]/[ЖДЁТ №N] */

/* врезка-CTA в конце тела: ссылка на услугу кнопкой (in-body) */
.endcta{
  margin-top:2.6rem; padding:1.5rem 1.6rem;
  background:var(--plate-grad); border:1px solid var(--line-strong);
  border-radius:var(--radius); box-shadow:var(--shadow-card);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem 1.4rem;
}
.endcta p{ font-size:var(--fs-16); color:var(--ink-700); max-width:44ch; margin:0; }
.endcta p strong{ color:var(--ink); }

/* ---------------- ПОДПИСЬ ЭКСПЕРТА (слот №33, до фактуры скрыт) ---------------- */
/* .article-signature рендерится только когда появится персона (вопрос №33);
   в М1 слот пустой (комментарий в шаблоне) — стиль заложен на будущее. */
.article-signature{
  max-width:700px; margin:2.75rem auto 0; padding-top:1.75rem;
  border-top:1px solid var(--line-strong);
  display:flex; gap:1.15rem; align-items:flex-start;
}

/* ---------------- FAQ статьи (С, светлая пластина) ---------------- */
.faq-section{ padding-block:clamp(2.5rem,4.5vw,3.75rem); }
.faq-wrap{ max-width:840px; margin-inline:auto; }
.faq-wrap > h2{ margin-bottom:clamp(1.25rem,2.5vw,1.75rem); }

/* ---------------- ПЕРЕЛИНКОВКА: услуги из статьи (С) ---------------- */
.link-section{ padding-block:clamp(2.75rem,5vw,4rem); }
/* auto-fit: 2 карточки заполняют ряд, 3 — тоже; на узком экране схлопывается в 1 */
.svc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; }
.svc-card{ padding:1.5rem 1.4rem 1.35rem; display:flex; flex-direction:column; gap:.7rem; }
.svc-card .icon-wrap{
  width:44px; height:44px; display:grid; place-items:center; flex-shrink:0;
  border:1px solid var(--line-strong); border-radius:var(--radius);
  color:var(--ink); background:var(--paper);
}
.svc-card h3{ font-size:var(--fs-16); }
.svc-card p{ font-size:var(--fs-15); color:var(--muted); }
.svc-card .more{
  margin-top:auto; padding-top:.4rem; font-size:var(--fs-14); font-weight:600; color:var(--ink);
  display:inline-flex; align-items:center; gap:.4rem;
}
.svc-card .more::after{ content:'→'; transition:transform var(--dur-1) var(--ease); }
.svc-card:hover .more::after{ transform:translateX(4px); }

/* ---------------- КАРТОЧКА-АНОНС СТАТЬИ (С; общая Т3 «читать далее» + Т4 хаб) ---- */
/* auto-fit: 4 анонса хаба в ряд на десктопе, 3 «читать далее» — тоже в ряд */
.posts-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.4rem; }
.post-card{ display:flex; flex-direction:column; padding:1.6rem 1.55rem 1.5rem; height:100%; }
.post-card .post-meta{
  display:flex; align-items:center; gap:.5rem; margin-bottom:.9rem;
  font-size:var(--fs-11); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.post-card .post-meta::before{ content:''; width:20px; height:3px; background:var(--accent); flex-shrink:0; }
.post-card h3{ font-size:var(--fs-18); line-height:1.28; color:var(--ink); }
.post-card p{ margin-top:.7rem; font-size:var(--fs-15); color:var(--muted); line-height:1.6; }
.post-card .more{
  margin-top:auto; padding-top:1rem; font-size:var(--fs-14); font-weight:700; color:var(--ink);
  display:inline-flex; align-items:center; gap:.4rem;
}
.post-card .more::after{ content:'→'; transition:transform var(--dur-1) var(--ease); }
.post-card:hover .more::after{ transform:translateX(4px); }

/* ссылка «Все услуги →» под сеткой (хит-зона псевдоэлементом ≥44) */
.prod-more a{
  font-size:var(--fs-15); font-weight:700; color:var(--ink);
  border-bottom:2px solid var(--accent); padding-bottom:.15rem;
  position:relative; display:inline-block;
}
.prod-more a::before{ content:''; position:absolute; left:-6px; right:-6px; top:-12px; bottom:-12px; }

/* ---------------- ХАБ: интро под H1 (на тёмном hero) ---------------- */
.hub-hero .article-lede{ max-width:58ch; }

/* ---------------- АДАПТИВ БЛОГА (сетки — auto-fit, схлопываются сами) ---------- */
@media (max-width:600px){
  /* наборный текст прозы на мобильном ≥16px (у нас 17px — ок) */
  .article-lede{ font-size:var(--fs-17); }
  .endcta{ flex-direction:column; align-items:flex-start; }
  .endcta .btn{ width:100%; }
  .article-toc a{ font-size:var(--fs-16); }
}