/* =================================================================
   Article Body — добавки к article-single.css
   Содержит ТОЛЬКО компоненты которых нет в article-single.css:
   - .article-lead    (вступительный абзац)
   - .article-callout (три варианта: info / note / warn)
   - figure / figcaption (для Unsplash и inline картинок)
   ================================================================= */

/* ============= LEAD ============= */
.article-body .article-lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-1, #fff);
  background: rgba(247,147,26,0.05);
  border-left: 3px solid var(--accent, #f7931a);
  padding: 18px 22px;
  border-radius: 0 8px 8px 0;
  margin: 0 0 28px;
}

/* ============= CALLOUTS ============= */
.article-body .article-callout {
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 18px 0;
  background: rgba(91,140,255,0.08);
  border-left: 3px solid #5b8cff;
}
.article-body .article-callout > strong:first-child {
  display: block;
  margin-bottom: 8px;
  color: #fff;
  font-weight: 600;
}
.article-body .article-callout p { margin: 8px 0 0; }
.article-body .article-callout ul,
.article-body .article-callout ol {
  margin: 8px 0 0;
  padding-left: 20px;
}
.article-body .article-callout--note {
  background: rgba(251,191,36,0.08);
  border-left-color: #fbbf24;
}
.article-body .article-callout--warn {
  background: rgba(239,68,68,0.08);
  border-left-color: #ef4444;
}

/* ============= TABLE WRAP (горизонтальный скролл на узких) ============= */
.article-body .article-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 18px -2px;
}

/* ============= FIGURE (Unsplash картинки) ============= */
.article-body figure.wp-block-image {
  margin: 24px 0;
  border-radius: 12px;
  overflow: hidden;
  background: #0d0d0d;
}
.article-body figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px 12px 0 0;
}
.article-body figure.wp-block-image figcaption {
  padding: 10px 16px 14px;
  font-size: 13px;
  color: #9ca3af;
  font-style: italic;
  line-height: 1.5;
  text-align: center;
}

/* ============= MOBILE ============= */
@media (max-width: 720px) {
  .article-body .article-lead { font-size: 15px; padding: 14px 16px; }
  .article-body .article-callout { padding: 12px 14px; }
  .article-body figure.wp-block-image figcaption { font-size: 12px; padding: 8px 12px 12px; }
}