/*
 * مجله لیدوما — هویت بصری مستقل.
 *
 * بلاگ عمداً از بقیه‌ی سایت جدا طراحی شده: سایت اصلی ابزار رزرو است و این
 * جای خواندن. ولی رنگ برند و فونت مشترک‌اند تا کاربر حس نکند به جای دیگری
 * پرت شده.
 *
 * ## چرا اصلاً این فایل لازم شد
 *
 * متن مقاله با dangerouslySetInnerHTML تزریق می‌شود، پس هیچ کلاس Tailwind‌ی
 * روی تگ‌هایش نیست و پروژه هم افزونه‌ی typography ندارد. بدون این فایل،
 * مرورگر ۱۰ کیلوبایت HTML را با استایل پیش‌فرض رندر می‌کند — تیتر و پاراگراف
 * بدون فاصله، تصویر بدون قاب، لینک آبیِ زیرخط‌دار.
 */

:root {
  --blog-ink: #0c1731;
  --blog-ink-2: #475569;
  /* #7b8689 بود: روی سفید ۳٫۸ به ۱، زیر حداقل ۴٫۵ به ۱ متن کوچک (Lighthouse: color-contrast). حالا ۵٫۱ روی سفید، ۴٫۷ روی --blog-ground. */
  --blog-ink-3: #64748b;
  --blog-line: #e8e2d2;
  --blog-surface: #ffffff;
  --blog-ground: #f7f3ea;
  --blog-accent: #c8a45a;
  --blog-accent-dark: #86671f;
  --blog-accent-soft: #f6edd3;
  --blog-shadow: 0 1px 2px rgba(20, 24, 26, 0.04), 0 12px 32px -16px rgba(20, 24, 26, 0.18);
  --blog-shadow-lg: 0 2px 4px rgba(20, 24, 26, 0.04), 0 24px 56px -24px rgba(20, 24, 26, 0.26);
  /* فاصله‌ی هر بلوکِ درون‌متنی از متنِ بالا و پایینش. */
  --blog-block-gap: 34px;
}

@media (min-width: 768px) {
  :root {
    --blog-block-gap: 40px;
  }
}

.blog-root {
  background: var(--blog-ground);
  color: var(--blog-ink);
}

/*
 * نوار پیش‌نمایش.
 *
 * زرد است نه سبز برند: این حالت باید **غیرعادی** به نظر برسد. کسی که لینک
 * پیش‌نمایش را باز می‌کند باید در یک نگاه بداند که این نسخه روی سایت نیست.
 */
.blog-previewbar {
  position: sticky;
  top: 64px;
  z-index: 40;
  padding: 9px 16px;
  text-align: center;
  font-size: 0.8rem;
  background: #fde68a;
  color: #5b4206;
  border-bottom: 1px solid #f0cf63;
}

/* ---------------------------------------------------------------- progress */

.blog-progress {
  position: fixed;
  top: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blog-accent), var(--blog-accent-dark));
  z-index: 60;
  transition: width 0.1s linear;
}

/* ------------------------------------------------------------------- chips */

.blog-chip {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background: var(--blog-accent-soft);
  color: #86671f;
  font-size: 0.75rem;
  line-height: 1.6;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.blog-chip:hover {
  background: #efdcab;
}

/* ------------------------------------------------------------ share button */

.blog-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--blog-line);
  color: var(--blog-ink-2);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.blog-share:hover {
  transform: translateY(-2px);
  border-color: var(--blog-accent);
  color: var(--blog-accent-dark);
}

.blog-share svg {
  width: 18px;
  height: 18px;
}

/* ================================================================= article */

.post-body {
  color: var(--blog-ink);
  font-size: 1.0625rem;
  line-height: 2.15;
  /*
   * حدود ۷۰ کاراکتر در هر خط. متن بلند فارسی روی عرض کامل دسکتاپ خوانده
   * نمی‌شود — چشم موقع برگشت به ابتدای خط بعدی جا گم می‌کند.
   */
  max-width: 74ch;
  margin-left: auto; margin-right: auto;
}

.post-body > * + * {
  margin-top: 1.35em;
}

.post-body p {
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
}

.post-body h2,
.post-body h3,
.post-body h4 {
  color: var(--blog-ink);
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  line-height: 1.55;
  /*
   * scroll-margin چون فهرست مطالب لنگرها را صدا می‌زند و نوار چسبان بالا
   * وگرنه تیتر مقصد را می‌پوشاند.
   */
  scroll-margin-top: 84px;
}

.post-body h2 {
  font-size: 1.5rem;
  margin-top: 2.4em;
  margin-bottom: 0.2em;
  position: relative;
  padding-right: 0.85rem;
}

.post-body h3 {
  font-size: 1.2rem;
  margin-top: 1.9em;
  margin-bottom: 0.1em;
}

.post-body h4 {
  font-size: 1.05rem;
  margin-top: 1.6em;
  color: var(--blog-ink-2);
}

.post-body a {
  color: var(--blog-accent-dark);
  text-decoration: none;
  background-image: linear-gradient(var(--blog-accent), var(--blog-accent));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  padding-bottom: 1px;
  transition: background-size 0.2s ease;
}

.post-body a:hover {
  background-size: 100% 2px;
}

.post-body strong {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  color: var(--blog-ink);
}

.post-body ul,
.post-body ol {
  padding-right: 0;
  list-style: none;
}

.post-body li {
  position: relative;
  padding-right: 1.6rem;
}

.post-body li + li {
  margin-top: 0.55em;
}

.post-body ul > li::before {
  content: "";
  position: absolute;
  right: 0.35rem;
  top: 0.85em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blog-accent);
}

.post-body ol {
  counter-reset: blog-ol;
}

.post-body ol > li {
  counter-increment: blog-ol;
}

.post-body ol > li::before {
  content: counter(blog-ol, persian);
  position: absolute;
  right: 0;
  top: 0.25em;
  width: 1.15rem;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.15rem;
  border-radius: 50%;
  background: var(--blog-accent-soft);
  color: #86671f;
}

.post-body li > p {
  margin: 0;
  text-align: right;
}

.post-body blockquote {
  margin: 0;
  padding: 1rem 1.25rem;
  border-radius: 1rem;
  background: var(--blog-accent-soft);
  border-right: 4px solid var(--blog-accent);
  color: #05534b;
}

.post-body blockquote p {
  text-align: right;
}

.post-body figure {
  margin: 2em 0;
}

/* تصویر تمام عرضِ ستون متن را می‌گیرد؛ ستون خودش محدودکننده است. */
.post-body figure.img--full,
.post-body figure.img--wide {
  width: 100%;
}

.post-body img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  background: var(--blog-ground);
}

.post-body figcaption {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  color: var(--blog-ink-3);
  text-align: center;
}

.post-body hr {
  border: 0;
  height: 1px;
  background: var(--blog-line);
  margin-top: 2.5em; margin-bottom: 2.5em;
}

.post-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.post-body table th,
.post-body table td {
  border: 1px solid var(--blog-line);
  padding: 0.6rem 0.8rem;
  text-align: right;
}

.post-body table th {
  background: var(--blog-ground);
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
}

/* جدول در موبایل نباید صفحه را بشکند. */
.post-body .table-scroll {
  overflow-x: auto;
}

/* ---------------------------------------------------------------- toc ---- */

