/* استایل اختصاصی وبلاگ دنتیوال — فقط توکن‌های dentival-tokens.css تا با بقیهٔ سایت یکی بماند */

.blog-section {
  padding-top: var(--sp-8);
}

/* ---------- نوار فیلتر: جست‌وجو + دسته‌ها ---------- */
.blog-filters {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.blog-search {
  display: flex;
  gap: var(--sp-2);
}

.blog-search input[type='search'] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.6rem var(--sp-4);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.blog-search input[type='search']:focus-visible {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

.blog-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.blog-chip {
  display: inline-block;
  padding: 0.3rem var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  text-decoration: none;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.blog-chip:hover {
  color: var(--color-brand-ink);
  border-color: var(--color-brand-border);
}

/* حالت انتخاب‌شده تنها جایی است که رنگ پررنگ برند مجاز است */
.blog-chip.is-active {
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-color: var(--color-brand);
}

.blog-active-filter {
  margin-bottom: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.blog-active-filter a {
  margin-inline-start: var(--sp-2);
  color: var(--color-brand);
}

.blog-block-title {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-text-strong);
}

/* ---------- شبکهٔ کارت‌ها ---------- */
/* چیدمان صریح جای auto-fill تا شمار ستون معلوم و کارت یتیم ردیف آخر قابل‌کنترل بماند */
/* `minmax(0, 1fr)` به‌جای `1fr` تا عرضِ ذاتیِ تصویرِ کاور هرگز ردیف را در موبایل پهن‌تر نکند */
.blog-grid,
.blog-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-5);
}

/* نردبان ستون‌ها: از ۳۶rem دو ستون و از ۶۰rem سه ستون */
@media (min-width: 36rem) {
  .blog-grid,
  .blog-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 60rem) {
  .blog-grid,
  .blog-featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ضدِ کارت یتیم: قلم تنهای ردیف آخر تمام‌عرض ولی هم‌اندازهٔ یک ستون و وسط‌چین */
@media (min-width: 36rem) and (max-width: 59.999rem) {
  .blog-grid > :last-child:nth-child(odd),
  .blog-featured-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - var(--sp-5)) / 2);
  }
}

@media (min-width: 60rem) {
  .blog-grid > :last-child:nth-child(3n + 1),
  .blog-featured-grid > :last-child:nth-child(3n + 1) {
    grid-column: 1 / -1;
    justify-self: center;
    inline-size: calc((100% - 2 * var(--sp-5)) / 3);
  }
}

.blog-featured {
  margin-bottom: var(--sp-10);
}

.blog-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}

.blog-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.blog-card-media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-surface-sunken);
}

/* بزرگ‌نماییِ آرام و ملایمِ کاور هنگام اشاره‌گر روی کارت */
.blog-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-card:hover .blog-card-media img {
  transform: scale(1.04);
}

/* احترام به کاهش حرکت: بزرگ‌نمایی غیرفعال می‌شود */
@media (prefers-reduced-motion: reduce) {
  .blog-card-media img { transition: none; }
  .blog-card:hover .blog-card-media img { transform: none; }
}

.blog-card-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: var(--fs-3xl);
  color: var(--c-n-400);
}

.blog-badge {
  position: absolute;
  inset-inline-start: var(--sp-3);
  inset-block-start: var(--sp-3);
  padding: 0.15rem var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--color-text-on-brand);
  background: var(--color-accent);
  border-radius: var(--radius-xs);
}

.blog-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
}

/* دستهٔ مقاله به‌صورت نشانِ برند (پیل با پس‌زمینهٔ برند) نه فقط متنِ رنگی */
.blog-card-cat {
  align-self: flex-start;
  padding: 0.15rem var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-xs);
}

.blog-card-body h3 {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-heading);
  overflow-wrap: break-word;
}

.blog-card-body h3 a {
  color: var(--color-text-strong);
  text-decoration: none;
}

.blog-card-body h3 a:hover {
  color: var(--color-brand);
}

.blog-card-body p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

