/* ── وبلاگ (D-654) ───────────────────────────────────────────
 *
 * فهرست، دسته، برچسب، جست‌وجو و نوشته. همه‌ی رنگ‌ها توکن‌اند (`riqx.css`)
 * تا حالتِ تاریک را بگیرند. مقیاسِ متن: h1 = 1.9rem · h2 نوشته = 1.35rem
 * · متنِ نوشته = 1.02rem با فاصله‌ی خطِ 2.1 — متنِ بلندِ فارسی با فاصله‌ی
 * کمتر خسته می‌کند. پهنای ستونِ خواندن 760px (حدودِ ۷۵ نویسه در خط).
 */

.bl-page { max-width: 1120px; margin: 0 auto; padding: 44px 20px 72px; }
.bl-read { max-width: 820px; }

/* ── رنگِ دسته (D-658) — هر کارت و دکمه با `bl-tone-…` ── */
.bl-page, .bl-tone-violet { --tone: #5B4BE8; --tone-2: #8C7CF7; --tone-wash: rgba(91, 75, 232, .12); }
.bl-tone-blue { --tone: #2563EB; --tone-2: #60A5FA; --tone-wash: rgba(37, 99, 235, .12); }
.bl-tone-cyan { --tone: #0E8FB3; --tone-2: #38C3E4; --tone-wash: rgba(14, 143, 179, .13); }
.bl-tone-green { --tone: #16875B; --tone-2: #34C38A; --tone-wash: rgba(22, 135, 91, .13); }
.bl-tone-amber { --tone: #C2700F; --tone-2: #F2A640; --tone-wash: rgba(194, 112, 15, .14); }
.bl-tone-rose { --tone: #D23A64; --tone-2: #F27A9B; --tone-wash: rgba(210, 58, 100, .12); }

/* ── سرصفحه‌ی رنگی ── */
.bl-hero { position: relative; overflow: hidden; margin-bottom: 22px; padding: 44px 40px 36px;
  border-radius: 28px; color: #fff; isolation: isolate;
  background: linear-gradient(135deg, var(--tone) 0%, var(--tone-2) 100%);
  box-shadow: 0 30px 60px -36px var(--tone); }
.bl-hero-art { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; z-index: -1; }
.bl-hero-in { max-width: 760px; }
/* سرصفحه‌ی تصویری (D-699): لپ‌تاپِ کلاس سمتِ چپ، متن و جست‌وجو روی بخشِ
   خالیِ راست. تصویر «contain» است نه «cover» تا لپ‌تاپ بریده نشود؛ لبه‌ی
   راستش محو می‌شود تا با گرادیانِ خودِ سرصفحه یکی شود. در پهنای کم، متن
   جا ندارد که کنارِ تصویر بنشیند، پس تصویر کنار می‌رود. */
.bl-hero--art { min-height: 340px; display: flex; align-items: center; }
.bl-hero--art .bl-hero-in { position: relative; max-width: min(760px, 52%); }
.bl-hero-img { position: absolute; inset-block: 0; left: 0; z-index: -1; height: 100%; width: auto;
  max-width: 72%; object-fit: contain; object-position: left center; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, #000 74%, transparent);
  mask-image: linear-gradient(to right, #000 74%, transparent); }
@media (max-width: 980px) {
  .bl-hero--art { min-height: 0; }
  .bl-hero--art .bl-hero-in { max-width: none; }
  .bl-hero-img { display: none; }
}
.bl-kicker { display: inline-block; font-size: .8rem; font-weight: 700; color: #fff;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .28);
  padding: 4px 12px; border-radius: 999px; margin-bottom: 14px; }
.bl-crumb { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: .85rem;
  color: var(--ink-faint); margin-bottom: 12px; }
.bl-crumb a { color: var(--accent-ink); text-decoration: none; }
.bl-crumb a:hover { text-decoration: underline; }
.bl-hero .bl-crumb, .bl-hero .bl-crumb a { color: rgba(255, 255, 255, .88); }
.bl-hero-title { display: flex; align-items: center; gap: 14px; }
.bl-hero-ico { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 18px;
  margin-bottom: 10px; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3); }
.bl-hero h1 { margin: 0 0 10px; font-size: 2rem; line-height: 1.55; color: #fff; }
.bl-post-hd h1 { margin: 0 0 10px; font-size: 1.9rem; line-height: 1.55; color: var(--ink); }
.bl-lede { margin: 0; font-size: 1rem; line-height: 2; color: var(--ink-soft); }
.bl-hero .bl-lede { color: rgba(255, 255, 255, .9); }
.bl-search { display: flex; align-items: center; gap: 10px; margin-top: 22px; max-width: 560px;
  padding-block: 6px; padding-inline: 16px 6px; border-radius: 999px;
  background: #fff; color: #7B7D9C; box-shadow: 0 16px 34px -18px rgba(20, 21, 49, .6); }
/* width: 0 — بی آن پهنای پیش‌فرضِ کادر (size=20، حدودِ 200px) کمینه‌ی پهنای صفحه
   می‌شد و در 390px صفحه 417px می‌شد و از چپ بیرون می‌زد (D-661) */
.bl-search input { flex: 1; width: 0; border: 0; outline: 0; background: none; padding: 9px 0; min-width: 0;
  font: inherit; font-size: .95rem; color: #191A32; }
.bl-search button { border: 0; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 700;
  padding: 9px 20px; border-radius: 999px; color: #fff; background: var(--tone); }
.bl-search button:hover { filter: brightness(1.08); }
.bl-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; list-style: none; padding: 0; margin: 20px 0 0;
  font-size: .88rem; color: rgba(255, 255, 255, .88); }
.bl-stats b { font-size: 1.15rem; color: #fff; margin-inline-end: 4px; }
.bl-stats a { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.bl-found { font-size: .9rem; color: var(--ink-soft); margin: 0 0 20px; }
.bl-found a { color: var(--accent-ink); }

/* ── دکمه‌های دسته ── */
.bl-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.bl-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; font-size: .88rem;
  border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.bl-chip svg { color: var(--tone); }
.bl-chip small { font-size: .74rem; color: var(--ink-faint); background: var(--surface-2);
  padding: 0 7px; border-radius: 999px; }
.bl-chip:hover { border-color: var(--tone); color: var(--tone); }
.bl-chip.is-on { background: var(--tone); border-color: var(--tone); color: #fff; }
.bl-chip.is-on svg { color: #fff; }
.bl-chip.is-on small { color: #fff; background: rgba(255, 255, 255, .22); }

/* ── کارت‌ها ── */
.bl-cat { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 700;
  color: var(--tone); background: var(--tone-wash); padding: 3px 10px; border-radius: 999px; align-self: flex-start; }
.bl-meta { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; font-size: .82rem; color: var(--ink-faint); }
.bl-meta svg { opacity: .8; }
.bl-dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; margin: 0 4px; opacity: .6; }
.bl-badge { display: inline-block; font-size: .74rem; font-weight: 700; color: #fff;
  background: var(--warm); padding: 2px 10px; border-radius: 999px; margin-inline-end: 6px; }

.bl-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; margin-bottom: 28px;
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--r-l);
  overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--shadow-m);
  transition: transform .2s, border-color .2s; }
.bl-featured:hover { transform: translateY(-2px); border-color: var(--tone); }
.bl-featured img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; }
.bl-featured-body { padding: 28px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.bl-featured-body h2 { margin: 4px 0 0; font-size: 1.45rem; line-height: 1.6; color: var(--ink); }
.bl-featured-body p { margin: 0; font-size: .95rem; line-height: 2; color: var(--ink-soft); }

.bl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bl-card { display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--r-m); overflow: hidden;
  text-decoration: none; color: inherit; box-shadow: var(--shadow-s);
  transition: transform .2s, border-color .2s, box-shadow .2s; }
.bl-card:hover { transform: translateY(-4px); border-color: var(--tone); box-shadow: var(--shadow-m); }
.bl-card:hover h2, .bl-card:hover h3 { color: var(--tone); }
.bl-card-img { aspect-ratio: 16 / 9; background: var(--surface-2); overflow: hidden; }
.bl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* کارتِ بی تصویر: نشانه‌ی نوشته روی گرادیانِ رنگِ دسته، با دو دایره‌ی تزیینی */
.bl-card-ph, .bl-featured-ph { position: relative; display: grid; place-items: center; height: 100%;
  color: #fff; overflow: hidden; background: linear-gradient(135deg, var(--tone) 0%, var(--tone-2) 100%); }
.bl-card-ph::before, .bl-featured-ph::before { content: ""; position: absolute; width: 70%; aspect-ratio: 1;
  border-radius: 50%; background: rgba(255, 255, 255, .12); inset-inline-start: -18%; top: -35%; }
.bl-card-ph::after, .bl-featured-ph::after { content: ""; position: absolute; width: 45%; aspect-ratio: 1;
  border-radius: 50%; background: rgba(255, 255, 255, .10); inset-inline-end: -10%; bottom: -30%; }
.bl-card-ph svg, .bl-featured-ph svg { position: relative; z-index: 1; padding: 16px; border-radius: 22px;
  width: 76px; height: 76px; box-sizing: border-box; background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28); transition: transform .3s; }
.bl-card:hover .bl-card-ph svg { transform: scale(1.08) rotate(-4deg); }
.bl-featured-ph { min-height: 260px; }
.bl-featured-ph svg { width: 104px; height: 104px; padding: 22px; }
.bl-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.bl-card-body h2, .bl-card-body h3 { margin: 0; font-size: 1.05rem; line-height: 1.7; color: var(--ink); }
.bl-card-body p { margin: 0; font-size: .88rem; line-height: 1.9; color: var(--ink-soft); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.bl-pager { display: flex; justify-content: center; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-top: 34px; }
.bl-pager-now { min-width: 34px; padding: 6px 10px; border-radius: 10px; text-align: center;
  background: var(--accent); color: var(--on-accent, #fff); font-weight: 700; font-size: .9rem; }
.bl-pager-gap { padding: 0 2px; color: var(--ink-soft); }
.bl-empty { padding: 48px 20px; text-align: center; color: var(--ink-soft); background: var(--surface);
  border: 1px dashed var(--line); border-radius: var(--r-m); }
.bl-rss { margin: 34px 0 0; text-align: center; font-size: .84rem; }
.bl-rss a { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-faint); text-decoration: none; }
.bl-rss a:hover { color: var(--warm); }

/* ── نوشته ── */
.bl-draft { background: var(--warm-wash); color: var(--ink); border-bottom: 1px solid var(--warm);
  padding: 10px 20px; text-align: center; font-size: .88rem; }
.bl-draft a { color: var(--accent-ink); font-weight: 700; margin-inline-start: 8px; }
.bl-post-hd { margin-bottom: 24px; }
.bl-post-cat { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 5px 12px;
  border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--tone); background: var(--tone-wash); }
.bl-post-hd .bl-lede { font-size: 1.05rem; margin-bottom: 14px; }
.bl-post-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; }
.bl-post-meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px;
  border-radius: 50%; background: var(--line); margin-inline-end: 18px; vertical-align: middle; }
.bl-author { color: var(--ink-soft); font-weight: 600; }
.bl-cover { margin: 0 0 28px; }
.bl-cover img { width: 100%; height: auto; border-radius: var(--r-l); display: block; }
.bl-cover figcaption, .bm figcaption { margin-top: 8px; font-size: .82rem; color: var(--ink-faint); text-align: center; }

.bl-toc { margin: 0 0 30px; padding: 16px 20px; border-radius: var(--r-m);
  background: var(--surface); border: 1px solid var(--line-soft); }
.bl-toc summary { cursor: pointer; font-weight: 700; font-size: .95rem; color: var(--ink); }
.bl-toc ol { margin: 12px 0 0; padding-inline-start: 20px; font-size: .9rem; line-height: 2.1; }
.bl-toc a { color: var(--ink-soft); text-decoration: none; }
.bl-toc a:hover { color: var(--accent-ink); }
.bl-toc .lv2 { font-weight: 600; }
.bl-toc .lv3 { margin-inline-start: 16px; list-style: circle; font-size: .86rem; }

/* متنِ نوشته — همه‌ی آنچه `richtext.py` می‌سازد */
.bl-prose { font-size: 1.02rem; line-height: 2.1; color: var(--ink); overflow-wrap: anywhere; }
.bl-prose h2, .bl-prose h3, .bl-prose h4 { color: var(--ink); scroll-margin-top: 90px; }
.bl-prose h2 { margin: 40px 0 12px; font-size: 1.35rem; line-height: 1.7; }
.bl-prose h3 { margin: 30px 0 10px; font-size: 1.14rem; line-height: 1.7; }
.bl-prose h4 { margin: 24px 0 8px; font-size: 1.02rem; }
.bl-prose p { margin: 0 0 16px; }
.bl-prose ul, .bl-prose ol { margin: 0 0 16px; padding-inline-start: 24px; }
.bl-prose li { margin-bottom: 6px; }
.bl-prose a { color: var(--accent-ink); text-underline-offset: 3px; }
.bl-prose strong { font-weight: 700; }
.bl-prose hr { border: 0; border-top: 1px solid var(--line); margin: 34px auto; width: 40%; }
.bl-prose blockquote { margin: 0 0 18px; padding: 12px 20px; border-inline-start: 4px solid var(--accent);
  background: var(--surface); border-radius: 0 12px 12px 0; color: var(--ink-soft); font-size: 1rem; }
.bl-prose blockquote p:last-child { margin-bottom: 0; }
.bl-prose code { direction: ltr; unicode-bidi: isolate; font-size: .86em; padding: 1px 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 6px; }
.bl-prose pre { direction: ltr; text-align: left; background: var(--night); color: var(--on-night);
  border-radius: 12px; padding: 16px 18px; overflow-x: auto; font-size: .85rem; line-height: 1.7; margin: 0 0 18px; }
.bl-prose pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

.tbl-wrap { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line-soft); border-radius: 12px; }
.tbl-wrap table { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.8; }
.tbl-wrap th, .tbl-wrap td { padding: 10px 14px; text-align: start; border-bottom: 1px solid var(--line-soft); }
.tbl-wrap th { background: var(--surface-2); font-weight: 700; color: var(--ink); }
.tbl-wrap tr:last-child td { border-bottom: 0; }

.callout { margin: 0 0 20px; padding: 14px 18px; border-radius: 14px; border: 1px solid;
  font-size: .96rem; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout-t { font-weight: 700; margin: 0 0 6px !important; }
.callout-tip { background: var(--ok-wash); border-color: var(--ok); }
.callout-tip .callout-t { color: var(--ok); }
.callout-warn { background: var(--warm-wash); border-color: var(--warm); }
.callout-warn .callout-t { color: var(--warm); }
.callout-info { background: var(--signal-wash); border-color: var(--signal); }
.callout-info .callout-t { color: var(--signal); }

/* رسانه‌ی درج‌شده — `[[media:…]]` و نشانیِ آپارات و یوتیوب */
.bm { margin: 0 auto 22px; }
.bm img, .bm video { display: block; width: 100%; height: auto; border-radius: 14px; background: var(--surface-2); }
.bm-full { max-width: 100%; }
.bm-medium { max-width: 66%; }
.bm-small { max-width: 40%; }
.bm-ratio { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; }
.bm-ratio iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.bm-embed { max-width: 100%; }
.bm-video video { aspect-ratio: auto; }
.bm-file { margin: 0 0 18px; }
.bm-file a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink); }
.bm-file a:hover { border-color: var(--accent); }
.bm-file-ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px;
  background: var(--live-wash); color: var(--live); font-size: .72rem; font-weight: 800; }
.bm-file-t { flex: 1; font-weight: 600; font-size: .95rem; }
.bm-file-m { font-size: .8rem; color: var(--ink-faint); }
.bm-missing { padding: 10px 14px; border-radius: 10px; background: var(--live-wash); color: var(--live);
  font-size: .88rem; }
.bm-link a { direction: ltr; unicode-bidi: isolate; word-break: break-all; }

.bl-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 30px 0 0; }
.bl-tags a { display: inline-block; padding: 5px 12px; border-radius: 999px; font-size: .84rem;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; }
.bl-tags a:hover { border-color: var(--accent); color: var(--accent-ink); }

.bl-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0;
  padding-top: 20px; border-top: 1px solid var(--line-soft); font-size: .86rem; color: var(--ink-faint); }
.bl-share a, .bl-copy { padding: 6px 14px; border-radius: 999px; font: inherit; font-size: .84rem;
  text-decoration: none; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); }
.bl-share-telegram:hover { border-color: #229ED9; color: #229ED9; }
.bl-share-whatsapp:hover { border-color: #25A35A; color: #25A35A; }
.bl-share-x:hover { border-color: var(--ink); color: var(--ink); }
.bl-share-linkedin:hover { border-color: #0A66C2; color: #0A66C2; }
.bl-copy:hover { border-color: var(--accent); color: var(--accent-ink); }

.bl-related { margin-top: 52px; }
.bl-related h2 { font-size: 1.2rem; margin: 0 0 18px; color: var(--ink); }
.bl-related .bl-grid { grid-template-columns: repeat(3, 1fr); }
.bl-article { min-width: 0; }

@media (max-width: 1024px) {
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .bl-featured { grid-template-columns: 1fr; }
  .bl-featured img { min-height: 0; aspect-ratio: 16 / 9; }
  .bl-related .bl-grid { grid-template-columns: 1fr 1fr; }
  .bm-medium, .bm-small { max-width: 100%; }
}
@media (max-width: 640px) {
  .bl-page { padding: 28px 16px 56px; }
  .bl-grid, .bl-related .bl-grid { grid-template-columns: 1fr; }
  .bl-hero { padding: 28px 20px 24px; border-radius: 22px; }
  .bl-hero h1, .bl-post-hd h1 { font-size: 1.5rem; }
  .bl-hero-ico { width: 44px; height: 44px; border-radius: 14px; }
  .bl-search button { padding: 9px 14px; }
  .bl-featured-body { padding: 20px; }
  .bl-featured-body h2 { font-size: 1.2rem; }
  .bl-prose { font-size: 1rem; line-height: 2; }
}