/* ==========================================================================
   لایه‌ی قالب‌های PHP.

   طرح v9 این چیدمان‌های تکراری را با style درون‌خطی نوشته بود (چون نمونه‌ی
   ایستا بود و یک‌بار مصرف). در قالب همان‌ها ده‌ها بار تکرار می‌شوند، پس
   اینجا کلاس شده‌اند.

   عمداً فایل جداست و به kh-theme.css اضافه نشده: آن فایل خروجی مستقیم
   سیستم طراحی است و ممکن است دوباره تولید شود. چیزی که مال لایه‌ی PHP
   است نباید داخلش گم شود.

   هیچ رنگ ثابتی اینجا نوشته نشده — همه از توکن می‌آید، وگرنه حالت تیره
   سوراخ می‌شود.
   ========================================================================== */

/* ── دکمه‌ی سفید روی زمینه‌ی تیره ──────────────────────────────────────
   `.btn--w` پس‌زمینه‌ی سفید می‌دهد و رنگ متنش را از `var(--navy-ink)`
   می‌گیرد. روی اسلایدر، متن سفید روی دکمه‌ی سفید درمی‌آمد — یعنی دکمه
   کاملاً خالی به نظر می‌رسید و «خواندن مقاله» نامرئی بود.

   رنگ اینجا عمداً ثابت است و از توکن نمی‌آید: خودِ پس‌زمینه‌ی دکمه
   (`#fff`) و زمینه‌ی اسلاید (گرادیان تیره) در هر دو حالت روشن و تیره
   ثابت‌اند، پس متن هم باید در هر دو حالت تیره بماند. توکنی که در
   دارک‌مود برعکس می‌شود، دقیقاً همان باگ را برمی‌گرداند.

   ویژگی بالاتر از `.btn--w` لازم است چون این فایل بعد از kh-theme.css
   می‌آید ولی هم‌ویژگی بودن، ترتیب بارگذاری را به یک تصادف تبدیل می‌کند.
   ---------------------------------------------------------------------- */
.slide .btn--w,
.banner .btn--w,
.bmini .btn--w,
.phero .btn--w{ color: #0F1F4D; }

/* ── ستون کناری خالی نباید جا بگیرد ────────────────────────────────────
   `.split` ستون ۳۲۰ پیکسلی را چه پر باشد چه خالی نگه می‌دارد. اگر همه‌ی
   جعبه‌های کناری شرطی باشند و هیچ‌کدام رندر نشوند، نتیجه یک نوار سفید
   بلند کنار متن است. اینجا ستون جمع می‌شود و متن تمام‌عرض می‌گیرد.
   ---------------------------------------------------------------------- */
.split > aside:empty{ display: none; }
.split:has(> aside:empty){ grid-template-columns: minmax(0, 1fr); }
.split--r:has(> aside:empty){ grid-template-columns: minmax(0, 1fr); }

/* ── فهرست لینک در ستون کناری ──────────────────────────────────────────── */
.kh-sidelist{
  margin: 11px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.8;
}
.kh-sidelist a.is-current{ color: var(--navy); font-weight: 700; }

/* ── ردیف‌های «برچسب — مقدار» در جعبه‌ی مشخصات ─────────────────────────── */
.kh-specs{ gap: 9px; margin-top: 11px; font-size: 13px; }
.kh-specs > div{ display: flex; justify-content: space-between; gap: 10px; }
.kh-specs > div > span:last-child{ text-align: end; }

/* ── فهرست تیک‌دار (چه چیزی می‌گیری) ───────────────────────────────────── */
.kh-check{
  margin: 16px 0 0;
  padding: 15px 0 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.8;
  border-top: 1px solid var(--line);
}
.kh-check li::before{ content: "✓"; margin-inline-end: 7px; color: var(--ok); font-weight: 700; }
.kh-check--flush{ border-top: 0; padding-top: 0; margin-top: 11px; }

/* ── تیتر بخش داخل ستون محتوا ──────────────────────────────────────────── */
.kh-sub{ font-size: 18px; margin: 32px 0 13px; }
.kh-sub:first-child{ margin-top: 0; }

/* ── عنوان صفحه وقتی هیرو ندارد ────────────────────────────────────────── */
.kh-page-title{ font-size: clamp(21px, 2.6vw, 28px); line-height: 1.55; }
.kh-entry-title{ font-size: clamp(22px, 2.8vw, 31px); line-height: 1.6; margin-top: 11px; }
.kh-lead{ margin-top: 12px; font-size: 16px; line-height: 1.9; color: var(--ink-2); }

/* ── ردیف بندانگشتی + عنوان (ویدیوهای مرتبط) ───────────────────────────── */
.kh-thumbrow{ display: flex; flex-direction: column; gap: 13px; margin-top: 12px; }
.kh-thumbrow a{ display: flex; gap: 11px; align-items: center; }
.kh-thumbrow .cover{
  /* عرض قطعی لازم است: flex:none تنها کافی نیست چون جلد خودش grid است */
  inline-size: 84px;
  flex: none;
  border-radius: 9px;
}
.kh-thumbrow .cover b{ font-size: 11px; }
.kh-thumbrow span:last-child{
  flex: 1;
  min-inline-size: 0;
  font-size: 13px;
  line-height: 1.75;
  font-weight: 700;
}

/* ── نوار ابزار بالای شبکه (تعداد + مرتب‌سازی) ──────────────────────────── */
.kh-toolbar{ margin-bottom: 15px; }
.kh-toolbar h2{ font-size: 19px; }
.kh-sort{ display: flex; align-items: center; gap: 8px; }
.kh-sort select{ padding: 6px 12px; font-size: 13.5px; inline-size: auto; min-block-size: 0; }

/* ── رسانه‌ی بالای صفحه‌ی ویدیو ─────────────────────────────────────────── */
.kh-media{
  /* aspect-ratio وقتی ارتفاع قطعی باشد نادیده گرفته می‌شود، پس صریح صفرش می‌کنیم */
  block-size: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r);
  overflow: hidden;
}
.kh-media iframe,
.kh-media video{ inline-size: 100%; block-size: 100%; border: 0; display: block; }

