/* =====================================================================
   article.css — camada editorial para /artigos/ (indice + artigo individual)
   Nao substitui system.css/theme-signature.css: usa exclusivamente os
   tokens (--color-*, --font-*, --space-*, --radius-*, --shadow-*) ja
   definidos ali, para herdar automaticamente a paleta de qualquer tema
   (Signature, Obsidian, ...) sem precisar de uma versao por tema.
   Carregado apenas nas paginas de /artigos/ — nunca na Home.
   ===================================================================== */

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: var(--text-sm); color: var(--color-text-muted); }
.breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.breadcrumb li { display: flex; align-items: center; gap: var(--space-2); }
.breadcrumb li:not(:last-child)::after { content: '/'; color: var(--color-border-strong); }
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-accent); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--color-heading); font-weight: 600; }

/* ---------- Hero do indice /artigos/ ---------- */
.articles-hero { padding-block: var(--space-16) var(--space-8); }
.articles-hero__eyebrow { margin-bottom: var(--space-4); }
.articles-hero h1 { font-size: var(--text-4xl); margin-bottom: var(--space-4); }
.articles-hero p { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 62ch; line-height: 1.6; }

/* ---------- Grid de cards do indice ---------- */
.articles-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 720px) { .articles-grid { grid-template-columns: 1fr; } }

.article-card { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.article-card__categoria { margin-bottom: var(--space-3); }
.article-card h2, .article-card h3 { font-size: var(--text-xl); line-height: 1.3; margin-bottom: var(--space-3); color: var(--color-heading); }
.article-card p { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.6; flex-grow: 1; }
.article-card__cta { margin-top: var(--space-5); font-weight: 600; font-size: var(--text-sm); color: var(--color-accent); display: inline-flex; align-items: center; gap: var(--space-1); }
.article-card:hover .article-card__cta { text-decoration: underline; }

/* ---------- Cabecalho do artigo ---------- */
.article-header { padding-block: var(--space-10) var(--space-6); }
.article-header__inner { max-width: 760px; margin-inline: auto; }
.article-header .breadcrumb { margin-bottom: var(--space-6); }
.article-header__categoria { margin-bottom: var(--space-4); }
.article-header h1 { font-size: var(--text-4xl); margin-bottom: var(--space-5); }
.article-header__intro { font-size: var(--text-lg); color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-5); }
.article-header__meta { display: flex; flex-wrap: wrap; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }

