/* Article Templates — 4 visual variants driven by [data-article-template] on
   the <article> wrapper in post.html.twig. Pure CSS on top of the SAME markup
   (post-header, post-meta-bar, post-featured-img, post-content, #postToc…) —
   no HTML structure changes, no new data fields beyond `article.template`. */

/* ═══ Full-width (Modern Full-Width) ═══ */
[data-article-template="full_width"] {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
[data-article-template="full_width"] .row { margin: 0; }
[data-article-template="full_width"] .post-header {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 20px;
}
[data-article-template="full_width"] .post-featured-img {
  margin-inline: 0;
  border-radius: 0;
  border-inline: none;
}
[data-article-template="full_width"] .post-featured-img img { max-height: 620px; }
[data-article-template="full_width"] .post-title {
  text-align: center;
  font-size: clamp(1.9rem, 5vw, 3rem) !important;
}
[data-article-template="full_width"] .post-content,
[data-article-template="full_width"] #comments,
[data-article-template="full_width"] .comments-section {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* ═══ Long-form (investigative / storytelling) ═══ */
[data-article-template="longform"] .row > [class*="col-lg-8"] {
  flex: 0 0 100%;
  max-width: 860px;
  margin-inline: auto;
}
[data-article-template="longform"] .post-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem) !important;
  line-height: 1.3 !important;
  margin-bottom: 2.2rem !important;
}
[data-article-template="longform"] .post-content {
  font-size: 1.19rem !important;
  line-height: 2.15 !important;
}
[data-article-template="longform"] .post-content p { margin-bottom: 2rem !important; }
[data-article-template="longform"] .post-featured-img { margin-bottom: 3rem !important; }

/* ═══ Live Blog (chronological timeline) ═══ */
[data-article-template="live_blog"] .post-content {
  position: relative;
  padding-inline-start: 28px;
  border-inline-start: 2px solid var(--border-subtle, #e2e8f0);
}
[data-article-template="live_blog"] .post-content h2,
[data-article-template="live_blog"] .post-content h3 {
  position: relative;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #e2e8f0);
  border-radius: 12px;
  padding: 14px 18px;
  margin: 2rem 0 1rem !important;
}
[data-article-template="live_blog"] .post-content h2::before,
[data-article-template="live_blog"] .post-content h3::before {
  content: '';
  position: absolute;
  right: -34px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--theme-primary, var(--gold, #4f46e5));
  border: 3px solid var(--bg-base, #fff);
  box-shadow: 0 0 0 2px var(--theme-primary, var(--gold, #4f46e5));
}
[data-article-template="live_blog"] .post-content blockquote {
  border-inline-start-width: 4px;
}