/* Long-form guide / listicle pages under /blog/*. Readable prose layout.
   Pairs with blog.css (.blog-wrap) for the container. */

.article-wrap { max-width: 760px; margin: 0 auto; padding: 40px 24px 80px; }

.article-breadcrumb { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.article-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.article-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.article-breadcrumb span { margin: 0 6px; opacity: 0.5; }

.article-wrap h1 { font-size: 34px; font-weight: 800; line-height: 1.2; margin: 0 0 12px; }
.article-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
.article-lead { font-size: 18px; line-height: 1.6; color: var(--text-secondary); margin: 0 0 28px; }

.article-body h2 { font-size: 24px; font-weight: 800; margin: 36px 0 12px; line-height: 1.25; }
.article-body h3 { font-size: 19px; font-weight: 700; margin: 24px 0 8px; }
.article-body p { font-size: 16px; line-height: 1.75; color: var(--text-primary); margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-left: 22px; }
.article-body li { font-size: 16px; line-height: 1.7; color: var(--text-primary); margin-bottom: 8px; }
.article-body li strong { color: var(--text-primary); }
.article-body a { color: var(--accent); text-decoration: none; font-weight: 600; }
.article-body a:hover { text-decoration: underline; }

/* Numbered step blocks for how-to guides */
.howto-step { border-left: 3px solid var(--accent); padding: 4px 0 4px 18px; margin: 0 0 20px; }
.howto-step h3 { margin-top: 0; }

.article-faq { margin: 40px 0 8px; }
.article-faq h2 { font-size: 24px; font-weight: 800; margin-bottom: 18px; }
.article-faq .faq-item { border: 1.5px solid var(--border); border-radius: 12px; padding: 18px 22px; margin-bottom: 14px; }
.article-faq .faq-item h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.article-faq .faq-item p { font-size: 15px; line-height: 1.6; color: var(--text-secondary); margin: 0; }

.article-cta { text-align: center; margin: 40px 0 24px; padding: 28px; border: 1.5px solid var(--border); border-radius: 12px; background: #f0f4ff; }
.article-cta h2 { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.article-cta p { font-size: 15px; color: var(--text-secondary); margin: 0 0 18px; }
.article-cta a { display: inline-block; padding: 14px 30px; background: var(--accent); color: white; border-radius: 10px; font-weight: 700; font-size: 15px; text-decoration: none; }
.article-cta a:hover { opacity: 0.9; }

.article-related { margin: 8px 0 0; }
.article-related h2 { font-size: 18px; margin-bottom: 10px; }
.article-related ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.article-related a { font-size: 14px; color: var(--accent); text-decoration: none; font-weight: 600; }
.article-related a:hover { text-decoration: underline; }

@media (max-width: 500px) {
  .article-wrap { padding: 24px 16px 60px; }
  .article-wrap h1 { font-size: 27px; }
}