/* SS Coworkings - Blog. Reaproveita tokens do vendas.css (navy/teal, Fraunces+Manrope).
   Foco: leitura confortavel do artigo e cards de listagem on-brand. */

/* ---------- Listagem ---------- */
.bl-hero{padding-top:2.4rem;padding-bottom:1.2rem}
.bl-list-wrap{max-width:1080px}
.bl-cat-title{margin:2.2rem 0 1.1rem}
.bl-cat-title:first-child{margin-top:0}
.bl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1.1rem}
.bl-card{display:flex;flex-direction:column;gap:.5rem;background:#fff;border:1px solid var(--line,#E2E7EE);border-radius:14px;padding:1.2rem 1.25rem;text-decoration:none;transition:transform .15s,box-shadow .2s,border-color .15s}
.bl-card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -24px rgba(14,26,46,.32);border-color:#cdd6e0}
.bl-card-title{font-family:var(--disp,'Fraunces',serif);font-size:1.12rem;line-height:1.25;color:var(--ink,#0E1A2E);font-weight:600}
.bl-card-resumo{font-size:.9rem;color:var(--text,#3A4658);line-height:1.5;flex:1}
.bl-card-data{font-size:.78rem;color:var(--muted,#6C7A8D);font-weight:600;letter-spacing:.02em}
.bl-rel-cat{display:inline-block;align-self:flex-start;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d,#1F7E74);background:rgba(45,168,155,.1);padding:.2rem .55rem;border-radius:999px}

/* ---------- Artigo ---------- */
.bl-article{padding:2rem 0 1rem}
.bl-wrap{max-width:760px}
.bl-head{margin:1.1rem 0 1.6rem}
.bl-cat{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-d,#1F7E74);background:rgba(45,168,155,.1);padding:.25rem .6rem;border-radius:999px;margin-bottom:.8rem}
.bl-title{font-family:var(--disp,'Fraunces',serif);font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.015em;color:var(--ink,#0E1A2E);font-weight:600;margin:0 0 .7rem}
.bl-meta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;font-size:.85rem;color:var(--muted,#6C7A8D)}

.bl-body{font-size:1.075rem;line-height:1.75;color:var(--text,#2A3447)}
.bl-lead{font-size:1.2rem;line-height:1.6;color:var(--ink,#0E1A2E);font-weight:500;margin:0 0 1.4rem}
.bl-body h2{font-family:var(--disp,'Fraunces',serif);font-size:1.5rem;line-height:1.2;color:var(--ink,#0E1A2E);font-weight:600;margin:2rem 0 .8rem}
.bl-body p{margin:0 0 1.05rem}
.bl-body a{color:var(--teal-d,#1F7E74);text-decoration:underline;text-underline-offset:2px}
.bl-body a:hover{color:var(--navy,#1B2E4A)}
.bl-body strong{color:var(--ink,#0E1A2E);font-weight:700}
.bl-list{margin:0 0 1.2rem;padding-left:1.3rem;display:flex;flex-direction:column;gap:.5rem}
.bl-list li{line-height:1.6}
.bl-body .v-faq-item{margin:.6rem 0}

/* CTA dentro do artigo */
.bl-cta{margin:2.4rem 0 1.4rem;background:linear-gradient(135deg,var(--navy,#1B2E4A),#16263f);color:#fff;border-radius:16px;padding:1.8rem 1.7rem}
.bl-cta h2{font-family:var(--disp,'Fraunces',serif);color:#fff;font-size:1.4rem;font-weight:600;margin:0 0 .55rem;line-height:1.2}
.bl-cta p{color:rgba(255,255,255,.86);margin:0 0 1.1rem;line-height:1.6}
.bl-cta .v-btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.bl-cta .v-btn-ghost:hover{background:rgba(255,255,255,.1);border-color:#fff}

/* Relacionados */
.bl-rel{margin-top:2.4rem;border-top:1px solid var(--line,#E2E7EE);padding-top:1.6rem}
.bl-rel h2{font-family:var(--disp,'Fraunces',serif);font-size:1.3rem;color:var(--ink,#0E1A2E);font-weight:600;margin:0 0 1.1rem}
.bl-rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
.bl-rel-card{display:flex;flex-direction:column;gap:.45rem;background:#fff;border:1px solid var(--line,#E2E7EE);border-radius:12px;padding:1rem 1.05rem;text-decoration:none;transition:transform .15s,box-shadow .2s,border-color .15s}
.bl-rel-card:hover{transform:translateY(-2px);box-shadow:0 16px 34px -22px rgba(14,26,46,.3);border-color:#cdd6e0}
.bl-rel-card strong{font-family:var(--disp,'Fraunces',serif);font-size:1rem;line-height:1.25;color:var(--ink,#0E1A2E);font-weight:600}
.bl-rel-resumo{font-size:.84rem;color:var(--text,#3A4658);line-height:1.45}

@media(max-width:600px){
  .bl-article{padding-top:1.2rem}
  .bl-body{font-size:1.03rem}
  .bl-lead{font-size:1.1rem}
}