/* ============================================================
   بلاگ پلتفرم — استایل‌های خاص بلاگ (لایه ۴)
   فقط استایل‌هایی که با کلاس‌های utility قالب جدید (preview.css)
   پوشش داده نمی‌شوند: تایپوگرافی محتوا، پلیر صوتی، لایت‌باکس.
   توکن‌ها از :root قالب (slate/brand/emerald/rose) استفاده می‌کنند.
   ============================================================ */

/* ---------- تایپوگرافی محتوای پست ---------- */
.blog-content {
  font-size: 15px;
  line-height: 2;
  color: var(--slate-700);
  word-wrap: break-word;
}
.blog-content > *:first-child { margin-top: 0; }
.blog-content p { margin: 0 0 1.1em; text-align: justify; }
.blog-content h2,
.blog-content h3,
.blog-content h4 {
  color: var(--slate-900);
  font-weight: 800;
  line-height: 1.6;
  margin: 1.6em 0 .7em;
}
.blog-content h2 { font-size: 20px; padding-right: .7em; border-right: 4px solid var(--brand-500); }
.blog-content h3 { font-size: 17px; }
.blog-content h4 { font-size: 15px; }
.blog-content ul,
.blog-content ol { margin: 0 0 1.1em; padding-right: 1.6em; }
.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin-bottom: .45em; }
.blog-content li::marker { color: var(--brand-500); }
.blog-content a {
  color: var(--brand-600);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--brand-200);
  text-underline-offset: 3px;
  transition: text-decoration-color .2s;
}
.blog-content a:hover { text-decoration-color: var(--brand-600); }
.blog-content img {
  max-width: 100%;
  height: auto;
  border-radius: 1rem;
  margin: 1.2em 0;
  box-shadow: 0 4px 12px -2px rgba(15, 23, 42, .08);
}
.blog-content blockquote {
  margin: 1.3em 0;
  padding: 1em 1.2em;
  background: var(--brand-50, #f5f3ff);
  border-right: 4px solid var(--brand-500);
  border-radius: .9rem;
  color: var(--slate-700);
  font-size: 14px;
}
.blog-content blockquote p:last-child { margin-bottom: 0; }
.blog-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .88em;
  background: var(--slate-100);
  border: 1px solid var(--slate-200);
  border-radius: .45rem;
  padding: .12em .45em;
  direction: ltr;
  display: inline-block;
}
.blog-content pre {
  background: var(--slate-900);
  color: var(--slate-100);
  border-radius: 1rem;
  padding: 1.1em 1.3em;
  overflow-x: auto;
  direction: ltr;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  margin: 1.3em 0;
}
.blog-content pre code { background: transparent; border: 0; padding: 0; color: inherit; }
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.3em 0;
  font-size: 13px;
}
.blog-content th,
.blog-content td { border: 1px solid var(--slate-200); padding: .55em .8em; text-align: right; }
.blog-content th { background: var(--slate-50); font-weight: 800; color: var(--slate-800); }
.blog-content hr { border: 0; border-top: 1px solid var(--slate-200); margin: 2em 0; }
.blog-content iframe { max-width: 100%; border-radius: 1rem; }

/* ---------- پلیر صوتی ---------- */
.blog-audio-box audio {
  height: 44px;
  border-radius: 999px;
  outline: none;
}

/* ---------- ویدیو امبد — نسبت ثابت 16:9 ریسپانسیو ---------- */
.blog-embed{position:relative;aspect-ratio:16/9;width:100%}

/* ---------- گالری ---------- */
.blog-gallery-item { cursor: zoom-in; }

/* ---------- صفحه‌بندی بلاگ ---------- */
.blog-pagination {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 2.5rem;
}

