/* Página de vídeo-aulas: lista e tela da aula. */

.va-pagina{padding-top:40px; padding-bottom:60px; min-height:70vh;}
.va-intro{margin:0; font-size:14px;}

/* ---------- Busca e filtros ---------- */
.va-ferramentas{display:flex; gap:10px; margin-bottom:14px;}
.va-busca{flex:1; margin:0; cursor:text; min-width:0;}
.va-select{
  background:var(--bg); color:var(--white); border:1px solid var(--border-strong); border-radius:8px;
  padding:8px 12px; font:inherit; font-size:14px; cursor:pointer;
}
.va-select:hover{border-color:var(--green);}
.va-chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;}
.va-chip{
  font-size:12.5px; padding:7px 14px; border-radius:6px; background:transparent;
  border:1px solid var(--border); color:var(--muted);
}
.va-chip:hover{border-color:var(--green); color:var(--white);}
.va-chip.active{background:var(--green-dark); border-color:var(--green-dark); color:var(--green-text);}
.va-contagem{font-size:12px; color:var(--faint); margin-bottom:12px;}

/* ---------- Grade de aulas ---------- */
.va-grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px;}
.va-card{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden; transition:border-color .15s, transform .15s;
}
.va-card:hover{border-color:var(--green); transform:translateY(-2px);}
.va-card-corpo{padding:14px 16px 16px; display:flex; flex-direction:column; flex:1;}
.va-card h3{font-size:15px; line-height:1.35; margin-bottom:6px;}
.va-card p{font-size:13px; line-height:1.5; margin-bottom:12px;}
.va-card .va-meta{margin-top:auto;}

.va-capa{position:relative; aspect-ratio:16/9; background:var(--bg-alt); overflow:hidden; flex-shrink:0;}
.va-capa img{width:100%; height:100%; object-fit:cover;}
.va-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:46px; height:46px; border-radius:50%; background:rgba(11,13,12,.8); color:var(--green-text);
  display:flex; align-items:center; justify-content:center; font-size:18px; transition:background .15s, color .15s;
}
.va-card:hover .va-play, .va-mini:hover .va-play{background:var(--green); color:#07140c;}
.va-duracao{
  position:absolute; right:8px; bottom:8px; padding:2px 7px; border-radius:4px; background:rgba(0,0,0,.85);
  color:var(--white); font-family:var(--font-mono); font-size:11px;
}

.va-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:12px; color:var(--muted);}
.va-meta span{display:inline-flex; align-items:center; gap:4px;}
.va-meta .va-tag{padding:2px 8px; border-radius:4px; background:var(--green-dark); color:var(--green-text);}

.va-vazio{
  grid-column:1/-1; text-align:center; padding:50px 20px; background:var(--card);
  border:1px dashed var(--border-strong); border-radius:var(--radius);
}
.va-vazio > i{font-size:34px; color:var(--faint);}
.va-vazio h3{font-size:17px; margin:10px 0 4px;}
.va-vazio p{font-size:13.5px;}

/* ---------- Tela da aula ---------- */
.va-aula{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:26px; align-items:start;}
.va-titulo{font-size:clamp(21px,3vw,27px); line-height:1.25; margin:18px 0 6px;}
.va-legenda{font-size:15px; margin-bottom:12px;}
.va-linha{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.va-bloco p:last-child{margin-bottom:0;}
.va-bloco p{font-size:14px;}

.va-materiais{display:grid; gap:8px;}
.va-material{
  display:flex; align-items:center; gap:10px; padding:11px 14px; font-size:14px;
  background:var(--bg-alt); border:1px solid var(--border); border-radius:8px;
}
.va-material:hover{border-color:var(--green);}
.va-material > i:first-child{font-size:20px; color:#ff7b72;}
.va-material span{flex:1; min-width:0; overflow-wrap:anywhere;}
.va-baixar{color:var(--green-text); font-size:18px;}

.va-capitulos{display:grid; gap:4px;}
.va-capitulo{
  display:flex; gap:12px; align-items:baseline; width:100%; text-align:left; padding:8px 10px; font-size:13.5px;
  color:var(--white); background:transparent; border:1px solid transparent; border-radius:6px;
}
.va-capitulo:hover{background:var(--bg-alt);}
.va-capitulo.active{background:var(--green-dark); border-color:rgba(47,174,82,.3);}
.va-capitulo b{font-family:var(--font-mono); font-size:12px; font-weight:500; color:var(--green-text);}

.va-lateral{position:sticky; top:84px; display:grid; gap:10px;}
.va-mini{display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px; padding:6px; border-radius:8px;}
.va-mini:hover{background:var(--card);}
.va-mini .va-capa{border-radius:6px;}
.va-mini .va-play{width:28px; height:28px; font-size:11px;}
.va-mini .va-duracao{right:4px; bottom:4px; font-size:10px; padding:1px 5px;}
.va-mini h4{font-size:13px; line-height:1.35; margin-bottom:3px;}
.va-mini span{font-size:11.5px; color:var(--muted);}

@media (max-width:900px){
  .va-aula{grid-template-columns:minmax(0,1fr);}
  .va-lateral{position:static;}
}
@media (max-width:640px){
  .va-pagina{padding-top:24px;}
  .va-ferramentas{flex-direction:column;}
  .va-grade{grid-template-columns:minmax(0,1fr);}
  .va-select{width:100%;}
}