/* ═══════════════════════════════════════════════════════════════════════════
   وبلاگ — صفحه‌های عمومی. برش ۲۰-ظ۴۰۰، `docs/15-BLOG-SPEC.md` بندِ ۵٫۱.
   ماکاپ: `ui/blog.html` (`ui/blog.css`). فقط صفحه‌های `shop/blog/*` بارش می‌کنند.

   🔴 هر کلاسِ این فایل پیشوندِ `blg-` دارد: نامِ بی‌پیشوند با شیوه‌نامه‌ی ویترین
      برخورد می‌کند (درسِ `.mini`).

   🔴 متنِ مقاله از `BlogHtml::clean()` می‌آید و **هیچ کلاسی ندارد** — پس
      `.blg-body` تگِ لخت را سبک می‌دهد: `h2`، `p`، `table`، `img`، `iframe`.
   ═══════════════════════════════════════════════════════════════════════════ */

.blg{padding-block:var(--s6) var(--s8)}
.blg-narrow{max-width:760px;margin-inline:auto}

.blg-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-size:var(--fs-2);color:var(--fg-subtle);margin-bottom:var(--s4)}
.blg-crumb a{color:var(--fg-muted)}
.blg-crumb a:hover{color:var(--primary-text)}

.blg-h1{font-size:var(--fs-9);line-height:1.4;font-weight:800;margin:0 0 var(--s3);color:var(--fg)}
.blg-lede{font-size:var(--fs-5);line-height:1.9;color:var(--fg-muted);margin:0 0 var(--s5);max-width:64ch}
.blg-h2{font-size:var(--fs-7);font-weight:700;margin:var(--s7) 0 var(--s4);color:var(--fg)}

/* ── دسته‌ها ────────────────────────────────────────────────────────────── */
.blg-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.blg-cat{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);
  border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg);
  box-shadow:var(--sh-sm);color:var(--fg);transition:box-shadow .16s ease,border-color .16s ease}
.blg-cat:hover{box-shadow:var(--sh);border-color:var(--primary-border)}

/* ── فهرستِ مقاله ───────────────────────────────────────────────────────── */
.blg-posts{display:grid;gap:var(--s3);margin:0;padding:0;list-style:none}
.blg-post{display:flex;gap:var(--s4);align-items:flex-start;padding:var(--s4);
  border:1px solid var(--border);border-radius:var(--r);background:var(--bg)}
.blg-thumb{flex:none;width:128px;aspect-ratio:4/3;border-radius:var(--r-sm);
  border:1px solid var(--border)}
.blg-thumb > img{width:100%;height:100%;object-fit:cover;display:block}
.blg-post h3{margin:0 0 var(--s1);font-size:var(--fs-5);line-height:1.7;font-weight:700}
.blg-post h3 a{color:var(--fg)}
.blg-post h3 a:hover{color:var(--primary-text)}
.blg-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:var(--fs-2);color:var(--fg-subtle)}
.blg-meta > .rv{color:var(--success-text);font-weight:600}
.blg-excerpt{margin:var(--s2) 0 0;font-size:var(--fs-3);line-height:1.9;color:var(--fg-muted);
  border-inline-start:3px solid var(--primary-border);padding-inline-start:var(--s3)}

.blg-pager{display:flex;justify-content:center;align-items:center;gap:var(--s2);margin-top:var(--s5)}
.blg-pager > a,.blg-pager > span{min-width:40px;min-height:40px;display:grid;place-items:center;
  padding-inline:var(--s3);border:1px solid var(--border);border-radius:var(--r);
  font-size:var(--fs-3);color:var(--fg-muted);background:var(--bg)}
.blg-pager > a:hover{border-color:var(--primary);color:var(--primary-text)}
.blg-pager > .on{background:var(--primary);border-color:var(--primary);color:var(--on-solid);font-weight:700}

.blg-empty{padding:var(--s7) var(--s5);text-align:center;color:var(--fg-muted);
  border:1px dashed var(--border-strong);border-radius:var(--r-lg)}
.blg-empty > b{display:block;font-size:var(--fs-5);color:var(--fg);margin-bottom:var(--s2)}

/* ── صفحه‌ی مقاله ───────────────────────────────────────────────────────── */
.blg-byline{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s4);font-size:var(--fs-3);
  color:var(--fg-muted);margin:0 0 var(--s5)}
.blg-byline a{color:var(--primary-text);font-weight:600}

.blg-answer{background:var(--primary-subtle);border:1px solid var(--primary-border);
  border-radius:var(--r);padding:var(--s4);color:var(--primary-deep);
  font-size:var(--fs-4);line-height:2;margin:0 0 var(--s5)}
.blg-answer > b{display:block;font-size:var(--fs-2);font-weight:700;margin-bottom:var(--s1)}

