/* WAIDN — Article body and block types */

.article-body { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-text-primary); }
.article-body > * + * { margin-top: var(--space-6); }

.article-body p { margin-bottom: 0; }
.article-body a { color: var(--color-brand-primary); text-decoration: underline; text-underline-offset: 2px; }

.article-body h2 {
  font-family: var(--font-display); font-size: var(--text-2xl);
  font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  margin-top: var(--space-12);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border-default);
}
.article-body h3 {
  font-family: var(--font-display); font-size: var(--text-xl);
  font-weight: var(--weight-medium); line-height: var(--leading-snug);
  margin-top: var(--space-10);
}

/* --- Image --- */
.article-figure { margin: var(--space-10) 0; }
.article-figure img {
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  width: 100%;
}
.article-figure figcaption,
.figure-caption {
  font-family: var(--font-ui); font-size: var(--text-xs);
  color: var(--color-text-secondary); text-align: center;
  margin-top: var(--space-3);
}

/* --- Pull quote --- */
.pull-quote {
  border-left: 3px solid var(--color-brand-primary);
  background: var(--color-brand-light);
  padding: var(--space-6) var(--space-8);
  margin: var(--space-10) 0;
}
.pull-quote p {
  font-family: var(--font-body); font-size: var(--text-md);
  font-style: italic; color: var(--color-info-text);
  margin: 0;
}
.pull-quote cite {
  display: block; margin-top: var(--space-3);
  font-family: var(--font-ui); font-size: var(--text-xs);
  font-style: normal; color: var(--color-brand-primary);
}

/* --- Divider --- */
.article-divider { border: 0; border-top: 1px solid var(--color-border-default); margin: var(--space-12) 0; }

/* --- Columns --- */
.block-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); margin: var(--space-8) 0; }
.block-columns > div > * + * { margin-top: var(--space-6); }
@media (max-width: 768px) { .block-columns { grid-template-columns: 1fr; } }

/* --- YouTube (lazy, privacy-friendly via youtube-nocookie) --- */
.video-embed { position: relative; aspect-ratio: 16 / 9; margin: var(--space-10) 0; border-radius: var(--radius-md); overflow: hidden; background: #000; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Audio --- */
.audio-block {
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6); margin: var(--space-8) 0;
}
.audio-block .audio-title { font-family: var(--font-ui); font-weight: var(--weight-medium); margin-bottom: var(--space-3); }
.audio-block .audio-duration { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-text-secondary); }
.audio-block audio { width: 100%; }

/* --- FAQ --- */
.faq-block { margin: var(--space-10) 0; }
.faq-item { border-bottom: 1px solid var(--color-border-default); padding: var(--space-5) 0; }
.faq-item summary {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-medium); cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; gap: var(--space-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--color-brand-primary); font-family: var(--font-ui); }
.faq-item[open] summary::after { content: "–"; }
.faq-item .faq-answer { font-family: var(--font-body); margin-top: var(--space-3); color: var(--color-text-primary); }

/* --- HowTo steps --- */
.howto-steps { counter-reset: howto; margin: var(--space-8) 0; display: flex; flex-direction: column; gap: var(--space-6); }
.howto-step {
  counter-increment: howto;
  position: relative;
  background: var(--color-surface-white);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-16);
}
.howto-step::before {
  content: counter(howto);
  position: absolute; left: var(--space-5); top: var(--space-6);
  width: var(--space-8); height: var(--space-8);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-brand-primary); color: #fff;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
}
.howto-step .howto-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); margin-bottom: var(--space-2); }
.howto-step .howto-text { font-family: var(--font-body); margin: 0; }
.howto-step img { margin-top: var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border-default); }

/* --- Sidebar / TOC --- */
.toc { font-family: var(--font-ui); font-size: var(--text-sm); }
.toc h4 { font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.toc ul { display: flex; flex-direction: column; gap: var(--space-2); border-left: 1px solid var(--color-border-default); }
.toc a { display: block; padding: var(--space-1) var(--space-4); color: var(--color-text-secondary); }
.toc a:hover { color: var(--color-brand-primary); text-decoration: none; }
.toc .toc-h3 { padding-left: var(--space-8); font-size: var(--text-xs); }

/* --- Article header meta --- */
.article-meta { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.article-author { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-8) 0; padding: var(--space-6); background: var(--color-surface-secondary); border-radius: var(--radius-md); }
.article-author img { width: 48px; height: 48px; border-radius: var(--radius-pill); }
.article-author .author-name { font-family: var(--font-ui); font-weight: var(--weight-medium); }
.article-author .author-bio { font-family: var(--font-ui); font-size: var(--text-sm); color: var(--color-text-secondary); }