/* ============================================================
   Caroline Toledo — Blog: acervo estático (blog/todos.html, blog/arquivo/)
   e página de espera (blog/index.html). Classes geradas por
   ferramentas/acervo-estatico.mjs, na identidade do style.css.
   ============================================================ */

.pagina-acervo main { background: var(--cream); }

.nav-desktop a.active,
.mobile-menu a.active { color: var(--rose); }
.nav-desktop a.active::after { width: 100%; }

.pagina-acervo .section { padding: calc(80px + clamp(48px, 7vw, 88px)) 0 var(--section-v); }
.pagina-acervo .wrapper {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--container-h);
}

/* ---- Cabeçalho da listagem ---- */
.pagina-acervo .intro { text-align: center; margin-bottom: clamp(40px, 5vw, 64px); }
.pagina-acervo .intro .title,
.pagina-acervo .artigo > .title {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose);
  margin-bottom: 16px;
}
.pagina-acervo .intro h1 { font-size: clamp(36px, 5vw, 58px); }
.pagina-acervo .divider {
  width: 56px;
  height: 1px;
  background: var(--rose);
  margin: 24px auto 0;
}
.pagina-acervo .text-grey { color: var(--text-soft); text-align: center; margin: 0 auto 24px; }
.pagina-acervo .text-grey a { color: var(--rose-dark); text-decoration: underline; }

/* ---- Grade de cards ---- */
#gradeArtigos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 1024px) { #gradeArtigos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { #gradeArtigos { grid-template-columns: 1fr; } }

#gradeArtigos .post-33 {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--transition), box-shadow var(--transition);
}
#gradeArtigos .post-33:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* capa: <img> dentro do link (nunca background-image inline) */
#gradeArtigos .post-card-preview-m {
  display: block;
  padding: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--blush-light);
}
#gradeArtigos .post-card-preview-m img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}
#gradeArtigos .post-33:hover .post-card-preview-m img { transform: scale(1.04); }

#gradeArtigos .post-heading {
  font-size: clamp(18px, 1.9vw, 21px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-dark);
  padding: 24px 26px 0;
  margin: 0 0 12px;
}
#gradeArtigos .post-heading a:hover { color: var(--rose-dark); }
#gradeArtigos .post-card-decription {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-soft);
  padding: 0 26px;
  max-width: none;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#gradeArtigos .post-card-bottom {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  margin: 18px 26px 22px;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
}

/* ---- Página do artigo ---- */
.pagina-acervo .artigo {
  max-width: 780px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(28px, 5vw, 56px) clamp(20px, 6vw, 64px) clamp(28px, 4vw, 48px);
}
.pagina-acervo .artigo h1 {
  font-size: clamp(32px, 4.4vw, 50px);
  line-height: 1.15;
}
.pagina-acervo .artigo .divider { margin: 24px 0 32px; }
.artigo__capa {
  width: 100%;
  max-height: 440px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 36px;
}

.artigo__corpo { font-size: 17px; line-height: 1.85; color: var(--text-mid); }
.artigo__corpo > *:first-child { margin-top: 0; }
.artigo__corpo p { max-width: none; margin-bottom: 20px; }
.artigo__corpo h1,
.artigo__corpo h2 {
  font-size: clamp(24px, 2.8vw, 30px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 44px 0 16px;
}
.artigo__corpo h3 {
  font-size: clamp(19px, 2vw, 22px);
  font-weight: 500;
  color: var(--text-dark);
  margin: 32px 0 12px;
}
.artigo__corpo h4 { margin: 28px 0 10px; }
.artigo__corpo a { color: var(--rose-dark); text-decoration: underline; text-underline-offset: 3px; }
.artigo__corpo a:hover { color: var(--text-dark); }
.artigo__corpo ul { list-style: disc; padding-left: 24px; margin-bottom: 20px; }
.artigo__corpo ol { list-style: decimal; padding-left: 24px; margin-bottom: 20px; }
.artigo__corpo li { margin-bottom: 8px; }
.artigo__corpo li::marker { color: var(--rose); }
.artigo__corpo strong { font-weight: 500; color: var(--text-dark); }
.artigo__corpo blockquote {
  border-left: 2px solid var(--rose);
  padding: 12px 24px;
  margin: 28px 0;
  background: var(--blush-light);
  font-style: italic;
}
.artigo__corpo img { border-radius: var(--radius-sm); margin: 8px auto; }

.artigo__voltar {
  margin-top: 44px;
  padding-top: 24px;
  border-top: 1px solid var(--border-soft);
  max-width: none;
}
.artigo__voltar a { font-size: 14px; font-weight: 500; color: var(--rose-dark); }
.artigo__voltar a:hover { color: var(--text-dark); }

/* ---- Página de espera (/blog/index.html, contingência do motor) ---- */
.espera {
  padding: calc(80px + clamp(72px, 10vw, 128px)) 0 clamp(88px, 11vw, 136px);
  text-align: center;
}
.espera__inner { max-width: 760px; }
.espera h1 { font-size: clamp(36px, 5vw, 60px); margin-bottom: 24px; }
.espera p { margin: 0 auto; color: var(--text-soft); }
.espera__acoes {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 40px;
}
.espera .espera__voltar { margin-top: 28px; font-size: 14px; }
.espera__voltar a { color: var(--rose-dark); text-decoration: underline; text-underline-offset: 3px; }