/* Vilni article body typography — scoped to .containerArticle--content */
.containerArticle--content { padding: 0 8px; }

/* === Hide broken featured image when article has no main image ===
   Pattern: <img src="/uploads/news/"> means empty featured image (panel.php emits
   path even when image field is empty). Hide the wrapper to avoid broken icon. */
.containerArticle--image img[src$="/uploads/news/"],
.containerArticle--image img[src=""],
.containerArticle--image img:not([src]) { display: none; }
.containerArticle--image:has(img[src$="/uploads/news/"]),
.containerArticle--image:has(img[src=""]),
.containerArticle--image:has(img:not([src])) { display: none; }

.containerArticle--content h2 {
  margin: 48px 0 16px;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 700;
  color: #1a1a1a;
}
.containerArticle--content h3 {
  margin: 32px 0 12px;
  font-size: 22px;
  line-height: 1.35;
  font-weight: 700;
  color: #1a1a1a;
}
.containerArticle--content h2:first-child,
.containerArticle--content h3:first-child { margin-top: 0; }

.containerArticle--content p { margin: 0 0 16px; line-height: 1.6; }

.containerArticle--content ul,
.containerArticle--content ol { margin: 0 0 16px 24px; }
.containerArticle--content li { margin-bottom: 6px; }

.containerArticle--content figure { margin: 32px 0; }
.containerArticle--content figcaption {
  font-size: 14px;
  color: #666;
  margin-top: 8px;
  text-align: center;
  font-style: italic;
}

.containerArticle--content blockquote {
  margin: 24px 0;
  padding: 16px 24px;
  border-left: 4px solid #006bb8;
  background: #f7f9fc;
  font-style: italic;
}

.containerArticle--content a { color: #006bb8; text-decoration: underline; }
.containerArticle--content a:hover { color: #00497d; }

/* TOC (Vilni article nav block) */
.containerArticle--content .article-toc {
  margin: 0 0 40px;
  padding: 20px 24px;
  background: #f7f9fc;
  border-radius: 12px;
}
.containerArticle--content .article-toc ul { margin: 12px 0 0 20px; }

/* === FAQ section — clear bottom separation === */
.containerArticle--content .faq-section {
  margin: 48px 0 0;
  padding-bottom: 32px;
  border-bottom: 1px solid #e0e6ed;
}
.containerArticle--content .faq-section h2 { margin-top: 0; }
.containerArticle--content .faq-section h3 {
  font-size: 19px;
  margin: 28px 0 8px;
}

/* JSON-LD container — hidden, served to crawlers only */
.containerArticle--content .schema-json-ld { display: none; }

/* === CTA h2 (Want to Discuss) — heavy separation after FAQ === */
.containerArticle--content section + h2,
.containerArticle--content .faq-section + h2 {
  margin-top: 64px;
  padding-top: 24px;
}

/* Article byline (added in Phase 7 STEP 4) */
.containerArticle--byline {
  margin: 16px 0 28px;
  padding: 12px 16px;
  font-size: 15px;
  color: #555;
  border-left: 3px solid #006bb8;
  background: #f7f9fc;
}
.containerArticle--byline a { color: #006bb8; font-weight: 600; }

/* Mobile */
@media (max-width: 768px) {
  .containerArticle--content { padding: 0; }
  .containerArticle--content h2 { font-size: 24px; margin: 36px 0 12px; }
  .containerArticle--content h3 { font-size: 19px; margin: 26px 0 10px; }
  .containerArticle--content figure { margin: 24px 0; }
  .containerArticle--content section + h2,
  .containerArticle--content .faq-section + h2 { margin-top: 48px; padding-top: 16px; }
  .containerArticle--byline { font-size: 14px; padding: 10px 14px; }
}

/* === Override global section { height: 800px } from mcs.styles.css ===
   That rule was for homepage hero <section>, but it forces ALL sections to 800px,
   causing article FAQ <section> content to overflow + overlap text below. */
.containerArticle--content section.faq-section,
.containerArticle--content section {
  height: auto !important;
  min-height: 0 !important;
}

/* === Hide figcaption when generator emits same text as alt ===
   cc-seo article generator emits <figure><img alt="X"><figcaption>X</figcaption></figure>
   with identical text — figcaption visible на сторінці дублює alt-опис.
   Доки cc-seo не виправить генератор — приховуємо. Accessibility не страждає
   бо alt залишається у HTML для screen readers. */
.containerArticle--content figure figcaption { display: none; }