/* =====================================================================
   Vanessa — Blog (índice + artigo)
   Depende de historia.css (tokens, nav, footer, botões) e paginas.css
   (.page-hero, .prose, .eyebrow). Estética: enxuta, editorial, com
   movimento (load no hero + scroll-driven nos blocos).
   ===================================================================== */

/* ----------------------------- índice ------------------------------ */
/* hero do índice: menor que o padrão das páginas institucionais */
.blog-hero { padding-bottom:30px; }
.blog-hero h1 { font-size:clamp(27px,3.6vw,42px); line-height:1.08; }
.blog-hero .lead { font-size:clamp(15.5px,1.7vw,17.5px); max-width:60ch; }

.blog { max-width:none; margin:0; padding:24px 0 56px; }

.blog-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:22px; }

/* card */
.post-card { position:relative; display:flex; flex-direction:column; background:var(--surface);
  border:.5px solid var(--line); border-radius:var(--r-2xl); overflow:hidden;
  box-shadow:var(--shadow); transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.post-card:hover { transform:translateY(-6px); box-shadow:0 26px 50px -22px rgba(120,70,60,.4);
  border-color:var(--brand-soft); }
.post-card a.cover { display:block; aspect-ratio:16/10; overflow:hidden; background:var(--bg-warm); }
.post-card a.cover img { width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .6s var(--ease); }
.post-card:hover a.cover img { transform:scale(1.06); }
.post-card .body { display:flex; flex-direction:column; gap:9px; padding:20px 22px 22px; flex:1; }
.post-card .cat { align-self:flex-start; }
/* cada idioma é um bloco; preserva o espaçamento interno sem quebrar [hidden] */
.post-card .body [data-lang-block]:not([hidden]) { display:flex; flex-direction:column; gap:8px; }
.post-card h2 { font-family:var(--serif); font-weight:500; font-size:18.5px; line-height:1.22;
  letter-spacing:-.015em; margin:0; text-wrap:balance; }
.post-card h2 a { color:var(--ink); background-image:linear-gradient(var(--brand),var(--brand));
  background-size:0% 1.5px; background-repeat:no-repeat; background-position:0 100%;
  transition:color .25s var(--ease), background-size .35s var(--ease); padding-bottom:1px; }
.post-card:hover h2 a { color:var(--brand); }
.post-card p { font-size:14px; line-height:1.55; color:var(--ink-2); margin:0; text-wrap:pretty;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.post-card .meta { margin-top:auto; padding-top:4px; display:flex; align-items:center; gap:8px;
  font-size:11.5px; letter-spacing:.01em; color:var(--muted); }
.post-card .meta .dot { width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.55; }

/* selo de categoria */
.cat { display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--brand);
  background:var(--brand-tint); border-radius:var(--r-pill); padding:5px 11px; width:fit-content; }
.cat svg { width:13px; height:13px; }

/* ----------------------------- artigo ------------------------------ */
.post-hero { position:relative; overflow:hidden; margin-top:-70px; padding:138px 0 26px; }
.post-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:var(--grad-hero); }
/* sopro de cor que deriva devagar — atmosfera, não distração */
.post-hero::after { content:""; position:absolute; z-index:-1; top:-30%; right:-12%;
  width:46vw; height:46vw; max-width:560px; max-height:560px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,92,119,.16), transparent 66%);
  filter:blur(6px); pointer-events:none; }
.post-hero .cat { margin-bottom:16px; }
.post-hero h1 { font-family:var(--serif); font-weight:500; font-size:clamp(25px,3.4vw,38px);
  line-height:1.1; letter-spacing:-.025em; margin:0 0 14px; text-wrap:balance; }
.post-hero h1 em { font-style:italic; color:var(--brand); }
.post-hero .lead { font-size:clamp(15.5px,1.7vw,17.5px); line-height:1.55; color:var(--ink-2); margin:0; text-wrap:pretty; }