.blog-toc a {
  display: block;
  padding: 0.3rem 0;
  color: var(--blog-ink-2);
  font-size: 0.875rem;
  line-height: 1.9;
  border-right: 2px solid transparent;
  padding-right: 0.75rem;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.blog-toc a:hover {
  color: var(--blog-accent-dark);
}

.blog-toc a.is-active {
  color: var(--blog-ink);
  border-right-color: var(--blog-accent);
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
}

.blog-toc a.lvl-3 {
  padding-right: 1.6rem;
  font-size: 0.82rem;
}

/* --------------------------------------------------------------- details - */

.blog-faq summary::-webkit-details-marker {
  display: none;
}

.blog-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.blog-faq summary::after {
  content: "";
  width: 9px;
  height: 9px;
  border-left: 2px solid var(--blog-ink-3);
  border-bottom: 2px solid var(--blog-ink-3);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
}

.blog-faq details[open] summary::after {
  transform: rotate(-135deg);
}

/* ------------------------------------------------------------- scrollers - */

/*
 * اسلایدر لمسی با اسنپ. کاربر موبایل انتظار دارد کارت‌ها سر جای خودشان
 * بایستند، نه اینکه وسط دو کارت رها شوند.
 */
.blog-scroller {
  display: flex;
  gap: 0.85rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 0.25rem;
}

.blog-scroller::-webkit-scrollbar {
  display: none;
}

.blog-scroller > * {
  scroll-snap-align: start;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .blog-progress,
  .blog-share,
  .post-body a,
  .blog-faq summary::after {
    transition: none;
  }
}

/* ------------------------------------------------- utilities Tailwind 3.2.7
 * lacks. line-clamp, ms-* and border-s-* all landed in 3.3 and this project
 * is on 3.2.7 with no plugins, so those class names compile to nothing at
 * all. Written here instead of pinned to a Tailwind version.
 */

.blog-clamp-2,
.blog-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-clamp-2 {
  -webkit-line-clamp: 2;
}

.blog-clamp-3 {
  -webkit-line-clamp: 3;
}

/* margin-right: auto — pushes the share row to the far edge in RTL. */
.blog-push {
  margin-right: auto;
}

/* چکیده: نوار لهجه در ابتدای کادر، مستقل از جهت متن. */
.blog-excerpt {
  border-right: 4px solid var(--blog-accent);
}

/* ==================================================== chrome: header/footer */

.blog-header {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  z-index: 50;
  /* بدون backdrop-filter: روی لایه‌ی fixed که هنگام اسکرول جابه‌جا می‌شود
     (پنهان/ظاهر شدن هدر) فلش کامپوزیت می‌سازد. */
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--blog-line);
  will-change: transform;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

/* جمع‌شدن هنگام اسکرول به پایین — فضای عمودی موقع خواندن پس داده می‌شود. */
.blog-header.is-hidden {
  transform: translateY(-100%);
}

/* بلافاصله بعد از برگشتن هدر، چند صد میلی‌ثانیه کلیک‌ناپذیر است: انگشتی که
   برای ایستادن اسکرول روی صفحه می‌زند، نباید روی دکمه‌ی منویی بنشیند که همین
   الان زیرش لغزیده. */
.blog-header.is-settling {
  pointer-events: none;
}

/* موبایل: بدون تاری پشت هدر. backdrop-filter روی یک لایه‌ی fixed که
   هنگام اسکرول جابه‌جا می‌شود، روی موبایل لایه‌ی ترکیب‌بندی جدا و فلش
   می‌سازد. */
@media (max-width: 1023px) {
  .blog-header {
    background: #fff;
    backdrop-filter: none;
  }
}

/*
 * یک ظرف برای همه‌چیز.
 *
 * قبلاً هدر ۱۱۸۰ بود و بدنه‌ی صفحه ۱۱۲۰، پس لوگو با لبه‌ی محتوا تراز نبود
 * و در دسکتاپ بیرون می‌زد. هر چیزی که لبه‌ی صفحه را تعریف می‌کند باید از
 * همین کلاس بیاید — هدر، فوتر، کاروسل‌ها، و ستون مقاله.
 */
.blog-shell {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 1024px) {
  .blog-shell {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.blog-header__inner {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.blog-header__spacer {
  height: 64px;
}

/* -------------------------------------------------------- دکمه‌ی منو ---- */

/*
 * همان کپسول سایت اصلی: حاشیه‌ی گرد و آیکون «icon-Menu» از همان فونت آیکونی.
 * در دسکتاپ هم می‌ماند، چون منوی مجله بیش از شش دسته دارد و بقیه باید جایی
 * پیدا شوند.
 */
.blog-menubtn {
  flex: none;
  height: 40px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--blog-line);
  border-radius: 100px;
  background: #fff;
  color: var(--blog-ink);
  box-shadow: 0 1px 2px rgba(20, 24, 26, 0.05);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.blog-menubtn:hover {
  box-shadow: 0 4px 12px -4px rgba(20, 24, 26, 0.22);
}

.blog-menubtn:active {
  transform: scale(0.97);
}

.blog-menubtn i {
  font-size: 22px;
  line-height: 1;
}

/* ------------------------------------------------------------ کشوی منو - */

.blog-scrim {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(10, 18, 17, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.24s ease;
}

.blog-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.blog-drawer {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 61;
  width: min(86vw, 340px);
  background: #fff;
  display: flex;
  flex-direction: column;
  /* از سمت راست می‌آید چون صفحه راست‌چین است و دکمه‌اش هم آنجاست. */
  transform: translateX(104%);
  transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1), visibility 0.28s;
  box-shadow: -18px 0 48px -24px rgba(10, 18, 17, 0.5);
  visibility: hidden;
}

.blog-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.blog-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--blog-line);
}

.blog-drawer__close {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 100px;
  border: 1px solid var(--blog-line);
  background: #fff;
  color: var(--blog-ink-2);
}

.blog-drawer__nav {
  flex: 1;
  overflow-y: auto;
  padding: 10px 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.blog-drawer__link {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  color: var(--blog-ink);
  transition: background 0.15s ease, color 0.15s ease;
}

.blog-drawer__link:hover {
  background: var(--blog-accent-soft);
  color: #86671f;
}

.blog-drawer__foot {
  padding: 14px 16px 20px;
  border-top: 1px solid var(--blog-line);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.blog-drawer__cta {
  display: block;
  text-align: center;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--blog-accent);
  color: #0c1731;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
  font-size: 0.9rem;
}

.blog-logo {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.blog-logo__mark {
  width: 32px;
  height: 32px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--blog-accent), var(--blog-accent-dark));
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 0.95rem;
}

.blog-logo__text {
  font-size: 1rem;
  color: var(--blog-ink);
}

.blog-logo__text b {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 800;
}

.blog-logo--light .blog-logo__text {
  color: #fff;
}

.blog-nav {
  display: none;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

@media (min-width: 1024px) {
  .blog-nav {
    display: flex;
  }
}

.blog-nav__link {
  padding: 7px 11px;
  border-radius: 10px;
  font-size: 0.875rem;
  color: var(--blog-ink-2);
  white-space: nowrap;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.blog-nav__link:hover {
  background: var(--blog-accent-soft);
  color: #86671f;
}

/* دسته‌ای که زیردسته دارد: زیرمنو با هاور یا فوکوس کیبورد باز می‌شود. */
.blog-nav__item {
  position: relative;
}

.blog-nav__item > .blog-nav__link::after {
  content: "";
  display: inline-block;
  margin-inline-start: 6px;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.blog-nav__sub {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 60;
  min-width: 190px;
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(15, 30, 28, 0.14);
}

.blog-nav__item:hover > .blog-nav__sub,
.blog-nav__item:focus-within > .blog-nav__sub {
  display: flex;
}

.blog-nav__sub .blog-nav__link {
  display: block;
  padding: 9px 12px;
}

.blog-drawer__sub {
  display: flex;
  flex-direction: column;
  margin: 0 14px 6px 0;
  padding-right: 10px;
  border-right: 2px solid var(--blog-accent-soft);
}

.blog-drawer__sub .blog-drawer__link {
  padding: 9px 12px;
  font-size: 0.85rem;
  color: var(--blog-ink-2);
}

.blog-nav__link--accent {
  color: var(--blog-accent-dark);
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
}

.blog-header__cta {
  margin-right: auto;
  flex: none;
  padding: 8px 15px;
  border-radius: 11px;
  background: var(--blog-accent);
  color: #0c1731;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
  font-size: 0.82rem;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.blog-header__cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -8px rgba(200, 164, 90, 0.8);
}

.blog-iconbtn {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  border: 1px solid var(--blog-line);
  background: #fff;
}

.blog-burger,
.blog-burger::before,
.blog-burger::after {
  display: block;
  width: 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--blog-ink);
  transition:
    transform 0.22s ease,
    opacity 0.22s ease;
}

.blog-burger::before,
.blog-burger::after {
  content: "";
  position: relative;
}

.blog-burger::before {
  top: -6px;
}

.blog-burger::after {
  top: 4px;
}

.blog-burger.is-open {
  background: transparent;
}

.blog-burger.is-open::before {
  transform: translateY(6px) rotate(45deg);
}

.blog-burger.is-open::after {
  transform: translateY(-4px) rotate(-45deg);
}

.blog-header__drawer {
  border-top: 1px solid var(--blog-line);
  background: #fff;
  padding: 10px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 70vh;
  overflow-y: auto;
}

/* ---------------------------------------------------------------- footer - */

/*
 * فوتر، به الگوی کارناوال.
 *
 * سه نوار روی هم: معرفی + خبرنامه، ستون‌های لینک، و نوار کپی‌رایت. در
 * موبایل ستون‌ها آکاردئون می‌شوند — چهار ستون روی هم یعنی بیست لینک پشت
 * سر هم و یک اسکرول بی‌فایده در انتهای هر صفحه.
 *
 * از details استفاده شده نه state: بدون جاوااسکریپت هم باز و بسته می‌شود
 * و محتوایش برای خزنده در DOM هست.
 */

.blog-footer {
  margin-top: 56px;
  background: #10211f;
  color: #ddd5c0;
}

.blog-footer__top {
  padding-top: 40px;
  padding-bottom: 28px;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1024px) {
  .blog-footer__top {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 48px;
    padding-top: 52px;
  }
}

.blog-footer__about {
  margin: 14px 0 18px;
  font-size: 0.875rem;
  line-height: 2.1;
  color: #a8b3c4;
  max-width: 44ch;
}

/* ---- پشتیبانی: شماره باید بزرگ‌ترین چیز این ستون باشد ---- */

.blog-footer__support {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 18px;
}

.blog-footer__support-label {
  font-size: 0.78rem;
  color: #94a3b8;
}

.blog-footer__phone {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 1.18rem;
  color: #fff;
  letter-spacing: 0.02em;
}

.blog-footer__phone:hover {
  color: var(--blog-accent);
}

.blog-footer__support-note {
  font-size: 0.75rem;
  color: #94a3b8;
}

/* ---- شبکه‌های اجتماعی ---- */

.blog-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.blog-socials a {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  color: #ddd5c0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.blog-socials a:hover {
  background: var(--blog-accent);
  color: #0c1731;
  transform: translateY(-2px);
}

.blog-socials svg {
  width: 19px;
  height: 19px;
}

/* در کشوی منو زمینه روشن است، پس همان دکمه‌ها باید برعکس شوند. */
.blog-drawer__foot .blog-socials a {
  background: var(--blog-ground);
  color: var(--blog-ink-2);
}

.blog-drawer__foot .blog-socials a:hover {
  background: var(--blog-accent);
  color: #0c1731;
}

/* ---- خبرنامه ---- */

.blog-newsletter {
  padding: 22px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-newsletter__title {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  color: #fff;
  font-size: 0.98rem;
}

.blog-newsletter__note {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 2;
  color: #a8b3c4;
}

.blog-newsletter__row {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}

.blog-newsletter__row input {
  flex: 1;
  min-width: 0;
  height: 44px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 0.9rem;
  text-align: center;
}

.blog-newsletter__row input::placeholder {
  color: #5d716d;
}

.blog-newsletter__row input:focus {
  outline: none;
  border-color: var(--blog-accent);
}

.blog-newsletter__row button {
  flex: none;
  height: 44px;
  padding: 0 20px;
  border-radius: 14px;
  background: var(--blog-accent);
  color: #0c1731;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
  font-size: 0.85rem;
  transition: opacity 0.15s ease;
}

.blog-newsletter__row button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.blog-newsletter__done {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--blog-accent);
}

/* ---- ستون‌های لینک ---- */

.blog-footer__cols {
  padding-bottom: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

@media (min-width: 768px) {
  .blog-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    padding-top: 28px;
    padding-bottom: 28px;
  }
}

@media (min-width: 1024px) {
  .blog-footer__cols {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.blog-footer__col {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-footer__col > summary {
  list-style: none;
  cursor: pointer;
  padding: 15px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  color: #fff;
  font-size: 0.92rem;
}

.blog-footer__col > summary::-webkit-details-marker {
  display: none;
}

.blog-footer__col > summary svg {
  flex: none;
  color: #94a3b8;
  transition: transform 0.2s ease;
}

.blog-footer__col[open] > summary svg {
  transform: rotate(180deg);
}

.blog-footer__col ul {
  list-style: none;
  padding: 0 0 16px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-footer__col a {
  font-size: 0.85rem;
  color: #a8b3c4;
  transition: color 0.15s ease;
}

.blog-footer__col a:hover {
  color: var(--blog-accent);
}

/*
 * در دسکتاپ آکاردئون معنا ندارد — فضا هست و بازکردن چهار ستون کار اضافه
 * است. پس details باز می‌ماند و فلش و کلیک از کار می‌افتند.
 */
@media (min-width: 768px) {
  .blog-footer__col {
    border-bottom: none;
  }

  .blog-footer__col > summary {
    padding: 0 0 14px;
    cursor: default;
    pointer-events: none;
  }

  .blog-footer__col > summary svg {
    display: none;
  }

  .blog-footer__col > ul {
    display: flex !important;
    padding-bottom: 0;
  }
}

/* ---- نشان‌ها ---- */

.blog-footer__badges {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.blog-footer__badges img {
  height: 64px;
  width: auto;
  border-radius: 10px;
  background: #fff;
  padding: 4px;
}

.blog-footer__bar {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 16px 0;
  text-align: center;
  font-size: 0.78rem;
  line-height: 2;
  color: #94a3b8;
}

/* ================================================== in-article listing rail */

/*
 * فاصله‌ی بلوک‌های داخل متن.
 *
 * هر سه نوع بلوک (اقامتگاه، مقاله‌های نزدیک، برچسب) یک فاصله می‌گیرند و
 * از همین متغیر. قبلاً هر کدام عدد خودش را داشت و وقتی دوتا نزدیک هم
 * می‌افتادند، یکی به بند بالا می‌چسبید و دیگری شناور می‌ماند.
 *
 * فاصله عمداً بزرگ‌تر از فاصله‌ی بین پاراگراف‌هاست: بلوک یک وقفه است و
 * باید دیده شود که وقفه است، وگرنه خواننده فکر می‌کند بخشی از بند قبلی است.
 */
.blog-listings {
  margin-top: var(--blog-block-gap); margin-bottom: var(--blog-block-gap);
  padding: 20px;
  border-radius: 24px;
  background: linear-gradient(180deg, var(--blog-accent-soft), #ffffff 70%);
  border: 1px solid #c8f3ec;
}

.blog-listings__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.blog-listings__title {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 1.1rem;
  color: #12265a;
  margin: 0;
}

.blog-listings__all {
  font-size: 0.82rem;
  color: var(--blog-accent-dark);
  white-space: nowrap;
}

.blog-listing {
  width: 232px;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--blog-shadow);
  transition: transform 0.2s ease;
}

.blog-listing:hover {
  transform: translateY(-3px);
}

.blog-listing__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--blog-ground);
}

.blog-listing__ph {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f3ecd9, #e8dfc6);
}

.blog-listing__price {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(4, 53, 47, 0.86);
  color: #fff;
  border-radius: 10px;
  padding: 4px 9px;
  font-size: 0.76rem;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
  backdrop-filter: blur(4px);
}

.blog-listing__price small {
  font-size: 0.68rem;
  opacity: 0.85;
}

.blog-listing__body {
  padding: 11px 12px 13px;
}

.blog-listing__name {
  font-size: 0.85rem;
  line-height: 1.8;
  margin: 0 0 6px;
  color: var(--blog-ink);
  min-height: 3.1em;
}

.blog-listing__meta {
  display: flex;
  gap: 10px;
  font-size: 0.72rem;
  color: var(--blog-ink-3);
}

/* ================================================================ comments */

.blog-section-title {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 1.25rem;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.blog-section-title__count {
  font-size: 0.75rem;
  background: var(--blog-accent-soft);
  color: #86671f;
  border-radius: 999px;
  padding: 2px 9px;
}

/* ------------------------------------------------------------------ rating */

.blog-rating {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  background: #fff;
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: var(--blog-shadow);
}

.blog-rating__summary {
  display: flex;
  align-items: center;
  gap: 8px;
}

.blog-rating__stars {
  display: flex;
  gap: 2px;
}

.blog-rating__stars svg {
  width: 17px;
  height: 17px;
}

.blog-rating__value {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 0.9rem;
  color: var(--blog-ink);
}

.blog-rating__count {
  font-size: 0.78rem;
  color: var(--blog-ink-3);
}

.blog-rating__prompt {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.blog-rating__prompt p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--blog-ink-2);
}

.blog-rating__input {
  display: flex;
  gap: 2px;
}

.blog-rating__star {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: var(--blog-ink-3);
  transition: color 0.15s, transform 0.1s;
}

.blog-rating__star:hover:not(:disabled),
.blog-rating__star:focus-visible {
  color: var(--blog-accent-dark);
  transform: scale(1.1);
}

.blog-rating__star:disabled {
  cursor: default;
  opacity: 0.6;
}

.blog-rating__star svg {
  width: 22px;
  height: 22px;
}

.blog-rating__thanks {
  font-size: 0.78rem;
  color: #86671f;
}

.blog-rating__error {
  font-size: 0.78rem;
  color: #c0392b;
}

@media (max-width: 640px) {
  .blog-rating {
    flex-direction: column;
    align-items: flex-start;
  }
}

.blog-comments {
  margin-top: 32px;
}

.blog-comments__list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-comment {
  display: flex;
  gap: 12px;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--blog-shadow);
}

.blog-comment--reply {
  margin-top: 12px;
  background: var(--blog-ground);
  box-shadow: none;
}

.blog-comment__avatar {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blog-accent-soft);
  color: #86671f;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
}

.blog-comment__avatar--alt {
  background: #e8eeed;
  color: var(--blog-ink-2);
}

.blog-comment__body {
  min-width: 0;
  flex: 1;
}

.blog-comment__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
}

.blog-comment__name {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
  font-size: 0.9rem;
}

.blog-comment__head time {
  font-size: 0.72rem;
  color: var(--blog-ink-3);
}

.blog-comment__body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 2;
  color: var(--blog-ink-2);
}

/* ------------------------------------------------------------------ form - */

.blog-form {
  background: #fff;
  border-radius: 24px;
  padding: 22px;
  box-shadow: var(--blog-shadow);
}

.blog-form__title {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  margin: 0 0 5px;
}

.blog-form__hint {
  margin: 0 0 18px;
  font-size: 0.78rem;
  color: var(--blog-ink-3);
  line-height: 1.9;
}

.blog-form__row {
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
  margin-bottom: 12px;
}

@media (min-width: 640px) {
  .blog-form__row {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-field {
  display: block;
}

.blog-field > span {
  display: block;
  font-size: 0.78rem;
  color: var(--blog-ink-2);
  margin-bottom: 6px;
}

.blog-field > span b {
  color: #e0574a;
}

.blog-field input,
.blog-field textarea {
  width: 100%;
  border: 1px solid var(--blog-line);
  background: var(--blog-ground);
  border-radius: 13px;
  padding: 11px 13px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--blog-ink);
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    box-shadow 0.15s ease;
}

.blog-field input::placeholder,
.blog-field textarea::placeholder {
  color: #a9b5b3;
}

.blog-field input:focus,
.blog-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--blog-accent);
  box-shadow: 0 0 0 4px rgba(200, 164, 90, 0.14);
}

.blog-field textarea {
  resize: vertical;
  line-height: 2;
}

.blog-form__error {
  margin: 12px 0 0;
  font-size: 0.82rem;
  color: #c0392b;
}

.blog-btn {
  margin-top: 16px;
  padding: 12px 26px;
  border: 0;
  border-radius: 13px;
  background: var(--blog-accent);
  color: #0c1731;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.blog-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(200, 164, 90, 0.9);
}

.blog-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.blog-comment-done {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--blog-accent-soft);
  border-radius: 24px;
  padding: 22px;
}

.blog-comment-done__tick {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--blog-accent);
  color: #0c1731;
  display: grid;
  place-items: center;
  font-size: 1rem;
}

