/* The site's video player in place (video-player/layers.php, video-player.js): the video over the box's
 * picture, a clear layer over it, the box's picture while paused or starting, the close button, and the
 * design's dark bar under the playing video -- pause, a track that fills in the brand blue, the time,
 * sound, full screen. The box (.cil-vplayer) sets its own size and corners; moved here from the course
 * page's media.css on 2026-10-15.
 */

.cil-vplayer { --vp-bar: 52px; }
/* Resets at no specificity; the theme's green, padded buttons undone once, at a specificity each of the
   player's own buttons (.cil-vplayer .x, later in this file) still beats. */
:where(.cil-vplayer) *, :where(.cil-vplayer) *::before, :where(.cil-vplayer) *::after { box-sizing: border-box; }
:where(.cil-vplayer) svg { display: block; flex: none; }
.cil-vplayer button {
    display: inline-flex; gap: 0; margin: 0; padding: 0; border: 0; background: transparent; color: inherit;
    font-family: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; transition: none; cursor: pointer;
}
.cil-vplayer button:hover { background: transparent; }

.cil-vplayer__player { position: absolute; inset: 0; background: var(--cil-black-dark-4); }
.cil-vplayer__player iframe,
.cil-vplayer__player video { display: block; width: 100%; height: 100%; border: 0; }
/* A solid white disc with a dark cross: it has to read over anything a platform paints in that
   corner -- a channel's logo, a title, a bright frame. */
.cil-vplayer .cil-vplayer__close {
    z-index: 4;
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cil-white);
    color: var(--cil-black-dark-4);
    box-shadow: 0 2px 10px color-mix(in srgb, var(--cil-black-dark-4) 45%, transparent);
    isolation: isolate;
    transition: color .1s ease;
}
/* The house close (as the stories page's .cil-st-close, Oren 2026-10-15): a red disc opens from the centre
   and the cross turns white a moment after; it closes on a slow-start curve, so the cross is dark again
   before the white shows. */
.cil-vplayer .cil-vplayer__close::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--cil-red); pointer-events: none;
    transform: scale(0); transition: transform .35s cubic-bezier(.55, 0, .8, .2);
}
.cil-vplayer .cil-vplayer__close:is(:hover, :focus-visible) { background: var(--cil-white); color: var(--cil-white); transition-delay: .08s; }
.cil-vplayer .cil-vplayer__close:is(:hover, :focus-visible)::before { transform: scale(1); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.cil-vplayer .cil-vplayer__close svg path { fill: currentColor; }
.cil-vplayer .cil-vplayer__close:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 2px; }
.cil-vplayer .cil-vplayer__close[hidden], .cil-vplayer__player[hidden] { display: none; }

.cil-vplayer.is-full { border-radius: 0; aspect-ratio: auto; }
/* With the page's bar, the picture ends where the bar begins, so subtitles stay in view. The platform's
   own chrome never shows: the shield keeps the pointer from it, the cover hides it while paused. */
.cil-vplayer.has-bar .cil-vplayer__player { overflow: hidden; }
.cil-vplayer.has-bar .cil-vplayer__player iframe { position: absolute; top: 50%; left: 0; width: 100%; height: auto; min-height: 100%; aspect-ratio: 16 / 9; transform: translateY(-50%); }
.cil-vplayer.has-bar .cil-vplayer__player video { object-fit: cover; }
.cil-vplayer.has-bar .cil-vplayer__player,
.cil-vplayer__shield,
.cil-vplayer__cover { bottom: var(--vp-bar); }
.cil-vplayer__shield { position: absolute; top: 0; inset-inline: 0; z-index: 2; cursor: pointer; }
.cil-vplayer__cover { position: absolute; top: 0; inset-inline: 0; z-index: 2; display: grid; place-items: center; background: var(--cil-black-dark-4); }
.cil-vplayer__shield[hidden], .cil-vplayer__cover[hidden] { display: none; }
.cil-vplayer__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.cil-vplayer .cil-vplayer__resume {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--cil-white);
    color: var(--cil-black-dark-4);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--cil-black-dark-4) 45%, transparent);
}
.cil-vplayer .cil-vplayer__resume svg { width: 32px; height: 32px; }
.cil-vplayer .cil-vplayer__resume svg path { fill: currentColor; }
.cil-vplayer .cil-vplayer__resume:hover { background: var(--cil-blue); }
.cil-vplayer .cil-vplayer__resume:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 3px; }
/* While the player starts behind the cover: a turning ring in place of the play button. */
.cil-vplayer__loading { display: none; width: 44px; height: 44px; border: 4px solid color-mix(in srgb, var(--cil-white) 30%, transparent); border-top-color: var(--cil-white); border-radius: 50%; animation: cil-vplayer-spin 0.9s linear infinite; }
.cil-vplayer__cover.is-loading .cil-vplayer__loading { display: block; position: relative; }
.cil-vplayer__cover.is-loading .cil-vplayer__resume { display: none; }
.cil-vplayer__cover:not(.is-loading) { cursor: pointer; }
@keyframes cil-vplayer-spin { to { transform: rotate(360deg); } }

