/* ============================================================
   JP News (جهينة نيوز) — finaldesign «الشبكة» — video.css
   The video gallery page (2026-09-28): featured player shell,
   YouTube modal, category filter chips, the four-
   column poster grid (the home gallery's .card-video, unchanged),
   the «الأكثر مشاهدة» scroll-snap rail and the in-grid ad seam.
   Loaded after interior.css on video.html only.
   ============================================================ */

/* ------------------------------------------------------------
   FEATURED PLAYER SHELL. The stage holds a poster and its play
   control launches the YouTube iframe modal.
   ------------------------------------------------------------ */
.video-stage {
    scroll-margin-block-start: calc(var(--header-height) + var(--space-md));   /* a selected card scrolls in under the sticky header, not behind it */
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-md) var(--zone-gap);
    margin-block-end: var(--space-lg);
}

.video-player {
    position: relative;
    min-inline-size: 0;
}

.video-player .card-media {
    background-color: var(--color-video-plate);
}

/* The big play control: the gallery disc, twice the size, still a
   plate + white edge so it reads on any poster. Not mirrored. */
.video-stage-play {
    position: absolute;
    z-index: 2;
    inset: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 88px;
    block-size: 88px;
    border-radius: 50%;
    background-color: var(--color-video-plate);
    color: var(--color-video-ink);
    box-shadow: 0 0 0 3px var(--color-video-edge);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.video-stage-play .icon {
    inline-size: 40px;
    block-size: 40px;
}

.video-stage-play:hover,
.video-stage-play:focus-visible {
    box-shadow: 0 0 0 6px var(--color-video-edge);
}

.video-stage-play:focus-visible {
    outline: 2px solid var(--color-video-ink);
    outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
    .video-stage-play {
        transition: none;
    }
}

.video-stage-duration {
    position: absolute;
    z-index: 1;
    inset-inline-end: 12px;
    inset-block-end: 12px;
    display: inline-flex;
    align-items: center;
    min-block-size: 28px;
    padding-inline: 10px;
    border-radius: var(--radius-btn);
    background-color: var(--color-video-plate);
    color: var(--color-video-ink);
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.video-stage-meta {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-inline-size: 0;
}

.video-stage-kickers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-md);
    font-size: var(--fs-meta);
    color: var(--color-text-muted);
}

.video-stage-kickers .kicker {
    margin-block-end: 0;
}

.video-stage-kickers time {
    font-variant-numeric: tabular-nums;
}

.video-stage-title {
    font-family: var(--font-primary);
    font-weight: 800;
    font-size: var(--fs-xl);
    line-height: 1.35;
}

.video-stage-title:focus-visible {
    outline-offset: 4px;
}

.video-stage-desc {
    font-size: var(--fs-md);
    color: var(--color-text-muted);
}

@media (min-width: 992px) {
    .video-stage {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        align-items: start;
    }
}

/* Wide screens: the stage stops at the poster's largest derivative (888px) */
@media (min-width: 1400px) {
    .video-stage {
        grid-template-columns: minmax(0, 888px) minmax(0, 1fr);
    }

    .video-stage-title {
        font-size: 28px;
    }
}

/* ------------------------------------------------------------
   YOUTUBE PLAYER MODAL
   ------------------------------------------------------------ */
.video-modal {
    inline-size: min(960px, calc(100vw - 32px));
    max-inline-size: none;
    max-block-size: calc(100vh - 32px);
    max-block-size: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: var(--radius-card);
    background-color: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 24px 80px rgb(0 0 0 / 45%);
}

.video-modal::backdrop {
    background-color: rgb(0 0 0 / 78%);
    backdrop-filter: blur(3px);
}

.video-modal-content {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md);
}

.video-modal-header {
    display: flex;
    justify-content: flex-start;
}

.video-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background-color: var(--color-bg-alt);
    color: var(--color-text);
}

.video-modal-close:hover,
.video-modal-close:focus-visible {
    background-color: var(--color-border);
}

.video-modal-close:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

.video-modal-error {
    padding: var(--space-md);
    color: var(--color-text);
    text-align: center;
}

.video-modal.is-error .video-modal-frame {
    display: none;
}

.video-modal-frame {
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: calc(var(--radius-card) - 4px);
    background-color: #000;
}

.video-modal-frame iframe {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
}

@media (max-width: 575px) {
    .video-modal-content {
        padding: var(--space-sm);
    }

    .video-modal-close {
        inline-size: 40px;
        block-size: 40px;
    }
}

/* ------------------------------------------------------------
   FILTER CHIPS — buttons, aria-pressed; «الكل» is ink when pressed
   (a content type has no colour), a category chip takes its own
   colour when pressed. Looks like the sub-section chips on purpose.
   ------------------------------------------------------------ */
.filter-bar {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-block-end: var(--space-lg);
}

.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.filter-chip[aria-pressed="true"] {
    background-color: var(--cat, var(--color-primary));
    border-color: var(--cat, var(--color-primary));
    color: var(--color-on-cat);
}

.filter-chip-all[aria-pressed="true"] {
    color: var(--color-bg);
}

/* ------------------------------------------------------------
   THE GRID — the home gallery's cards, four across from 1200 on this
   full-width page (2 / 3 / 4 at 576 / 768 / 1200). The disc sizes
   are the home page's. The in-grid ad spans every column.
   ------------------------------------------------------------ */
@media (min-width: 768px) {
    .video-grid-page {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .video-grid-page {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.video-grid-ad {
    grid-column: 1 / -1;
    padding-block: var(--space-sm);
}

/* ------------------------------------------------------------
   «الأكثر مشاهدة» RAIL — scroll-snap, keyboard-complete (every card
   is a link; the buttons are extra). The track keeps a thin native
   scrollbar so the overflow is never a secret.
   ------------------------------------------------------------ */
.scroller {
    position: relative;
}

.scroller-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-block-end: var(--space-md);
}

.scroller-head .section-label {
    margin-block-end: 0;
}

.scroller-controls {
    display: flex;
    gap: var(--space-xs);
    margin-inline-start: auto;
}

.scroller-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 44px;
    block-size: 44px;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-text);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.scroller-btn:hover,
.scroller-btn:focus-visible {
    background-color: var(--color-bg-alt);
}

.scroller-btn[aria-disabled="true"] {
    color: var(--color-text-muted);
    cursor: default;
}

.scroller-btn[aria-disabled="true"]:hover {
    background-color: transparent;
}

.scroller-btn-prev .icon-sm {
    transform: rotate(-90deg);
}

.scroller-btn-next .icon-sm {
    transform: rotate(90deg);
}

.scroller-track {
    position: relative;             /* the containing block of the cards' absolutely positioned bits (the
                                       visually-hidden labels), so the track clips them — without it they
                                       escaped to .scroller and widened the phone page to 608px in RTL */
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-md);
    padding-block-end: var(--space-sm);
    scrollbar-width: thin;
}

.scroller-track > li {
    flex: 0 0 min(280px, 78vw);
    scroll-snap-align: start;
    min-inline-size: 0;
}

.scroller-track .card-video .card-title {
    font-size: var(--fs-thumb);
}

@media (prefers-reduced-motion: reduce) {
    .scroller-track {
        scroll-behavior: auto;
    }
}