.blog-comment-done__title {
  margin: 0 0 4px;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  color: #12265a;
}

.blog-comment-done__text {
  margin: 0;
  font-size: 0.85rem;
  color: #06655b;
  line-height: 1.9;
}

/* ============================================================== hero card */

/*
 * سربرگ مقاله یک کارت واحد است: مسیر راهنما، تگ، عنوان، نویسنده و چکیده همه
 * داخل همان قاب. قبلاً چکیده جعبه‌ی جدایی پایین‌تر بود و صفحه سه لبه‌ی
 * ناهماهنگ داشت.
 *
 * کارت روی تصویر می‌نشیند و رادیوس هر چهار گوشه یکسان است — نصفه‌گرد بودن
 * کارت همان چیزی است که ظاهر «وب‌سایت قدیمی» می‌دهد به‌جای «اپلیکیشن».
 */

.blog-hero {
  position: relative;
  width: 100%;
  height: clamp(210px, 42vw, 400px);
  background: var(--blog-ground);
  overflow: hidden;
}

.blog-hero img {
  object-fit: cover;
}

.blog-hero__veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(8, 20, 18, 0.55), rgba(8, 20, 18, 0.05) 55%, transparent);
}

.blog-headcard {
  position: relative;
  margin-top: -64px;
  background: #fff;
  border-radius: 26px;
  padding: 22px;
  box-shadow:
    0 2px 6px rgba(16, 33, 31, 0.05),
    0 26px 60px -28px rgba(16, 33, 31, 0.32);
}

