/* =============================================================================
   ARQUIVO: assets/css/blog.css
   FUNÇÃO:  estilos da listagem do blog, da página de artigo e dos textos
            longos (a Política de Privacidade reaproveita a classe .prose).
   ORDEM:   listagem > artigo > texto longo > blocos do fim do artigo > responsivo
   Os cards de artigo ficam em components.css, pois a home também os usa.
   ============================================================================= */


/* ===== 1. TOPO DAS PÁGINAS ===== */
.page-top {
  padding-bottom: var(--space-5);
  background: var(--gradient-soft);
}

.page-top__title {
  margin-top: var(--space-2);
}

.page-top__text {
  max-width: 60ch;
  margin-top: var(--space-2);
  font-size: var(--text-lg);
  color: var(--color-muted);
}


/* ===== 2. FILTRO POR CATEGORIA ===== */
/* Sem JavaScript, a barra é escondida por um noscript no head da página */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
}

.filter-bar__button {
  min-height: var(--touch-target);
  padding-inline: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-pill);
  transition: background-color var(--transition), color var(--transition);
}

.filter-bar__button:hover {
  background: var(--color-accent-soft);
}

.filter-bar__button[aria-pressed="true"] {
  color: var(--color-on-dark);
  background: var(--color-primary);
}

.filter-status {
  margin-bottom: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Chamada para o WhatsApp no fim da listagem */
.blog-cta {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-3);
  background: var(--color-accent-soft);
  border-radius: var(--radius-lg);
}

.blog-cta__title {
  font-size: var(--text-xl);
}


/* ===== 3. CABEÇALHO DO ARTIGO ===== */
.article__header {
  display: grid;
  gap: var(--space-2);
  max-width: var(--reading-width);
  margin-top: var(--space-2);
}

.article__category {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-secondary-text);
}

.article__title {
  font-size: var(--text-3xl);
}

.article__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.article__author {
  font-weight: 600;
  color: var(--color-text);
}

.article__cover {
  width: 100%;
  max-width: 900px;
  margin-top: var(--space-4);
  border-radius: var(--radius-lg);
}

.article__body {
  padding-block: var(--space-5) var(--space-8);
}


/* ===== 4. SUMÁRIO ===== */
.toc {
  max-width: var(--reading-width);
  margin-bottom: var(--space-4);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.toc__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-lg);
}

.toc__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
}


/* ===== 5. TEXTO LONGO (.prose) ===== */
/* A largura limitada mantém cerca de 70 caracteres por linha */
.prose {
  max-width: var(--reading-width);
  font-size: var(--text-lg);
  line-height: 1.75;
}

.prose > * + * {
  margin-top: var(--space-3);
}

.prose h2 {
  margin-top: var(--space-6);
  font-size: var(--text-2xl);
}

.prose h3 {
  margin-top: var(--space-4);
}

.prose ul,
.prose ol {
  padding-left: var(--space-3);
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: var(--space-1);
}

.prose blockquote {
  padding-left: var(--space-3);
  font-style: italic;
  color: var(--color-primary);
  border-left: 4px solid var(--color-accent);
}

.article__figure {
  width: 100%;
  border-radius: var(--radius-md);
}

.prose figcaption {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* Caixa de destaque dentro do texto */
.callout {
  padding: var(--space-3);
  background: var(--color-accent-soft);
  border-left: 4px solid var(--color-secondary);
  border-radius: var(--radius-sm);
}

.callout__title {
  font-weight: 600;
  color: var(--color-primary);
}


/* ===== 6. BLOCOS DO FIM DO ARTIGO ===== */
.article__footer {
  display: grid;
  gap: var(--space-3);
  max-width: var(--reading-width);
  margin-top: var(--space-6);
}

.share-box {
  display: grid;
  justify-items: start;
  gap: var(--space-1);
}

.share-box__title {
  font-weight: 600;
  color: var(--color-primary);
}

.article-cta {
  display: grid;
  justify-items: start;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-3);
  color: var(--color-on-dark);
  background: var(--color-primary);
  border-radius: var(--radius-lg);
}

.article-cta__title {
  font-size: var(--text-xl);
  color: var(--color-on-dark);
}

.author-box {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.author-box__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
}

.author-box__credentials {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-secondary-text);
}

.author-box__text {
  color: var(--color-muted);
}

.article__disclaimer {
  font-weight: 600;
  color: var(--color-text);
}

.article__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--touch-target);
  font-weight: 600;
}


/* ===== 7. POLÍTICA DE PRIVACIDADE ===== */
.privacy-version {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.privacy-actions {
  margin-top: var(--space-4);
}


/* ===== 8. RESPONSIVO ===== */
@media (min-width: 768px) {
  .blog-cta,
  .article-cta {
    padding: var(--space-5);
  }
}