/* =====================================================================
   پارس پگاه تجارت — اسلایدر ویدئو (صفحهٔ شانزدهمین نمایشگاه)
   video-slider.css — هم‌خانوادهٔ اسلایدر رویدادها (e-slider)
   ─────────────────────────────────────────────────────────────────────
   • وابسته به توکن‌های main.css: --teal، --gold، --ink، --muted،
     --muted-2، --hair، --hair-2، --panel، --panel-2، --radius،
     --ease، --ease-out، --serif، --sans (با فال‌بک ایمن)
   • ایمبد آپارات فقط در اسلایدِ فعال به DOM وصل می‌شود؛ بقیهٔ
     اسلایدها پوستر ایستا دارند → حافظه و شبکهٔ سبک می‌ماند.
   • حرکت فقط با transform (GPU) — بدون layout/paint در تایم‌لاین.
   • بدون JS: ایمبدها با loading=lazy سر جایشان می‌مانند و کار
     می‌کنند (پیش‌خریدِ تدریجی مرورگر)؛ فقط ردیف ابزار مخفی می‌شود.
   ===================================================================== */

/* ── ریشه: عرض اسلاید و فاصله فقط از این دو متغیر ── */
.v-slider {
  --vslide-w: min(860px, 100%);
  --vslide-gap: 18px;
  position: relative;
  margin-top: 34px;
}

/* قاب + محوِ دو لبه (نشانهٔ ادامهٔ اسلایدها در دو طرف) */
.v-slider__frame { position: relative; }
.v-slider__frame::before,
.v-slider__frame::after {
  content: ""; position: absolute; inset-block: 0; z-index: 2;
  width: clamp(16px, 5vw, 72px); pointer-events: none;
}
.v-slider__frame::before { /* لبهٔ راست (ابتدای منطقی در RTL) */
  inset-inline-start: 0;
  background: linear-gradient(to right, rgba(5, 6, 5, 0.85), rgba(5, 6, 5, 0));
}
.v-slider__frame::after { /* لبهٔ چپ */
  inset-inline-end: 0;
  background: linear-gradient(to left, rgba(5, 6, 5, 0.85), rgba(5, 6, 5, 0));
}

/* ناحیهٔ نمایش — overflow مخفی؛ ژستِ افقی به موتور JS می‌رسد */
.v-slider__viewport {
  overflow: hidden;
  outline: none;
  touch-action: pan-y; /* اسکرول عمودیِ صفحه آزاد می‌ماند */
}
.v-slider__viewport:focus-visible {
  outline: 2px solid rgba(43, 224, 166, 0.5);
  outline-offset: 4px;
  border-radius: var(--radius, 18px);
}

/* ریل اسلایدها — جابه‌جایی با transform (GPU) */
.v-slider__track {
  display: flex;
  gap: var(--vslide-gap);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  transition: transform 0.65s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.v-slider__track.vs-no-anim { transition: none; } /* هنگام اندازه‌گیری/ریسایز */

/* ── اسلاید: غیرفعال = کوچک‌تر و کم‌نور (تمرکز روی فعال) ── */
.v-slide {
  position: relative;
  flex: 0 0 var(--vslide-w);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: scale(0.94);
  opacity: 0.45;
  transition: transform 0.65s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1)),
    opacity 0.65s var(--ease);
}
.v-slider.vs-js .v-slide.is-active {
  transform: none;
  opacity: 1;
  z-index: 2;
}
/* حالت بدون JS: همهٔ اسلایدها ساده و هم‌قد دیده می‌شوند */
.v-slider:not(.vs-js) .v-slide { transform: none; opacity: 1; }
.v-slider:not(.vs-js) .v-slider__ui { display: none; }

/* ── استیج ویدئو: قاب ۱۶:۹ با همان زبان کارت‌های سایت ── */
.v-slide__stage {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius, 18px);
  border: 1px solid var(--hair, rgba(255, 255, 255, 0.08));
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(43, 224, 166, 0.07), transparent 55%),
    var(--panel, #0c0f0d);
  box-shadow: 0 26px 70px -38px rgba(0, 0, 0, 0.9);
  transition: border-color 0.65s var(--ease), box-shadow 0.65s var(--ease);
}
/* مرورگرهای خیلی قدیمی بدون aspect-ratio */
@supports not (aspect-ratio: 1) {
  .v-slide__stage { height: clamp(220px, 56vw, 484px); }
}
.v-slide.is-active .v-slide__stage {
  border-color: rgba(43, 224, 166, 0.35);
  box-shadow: 0 30px 80px -38px rgba(0, 0, 0, 0.95),
    0 0 60px -30px rgba(43, 224, 166, 0.35);
}

