/* ═══════════════════════════════════════════════════════════════════
   blog.css — listagem de artigos (artigos.html) e pagina de artigo
   (artigos/*.html). Os cards vivem em sections/artigos.css.

   A listagem mantem as nanoparticulas, como a home. O artigo segue a
   regra das paginas juridicas: sem particulas e sem parallax, com a
   tipografia de leitura longa em primeiro plano.
   ═══════════════════════════════════════════════════════════════════ */

.rn-blog {
  padding-top: calc(var(--header-h) + var(--space-9));
  padding-bottom: var(--space-10);
}

.rn-blog--post { background: var(--surface-page); }

/* A listagem e o artigo nao usam main.js para marcar a navegacao: o
   item atual vem marcado no HTML. */
.rn-nav__link[aria-current="page"] { color: var(--bone-100); }
.rn-nav__link[aria-current="page"]::after { transform: scaleX(1); }

/* ── Trilha de navegacao ──────────────────────────────────────────── */

.rn-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-light);
  color: var(--text-subtle);
}

.rn-crumbs a {
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-hairline);
}

.rn-crumbs a:hover {
  color: var(--cedar-300);
  border-bottom-color: var(--rule-accent);
}

.rn-crumbs [aria-current="page"] { color: var(--bone-300); }

/* ── Listagem ─────────────────────────────────────────────────────── */

.rn-blog__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--border-hairline);
}

.rn-blog__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-display-1);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-display);
  color: var(--text-heading);
  margin: 0;
}

.rn-blog__intro {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--text-body);
  max-width: var(--measure-prose);
}

.rn-blog__note {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--text-subtle);
  max-width: var(--measure-prose);
}

/* ── Artigo ───────────────────────────────────────────────────────── */

.rn-post__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--border-hairline);
}

.rn-post__title {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-display-2);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--bone-100);
  margin: 0;
}

.rn-post__lead {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-lead);
  line-height: var(--leading-body);
  color: var(--text-body);
  max-width: var(--measure-prose);
}

.rn-post__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-light);
  color: var(--text-subtle);
}

/* A area do artigo vive na linha de metadados, nao como rotulo acima do
   titulo: a trilha de navegacao ja situa o leitor. */
.rn-post__category {
  font-weight: var(--weight-semibold);
  color: var(--text-accent);
}

.rn-post__meta span + span::before {
  content: "·";
  margin-right: var(--space-4);
  color: var(--border-default);
}

/* Em tela estreita a linha quebra e o separador ficaria solto no inicio
   da linha seguinte: empilhado, sem separador. */
@media (max-width: 599px) {
  .rn-post__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .rn-post__meta span + span::before { content: none; }
}

/* Corpo: medida de prosa, entrelinha de leitura longa */
.rn-post__body {
  max-width: var(--measure-prose);
  margin-top: var(--space-8);
}

.rn-post__body h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-title);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-tight);
  color: var(--text-heading);
  margin: var(--space-8) 0 var(--space-4);
  scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

.rn-post__body p,
.rn-post__body ul,
.rn-post__body ol {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-lg);
  line-height: 1.8;
  color: var(--text-body);
}

.rn-post__body p + p,
.rn-post__body p + ul,
.rn-post__body p + ol,
.rn-post__body ul + p,
.rn-post__body ol + p { margin-top: var(--space-4); }

.rn-post__body ul,
.rn-post__body ol { padding-left: var(--space-6); }

.rn-post__body li + li { margin-top: var(--space-2); }

.rn-post__body strong { color: var(--bone-100); }

/* Resumo no topo do texto */
.rn-post__summary {
  --text-accent: var(--text-accent-raised);

  padding: var(--space-6);
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
}

.rn-post__summary .rn-eyebrow { margin-bottom: var(--space-4); }

.rn-post__body .rn-post__summary ul {
  margin: 0;
  font-size: var(--text-body-md);
  line-height: 1.7;
}

/* Aviso informativo e autoria */
.rn-post__note {
  margin-top: var(--space-8);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-sm);
  line-height: 1.7;
  color: var(--text-subtle);
  max-width: var(--measure-prose);
}

.rn-post__authors {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-5);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.rn-post__authors strong {
  color: var(--bone-100);
  font-weight: var(--weight-semibold);
}

/* Chamada para consulta */
.rn-post__cta {
  --text-heading: var(--text-heading-raised);

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-9);
  padding: var(--space-8) var(--space-6);
  text-align: center;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
}

.rn-post__cta-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-display-3);
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-title);
  color: var(--text-heading);
  margin: 0;
}

.rn-post__cta p {
  font-family: var(--font-body);
  font-weight: var(--weight-light);
  font-size: var(--text-body-md);
  line-height: var(--leading-body);
  color: var(--text-body);
  max-width: 48ch;
  margin-bottom: var(--space-3);
}

/* Continue lendo */
.rn-post__related { margin-top: var(--space-10); }

.rn-post__related-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-title);
  letter-spacing: var(--tracking-display);
  color: var(--text-heading);
  margin: 0;
}

.rn-post__back {
  display: inline-flex;
  margin-top: var(--space-9);
  padding-top: var(--space-6);
  width: 100%;
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

.rn-post__back:hover { color: var(--cedar-300); }

/* Progresso de leitura, sob o header. --progress vem de js/post.js. */
.rn-progress {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  z-index: 100;
  height: 2px;
  background: var(--cedar-500);
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  pointer-events: none;
}