/* =====================================================================
   emirates24 — video section (2026-11-09). Loaded only where video UI
   prints (inc/e24-vid.php), after style.css + e24-v2.css: same tokens,
   tiles, heads and sand bands; the new parts carry the e24-vid prefix.
   Media boxes have fixed ratios (16:9, Shorts 9:16): no layout shift.
   ===================================================================== */

/* ---------- player facade ---------- */
.e24-v2 .e24-vid-frame {
    position: relative; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
    border-radius: var(--e24-radius); background: #17181C;
}
.e24-v2 .e24-vid-frame--lead { border-radius: 18px; }
.e24-v2 .e24-vid-frame--v { aspect-ratio: 9 / 16; background: #2D2D33; }
.e24-v2 .e24-vid-play,
.e24-v2 .e24-vid-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.e24-v2 .e24-vid-play {
    display: block; margin: 0; padding: 0 !important; border-radius: 0; cursor: pointer;
    background: none !important; box-shadow: none !important; color: #FFFFFF;
}
.e24-v2 .e24-vid-play::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(23, 24, 28, 0) 58%, rgba(23, 24, 28, .42));
}
.e24-v2 .e24-vid-frame .e24-vid-play img,
.e24-v2 .e24-vid-thumb img {
    position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; border-radius: 0;
    transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.e24-v2 .e24-vid-play:hover img,
.e24-v2 .e24-vid-card:hover .e24-vid-thumb img,
.e24-v2 .e24-vid-row:hover img { transform: scale(1.035); }
.e24-v2 .e24-vid-play:focus-visible { outline: none; }
.e24-v2 .e24-vid-play:focus-visible::after {
    content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit;
    box-shadow: inset 0 0 0 3px #FFFFFF, inset 0 0 0 6px #D53D5D;
}

/* the rose "24 tile" as the play mark: centred on players, in the corner of thumbnails */
.e24-v2 .e24-vid-mark {
    position: absolute; z-index: 2; inset: 0; margin: auto;
    display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
    border-radius: 18px; background: #D53D5D; color: #FFFFFF;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), 0 12px 28px -12px rgba(0, 0, 0, .65);
    transition: transform .2s, background .2s;
}
.e24-v2 .e24-vid-mark svg { width: 26px; height: 26px; transform: translateX(2px); }
.e24-v2 .e24-vid-play:hover .e24-vid-mark { background: #B42D4C; transform: scale(1.06); }
.e24-v2 .e24-vid-frame--v .e24-vid-mark { width: 46px; height: 46px; border-radius: 13px; }
.e24-v2 .e24-vid-frame--v .e24-vid-mark svg { width: 19px; height: 19px; }
.e24-v2 .e24-vid-thumb .e24-vid-mark { inset: auto; inset-inline-start: 10px; bottom: 10px; margin: 0; width: 34px; height: 34px; border-radius: 10px; }
.e24-v2 .e24-vid-thumb .e24-vid-mark svg { width: 15px; height: 15px; transform: translateX(1px); }
.e24-v2 .e24-vid-row .e24-vid-mark { inset-inline-start: 6px; bottom: 6px; width: 24px; height: 24px; border-radius: 7px; }
.e24-v2 .e24-vid-row .e24-vid-mark svg { width: 11px; height: 11px; }
.e24-v2 .e24-vid-len {
    position: absolute; z-index: 2; inset-inline-end: 10px; bottom: 10px; padding: 4px 8px; border-radius: 8px;
    background: rgba(23, 24, 28, .82); color: #FFFFFF; direction: ltr;
    font: 700 .75rem/1.2 var(--e24-font); font-variant-numeric: tabular-nums;
}

/* ---------- cards, rows, meta ---------- */
.e24-v2 .e24-vid-thumb {
    position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate;
    border-radius: var(--e24-radius); background: var(--e24-media-bg);
}
.e24-v2 .e24-vid-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.e24-v2 .e24-vid-card .e24-vid-thumb { margin-bottom: 4px; }
.e24-v2 .e24-vid-card__t {
    margin: 0; font: 700 1rem/1.62 var(--e24-font); color: var(--e24-ink);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.e24-v2 .e24-vid-card__t a, .e24-v2 .e24-vid-lead__t a, .e24-v2 .e24-vid-blead__t a { color: inherit; }
.e24-v2 .e24-vid-card__t a:hover, .e24-v2 .e24-vid-lead__t a:hover, .e24-v2 .e24-vid-blead__t a:hover { color: var(--e24-rose); }
.e24-v2 .e24-vid-card .e24-vid-meta { margin-top: auto; }
.e24-v2 .e24-vid-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0;
    font-size: .8125rem; line-height: 1.5; color: var(--e24-muted);
}
.e24-v2 .e24-vid-meta > * + *::before,
.e24-v2 .e24-vid-in__k em::before {
    content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 9px; vertical-align: 2px;
    border-radius: 1px; background: currentColor; opacity: .5; transform: rotate(45deg);
}
.e24-v2 .e24-vid-ch { font-weight: 600; color: var(--e24-text); }
.e24-v2 .e24-vid-meta time { font-variant-numeric: tabular-nums; }

.e24-v2 .e24-vid-rows { margin: 0; padding: 0; list-style: none; }
.e24-v2 .e24-vid-rows > li + li { border-top: 1px solid var(--e24-line); }
.e24-v2 .e24-vid-row {
    display: grid; grid-template-columns: 124px minmax(0, 1fr); gap: 12px; align-items: center;
    width: 100%; padding: 12px 0; color: var(--e24-ink);
}
.e24-v2 .e24-vid-row .e24-vid-thumb { border-radius: 10px; }
.e24-v2 .e24-vid-row__b { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.e24-v2 .e24-vid-row__t {
    font-size: .90625rem; font-weight: 600; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.e24-v2 .e24-vid-row:hover .e24-vid-row__t { color: var(--e24-rose); }
.e24-v2 .e24-vid-row .e24-vid-meta { flex-wrap: nowrap; font-size: .75rem; }
.e24-v2 .e24-vid-row .e24-vid-ch { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.e24-v2 .e24-vid-row .e24-vid-meta time { flex: none; white-space: nowrap; }
.e24-v2 .e24-vid-row:focus-visible,
.e24-v2 .e24-vid-card__t a:focus-visible,
.e24-v2 .e24-vid-in .e24-vid-in__t:focus-visible { outline: 2px solid var(--e24-rose); outline-offset: 3px; border-radius: 6px; }

/* rail modules (article: deferred by the headline-bleed guard until the first interaction) */
.e24-v2 .e24-vid-mod .e24-vid-rows > li:first-child .e24-vid-row { padding-top: 2px; }
.e24-v2 .e24-vid-mod .e24-vid-rows:has(> template.hbg-defer) { min-height: calc(var(--n, 3) * 94.75px - 11px); } /* rows: 69.75px thumb + 24px + 1px rule */

/* ---------- hub ---------- */
.e24-v2 .e24-vid-hero .e24-ahero__chip time { font-weight: 700; color: var(--e24-ink); }
.e24-v2 .e24-vid-top { padding: 34px 0 48px; }
.e24-v2 .e24-vid-top__grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 30px; align-items: stretch; }
.e24-v2 .e24-vid-lead { min-width: 0; }
.e24-v2 .e24-vid-lead__b { display: flex; flex-direction: column; gap: 10px; padding: 18px 2px 0; }
.e24-v2 .e24-vid-lead__t { margin: 0; font: 700 clamp(1.375rem, 1.05rem + .9vw, 1.75rem)/1.45 var(--e24-font); color: var(--e24-ink); text-wrap: balance; }
.e24-v2 .e24-vid-lead__x, .e24-v2 .e24-vid-blead__x {
    margin: 0; font-size: 1rem; line-height: 1.85; color: var(--e24-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.e24-v2 .e24-vid-side { grid-column: auto; min-width: 0; }
.e24-v2 .e24-vid-side .e24-now__title { margin: 0; }
.e24-v2 .e24-vid-side .e24-vid-rows { flex: 1; display: flex; flex-direction: column; }
.e24-v2 .e24-vid-side .e24-vid-rows > li { flex: 1 1 0; display: flex; align-items: center; }
.e24-v2 .e24-vid-side .e24-vid-rows > li + li { border-top-color: var(--e24-sand-2); }
.e24-v2 .e24-vid-desk { scroll-margin-top: calc(var(--e24-bar-h) + 12px); }
.e24-v2 .e24-vid-desk .e24-head .e24-tile { background: var(--c, var(--e24-rose)); }
.e24-v2 .e24-vid-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 22px; }
.e24-v2 .e24-vid-shorts {
    padding: 46px 0 50px; color: #FFFFFF;
    background:
        radial-gradient(80% 70% at 88% -12%, rgba(213, 61, 93, .3), transparent 60%),
        linear-gradient(180deg, #24242A 0%, #18181C 100%);
}
.e24-v2 .e24-vid-srow { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 18px; }
.e24-v2 .e24-vid-short { min-width: 0; }
.e24-v2 .e24-vid-short__t {
    margin: 12px 0 4px; font: 700 .9375rem/1.55 var(--e24-font); color: #FFFFFF;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.e24-v2 .e24-vid-shorts .e24-vid-ch { font-size: .75rem; color: rgba(255, 255, 255, .62); }
.e24-v2 .e24-vid-empty { padding: 56px 0 64px; }

/* ---------- home band ---------- */
.e24-v2 .e24-vid-bgrid { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 30px 22px; }
.e24-v2 .e24-vid-blead { grid-row: span 2; display: flex; flex-direction: column; min-width: 0; }
.e24-v2 .e24-vid-blead__b { display: flex; flex-direction: column; flex: 1; gap: 10px; padding-top: 16px; }
.e24-v2 .e24-vid-blead__t { margin: 0; font: 700 1.375rem/1.5 var(--e24-font); color: var(--e24-ink); }
.e24-v2 .e24-vid-blead__x { -webkit-line-clamp: 3; font-size: .96875rem; }
.e24-v2 .e24-vid-blead .e24-vid-meta { margin-top: auto; }
.e24-v2 .e24-vid-bgrid--3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.e24-v2 .e24-vid-bgrid--3 .e24-vid-blead { grid-row: auto; }

/* ---------- inside an article ---------- */
.e24-v2 .e24-body > .e24-vid-in { margin: 1.5em 0 1.7em; padding: 14px 14px 16px; border-radius: 18px; background: var(--e24-sand); }
.e24-v2 .e24-vid-in__k { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: .875rem; font-weight: 700; line-height: 1.3; color: var(--e24-ink); }
.e24-v2 .e24-vid-in__k .e24-tile { width: 28px; height: 28px; border-radius: 8px; }
.e24-v2 .e24-vid-in__k .e24-tile svg { width: 14px; height: 14px; }
.e24-v2 .e24-vid-in__k em { font-style: normal; font-weight: 600; color: var(--e24-muted); }
.e24-v2 .e24-vid-in .e24-vid-in__t { display: block; margin-top: 12px; font: 700 1.0625rem/1.65 var(--e24-font); color: var(--e24-ink); text-decoration: none; }
.e24-v2 .e24-vid-in .e24-vid-in__t:hover { color: var(--e24-rose); }
.e24-v2 .e24-vid-in .e24-vid-meta { margin-top: 4px; }

/* ---------- watch page ---------- */
.e24-v2 .e24-vid-watch > .e24-vid-frame { margin-bottom: 22px; }
.e24-v2 .e24-vid-watch .e24-avatar svg { width: 20px; height: 20px; transform: translateX(1px); }
.e24-v2 .e24-vid-desc { font-size: 1.0625rem; }

/* ---------- responsive ---------- */
@media (max-width: 991px) {
    .e24-v2 .e24-vid-top__grid { grid-template-columns: minmax(0, 1fr); }
    .e24-v2 .e24-vid-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .e24-v2 .e24-vid-bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .e24-v2 .e24-vid-blead { grid-column: 1 / -1; grid-row: auto; }
    .e24-v2 .e24-vid-srow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .e24-v2 .e24-vid-srow > * { flex: 0 0 29%; scroll-snap-align: start; }
    .e24-v2 .e24-vid-wrail .e24-vid-mod { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .e24-v2 .e24-vid-top { padding: 22px 0 34px; }
    .e24-v2 .e24-vid-grid { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
    .e24-v2 .e24-vid-grid > * { flex: 0 0 min(76%, 300px); scroll-snap-align: start; }
    .e24-v2 .e24-vid-srow > * { flex-basis: 44%; }
    .e24-v2 .e24-vid-grid::-webkit-scrollbar, .e24-v2 .e24-vid-srow::-webkit-scrollbar { display: none; }
    .e24-v2 .e24-vid-shorts { padding: 36px 0 40px; }
    .e24-v2 .e24-vid-mark { width: 54px; height: 54px; border-radius: 15px; }
    .e24-v2 .e24-vid-mark svg { width: 22px; height: 22px; }
}
@media (max-width: 575px) {
    /* one row of chips in any font (the web font arrives late: no reflow of the page under the head) */
    .e24-v2 .e24-vid-hero .e24-ahero__chips { flex-wrap: nowrap; gap: 8px; }
    .e24-v2 .e24-vid-hero .e24-ahero__chip { min-width: 0; padding: 0 12px; font-size: .8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .e24-v2 .e24-vid-bgrid { gap: 24px 14px; }
    .e24-v2 .e24-vid-bgrid .e24-vid-card__t { font-size: .9375rem; }
    .e24-v2 .e24-vid-blead__t { font-size: 1.1875rem; }
    .e24-v2 .e24-vid-card .e24-vid-thumb .e24-vid-mark { width: 30px; height: 30px; border-radius: 9px; inset-inline-start: 8px; bottom: 8px; }
    .e24-v2 .e24-vid-row { grid-template-columns: 112px minmax(0, 1fr); }
    .e24-v2 .e24-body > .e24-vid-in { padding: 12px 12px 14px; }
}
@media (prefers-reduced-motion: reduce) {
    .e24-v2 .e24-vid-frame .e24-vid-play img, .e24-v2 .e24-vid-thumb img, .e24-v2 .e24-vid-mark { transition: none; }
}