/* ============ blog.css ============ */
.blog-hero { background: var(--cream,#f8f6f0); padding: 3.5rem 0 2rem; text-align:center; }
.blog-hero h1 { font-size:2.2rem; margin:0 0 .75rem; }
.blog-hero p { font-size:1.05rem; color:#5C5F66; max-width:640px; margin:0 auto; }
.blog-list { padding:2.5rem 0 4rem; background:var(--cream,#f8f6f0); }
.blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.75rem; }
.blog-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 6px 24px rgba(0,0,0,.07); display:flex; flex-direction:column; transition:transform .15s,box-shadow .15s; }
.blog-card:hover { transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,.1); }
.blog-card-cover { display:block; aspect-ratio:16/9; overflow:hidden; }
.blog-card-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.blog-card-body { padding:1.25rem; display:flex; flex-direction:column; flex:1; }
.blog-card-date { font-size:.8rem; color:#8A8D94; margin:0 0 .4rem; }
.blog-card-body h2 { font-size:1.15rem; margin:0 0 .5rem; line-height:1.35; }
.blog-card-body h2 a { color:inherit; text-decoration:none; }
.blog-card-body h2 a:hover { color:var(--orange,#F47C32); }
.blog-card-body p { font-size:.9rem; color:#5C5F66; margin:0 0 1rem; flex:1; }
.blog-card-link { color:var(--orange,#F47C32); font-weight:700; font-size:.88rem; text-decoration:none; }
.blog-card-link:hover { text-decoration:underline; }
/* pagina articol */
.article-wrap { background:#fff; padding:2.5rem 0 4rem; }
.article-container { max-width:800px; margin:0 auto; padding:0 1rem; }
.article-title { font-size:2rem; line-height:1.2; margin:0 0 1.25rem; }
.article-hero-img { width:100%; height:auto; border-radius:14px; margin:0 0 1rem; }
.article-date { color:#8A8D94; font-size:.9rem; margin:0 0 .2rem; }
.article-author { color:#8A8D94; font-size:.9rem; margin:0 0 1.75rem; }
.article-body { line-height:1.75; color:#2A2C32; }
.article-body h2 { font-size:1.5rem; margin:2rem 0 .8rem; }
.article-body h3 { font-size:1.2rem; margin:1.5rem 0 .5rem; }
.article-body p { margin:0 0 1.1rem; }
.article-body ul, .article-body ol { margin:0 0 1.1rem; padding-left:1.4rem; }
.article-body li { margin-bottom:.5rem; }
.article-body strong { color:#1f2328; }
.article-body code { background:#f3f4f6; padding:.1rem .35rem; border-radius:5px; font-size:.92em; }
@media (max-width:600px){ .blog-grid{grid-template-columns:1fr;} .blog-hero h1{font-size:1.8rem;} .article-title{font-size:1.6rem;} }