/* پخش‌کننده‌ی بومی: بدون object-fit، هم پوستر و هم تصویر ویدیو کشیده
   می‌شوند (پیش‌فرض `fill` است). زمینه‌ی مشکی برای وقتی نسبت ویدیو با
   قاب ۱۶:۹ یکی نیست. */
.kh-media video{ object-fit: cover; background: #000; }

/* جلد تصویری.
   `.cover` یک grid با place-items:center است؛ بدون این قاعده تصویر
   شاخص در اندازه‌ی ذاتی‌اش وسط قاب می‌نشیند و قاب را پر نمی‌کند. تا
   امروز به چشم نیامده بود چون هیچ نوشته‌ای تصویر شاخص نداشت. */
.cover img{
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  display: block;
  grid-area: 1 / 1;
}
/* روی تصویر واقعی، پرده‌ی روشن‌کننده‌ی گرادیان لازم نیست */
.cover:has(img)::after{ display: none; }

/* ── فهرست سرفصل ویدیو ─────────────────────────────────────────────────── */
.kh-chapters{ gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.kh-chapters .prow{ padding: 11px 14px; }
.kh-chapters .prow__n{
  inline-size: auto;
  padding: 0 11px;
  block-size: 32px;
  border-radius: 9px;
  font-size: 12.5px;
}
.kh-chapters .prow__t h3{ font-size: 14px; }

/* ── جعبه‌ی پخش صوت پادکست ─────────────────────────────────────────────── */
.kh-audio{ margin-top: 18px; }
.kh-audio audio{ inline-size: 100%; display: block; }

/* ── واژه‌نامه: نویسه‌ی انگلیسی زیر عنوان ───────────────────────────────── */
.kh-term-en{
  font-size: 14px;
  color: var(--muted);
  direction: ltr;
  text-align: start;
  margin-top: 4px;
}

/* ── حالت خالی کوچک داخل ستون ──────────────────────────────────────────── */
.kh-none{ text-align: center; margin-top: 22px; }

/* ── فرم جستجوی واژه‌نامه ───────────────────────────────────────────────── */
.kh-gloss-search{ max-inline-size: 420px; margin-bottom: 20px; }

/* ── شبکه‌ی پیش‌نمایش محصول ─────────────────────────────────────────────── */
.kh-gallery{ gap: 11px; margin-top: 11px; }
.kh-gallery .cover{ border-radius: var(--r-sm); }