/* =====================================================================
   SONHO VIVO — post do blog e detalhe do projeto (direcao one-motif)
   As classes vivem no router.js (renderBlogPost / renderProjetoPage).
   ===================================================================== */

body.v3 .v3-post__head { max-width: 70ch; margin-bottom: clamp(20px, 2.5vw, 36px); }
body.v3 .v3-post__lead {
  font-size: var(--v3-step-lead);
  color: var(--v3-muted);
  margin: 14px 0 0;
  max-width: 56ch;
}
body.v3 .v3-post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: var(--v3-step-small);
  color: var(--v3-muted);
  margin-top: 16px;
}
body.v3 .v3-post__capa { max-width: 920px; margin-bottom: clamp(24px, 3vw, 44px); }
body.v3 .v3-post__capa img { aspect-ratio: 16 / 9; object-fit: cover; }
body.v3 .v3-post__cta { margin-top: clamp(24px, 3vw, 40px); }
body.v3 .v3-post__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 22px;
  background: var(--v3-surface);
  border-radius: var(--v3-radius);
  padding-inline: clamp(16px, 2vw, 24px);
}
body.v3 .v3-post__nav a {
  font-size: var(--v3-step-body);
  font-weight: 600;
  color: var(--v3-accent);
  text-decoration: none;
}
body.v3 .v3-post__nav a:hover { text-decoration: underline; }

/* a prosa do post aceita o que vem do editor: as tabelas e as imagens
   precisam caber na coluna */
body.v3 .v3-prose table { width: 100%; border-collapse: collapse; font-size: var(--v3-step-small); }
body.v3 .v3-prose th,
body.v3 .v3-prose td { padding: 10px 12px; border-bottom: 1px solid rgba(127, 127, 127, .22); text-align: left; }
body.v3 .v3-prose iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: var(--v3-radius); }
body.v3 .v3-prose figure { margin: 0; }
body.v3 .v3-prose figcaption { font-size: var(--v3-step-small); color: var(--v3-muted); margin-top: 8px; }
body.v3 .v3-prose hr { border: 0; margin: 32px 0; height: 4px; border-radius: 999px; background: rgba(127, 127, 127, .22); }