/* ── Blog ──────────────────────────────────────────────────────────────────
   Logical properties throughout so the Arabic pages mirror correctly. */

.bl-hero { background: #fffaf3; padding-block: 56px 40px; border-bottom: 1px solid #efe6d6; }
.bl-hero h1 { font-size: 38px; max-width: 760px; margin: 10px 0 12px; font-weight: 800; }
.bl-hero p { max-width: 640px; font-size: 16px; line-height: 1.6; color: #4e607e; }

.bl-list { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 40px 64px; }
.bl-card { display: flex; flex-direction: column; padding: 24px; gap: 12px; }
.bl-card h2 { font-size: 20px; line-height: 1.3; font-weight: 800; margin: 0; }
.bl-card h2 a:hover { color: #1855e9; }
.bl-card p { font-size: 14.5px; line-height: 1.6; color: #4e607e; flex: 1; margin: 0; }
.bl-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: #64738d; }
.bl-more { font-size: 14px; font-weight: 700; color: #1855e9; }

.bl-empty { padding-block: 70px; text-align: center; }
.bl-empty p { color: #4e607e; margin-bottom: 18px; }

.bl-pager { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 56px; }

.bl-article { padding-block: 40px 56px; }
.bl-article-head { max-width: 760px; margin-inline: auto; }
.bl-crumbs { font-size: 13px; color: #64738d; margin-bottom: 14px; }
.bl-crumbs a { color: #1855e9; font-weight: 600; }
.bl-article-head h1 { font-size: 36px; margin: 0 0 14px; font-weight: 800; }
.bl-lead { font-size: 17px; line-height: 1.65; color: #4e607e; margin-bottom: 16px; }

.bl-layout { max-width: 760px; margin: 28px auto 0; }
.bl-toc { margin-bottom: 28px; padding: 18px 22px; border: 1px solid #e4e9f3; border-radius: 16px; background: #f6f8ff; }
.bl-toc strong { display: block; margin-bottom: 8px; font-size: 14px; }
.bl-toc ol { margin: 0; padding-inline-start: 1.2rem; list-style: decimal; }
.bl-toc li { margin-bottom: 4px; font-size: 14.5px; }
.bl-toc a { color: #1855e9; }
.bl-toc a:hover { text-decoration: underline; }

/* The article body reuses .legal-prose for headings, lists and tables; these
   add what long articles need on top of it. */
.bl-body { font-size: 16.5px; }
.bl-body h2, .bl-body h3 { scroll-margin-top: 90px; }
.bl-body blockquote {
  margin: 1.25rem 0; padding: 0.25rem 1.1rem;
  border-inline-start: 4px solid #1855e9; color: #4e607e;
}
.bl-body ol { margin-bottom: 1rem; padding-inline-start: 1.25rem; list-style: decimal; }
.bl-body code { padding: 1px 6px; border-radius: 6px; background: #f1f4fb; font-size: 0.92em; }
.bl-body pre { margin: 1rem 0; padding: 14px 16px; border-radius: 12px; background: #0f1b33; color: #e8eefc; overflow-x: auto; direction: ltr; text-align: left; }
.bl-body pre code { padding: 0; background: none; color: inherit; }
.bl-body hr { margin: 2rem 0; border: 0; border-top: 1px solid #e4e9f3; }

.bl-faq { margin-top: 40px; }
.bl-faq h2 { font-size: 22px; font-weight: 800; margin-bottom: 14px; }
.bl-faq details { border: 1px solid #e4e9f3; border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; background: #fff; }
.bl-faq summary { cursor: pointer; font-weight: 700; }
.bl-faq details p { margin: 10px 0 0; color: #4e607e; line-height: 1.65; }

.bl-cta { margin-top: 44px; padding: 28px; border-radius: 19px; background: #f6f8ff; border: 1px solid #dce4f6; }
.bl-cta h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; }
.bl-cta p { color: #4e607e; margin: 0 0 16px; }

.bl-related { max-width: 1200px; margin-inline: auto; padding-inline: 30px; padding-bottom: 64px; }
.bl-related > h2 { font-size: 22px; font-weight: 800; margin-bottom: 16px; }
.bl-related .bl-list { padding-block: 0; }

[dir="rtl"] .bl-hero h1, [dir="rtl"] .bl-article-head h1, [dir="rtl"] .bl-card h2 { letter-spacing: 0; }

@media (max-width: 960px) { .bl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .bl-list { grid-template-columns: 1fr; }
  .bl-hero h1, .bl-article-head h1 { font-size: 28px; }
  .bl-pager { flex-direction: column; }
}

/* Cover pictures */
.bl-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: #eef2fb; }
.bl-card-media { display: block; margin: -24px -24px 4px; overflow: hidden; border-radius: 19px 19px 0 0; }
.bl-hero-cover { max-width: 760px; margin: 22px auto 0; overflow: hidden; border-radius: 19px; border: 1px solid #e4e9f3; }