.blog-wrap { max-width: 1100px; }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 22px; }
.blog-card { background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; }
.blog-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(11,27,43,.1); }
.blog-cover img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.blog-body time { color: var(--muted); font-size: .8rem; }
.blog-body h2 { font-size: 1.15rem; line-height: 1.5; }
.blog-body h2 a { color: var(--text); text-decoration: none; }
.blog-body h2 a:hover { color: var(--gold-dim); }
.blog-body p { color: var(--muted); font-size: .92rem; line-height: 1.8; }
.blog-more { margin-top: auto; color: var(--gold-dim); font-weight: 700; text-decoration: none; font-size: .9rem; }
.blog-pager { display: flex; gap: 8px; justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.blog-pager a { min-width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); background: #fff; }
.blog-pager a.cur, .blog-pager a:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

.post-body { max-width: 760px; margin: 0 auto; font-size: 1.05rem; line-height: 2; color: var(--text); }
.post-body p { margin: 0 0 1.1em; }
.post-body h2 { font-size: 1.5rem; margin: 1.6em 0 .6em; }
.post-body h3 { font-size: 1.25rem; margin: 1.4em 0 .5em; }
.post-body ul { margin: 0 0 1.1em; padding-inline-start: 1.4em; }
.post-body a { color: var(--gold-dim); }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; }
.post-body figure { margin: 1.4em 0; text-align: center; }
.post-cover { width: 100%; margin-bottom: 1.4em; }
.post-back { margin-top: 2em; }

.blog-filters { display:flex; flex-direction:column; gap:10px; margin-bottom:24px; font-size:.92rem; }
.blog-filters strong { margin-inline-end:6px; color:var(--muted); }
.chip { display:inline-block; padding:4px 12px; margin:3px 2px; border:1px solid var(--border); border-radius:20px; background:#fff; color:var(--text); text-decoration:none; font-size:.85rem; transition:.2s; }
.chip em { font-style:normal; color:var(--muted); font-size:.75rem; }
.chip:hover, .chip.on { background:var(--ink); color:#fff; border-color:var(--ink); }
.chip.on em, .chip:hover em { color:#cdd7e0; }
.crumbs { font-size:.85rem; color:var(--muted); margin-bottom:1.2em; }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--gold-dim); }
.toc { background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 20px; margin:0 0 1.6em; font-size:.95rem; line-height:1.9; }
.toc ol { list-style:none; margin:.4em 0 0; padding:0; }
.toc li.l3 { padding-inline-start:1.2em; font-size:.9rem; }
.toc a { color:var(--text); text-decoration:none; }
.toc a:hover { color:var(--gold-dim); }
.post-body h2, .post-body h3 { scroll-margin-top:90px; }
.post-tags { margin-top:1.6em; }
.related { margin-top:2.4em; padding-top:1.4em; border-top:1px solid var(--border); }
.related h2 { font-size:1.2rem; margin:0 0 .8em; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.related-card { display:flex; flex-direction:column; gap:8px; background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; text-decoration:none; color:var(--text); font-weight:700; font-size:.95rem; line-height:1.6; }
.related-card img { width:100%; aspect-ratio:16/9; object-fit:cover; }
.related-card span { padding:0 12px 12px; }
.related-card:not(:has(img)) span { padding-top:12px; }
.related-card:hover { border-color:var(--gold); }
.post-cover { aspect-ratio: 16/9; height: auto; object-fit: cover; border-radius: 10px; }
.blog-cover img, .related-card img { background: #e9edf5; }

/* التعليقات */
.comments { margin-top:2.4em; padding-top:1.2em; border-top:1px solid var(--border); font-size:1rem; line-height:1.8; }
.comments h2 { font-size:1.35rem; margin:0 0 .8em; }
.c-count { display:inline-block; min-width:26px; padding:0 8px; margin-inline-start:6px; border-radius:13px; background:var(--ink); color:#fff; font-size:.8rem; text-align:center; }
.c-list { list-style:none; margin:0 0 1.6em; padding:0; display:flex; flex-direction:column; gap:14px; }
.c-item { display:flex; gap:12px; padding:14px; background:#fff; border:1px solid var(--border); border-radius:12px; }
.c-ava { width:40px; height:40px; flex-shrink:0; border-radius:50%; background:var(--ink); color:var(--gold); display:grid; place-items:center; font-weight:800; }
.c-main { min-width:0; flex:1; }
.c-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; }
.c-head time { color:var(--muted); font-size:.8rem; }
.c-text { margin-top:4px; word-break:break-word; }
.c-reply { margin-top:10px; padding:10px 12px; background:#f6f1e3; border-inline-start:3px solid var(--gold); border-radius:8px; font-size:.95rem; word-break:break-word; }
.c-empty, .c-login { color:var(--muted); }
.c-flash { padding:10px 14px; border-radius:10px; margin:0 0 1em; font-weight:600; }
.c-flash.ok { background:#dff5e7; color:#14532d; }
.c-flash.err { background:#fde4e4; color:#7a1f1f; }
.c-form { background:#fff; border:1px solid var(--border); border-radius:12px; padding:18px; display:flex; flex-direction:column; gap:12px; }
.c-form h3 { margin:0; font-size:1.1rem; }
.c-row { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.c-form input[type=text], .c-form input[type=email], .c-form textarea { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:8px; font:inherit; background:#fff; color:var(--text); }
.c-form textarea { resize:vertical; min-height:110px; }
.c-btn { align-self:flex-start; padding:10px 22px; border:0; border-radius:8px; background:var(--gold); color:var(--ink); font:inherit; font-weight:800; cursor:pointer; }
.c-btn:hover { background:var(--gold-dim); }
.c-form small, .c-as { color:var(--muted); margin:0; }
.c-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
@media (max-width:600px) { .c-row { grid-template-columns:1fr; } }