/* ---- the bar ---- */
.cil-vplayer__bar {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 52px;
    padding: 14px 18px;
    background: color-mix(in srgb, var(--cil-black-dark-4) 82%, transparent);
    color: var(--cil-white);
}
.cil-vplayer__bar[hidden] { display: none; }
.cil-vplayer .cil-vplayer__button { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 4px; }
.cil-vplayer__button svg { width: 24px; height: 24px; }
.cil-vplayer .cil-vplayer__button:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 2px; }
.cil-vplayer__bar .is-play, .cil-vplayer__bar .is-muted, .cil-vplayer__bar .is-exit { display: none; }
.cil-vplayer__bar[data-paused="true"] .is-play { display: block; }
.cil-vplayer__bar[data-paused="true"] .is-pause { display: none; }
.cil-vplayer__bar[data-muted="true"] .is-muted { display: block; }
.cil-vplayer__bar[data-muted="true"] .is-sound { display: none; }
.cil-vplayer.is-full .cil-vplayer__bar .is-exit { display: block; }
.cil-vplayer.is-full .cil-vplayer__bar .is-enter { display: none; }
.cil-vplayer__time { font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* How loud: a short track beside the sound button, filled as far as the level, which shows over the
   thumb while it moves. */
.cil-vplayer__loudness { position: relative; display: flex; align-items: center; flex: 0 0 72px; width: 72px; height: 24px; }
.cil-vplayer__bar.is-fixed-volume .cil-vplayer__loudness { display: none; }
.cil-vplayer .cil-vplayer__volume {
    --vp-fill: 100%;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: 4px;
    margin: 0;
    padding: 0;
    border-radius: 2px;
    /* Silent on the left, loudest on the right, in either reading direction (dir="ltr" on the input). */
    background: linear-gradient(to right, var(--cil-white) var(--vp-fill), var(--cil-black-regular-3) var(--vp-fill));
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.cil-vplayer__volume::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--cil-white); border: 0; }
.cil-vplayer__volume::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--cil-white); border: 0; }
.cil-vplayer__volume:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 4px; }
/* Centred over the thumb: the thumb's centre runs from 6px in to 6px short of the end. */
.cil-vplayer__level {
    position: absolute;
    bottom: calc(100% + 6px);
    left: calc(6px + (100% - 12px) * var(--vp-level, 1));
    transform: translateX(-50%);
    min-width: 32px;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--cil-white);
    color: var(--cil-black-dark-4);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    pointer-events: none;
}
.cil-vplayer__level[hidden] { display: none; }

/* The track fills from where the page's reading starts: the right in Hebrew and Arabic, the left otherwise. */
.cil-vplayer__track {
    --vp-fill: 0%;
    flex: 1 1 auto;
    min-width: 40px;
    height: 4px;
    margin: 0;
    border-radius: 2px;
    background: linear-gradient(to left, var(--cil-blue) var(--vp-fill), var(--cil-black-regular-3) var(--vp-fill));
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}
.cil-vplayer__track:dir(ltr) { background: linear-gradient(to right, var(--cil-blue) var(--vp-fill), var(--cil-black-regular-3) var(--vp-fill)); }
.cil-vplayer__track::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--cil-white); border: 0; }
.cil-vplayer__track::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--cil-white); border: 0; }
.cil-vplayer__track:focus-visible { outline: 2px solid var(--cil-blue); outline-offset: 4px; }

@media (max-width: 767px) {
    .cil-vplayer { --vp-bar: 44px; }
    .cil-vplayer__bar { gap: 10px; padding: 10px 12px; height: 44px; }
    .cil-vplayer__loudness { flex-basis: 48px; width: 48px; }
}
@media (prefers-reduced-motion: reduce) {
    .cil-vplayer__loading { animation-duration: 2.4s; }
    .cil-vplayer .cil-vplayer__close, .cil-vplayer .cil-vplayer__close::before,
    .cil-vplayer .cil-vplayer__close:is(:hover, :focus-visible), .cil-vplayer .cil-vplayer__close:is(:hover, :focus-visible)::before { transition: none; }
}