.post-meta { display:flex; align-items:center; gap:11px; margin-top:22px; }
.post-meta .av { width:40px; height:40px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  font-family:var(--serif); font-style:italic; font-weight:600; font-size:17px; color:#fff;
  background:linear-gradient(135deg, var(--brand), #FF8FA3); box-shadow:0 4px 12px rgba(255,92,119,.28); }
.post-meta .av img { width:100%; height:100%; border-radius:50%; object-fit:cover; }
.post-meta .who { display:flex; flex-direction:column; gap:1px; }
.post-meta .who b { font-size:14px; font-weight:650; color:var(--ink); }
.post-meta .who .sub { font-size:12.5px; color:var(--muted); }
/* o separador vive dentro de um <span> por idioma (inline) → inline-block p/ ter tamanho */
.post-meta .who .sub .dot { display:inline-block; width:3px; height:3px; border-radius:50%;
  background:currentColor; opacity:.55; margin:0 8px; vertical-align:middle; }

/* capa do artigo */
.post-cover { margin:8px 0 0; }
.post-cover img { width:100%; height:clamp(220px, 42vh, 420px); object-fit:cover; object-position:center 30%;
  border-radius:var(--r-2xl); border:.5px solid var(--line); box-shadow:var(--shadow-md); display:block; }

/* corpo: reaproveita .prose, largura do container (igual header e páginas legais) */
.post-body .prose { padding:36px 0 8px; }
.post-body .prose h2:first-child { margin-top:0; }
.post-body .prose h2 { display:block; font-size:20px; line-height:1.25; margin:30px 0 12px; }
.post-body .prose h2 .n { display:none; }            /* sem numeração como nas páginas legais */
.post-body .prose p { font-size:15.5px; line-height:1.72; }

/* assinatura do autor */
.post-author { max-width:var(--maxw); margin:34px auto 0; padding:0 28px; }
.post-author .card { display:flex; gap:16px; align-items:flex-start; background:var(--surface);
  border:.5px solid var(--line); border-radius:var(--r-2xl); padding:22px 24px; box-shadow:var(--shadow); }
.post-author .av { width:54px; height:54px; border-radius:50%; flex-shrink:0; overflow:hidden;
  display:grid; place-items:center; font-family:var(--serif); font-style:italic; font-weight:600;
  font-size:22px; color:#fff; background:linear-gradient(135deg, var(--brand), #FF8FA3); }
.post-author .av img { width:100%; height:100%; object-fit:cover; }
.post-author h3 { font-size:15px; font-weight:700; margin:1px 0 5px; color:var(--ink); }
.post-author p { font-size:14px; line-height:1.6; color:var(--ink-2); margin:0; }

/* CTA baixar app */
.post-cta { max-width:var(--maxw); margin:30px auto 0; padding:0 28px; }
.post-cta .box { position:relative; overflow:hidden; text-align:center; border-radius:var(--r-2xl);
  padding:34px 28px; background:var(--grad-hero); border:.5px solid var(--line); }
.post-cta .box::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(420px 200px at 50% -10%, rgba(255,92,119,.16), transparent 70%); }
.post-cta .box > * { position:relative; z-index:1; }
.post-cta h3 { font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.4vw,26px);
  letter-spacing:-.02em; margin:0 0 8px; text-wrap:balance; }
.post-cta p { font-size:15px; color:var(--ink-2); margin:0 auto 20px; max-width:44ch; text-wrap:pretty; }
.post-cta .btn svg { width:17px; height:17px; }

/* mais posts */
.post-more { margin-top:48px; margin-bottom:80px; }
.post-more h3 { font-family:var(--serif); font-weight:500; font-size:20px; letter-spacing:-.015em;
  margin:0 0 18px; }
.post-more .blog-grid { gap:18px; }

/* voltar ao blog */
.blog-back { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600;
  color:var(--ink-2); margin-bottom:2px; transition:color .2s var(--ease); }
.blog-back:hover { color:var(--brand); }
.blog-back svg { width:16px; height:16px; transition:transform .25s var(--ease); }
.blog-back:hover svg { transform:translateX(-3px); }

/* ----------------------------- movimento --------------------------- */
@media (prefers-reduced-motion: no-preference) {

  /* índice: hero entra escalonado no load */
  .blog-hero .eyebrow { animation:blogRise .65s var(--ease) both; }
  .blog-hero h1       { animation:blogRise .8s .08s var(--ease) both; }
  .blog-hero .lead    { animation:blogRise .8s .16s var(--ease) both; }

  /* artigo: hero sobe uma vez (bloco inteiro, não re-anima ao trocar idioma) */
  .post-hero .wrap { animation:blogRise .7s var(--ease) both; }

  /* blocos revelam ao rolar — CSS puro, sem JS. Safari ignora via @supports
     e mostra tudo normalmente (sem estado oculto preso). */
  @supports (animation-timeline: view()) {
    .post-card,
    .post-body .prose,
    .post-author,
    .post-cta,
    .post-more h3 {
      animation:revealUp .9s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 2% cover 24%;
    }
    .post-cover img {
      animation:coverIn 1s var(--ease) both;
      animation-timeline:view();
      animation-range:entry 0% cover 40%;
    }
  }
}

@keyframes blogRise { from { opacity:0; transform:translateY(16px); filter:blur(5px); }
  to { opacity:1; transform:none; filter:blur(0); } }
@keyframes revealUp { from { opacity:0; transform:translateY(26px); } to { opacity:1; transform:none; } }
@keyframes coverIn  { from { opacity:0; transform:scale(.965); } to { opacity:1; transform:none; } }

@media (max-width:560px) {
  .blog-grid { grid-template-columns:1fr; }
}
@media (max-width:680px) {
  .post-hero { padding:116px 0 22px; }
  .post-body .prose { padding:28px 0 8px; }
}