/* Kuwaiti trio engine, video desk: the player facade, clip thumbnails and the video layouts (hub, watch page,
   home band, article clip, rail box). Skin tokens only: cards, section heads, rails, the dateline and the share
   bar are the engine's own components and keep each skin's dress. Media marks are not mirrored in RTL. */

/* ---- player ---- */
.kw-vid-stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: var(--kw-radius-img); overflow: hidden; isolation: isolate; }
.kw-vid-stage--tall { aspect-ratio: 9 / 16; }
.kw-vid-play, .kw-vid-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.kw-vid-play { background: #000; cursor: pointer; }
.kw-vid-stage .kw-vid-play img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .25s; }
.kw-vid-play:hover img { transform: scale(1.02); filter: brightness(.9); }
.kw-vid-play:focus-visible { outline: 3px solid #fff; outline-offset: -7px; box-shadow: inset 0 0 0 7px rgb(0 0 0 / .45); border-radius: 0; }

/* play mark: the skin's accent disc with a right-pointing triangle (media controls keep their direction) */
.kw-vid-mark { --kw-vid-s: 68px; position: absolute; inset: 0; z-index: 1; margin: auto; width: var(--kw-vid-s); height: var(--kw-vid-s); border-radius: 50%; display: grid; place-items: center; background: var(--kw-accent); color: var(--kw-accent-ink); box-shadow: 0 0 0 3px rgb(255 255 255 / .85), 0 6px 20px rgb(0 0 0 / .35); pointer-events: none; transition: transform .2s; }
.kw-vid-mark::before { content: ""; width: 34%; height: 40%; background: currentColor; clip-path: polygon(14% 0, 100% 50%, 14% 100%); transform: translateX(7%); }
.kw-vid-play:hover .kw-vid-mark, .kw-vid-card:hover .kw-vid-mark { transform: scale(1.08); }
.kw-vid-len { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; z-index: 1; padding: 0 7px; border-radius: calc(var(--kw-radius) / 2); background: rgb(0 0 0 / .78); color: #fff; font: 600 12.5px/1.75 var(--kw-font-num); font-variant-numeric: tabular-nums; direction: ltr; pointer-events: none; }

/* ---- clip cards (engine kw-card) ---- */
.kw-vid-thumb { background: #000; }
.kw-vid-thumb, .kw-vid-thumb .kw-card__img { aspect-ratio: 16 / 9; }
.kw-vid-thumb .kw-vid-mark { --kw-vid-s: 44px; box-shadow: 0 0 0 2px rgb(255 255 255 / .85), 0 4px 14px rgb(0 0 0 / .3); }
.kw-vid-card .kw-card__title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kw-vid-card .kw-card__meta > span::after { content: "·"; margin-inline-start: 8px; }
.kw-vid-card.kw-card--mini { align-items: flex-start; }
.kw-vid-card.kw-card--mini .kw-card__media { flex: 0 0 150px; }
.kw-vid-card.kw-card--mini .kw-card__title { font-size: 15px; line-height: 1.55; }
.kw-card--mini .kw-vid-mark { --kw-vid-s: 30px; box-shadow: 0 0 0 2px rgb(255 255 255 / .8); }
.kw-card--mini .kw-vid-len { inset-block-end: 4px; inset-inline-end: 4px; padding: 0 5px; font-size: 11px; }
.kw-vid-more { display: inline-flex; align-items: center; gap: 4px; font-family: var(--kw-font-head); font-weight: 700; font-size: 14.5px; line-height: 1.4; color: var(--kw-accent); white-space: nowrap; }
.kw-vid-more:hover { text-decoration: underline; text-underline-offset: 6px; }
.kw-vid-more .kw-ico { width: 14px; height: 14px; }

/* ---- home band: the featured clip wide, the next ones beside it ---- */
.kw-vid-band__in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--kw-gap); align-items: start; }
.kw-vid-band__list { display: flex; flex-direction: column; min-width: 0; }
.kw-vid-band__list > .kw-card { padding-block: 13px; border-bottom: 1px solid var(--kw-line); }
.kw-vid-band__list > .kw-card:first-child { padding-top: 0; }
.kw-vid-band__list > .kw-card:last-child { border-bottom: 0; padding-bottom: 0; }
.kw-vid-card--lead .kw-card__title { font-size: clamp(20px, 2vw, 26px); line-height: 1.4; }
.kw-vid-card--lead .kw-vid-mark { --kw-vid-s: 64px; }

/* ---- hub ---- */
.kw-vid-ahero .kw-ahero__desc { max-width: none; }
.kw-vid-hub { padding-bottom: 28px; }
.kw-vid-top { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; margin-bottom: 8px; }
.kw-vid-top.is-solo { grid-template-columns: minmax(0, 880px); }
.kw-vid-lead__body { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; }
.kw-vid-lead__k { font-family: var(--kw-font-head); font-weight: 700; font-size: 14px; color: var(--kw-accent); }
.kw-vid-lead__t { font-size: clamp(22px, 2.4vw, 32px); line-height: 1.35; }
.kw-vid-lead__t a:hover { color: var(--kw-accent); }
.kw-vid-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; color: var(--kw-ink-3); }
.kw-vid-meta b { font-weight: 600; color: var(--kw-ink-2); }
.kw-vid-meta b::after { content: "·"; margin-inline-start: 8px; color: var(--kw-ink-3); }
.kw-vid-desc { color: var(--kw-ink-2); font-size: 16px; line-height: 1.75; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kw-vid-next .kw-vid-card, .kw-vid-railbox .kw-vid-card { padding-block: 12px; border-bottom: 1px solid var(--kw-line); }
.kw-vid-next .kw-vid-card:last-child, .kw-vid-railbox .kw-vid-card:last-of-type { border-bottom: 0; }
.kw-vid-next .kw-vid-card.kw-card--mini .kw-card__media, .kw-vid-railbox .kw-vid-card.kw-card--mini .kw-card__media { flex-basis: 128px; }
.kw-vid-railbox .kw-vid-more { margin-top: 6px; }
.kw-vid-reel { display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--kw-line) transparent; }
.kw-vid-short { flex: 0 0 186px; min-width: 0; display: flex; flex-direction: column; gap: 8px; scroll-snap-align: start; }
.kw-vid-short .kw-vid-mark { --kw-vid-s: 46px; }
.kw-vid-short__t { font-size: 15px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kw-vid-short__m { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12.5px; color: var(--kw-ink-3); }
.kw-vid-short__m > span::after { content: "·"; margin-inline-start: 8px; }
.kw-vid-empty { padding-block: 56px; }

/* ---- watch page ---- */
.kw-vid-dateline { margin-top: 14px; }
.kw-vid-desc--full { display: block; overflow: visible; font-size: 18px; line-height: 1.85; }
.kw-vid-ours { margin-top: 30px; }
.kw-vid-ours .kw-card--row { padding-block: 14px; border-bottom: 1px solid var(--kw-line); }
.kw-vid-ours .kw-card--row:last-child { border-bottom: 0; }

/* ---- article clip ---- */
.kw-prose > .kw-vid-fig { margin-block: 1.6em; }
.kw-vid-fig__cap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-top: 10px; font-size: 13.5px; line-height: 1.6; color: var(--kw-ink-3); }
.kw-vid-fig__k { font-family: var(--kw-font-head); font-weight: 700; color: var(--kw-accent); }
.kw-vid-fig__t { flex-basis: 100%; font-family: var(--kw-font-head); font-weight: 700; font-size: 17px; line-height: 1.5; color: var(--kw-ink); }

@media (max-width: 1024px) {
  .kw-vid-top { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}
@media (max-width: 768px) {
  .kw-vid-band__in { grid-template-columns: minmax(0, 1fr); }
  .kw-vid-card.kw-card--mini .kw-card__media { flex-basis: 132px; }
  .kw-vid-desk .kw-grid > :nth-child(n+5) { display: none; }
  .kw-vid-short { flex-basis: 146px; }
  .kw-vid-watch .kw-vid-stage, .kw-vid-hub .kw-vid-lead .kw-vid-stage { margin-inline: calc(var(--kw-gutter) * -1); border-radius: 0; }
  .kw-vid-mark { --kw-vid-s: 58px; }
}
@media print { .kw-vid-band, .kw-vid-fig, .kw-vid-railbox, .kw-vid-reel { display: none !important; } }