/* ============================================================================
   VIDEO — раздел видеоуроков SigmaStudio (раскладка в духе YouTube).
   Подключается только на videos.php; базовые токены берёт из style.css.
   ========================================================================== */

/* ---------- шапка раздела ---------- */
.videos-page .video-head h1{
  font-size:28px;margin:2px 0 8px;color:var(--navy);letter-spacing:-.01em;
}
.videos-page .video-head p{margin:0 0 8px;color:var(--body);max-width:720px}
.videos-page .video-count{font-size:12.5px;color:var(--dim)}

/* заметка о режиме предпросмотра шаблона */
.videos-page .tpl-note{
  display:flex;gap:10px;align-items:flex-start;
  margin:16px 0 6px;padding:11px 14px;
  background:var(--blue-soft);border:1px solid #bfdcf3;border-radius:11px;
  color:var(--navy);font-size:13px;
}
.videos-page .tpl-note .tpl-badge{
  flex:0 0 auto;font-size:10px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:var(--blue);
  border-radius:5px;padding:2px 7px;margin-top:1px;
}

/* ---------- панель фильтра ---------- */
.videos-page .video-toolbar{
  display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin:20px 0 18px;
}
.videos-page .video-filter{
  display:flex;align-items:center;flex:1 1 280px;max-width:420px;
  border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;
}
.videos-page .video-filter:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft)}
.videos-page .video-filter input{
  border:none;flex:1;padding:10px 14px;font:inherit;color:var(--ink);min-width:0;
}
.videos-page .video-filter input:focus{outline:none}
.videos-page .video-filter input::placeholder{color:var(--dim)}
.videos-page .video-sort{
  border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:9px 12px;font:inherit;color:var(--body);cursor:pointer;
}
.videos-page .video-empty{color:var(--muted);padding:24px 0}

/* ---------- список карточек: сверху вниз, слева видео — справа текст ---------- */
.video-grid{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:22px;
  max-width:1180px;container-type:inline-size;
}
.video-card{display:flex;flex-direction:row;gap:24px;align-items:flex-start;min-width:0}

/* медиазона 16:9: до 640×360 (на 30% крупнее прежней), сжимается на узких экранах */
.video-media{
  position:relative;display:block;
  flex:0 0 auto;width:min(640px,60%);
  aspect-ratio:16/9;
  background:#0b1118;border-radius:12px;overflow:hidden;
  box-shadow:0 1px 3px rgba(18,58,92,.12);
}
.video-media iframe{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}
.video-card:hover .video-media{box-shadow:0 10px 24px rgba(18,58,92,.18)}

/* заглушка, пока не привязан RUTUBE-ID */
.video-placeholder{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:9px;
  color:#cfe1f2;text-align:center;padding:12px;
  background:
    radial-gradient(120% 120% at 50% 0%,rgba(10,127,191,.22),transparent 60%),
    repeating-linear-gradient(135deg,#131f2d 0 10px,#16232f 10px 20px);
}
.video-placeholder .vp-play{
  width:52px;height:52px;border-radius:50%;
  display:grid;place-items:center;font-size:19px;line-height:1;
  color:#fff;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);
  padding-left:3px; /* визуальное центрирование треугольника */
}
.video-placeholder .vp-note{font-size:11.5px;letter-spacing:.02em;opacity:.85}

/* бейдж длительности (как на YouTube) + демо-метка */
.video-duration{
  position:absolute;right:7px;bottom:7px;z-index:2;
  background:rgba(0,0,0,.82);color:#fff;
  font-family:var(--mono);font-size:11.5px;line-height:1;
  padding:3px 6px;border-radius:4px;letter-spacing:.02em;
}
.video-badge-demo{
  position:absolute;left:7px;top:7px;z-index:2;
  background:var(--teal);color:#fff;font-size:10px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;
  padding:3px 7px;border-radius:5px;
}

/* ---------- текст карточки ---------- */
.video-info{padding:2px 0 0;flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px}
.video-title{
  margin:0;font-size:23px;line-height:1.32;font-weight:600;color:var(--ink);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.video-meta{
  display:flex;flex-wrap:wrap;gap:4px 10px;
  font-size:12px;color:var(--muted);
}
.video-meta .vm-topic{
  color:var(--navy);
}
.video-desc{
  margin:0;font-size:16px;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
}

/* тайм-коды */
.video-chapters{margin-top:2px}
.video-chapters > summary{
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--blue);
  list-style:none;display:inline-flex;align-items:center;gap:6px;
  border-radius:7px;padding:2px 4px;
}
.video-chapters > summary::-webkit-details-marker{display:none}
.video-chapters > summary::before{content:"▸";font-size:10px;transition:transform .15s}
.video-chapters[open] > summary::before{transform:rotate(90deg)}
.video-chapters > summary:hover{color:var(--blue-dark)}
.video-chapter-list{
  list-style:none;margin:8px 0 0;padding:0 0 0 2px;
  display:flex;flex-direction:column;gap:5px;
  border-left:2px solid var(--line);padding-left:10px;
}
.video-chapter{
  display:flex;gap:9px;align-items:baseline;font-size:12.5px;color:var(--body);
}
.video-chapter .vc-time{
  flex:0 0 auto;font-family:var(--mono);font-size:11.5px;
  color:var(--blue);background:var(--blue-soft);
  border-radius:4px;padding:1px 5px;
}
.video-chapter .vc-title{font-weight:600;color:var(--ink)}
.video-chapter .vc-sum{color:var(--muted)}

/* ключевые темы (свёрнуто) */
.video-topics{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.video-topics .vt-chip{
  font-size:11px;color:var(--body);background:var(--panel2);
  border:1px solid var(--line);border-radius:12px;padding:1px 8px;
}

/* тайм-коды в две колонки, пока строка широкая */
@container (min-width:900px){
  .video-chapter-list{display:block;columns:2;column-gap:28px}
  .video-chapter{break-inside:avoid;margin-bottom:5px}
}

/* ---------- адаптив ---------- */
/* Основной порог — по ширине самого списка (учитывает сайдбары):
   тесно → видео сверху, текст под ним. */
@container (max-width:860px){
  .video-card{flex-direction:column;gap:12px}
  .video-media{width:100%;max-width:none}
  .video-title{font-size:20px}
}
/* Фолбэк для браузеров без container queries — по ширине окна. */
@media(max-width:900px){
  .video-card{flex-direction:column;gap:12px}
  .video-media{width:100%;max-width:none}
  .video-grid{max-width:none;gap:26px}
  .video-title{font-size:20px}
}
@media(max-width:800px){
  .videos-page .video-head h1{font-size:23px}
}