/* ============================================================
   prose.css — تایپوگرافی متنِ منتشرشده
   ============================================================
   این فایل هم روی صفحه‌ی عمومی مقاله بارگذاری می‌شود و هم روی ناحیه‌ی
   نوشتنِ ویرایشگر پنل. دلیلش ساده است: «آنچه می‌نویسی همان است که منتشر
   می‌شود». اگر دو فایل جدا بود، هر تغییری در یکی باید دستی در دیگری تکرار
   می‌شد و دیر یا زود از هم فاصله می‌گرفتند.

   متغیرهای محلی با fallback نوشته شده‌اند تا فایل در هر دو محیط کار کند:
   سایت عمومی (--blue/--line/--surface) و پنل مدیریت (--brand/--border/…).
   ============================================================ */

.prose,
.article-content {
  --p-accent:  var(--blue, #012cd0);
  --p-line:    var(--line, #ececec);
  --p-soft:    var(--surface, #f7f7f8);
  --p-muted:   var(--muted, #6b6b70);
  --p-radius:  var(--radius, 16px);
  --p-radius-s: var(--radius-sm, 10px);

  font-size: 1.08rem;
  line-height: 2;
  text-align: justify;
  text-justify: inter-word;
  overflow-wrap: anywhere;      /* آدرس بلند نباید کادر را پهن کند */
}

/* پنل مدیریت توکن‌های دیگری دارد؛ همان نقش‌ها را از آن‌ها می‌گیریم. */
.rte .prose,
.ed-rich.prose {
  --p-accent: var(--brand, #012cd0);
  --p-line:   var(--border, #e3e6ef);
  --p-soft:   var(--surface-2, #eef0f6);
  --p-muted:  var(--text-soft, #6b7288);
  --p-radius: var(--radius-lg, 16px);
  --p-radius-s: var(--radius-sm, 10px);
}

/* ---------- بلوک‌های پایه ---------- */
.prose > :first-child,
.article-content > :first-child { margin-block-start: 0; }
.prose > :last-child,
.article-content > :last-child  { margin-block-end: 0; }

.prose p, .article-content p { margin-block-end: 18px; }

.prose h1, .article-content h1 { font-size: 1.9rem;  margin: 36px 0 16px; line-height: 1.45; }
.prose h2, .article-content h2 { font-size: 1.6rem;  margin: 32px 0 14px; line-height: 1.5; }
.prose h3, .article-content h3 { font-size: 1.3rem;  margin: 26px 0 12px; line-height: 1.55; }
.prose h4, .article-content h4 { font-size: 1.15rem; margin: 22px 0 10px; }
.prose h5, .article-content h5 { font-size: 1.05rem; margin: 20px 0 10px; }
.prose h6, .article-content h6 { font-size: 1rem;    margin: 18px 0 8px; color: var(--p-muted); }

.prose ul, .prose ol,
.article-content ul, .article-content ol { margin: 0 22px 18px; list-style: revert; }
.prose li, .article-content li { margin-block-end: 6px; }

.prose a, .article-content a {
  color: var(--p-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose img, .article-content img {
  border-radius: var(--p-radius);
  margin: 22px 0;
  height: auto;
}

.prose figure, .article-content figure { margin: 22px 0; }
.prose figure img, .article-content figure img { margin: 0; }
.prose figcaption, .article-content figcaption {
  font-size: .86rem; color: var(--p-muted); text-align: center; margin-block-start: 8px;
}

.prose blockquote, .article-content blockquote {
  margin: 22px 0;
  padding: 16px 22px;
  border-inline-start: 3px solid var(--p-accent);
  background: var(--p-soft);
  border-radius: 0 var(--p-radius-s) var(--p-radius-s) 0;
  color: inherit;
}
.prose blockquote p:last-child,
.article-content blockquote p:last-child { margin-block-end: 0; }

.prose hr, .article-content hr { border: 0; border-block-start: 1px solid var(--p-line); margin: 30px 0; }

.prose pre, .article-content pre {
  background: var(--p-soft);
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius-s);
  padding: 16px;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  margin-block-end: 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  line-height: 1.7;
}
.prose code, .article-content code {
  background: var(--p-soft);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: .92em;
  direction: ltr;
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.prose pre code, .article-content pre code { background: none; padding: 0; display: block; }

/* جدول در ظرفِ اسکرول‌شونده‌ی خودش می‌ماند تا صفحه افقی اسکرول نشود */
.prose table, .article-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 22px 0;
  font-size: .96rem;
  display: block;
  overflow-x: auto;
}
.prose th, .prose td,
.article-content th, .article-content td {
  border: 1px solid var(--p-line);
  padding: 10px 12px;
  text-align: start;
}
.prose th, .article-content th { background: var(--p-soft); font-weight: 700; }

/* ---------- بلوک‌های اختصاصی ویرایشگر ---------- */

/* کادر نکته */
.prose .p-note, .article-content .p-note {
  display: flex;
  gap: 12px;
  margin: 24px 0;
  padding: 16px 18px;
  background: var(--p-soft);
  border: 1px solid var(--p-line);
  border-inline-start: 4px solid var(--p-accent);
  border-radius: var(--p-radius-s);
  line-height: 1.9;
}
.prose .p-note::before, .article-content .p-note::before {
  content: "!";
  flex: 0 0 24px;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--p-accent);
  color: #fff;
  font-weight: 700; font-size: .85rem; line-height: 1;
  margin-block-start: 4px;
}
.prose .p-note p:last-child, .article-content .p-note p:last-child { margin-block-end: 0; }

/* کارت مقاله‌ی مرتبط — روی سرور از روی شناسه ساخته می‌شود */
.prose .p-related, .article-content .p-related {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);   /* minmax(0,…) وگرنه ستون از کادر می‌زند بیرون */
  gap: 14px;
  align-items: center;
  margin: 26px 0;
  padding: 12px;
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  background: var(--p-soft);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s, transform .2s;
}
.prose .p-related:hover, .article-content .p-related:hover {
  border-color: var(--p-accent);
  transform: translateY(-2px);
}
.prose .p-related-plain, .article-content .p-related-plain {
  grid-template-columns: minmax(0, 1fr);
}
.prose .p-related img, .article-content .p-related img {
  width: 108px; height: 78px; object-fit: cover;
  border-radius: var(--p-radius-s); margin: 0;
}
.prose .p-related-kicker, .article-content .p-related-kicker {
  font-size: .78rem; color: var(--p-accent); font-weight: 700;
  display: block; margin-block-end: 4px;
}
.prose .p-related-title, .article-content .p-related-title {
  font-size: 1.02rem; font-weight: 700; line-height: 1.6;
  display: block; margin-block-end: 4px;
}
.prose .p-related-desc, .article-content .p-related-desc {
  font-size: .87rem; color: var(--p-muted); line-height: 1.7;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ویدیوی امبدشده — نسبت ثابت، بدون اسکریپت */
.prose .p-embed, .article-content .p-embed {
  position: relative; margin: 24px 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--p-radius); overflow: hidden;
  background: #000;
}
.prose .p-embed iframe, .article-content .p-embed iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}

@media (max-width: 560px) {
  .prose, .article-content { font-size: 1.02rem; line-height: 1.95; }
  .prose .p-related, .article-content .p-related { grid-template-columns: 84px minmax(0, 1fr); }
  .prose .p-related-plain, .article-content .p-related-plain { grid-template-columns: minmax(0, 1fr); }
  .prose .p-related img, .article-content .p-related img { width: 84px; height: 62px; }
}