/* خلاصه به دو خط محدود می‌شود تا ارتفاع کارت‌های شبکه یکنواخت بماند */
.blog-card-body > p:not(.blog-card-meta):not(.blog-card-tags) {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* پاصفحهٔ کارت (امضا و تاریخ) و برچسب‌ها ته کارت؛ رنگ صریح چون از رنگ متنِ خلاصه ارث نمی‌برد */
.blog-card-meta,
.blog-card-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  margin-top: auto;
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.blog-card-meta i {
  margin-inline-end: 0.25rem;
  color: var(--c-n-400);
}

.blog-card-tags a {
  color: var(--color-brand);
  text-decoration: none;
}

.blog-card-featured .blog-card-body h3 {
  font-size: var(--fs-xl);
}

/* ---------- صفحه‌بندی ---------- */
.blog-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}

.blog-pager-info {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.blog-pager .is-disabled {
  pointer-events: none;
  opacity: 0.45;
}

.blog-tagcloud {
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border-subtle);
}

/* ---------- صفحهٔ مقاله ---------- */
.blog-article-head {
  padding: var(--sp-10) 0 var(--sp-6);
  background: var(--color-brand-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
}

.blog-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.blog-breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

.blog-breadcrumb a:hover {
  color: var(--color-brand);
}

.blog-article-head h1 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  color: var(--color-brand-ink);
}

.blog-article-lead {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--color-text);
}

.blog-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.blog-article-meta i {
  margin-inline-end: 0.25rem;
}

.blog-article-cover {
  margin: 0;
  padding: var(--sp-6) 0 0;
}

.blog-article-cover img {
  width: 100%;
  max-height: 26rem;
  object-fit: cover;
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-border);
}

/* ---------- بدنهٔ متن غنی ---------- */
/* پهنای خوانش حدود ۷۲ نویسه برای راحت‌خوانی؛ در موبایل که عرض کمتر است همان تمام‌عرض می‌ماند */
.blog-content {
  padding: var(--sp-8) 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  max-inline-size: 72ch;
}

.blog-content > :first-child {
  margin-top: 0;
}

.blog-content h2,
.blog-content h3,
.blog-content h4 {
  margin: var(--sp-8) 0 var(--sp-3);
  line-height: var(--lh-heading);
  color: var(--color-text-strong);
}

.blog-content h2 { font-size: var(--fs-h2); }
.blog-content h3 { font-size: var(--fs-h3); }
.blog-content h4 { font-size: var(--fs-lg); }

.blog-content p,
.blog-content ul,
.blog-content ol,
.blog-content table,
.blog-content figure,
.blog-content pre,
.blog-content blockquote {
  margin: 0 0 var(--sp-5);
}

.blog-content ul,
.blog-content ol {
  padding-inline-start: var(--sp-6);
}

.blog-content li {
  margin-bottom: var(--sp-2);
}

.blog-content a {
  color: var(--color-brand);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

.blog-content figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}

/* نقل‌قول با نوار سمت شروع تا در RTL و LTR درست بنشیند */
.blog-content blockquote {
  padding: var(--sp-4) var(--sp-5);
  color: var(--color-brand-ink);
  background: var(--color-brand-subtle);
  border-inline-start: 3px solid var(--color-brand);
  border-radius: var(--radius-md);
}

.blog-content blockquote > :last-child {
  margin-bottom: 0;
}

.blog-content pre {
  padding: var(--sp-4);
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.blog-content code {
  font-size: 0.9em;
  direction: ltr;
  unicode-bidi: isolate;
}

.blog-content :not(pre) > code {
  padding: 0.1rem 0.3rem;
  background: var(--color-surface-sunken);
  border-radius: var(--radius-xs);
}

/* جدول در موبایل باید داخل خودش اسکرول شود نه صفحه */
.blog-content table {
  display: block;
  width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
}

.blog-content th,
.blog-content td {
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  text-align: start;
  border: 1px solid var(--color-border);
}

.blog-content th {
  background: var(--color-surface-sunken);
  font-weight: var(--fw-bold);
}

.blog-content hr {
  margin: var(--sp-8) 0;
  border: 0;
  border-top: 1px solid var(--color-border);
}

.blog-article-tags {
  margin-bottom: var(--sp-6);
}

.blog-article-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-6) 0;
  border-top: 1px solid var(--color-border-subtle);
}

/* پیام تأییدِ کپی لینک؛ تمام‌عرض زیر دکمه‌ها تا در موبایل هم بدون شکستن بخواند */
.blog-share-status {
  flex: 1 1 100%;
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-success-ink);
}