@media (min-width: 768px) {
  .blog-headcard {
    margin-top: -84px;
    padding: 32px 34px;
    border-radius: 30px;
  }
}

.blog-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
  font-size: 0.76rem;
  color: var(--blog-ink-3);
}

.blog-crumbs a:hover {
  color: var(--blog-accent-dark);
}

.blog-headcard h1 {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 800;
  font-size: clamp(1.35rem, 1.05rem + 1.5vw, 2.15rem);
  line-height: 1.6;
  color: var(--blog-ink);
  margin: 0;
  letter-spacing: -0.2px;
}

.blog-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--blog-line);
}

.blog-byline__author {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.blog-byline__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--blog-accent-soft);
  color: #86671f;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 0.85rem;
  object-fit: cover;
}

.blog-byline__name {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
  font-size: 0.875rem;
  color: var(--blog-ink);
}

.blog-byline__meta {
  font-size: 0.8rem;
  color: var(--blog-ink-3);
}

.blog-byline__share {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

/*
 * چکیده — سرآغاز مقاله، نه یادداشت کناری.
 *
 * قبلاً یک کادر نعنایی با نوار لهجه بود و دقیقاً شبیه «جعبه‌ی نکته» به نظر
 * می‌رسید: چیزی که خواننده یاد گرفته رد کند. هر نشانه‌ای که آن را از متن
 * جدا می‌کرد حالا برداشته شده — نه زمینه، نه قاب، نه نوار.
 *
 * چیزی که جایش را گرفته همان کاری است که مجله‌های چاپی می‌کنند: چکیده
 * **بزرگ‌تر از متن** است و با همان جوهرِ تیره. اندازه اهمیت را می‌رساند،
 * رنگ زمینه فقط دسته‌بندی را.
 */
.blog-lede {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--blog-line);
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 300;
  font-size: 1.06rem;
  line-height: 2.15;
  color: var(--blog-ink);
}

@media (min-width: 768px) {
  .blog-lede {
    font-size: 1.12rem;
    line-height: 2.2;
  }
}

/* حرف اول کمی درشت‌تر: نشانه‌ی «از اینجا شروع کن»، بدون هیچ قابی. */
.blog-lede::first-letter {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  color: var(--blog-accent-dark);
}

/* ------------------------------------------------- prettier heading accent */

/*
 * نشانه‌ی کنار تیتر: یک قرص کوچک با گرادیان به‌جای خط صاف، سمت راست.
 * ارتفاعش با خودِ خط تیتر می‌آید نه با کل بلاک، پس روی تیتر دوخطی هم
 * سرِ خط اول می‌ایستد.
 */
.post-body h2::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0.42em;
  width: 5px;
  height: 0.95em;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--blog-accent), var(--blog-accent-dark));
  box-shadow: 0 2px 8px -2px rgba(200, 164, 90, 0.75);
}

.post-body h2 {
  padding-right: 15px;
}

.post-body h3 {
  padding-right: 15px;
  position: relative;
}

.post-body h3::before {
  content: "";
  position: absolute;
  right: 1px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blog-accent);
  opacity: 0.55;
}

/* ========================================================== coloured chips */

/*
 * رنگ تگ با کلید ذخیره می‌شود نه با کد رنگ، پس پالت اینجاست و عوض‌کردن یک
 * رنگ همه‌ی تگ‌های آن دسته را با هم عوض می‌کند.
 */

.blog-chip--teal {
  background: #f6edd3;
  color: #86671f;
}
.blog-chip--teal:hover {
  background: #efdcab;
}

.blog-chip--violet {
  background: #efe7ff;
  color: #5b35a8;
}
.blog-chip--violet:hover {
  background: #e3d6ff;
}

.blog-chip--amber {
  background: #fff0d4;
  color: #8a5a0f;
}
.blog-chip--amber:hover {
  background: #ffe6b8;
}

.blog-chip--rose {
  background: #ffe4ec;
  color: #a32a55;
}
.blog-chip--rose:hover {
  background: #ffd3e1;
}

.blog-chip--sky {
  background: #dff0ff;
  color: #12608f;
}
.blog-chip--sky:hover {
  background: #cbe7ff;
}

.blog-chip--lime {
  background: #e7f8d4;
  color: #47701a;
}
.blog-chip--lime:hover {
  background: #daf3bf;
}

/* ============================================== wiki-style automatic links */

/*
 * لینک خودکار عمداً از لینک دستی نویسنده کم‌رنگ‌تر است: نویسنده که لینک
 * می‌گذارد قصد دارد، ولی این یکی را سیستم گذاشته و نباید چشم را از متن بدزدد.
 */
