/* =============================================================
   صفحه‌های مقاله — فهرست (/blog/) و تک‌مقاله (/blog/<نامک>/)
   رنگ و اندازه‌ها همه از tokens.css می‌آیند؛ تم تیره خودکار است.
   ============================================================= */

/* ---- بالای صفحه‌ی فهرست ---- */
.blog-hero { padding-block: var(--sp-16) var(--sp-8); text-align: center; }
.blog-hero h1 { margin-bottom: var(--sp-4); }
.blog-lead {
  color: var(--c-text-soft);
  font-size: var(--fs-md);
  line-height: 2;
  max-width: 62ch;
  margin-inline: auto;
  text-wrap: pretty;
}

.blog-filter {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-8);
}
.blog-filter a {
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-pill);
  border: var(--hairline) solid var(--c-border);
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.blog-filter a:hover { border-color: var(--c-accent); color: var(--c-accent-text); }
/* دسته‌ی انتخاب‌شده: زمینه‌ی کم‌رنگ و قاب پررنگ، نه زمینه‌ی آبیِ پر —
   لوگوهای طلایی و سبز روی آبیِ پر گم می‌شدند و جعبه‌ی سفید دورشان وصله‌ای دیده می‌شد */
.blog-filter a[aria-current="page"] {
  background: var(--c-accent-soft);
  border-color: var(--c-accent);
  box-shadow: inset 0 0 0 1px var(--c-accent);
  color: var(--c-accent-text);
  font-weight: 700;
}
.blog-filter a, .blog-tag { display: inline-flex; align-items: center; gap: 6px; }
/* لوگوی محصول کنار نامش؛ ارتفاع به اندازه‌ی متن */
.blog-mark { height: 1.45em; width: auto; flex: none; }

/* ---- کارت‌ها ---- */
.blog-list-section { padding-block: var(--sp-8) var(--sp-20); }
.blog-empty { text-align: center; color: var(--c-text-muted); padding-block: var(--sp-12); }

.blog-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.blog-card {
  background: var(--c-surface);
  border: var(--hairline) solid var(--c-border-soft);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--c-border); }
.blog-card-link { display: flex; flex-direction: column; height: 100%; }
.blog-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-bg-tint); }
.blog-card-body { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.blog-card h2, .blog-card h3 { font-size: var(--fs-lg); font-weight: 800; line-height: 1.7; }
.blog-card p { color: var(--c-text-soft); font-size: var(--fs-sm); line-height: 1.9; flex: 1; }

.blog-tag {
  align-self: flex-start;
  padding: 3px var(--sp-3);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--c-accent-soft);
  color: var(--c-accent-text);
}
.blog-tag-academy { background: var(--green-50); color: var(--green-700); }
html[data-theme="dark"] .blog-tag-academy { background: rgba(79, 177, 137, .16); color: var(--green-300); }

.blog-meta { color: var(--c-text-muted); font-size: var(--fs-xs); }
/* جداکننده‌ی «نویسنده | تاریخ | زمان مطالعه» — نقطه‌ی وسط‌چین در فونت فارسی شبیه صفر دیده می‌شد */
.blog-meta .sep { display: inline-block; width: 1px; height: .95em; margin-inline: .6em; vertical-align: -.1em; background: currentColor; opacity: .45; }

/* ---- تک‌مقاله ---- */
.post-head { padding-top: var(--sp-12); padding-bottom: var(--sp-8); }
.post-head h1 { font-size: clamp(1.75rem, 1.25rem + 2vw, 2.6rem); line-height: 1.6; margin-bottom: var(--sp-4); }
.post-head .blog-lead { margin-inline: 0; margin-bottom: var(--sp-4); }
.crumbs { display: flex; gap: var(--sp-2); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--c-text-muted); margin-bottom: var(--sp-5); }
.crumbs a:hover { color: var(--c-accent-text); }

.post-cover-wrap { max-width: 1000px; margin-bottom: var(--sp-10); }
.post-cover { width: 100%; border-radius: var(--r-xl); aspect-ratio: 16 / 9; object-fit: cover; background: var(--c-bg-tint); }

.post-toc {
  background: var(--c-bg-tint);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-10);
}
.post-toc b { display: block; margin-bottom: var(--sp-3); }
.post-toc ol { list-style: persian inside; display: grid; gap: var(--sp-2); }
.post-toc a { color: var(--c-text-soft); }
.post-toc a:hover { color: var(--c-accent-text); }

/* متنِ مقاله — خوانایی اول: سطر کوتاه، فاصله‌ی سطر زیاد */
.prose { font-size: 1.0625rem; line-height: 2.1; color: var(--c-text); }
.prose > * + * { margin-top: var(--sp-5); }
.prose h2 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-top: var(--sp-12); scroll-margin-top: 90px; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-8); scroll-margin-top: 90px; }
.prose h4 { font-size: var(--fs-md); margin-top: var(--sp-6); }
.prose a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.prose strong { font-weight: 800; }
.prose ul { list-style: disc; padding-inline-start: var(--sp-6); }
.prose ol { list-style: persian; padding-inline-start: var(--sp-6); }
.prose li + li { margin-top: var(--sp-2); }
.prose li::marker { color: var(--c-accent-text); }
.prose blockquote {
  border-inline-start: 3px solid var(--c-accent);
  padding: var(--sp-2) var(--sp-5);
  color: var(--c-text-soft);
  background: var(--c-bg-tint);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
[dir="rtl"] .prose blockquote { border-radius: var(--r-md) 0 0 var(--r-md); }
.prose blockquote > * + * { margin-top: var(--sp-3); }
.prose hr { border: 0; border-top: var(--hairline) solid var(--c-border); margin-block: var(--sp-10); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r-md); }
.prose figure { margin-block: var(--sp-8); }
.prose figcaption { text-align: center; color: var(--c-text-muted); font-size: var(--fs-sm); margin-top: var(--sp-2); }
.prose code { background: var(--c-bg-tint); padding: 1px 6px; border-radius: var(--r-sm); font-size: .9em; }
.prose pre { background: var(--c-bg-tint); padding: var(--sp-4); border-radius: var(--r-md); overflow-x: auto; line-height: 1.7; }
.prose pre code { background: none; padding: 0; }

.table-scroll { overflow-x: auto; border: var(--hairline) solid var(--c-border-soft); border-radius: var(--r-md); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.8; }
.prose th, .prose td { padding: var(--sp-3) var(--sp-4); text-align: start; border-bottom: var(--hairline) solid var(--c-border-soft); vertical-align: top; }
.prose th { background: var(--c-bg-tint); font-weight: 800; white-space: nowrap; }
.prose tr:last-child td { border-bottom: 0; }

/* جعبه‌ی محصول در انتهای مقاله */
.post-cta {
  margin-block: var(--sp-16) var(--sp-8);
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  border: var(--hairline) solid var(--c-border);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}
.post-cta b { font-size: var(--fs-lg); }
.post-cta p { color: var(--c-text-soft); margin-block: var(--sp-3) var(--sp-5); line-height: 1.9; }
.post-cta-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }

.related-title { font-size: var(--fs-xl); margin-bottom: var(--sp-6); }

.blog-preview-bar {
  position: sticky; top: 0; z-index: 200;
  background: #FEF7E0; color: #7A5300;
  text-align: center; padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}
.blog-preview-bar a { text-decoration: underline; font-weight: 700; }

@media (max-width: 700px) {
  .blog-hero { padding-block: var(--sp-12) var(--sp-6); }
  .post-head { padding-top: var(--sp-8); }
  .post-cta { padding: var(--sp-6); }
  .prose { font-size: 1rem; }
}