/* عكاظ اليوم 2026: the video section (hub, watch page, home band, story clip and rail box).
   Loaded only on pages that print video. Built on okz.css: its tokens, .rail, .desk__head, .mini, .band, .card. */

:root { --okz-vid-tri: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.6v12.8a1 1 0 0 0 1.5.9l10-6.4a1 1 0 0 0 0-1.8l-10-6.4A1 1 0 0 0 8 5.6Z'/%3E%3C/svg%3E"); }

/* ---------- the screen: a play button over the picture (16:9; Shorts 9:16) ---------- */
.okz-vid-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--navy-950); }
.okz-vid-frame--tall { aspect-ratio: 9 / 16; }
.okz-vid-frame iframe, .okz-vid-play, .okz-vid-play img, .okz-vid-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.okz-vid-play { display: block; margin: 0; padding: 0; background: none; color: #fff; cursor: pointer; }
.okz-vid-play img, .okz-vid-thumb img { object-fit: cover; transition: transform .4s ease; }
.okz-vid-play::after, .okz-vid-thumb::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,22,33,0) 55%, rgba(4,22,33,.5)); pointer-events: none; }
.okz-vid-play:hover img, .okz-vid-card:hover .okz-vid-thumb img, .okz-vid-rows li:hover .okz-vid-thumb img { transform: scale(1.03); }
/* keyboard focus: a ring on the play mark (shows on any picture), and round the screen where nothing clips it */
.okz-vid-play:focus-visible { outline: none; }
.okz-vid-play:focus-visible .okz-vid-mark { box-shadow: 0 0 0 4px #fff, 0 0 0 7px var(--cer-700), 0 12px 28px rgba(4,22,33,.45); }
.okz-vid-lead .okz-vid-frame:has(> .okz-vid-play:focus-visible), .okz-vid-stage .okz-vid-frame:has(> .okz-vid-play:focus-visible),
.story__body .okz-vid-art:has(.okz-vid-play:focus-visible) { outline: 3px solid var(--cer-700); outline-offset: 3px; }
.okz-vid-mark { position: absolute; z-index: 1; inset: 0; margin: auto; width: 76px; height: 76px; border-radius: 50%;
  background: var(--cer) var(--okz-vid-tri) 50% 50% / 46% no-repeat;
  box-shadow: 0 0 0 8px rgba(255,255,255,.2), 0 12px 28px rgba(4,22,33,.45); transition: transform .2s, background-color .2s; }
.okz-vid-play:hover .okz-vid-mark, .okz-vid-play:focus-visible .okz-vid-mark { transform: scale(1.07); background-color: var(--cer-700); }
.okz-vid-len { position: absolute; z-index: 1; inset-inline-end: 10px; bottom: 10px; padding: 1px 8px; border-radius: 6px; background: rgba(4,22,33,.82); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.7; direction: ltr; }
.okz-vid-frame--tall .okz-vid-mark { width: 54px; height: 54px; box-shadow: 0 0 0 6px rgba(255,255,255,.2); }

/* thumbnails that link to a watch page: the mark sits in the corner */
.okz-vid-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--sky-2); }
.okz-vid-thumb .okz-vid-mark { inset: auto; inset-inline-start: 10px; bottom: 10px; margin: 0; width: 38px; height: 38px; box-shadow: 0 0 0 4px rgba(255,255,255,.22); }

/* channel · time */
.okz-vid-meta { margin: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--mute); }
.okz-vid-meta > * + *::before { content: ""; display: inline-block; width: 4px; height: 4px; margin-inline: 8px; border-radius: 50%; background: currentColor; opacity: .55; vertical-align: middle; }
.okz-vid-ch { font-weight: 700; color: var(--ink-2); }

