/* =====================================================================
   پارس پگاه تجارت — سکشن دوستونهٔ «محتوا + ویدئو» (آپارات)
   ip-video.css — نسخهٔ ۲ — برای صفحهٔ شانزدهمین نمایشگاه ایران پروژه
   ===================================================================== */

/* ── ریشه و تنظیمات ── */
.ip-video {
  --ipv-gap: clamp(28px, 5vw, 64px);
  --ipv-disc: 88px;
  --ipv-radius: var(--radius, 18px);
  position: relative;
}

/* هالهٔ محیطی پشت ستون ویدئو (عمق سینمایی، بدون هزینهٔ رندر) */
.ip-video__media::before {
  content: "";
  position: absolute;
  inset: -7% -5%;
  z-index: -1;
  background: radial-gradient(58% 58% at 50% 50%, rgba(43, 224, 166, 0.1), transparent 72%);
  pointer-events: none;
}

/* ── چیدمان دوستونه: راست محتوا · چپ ویدئو ── */
.ip-video__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr; /* ویدئو کمی عریض‌تر — ستارهٔ سکشن */
  gap: var(--ipv-gap);
  align-items: center;
}

/* ── ستون محتوا ── */
.ip-video__badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid rgba(43, 224, 166, 0.3);
  background: rgba(43, 224, 166, 0.07);
  color: #b6efe0; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em;
}

.ip-video__title { margin-top: 18px; }

/* خط لاتین زیر عنوان (اختیاری) */
.ip-video__latin {
  display: block;
  font-family: var(--latin, Georgia, serif); font-style: italic; font-weight: 500;
  font-size: clamp(0.85rem, 1.4vw, 1.05rem);
  color: var(--muted-2, #7e8680); letter-spacing: 0.22em; margin-top: 14px;
}

.ip-video__lead { margin-top: 10px; }

/* پاراگراف دوم (اختیاری) */
.ip-video__more {
  margin: 14px 0 0; max-width: 58ch;
  color: var(--muted, #9ba3a0); font-size: 0.95rem; line-height: 1.95;
}

.ip-video__actions {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px;
}

/* ── ستون ویدئو ── */
.ip-video__media { margin: 0; position: relative; }

/* قاب ۱۶:۹ */
.ip-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--ipv-radius);
  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 30px 80px -40px rgba(43, 224, 166, 0.35),
    0 12px 40px -20px rgba(0, 0, 0, 0.9);
}
@supports not (aspect-ratio: 1) {
  .ip-video__frame { height: clamp(220px, 36vw, 460px); }
}

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

/* ── کاور برنددار: پوستر + اسکریم + دکمهٔ پخش ──
   پس‌زمینهٔ مات دارد تا اگر ایمبدِ زیرش هنوز لود نشده یا بلاک شده
   (صفحهٔ خطای روشن مرورگر)، کاور همیشه تیره و مرتب بماند. */
.ip-video__cover {
  position: absolute; inset: 0; z-index: 2;
  display: block; padding: 0; border: 0;
  background: var(--panel, #0c0f0d); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.55s var(--ease, ease), visibility 0s;
}
.ip-video__cover:focus-visible {
  outline: 2px solid rgba(43, 224, 166, 0.55);
  outline-offset: 4px;
  border-radius: var(--ipv-radius);
}

/* پوستر (اختیاری) */
.ip-video__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  filter: saturate(0.9) brightness(0.82);
  transition: filter 0.6s var(--ease, ease);
}
/* پوستر شکسته (آدرس اشتباه/پیدا نبودن) — JS این صفت را می‌گذارد:
   عکس مخفی و استیج تیرهٔ طراحی‌شده جای آن را می‌گیرد */
.ip-video__poster[data-broken] { display: none; }

/* اسکریم سینمایی + برق زمردی بالای قاب */
.ip-video__cover::before {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, rgba(5, 6, 5, 0.55), transparent 38%),
    linear-gradient(200deg, rgba(43, 224, 166, 0.08), transparent 45%);
}

