/* Blog — complementa assets/styles.css, que carrega os tokens e o cabeçalho. */

.blog { padding: 150px 0 96px; }
.blog .shell { max-width: 900px; }

.post-topo { margin-bottom: 56px; }
.post-topo .label { margin-bottom: 22px; }
.post-topo h1 { max-width: 20ch; margin-bottom: 20px; font-size: clamp(2.4rem, 5.2vw, 4rem); }
.post-topo .intro { color: var(--text-2); }
.post-data {
  display: block;
  margin-bottom: 16px;
  color: var(--text-2);
  font: 500 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Listagem */
.post-lista { border-top: 1px solid var(--line-light); }
.post-item { padding: 30px 0; border-bottom: 1px solid var(--line-light); }
.post-item time {
  display: block;
  margin-bottom: 9px;
  color: var(--text-2);
  font: 500 11px/1 var(--mono);
  letter-spacing: .09em;
  text-transform: uppercase;
}
.post-item h2 { max-width: 26ch; margin-bottom: 10px; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.post-item h2 a { text-decoration: none; transition: color var(--t-fast); }
.post-item h2 a:hover { color: var(--cobalt); }
.post-item p { max-width: 62ch; margin: 0; color: var(--text-2); }
.post-vazio { padding: 50px 0; color: var(--text-2); }

/* Corpo do post: leitura longa, medida curta */
.post-capa { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; margin-bottom: 48px; box-shadow: 0 0 0 1px rgba(16, 20, 26, .16), 0 22px 44px -22px rgba(16, 20, 26, .5); }
.post-corpo { max-width: 68ch; font-size: 1.09rem; line-height: 1.72; }
.post-corpo > * + * { margin-top: 1.35em; }
.post-corpo h2 { max-width: 24ch; margin-top: 2.2em; margin-bottom: .55em; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.post-corpo h3 { margin-top: 1.9em; margin-bottom: .45em; font-size: clamp(1.25rem, 2vw, 1.5rem); }
.post-corpo a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.post-corpo ul, .post-corpo ol { padding-left: 1.3em; }
.post-corpo li + li { margin-top: .5em; }
.post-corpo strong { font-weight: 600; }
.post-corpo img { display: block; width: 100%; height: auto; }
.post-corpo hr { height: 1px; margin: 2.6em 0; border: 0; background: var(--line-light); }
.post-corpo blockquote {
  margin-left: 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--signal);
  color: var(--text-2);
}
.post-corpo blockquote p { margin: 0; }
.post-corpo code {
  padding: 2px 5px;
  background: rgba(16, 20, 26, .06);
  font: 500 .88em/1 var(--mono);
}
.post-corpo pre {
  padding: 20px 22px;
  overflow-x: auto;
  border: 1px solid var(--line-light);
  background: rgba(16, 20, 26, .045);
}
.post-corpo pre code { padding: 0; background: none; line-height: 1.6; }
.post-corpo table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.post-corpo th, .post-corpo td { padding: 11px 12px; border-bottom: 1px solid var(--line-light); text-align: left; }
.post-corpo th { font: 600 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }

.post-voltar { margin-top: 64px; padding-top: 26px; border-top: 1px solid var(--line-light); }
.post-voltar a { color: var(--cobalt); font: 600 12px/1 var(--mono); text-decoration: none; }
.post-voltar a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* Chamada ao fim de toda página do blog */
.blog-cta { padding: clamp(64px, 8vw, 96px) 0; }
.blog-cta h2 { max-width: 14ch; }
.blog-cta .intro { margin-bottom: 32px; }

@media (max-width: 820px) {
  .blog { padding-top: 116px; }
}

/* Leia tambem */
.post-relacionados { margin-top: 72px; }
.post-relacionados h2 { margin-bottom: 18px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.post-relacionados ul { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line-light); }
.post-relacionados li { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line-light); }
.post-relacionados a { font: 600 clamp(1.15rem, 2vw, 1.4rem)/1.2 var(--display); letter-spacing: -.03em; text-decoration: none; transition: color var(--t-fast); }
.post-relacionados a:hover { color: var(--cobalt); }
.post-relacionados time { flex: 0 0 auto; color: var(--text-2); font: 500 10px/1 var(--mono); letter-spacing: .09em; text-transform: uppercase; }
@media (max-width: 510px) {
  .post-relacionados li { flex-direction: column; gap: 8px; }
}

/* Paginacao da listagem */
.post-paginas { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 40px; font: 600 12px/1 var(--mono); }
.post-paginas a { color: var(--cobalt); text-decoration: none; }
.post-paginas a:hover { text-decoration: underline; text-underline-offset: 5px; }
.post-paginas a[rel="next"] { justify-self: end; }
.post-paginas-atual { color: var(--text-2); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; font-size: 10px; }