/* ==============================================
   ACERVO DO BLOG — Vanessa Siqueira · Digital Bloom
   Artigos migrados do WordPress: blog/todos.html e blog/arquivo/
   Carregado depois de blog.css; usa os mesmos tokens.
   ============================================== */

.acervo{padding:calc(84px + var(--space-3xl)) 0 var(--space-4xl);background:var(--c-bg)}
.acervo .wrapper{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.5rem}

/* ---- Abertura ---- */
.acervo .intro{text-align:center;max-width:720px;margin:0 auto}
.acervo .title{font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--c-primary)}
.acervo .intro h1{font-family:var(--font-serif);font-size:clamp(2.5rem,5vw,3.5rem);font-weight:400;line-height:1.15;margin-top:var(--space-sm)}
.acervo .divider{width:56px;height:2px;background:var(--c-primary);opacity:.6;margin:var(--space-lg) auto 0}
.acervo__apoio{margin-top:var(--space-lg);color:var(--c-text-muted);font-size:var(--text-md)}
.acervo__acoes{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-md);margin-top:var(--space-xl)}
#avisoBlog{text-align:center;margin-top:var(--space-lg);color:var(--c-text-muted);font-size:var(--text-sm)}
#avisoBlog a{color:var(--c-primary);text-decoration:underline}

/* ---- Grade de artigos ---- */
.acervo .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl);margin-top:var(--space-3xl)}
.acervo .post-33{
  position:relative;display:flex;flex-direction:column;
  background:var(--c-surface);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--shadow-sm);border:1px solid var(--c-border-lt);
  transition:transform var(--transition),box-shadow var(--transition);
}
.acervo .post-33:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.acervo .post-card-preview-m{display:block;padding:0;aspect-ratio:3/2;overflow:hidden;background:var(--c-bg-alt)}
.acervo .post-card-preview-m img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.acervo .post-33:hover .post-card-preview-m img{transform:scale(1.05)}
.acervo .post-heading{
  font-family:var(--font-serif);font-size:var(--text-xl);font-weight:500;line-height:1.3;
  margin:var(--space-lg) var(--space-lg) var(--space-sm);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.acervo .post-heading a:hover{color:var(--c-primary)}
/* o título inteiro vira área clicável do card */
.acervo .post-heading a::after{content:'';position:absolute;inset:0}
.acervo .post-card-decription{
  flex:1;margin:0 var(--space-lg);font-size:var(--text-sm);color:var(--c-text-muted);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.acervo .post-card-bottom{
  margin:var(--space-md) var(--space-lg) var(--space-lg);padding-top:var(--space-sm);
  border-top:1px solid var(--c-border-lt);
  font-size:var(--text-xs);color:var(--c-text-muted);text-transform:uppercase;letter-spacing:.06em;
}

/* ---- Página do artigo ---- */
.acervo .artigo{max-width:760px;margin:0 auto}
.acervo .artigo h1{font-family:var(--font-serif);font-size:clamp(2rem,4vw,3.25rem);font-weight:400;line-height:1.15;margin-top:var(--space-sm)}
.acervo .artigo .divider{margin:var(--space-lg) 0 var(--space-2xl)}
.acervo .artigo__capa{width:100%;max-height:480px;object-fit:cover;border-radius:var(--radius-lg);margin-bottom:var(--space-2xl)}

.artigo__corpo{font-size:var(--text-md);line-height:1.8;color:var(--c-text)}
.artigo__corpo h2{font-family:var(--font-serif);font-size:clamp(1.5rem,2.5vw,2rem);font-weight:500;line-height:1.25;margin:2.5rem 0 1rem}
.artigo__corpo h3{font-family:var(--font-serif);font-size:1.4rem;font-weight:500;line-height:1.3;margin:2rem 0 .75rem}
.artigo__corpo h4{font-size:1.1rem;font-weight:600;margin:1.5rem 0 .5rem}
.artigo__corpo p{margin-bottom:1.4rem}
.artigo__corpo ul,.artigo__corpo ol{margin:0 0 1.4rem 1.5rem;list-style:revert}
.artigo__corpo li{margin-bottom:.5rem}
.artigo__corpo blockquote{border-left:3px solid var(--c-primary);margin:2rem 0;padding:1rem 1.5rem;background:rgba(156,87,49,.05);border-radius:0 var(--radius-md) var(--radius-md) 0;font-style:italic;color:var(--c-text-muted)}
.artigo__corpo img{border-radius:var(--radius-md);margin:1.5rem auto;max-width:100%}
.artigo__corpo hr{border:none;border-top:1px solid var(--c-border);margin:2.5rem 0}
.artigo__corpo a{color:var(--c-primary);text-decoration:underline;text-decoration-color:rgba(156,87,49,.4)}
.artigo__corpo a:hover{text-decoration-color:var(--c-primary)}
.artigo__corpo strong{font-weight:600}

.acervo .artigo__voltar{margin-top:var(--space-3xl);padding-top:var(--space-xl);border-top:1px solid var(--c-border-lt)}
.acervo .artigo__voltar a{font-size:var(--text-sm);font-weight:600;color:var(--c-primary)}
.acervo .artigo__voltar a:hover{color:var(--c-primary-dk)}

/* ---- Menu mobile ----
   O .header tem backdrop-filter, que vira o bloco de contenção do .nav-mobile
   (position:fixed). Com inset relativo ao header o menu ficava com a altura dele
   e aparecia cortado. Aqui ele desce a partir da base do header até o fim da tela. */
.header .nav-mobile{top:100%;bottom:auto;left:0;right:0;height:calc(100vh - 84px);height:calc(100dvh - 84px)}

@media(max-width:1024px){.acervo .posts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .acervo{padding-top:calc(84px + var(--space-2xl))}
  .acervo .posts{grid-template-columns:1fr}
}