/* ALOS · Tutoriais em vídeo — estante "Em vídeo" da Biblioteca.
   O cabeçalho (.alt-hero) recebe o masthead de alos-clear.css como as demais telas. */
/* O layout responde à largura útil (container), não à janela: o menu lateral aberto ou
   recolhido muda o espaço do vídeo mais do que o tamanho do monitor. */
.alt-wrap{container:altwrap/inline-size;max-width:1180px;margin:0 auto;padding:0 0 56px}
.alt-wrap :is(a,button,select):focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.alt-layout{display:grid;grid-template-columns:268px minmax(0,1fr);gap:26px;align-items:start}

/* Lista dos vídeos (coluna da esquerda). */
.alt-list{position:sticky;top:96px;display:flex;flex-direction:column;gap:3px;max-height:calc(100dvh - 116px);
  overflow-y:auto;scrollbar-width:thin;padding:2px 6px 2px 0}
.alt-list-lb{padding:0 10px 8px;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.alt-list a{display:grid;grid-template-columns:26px minmax(0,1fr);gap:9px;align-items:start;padding:10px;border:1px solid transparent;
  border-radius:11px;color:var(--text);text-decoration:none;transition:background .16s var(--ease),border-color .16s var(--ease)}
.alt-list a:hover{background:var(--bg2);border-color:var(--border)}
.alt-list a[aria-current]{background:var(--accent-soft);border-color:var(--primary)}
.alt-n{padding-top:2px;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--muted)}
.alt-list a[aria-current] .alt-n{color:var(--primary-ink)}
.alt-li{display:flex;flex-direction:column;gap:2px;min-width:0}
.alt-li b{font-size:13px;font-weight:700;line-height:1.35;color:var(--text-bright)}
.alt-li small{font-size:11px;line-height:1.35;color:var(--muted)}
.alt-list a[aria-current] .alt-li b{color:var(--primary-ink)}
.alt-pick{display:none}
.alt-main{container:altmain/inline-size;min-width:0;scroll-margin-top:96px}

