/* ============================================================
   Grupo Marfre — estilos do blog (usa os tokens de styles.css)
   ============================================================ */

/* Header sempre sólido nas páginas de blog */
.site-header.solid{background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.08)}

/* ---------- Hero do índice ---------- */
.blog-hero{
  background:radial-gradient(120% 90% at 80% 0%,var(--navy-700) 0%,transparent 55%),var(--navy-deep);
  padding:140px 0 64px;
}
.blog-hero .eyebrow{color:var(--blue)}
.blog-hero h1{font-weight:900;letter-spacing:-.04em;line-height:1;font-size:clamp(2.4rem,6vw,4rem);margin:.4em 0 .3em;color:#fff}
.blog-hero p{color:var(--on-dark-soft);font-size:1.15rem;max-width:54ch}

/* ---------- Lista de posts ---------- */
.blog-list{background:var(--paper);color:var(--ink);padding:clamp(48px,7vw,84px) 0 clamp(64px,9vw,110px)}
.year-group + .year-group{margin-top:clamp(44px,6vw,72px)}
.year-sep{display:flex;align-items:center;gap:1.1rem;font-weight:900;font-size:1.7rem;letter-spacing:-.02em;color:var(--navy);margin-bottom:1.6rem}
.year-sep span{color:var(--blue)}
.year-sep::after{content:'';flex:1;height:1px;background:rgba(19,46,83,.14)}
.post-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.post-card{
  background:#fff;border:1px solid rgba(19,46,83,.09);border-radius:var(--radius);
  padding:30px 30px 28px;display:flex;flex-direction:column;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .25s;position:relative;overflow:hidden;
}
.post-card::before{content:'';position:absolute;top:0;left:0;height:3px;width:0;background:var(--blue);transition:width .35s var(--ease)}
.post-card:hover{transform:translateY(-5px);box-shadow:0 24px 50px -26px rgba(19,46,83,.35);border-color:transparent}
.post-card:hover::before{width:100%}
.post-card .pc-meta{font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.post-card h2{font-weight:800;font-size:1.4rem;line-height:1.15;letter-spacing:-.02em;color:var(--navy);margin:.5rem 0 .6rem}
.post-card p{color:var(--ink-soft);font-size:1rem;line-height:1.5;flex:1}
.post-card .pc-go{margin-top:1.2rem;font-weight:700;color:var(--blue);display:inline-flex;gap:.4em;align-items:center}

/* ---------- Artigo ---------- */
.article-wrap{background:#fff;color:var(--ink)}
.article{max-width:740px;margin-inline:auto;padding:130px var(--pad) clamp(56px,8vw,90px)}
.article .back{display:inline-flex;gap:.4em;align-items:center;font-weight:600;color:var(--blue);margin-bottom:1.6rem}
.article .a-meta{font-size:.86rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.article h1{font-weight:900;letter-spacing:-.035em;line-height:1.04;font-size:clamp(2.1rem,5.2vw,3.2rem);color:var(--navy);margin:.4em 0 .5em}
.article .a-tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.4rem}
.article .a-tags span{font-size:.78rem;font-weight:600;color:var(--ink-soft);background:rgba(0,125,192,.08);border:1px solid rgba(0,125,192,.18);padding:.3em .8em;border-radius:99px}

.prose{font-size:1.14rem;line-height:1.72;color:#27384f}
.prose > * + *{margin-top:1.3em}
.prose h2{font-weight:800;font-size:1.7rem;letter-spacing:-.02em;color:var(--navy);margin-top:2.2em;line-height:1.2}
.prose h3{font-weight:700;font-size:1.3rem;color:var(--navy);margin-top:1.8em}
.prose strong{color:var(--navy);font-weight:700}
.prose a{color:var(--blue);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.prose a:hover{color:var(--blue-deep)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin-top:.5em}
.prose ul li::marker{color:var(--blue)}
.prose blockquote{border-left:4px solid var(--blue);padding-left:1.2rem;font-style:italic;color:var(--navy);font-weight:500}

/* CTA ao fim do artigo */
.article-cta{margin-top:3rem;background:var(--navy-deep);color:#fff;border-radius:14px;padding:38px 36px;text-align:center;position:relative;overflow:hidden}
.article-cta::after{content:'';position:absolute;right:-60px;bottom:-60px;width:240px;height:240px;
  background-image:var(--chevron-blue);background-size:contain;background-repeat:no-repeat;opacity:.08}
.article-cta h3{font-weight:900;font-size:1.5rem;letter-spacing:-.02em;position:relative;z-index:1}
.article-cta p{color:var(--on-dark-soft);margin:.5rem auto 1.4rem;max-width:42ch;position:relative;z-index:1}
.article-cta .btn{position:relative;z-index:1}

@media (max-width:680px){
  .post-cards{grid-template-columns:1fr}
}