/* ---------- Indice "Neste artigo" ---------- */
.article-toc { max-width: 760px; margin: 0 auto var(--space-10); padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.article-toc p { font-weight: 600; color: var(--color-heading); margin-bottom: var(--space-3); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .04em; }
.article-toc ol { columns: 2; column-gap: var(--space-6); list-style: decimal; padding-left: 1.2em; margin: 0; }
.article-toc li { break-inside: avoid; margin-bottom: var(--space-2); font-size: var(--text-sm); }
.article-toc a { color: var(--color-text); text-decoration: none; }
.article-toc a:hover { color: var(--color-accent); text-decoration: underline; }
@media (max-width: 560px) { .article-toc ol { columns: 1; } }

/* ---------- Corpo editorial ---------- */
.article-body { max-width: 720px; margin-inline: auto; }
.article-body section { margin-bottom: var(--space-10); scroll-margin-top: var(--space-24); }
.article-body h2 { font-size: var(--text-2xl); line-height: 1.3; margin-bottom: var(--space-5); }
.article-body h3 { font-size: var(--text-xl); line-height: 1.35; margin-bottom: var(--space-3); }
.article-body p { font-size: var(--text-lg); line-height: 1.75; color: var(--color-text); margin-bottom: var(--space-5); }
.article-body ul, .article-body ol { margin: 0 0 var(--space-5); padding-left: 1.4em; }
.article-body li { font-size: var(--text-lg); line-height: 1.7; color: var(--color-text); margin-bottom: var(--space-3); }
.article-body li:last-child { margin-bottom: 0; }
.article-body strong { color: var(--color-heading); font-weight: 700; }
.article-body a { color: var(--color-accent); text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 2px; }
.article-body a:hover { text-decoration-color: currentColor; }

/* ---------- CTA editorial (dentro do artigo) ---------- */
.article-cta { max-width: 720px; margin: 0 auto var(--space-10); padding: var(--space-8); background: var(--color-surface-alt); border-radius: var(--radius-xl); text-align: center; }
.article-cta p { font-size: var(--text-lg); line-height: 1.6; color: var(--color-text); margin-bottom: var(--space-5); }
.article-cta p:last-of-type { margin-bottom: var(--space-6); }
.article-cta p strong { color: var(--color-heading); }
.article-cta a.article-cta__botao { text-decoration: none; }

/* ---------- FAQ e relacionados: largura de leitura ---------- */
.article-faq, .article-related { max-width: 760px; margin-inline: auto; }
.article-faq h2, .article-related h2 { font-size: var(--text-2xl); margin-bottom: var(--space-6); }

/* .faq-item (system.css/theme-signature.css) nasce oculto por padrao
   (opacity:0) e so fica visivel via ".faq-list[data-reveal].is-visible >
   .faq-item", quando o IntersectionObserver de main.js marca o container
   como visitado. As paginas de /artigos/ nao marcam ".faq-list" com
   data-reveal (conteudo longo nao deve animar por item, ver briefing desta
   integracao) — sem esse gatilho o FAQ ficava permanentemente invisivel,
   inclusive com JavaScript desligado. Sobrescrito aqui, escopado a
   .article-faq, para o conteudo aparecer sempre, com ou sem JS. */
.article-faq .faq-item { opacity: 1; transform: none; }

.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
@media (max-width: 860px) { .related-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }
.related-card { display: block; text-decoration: none; padding: var(--space-5); }
.related-card__categoria { display: block; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-accent); margin-bottom: var(--space-2); }
.related-card h3 { font-size: var(--text-base); line-height: 1.4; color: var(--color-heading); margin: 0; }

/* ---------- Rodape de navegacao (voltar) ---------- */
.article-footer-nav { max-width: 760px; margin: var(--space-10) auto 0; padding-top: var(--space-6); border-top: 1px solid var(--color-border); text-align: center; }
.article-footer-nav a { font-weight: 600; color: var(--color-accent); text-decoration: none; }
.article-footer-nav a:hover { text-decoration: underline; }

/* ---------- Paginacao de /artigos/ e /artigos/<categoria>/ ----------
   HTML real (<a>), nunca JS -- funciona com JS desligado, por teclado e
   para crawlers. Pagina atual e um <span aria-current>, nunca um link nem
   um heading. */
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-10); }
.pagination__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.5rem; height: 2.5rem; padding-inline: var(--space-3);
  border-radius: var(--radius-md); font-weight: 600; font-size: var(--text-sm);
  color: var(--color-text-muted); text-decoration: none;
  border: 1px solid transparent;
}
a.pagination__link:hover { background: var(--color-surface); border-color: var(--color-border); color: var(--color-heading); }
.pagination__link.is-active { background: var(--color-cta-bg); color: var(--color-cta-text); }
.pagination__link--prev, .pagination__link--next { padding-inline: var(--space-4); border: 1px solid var(--color-border); }

/* ---------- Tabelas comparativas (Modelo C) ---------- */
.article-body { overflow-x: auto; }
.article-body table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-6); font-size: var(--text-base); }
.article-body caption { text-align: left; font-weight: 600; color: var(--color-heading); margin-bottom: var(--space-3); }
.article-body th, .article-body td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.article-body thead th { color: var(--color-heading); font-weight: 700; border-bottom: 2px solid var(--color-border-strong); }
.article-body tbody th { color: var(--color-heading); font-weight: 600; white-space: nowrap; }

/* ---------- Callout "o que nao fazer" (Modelo B) ---------- */
.wn-callout {
  border: 1px solid var(--color-border-strong); border-left: 4px solid var(--color-accent);
  background: var(--color-surface-alt); border-radius: var(--radius-md);
  padding: var(--space-5); margin-bottom: var(--space-5);
}
.wn-callout p { margin: 0; }