.post-body a.auto-link {
  background-image: linear-gradient(var(--blog-accent-soft), var(--blog-accent-soft));
  background-size: 100% 6px;
  background-position: 0 88%;
  color: inherit;
  border-bottom: 1px dashed rgba(134, 103, 31, 0.55);
  padding-bottom: 0;
}

.post-body a.auto-link:hover {
  background-size: 100% 100%;
  border-bottom-color: var(--blog-accent-dark);
}

/* ================================================= blocks inside the prose */

/*
 * این بلوک‌ها از ستون متن بیرون نمی‌زنند ولی حاشیه‌ی بیشتری می‌گیرند تا
 * خواننده بفهمد وقفه است نه ادامه‌ی پاراگراف.
 */
.blog-inline {
  margin: var(--blog-block-gap) 0;
  padding: 20px;
  border-radius: 22px;
  max-width: none;
}

.blog-inline__eyebrow {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--blog-accent-dark);
}

.blog-inline__title {
  margin: 0 0 16px;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--blog-ink);
  padding: 0;
}

.blog-inline__title::before {
  display: none;
}

.blog-inline--related {
  background: #fff;
  border: 1px solid var(--blog-line);
  box-shadow: var(--blog-shadow);
}

.blog-inline--tags {
  background: linear-gradient(180deg, #fbf9f4, #ffffff);
  border: 1px solid var(--blog-line);
}

.blog-inline__grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .blog-inline__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.blog-mini {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  border-radius: 14px;
  padding: 8px;
  transition: background 0.15s ease;
}

.blog-mini:hover {
  background: var(--blog-ground);
}

@media (min-width: 640px) {
  .blog-mini {
    display: block;
    padding: 0;
  }
}

.blog-mini__media {
  position: relative;
  display: block;
  flex: none;
  width: 78px;
  height: 60px;
  border-radius: 11px;
  overflow: hidden;
  background: var(--blog-ground);
}

@media (min-width: 640px) {
  .blog-mini__media {
    width: 100%;
    height: 92px;
    margin-bottom: 9px;
  }
}

.blog-mini__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f3ecd9, #e8dfc6);
}

.blog-mini__body {
  display: block;
  min-width: 0;
}

.blog-mini__title {
  display: -webkit-box;
  font-size: 0.83rem;
  line-height: 1.85;
  color: var(--blog-ink);
}

.blog-mini__meta {
  display: block;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--blog-ink-3);
}

.blog-inline__chips {
  gap: 8px;
  flex-wrap: nowrap;
}

/* ==================================================== header search */

.blog-search {
  position: relative;
}

.blog-header__tools {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  flex: none;
}

.blog-search__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  width: min(92vw, 380px);
  background: #fff;
  border: 1px solid var(--blog-line);
  border-radius: 18px;
  box-shadow: var(--blog-shadow-lg);
  padding: 12px;
  z-index: 60;
}

.blog-search__input {
  width: 100%;
  border: 1px solid var(--blog-line);
  background: var(--blog-ground);
  border-radius: 12px;
  padding: 10px 13px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--blog-ink);
}

.blog-search__input:focus {
  outline: none;
  background: #fff;
  border-color: var(--blog-accent);
  box-shadow: 0 0 0 4px rgba(200, 164, 90, 0.14);
}

.blog-search__results {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 56vh;
  overflow-y: auto;
}

.blog-search__note {
  margin: 0;
  padding: 10px 4px;
  font-size: 0.82rem;
  color: var(--blog-ink-3);
}

.blog-search__hit {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border-radius: 12px;
  transition: background 0.15s ease;
}

.blog-search__hit:hover {
  background: var(--blog-ground);
}

.blog-search__thumb {
  position: relative;
  flex: none;
  width: 46px;
  height: 40px;
  border-radius: 9px;
  overflow: hidden;
  background: var(--blog-ground);
}

.blog-search__hitbody {
  min-width: 0;
}

.blog-search__hittitle {
  display: -webkit-box;
  font-size: 0.83rem;
  line-height: 1.75;
  color: var(--blog-ink);
}

.blog-search__hitcat {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: var(--blog-accent-dark);
}

.blog-search__all {
  margin-top: 6px;
  width: 100%;
  border: 0;
  border-radius: 12px;
  background: var(--blog-accent-soft);
  color: #86671f;
  padding: 10px;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
  font-size: 0.82rem;
  cursor: pointer;
}

.blog-search__all:hover {
  background: #efdcab;
}

/* ============================================================== carousels */

/* همان ظرفِ هدر و بدنه، تا لبه‌ی کارت‌ها با لبه‌ی متن تراز بماند. */
.blog-carousel {
  width: 100%;
  max-width: 1120px;
  margin: 44px auto 0;
  padding-left: 16px;
  padding-right: 16px;
}

@media (min-width: 1024px) {
  .blog-carousel {
    padding-left: 24px;
    padding-right: 24px;
    margin-top: 56px;
  }
}

/* آخرین کاروسل نباید به فوتر بچسبد. */
.blog-carousel:last-of-type {
  margin-bottom: 12px;
}

.blog-carousel__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.blog-carousel__title {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 1.15rem;
  color: var(--blog-ink);
  margin: 0;
}

.blog-carousel__tools {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.blog-carousel__all {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--blog-line);
  background: #fff;
  font-size: 0.8rem;
  color: var(--blog-ink-2);
  white-space: nowrap;
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.blog-carousel__all:hover {
  border-color: var(--blog-accent);
  color: var(--blog-accent-dark);
}

.blog-carousel__arrows {
  display: none;
  gap: 6px;
}

@media (min-width: 768px) {
  .blog-carousel__arrows {
    display: flex;
  }
}

.blog-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--blog-line);
  background: #fff;
  color: var(--blog-ink-2);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    opacity 0.15s ease;
}

.blog-arrow:hover:not(:disabled) {
  border-color: var(--blog-accent);
  color: var(--blog-accent-dark);
}

.blog-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.blog-carousel__rail {
  gap: 14px;
  padding-bottom: 6px;
}

/* ------------------------------------------------------------- post card - */

/*
 * تصویر تمام‌کارت با متن روی گرادیان، مثل کارت‌های مقصد صفحه‌ی اصلی سایت.
 * عکس نویسنده کوچک و گرد داخل همان لایه می‌نشیند تا کارت یک واحد بماند.
 */
.blog-pcard {
  flex: none;
  width: 74vw;
  max-width: 282px;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--blog-shadow);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

@media (min-width: 768px) {
  .blog-pcard {
    width: 282px;
  }
}

.blog-pcard:hover {
  transform: translateY(-4px);
  box-shadow: var(--blog-shadow-lg);
}

.blog-pcard__media {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--blog-ground);
  overflow: hidden;
}

.blog-pcard__media img {
  transition: transform 0.5s ease;
}

.blog-pcard:hover .blog-pcard__media img {
  transform: scale(1.05);
}

.blog-pcard__ph {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(135deg, #f3ecd9, #cfeae6);
}

.blog-pcard__veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to top,
    rgba(8, 20, 18, 0.88) 0%,
    rgba(8, 20, 18, 0.55) 32%,
    rgba(8, 20, 18, 0.05) 62%,
    transparent 100%
  );
}

.blog-pcard__cat {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #86671f;
  font-size: 0.68rem;
  backdrop-filter: blur(6px);
}

.blog-pcard__body {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  padding: 14px;
  color: #fff;
}

.blog-pcard__title {
  display: -webkit-box;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.85;
  margin-bottom: 9px;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.blog-pcard__foot {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.86);
}

.blog-pcard__author {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.blog-pcard__avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
  flex: none;
}

.blog-pcard__avatar--letter {
  display: grid;
  place-items: center;
  background: var(--blog-accent);
  color: #0c1731;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 0.66rem;
}

.blog-pcard__read {
  margin-right: auto;
  white-space: nowrap;
  opacity: 0.82;
}


/* ================================================= archive: category/tag/author */

/*
 * سرصفحه‌ی آرشیو.
 *
 * همان کارت سفیدِ بالای مقاله، با همان شعاع و سایه — تا سه صفحه‌ی آرشیو
 * حس «جای دیگری از همان مجله» بدهند نه «قالب دیگری».
 */
.blog-archivehead {
  margin-top: 20px;
  margin-bottom: 24px;
  padding: 22px;
  border-radius: 24px;
  background: var(--blog-surface);
  box-shadow: var(--blog-shadow);
}

@media (min-width: 768px) {
  .blog-archivehead {
    margin-top: 28px;
    padding: 28px 30px;
  }
}

.blog-archivehead__main {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.blog-archivehead__avatar {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 22px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .blog-archivehead__avatar {
    width: 84px;
    height: 84px;
  }
}

.blog-archivehead__eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--blog-accent-dark);
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
}