.blg-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:var(--s3) var(--s4);margin:0 0 var(--s5)}
.blg-toc > b{font-size:var(--fs-3)}
.blg-toc ol{margin:var(--s2) 0 0;padding-inline-start:var(--s5);font-size:var(--fs-3);line-height:2.1}

.blg-body{font-size:var(--fs-4);line-height:2.1;color:var(--fg)}
.blg-body h2{font-size:var(--fs-6);line-height:1.7;font-weight:700;margin:var(--s6) 0 var(--s3);
  scroll-margin-top:96px}
.blg-body h3{font-size:var(--fs-5);font-weight:700;margin:var(--s5) 0 var(--s2)}
.blg-body h4{font-size:var(--fs-4);font-weight:700;margin:var(--s4) 0 var(--s2)}
.blg-body p{margin:0 0 var(--s4)}
.blg-body ul,.blg-body ol{margin:0 0 var(--s4);padding-inline-start:var(--s5)}
.blg-body li{margin-bottom:var(--s1)}
.blg-body a{color:var(--primary-text);text-decoration:underline;text-underline-offset:3px}
.blg-body blockquote{margin:0 0 var(--s4);padding:var(--s3) var(--s4);
  border-inline-start:3px solid var(--border-strong);background:var(--surface);color:var(--fg-muted)}
.blg-body img,.blg-body video{max-width:100%;height:auto;border-radius:var(--r);display:block;margin:var(--s4) auto}
.blg-body iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r);
  display:block;margin:var(--s4) 0}
.blg-body figure{margin:var(--s4) 0}
.blg-body figcaption{font-size:var(--fs-2);color:var(--fg-subtle);text-align:center;margin-top:var(--s2)}
.blg-body pre{overflow-x:auto;direction:ltr;text-align:left;padding:var(--s3);
  background:var(--surface-2);border-radius:var(--r);font-size:var(--fs-2)}
.blg-body table{width:100%;border-collapse:collapse;font-size:var(--fs-3);line-height:1.8;
  margin:0 0 var(--s4)}
.blg-body th,.blg-body td{border:1px solid var(--border);padding:var(--s2) var(--s3);text-align:start}
.blg-body th{background:var(--surface-2);font-weight:700;font-size:var(--fs-2)}

.blg-box{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--border)}
.blg-box > h2{font-size:var(--fs-6);font-weight:700;margin:0 0 var(--s3)}

.blg-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.blg-prod{display:flex;flex-direction:column;gap:var(--s1);padding:var(--s3);
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--fg)}
.blg-prod > span{font-size:var(--fs-3);font-weight:600;line-height:1.8}
.blg-prod > b{font-size:var(--fs-5);font-weight:800}
.blg-prod > b > small{font-size:var(--fs-1);font-weight:500;color:var(--fg-subtle)}
.blg-prod > i{font-style:normal;font-size:var(--fs-1)}
.blg-prod > i.in{color:var(--success-text)}
.blg-prod > i.out{color:var(--accent-text)}

.blg-faq details{border:1px solid var(--border);border-radius:var(--r);background:var(--surface);
  margin-bottom:var(--s2)}
.blg-faq summary{padding:var(--s3) var(--s4);cursor:pointer;font-size:var(--fs-3);font-weight:600}
.blg-faq details > p{margin:0;padding:0 var(--s4) var(--s3);font-size:var(--fs-3);line-height:2;color:var(--fg-muted)}

.blg-src{margin:0;padding-inline-start:var(--s5);font-size:var(--fs-2);line-height:2;color:var(--fg-muted)}
/* 🔴 منبعِ لاتین در فهرستِ راست‌به‌چپ: جهتِ هر ردیف از متنِ خودش می‌آید، وگرنه نقطه‌ی پایانی سرِ خط می‌نشیند. */
.blg-src > li{unicode-bidi:plaintext}

.blg-people{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3)}
.blg-person{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);
  border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--fg)}
.blg-avatar{flex:none;width:48px;height:48px;border-radius:var(--r-full);overflow:hidden;
  background:var(--primary-light);border:1px solid var(--primary-border);
  display:grid;place-items:center;color:var(--primary-deep)}
.blg-avatar > img{width:100%;height:100%;object-fit:cover}
.blg-person > span > small{display:block;font-size:var(--fs-1);color:var(--fg-subtle)}
.blg-person > span > b{display:block;font-size:var(--fs-4);font-weight:700}
.blg-person > span > em{display:block;font-style:normal;font-size:var(--fs-2);color:var(--fg-muted)}

/* ── صفحه‌ی نویسنده ─────────────────────────────────────────────────────── */
.blg-author{display:flex;gap:var(--s5);align-items:flex-start;margin-bottom:var(--s5)}
.blg-author > .blg-avatar{width:96px;height:96px}
.blg-creds{margin:var(--s3) 0 0;padding-inline-start:var(--s5);font-size:var(--fs-3);line-height:2.1;color:var(--fg-muted)}