.blog-share-status[hidden] {
  display: none;
}

.blog-related {
  background: var(--color-surface-sunken);
}

/* ---------- مقالات مرتبط در ستون کنار مقاله (سمت چپ در RTL) ---------- */
/* `minmax(0, 1fr)` اجازه می‌دهد جدول و تصویرِ پهن داخل محتوا اسکرول کنند نه صفحه را پهن کنند */
.blog-post-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

/* در موبایل پنل زیر متن می‌نشیند؛ بدون فاصلهٔ ردیف کارتِ اول به خط‌کاست گفتگو می‌چسبد */
@media (max-width: 767px) {
  .blog-post-grid {
    row-gap: var(--sp-8);
  }
}

/* هر دو ستون `min-width: 0` می‌گیرند تا محتوای بلند هیچ‌وقت عرض شبکه را از نظر نبرد */
.blog-post-main,
.blog-related-aside {
  min-width: 0;
}

@media (min-width: 992px) {
  .blog-post-grid {
    grid-template-columns: minmax(0, 1fr) 280px;
    column-gap: var(--sp-8);
  }
}

/* چسبندگی فقط وقتی ارتفاع نمایشگر اجازه می‌دهد پنل را کامل نشان دهد */
@media (min-width: 992px) and (min-height: 560px) {
  .blog-related-aside-inner {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-6));
  }
}

.blog-related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.blog-related-card {
  display: block;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-strong);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.blog-related-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
}

.blog-related-card-cat {
  display: inline-block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-xs);
}

/* عنوان کارت با `min-width: 0` می‌شکند تا هیچ عنوان بلند صفحه را پهن‌تر نکند */
.blog-related-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-width: 0;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
}

.blog-related-card:hover .blog-related-card-title {
  color: var(--color-brand);
}

.blog-related-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  color: var(--color-text-muted);
}

.blog-related-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--color-text-muted);
}

.blog-related-card-meta i {
  margin-inline-end: 0.25rem;
  color: var(--c-n-400);
}

/* ---------- نشانِ مدیر روی پیام گفتگو ---------- */
/* فقط برای حسابِ پلتفرمی رندر می‌شود؛ همان رنگ پررنگ برند که روی کارتِ دسته استفاده می‌شود */
.blog-identity-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.15rem var(--sp-3);
  margin-inline-end: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  border-radius: var(--radius-xs);
}


@media (min-width: 48rem) {
  .blog-filters {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .blog-search {
    flex: 0 0 20rem;
  }
}

/* امضای نویسنده روی کارت و بالای مقاله */
.blog-author {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  max-width: 100%;
}

.blog-author-avatar {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--color-border);
  background: var(--color-brand-subtle);
}

.blog-author-monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--color-brand-ink);
}

.blog-author-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.blog-author-name {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.blog-author-role {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.blog-article-author {
  margin-top: var(--sp-4);
}

.blog-author-lg {
  gap: var(--sp-3);
}

.blog-author-lg .blog-author-avatar {
  width: 2.75rem;
  height: 2.75rem;
}

.blog-author-lg .blog-author-name {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--color-text-strong);
  white-space: normal;
  overflow-wrap: anywhere;
}

.blog-author-lg .blog-author-role {
  overflow-wrap: anywhere;
}

/* توضیح دسته، شمارش نتیجهٔ فیلتر و مرز وبلاگ با بخش آموزش */
.blog-filter-count {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.blog-cat-intro {
  margin: 0 0 var(--sp-6);
  max-width: 60ch;
  color: var(--color-text-muted);
  line-height: var(--lh-body);
}

.blog-academy-note {
  margin: var(--sp-8) 0 0;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.blog-academy-note a {
  color: var(--color-brand);
  font-weight: 600;
}

/* گفتگوی مقاله — واکنش، ثبت نظر، مرتب‌سازی و پاسخ؛ چیدمان روی شبکهٔ منطق‌دار است تا در راست‌به‌چپ و موبایل درست بشکند */

.blog-interact {
  padding: var(--sp-8) 0;
  border-top: 1px solid var(--color-border-subtle);
}

.blog-interact-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-5);
}

.blog-interact-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  min-width: 0;
}