.blog-archivehead__title {
  margin-top: 4px;
  font-family: var(--font-vazir), var(--font-vazir), Tahoma, sans-serif;
  font-size: 1.55rem;
  line-height: 1.5;
  color: var(--blog-ink);
}

@media (min-width: 768px) {
  .blog-archivehead__title {
    font-size: 2rem;
  }
}

.blog-archivehead__lead {
  margin-top: 10px;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 300;
  font-size: 0.92rem;
  line-height: 2.1;
  color: var(--blog-ink-2);
  max-width: 62ch;
}

.blog-archivehead__count {
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--blog-ink-3);
}

.blog-archivehead__block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--blog-line);
}

.blog-archivehead__blocktitle {
  margin-bottom: 10px;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
  font-size: 0.82rem;
  color: var(--blog-ink-2);
}

.blog-archivehead__chips {
  margin-top: 16px;
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
}

/* ------------------------------------------------------------------ pager - */

.blog-pager {
  margin: 28px 0 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.blog-pager__num,
.blog-pager__step {
  min-width: 40px;
  height: 40px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--blog-surface);
  border: 1px solid var(--blog-line);
  font-size: 0.85rem;
  color: var(--blog-ink-2);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.blog-pager__num:hover,
.blog-pager__step:hover {
  border-color: var(--blog-accent);
  color: #86671f;
}

.blog-pager__num.is-active {
  background: var(--blog-accent);
  border-color: var(--blog-accent);
  color: #0c1731;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
}


/* ================================================================ gallery */

/*
 * گالری داخل متن — اسلایدری یا کنار هم.
 *
 * ## چرا اسلایدر بدون جاوااسکریپت است
 *
 * متن مقاله HTML خام است و هیچ کامپوننت ری‌اکتی داخلش نیست. `scroll-snap`
 * همان رفتار را می‌دهد: با انگشت، با چرخ ماوس، و با کلید جهت. مهم‌تر اینکه
 * هر تصویر در DOM هست، پس خزنده همه را می‌بیند — چیزی که اسلایدرهای
 * جاوااسکریپتی معمولاً از دست می‌دهند.
 */

.post-gallery {
  margin: var(--blog-block-gap) 0;
}

.post-gallery figure {
  margin: 0;
}

.post-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 18px;
}

.post-gallery figcaption {
  margin-top: 8px;
  font-size: 0.78rem;
  line-height: 1.9;
  color: var(--blog-ink-3);
  text-align: center;
}

/* ---- اسلایدری ---- */

.post-gallery--slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* فضای لبه‌ها تا تصویر بعدی کمی پیدا باشد — همان چیزی که می‌گوید
     «ادامه دارد» و بدون آن هیچ نشانه‌ای از اسلایدر بودن نیست. */
  padding-bottom: 6px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.post-gallery--slider::-webkit-scrollbar {
  height: 5px;
}

.post-gallery--slider::-webkit-scrollbar-thumb {
  border-radius: 100px;
  background: var(--blog-line);
}

.post-gallery--slider > figure {
  flex: 0 0 88%;
  scroll-snap-align: center;
}

@media (min-width: 768px) {
  .post-gallery--slider > figure {
    flex-basis: 72%;
  }
}

.post-gallery--slider > figure img {
  aspect-ratio: 16 / 10;
}

/* ---- کنار هم ---- */

.post-gallery--grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
  .post-gallery--grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* سه تصویر در یک ردیف کامل می‌نشینند؛ چهار تا یعنی یکی تنها می‌ماند.
     در آن حالت دو در دو بهتر است. */
  .post-gallery--grid[data-count="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.post-gallery--grid img {
  aspect-ratio: 1 / 1;
  border-radius: 14px;
}

/* ------------------------------------------------ گالری داخل ادیتور ---- */

/*
 * شکل ادیتور عمداً شکل صفحه نیست — فقط باید دیده شود که یک گالری با چند
 * تصویر اینجاست. تقلید دقیقِ رندرر در ادیتور یعنی دو تعریف که دیر یا زود
 * از هم جدا می‌شوند.
 */
.editor-gallery {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px;
  border: 1px dashed #d2d2d7;
  border-radius: 12px;
  background: #fafafa;
}

.editor-gallery img {
  flex: none;
  width: 88px;
  height: 66px;
  object-fit: cover;
  border-radius: 8px;
  margin: 0;
}

.ProseMirror .editor-gallery.ProseMirror-selectednode {
  border-color: var(--blog-accent);
  background: var(--blog-accent-soft);
}

/* ------------------------------------------------------------ جدول و CTA */

/* سلول‌های جدول از ادیتور پاراگراف دارند؛ فاصله‌ی پاراگراف بدنه اینجا جدول را
   بی‌دلیل بلند می‌کند. */
.post-body table p {
  margin: 0;
}

/*
 * دکمه‌ی اقدام.
 *
 * موبایل‌اول: متن بالا، دکمه‌ی تمام‌پهنا پایین — جایی که انگشت هست. در دسکتاپ
 * کنار هم. ویژگی‌های فیزیکی، نه منطقی: postcss-preset-env منطقی‌ها را به LTR
 * تبدیل می‌کند (TAILWIND-TOKENS.md).
 */
.post-cta {
  margin: 28px 0;
  padding: 20px 22px;
  border-radius: 20px;
  background: var(--blog-accent-soft);
  box-shadow: var(--blog-shadow);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.post-body .post-cta p {
  margin: 0;
}

.post-cta__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.post-cta__title {
  color: var(--blog-ink);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.8;
}

.post-cta__text {
  color: var(--blog-ink);
  opacity: 0.78;
  font-size: 0.95rem;
  line-height: 1.9;
}

.post-body .post-cta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  background: var(--blog-ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.post-body .post-cta__btn:hover {
  background: #000;
  color: #fff;
}

@media (min-width: 1024px) {
  .post-cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .post-body .post-cta__btn {
    flex: none;
  }
}

/* ---------------------------------------------- جدول و CTA داخل ادیتور پنل */

.ProseMirror table.editor-table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 12px 0;
}

.ProseMirror table.editor-table th,
.ProseMirror table.editor-table td {
  position: relative;
  border: 1px solid #e5e5e6;
  padding: 6px 8px;
  vertical-align: top;
  min-width: 60px;
}

.ProseMirror table.editor-table th {
  background: #f7f7f7;
  font-weight: 700;
}

.ProseMirror table.editor-table th p,
.ProseMirror table.editor-table td p {
  margin: 0;
}

/* prosemirror-tables کلاس selectedCell را روی سلول‌های انتخاب‌شده می‌گذارد. */
.ProseMirror table.editor-table .selectedCell::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(200, 164, 90, 0.16);
  pointer-events: none;
}

.ProseMirror .editor-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px dashed #c8a45a;
  border-radius: 14px;
  background: #f6edd3;
  cursor: pointer;
}

.ProseMirror .editor-cta span {
  flex: none;
  border-radius: 999px;
  background: #0c1731;
  color: #fff;
  padding: 4px 12px;
  font-size: 12px;
}

.ProseMirror .editor-cta.ProseMirror-selectednode {
  outline: 2px solid #c8a45a;
  outline-offset: 2px;
}

/* بیوی نویسنده چندخطی نوشته می‌شود؛ خط‌شکن‌هایش حفظ شود. */
.blog-archivehead__lead {
  white-space: pre-line;
}

/* نظرها متن ساده‌اند؛ خط‌شکن نظرهای قدیمی وردپرس (و نظرهای تازه) حفظ شود. */
.blog-comment__body p {
  white-space: pre-line;
}

/* ------------------------------------------------ اسلایدر صفحه‌ی اول مجله */

/*
 * «صحنه + فهرست» (الگوی مجله‌ی جاباما). موبایل: صحنه بالا و فهرست یک ریل
 * افقی زیرش. از ۱۰۲۴: فهرست عمودی سمت راست، صحنه سمت چپ. ویژگی‌های
 * فیزیکی، نه منطقی (postcss-preset-env منطقی‌ها را LTR می‌کند).
 */
.blog-slider {
  margin: 4px 0 36px;
}

.blog-slider__grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* -------------------------------------------------------------- صحنه */

.blog-slider__stage {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: 26px;
  overflow: hidden;
  isolation: isolate;
  background: #0e1416;
  box-shadow: var(--blog-shadow-lg);
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}

.blog-slider__slide {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.7s ease,
    visibility 0s linear 0.7s;
}

.blog-slider__slide.is-active {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease;
}

