/* article.css — GLE-87
 * Tipografia de leitura para páginas de artigo-pilar (/blog/<slug>/).
 * Consome os tokens do design system (tokens.css) e complementa
 * components.css + blog-authority.css. Escopo: layout de leitura + prose.
 */

/* ── Cabeçalho do artigo ─────────────────────────────────────────── */
.article-head {
  padding-block: var(--space-8) var(--space-6);
}
.breadcrumb {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  display: flex;
  gap: 0.5ch;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--text-accent); }
.breadcrumb__sep { opacity: 0.5; }

.article-kicker {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.article-kicker .badge { margin: 0; }
.article-kicker__dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }

.article-title {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-5);
}
.article-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  margin: 0;
  padding-left: var(--space-4);
  border-left: 3px solid var(--color-azure-500);
}
.article-byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.article-byline__avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--gradient-brand);
  display: grid; place-items: center;
  color: var(--color-white); font-weight: 700; font-size: var(--fs-xs);
  font-family: var(--font-display);
}
.article-byline strong { color: var(--text-secondary); font-weight: 600; }

/* ── Corpo (prose) ───────────────────────────────────────────────── */
.article-prose { color: var(--text-secondary); font-size: var(--fs-base); line-height: var(--lh-relaxed); }
.article-prose > * + * { margin-top: var(--space-5); }
.article-prose h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-top: var(--space-8);
  padding-top: var(--space-2);
}
.article-prose h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  margin-top: var(--space-6);
}
.article-prose p { margin: 0; }
.article-prose a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }
.article-prose a:hover { color: var(--color-azure-700); }
.article-prose strong { color: var(--text-primary); font-weight: 600; }
.article-prose ul, .article-prose ol { margin: 0; padding-left: var(--space-5); }
.article-prose li + li { margin-top: var(--space-2); }
.article-prose li { line-height: var(--lh-relaxed); }
.article-prose hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin-block: var(--space-7);
}
.article-prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-gray-100);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-xs);
}

/* ── FAQ ─────────────────────────────────────────────────────────── */
.article-faq { margin-top: var(--space-8); }
.article-faq h2 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text-primary);
  margin-bottom: var(--space-5);
}
.article-faq details {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-3);
  background: var(--bg-elevated);
}
.article-faq details[open] { border-color: var(--color-azure-500); }
.article-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.article-faq summary::-webkit-details-marker { display: none; }
.article-faq summary::after { content: "+"; color: var(--text-accent); font-size: 1.2em; line-height: 1; }
.article-faq details[open] summary::after { content: "–"; }
.article-faq details p { margin-top: var(--space-3); color: var(--text-secondary); line-height: var(--lh-relaxed); }

/* ── Bloco "Leia também" + CTA ───────────────────────────────────── */
.article-related { margin-top: var(--space-8); }
.article-related__title { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-muted); margin-bottom: var(--space-4); }
.article-related__grid { display: grid; gap: var(--space-3); }
.related-link {
  display: block;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-weight: 500;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.related-link:hover { border-color: var(--color-azure-500); text-decoration: none; transform: translateY(-1px); }
.related-link span { display: block; font-size: var(--fs-sm); color: var(--text-muted); font-weight: 400; margin-top: 2px; }

.article-cta {
  margin-top: var(--space-8);
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  background: var(--gradient-brand);
  color: var(--color-white);
  text-align: center;
}
.article-cta h2 { font-family: var(--font-display); color: var(--color-white); margin: 0 0 var(--space-3); }
.article-cta p { color: var(--color-gray-200); max-width: 46ch; margin: 0 auto var(--space-5); }

@media (max-width: 640px) {
  .article-title { font-size: var(--fs-2xl); }
}

/* ── GLE-116 — foto de capa da matéria + bloco de fontes ─────────── */
.article-hero {
  margin: var(--space-6) 0 var(--space-7);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border, #e6ebf3);
  background: #0A1428;
}
.article-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}
.article-hero figcaption {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-alt, #f5f7fb);
  border-top: 1px solid var(--border, #e6ebf3);
}
.article-sources {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border, #e6ebf3);
}
.article-sources h2 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  color: var(--text-primary);
}
.article-sources ol { margin: 0; padding-left: 1.3em; }
.article-sources li {
  margin-bottom: var(--space-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}
.article-sources a { color: var(--text-accent); word-break: break-word; }
.article-sources__note {
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-style: italic;
}

/* ── GLE-991 — medida de leitura + sumário (TOC) + compartilhar ──── */
/* Coluna de leitura confortável (~66ch em vez dos 760px do container). */
.article-lead { max-width: 66ch; }
.article-prose { max-width: 66ch; }
.article-sources { max-width: 66ch; }

/* Âncoras não ficam coladas no topo ao navegar pelo sumário. */
.article-prose h2, #fontes, #faq-title { scroll-margin-top: var(--space-6); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sumário / índice do guia */
.article-toc {
  max-width: 66ch;
  margin: var(--space-6) 0 var(--space-7);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.article-toc__title {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}
.article-toc ol {
  margin: 0;
  padding-left: 1.4em;
  columns: 2;
  column-gap: var(--space-6);
}
.article-toc li {
  margin-bottom: var(--space-2);
  break-inside: avoid;
  line-height: var(--lh-snug);
}
.article-toc a { color: var(--text-secondary); text-decoration: none; }
.article-toc a:hover { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) { .article-toc ol { columns: 1; } }

/* Botões de compartilhar */
.article-share {
  max-width: 66ch;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}
.article-share__label { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 600; }
.article-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4ch;
  padding: 0.5rem 1rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.article-share__btn:hover { border-color: var(--color-azure-500); color: var(--text-accent); text-decoration: none; transform: translateY(-1px); }
.article-share__btn.is-copied { border-color: var(--color-azure-500); color: var(--text-accent); }