/* ============================================================
   komplektadr.ru — оформление блог-статей (project17 стандарт v1)
   Scope: .htmlDataBlock (обёртка тела статьи в /blog/)
   Тема: корпоративный синий #115682
   ============================================================ */

.htmlDataBlock{font-size:16px;line-height:1.72;color:#2b313a;word-wrap:break-word}
.htmlDataBlock p{margin:0 0 18px}
.htmlDataBlock a{color:#115682;text-decoration:none;border-bottom:1px solid rgba(17,86,130,.3);transition:border-color .15s}
.htmlDataBlock a:hover{border-bottom-color:#115682}

/* ---------- Hero ---------- */
.htmlDataBlock figure.article-hero{margin:0 0 22px}
.htmlDataBlock figure.article-hero img{width:100%;height:auto;display:block;border-radius:14px}
.htmlDataBlock figure.article-hero figcaption{margin-top:10px;font-size:.86em;font-style:italic;color:#7c8794;text-align:center}

/* ---------- Лид (первый абзац / .article-lead) ---------- */
.htmlDataBlock > p:first-of-type,
.htmlDataBlock figure.article-hero + p,
.htmlDataBlock p.article-lead{
  font-size:1.13em;line-height:1.6;color:#1c222b;
  background:#f3f8fc;border-left:4px solid #115682;
  padding:16px 22px;border-radius:0 10px 10px 0;margin:0 0 30px}
.htmlDataBlock > p:first-of-type strong,
.htmlDataBlock p.article-lead strong{font-weight:600}

/* ---------- Заголовки ---------- */
.htmlDataBlock h2{font-size:1.6em;font-weight:700;line-height:1.25;color:#16202c;margin:42px 0 16px;padding-bottom:0}
.htmlDataBlock h3{font-size:1.2em;font-weight:600;color:#283543;margin:28px 0 10px}

/* ---------- Содержание (TOC) ---------- */
.htmlDataBlock nav.toc{background:#f7f9fb;border:1px solid #e4eaf0;border-radius:12px;padding:20px 26px;margin:0 0 34px}
.htmlDataBlock nav.toc h2{font-size:1.06em;font-weight:700;color:#115682;margin:0 0 14px;text-transform:uppercase;letter-spacing:.04em}
.htmlDataBlock nav.toc ol{list-style:none;counter-reset:toc;margin:0;padding:0;columns:2;column-gap:36px}
.htmlDataBlock nav.toc li{counter-increment:toc;position:relative;padding:0 0 0 32px;margin:0 0 11px;line-height:1.4;break-inside:avoid}
.htmlDataBlock nav.toc li::before{content:counter(toc);position:absolute;left:0;top:1px;width:22px;height:22px;
  background:#115682;color:#fff;border-radius:50%;font-size:12px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.htmlDataBlock nav.toc a{color:#2b3a4a;border-bottom:1px solid transparent}
.htmlDataBlock nav.toc a:hover{color:#115682;border-bottom-color:#115682}

/* ---------- Таблицы ---------- */
.htmlDataBlock table{width:100%;border-collapse:collapse;margin:20px 0 28px;font-size:.97em;
  border:1px solid #e4eaf0;border-radius:10px;overflow:hidden;box-shadow:0 1px 4px rgba(20,40,60,.05)}
.htmlDataBlock thead th{background:#115682;color:#fff;text-align:left;padding:13px 18px;font-weight:600;font-size:.97em}
.htmlDataBlock tbody td{padding:12px 18px;border-top:1px solid #eef2f6;vertical-align:top}
.htmlDataBlock tbody tr:nth-child(even){background:#f6f9fb}
.htmlDataBlock tbody td:first-child{font-weight:600;color:#1f2a36}

/* ---------- Списки ---------- */
.htmlDataBlock ul,.htmlDataBlock ol{margin:0 0 22px;padding-left:24px}
.htmlDataBlock li{margin:0 0 9px;line-height:1.6}

/* ---------- Ключевые выводы ---------- */
.htmlDataBlock ul.article-takeaways{list-style:none;margin:18px 0 30px;padding:22px 26px;
  background:#f5faf6;border:1px solid #d9ecdf;border-radius:12px}
.htmlDataBlock ul.article-takeaways li{position:relative;padding:0 0 0 36px;margin:0 0 15px;line-height:1.55}
.htmlDataBlock ul.article-takeaways li:last-child{margin-bottom:0}
.htmlDataBlock ul.article-takeaways li::before{content:"";position:absolute;left:0;top:2px;width:23px;height:23px;
  background:#1f9d55 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E") center/13px no-repeat;
  border-radius:50%}

/* ---------- FAQ ---------- */
.htmlDataBlock h2#faq{margin-top:46px;padding-top:26px;border-top:2px solid #eef2f6}
.htmlDataBlock h2#faq ~ h3{font-size:1.14em;color:#11476b;margin:24px 0 9px;padding-left:34px;position:relative}
.htmlDataBlock h2#faq ~ h3::before{content:"?";position:absolute;left:0;top:1px;width:25px;height:25px;
  background:#115682;color:#fff;border-radius:50%;font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center}

/* ---------- Адаптив ---------- */
@media (max-width:680px){
  .htmlDataBlock nav.toc ol{columns:1}
  .htmlDataBlock h2{font-size:1.38em;margin-top:32px}
  .htmlDataBlock table{font-size:.9em;display:block;overflow-x:auto;white-space:nowrap}
  .htmlDataBlock figure.article-hero img{border-radius:10px}
}