/* Blog — herda a paleta e a tipografia do site (app.css / siro.css).
   Só o que o resto do site ainda não tinha: grade de artigos e corpo de texto longo. */

/* ── listagem ─────────────────────────────────────────────── */
.bgrid{display:grid;gap:clamp(22px,3vw,34px);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.bcard{display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  transition:transform .35s ease,box-shadow .35s ease}
.bcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(66,85,99,.13)}
.bcard__img{aspect-ratio:16/10;overflow:hidden;background:var(--cream)}
.bcard__img img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .6s ease}
.bcard:hover .bcard__img img{transform:scale(1.04)}
.bcard__in{display:flex;flex-direction:column;gap:.7rem;flex:1;
  padding:clamp(20px,2.4vw,28px)}
.bcard__date{font-size:.82rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--taupe)}
.bcard h2{font-size:clamp(1.2rem,1.9vw,1.5rem);line-height:1.25;margin:0;
  color:var(--ink)}
.bcard h2 a{color:inherit;text-decoration:none}
.bcard h2 a:hover{color:var(--navy)}
.bcard p{color:var(--muted);font-size:1rem;line-height:1.6;margin:0}
.bcard__more{margin-top:auto;padding-top:.9rem;color:var(--navy);font-weight:600;
  letter-spacing:.04em}

/* ── artigo ───────────────────────────────────────────────── */
.art{max-width:74ch;margin-inline:auto}
.art__meta{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;align-items:center;
  color:var(--taupe);font-size:.86rem;letter-spacing:.08em;text-transform:uppercase;
  margin-bottom:clamp(24px,3vw,38px)}
.art__hero{border-radius:var(--r-lg);overflow:hidden;margin-bottom:clamp(28px,4vw,48px)}
.art__hero img{width:100%;height:auto;display:block}
.art__body{color:var(--ink);font-size:clamp(1.04rem,1.35vw,1.14rem);line-height:1.78}
.art__body>*+*{margin-top:1.15em}
.art__body h2{font-size:clamp(1.45rem,2.4vw,1.9rem);line-height:1.24;
  color:var(--navy);margin-top:2.1em}
.art__body h3{font-size:clamp(1.18rem,1.8vw,1.4rem);line-height:1.3;
  color:var(--navy-d);margin-top:1.7em}
.art__body strong{color:var(--navy-d)}
.art__body ul,.art__body ol{padding-left:1.35em}
.art__body li+li{margin-top:.5em}
.art__body li::marker{color:var(--rose-d)}
.art__body a{color:var(--navy);text-underline-offset:3px}
.art__body img{max-width:100%;height:auto;border-radius:var(--r-lg);display:block;
  margin-inline:auto}
.art__body blockquote{border-left:3px solid var(--rose);padding-left:1.2em;
  margin-left:0;color:var(--muted);font-style:italic}
.art__body p:empty{display:none}

/* aviso editorial — conteúdo de saúde (YMYL) */
.art__disc{margin-top:clamp(34px,4vw,52px);padding:clamp(18px,2vw,24px);
  background:var(--cream);border-radius:var(--r-lg);border:1px solid var(--line);
  color:var(--muted);font-size:.94rem;line-height:1.6}

/* navegação entre artigos */
.art__nav{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
  margin-top:clamp(34px,4vw,52px)}
.art__nav a{display:block;padding:clamp(16px,1.8vw,22px);background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-lg);text-decoration:none;
  color:var(--ink);transition:border-color .3s ease}
.art__nav a:hover{border-color:var(--navy-l)}
.art__nav span{display:block;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--taupe);margin-bottom:.4rem}
.art__nav strong{font-weight:600;line-height:1.35}