/* Blog public — lizibilitate + brand, peste variabilele temei (coral). */
.bl { background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased; }
.bl * { box-sizing:border-box; }
.bl-display { font-family:"Space Grotesk",system-ui,sans-serif; letter-spacing:-.02em; }
.bl-wrap { max-width:720px; margin:0 auto; padding:0 22px; }

/* header / footer */
.bl-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; max-width:980px; margin:0 auto; }
.bl-brand { display:flex; align-items:center; gap:9px; font-weight:600; font-size:1.2rem; text-decoration:none; color:var(--text); }
.bl-brand i { color:var(--accent); }
.bl-brand em { font-style:normal; color:var(--accent); }
.bl-tld { color:var(--muted); font-weight:500; }
.bl-btn { display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; font-size:.92rem; padding:9px 16px; border-radius:8px; background:var(--accent); color:#fff; }
.bl-btn:hover { background:var(--accent-2); }
.bl-footer { border-top:1px solid var(--border); margin-top:60px; padding:26px 22px 48px; color:var(--muted); font-size:.88rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; max-width:980px; margin-left:auto; margin-right:auto; }
.bl-footer a { color:var(--muted); text-decoration:none; margin-left:16px; }
.bl-footer a:hover { color:var(--text); }

/* index */
.bl-head { padding:46px 0 8px; }
.bl-kicker { font-family:ui-monospace,Menlo,monospace; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.bl-h1 { font-size:clamp(2.1rem,4.5vw,3rem); font-weight:600; margin:0 0 12px; }
.bl-intro { color:var(--muted); font-size:1.1rem; margin:0 0 18px; }
.bl-list { padding:20px 0 10px; }
.bl-card { display:block; text-decoration:none; color:inherit; padding:26px 0; border-top:1px solid var(--border); }
.bl-card:hover h2 { color:var(--accent); }
.bl-card h2 { font-size:1.4rem; font-weight:600; margin:0 0 8px; transition:color .12s ease; }
.bl-card p { color:var(--muted); margin:0 0 10px; font-size:1rem; }
.bl-meta { font-size:.82rem; color:var(--muted); display:flex; gap:14px; }

/* article */
.bl-article { padding:40px 0 10px; }
.bl-back { display:inline-flex; align-items:center; gap:6px; color:var(--muted); text-decoration:none; font-size:.9rem; margin-bottom:24px; }
.bl-back:hover { color:var(--text); }
.bl-article h1 { font-size:clamp(2rem,4.5vw,2.8rem); font-weight:600; line-height:1.12; margin:0 0 14px; }
.bl-article .bl-meta { margin-bottom:34px; }
.bl-body { font-size:1.09rem; }
.bl-body > *:first-child { margin-top:0; }
.bl-body h2 { font-family:"Space Grotesk",system-ui,sans-serif; font-size:1.6rem; font-weight:600; margin:42px 0 12px; letter-spacing:-.01em; }
.bl-body h3 { font-size:1.25rem; font-weight:600; margin:30px 0 10px; }
.bl-body p { margin:0 0 18px; }
.bl-body ul, .bl-body ol { margin:0 0 18px; padding-left:24px; }
.bl-body li { margin:6px 0; }
.bl-body a { color:var(--accent); }
.bl-body blockquote { margin:24px 0; padding:6px 18px; border-left:3px solid var(--accent); color:var(--muted); font-style:italic; }
.bl-body code { font-family:ui-monospace,Menlo,monospace; background:var(--surface-2); padding:2px 6px; border-radius:5px; font-size:.92em; }
.bl-body pre { background:var(--surface-2); padding:16px; border-radius:10px; overflow-x:auto; margin:0 0 18px; }
.bl-body pre code { background:none; padding:0; }
.bl-body img { max-width:100%; border-radius:10px; }
.bl-body hr { border:0; border-top:1px solid var(--border); margin:34px 0; }
.bl-body table { width:100%; border-collapse:collapse; margin:0 0 18px; font-size:.96rem; }
.bl-body th, .bl-body td { border:1px solid var(--border); padding:8px 10px; text-align:left; }

/* end CTA */
.bl-cta { margin:48px 0 0; padding:32px; background:var(--surface); border:1px solid var(--border); border-radius:14px; text-align:center; }
.bl-cta h3 { font-size:1.35rem; font-weight:600; margin:0 0 8px; }
.bl-cta p { color:var(--muted); margin:0 0 18px; }

@media (max-width:560px) { .bl-footer { flex-direction:column; } .bl-footer a { margin:0 16px 0 0; } }