/* ── دکمهٔ پخش: دیسک شیشه‌ای زمردی ── */
.ip-video__disc {
  position: absolute; top: 50%; left: 50%;
  width: var(--ipv-disc); height: var(--ipv-disc);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 6, 5, 0.5);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(43, 224, 166, 0.5);
  color: var(--ink, #f5f7f5);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7),
    0 0 46px -10px rgba(43, 224, 166, 0.4);
  transform: translate(-50%, -50%);
  transition: transform 0.35s var(--ease-out, ease), border-color 0.3s var(--ease, ease),
    box-shadow 0.35s var(--ease, ease);
}

/* حلقهٔ پالس دور دیسک */
.ip-video__disc::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(43, 224, 166, 0.45);
  animation: ipv-pulse 2.8s var(--ease, ease) infinite;
}
@keyframes ipv-pulse {
  0% { transform: scale(1); opacity: 0.75; }
  70%, 100% { transform: scale(1.42); opacity: 0; }
}

/* مثلث پخش */
.ip-video__disc svg {
  width: 32px; height: 32px;
  margin-left: 3px;
  fill: currentColor;
}

/* هاور */
.ip-video__cover:hover .ip-video__disc,
.ip-video__cover:focus-visible .ip-video__disc {
  transform: translate(-50%, -50%) scale(1.06);
  border-color: rgba(43, 224, 166, 0.85);
  box-shadow: 0 18px 55px -12px rgba(0, 0, 0, 0.75),
    0 0 60px -8px rgba(43, 224, 166, 0.55);
}
.ip-video__cover:hover .ip-video__poster {
  filter: saturate(1) brightness(0.92);
}

/* ── رونمایی: کاور محو می‌شود ── */
.ip-video.is-ready .ip-video__cover {
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.55s var(--ease, ease), visibility 0s 0.55s;
}

/* بدون JS: کاور رندر نمی‌شود */
.ip-video:not(.ipv-js) .ip-video__cover { display: none; }

/* ── کپشن زیر قاب + لینک «تماشا در آپارات» ── */
.ip-video__cap {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  padding: 12px 6px 0;
  font-size: 0.8rem; color: #d6dde0;
}
.ip-video__cap-dot {
  width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto;
  background: var(--teal, #2be0a6);
  box-shadow: 0 0 12px rgba(43, 224, 166, 0.9);
}
.ip-video__cap-text { min-width: 0; }

/* لینک پخش مستقیم — همیشه در دسترس، حتی اگر ایمبد در مرورگرِ
   بازدیدکننده مسدود/معلول شده باشد */
.ip-video__watch {
  margin-inline-start: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--hair, rgba(255, 255, 255, 0.1));
  color: var(--muted, #9ba3a0); font-size: 0.72rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: color 0.3s var(--ease, ease), border-color 0.3s var(--ease, ease),
    background-color 0.3s var(--ease, ease);
}
.ip-video__watch svg { width: 12px; height: 12px; }
.ip-video__watch:hover,
.ip-video__watch:focus-visible {
  color: var(--teal, #2be0a6);
  border-color: rgba(43, 224, 166, 0.45);
  background: rgba(43, 224, 166, 0.06);
}
.ip-video__watch:focus-visible { outline: none; }

/* ── ریسپانسیو ── */
@media (max-width: 1024px) {
  .ip-video__grid { grid-template-columns: 1fr; gap: 36px; }
  .ip-video__media { order: -1; max-width: 640px; margin-inline: auto; width: 100%; }
  .ip-video__content { max-width: 640px; margin-inline: auto; width: 100%; }
}

@media (max-width: 560px) {
  .ip-video { --ipv-disc: 74px; }
  .ip-video__disc svg { width: 27px; height: 27px; }
  .ip-video__cap { font-size: 0.74rem; }
}

/* ── کاهش حرکت ── */
@media (prefers-reduced-motion: reduce) {
  .ip-video__disc::before { animation: none; }
  .ip-video__cover,
  .ip-video__disc,
  .ip-video__poster { transition: none; }
}

/* ── چاپ ── */
@media print {
  .ip-video { break-inside: avoid; }
  .ip-video__cover { display: none; }
}



.gallery-vid {
    font-size: 36px !important;
}