/* ============================================================
   blog-teaser.css — Seção "Diário do jardim" antes do rodapé da index
   (lane BLOG-3). Totalmente isolado: só estiliza .blog-teaser*.
   Não altera loader, animações, scroll pinado ou demais seções.
   ============================================================ */

.blog-news{
  position:relative;
  overflow:hidden;
  background:var(--color-bg-primary, #F7F2EC);
  border-top:1px solid rgba(238,138,148,.12);
  border-bottom:1px solid rgba(238,138,148,.12);
  isolation:isolate;
}
.blog-news[hidden]{ display:none; }
.blog-news::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,253,251,.44) 0%, rgba(246,203,212,.12) 52%, rgba(255,253,251,.34) 100%);
}
.blog-teaser{
  position:relative;
  z-index:9;
  display:grid;
  justify-items:center;
  gap:14px;
  width:min(100%, 420px);
  margin:0 auto;
  padding:clamp(3.25rem, 13cqw, 5rem) var(--gutter, 20px) clamp(3.35rem, 13cqw, 5rem);
  text-align:center;
}
.blog-teaser[hidden]{ display:none; }

.blog-teaser__head{ display:grid; justify-items:center; gap:4px; }
.blog-teaser__eyebrow{
  margin:0;
  color:var(--c-babado-800, #B05E74);
  font-size:.7rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}
.blog-teaser__title{
  margin:0;
  font-family:'Fraunces', Georgia, serif; font-style:italic; font-weight:500;
  font-size:clamp(1.72rem, 7.8cqw, 2.2rem); line-height:1.06;
  color:var(--color-text-primary, #3A2229);
  text-wrap:balance;
}

.blog-teaser__list{ display:grid; gap:10px; width:100%; }

.blog-teaser__card{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr);
  gap:12px;
  align-items:center;
  padding:12px 14px;
  text-align:left; text-decoration:none;
  background:var(--color-surface-card, #FFFDFB);
  border:1px solid rgba(217,133,152,.2);
  border-radius:18px;
  box-shadow:0 10px 24px -18px rgba(58,34,41,.3);
  transition:transform .18s ease, border-color .18s ease;
}
.blog-teaser__card-media{
  width:58px;
  height:58px;
  border-radius:14px;
  overflow:hidden;
  background:rgba(154,211,182,.16);
  border:1px solid rgba(217,133,152,.18);
}
.blog-teaser__card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.blog-teaser__card-body{ display:grid; gap:3px; min-width:0; }
.blog-teaser__card:hover, .blog-teaser__card:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(176,94,116,.42);
}
.blog-teaser__card-date{
  font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-text-tertiary, #A98089);
}
.blog-teaser__card-title{
  font-family:'Fraunces', Georgia, serif; font-weight:600;
  font-size:1.02rem; line-height:1.25;
  color:var(--color-text-primary, #3A2229);
  text-wrap:balance;
}
.blog-teaser__card-excerpt{
  font-size:.85rem; line-height:1.4;
  color:var(--color-text-secondary, #8A5B66);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.blog-teaser__card:not(.has-media){
  grid-template-columns:1fr;
}

.blog-teaser__all{
  display:inline-block;
  padding:9px 20px; border-radius:999px;
  font-size:.84rem; font-weight:800; letter-spacing:.02em; text-decoration:none;
  color:var(--c-babado-800, #B05E74);
  border:1.5px solid rgba(176,94,116,.45);
  transition:background .18s ease, color .18s ease;
}
.blog-teaser__all:hover, .blog-teaser__all:focus-visible{
  background:rgba(176,94,116,.08);
  color:var(--c-babado-900, #9C4E64);
}

/* entrada suave, sem depender do sistema de reveals da index */
.blog-teaser.is-loaded{ animation:blogTeaserIn .5s ease both; }
@keyframes blogTeaserIn{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}