/* ==========================================================================
   MAIARA KLEIN ZIMMERMANN — Blog (lista + artigos)
   Depende de css/styles.css (tokens, nav, footer, .btn, .container, .index).
   ========================================================================== */

/* ---------- topo da lista e do artigo (nav fixa por cima) ---------- */
.blog-head,
.post-head{
  padding-top:clamp(9rem,16vw,12rem);
  text-align:center;
}
.blog-head{ padding-bottom:clamp(3.5rem,7vw,5.5rem); }
.post-head{ padding-bottom:clamp(2.5rem,5vw,3.5rem); }

.blog-head .index,
.post-head .index{ display:block; margin-bottom:1.4rem; }

.blog-head__title,
.post-head__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1.14;
  max-width:20ch; margin-inline:auto;
}
.post-head__title{ font-size:clamp(2rem,4.4vw,3.2rem); max-width:22ch; }

.blog-head__lead,
.post-head__lead{
  margin:1.6rem auto 0;
  max-width:56ch;
  color:#5f574a; line-height:1.75;
}
.post-head__meta{
  display:block; margin-top:1.6rem;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft);
}

/* link de voltar */
.post-back{
  display:inline-flex; align-items:center; gap:.6em;
  margin-bottom:2.4rem;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft);
  transition:color var(--speed) var(--ease);
}
.post-back .arrow{ transition:transform var(--speed) var(--ease); }

/* ---------- grade de cards ---------- */
.post-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(2rem,4vw,3.2rem) clamp(1.4rem,3vw,2.4rem);
  padding-bottom:clamp(6rem,12vw,9rem);
}
.post-card{ display:flex; flex-direction:column; }
.post-card__media{
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--cream-deep);
  margin-bottom:1.4rem;
}
.post-card__media img{ transition:transform 1.2s var(--ease); }
.post-card__cat{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-soft);
  margin-bottom:.8rem;
}
.post-card__title{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.3rem,1.8vw,1.55rem);
  line-height:1.25;
  margin-bottom:.9rem;
}
.post-card__excerpt{ font-size:14px; line-height:1.75; margin-bottom:1.2rem; }
.post-card__more{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:.6em;
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink);
}
.post-card__more .arrow{ transition:transform var(--speed) var(--ease); }

/* ---------- artigo ---------- */
.post-cover{
  max-width:1100px;
  margin-bottom:clamp(3rem,6vw,4.5rem);
}
.post-cover img{
  aspect-ratio:16/9;
  height:auto;
  border-radius:var(--radius);
}

.post-body{ padding-bottom:clamp(4rem,8vw,6rem); }
.post-body h2{
  font-family:var(--serif); font-weight:300;
  font-size:clamp(1.6rem,2.8vw,2.1rem);
  line-height:1.2;
  margin:clamp(2.6rem,5vw,3.4rem) 0 1.2rem;
}
.post-body > h2:first-child{ margin-top:0; }
.post-body p,
.post-body li{ font-size:16px; line-height:1.85; color:#5f574a; }
.post-body p + p{ margin-top:1.2rem; }
.post-body ul,
.post-body ol{ padding-left:1.3rem; margin:1rem 0 1.2rem; }
.post-body ul{ list-style:disc; }
.post-body li + li{ margin-top:.7rem; }
.post-body li::marker{ color:var(--gold-ink, #8a6f2e); }
.post-body h3{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(1.15rem,1.8vw,1.3rem);
  line-height:1.3;
  color:var(--ink);
  margin:1.8rem 0 .5rem;
}
.post-body a{ color:var(--ink); border-bottom:1px solid rgba(var(--blush-rgb),.9); transition:border-color var(--speed) var(--ease); }
.post-body a:hover{ border-bottom-color:var(--ink); }
.post-body .btn{ border-bottom:1px solid var(--btn-fg); }
.post-body .post-cta__link{ border-bottom:1px solid currentColor; }
.post-body strong{ font-weight:500; color:var(--ink); }

/* caixa de agendamento no fim do artigo */
.post-cta{
  margin-top:clamp(3.5rem,7vw,5rem);
  padding:clamp(2.2rem,5vw,3.2rem);
  background:#F6F1E8;
  border-radius:var(--radius);
  text-align:center;
}
.post-cta .index{ display:block; margin-bottom:1rem; }
.post-cta h2{ margin:0 0 .9rem; }
.post-cta p{ margin-bottom:2rem; }
.post-cta__actions{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:1.2rem 2rem;
}
.post-cta__link{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink);
  border-bottom:1px solid currentColor;
  padding-bottom:.2rem;
}

.post-related{ padding-top:clamp(2rem,4vw,3rem); }

/* ---------- hover só com ponteiro fino ---------- */
@media (hover:hover) and (pointer:fine){
  .post-card:hover .post-card__media img{ transform:scale(1.05); }
  .post-card:hover .post-card__more .arrow{ transform:translateX(6px); }
  .post-back:hover{ color:var(--ink); }
  .post-back:hover .arrow{ transform:translateX(-4px); }
  .post-cta__link:hover{ opacity:.7; }
}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .post-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:620px){
  .post-grid{ grid-template-columns:1fr; }
  .post-body p, .post-body li{ font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .post-card__media img{ transition:none; }
}

/* botão de agendar em uma linha só no celular */
.post-cta .btn{ white-space:nowrap; }