/* قاب ویدیو — سبک، بدون جاوااسکریپت
 *
 * ⚠️ سایزِ ظرف (aspect-ratio و عرض) درون‌خطی در PHP نوشته می‌شود، نه
 * اینجا. دلیلش: این شیت روی wp_footer صف می‌شود و در REST، فید و
 * AJAX اصلاً چاپ نمی‌شود. آنجا ویدیو باید دست‌کم سرریز نکند.
 */
.wsm-video{
  position:relative;
  margin-block:24px;
  margin-inline:auto;
  overflow:hidden;
  border-radius:16px;
  background:#0b0b12;
  box-shadow:0 12px 32px -18px rgba(20,20,40,.55)
}

/* ⚠️ چیدمانِ مطلق، و اختصاصیتِ دو کلاسه — هر دو اجباری‌اند.
 *
 * اندازه‌گیری در کروم روی صفحه‌ی واقعی نشان داد ویدیو به‌صورت نوارِ
 * ۱۵۰ پیکسلی داخل قابِ ۴۱۲ پیکسلی رندر می‌شد، با ۲۶۲ پیکسل فضای
 * مشکیِ مرده. علتش دو قاعده‌ی خودِ قالب در style.css بود:
 *
 *     .cdesc img, .cdesc video, .cdesc audio{
 *         height:auto; margin-top:15px; margin-bottom:15px }
 *
 * و .cdesc همان چیزی است که the_content() را می‌پیچد. اختصاصیتش
 * (0,1,1) از .wsm-video__el (0,1,0) بیشتر بود، پس height:auto برنده
 * می‌شد؛ و چون preload="none" است مرورگر ابعاد ذاتی را نمی‌داند و به
 * پیش‌فرضِ ۱۵۰ پیکسلیِ HTML می‌افتد.
 *
 * همان margin هم ویدیو را ۱۵ پیکسل پایین می‌برد و چون قاب
 * overflow:hidden دارد، نوارِ پیشرفتِ پخش از پایین بریده می‌شد —
 * یعنی دقیقاً همان کنترلی که کاربر می‌خواهد.
 *
 * position:absolute هر دو را یک‌جا می‌بندد: نه height به آن می‌رسد،
 * نه margin. و .wsm-video .wsm-video__el اختصاصیت (0,2,0) دارد که از
 * (0,1,1) بالاتر است، پس حتی اگر قاعده‌ی محتوایی تازه‌ای اضافه شود
 * باز هم برنده می‌مانیم.
 */
.wsm-video .wsm-video__el{
  position:absolute;
  inset:0;
  display:block;
  inline-size:100%;
  block-size:100%;
  margin:0;
  max-inline-size:none;
  object-fit:contain;
  border-radius:inherit;
  background:#0b0b12
}

/* ⚠️ حلقه‌ی فوکوس اجباری است: کنترل‌ها بومی‌اند و کاربر کیبورد باید
   بداند کجاست. :focus-visible یعنی فقط کیبورد، نه کلیک موس. */
.wsm-video .wsm-video__el:focus-visible{
  outline:3px solid var(--color2,#4c2fd6);
  outline-offset:-3px
}

/* لینکِ جایگزین فقط وقتی دیده می‌شود که مرورگر <video> را نشناسد. */
.wsm-video__fallback{
  display:inline-block;
  padding:12px 18px;
  color:#fff;
  text-decoration:underline
}

@media (max-width:575px){
  .wsm-video{border-radius:12px;margin-block:18px}
}