.blog-slider__link {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  color: #fff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.blog-slider__media {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* زوم آهسته به بیرون روی اسلاید فعال — حس حرکت بدون پرش. */
.blog-slider__img {
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 7s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.blog-slider__slide.is-active .blog-slider__img {
  transform: scale(1);
}

.blog-slider__ph {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  font-size: 5rem;
  color: rgba(255, 255, 255, 0.85);
  background: linear-gradient(145deg, var(--blog-accent) 0%, var(--blog-accent-dark) 55%, #047a86 100%);
}

.blog-slider__veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 14, 16, 0.25) 0%,
    rgba(10, 14, 16, 0) 22%,
    rgba(10, 14, 16, 0.2) 45%,
    rgba(10, 14, 16, 0.88) 100%
  );
}

.blog-slider__body {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 18px 20px;
}

/* متن اسلاید با کمی تأخیر از پایین می‌آید. */
.blog-slider__body > * {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.blog-slider__slide.is-active .blog-slider__body > * {
  opacity: 1;
  transform: none;
}

.blog-slider__slide.is-active .blog-slider__body > :nth-child(2) {
  transition-delay: 0.08s;
}

.blog-slider__slide.is-active .blog-slider__body > :nth-child(n + 3) {
  transition-delay: 0.16s;
}

.blog-slider__cat {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 0.7rem;
  line-height: 1;
  padding: 7px 12px;
  border-radius: 999px;
  color: #053a34;
  background: var(--blog-accent);
}

/* دو کلاس: h2 سراسری display: flow-root می‌گیرد و line-clamp را خنثی می‌کند. */
.blog-slider .blog-slider__title {
  margin: 0;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.85;
  color: #fff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.blog-slider__excerpt {
  display: none;
  font-size: 0.9rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.85);
}

.blog-slider__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.82);
}

.blog-slider__author {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.blog-slider__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(255, 255, 255, 0.75);
}

.blog-slider__avatar--letter {
  display: inline-grid;
  place-items: center;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.2);
}

.blog-slider__counter,
.blog-slider__pause {
  position: absolute;
  top: 14px;
  z-index: 2;
  color: #fff;
  background: rgba(10, 14, 16, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.blog-slider__counter {
  right: 14px;
  padding: 6px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  line-height: 1;
  pointer-events: none;
}

.blog-slider__pause {
  left: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* -------------------------------------------------------------- فهرست */

.blog-slider__list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px 0 4px;
}

.blog-slider__list::-webkit-scrollbar {
  display: none;
}

.blog-slider__item {
  position: relative;
  flex: none;
  width: 80%;
  max-width: 300px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 18px;
  border: 1px solid var(--blog-line);
  background: #fff;
  color: var(--blog-ink);
  font: inherit;
  text-align: right;
  cursor: pointer;
  overflow: hidden;
  scroll-snap-align: start;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.blog-slider__item:hover {
  border-color: var(--blog-accent-soft);
}

.blog-slider__item.is-active {
  border-color: var(--blog-accent);
  box-shadow: var(--blog-shadow);
}

.blog-slider__thumb {
  position: relative;
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--blog-ground);
}

.blog-slider__thumbimg {
  object-fit: cover;
  transition: transform 0.4s ease;
}

.blog-slider__item:hover .blog-slider__thumbimg,
.blog-slider__item.is-active .blog-slider__thumbimg {
  transform: scale(1.08);
}

.blog-slider__thumbph {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  place-items: center;
  color: #86671f;
  background: var(--blog-accent-soft);
}

.blog-slider__itemtext {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blog-slider__itemtitle {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
  font-size: 0.8rem;
  line-height: 1.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s ease;
}

.blog-slider__item.is-active .blog-slider__itemtitle {
  color: var(--blog-accent-dark);
}

.blog-slider__itemmeta {
  font-size: 0.66rem;
  color: var(--blog-ink-3);
}

/* نوار پیشرفت آیتم فعال — تا اسلاید بعد چقدر مانده. از راست پر می‌شود. */
.blog-slider__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  border-radius: 3px;
  background: var(--blog-accent);
}

.blog-slider__item.is-active .blog-slider__progress {
  width: 100%;
}

.blog-slider.is-playing .blog-slider__item.is-active .blog-slider__progress {
  animation: blog-slider-progress 6.5s linear forwards;
}

@keyframes blog-slider-progress {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* ------------------------------------------------------------ تبلت */

@media (min-width: 768px) {
  .blog-slider__stage {
    aspect-ratio: 16 / 9;
    border-radius: 28px;
  }

  .blog-slider__body {
    padding: 26px 30px;
    gap: 10px;
  }

  .blog-slider .blog-slider__title {
    font-size: 1.55rem;
    line-height: 1.75;
  }

  .blog-slider__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 640px;
  }

  .blog-slider__item {
    width: 300px;
  }
}

/* ----------------------------------------------------------- دسکتاپ */

@media (min-width: 1024px) {
  .blog-slider {
    margin: 8px 0 44px;
  }

  .blog-slider__grid {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
  }

  /* در RTL ستون اول سمت راست است؛ فهرست آنجا می‌نشیند، مثل الگو. */
  .blog-slider__list {
    order: -1;
    flex-direction: column;
    height: 470px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-snap-type: y proximity;
    padding: 0;
  }

  .blog-slider__item {
    width: 100%;
    max-width: none;
    flex: 1 0 84px;
    padding: 10px;
  }

  .blog-slider__item.is-active {
    transform: translateX(-4px);
  }

  .blog-slider__thumb {
    width: 92px;
    height: 68px;
  }

  .blog-slider__itemtitle {
    font-size: 0.86rem;
  }

  .blog-slider__stage {
    aspect-ratio: auto;
    height: 470px;
    border-radius: 30px;
  }

  .blog-slider__veil {
    background:
      linear-gradient(0deg, rgba(10, 14, 16, 0.92) 0%, rgba(10, 14, 16, 0.55) 38%, rgba(10, 14, 16, 0) 68%),
      linear-gradient(180deg, rgba(10, 14, 16, 0.3) 0%, rgba(10, 14, 16, 0) 20%);
  }

  .blog-slider__body {
    padding: 36px 40px;
    gap: 12px;
  }

  .blog-slider .blog-slider__title {
    font-size: 1.8rem;
    line-height: 1.75;
    max-width: 720px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blog-slider__slide,
  .blog-slider__slide.is-active,
  .blog-slider__img,
  .blog-slider__body > *,
  .blog-slider__item {
    transition: none;
  }

  .blog-slider__img,
  .blog-slider__slide.is-active .blog-slider__img {
    transform: none;
  }

  .blog-slider.is-playing .blog-slider__item.is-active .blog-slider__progress {
    animation: none;
  }
}

/*
 * موبایل: ریل فهرست تا لبه‌ی صفحه می‌رود و کارت بعدی بیشتر پیداست؛ پایینش
 * جا دارد تا سایه و نوار پیشرفت بریده نشوند. (کلاس‌ها blog-slider هستند نه
 * blog-hero: صفحه‌ی مقاله از قبل .blog-hero با ارتفاع ۲۱۰px و overflow
 * hidden دارد و اسلایدر را از وسط می‌برید.)
 */
.blog-slider__grid {
  gap: 14px;
}

.blog-slider__list {
  margin: 0 -16px;
  padding: 4px 16px 14px;
  scroll-padding: 0 16px;
}

.blog-slider__item {
  width: 72%;
  max-width: 270px;
}

@media (min-width: 768px) {
  .blog-slider__item {
    width: 290px;
    max-width: none;
  }
}

@media (min-width: 1024px) {
  .blog-slider__grid {
    gap: 16px;
  }

  .blog-slider__list {
    margin: 0;
    padding: 0;
  }

  .blog-slider__item {
    width: 100%;
  }
}

/* ------------------------------------------------ نقشه/ویدیوی جاسازی‌شده */

.post-body .post-embed {
  margin: 28px 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--blog-ground);
  box-shadow: var(--blog-shadow);
  aspect-ratio: 4 / 3;
}

.post-body .post-embed--video {
  aspect-ratio: 16 / 9;
}

@media (min-width: 768px) {
  .post-body .post-embed--map {
    aspect-ratio: 16 / 9;
  }
}

.post-body .post-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.ProseMirror .editor-embed {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px dashed #86671f;
  border-radius: 14px;
  background: #eefafb;
  cursor: pointer;
}

.ProseMirror .editor-embed span {
  font-size: 11px;
  color: #64748b;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ProseMirror .editor-embed.ProseMirror-selectednode {
  outline: 2px solid #c8a45a;
  outline-offset: 2px;
}

/* ---- شیت درخواست تبلیغ (موبایل: از پایین؛ دسکتاپ: کارت وسط) ---- */

.blog-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(8, 20, 18, 0.5);
  backdrop-filter: blur(4px);
  animation: blog-sheet-fade 0.2s ease;
}

.blog-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: 12px 22px calc(22px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  border-radius: 28px 28px 0 0;
  background: #fff;
  color: var(--blog-ink);
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
  animation: blog-sheet-up 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}

@media (min-width: 640px) {
  .blog-sheet {
    align-items: center;
  }

  .blog-sheet__panel {
    padding: 28px 28px 24px;
    border-radius: 28px;
  }

  .blog-sheet__handle {
    display: none;
  }
}

.blog-sheet__handle {
  align-self: center;
  width: 40px;
  height: 4px;
  margin-bottom: 14px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.14);
}

