/* ============================================================================
   page-blog.css: Emma Café Bistrot
   Listagem do Blog em grade de CARDS com foto — estrutura inspirada no ZEFY
   (zefydiner.com.br/blog): foto de capa no topo, categoria, autor + data,
   título e resumo curto, "Ler mais". Identidade 100% Emma: bege/vinho/texto,
   Noto Sans, card suave (mesmo padrão do cardápio — radius 14px, sombra
   discreta), zero exagero. Grade 1 col (mobile) → 2 → 3 (desktop).
   Consome tokens de design-system.css. Feito por Frame Tecnologia.
   ============================================================================ */

.blog{
  max-width:1200px;
  padding-block:clamp(3rem,8vw,5rem) clamp(4rem,10vw,7rem);
}

/* ─── Título da página ─── */
.blog__topo{
  text-align:center;
  margin-bottom:clamp(2.5rem,6vw,4rem);
}
.blog__titulo{
  margin:0;
  font-weight:var(--peso-negrito);
  font-size:clamp(2rem,6vw,3rem);
  line-height:1;
  letter-spacing:var(--tracking-logo);
  color:var(--vinho);
}
.blog__intro{
  margin:.75rem auto 0;
  max-width:46ch;
  font-family:var(--fonte-italica);
  font-style:italic;
  color:var(--texto-muted);
}

.blog__vazio{
  color:var(--texto);
  text-align:center;
}

/* ─── Grade de cards: 1 → 2 → 3 colunas (mesmos pontos do cardápio) ─── */
.blog__lista{
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(1.5rem,3vw,2rem);
}
@media (max-width:900px){
  .blog__lista{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  .blog__lista{ grid-template-columns:1fr; }
}

/* ─── Card (o <a> inteiro é clicável) ───
   Mesmo card suave do cardápio: fundo levemente mais claro que o bege da
   página, radius 14px, sombra discreta. Sobe 3px no hover. */
.blog__card{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:color-mix(in srgb, var(--fundo) 35%, white 65%);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(60,36,20,.08);
  color:inherit;
  text-decoration:none;
  transition:box-shadow 220ms cubic-bezier(.22,1,.36,1),
             transform 220ms cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  .blog__card:hover{
    box-shadow:0 6px 18px rgba(60,36,20,.14);
    transform:translateY(-3px);
  }
}

/* ─── Foto de capa (topo) ─── */
.blog__card-foto{
  width:100%;
  height:200px;
  overflow:hidden;
  background:color-mix(in srgb, var(--fundo) 60%, white 40%);
}
.blog__card-foto img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 400ms cubic-bezier(.22,1,.36,1);
}
@media (hover:hover){
  .blog__card:hover .blog__card-foto img{ transform:scale(1.04); }
}

/* Placeholder quando o post não tem capa: faixa bege com o wordmark discreto */
.blog__card-foto--vazia{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,
    color-mix(in srgb, var(--fundo) 70%, white 30%),
    color-mix(in srgb, var(--fundo) 30%, var(--acento-salmao) 25%));
}
.blog__card-foto--vazia span{
  font-family:var(--fonte-base);
  font-weight:var(--peso-negrito);
  font-size:1.6rem;
  letter-spacing:var(--tracking-logo);
  color:color-mix(in srgb, var(--vinho) 55%, transparent);
}

/* ─── Corpo do card ─── */
.blog__card-corpo{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  padding:clamp(1.1rem,2.5vw,1.35rem);
}

.blog__card-categoria{
  align-self:flex-start;
  padding:.2rem .65rem;
  border-radius:999px;
  background:color-mix(in srgb, var(--vinho) 12%, white 88%);
  color:var(--vinho);
  font-size:.66rem;
  font-weight:var(--peso-medio);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.blog__card-meta{
  margin:0;
  font-family:var(--fonte-italica);
  font-style:italic;
  font-size:.82rem;
  color:var(--texto-muted);
}
.blog__card-autor{ font-style:normal; font-weight:var(--peso-medio); }

.blog__card-titulo{
  margin:0;
  font-family:var(--fonte-base);
  font-weight:var(--peso-medio);
  font-size:1.12rem;
  line-height:1.35;
  color:var(--texto);
  /* no máximo 2 linhas */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.blog__card-resumo{
  margin:0;
  font-size:.88rem;
  line-height:1.6;
  color:var(--texto-muted);
  /* no máximo 3 linhas */
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.blog__card-leia{
  margin-top:.35rem;
  font-weight:var(--peso-medio);
  font-size:.83rem;
  color:var(--vinho);
}