/* علامت «پخش» محو در مرکز — فقط وقتی نه پوستر هست نه ایمبد */
.v-slide__stage::before {
  content: "";
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; z-index: 0;
  transform: translate(-50%, -50%);
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 24px solid rgba(255, 255, 255, 0.1); /* مثلث پخش همیشه به راست */
  border-right: 0;
}

/* پوستر (اختیاری) — زیر ایمبد؛ وقتی اسلاید فعال می‌شود ایمبد رویش می‌نشیند */
.v-slide__poster {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: saturate(0.9) brightness(0.82);
}

/* ایمبد آپارات — پرکنندهٔ کامل استیج */
.v-slide__frame {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  background: var(--panel, #0c0f0d);
}

/* ── کپشن زیر استیج ── */
.v-slide__cap {
  display: flex; flex-direction: column; gap: 8px;
  padding: 0 clamp(6px, 1.2vw, 14px);
}
.v-slide__kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em;
  color: var(--teal, #2be0a6);
}
.v-slide__kicker::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--teal, #2be0a6);
  box-shadow: 0 0 10px rgba(43, 224, 166, 0.7);
}
.v-slide__title {
  margin: 0;
  font-family: var(--serif, Vazirmatn, serif); font-weight: 600;
  font-size: clamp(1.15rem, 2.1vw, 1.5rem);
  line-height: 1.45; color: var(--ink, #f4f6f4);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.v-slide__sub {
  margin: 0;
  color: var(--muted, #9aa39b); font-size: 0.92rem; line-height: 1.9;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── ردیف ابزار: همان چینش اسلایدر رویدادها ── */
.v-slider__ui { display: flex; align-items: center; gap: 16px; margin-top: 26px; }
.v-slider__bar {
  position: relative; flex: 1; height: 4px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
.v-slider__bar-fill {
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: 0%; border-radius: 99px;
  background: linear-gradient(to left, var(--teal, #2be0a6), var(--gold, #dfb54f));
  transition: width 0.65s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: width;
}
.v-slider__count {
  font-family: var(--sans, inherit); font-size: 0.78rem; font-weight: 600;
  color: var(--muted-2, #6f7a72); letter-spacing: 0.05em; white-space: nowrap;
}
.v-slider__count b { color: var(--teal, #2be0a6); font-weight: 700; }
.v-slider__btn {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hair, rgba(255, 255, 255, 0.08));
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted, #9aa39b); cursor: pointer; padding: 0;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: color 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease),
    background 0.3s var(--ease, ease), box-shadow 0.3s var(--ease, ease), opacity 0.3s var(--ease, ease);
}
.v-slider__btn svg { width: 18px; height: 18px; }
.v-slider__btn:hover:not(:disabled) {
  color: var(--ink, #f4f6f4);
  border-color: rgba(43, 224, 166, 0.45);
  background: rgba(43, 224, 166, 0.08);
  box-shadow: 0 0 24px rgba(43, 224, 166, 0.16);
}
.v-slider__btn:disabled { opacity: 0.28; cursor: default; }
.v-slider__btn:focus-visible {
  outline: 2px solid var(--teal, #2be0a6); outline-offset: 3px;
}

/* ── موبایل ── */
@media (max-width: 720px) {
  .v-slider { --vslide-w: 100%; --vslide-gap: 14px; margin-top: 26px; }
  .v-slider__frame::before,
  .v-slider__frame::after { width: 14px; }
  .v-slider__ui { gap: 12px; margin-top: 18px; }
  .v-slider__btn { width: 44px; height: 44px; }
  .v-slider__count { font-size: 0.72rem; }
  .v-slide__stage { border-radius: 14px; }
}
@media (max-width: 560px) {
  .v-slide__sub { display: none; }
}

/* ── کاهش حرکت (دسترس‌پذیری) ── */
@media (prefers-reduced-motion: reduce) {
  .v-slider__track,
  .v-slider__bar-fill,
  .v-slide { transition: none; }
}