/* ---------- رنگ‌های برند جامد — در preview.css تعریف نشده‌اند ---------- */
.bg-brand-100{background-color:var(--brand-100,#ede9fe)}
.bg-brand-600{background-color:var(--brand-600)}
.bg-brand-700{background-color:var(--brand-700)}
.hover\:bg-brand-600:hover{background-color:var(--brand-600)}
.hover\:bg-brand-700:hover{background-color:var(--brand-700)}
.hover\:bg-brand-50:hover{background-color:var(--brand-50,#f5f3ff)}
.hover\:bg-brand-100:hover{background-color:var(--brand-100,#ede9fe)}
.hover\:text-brand-700:hover{color:var(--brand-700)}
.hover\:text-brand-600:hover{color:var(--brand-600)}
.shadow-brand-200\/50{box-shadow:0 8px 20px -4px rgba(99,102,241,.28)}
/* کلاس‌های عمومی استفاده‌شده در بلاگ — در preview.css تعریف نشده‌اند */
.bg-slate-950\/85{background-color:rgba(2,6,23,.85)}
.max-w-full{max-width:100%}
.max-h-full{max-height:100%}

/* ---------- دکمه‌های بخش دیدگاه (پاسخ/ارسال — بدون استایل بومی مرورگر) ---------- */
.blog-btn-reply{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--slate-50,#f8fafc);border:1px solid var(--slate-200,#e2e8f0);
  padding:6px 14px;margin-top:10px;border-radius:999px;
  font-family:inherit;font-size:11px;font-weight:800;line-height:1;
  color:var(--slate-600,#475569);cursor:pointer;transition:all .2s;
}
.blog-btn-reply:hover{
  background:var(--brand-50,#f5f3ff);border-color:var(--brand-200,#ddd6fe);
  color:var(--brand-700,#4f46e5);transform:translateY(-1px);
}
.blog-btn-reply:focus-visible{outline:2px solid var(--brand-500);outline-offset:2px}

/* ---------- نوار اشتراک‌گذاری ---------- */
.blog-share-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  background:var(--slate-50);border:1px solid var(--slate-200);
  border-radius:1.5rem;padding:16px 20px;margin-top:2.5rem;
}
.blog-share-bar .blog-share-btn{
  width:2.4rem;height:2.4rem;border-radius:0.85rem;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--white);border:1px solid var(--slate-200);color:var(--slate-500);
  font-size:.85rem;transition:all .2s;
}
.blog-share-bar .blog-share-btn:hover{background:var(--slate-100);transform:translateY(-1px)}
.blog-share-bar .blog-share-btn.is-copy{width:auto;padding:0 .9rem;gap:6px;
  font-size:10px;font-weight:800;font-family:inherit}
.blog-share-bar .blog-share-btn.is-telegram:hover{color:#0284c7;border-color:#bae6fd}
.blog-share-bar .blog-share-btn.is-whatsapp:hover{color:#059669;border-color:#a7f3d0}
.blog-share-bar .blog-share-btn.is-twitter:hover{color:#0ea5e9;border-color:#bae6fd}

/* ---------- چیپ‌های متادیتای پست (هیرو + دسته‌بندی) ---------- */
.blog-meta-chip{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--white,#fff);border:1px solid var(--slate-200,#e2e8f0);
  border-radius:999px;padding:8px 14px;
  font-size:11px;font-weight:800;line-height:1;
  color:var(--slate-600,#475569);
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  transition:all .2s;
}
.blog-meta-chip i{color:var(--brand-500);font-size:11px}
.blog-meta-chip:hover{
  border-color:var(--brand-300,#c4b5fd);color:var(--brand-700,#4f46e5);
  transform:translateY(-1px);box-shadow:0 3px 8px -2px rgba(99,102,241,.18);
}
.blog-meta-chip.is-brand{
  background:var(--brand-50,#f5f3ff);border-color:var(--brand-200,#ddd6fe);
  color:var(--brand-700,#4f46e5);
}

/* ---------- لایت‌باکس گالری ---------- */
.blog-lb-btn{
  position:absolute;z-index:10;border:none;cursor:pointer;
  width:2.75rem;height:2.75rem;border-radius:1rem;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);color:#fff;font-size:1rem;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  transition:background .2s,transform .15s;
}
.blog-lb-btn:hover{background:rgba(255,255,255,.28)}
.blog-lb-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* دکمه بستن — گوشه بالا سمت راست، خارج از مرکز تصویر */
.blog-lb-close{top:1rem;right:1rem}
/* فلش‌های قبلی/بعدی — دو طرف تصویر (RTL: قبلی راست، بعدی چپ) */
.blog-lb-prev,.blog-lb-next{top:50%;transform:translateY(-50%);border-radius:999px}
.blog-lb-prev{right:1rem}
.blog-lb-next{left:1rem}
.blog-lb-prev:active,.blog-lb-next:active{transform:translateY(-50%) scale(.94)}
.blog-lb-close:active{transform:scale(.94)}
/* شمارنده تصاویر */
.blog-lb-counter{
  position:absolute;bottom:1rem;right:1rem;z-index:10;
  background:rgba(255,255,255,.12);color:#fff;
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  border-radius:999px;padding:6px 14px;
  font-size:11px;font-weight:800;line-height:1;
  direction:rtl;
}
@media (max-width: 640px) {
  .blog-lb-close{top:.75rem;right:.75rem}
  .blog-lb-prev{right:.5rem}
  .blog-lb-next{left:.5rem}
  .blog-lb-counter{bottom:.75rem;right:.75rem}
}

/* ---------- جلوگیری از اسکرول افقی (به‌خصوص موبایل) ---------- */
/* مرورگرهای قدیمی که overflow:clip را پشتیبانی نمی‌کنند */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
/* محتوای پست: هیچ رسانه/جدول/کلمه‌ای نباید از عرض کارت بیرون بزند */
.blog-content{overflow-wrap:anywhere}
.blog-content img,
.blog-content video,
.blog-content iframe,
.blog-content embed,
.blog-content object { max-width: 100%; }


/* ---------- کلاس‌های utility با مقدار دلخواه ----------
   این کلاس‌ها در قالب (preview.css) تعریف نشده‌اند ولی در نمای بلاگ
   استفاده می‌شوند؛ بدون این تعریف‌ها (مثلاً تاریخ دیدگاه با text-[9px])
   اندازه فونت به ارث برنده والد باقی می‌ماند و بزرگ دیده می‌شود. */
.text-\[9px\]   { font-size: 9px; }
.text-\[10px\]  { font-size: 10px; }
.text-\[11px\]  { font-size: 11px; }
.text-\[13px\]  { font-size: 13px; }
.text-\[15px\]  { font-size: 15px; }
.leading-\[1\.35\] { line-height: 1.35; }
.leading-\[1\.5\]  { line-height: 1.5; }
.w-\[700px\]  { width: 700px; }
.w-\[850px\]  { width: 850px; }
.h-\[450px\]  { height: 450px; }
.h-\[550px\]  { height: 550px; }
.max-w-\[80\%\] { max-width: 80%; }
.aspect-\[16\/10\] { aspect-ratio: 16 / 10; }
.aspect-\[4\/3\]   { aspect-ratio: 4 / 3; }

/* ---------- utilityهای گمشده قالب که در صفحه اصلی بلاگ استفاده می‌شوند ---------- */
/* نبود این‌ها باعث چسبیدن بخش هیرو به نوار فیلتر و به‌هم‌ریختگی نوار انواع محتوا می‌شد */
.pb-12 { padding-bottom: 3rem; }
.flex-nowrap { flex-wrap: nowrap; }
.overflow-x-auto { overflow-x: auto; }
.w-fit { width: fit-content; }
.max-w-full { max-width: 100%; }
@media (min-width: 768px) {
  .md\:pt-14 { padding-top: 3.5rem; }
  .md\:pb-16 { padding-bottom: 4rem; }
  .md\:pb-24 { padding-bottom: 6rem; }
}

/* ---------- نوار انواع محتوا (فیلتر نوع) ---------- */
/* در موبایل همه گزینه‌ها در یک ردیف با اسکرول افقی مخفی */
.blog-type-filters { -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.blog-type-filters::-webkit-scrollbar { display: none; }
.blog-type-filters > a { flex-shrink: 0; white-space: nowrap; }

/* ---------- سایدبار: حذف مارکر پیش‌فرض لیست‌ها (دایره مشکی) ---------- */
.blog-sidebar ul { list-style: none; margin: 0; padding: 0; }

/* ---------- هماهنگی فونت فیلد جستجو با سایر بخش‌ها ---------- */
/* مرورگرها به input فونت سیستم می‌دهند؛ باید از والد ارث ببرد */
.blog-sidebar input,
.blog-sidebar button {
  font-family: inherit;
}

/* ---------- خط مرزی هیرو + همپوشانی نوار محتوا ---------- */
/* خط پایانی هیرو و بالا آمدن نیم‌اندازه نوار فیلتر/جستجو روی آن؛
   z-index تضمین می‌کند کارت‌های سفید با بوردر و شدوی کامل روی پس‌زمینه هیرو بنشینند */
.blog-hero { border-bottom: 1px solid rgba(226, 232, 240, 0.9); }
.blog-content-overlap { position: relative; z-index: 5; margin-top: -1.75rem; }

/* ---------- ریسپانسیو ---------- */
/* گرید اصلی: در موبایل ترک صریح minmax(0,1fr) تا محتوای بدون‌شکستن (نوار فیلتر flex-nowrap)
   باعث گسترش ترک و اسکرول افقی نشود */
.blog-main-grid { grid-template-columns: minmax(0, 1fr); }
.blog-main-grid > * { min-width: 0; }
@media (min-width: 1024px) {
  .blog-main-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
  .blog-sidebar { order: 2; }
}