@media (max-width:899px){
  .blg-cats{grid-template-columns:repeat(2,1fr)}
  .blg-prods{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:639px){
  .blg-h1{font-size:var(--fs-8)}
  /* 🔴 جدولِ مقایسه در موبایل **می‌لغزد**، نمی‌شکند: ستونِ فشرده عدد را ناخوانا می‌کند. */
  .blg-body table{display:block;overflow-x:auto;white-space:nowrap}
  .blg-cats,.blg-prods,.blg-people{grid-template-columns:1fr}
  .blg-post{flex-direction:column}
  .blg-thumb{width:100%;aspect-ratio:16/9}
  .blg-author{flex-direction:column}
}

/* ── جای عکس — برش ۲۰-ظ۳۹۸، پس از بازخوردِ کارفرما ─────────────────────────
   🔴 صفحه‌ی اصلی «همه‌اش متن» بود. هر کارتِ دسته و هر مقاله جای عکس دارد؛ تا
      عکسی بارگذاری نشده، نمادِ دسته روی زمینه‌ی رنگیِ همان دسته می‌نشیند. */
.blg-cover,.blg-lead-img{display:grid;place-items:center;overflow:hidden;
  background:var(--primary-subtle);color:var(--primary-text)}
.blg-cover > img,.blg-lead-img > img{width:100%;height:100%;object-fit:cover;display:block}
.blg [data-tone="success"]{background:var(--success-subtle);color:var(--success-text)}
.blg [data-tone="warn"]{background:var(--warn-subtle);color:var(--warn-text)}
.blg [data-tone="restricted"]{background:var(--restricted-subtle);color:var(--restricted-text)}
.blg [data-tone="accent"]{background:var(--accent-subtle);color:var(--accent-deep)}

.blg-cat{padding:0;overflow:hidden;gap:0}
.blg-cat > .blg-cover{aspect-ratio:16/9;border-bottom:1px solid var(--border)}
.blg-cat-t{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s4);flex:1}
.blg-cat-t > b{font-size:var(--fs-5);font-weight:700}
.blg-cat-t > span{font-size:var(--fs-3);line-height:1.9;color:var(--fg-muted)}
.blg-cat-t > small{margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--border);
  font-size:var(--fs-2);color:var(--fg-subtle)}

.blg-lead{display:grid;grid-template-columns:1.1fr 1fr;border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;background:var(--bg);box-shadow:var(--sh-sm);
  color:var(--fg);margin-bottom:var(--s2);transition:box-shadow .16s ease,border-color .16s ease}
.blg-lead:hover{box-shadow:var(--sh);border-color:var(--primary-border)}
.blg-lead-img{min-height:240px}
.blg-lead-t{display:flex;flex-direction:column;gap:var(--s3);padding:var(--s5)}
.blg-lead-t > small{font-size:var(--fs-2);font-weight:700;color:var(--primary-text)}
.blg-lead-t > b{font-size:var(--fs-7);line-height:1.6;font-weight:800}
.blg-lead-t > span{font-size:var(--fs-4);line-height:2;color:var(--fg-muted)}
.blg-lead-t > em{margin-top:auto;font-style:normal;font-size:var(--fs-2);color:var(--success-text)}

@media (max-width:899px){
  .blg-lead{grid-template-columns:1fr}
  .blg-lead-img{min-height:0;aspect-ratio:16/9}
}

/* مقدمه‌ی صفحه‌ی دسته، و تصویرِ شاخصِ مقاله. */
.blg-intro{max-width:760px}
.blg-hero{margin:0 0 var(--s5)}
.blg-hero img{width:100%;height:auto;border-radius:var(--r-lg);display:block}

/* ۲۰-ظ۴۰۲ — پروفایلِ نویسنده و یادداشتِ بازبین */
.blg-en{margin:0;color:var(--fg-subtle);font-size:var(--fs-2)}
.blg-h3{margin:var(--s5) 0 var(--s2);font-size:var(--fs-4)}
.blg-tags{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0;padding:0;list-style:none}
.blg-tags > li{padding:var(--s1) var(--s3);border:1px solid var(--border);border-radius:var(--r-full);font-size:var(--fs-2)}
.blg-links{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s4) 0 0;padding:0;list-style:none;font-size:var(--fs-2)}
.blg-person > span > em.blg-note{margin-top:var(--s1);font-size:var(--fs-1)}
.blg-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}

/* ۲۰-ظ۴۰۵ — پرسش‌های متداول و منابع */
.blg-faq{border-top:1px solid var(--border);padding-block:var(--s3)}
.blg-faq > summary{cursor:pointer;font-weight:700;font-size:var(--fs-4);line-height:1.8}
.blg-faq > p{margin:var(--s2) 0 0;color:var(--fg-muted);line-height:2}
.blg-sources{margin:0;padding-inline-start:var(--s5);font-size:var(--fs-2);line-height:2.1;color:var(--fg-muted)}
.blg-sources a{overflow-wrap:anywhere}