.blog-interact-title .blog-block-title {
  margin: 0;
}

.blog-interact-count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

/* روی موبایل دکمهٔ خلاصهٔ واکنش جای گروه کامل را می‌گیرد و پایین صفحه باز می‌شود */
.blog-react-toggle {
  display: none;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}

.blog-react-toggle:hover {
  border-color: var(--color-brand-border);
  background: var(--color-brand-subtle);
}

.blog-react-toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.blog-react-toggle.is-on {
  border-color: var(--color-brand-border);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
}

/* نوار واکنش؛ هر دکمه یک کارت کوچک است و حالت فعال از برند می‌گیرد */
.blog-react-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: 0;
  margin: 0;
}

.blog-react-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-inline-size: 6.5rem;
  padding: 0.6rem 1rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out);
}

.blog-react-btn > i {
  flex: 0 0 auto;
  font-size: 1.05em;
}

.blog-react-btn:hover:not(:disabled) {
  border-color: var(--color-brand-border);
  background: var(--color-brand-subtle);
}

.blog-react-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--color-brand-border);
}

.blog-react-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.blog-react-btn.is-on {
  border-color: var(--color-brand-border);
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
}

/* شمارندهٔ داخل دکمهٔ فعال؛ سفیدیِ نسبتی روی برند است تا در هر دو حالت روشن/تیره دیده شود */
.blog-react-count {
  padding: 0.05em 0.6em;
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

.blog-react-btn.is-on .blog-react-count {
  background: color-mix(in srgb, #ffffff 22%, transparent);
  color: var(--color-brand-ink);
}

/* واکنش تازهٔ ثبت‌شده با یک تکان کوتاه اعلام می‌شود، نه صدایی که صفحه را به هم بزند */
.blog-react-btn.is-flash > i {
  animation: blog-react-pop 320ms var(--ease-out);
}

@keyframes blog-react-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* ---------- امتیاز ۱ تا ۵ ستاره ---------- */

/* کارتِ امتیاز؛ میانگین سمت راست و ستاره‌ها زیرش تا در موبایل هم بدون شکستن بخوابد */
.blog-rating {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.blog-rating-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
}

.blog-rating-title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
}

.blog-rating-title i {
  color: var(--color-warn);
}

/* میانگین با ارقام هم‌عرض تا جابه‌جاییِ عدد چیدمان را نلرزاند */
.blog-rating-avg {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-variant-numeric: tabular-nums;
}

.blog-rating-avg b {
  color: var(--color-text-strong);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
}

.blog-rating-avg small {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

/* ستاره‌ها دکمه‌های واقعی‌اند نه آیکون تزئینی؛ ناحیهٔ لمس روی موبایل بزرگ‌تر از خودِ نقش می‌مانَد */
.blog-rating-stars {
  display: flex;
  gap: var(--sp-1);
}

.blog-rating-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-warn);
  font-size: var(--fs-xl);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out);
}

.blog-rating-star:hover:not(:disabled) {
  transform: scale(1.12);
}

.blog-rating-star:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.blog-rating-star:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.blog-rating-star.is-mine {
  color: var(--color-brand-ink);
}

/* وقتی نشست نیست، جای فرم یک کارتِ کوتاه برای ورود می‌نشیند تا گفتگو بسته نشود */
.blog-comment-gate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px dashed var(--color-control-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
}

.blog-comment-gate i {
  color: var(--color-info);
}

.blog-comment-gate a {
  margin-inline-start: auto;
}