/* ---------- rail rows (hub, watch page, story rail); a play disc where the news rail has its red dot ---------- */
.okz-vid-rail .rail__title::before { width: 20px; height: 20px; background: var(--cer) var(--okz-vid-tri) 50% 50% / 50% no-repeat; box-shadow: 0 0 0 4px rgba(26,143,184,.16); }
.okz-vid-rows li { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: start; padding-block: 12px; border-top: 1px solid var(--line); }
.okz-vid-rows li:first-child { border-top: 0; padding-top: 6px; }
.okz-vid-rows .okz-vid-thumb { border-radius: 8px; }
.okz-vid-rows .okz-vid-mark { inset-inline-start: 6px; bottom: 6px; width: 24px; height: 24px; box-shadow: none; }
.okz-vid-rows .okz-vid-len { inset-inline-end: 5px; bottom: 5px; padding: 0 5px; font-size: 11px; }
.okz-vid-rows__body { display: grid; gap: 4px; min-width: 0; }
.okz-vid-rows .rail__link { display: block; font-family: var(--f-head); font-weight: 700; font-size: 18.5px; line-height: 1.35; }
.okz-vid-rows .okz-vid-meta { font-size: 12px; }
.story__aside .okz-vid-aside { position: static; margin-bottom: 24px; }

