/*
 * arz5-player.css — ARZ5 Studio Multimídia
 * Estilos compartilhados pelas funções do arz5-player.js:
 *   - controle de volume dos players de áudio
 *   - cartões de playlists do canal (seção de vídeo)
 * Usa as mesmas variáveis de cor (:root) já definidas em cada página.
 */

/* ---------- Volume do player de áudio ---------- */
.audio-volume{
  display:flex; align-items:center; gap:10px; margin-top:12px;
  padding:8px 12px; background:rgba(255,255,255,.06);
  border:1px solid #33404d; border-radius:var(--radius, 8px);
}
.audio-volume-btn{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background:none; border:1px solid var(--latao, #c9a24a); color:var(--latao-claro, #e6c978);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
}
.audio-volume-btn:hover{background:var(--latao, #c9a24a); color:var(--tinta, #12181f);}
.audio-volume-btn svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.audio-volume-range{
  flex:1; min-width:0; height:6px; accent-color:var(--latao, #c9a24a); cursor:pointer;
}
.audio-volume-valor{
  flex-shrink:0; min-width:3.2em; text-align:right;
  font-size:.8rem; color:var(--latao-claro, #e6c978); font-variant-numeric:tabular-nums;
}
.audio-volume.sem-slider .audio-volume-range,
.audio-volume.sem-slider .audio-volume-valor{display:none;}

/* ---------- Cartões de playlists do canal (seção de vídeo) ---------- */
.playlists-relacionadas{margin-top:28px;}
.playlists-relacionadas h3{margin-bottom:4px;}
.playlists-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); gap:14px; margin-top:16px;
}
.playlist-card{
  display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff;
  border:1px solid var(--papel-2, #ece3d0); border-radius:var(--radius, 8px); text-decoration:none;
  color:var(--texto-escuro, #201a12); transition:border-color .15s ease, transform .15s ease;
}
.playlist-card:hover{border-color:var(--campanha, #b3261e); transform:translateY(-2px);}
.playlist-icone{
  flex-shrink:0; width:38px; height:38px; border-radius:8px; background:var(--papel-2, #ece3d0);
  display:flex; align-items:center; justify-content:center; color:var(--campanha, #b3261e);
}
.playlist-card span.playlist-nome{font-size:.85rem; font-weight:600; line-height:1.3;}
.playlist-card.tocando{border-color:var(--campanha, #b3261e); box-shadow:0 0 0 2px rgba(179,38,30,.15);}

@media (max-width:640px){
  .playlists-grid{grid-template-columns:1fr; gap:10px;}
  .playlist-card{min-height:44px; padding:12px 14px;}
  .audio-volume-valor{display:none;}
}