/*
 * صفحهٔ امبد — /video-embed/{نشانی}
 *
 * قاعده‌اش یک جمله است: **قاب همان پلیر است**. سایت مقصد ابعاد `<iframe>` را تعیین می‌کند و
 * هر پیکسلِ حاشیه، نوار یا زمینه‌ای که اینجا اضافه شود، از تصویر کم می‌کند و یک نوار سیاه
 * ناخواسته می‌سازد.
 *
 * برای همین پلیر اینجا — و فقط اینجا — نسبت تصویر خودش را کنار می‌گذارد و ارتفاع قاب را
 * می‌گیرد؛ نسبت را بیرون، همان `<iframe>`، تعیین کرده است.
 */

html,
body.vs-embed {
    block-size: 100%;
    margin: 0;
    padding: 0;
    background: #000;
    overflow: hidden;
}

/*
 * فونت از همان توکنی می‌آید که پوستهٔ پلیر تعریفش می‌کند (`--pv-font` در poshesh-player.css)،
 * نه از فونت سیستم.
 *
 * اینجا سندی مستقل است و هیچ قالبی فونت اعلام نمی‌کند؛ با `system-ui` عنوانِ فارسیِ نوار
 * بالا به Segoe UI/Tahoma می‌افتاد و کنارِ متن‌های خودِ پلیر — که وزیرمتن‌اند — دو فونت
 * متفاوت در یک قاب دیده می‌شد.
 */
body.vs-embed {
    position: relative;
    font-family: var(--pv-font, system-ui, "Segoe UI", Tahoma, sans-serif);
}

.vs-embed__player {
    block-size: 100%;
    inline-size: 100%;
}

/*
 * نسبت و گردی از پلیر گرفته می‌شود، نه بازنویسی توکن‌ها: `--pv-aspect` روی ظرف می‌نشیند و
 * عوض‌کردنش با مقدار ثابت، تنظیمات سایت را هم دور می‌زد.
 *
 * گزینشگر عمداً چسبیده است: اسکریپت پلیر کلاس `pv` را به *همین* `.vs-embed__player` اضافه
 * می‌کند و ظرف تازه‌ای نمی‌سازد. `.vs-embed__player .pv` (با فاصله) هیچ‌وقت چیزی را نمی‌گرفت،
 * پس پلیر نسبت ۱۶:۹ و گوشهٔ گردِ خودش را نگه می‌داشت — یعنی در قابی که سایت مقصد ابعادش را
 * تعیین کرده، نوار سیاه و گوشهٔ گرد اضافه می‌شد؛ دقیقاً همان چیزی که این فایل قرار بود
 * جلویش را بگیرد.
 */
.vs-embed__player.pv {
    block-size: 100%;
    aspect-ratio: auto;
    border-radius: 0;
}

/* ======================================================== نوار عنوان ==== */

/*
 * وقتی نوار امبد عنوان دارد، روکش عنوانِ خودِ پلیر خاموش می‌شود.
 *
 * هر دو بالای قاب و روی هم می‌نشستند و یک عنوان را دو بار — با دو اندازه و دو سایه — نشان
 * می‌دادند. آنکه می‌ماند نوارِ امبد است، چون عنوانش لینک به صفحهٔ ویدیو در سایت ماست و
 * همان تنها فایدهٔ امبد برای سایت مبدأ است؛ روکش پلیر فقط متن است.
 *
 * شرط روی وجودِ خودِ لینک است نه یک کلاس روی body: اگر مدیر «نمایش عنوان» را خاموش کند،
 * نوار عنوانی ندارد و روکش پلیر باید سرِ جایش بماند.
 */
body.vs-embed:has(.vs-embed__title) .pv__title {
    display: none;
}

/*
 * و به همان دلیل، نشان برندِ پلیر وقتی نوار امبد نام سایت را دارد.
 *
 * هر دو در گوشهٔ inline-end بالا می‌نشینند (`brand.position` پیش‌فرض `top-end` است) و دقیقاً
 * روی هم می‌افتادند: قرصِ «نام سایت» روی لوگو. آنکه می‌ماند قرصِ نوار است، چون لینک دارد.
 */
body.vs-embed:has(.vs-embed__site) .pv__brand {
    display: none;
}

.vs-embed__bar {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .7rem 1rem 2.2rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, .65), transparent);
    /* روی تصویر شناور است ولی نباید جلوی کلیک روی پلیر را بگیرد؛ فقط خود لینک‌ها کلیک‌پذیرند. */
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}

.vs-embed__bar a {
    pointer-events: auto;
}

/*
 * با ماوس روی قاب، با فوکوس صفحه‌کلید، و تا وقتی پخش شروع نشده.
 *
 * حالت سوم مهم است: روی لمسی hover وجود ندارد و بدون آن، کاربر موبایل هیچ‌وقت نمی‌فهمد این
 * ویدیو از کجا آمده — همان چیزی که تنها فایدهٔ امبد برای سایت مبدأ است.
 */
body.vs-embed:hover .vs-embed__bar,
body.vs-embed:focus-within .vs-embed__bar,
body.vs-embed:has(.pv:not(.pv--playing)) .vs-embed__bar,
/* و وقتی هنوز پلیری ساخته نشده — چه پیام «در دسترس نیست»، چه لحظهٔ پیش از اجرای اسکریپت.
   بدون این، شرط بالا («پلیری هست که پخش نمی‌کند») در نبودِ `.pv` نادرست بود و نوار در همان
   حالتی پنهان می‌ماند که بیشتر از همه به آن نیاز است. */
body.vs-embed:not(:has(.pv)) .vs-embed__bar {
    opacity: 1;
}

.vs-embed__title {
    color: #fff;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.6;
    text-decoration: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vs-embed__title:hover {
    text-decoration: underline;
}

.vs-embed__site {
    flex: 0 0 auto;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, .45);
    color: rgba(255, 255, 255, .9);
    font-size: .72rem;
    text-decoration: none;
    white-space: nowrap;
}

.vs-embed__site:hover {
    background: rgba(0, 0, 0, .7);
    color: #fff;
}

/* ==================================================== حالت‌های بی‌پلیر ==== */

/*
 * «باید وارد شوید» یا «امبد خاموش است».
 *
 * پوستر پس‌زمینه می‌شود و رویش تار: سایت مقصد باید ببیند قاب سالم است و محتوایی هست، وگرنه
 * یک مستطیل سیاه از یک قاب خراب قابل تشخیص نیست.
 */
.vs-embed__notice {
    position: relative;
    display: grid;
    place-items: center;
    block-size: 100%;
    padding: 1rem;
    background-color: #0b0b0f;
    background-position: center;
    background-size: cover;
    text-align: center;
}

.vs-embed__notice::before {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(14px) brightness(.45);
    background: rgba(0, 0, 0, .35);
}

.vs-embed__notice-box {
    position: relative;
    max-inline-size: 28rem;
    color: #fff;
}

.vs-embed__notice-icon::before {
    content: "🔒";
    display: block;
    margin-block-end: .5rem;
    font-size: 1.8rem;
    opacity: .85;
}

.vs-embed__notice p {
    margin: 0 0 .9rem;
    font-size: .95rem;
    line-height: 1.9;
}

.vs-embed__notice a {
    display: inline-block;
    padding: .4rem 1.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: .85rem;
    text-decoration: none;
}

.vs-embed__notice a:hover {
    background: rgba(255, 255, 255, .28);
}