/* Ролики на wscalendar.fi: плеер с очередью (главная), одиночный плеер (страницы модулей),
   ролик с главами (страница «Видео»). Подключается после site.css и берёт его переменные. */
.vid{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px;align-items:start}
.vid-stage{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#101418;box-shadow:var(--shadow)}
.vid-stage video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#101418}
.vid-now{margin-top:14px;display:grid;gap:4px}
.vid-now b{font:600 20px/1.25 var(--display);color:var(--text)}
.vid-now span{color:var(--muted);font-size:15px}
.vid-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.vid-item{display:grid;grid-template-columns:132px minmax(0,1fr);gap:14px;align-items:center;width:100%;padding:8px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;color:inherit;font:inherit;text-align:left;cursor:pointer;transition:border-color .15s}
.vid-item:hover{border-color:var(--accent)}
.vid-item[aria-current="true"]{border-color:var(--accent);box-shadow:0 0 0 3px rgba(4,174,251,.16)}
.vid-item img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#101418}
.vid-item b{display:block;font:600 16px/1.25 var(--display);color:var(--text)}
.vid-item small{display:block;margin-top:4px;color:var(--muted);font-size:13px}
.vid-more{margin-top:16px;font-size:15px}
.vid-solo{max-width:980px;margin-inline:auto}
.vid-solo .mock-cap{text-align:center}
.vid-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px;align-items:start}
.vid-info h2{margin-top:10px;font-size:clamp(28px,3.2vw,38px)}
.vid-ch{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:2px;border-top:1px solid var(--line)}
.vid-ch li{border-bottom:1px solid var(--line)}
.vid-ch button{display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;align-items:baseline;width:100%;padding:9px 4px;border:0;background:transparent;color:var(--text);font:inherit;font-size:15px;text-align:left;cursor:pointer}
.vid-ch button:hover{color:var(--accent-strong)}
.vid-ch time{font:500 13px/1 var(--mono);color:var(--accent-strong);font-variant-numeric:tabular-nums}
@media (max-width:900px){.vid,.vid-row{grid-template-columns:1fr}.vid-row{gap:20px}}
/* Седьмой пункт меню на средней ширине ломает шапку в две строки: там к роликам ведёт кнопка первого экрана. */
@media (max-width:1140px){nav.menu a[href="#video"]{display:none}}
@media (max-width:560px){.vid-item{grid-template-columns:104px minmax(0,1fr)}}