/* ============ Psilogia · Blog (artigo + listagem) ============ */
/* tokens, cabeçalho, rodapé e tema vêm de ../assets/site.css */

img{display:block}

/* layout */
.wrap{max-width:1080px;margin:0 auto;padding:clamp(28px,4vw,56px) clamp(18px,4vw,34px)}
.article{max-width:740px;margin:0 auto;padding:clamp(24px,4vw,46px) clamp(18px,4vw,28px) 40px}

/* cabeçalho do artigo */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--primary);background:var(--primary-soft);border-radius:99px;padding:6px 13px}
.breadcrumb{font-size:13.5px;color:var(--text-3);margin:0 0 16px}
.breadcrumb a{color:var(--text-3);text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}
h1.title{font-family:'Spectral',serif;font-weight:500;font-size:clamp(30px,4.6vw,48px);line-height:1.08;letter-spacing:-.02em;margin:16px 0 14px;color:var(--text)}
.post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;color:var(--text-3);font-size:14px;margin:0 0 22px}
.post-meta .dot{width:3px;height:3px;border-radius:99px;background:var(--text-3);display:inline-block}
.hero{height:clamp(180px,32vw,280px);border-radius:20px;margin:6px 0 32px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border)}
.hero svg{width:76px;height:76px}

/* texto */
.prose{font-size:17px;color:var(--text-2);line-height:1.75}
.prose p{margin:0 0 18px}
.prose h2{font-family:'Spectral',serif;font-weight:600;color:var(--text);font-size:clamp(22px,3vw,29px);line-height:1.2;letter-spacing:-.01em;margin:42px 0 12px}
.prose h3{color:var(--text);font-size:19px;font-weight:700;margin:26px 0 8px}
.prose ul{padding-left:22px;margin:0 0 18px}
.prose li{margin:8px 0}
.prose strong{color:var(--text)}
.prose blockquote{margin:24px 0;padding:14px 22px;border-left:3px solid var(--primary);background:var(--surface);border-radius:0 12px 12px 0;color:var(--text-2);font-style:italic}
.prose a{text-decoration:underline}

/* CTA de marca (propaganda discreta) */
.brand-cta{margin:46px 0 0;background:linear-gradient(135deg, var(--primary-soft) 0%, var(--warm-soft) 100%);border:1px solid var(--border);border-radius:18px;padding:24px 26px}
.brand-cta h3{font-family:'Spectral',serif;font-weight:600;font-size:20px;margin:0 0 8px;color:var(--text)}
.brand-cta p{font-size:15px;color:var(--text-2);margin:0 0 14px}
.brand-cta a.btn{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:var(--primary-ink);text-decoration:none;font-weight:600;font-size:15px;padding:11px 20px;border-radius:11px}
.brand-cta a.btn:hover{background:var(--primary-2)}

/* listagem */
.blog-head{max-width:740px;margin:0 auto;text-align:center}
.blog-head h1{font-family:'Spectral',serif;font-weight:500;font-size:clamp(34px,5vw,54px);line-height:1.06;letter-spacing:-.02em;margin:12px 0 12px;color:var(--text)}
.blog-head p{font-size:18px;color:var(--text-2);max-width:560px;margin:0 auto;line-height:1.6}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:44px}
.post-card{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:18px;overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease}
.post-card:hover{transform:translateY(-5px)}
.post-card .thumb{height:148px;display:flex;align-items:center;justify-content:center;border-bottom:1px solid var(--border)}
.post-card .thumb svg{width:50px;height:50px}
.post-card .body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.post-card .cat{font-size:12.5px;font-weight:600;color:var(--primary)}
.post-card h2{font-family:'Spectral',serif;font-weight:600;font-size:20px;line-height:1.22;margin:0;color:var(--text)}
.post-card p{font-size:14.5px;color:var(--text-2);margin:0;line-height:1.55}
.post-card .meta{margin-top:auto;font-size:13px;color:var(--text-3);padding-top:8px}