/* Palco: vídeo, título, capítulos e cuidados. */
.alt-stage{overflow:hidden;background:var(--card);border:1px solid var(--border);border-radius:16px}
.alt-player{position:relative;aspect-ratio:16/9;background:#0b1220}
.alt-player video{display:block;width:100%;height:100%;background:#0b1220}
.alt-fail{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:24px;
  text-align:center;background:rgba(11,18,32,.94);color:#e2e8f0}
.alt-fail[hidden]{display:none}
.alt-fail b{font-size:15px;color:#fff}
.alt-fail span{max-width:46ch;font-size:12.5px;line-height:1.5;color:#cbd5e1}
.alt-fail button{margin-top:6px;padding:8px 14px;border:1px solid #93c5fd;border-radius:9px;background:transparent;color:#dbeafe;
  font:700 12px/1 inherit;cursor:pointer}
.alt-head{padding:18px 24px 16px;border-bottom:1px solid var(--border)}
.alt-kicker{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--primary-ink)}
/* Fonte e tamanho do título vêm do tema (alos-clear: h2 da Biblioteca em 28px, fonte da interface). */
.alt-head h2{margin:6px 0 11px;font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--text-bright)}
.alt-head h2:focus{outline:none}
.alt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:12px;color:var(--muted)}
.alt-meta>span,.alt-meta>a{display:inline-flex;align-items:center;gap:5px}
.alt-meta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9}
.alt-meta a{font-weight:700;color:var(--primary-ink);text-decoration:none}
.alt-meta a:hover{text-decoration:underline}
.alt-go{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:8px 12px;border:1px solid var(--primary);border-radius:9px;
  background:transparent;color:var(--primary-ink);font:700 12px/1 inherit;cursor:pointer;transition:background .16s var(--ease)}
.alt-go:hover{background:var(--accent-soft)}
.alt-go svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.alt-cols{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.alt-chapters{padding:16px 18px 18px 22px;border-right:1px solid var(--border)}
.alt-cautions{padding:16px 24px 18px 20px}
/* .alt-wrap .alt-stage na frente: o tema põe todo h3 de painel em 16px (.main .view-panel h3). */
.alt-wrap .alt-stage :is(.alt-chapters,.alt-cautions) h3{display:flex;align-items:center;gap:6px;margin:0 0 9px;font-size:11px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.alt-cautions h3 svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9}
.alt-chapters ol{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.alt-chapters button{display:grid;grid-template-columns:44px minmax(0,1fr);gap:9px;width:100%;padding:8px 10px;border:0;border-radius:9px;
  background:transparent;color:var(--text);text-align:left;cursor:pointer;transition:background .16s var(--ease)}
.alt-chapters button:hover{background:var(--bg2)}
.alt-chapters button[aria-current]{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--primary)}
.alt-chapters time{padding-top:1px;font-size:12px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--primary-ink)}
.alt-chapters b{display:block;font-size:13px;font-weight:700;line-height:1.35;color:var(--text-bright)}
.alt-chapters small{display:block;margin-top:1px;font-size:11.5px;line-height:1.4;color:var(--muted)}
.alt-cautions ul{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;list-style:none}
.alt-cautions li{position:relative;padding-left:15px;font-size:12.5px;line-height:1.5;color:var(--text-soft)}
.alt-cautions li:before{content:'';position:absolute;left:1px;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--al-warn,#b45309)}
.alt-cautions li b{font-weight:750;color:var(--text-bright)}
.alt-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 22px;border-top:1px solid var(--border)}
.alt-pager button{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border:1px solid var(--border);border-radius:11px;
  background:var(--bg2);color:var(--text);text-align:left;cursor:pointer;transition:border-color .16s var(--ease)}
.alt-pager button:hover{border-color:var(--primary)}
.alt-pager .alt-next{grid-column:2;align-items:flex-end;text-align:right}
.alt-pager small{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.alt-pager button span{font-size:13px;font-weight:700;color:var(--text-bright)}
.alt-last{grid-column:2;align-self:center;font-size:12px;line-height:1.45;text-align:right;color:var(--muted)}
.alt-note{margin:0;padding:0 22px 18px;font-size:11.5px;line-height:1.55;color:var(--muted)}

body.dark .alt-stage{box-shadow:none}

/* Capítulos e cuidados lado a lado só com palco largo. */
@container altmain (max-width:720px){
  .alt-cols{grid-template-columns:1fr}
  .alt-chapters{padding-right:22px;border-right:0;border-bottom:1px solid var(--border)}
  .alt-cautions{padding-left:22px}
}
/* Área estreita: a lista vira seletor e o vídeo fica com a largura toda. */
@container altwrap (max-width:880px){
  .alt-layout{grid-template-columns:1fr;gap:12px}
  .alt-list{display:none}
  .alt-pick{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;font-size:10.5px;font-weight:800;letter-spacing:.09em;
    text-transform:uppercase;color:var(--muted)}
  .alt-pick select{width:100%;padding:11px 12px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text-bright);
    font:600 14px/1.3 inherit;letter-spacing:0;text-transform:none}
}
@container altmain (max-width:560px){
  .alt-stage{border-radius:14px}
  .alt-head{padding:15px 16px 14px}
  .alt-go{margin-left:0}
  .alt-chapters,.alt-cautions{padding-left:14px;padding-right:14px}
  .alt-pager{grid-template-columns:1fr;padding:14px}
  .alt-pager .alt-next,.alt-last{grid-column:1}
  .alt-pager>span:empty{display:none}
  .alt-note{padding:0 16px 16px}
}
/* Celular: margem lateral para o texto não encostar na borda da tela. */
@media(max-width:900px){
  .alt-wrap{padding:0 14px 40px}
}