.blog-comment-form {
  padding: var(--sp-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.blog-comment-form[hidden] { display: none; }

.blog-interact-note {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.blog-interact-note i {
  flex: 0 0 auto;
  margin-top: 0.2em;
  color: var(--color-info);
}


.blog-field {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.blog-field-label {
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.blog-field input,
.blog-field textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.blog-field input::placeholder,
.blog-field textarea::placeholder {
  color: var(--color-text-muted);
}

.blog-field input:focus,
.blog-field textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.blog-field textarea {
  min-height: 6rem;
  resize: vertical;
}

.blog-field-count {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

/* اقدامات فرم: دکمهٔ ارسال همیشه در گوشهٔ مخالف می‌نشیند تا چشم به همان جا بیفتد */
.blog-comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.blog-comment-actions .btn {
  margin-inline-start: auto;
}

/* پیام خطا و موفقیت با آیکون مشترک می‌آیند تا در کل صفحه یک خانواده باشند */
.blog-comment-error,
.blog-comment-status {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.blog-comment-error[hidden],
.blog-comment-status[hidden] {
  display: none;
}

.blog-comment-error i,
.blog-comment-status i {
  flex: 0 0 auto;
  margin-top: 0.15em;
}

.blog-comment-error {
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-surface);
  color: var(--color-danger-ink);
}

.blog-comment-status {
  border: 1px solid var(--color-success-border);
  background: var(--color-success-surface);
  color: var(--color-success-ink);
}

/* مرتب‌سازی گفتگو فقط روی فهرست طولانی معنا دارد، پس کنار شمارنده ظاهر می‌شود */
.blog-sort-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 var(--sp-3);
}

.blog-sort-label {
  margin: 0;
  color: var(--color-text-strong);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.blog-sort {
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-sm);
  cursor: pointer;
}

.blog-sort:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--color-brand);
}

.blog-sort-row[hidden] {
  display: none;
}

/* گفتگو */
.blog-comments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-3);
}

.blog-comments[hidden] {
  display: none;
}

/* وضعیت خالی گفتگو؛ جای گفتگوی نیست‌شده تا کاربر بداند اولین نفر باشد */
.blog-comments-empty {
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-xl);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.blog-comments-empty[hidden] {
  display: none;
}

/* دکمهٔ ادامهٔ گفتگو پایِ لیست می‌نشیند تا نظراتِ بیش از سقف سرور بی‌پیامانه ناپدید نشوند */
.blog-comments-more {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

.blog-comments-more[hidden] {
  display: none;
}

.blog-comments-more button {
  min-inline-size: 13rem;
}

@media (max-width: 413.98px) {
  .blog-comments-more button {
    width: 100%;
  }
}

.blog-comment {
  padding: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-xs);
}

.blog-comment-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.blog-comment-avatar {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.blog-comment-avatar.c1 {
  background: var(--color-brand-subtle);
  color: var(--color-brand-ink);
}

.blog-comment-avatar.c2 {
  background: var(--color-accent-subtle);
  color: var(--color-accent-ink);
}

.blog-comment-avatar.c3 {
  background: var(--color-warn-surface);
  color: var(--color-warn-ink);
}

.blog-comment-avatar.c4 {
  background: var(--color-info-surface);
  color: var(--color-info-ink);
}

.blog-comment-meta {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
}

.blog-comment-meta strong {
  color: var(--color-text-strong);
  font-weight: var(--fw-bold);
}

/* نشانِ مدیرِ نرم‌افزار کنار نامِ نویسنده؛ فقط وقتی نشانِ سرور ADMIN است می‌آید */
.blog-comment-meta .blog-comment-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-inline-end: var(--sp-2);
  padding: 0.1rem var(--sp-2);
  border-radius: var(--radius-xs);
  color: var(--color-text-on-brand);
  background: var(--color-brand);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  vertical-align: middle;
}

.blog-comment-meta time {
  color: var(--color-text-muted);
}

.blog-comment-body {
  color: var(--color-text);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

/* ردیف اقدامات ردیفِ نظر؛ مستقل از اقدامات فرم تا در موبایل همهٔ دکمه‌ها تمام‌عرض نشوند */
.blog-comment-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

/* پیام جای دکمهٔ ویرایش وقتی پنجرهٔ مهلت سرور بسته شده است */
.blog-comment-window-closed {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
}

.blog-reply-to {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.blog-reply-to strong {
  color: var(--color-text-strong);
  font-weight: var(--fw-bold);
}

/* پاسخ‌ها زیر نظرِ مادر با یک خطوط راهنما نشسته‌اند */
.blog-replies {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0 var(--sp-3);
  display: grid;
  gap: var(--sp-3);
  border-inline-start: 2px solid var(--color-border);
}

.blog-reply {
  padding: var(--sp-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.blog-replies .blog-comment-meta {
  margin-bottom: var(--sp-2);
}

.blog-replies .blog-comment-body {
  color: var(--color-text);
  line-height: var(--lh-body);
  overflow-wrap: anywhere;
}

/* فرم پاسخ داخلی */
.blog-reply-form {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.blog-reply-target {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.blog-reply-target strong {
  color: var(--color-text-strong);
  font-weight: var(--fw-bold);
}

.blog-reply-form textarea {
  width: 100%;
  min-height: 4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-sm);
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.blog-reply-form textarea::placeholder {
  color: var(--color-text-muted);
}

.blog-reply-form textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.blog-reply-form .blog-comment-actions {
  margin-top: 0;
}

.blog-reply-form .blog-comment-actions .btn {
  margin-inline-start: auto;
}

/* واکنش به یک نظر: گروه شمارندهٔ مثبت/منفی داخل همان ردیف اقدامات می‌نشیند */
.blog-comment-reactions {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
}

.blog-comment-react-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.blog-comment-react-btn:hover {
  color: var(--color-text-strong);
  background: var(--color-surface-sunken);
}

.blog-comment-react-btn[aria-pressed='true'] {
  color: var(--color-brand-ink);
  background: var(--color-brand-subtle);
}

.blog-comment-react-count {
  font-size: var(--fs-2xs);
  color: inherit;
}

/* فرم ویرایش نویسنده: مثل فرم پاسخ، داخل همان ردیف می‌گشاید */
.blog-comment-edit-form {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
}

.blog-comment-edit-form[hidden] {
  display: none;
}

.blog-comment-edit-form textarea {
  width: 100%;
  min-height: 4rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: var(--fs-sm);
  resize: vertical;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.blog-comment-edit-form textarea::placeholder {
  color: var(--color-text-muted);
}

.blog-comment-edit-form textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: var(--focus-ring);
}

.blog-comment-edit-form .blog-comment-actions {
  margin-top: 0;
}

/* تأیید حذف درون ردیف: مثل فرم ویرایش می‌گشاید و پنجرهٔ سیستمی نمی‌بیند */
.blog-comment-confirm {
  margin-block-start: var(--sp-3);
  padding: var(--sp-3);
  display: grid;
  gap: var(--sp-2);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-danger-border);
  background: var(--color-danger-surface);
}

.blog-comment-confirm[hidden] {
  display: none;
}

.blog-comment-confirm-text {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-danger-ink);
}

.blog-comment-confirm .blog-comment-actions {
  margin-block-start: 0;
}
/* وسعت: واکنش‌ها در یک خط کنار عنوان گفتگو */
@media (min-width: 48rem) {
}

/* موبایل: واکنش‌ها به یک دکمهٔ جمع می‌روند تا نوار طولانی صفحه را نبلعد */
@media (max-width: 47.999rem) {
  .blog-interact-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .blog-react-toggle {
    display: inline-flex;
  }

  /* روی موبایل نوار واکنش تا لمسِ دکمه بسته می‌ماند؛ دکمهٔ خلاصه جای گروه کامل می‌نشیند */
  .blog-react-bar {
    display: none;
  }

  .blog-interact.is-react-open .blog-react-bar {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--sp-2);
  }

  .blog-react-btn {
    justify-content: center;
  }

  .blog-field textarea {
    min-height: 5rem;
  }

  /* دکمهٔ ارسال تمام عرض می‌شود تا با انگشت راحت ضربه بخورد و صفهٔ خالی کنارش نماند */
  .blog-comment-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .blog-comment-actions .btn {
    margin-inline-start: 0;
    width: 100%;
    justify-content: center;
  }
}

/* حرکتِ کم‌مطلب: انیمیشن واکنش فقط برای کسی که حرکت را نمی‌خواهد می‌خوابد */
@media (prefers-reduced-motion: reduce) {
  .blog-react-btn.is-flash > i {
    animation: none;
  }
}


/* ---------- پربازدیدترین‌ها: فهرست رتبه‌بندی‌شدهٔ فشرده ---------- */
.blog-popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-2);
}

.blog-popular-item {
  display: flex;
  align-items: stretch;
}

.blog-popular-rank {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-brand);
}

.blog-popular-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-strong);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.blog-popular-link:hover {
  border-color: var(--color-border-strong);
  color: var(--color-brand);
}

.blog-popular-title {
  font-weight: var(--fw-medium);
  line-height: 1.5;
}

.blog-popular-views {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}