/* ============================================================================
   page-post.css — Emma Café Bistrot
   Post individual do Blog. Estrutura de leitura inspirada no ZEFY
   (zefydiner.com.br/blog): coluna única centralizada NA PÁGINA, mas todo o
   conteúdo ALINHADO À ESQUERDA (título, meta, corpo, citações). Identidade
   100% Emma: bege/vinho/texto, Noto Sans, capa com radius suave (mesma
   linguagem do card do blog). Zero overlay, zero sidebar, zero card de
   relacionados. Consome tokens de design-system.css. Feito por Frame Tecnologia.
   ============================================================================ */

/* Bloco de leitura: centralizado na página via margem automática do
   .emma-container; o texto em si corre à esquerda. Largura 880px (era 640
   no original, depois 760) — a cliente achou a coluna estreita demais
   ("parecendo poema, muita borda"). 880px dá presença editorial, a capa e
   o texto ganham largura juntos e a linha de leitura segue confortável. */
.post{
  max-width:880px;
  margin-inline:auto;
  padding-block:clamp(3rem,8vw,5rem) clamp(4rem,10vw,7rem);
}

/* ─── Cabeçalho: título + meta (autor · data), tudo à esquerda ─── */
.post__topo{
  text-align:left;
  margin-bottom:clamp(2rem,5vw,3rem);
  padding-bottom:clamp(1.25rem,3vw,1.75rem);
  border-bottom:1px solid color-mix(in srgb, var(--texto-muted) 30%, transparent);
}
.post__titulo{
  margin:0;
  font-weight:var(--peso-negrito);
  font-size:clamp(1.9rem,4.5vw,2.75rem);
  line-height:1.2;
  color:var(--texto);
}
.post__meta,
.post__data{
  margin:1rem 0 0;
  font-family:var(--fonte-italica);
  font-style:italic;
  font-weight:var(--peso-regular);
  font-size:.92rem;
  color:var(--texto-muted);
}
.post__autor{ font-style:normal; font-weight:var(--peso-medio); color:var(--texto); }

/* ─── Capa: foto no topo do artigo, radius suave, sem overlay ─── */
.post__capa{
  width:100%;
  margin-bottom:clamp(2rem,5vw,3rem);
  border-radius:14px;
  overflow:hidden;
}
.post__capa img{
  width:100%;
  height:auto;
  max-height:480px;
  object-fit:cover;
  display:block;
}

/* ─── Corpo: coluna de leitura confortável, alinhada à esquerda ─── */
.post__corpo{ width:100%; }
.post__prosa{
  font-weight:var(--peso-regular);
  font-size:1.08rem;
  line-height:1.85;
  color:var(--texto);
  text-align:left;
}
.post__prosa > *:first-child{ margin-top:0; }
.post__prosa p{ margin:0 0 1.4rem; }
.post__prosa p:last-child{ margin-bottom:0; }

.post__prosa h2{
  margin:clamp(2.25rem,4.5vw,3rem) 0 1rem;
  text-align:left;
  font-weight:var(--peso-medio);
  font-size:clamp(1.35rem,3vw,1.6rem);
  line-height:1.3;
  color:var(--vinho);
}
.post__prosa h3{
  margin:2rem 0 .75rem;
  text-align:left;
  font-weight:var(--peso-medio);
  font-size:1.2rem;
  line-height:1.4;
  color:var(--texto);
}
.post__prosa strong{ font-weight:var(--peso-negrito); }
.post__prosa em{ font-style:italic; }

.post__prosa ul,
.post__prosa ol{ margin:0 0 1.4rem 1.5rem; padding:0; }
.post__prosa li{ margin-bottom:.5rem; line-height:1.7; }

.post__prosa a{
  color:var(--vinho);
  text-decoration:underline;
  text-underline-offset:2px;
}

/* Imagens no corpo do artigo: PADRÃO 4:5 (proporção da foto aprovada pela
   cliente — 1280x1600), largura cheia da coluna. Todas as fotos ficam com a
   mesma altura/enquadramento, independentemente do arquivo original. Fotos
   mais verticais (9:16) têm topo/base levemente recortados para caber no
   4:5; object-position:center mantém o miolo (o prato/assunto). */
.post__prosa img{
  display:block;
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center;
  margin:1.75rem 0;
  border-radius:10px;
}

/* Citação: barra vinho à esquerda + fundo bege claro (estilo Zefy, cor Emma) */
.post__prosa blockquote{
  margin:clamp(1.75rem,4vw,2.5rem) 0;
  padding:.85rem 1.35rem;
  border-left:3px solid var(--vinho);
  border-radius:0 8px 8px 0;
  background:color-mix(in srgb, var(--vinho) 7%, white 93%);
  font-family:var(--fonte-italica);
  font-style:italic;
  font-weight:var(--peso-regular);
  font-size:1.1rem;
  line-height:1.65;
  color:var(--texto);
}
.post__prosa blockquote p{ margin:0; }

.post__prosa hr{
  border:none;
  border-top:1px solid color-mix(in srgb, var(--texto-muted) 30%, transparent);
  margin:2.5rem 0;
}

/* ─── Navegação anterior/próximo + voltar: links à esquerda ─── */
.post__navegacao{
  width:100%;
  margin-top:clamp(2.5rem,6vw,4rem);
  padding-top:clamp(1.5rem,3vw,2rem);
  border-top:1px solid color-mix(in srgb, var(--texto-muted) 30%, transparent);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.6rem;
  text-align:left;
}
.post__navegacao a{ color:var(--texto); }

.post__voltar{
  margin:1.5rem 0 0;
  text-align:left;
}
.post__voltar a{
  color:var(--vinho);
  font-weight:var(--peso-medio);
}

/* ─── 404 do Blog: mesma linguagem, à esquerda ─── */
.post--vazio{ text-align:left; }
.post--vazio .post__titulo{ margin-bottom:1rem; }
.post__aviso{ margin:0 0 .6rem; color:var(--texto); }