/*
 * استایل صفحهٔ عمومی و ویجت فهرست.
 *
 * از پوستهٔ پلیر جداست چون آن یکی یک جزء خودکفاست و این یکی محتوای صفحه: قالبی که بخواهد
 * چیدمان صفحه را عوض کند باید بتواند فقط این فایل را کنار بگذارد.
 *
 * عمداً هیچ رنگ ثابتی برای متن و پس‌زمینه ندارد — رنگ‌ها را از قالب فعال به ارث می‌برد،
 * وگرنه صفحهٔ ویدیو در هر قالبی مثل یک وصله به نظر می‌رسد.
 */

.vs-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vs-page__player {
    /* پلیر خودش نسبت تصویر دارد؛ این فقط عرض بیشینه را مهار می‌کند. */
    inline-size: 100%;
}

.vs-page__notice {
    margin: 0;
    padding: .75rem 1rem;
    border-radius: .75rem;
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-size: .95rem;
}

.vs-page__header {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.vs-page__title {
    margin: 0;
    font-size: clamp(1.25rem, 3vw, 1.75rem);
    line-height: 1.4;
}

.vs-page__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    opacity: .75;
}

.vs-page__meta-live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    opacity: 1;
    font-weight: 600;
}

.vs-page__summary {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.8;
}

.vs-page__description {
    line-height: 2;
}

.vs-page__description img,
.vs-page__description video,
.vs-page__description iframe {
    max-inline-size: 100%;
    block-size: auto;
}

.vs-page__tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.vs-page__tags li {
    padding: .2rem .7rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: .8rem;
}

/* ======================================================= فهرست ویدیوها ==== */

.vs-playlist {
    /* پیش‌فرض‌ها؛ ویجت با صفت style بازنویسی‌شان می‌کند. تعریف اینجا یعنی همین فایل بدون
       ویجت هم — مثلاً در یک ویوی بازنویسی‌شدهٔ قالب — سالم رندر می‌شود. */
    --vs-cols: 3;
    --vs-cols-tablet: 2;
    --vs-cols-mobile: 1;
    --vs-gap: 1rem;
    --vs-thumb-ratio: 16 / 9;
    --vs-card-radius: .75rem;
    display: flex;
    flex-direction: column;
    gap: var(--vs-gap);
}

.vs-playlist__heading {
    margin: 0;
    font-size: clamp(1.1rem, 2.4vw, 1.4rem);
}

.vs-playlist__empty {
    margin: 0;
    opacity: .7;
}

/*
 * سه نقطهٔ شکست، سه شمار ستون — و ستون‌ها همه‌جا `minmax(0, 1fr)` هستند نه `auto-fill`.
 *
 * `auto-fill` شمار ستون را از عرض ظرف می‌گرفت و انتخاب مدیر را روی نمایشگر متوسط بی‌اثر
 * می‌کرد: کسی که «۲ ستون در تبلت» گفته، همان را می‌خواهد.
 */
.vs-playlist__grid {
    display: grid;
    grid-template-columns: repeat(var(--vs-cols-mobile), minmax(0, 1fr));
    gap: var(--vs-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 40rem) {
    .vs-playlist__grid {
        grid-template-columns: repeat(var(--vs-cols-tablet), minmax(0, 1fr));
    }
}

@media (min-width: 62rem) {
    .vs-playlist__grid {
        grid-template-columns: repeat(var(--vs-cols), minmax(0, 1fr));
    }
}

.vs-playlist__card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    color: inherit;
    text-decoration: none;
    transition: transform .15s ease;
}

.vs-playlist__card:hover { transform: translateY(-2px); }

.vs-playlist__card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: var(--vs-card-radius);
}

.vs-playlist__thumb {
    position: relative;
    display: block;
    aspect-ratio: var(--vs-thumb-ratio);
    overflow: hidden;
    border-radius: var(--vs-card-radius);
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.vs-playlist__thumb img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
}

.vs-playlist__thumb-empty {
    display: grid;
    place-items: center;
    block-size: 100%;
    font-size: 2rem;
    opacity: .35;
}

.vs-playlist__duration,
.vs-playlist__live {
    position: absolute;
    inset-block-end: .5rem;
    inset-inline-end: .5rem;
    padding: .1rem .5rem;
    border-radius: .4rem;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
}

.vs-playlist__live { background: #ef4444; font-weight: 600; }

.vs-playlist__body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.vs-playlist__title {
    font-weight: 600;
    line-height: 1.6;
    /* دو خط، بعدش «…» — بدون این، یک عنوان بلند ارتفاع کل ردیف را به هم می‌ریزد. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vs-playlist__summary {
    font-size: .85rem;
    opacity: .75;
    line-height: 1.7;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vs-playlist__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem .75rem;
    font-size: .78rem;
    opacity: .6;
}

/* ============================================================== ویجت پلیر ==== */

.vs-player-widget {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.vs-player-widget__heading {
    margin: 0;
    font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}

.vs-player-widget__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    opacity: .75;
}

.vs-player-widget__live {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .6rem;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    opacity: 1;
    font-weight: 600;
}

.vs-player-widget__summary {
    margin: 0;
    line-height: 1.9;
}

.vs-player-widget__caption {
    margin: 0;
    font-size: .85rem;
    opacity: .7;
    line-height: 1.8;
}

.vs-player-widget__link {
    margin: 0;
    font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
    .vs-playlist__card { transition: none; }
    .vs-playlist__card:hover { transform: none; }
}