/* ---------- hub ---------- */
.okz-vid-top__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px var(--gut); }
.okz-vid-lead { grid-column: span 8; display: grid; gap: 16px; align-content: start; }
.okz-vid-top__grid > .rail { grid-column: 9 / -1; }
.okz-vid-top__grid--solo .okz-vid-lead { grid-column: 1 / span 9; }
.okz-vid-lead .okz-vid-frame, .okz-vid-stage .okz-vid-frame { box-shadow: var(--shadow); }
.okz-vid-lead__body { display: grid; gap: 8px; }
.okz-vid-lead__title { font-size: 38px; line-height: 1.22; }
.okz-vid-lead__dek { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.okz-vid-hub .cat-hero__subs { flex-wrap: wrap; }
.okz-vid-hub .cat-hero__subs a { white-space: nowrap; }
.okz-vid-desk, .okz-vid-shorts { scroll-margin-top: 72px; }
.okz-vid-quad__grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.okz-vid-desk .card__title { font-size: 21px; }
.okz-vid-card--text .card__title { font-size: 19px; }
.okz-vid-card--text .card__body { gap: 4px; }

/* Shorts: a dark band, played in place */
.okz-vid-shorts { background: var(--navy-950) var(--roshan); background-blend-mode: soft-light; color: #fff; }
.okz-vid-shorts__row { display: grid; grid-auto-flow: column; grid-auto-columns: 196px; gap: var(--gut); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.25) transparent; padding-bottom: 10px; }
.okz-vid-short { display: grid; gap: 8px; align-content: start; scroll-snap-align: start; }
.okz-vid-short__t { margin: 0; font-family: var(--f-head); font-weight: 700; font-size: 18.5px; line-height: 1.35; color: #fff; }

/* dark grounds: the home band, the Shorts band, the clip inside a story */
.okz-vid-band .okz-vid-meta, .okz-vid-shorts .okz-vid-meta, .okz-vid-art .okz-vid-meta { color: #A9BFCD; }
.okz-vid-band .okz-vid-ch, .okz-vid-shorts .okz-vid-ch, .okz-vid-art .okz-vid-ch { color: #DDF2FB; }

/* ---------- home band ---------- */
.okz-vid-band { position: relative; overflow: hidden; color: #fff; background: radial-gradient(120% 140% at 85% 0%, #10405e 0%, var(--navy-900) 55%, var(--navy-950) 100%); }
.okz-vid-band::before { content: ""; position: absolute; inset: 0; background: var(--roshan); opacity: .06; pointer-events: none; }
.okz-vid-band .wrap { position: relative; }
.okz-vid-band__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gut) 32px; }
.okz-vid-band__list { display: grid; gap: 18px; align-content: start; }
.okz-vid-band .card__title a { color: #fff; }
.okz-vid-band .kicker { color: var(--cer-300); }
.okz-vid-band .okz-vid-thumb { background: var(--navy-800); }
.okz-vid-card--lead .card__title { font-size: 32px; line-height: 1.24; }
.okz-vid-card--lead .okz-vid-thumb .okz-vid-mark { inset: 0; margin: auto; width: 76px; height: 76px; box-shadow: 0 0 0 8px rgba(255,255,255,.2), 0 12px 28px rgba(4,22,33,.45); }
.okz-vid-card--row { grid-template-columns: 168px minmax(0, 1fr); gap: 16px; align-items: start; }
.okz-vid-card--row .card__title { font-size: 20px; }
.okz-vid-card--row .okz-vid-mark { inset-inline-start: 7px; bottom: 7px; width: 30px; height: 30px; box-shadow: none; }

/* ---------- story: the clip inside the text ---------- */
.story__body .okz-vid-art { margin: 1.6em 0; border-radius: 14px; overflow: hidden; background: var(--navy-900); color: #fff; font-family: var(--f-ui); }
.okz-vid-art .okz-vid-frame { border-radius: 0; }
.story__body .okz-vid-art img { border-radius: 0; }
.okz-vid-art__body { display: grid; gap: 6px; padding: 14px 20px 18px; }
.story__body .okz-vid-art p { margin: 0; }
.okz-vid-art__tag { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; line-height: 1.6; color: var(--cer-300); }
.okz-vid-art__tag::before { content: ""; width: 9px; height: 9px; background: var(--cer); transform: rotate(45deg); border-radius: 2px; }
.story__body .okz-vid-art__t { font-family: var(--f-head); font-weight: 700; font-size: 24px; line-height: 1.4; }
.story__body .okz-vid-art a { color: #fff; text-decoration: none; }
.story__body .okz-vid-art a:hover { text-decoration: underline; text-underline-offset: 6px; }
.okz-vid-art :focus-visible { outline-color: #fff; }

/* ---------- watch page ---------- */
.okz-vid-stage { margin: 22px 0 8px; }
.okz-vid-desc { margin: 18px 0 0; font-family: var(--f-head); font-weight: 500; font-size: 22px; line-height: 1.8; color: var(--ink-2); }
.okz-vid-dur { direction: ltr; unicode-bidi: isolate; }
.okz-vid-cov { margin-top: 36px; }
.okz-vid-cov__list { display: grid; gap: 18px; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .okz-vid-lead, .okz-vid-top__grid > .rail, .okz-vid-top__grid--solo .okz-vid-lead { grid-column: 1 / -1; }
  .okz-vid-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: center; }
  .okz-vid-lead__title { font-size: 30px; }
  .okz-vid-top .okz-vid-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gut); }
  .okz-vid-top .okz-vid-rows li:nth-child(2) { border-top: 0; padding-top: 6px; }
}
@media (max-width: 760px) {
  .okz-vid-lead { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .okz-vid-top .okz-vid-rows { display: block; }
  .okz-vid-top .okz-vid-rows li:nth-child(2) { border-top: 1px solid var(--line); padding-top: 12px; }
  .okz-vid-lead__title { font-size: 28px; }
  .okz-vid-mark { width: 60px; height: 60px; box-shadow: 0 0 0 6px rgba(255,255,255,.2), 0 8px 20px rgba(4,22,33,.4); }
  .okz-vid-band__grid { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .okz-vid-band__list { padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
  .okz-vid-card--lead .card__title { font-size: 25px; }
  .okz-vid-card--lead .okz-vid-thumb .okz-vid-mark { width: 60px; height: 60px; }
  .okz-vid-card--row { grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
  .okz-vid-card--row .card__title { font-size: 18.5px; }
  .okz-vid-card--row .okz-vid-mark { width: 26px; height: 26px; }
  .okz-vid-shorts__row { grid-auto-columns: 44%; }
  .story__body .okz-vid-art__t { font-size: 21px; }
  .okz-vid-art__body { padding: 12px 16px 16px; }
  .okz-vid-desc { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .okz-vid-play:hover img, .okz-vid-card:hover .okz-vid-thumb img, .okz-vid-rows li:hover .okz-vid-thumb img, .okz-vid-play:hover .okz-vid-mark { transform: none; }
}