/* Blog do bruno — complementa /styles.css, que ja traz os tokens da Direcao 3,
   a tipografia, o tema escuro, .faixa, .botao, .topo, .marca e .rodape.
   Este arquivo carrega depois dele e nao redefine nenhum token. */

/* ---------- pagina ---------- */

.pagina { padding-block: clamp(2.5rem, 7vw, 4.5rem); }

.pagina__titulo {
  font-size: clamp(1.875rem, 5.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  max-width: 28ch;
}

.pagina__intro {
  font-size: 1.125rem;
  color: var(--texto-suave);
  max-width: 48ch;
  margin-bottom: 3rem;
}

/* ---------- data ---------- */

.data {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 0.5rem;
}

/* ---------- lista de posts ---------- */

/* Mesmo recurso de composicao da secao "situacoes" da LP: borda coral no topo
   do bloco, sem card e sem icone. */
.lista-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2.5rem;
}

.lista-posts > li {
  border-top: 3px solid var(--acento);
  padding-top: 1.25rem;
}

.lista-posts h2 {
  font-size: clamp(1.25rem, 3.5vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 0.35em;
  max-width: 34ch;
}

.lista-posts p {
  color: var(--texto-suave);
  margin: 0;
  max-width: 52ch;
}

/* ---------- texto corrido do post ---------- */

/* Medida de leitura confortavel. Os links herdam o padrao de /styles.css:
   preto quente com sublinhado coral, nunca coral como cor de texto. */
.prosa { max-width: 68ch; }

.prosa h2 {
  font-size: clamp(1.375rem, 4vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-top: 2.75rem;
}

.prosa h3 { margin-top: 2rem; }

.prosa ul,
.prosa ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.prosa li { margin-bottom: 0.5rem; }
.prosa li:last-child { margin-bottom: 0; }

.prosa blockquote {
  margin: 1.75rem 0;
  padding-left: 1.25rem;
  border-left: 3px solid var(--acento);
  font-size: 1.125rem;
  font-weight: 600;
}

/* ---------- fim do post ---------- */

.post__fim {
  max-width: 68ch;
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borda);
}

.post__fim p { margin-bottom: 1.25rem; }
.post__volta { font-size: 0.9375rem; margin-bottom: 0; }

/* ---------- telas maiores ---------- */

@media (min-width: 48rem) {
  .lista-posts { gap: 3rem; }
}