@font-face {
  font-family: 'JameelNooriNastaliq';
  src: url('../fonts/jameel-noori-nastaliq.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400;500;600;700&display=swap');

.blog-urdu-page,
.blog-urdu-page *:not(.bi):not([class*="bi-"]) {
  font-family: 'JameelNooriNastaliq','Noto Nastaliq Urdu',serif !important;
  direction: rtl; unicode-bidi: embed;
}
.blog-hero {
  background: linear-gradient(135deg,#1a4fa0 0%,#0d3278 100%);
  color:#fff; padding:4rem 0 3rem; text-align:center; direction:rtl;
}
.blog-hero h1 { font-size:2.8rem; font-weight:700; margin-bottom:.5rem; }
.blog-hero p  { font-size:1.15rem; opacity:.85; }
.blog-card {
  border-radius:14px; overflow:hidden; box-shadow:0 3px 16px rgba(0,0,0,.08);
  transition:transform .2s,box-shadow .2s; background:#fff;
  direction:rtl; text-align:right; height:100%;
}
.blog-card:hover { transform:translateY(-4px); box-shadow:0 8px 30px rgba(26,79,160,.15); }
.blog-card-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block; }
.blog-card-img-placeholder {
  width:100%; aspect-ratio:16/9;
  background:linear-gradient(135deg,#e8edf8,#d0d9f0);
  display:flex; align-items:center; justify-content:center;
  font-size:3rem; color:#1a4fa0; opacity:.4;
}
.blog-card-body { padding:1.25rem; }
.blog-cat-badge {
  display:inline-block; background:#f0f4ff; color:#1a4fa0;
  font-size:.78rem; padding:.25rem .7rem; border-radius:20px;
  font-weight:600; margin-bottom:.6rem;
}
.blog-card-title {
  font-size:1.2rem; font-weight:700; color:#1f2937;
  margin-bottom:.5rem; line-height:1.8;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-card-excerpt {
  font-size:.9rem; color:#6b7280; line-height:2;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.blog-meta { font-size:.78rem; color:#9ca3af; margin-top:.75rem; }
.blog-meta span { margin-left:.6rem; }
.blog-read-more {
  display:inline-block; margin-top:.75rem; color:#1a4fa0;
  font-weight:700; font-size:.9rem; text-decoration:none;
}
.blog-read-more:hover { text-decoration:underline; }
.blog-post-title { font-size:2.2rem; font-weight:800; line-height:1.7; color:#1f2937; }
.blog-post-body {
  font-size:1.08rem; line-height:2.4; color:#374151;
  direction:rtl; text-align:right;
}
.blog-post-body p { margin-bottom:1.25rem; }
.blog-post-body h2,.blog-post-body h3 { font-weight:700; margin-top:2rem; color:#1a4fa0; }
.blog-post-body ul,.blog-post-body ol { padding-right:1.5rem; padding-left:0; }
.blog-post-body img { max-width:100%; border-radius:10px; margin:1rem 0; }
.blog-post-body blockquote {
  border-right:4px solid #1a4fa0; border-left:none;
  padding:1rem 1.5rem; background:#f0f4ff;
  border-radius:0 8px 8px 0; margin:1.5rem 0;
}
.blog-featured-img { width:100%; border-radius:12px; object-fit:cover; max-height:480px; }
.blog-tag {
  display:inline-block; background:#f3f4f6; color:#374151;
  padding:.3rem .75rem; border-radius:20px; font-size:.8rem;
  margin:.2rem; text-decoration:none;
}
.blog-tag:hover { background:#1a4fa0; color:#fff; }
.blog-comment-card {
  background:#f8f9ff; border-radius:10px; padding:1rem 1.25rem;
  margin-bottom:1rem; border:1px solid #e8edf8;
  direction:rtl; text-align:right;
}
.blog-comment-name { font-weight:700; color:#1a4fa0; }
.blog-comment-date { font-size:.75rem; color:#9ca3af; }
.blog-comment-text { font-size:.92rem; color:#374151; line-height:2; margin-top:.4rem; }
.blog-comment-form { background:#f8f9ff; border-radius:12px; padding:1.5rem; direction:rtl; }
.blog-comment-form .form-control { text-align:right; direction:rtl; }
.blog-sidebar { direction:rtl; text-align:right; }
.blog-sidebar-title {
  font-size:1rem; font-weight:700; color:#1f2937;
  padding-bottom:.5rem; border-bottom:2px solid #1a4fa0; margin-bottom:1rem;
}
.blog-recent-item {
  display:flex; gap:.75rem; align-items:flex-start;
  padding:.6rem 0; border-bottom:1px solid #f3f4f6;
  text-decoration:none; flex-direction:row-reverse;
}
.blog-recent-img { width:60px; height:60px; border-radius:8px; object-fit:cover; flex-shrink:0; }
.blog-recent-title { font-size:.85rem; font-weight:600; color:#1f2937; line-height:1.7; }
.blog-recent-date  { font-size:.72rem; color:#9ca3af; margin-top:.2rem; }
.blog-filter-pill {
  padding:.4rem 1rem; border-radius:50px; font-size:.85rem;
  font-weight:600; border:2px solid #e5e7eb; background:#fff;
  color:#6b7280; cursor:pointer; text-decoration:none; display:inline-block; transition:.15s;
}
.blog-filter-pill:hover,.blog-filter-pill.active { border-color:#1a4fa0; color:#1a4fa0; background:#f0f4ff; }
.blog-views { font-size:.75rem; color:#9ca3af; }
.blog-views i { color:#1a4fa0; }