.blog-sheet__check {
  align-self: center;
  width: 54px;
  height: 54px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--blog-accent-soft);
  color: var(--blog-accent-dark);
}

.blog-sheet__title {
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 1.08rem;
}

.blog-sheet__text {
  margin: 8px 0 16px;
  font-size: 0.86rem;
  line-height: 2;
  color: var(--blog-ink-2);
}

.blog-sheet__panel textarea {
  width: 100%;
  margin-bottom: 14px;
  padding: 14px;
  border-radius: 16px;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
  background: #fbf9f4;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.9;
  text-align: right;
  resize: none;
}

.blog-sheet__panel textarea:focus {
  outline: none;
  border-color: var(--blog-accent);
  background: #fff;
}

.blog-sheet__primary,
.blog-sheet__ghost {
  width: 100%;
  height: 50px;
  border-radius: 16px;
  font-size: 0.95rem;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 500;
}

.blog-sheet__primary {
  background: var(--blog-accent);
  color: #0c1731;
}

.blog-sheet__ghost {
  margin-top: 6px;
  background: transparent;
  color: var(--blog-ink-2);
}

.blog-sheet__primary:disabled,
.blog-sheet__ghost:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes blog-sheet-up {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
}

@keyframes blog-sheet-fade {
  from {
    opacity: 0;
  }
}

/* ===================================================== کارت معرفی کسب‌وکار */

/*
 * نود `agencyCard` (content.render.ts). موبایل‌اول: عکس بالا، متن پایین،
 * دکمه‌ی تماس تمام‌پهنا. از ۱۰۲۴px کارت ویژه دو ستونه می‌شود.
 *
 * ویژگی‌های فیزیکی (right/left)، نه منطقی — postcss-preset-env منطقی‌ها را
 * LTR می‌کند (TAILWIND-TOKENS.md). چون این‌جا همه‌چیز RTL است، «right» یعنی
 * ابتدای خط.
 *
 * چندین قاعده‌ی `.post-body` (نقطه‌ی لیست، نشانه‌ی کنار h3، خط‌زیر لینک،
 * justify) باید داخل کارت خاموش شود؛ برای همین همه با `.post-body .agency`
 * شروع می‌شوند و از آن‌ها قوی‌ترند.
 */
.post-body .agency {
  margin: var(--blog-block-gap) 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--blog-line);
  border-radius: 20px;
  background: var(--blog-surface);
  box-shadow: var(--blog-shadow);
}

.post-body .agency + .agency {
  margin-top: 14px;
}

.post-body .agency p {
  margin: 0;
  text-align: right;
}

.agency__main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 20px;
  line-height: 1.9;
}

.post-body .agency h2,
.post-body .agency h3 {
  margin: 0;
  padding-right: 0;
  font-size: 1.15rem;
  line-height: 1.6;
}

.post-body .agency h2::before,
.post-body .agency h3::before {
  display: none;
}

.post-body .agency h2 {
  font-size: 1.4rem;
}

.agency__area {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--blog-ink-3);
  font-size: 0.85rem;
}

.agency__area::before {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7Zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.post-body .agency__summary {
  color: var(--blog-ink-2);
  font-size: 0.96rem;
  line-height: 2;
}

.post-body .agency__services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.post-body .agency__services li {
  margin: 0;
  padding: 1px 12px;
  border-radius: 999px;
  background: var(--blog-ground);
  color: var(--blog-ink-2);
  font-size: 0.82rem;
  line-height: 1.9;
}

.post-body .agency__services li::before {
  display: none;
}

.agency__facts {
  display: grid;
  gap: 10px;
  margin: 2px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--blog-line);
  font-size: 0.9rem;
}

.agency__facts > div {
  display: grid;
  gap: 1px;
}

.agency__facts dt {
  color: var(--blog-ink-3);
  font-size: 0.78rem;
}

.agency__facts dd {
  margin: 0;
  color: var(--blog-ink);
}

.agency__facts dd span {
  display: block;
}

.agency__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.post-body .agency__call {
  display: inline-flex;
  flex: 1 1 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--blog-ink);
  background-image: none;
  color: #fff;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  white-space: nowrap;
  transition: transform 0.15s ease, background-color 0.15s ease;
}

.post-body .agency__call:hover {
  background-color: #000;
  background-size: 0;
  transform: translateY(-1px);
}

.agency__call::before {
  content: "";
  flex: none;
  width: 17px;
  height: 17px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1L6.6 10.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1L6.6 10.8Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.post-body .agency__call--alt {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--blog-line);
  color: var(--blog-ink);
}

.post-body .agency__call--alt:hover {
  background-color: var(--blog-ground);
}

.agency__call bdi {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ------------------------------------------------------------ کارت ویژه */

.post-body .agency--featured {
  position: relative;
  border-color: transparent;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(200, 164, 90, 0.22), transparent 55%),
    linear-gradient(165deg, #0e1c1b 0%, #0c1731 55%, #0a2a27 100%);
  box-shadow: var(--blog-shadow-lg), 0 0 0 1px rgba(200, 164, 90, 0.35);
  color: #fff;
}

.agency__media {
  position: relative;
  margin: 0;
  background: #0b1514;
}

/* `.post-body figure` (عکس‌های متن) margin و عرض خودش را دارد؛ کارت نباید. */
.post-body .agency__media {
  margin: 0;
  max-width: none;
}

.post-body .agency__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 852 / 462;
  object-fit: cover;
  border-radius: 0;
}

.agency--featured .agency__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(14, 28, 27, 0.85));
  pointer-events: none;
}

.agency--featured .agency__main {
  gap: 12px;
  padding: 20px 20px 22px;
}

.agency__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px 3px 14px;
  border-radius: 999px;
  background: var(--blog-accent);
  color: #0a1329;
  font-family: var(--font-vazir), Tahoma, sans-serif; font-weight: 700;
  font-size: 0.8rem;
  line-height: 1.9;
}

.agency__badge::before {
  content: "★";
  font-size: 0.85em;
}

.post-body .agency--featured h2,
.post-body .agency--featured h3,
.post-body .agency--featured strong {
  color: #fff;
}

.agency--featured .agency__area {
  color: rgba(255, 255, 255, 0.7);
}

.post-body .agency--featured .agency__summary {
  color: rgba(255, 255, 255, 0.84);
}

.post-body .agency--featured .agency__services li {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.agency--featured .agency__facts {
  border-top-color: rgba(255, 255, 255, 0.18);
}

.agency--featured .agency__facts dt {
  color: rgba(255, 255, 255, 0.6);
}

.agency--featured .agency__facts dd {
  color: #fff;
}

.post-body .agency--featured .agency__call {
  background: var(--blog-accent);
  color: #0a1329;
}

.post-body .agency--featured .agency__call:hover {
  background-color: #2ff0d6;
}

@media (min-width: 768px) {
  .agency__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .post-body .agency__call {
    flex: 0 0 auto;
  }
}

@media (min-width: 1024px) {
  .post-body .agency--featured {
    flex-direction: row;
    align-items: stretch;
  }

  .post-body .agency--featured .agency__media {
    flex: 0 0 44%;
  }

  .post-body .agency--featured .agency__media img {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .agency--featured .agency__media::after {
    background: linear-gradient(270deg, transparent 55%, rgba(14, 28, 27, 0.85));
  }

  .agency--featured .agency__main {
    flex: 1;
    justify-content: center;
    padding: 26px 28px;
  }

  .agency--featured .agency__facts {
    grid-template-columns: 1fr;
  }
}

/* داخل ادیتور فقط معلوم است این‌جا یک کارت هست. */
.ProseMirror .editor-agency {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 14px 16px;
  border: 1px dashed #0c1731;
  border-radius: 14px;
  background: #f7f3ea;
  cursor: grab;
}

.ProseMirror .editor-agency span {
  color: #64748b;
  font-size: 12px;
}

.ProseMirror .editor-agency.ProseMirror-selectednode {
  outline: 2px solid #c8a45a;
  outline-offset: 2px;
}