/* Página Vídeos — complementa o site.css (variáveis e classes do site são reaproveitadas).
   Seções: botão "ver mais", filtro, grade de vídeos, player em <dialog>, responsivo. */

html:has(dialog[open]){overflow:hidden}
.mais{display:flex;justify-content:center;margin-top:32px}
.mais .btn.secundario{border-color:var(--rule);color:var(--fg)}
.mais .btn.secundario:hover{border-color:var(--muted)}

/* filtro */
.filtros{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}
.filtros ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip-filtro{font:inherit;font-size:14px;font-weight:600;color:var(--text);background:var(--card);
  border:1px solid var(--rule);border-radius:999px;padding:9px 16px;min-height:40px;cursor:pointer}
.chip-filtro:hover{border-color:var(--muted)}
.chip-filtro[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.filtros .contagem{font-size:13px;color:var(--muted);white-space:nowrap}

/* grade e cartão de vídeo */
.grade-videos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.cartao-video{display:block;text-decoration:none;color:inherit;min-width:0}
.cartao-video .capa{position:relative;display:block;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--ink-2);border:1px solid var(--rule)}
.cartao-video .capa img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.cartao-video .capa::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(to top,rgba(15,23,32,.72),transparent);pointer-events:none}
.cartao-video .play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:rgba(15,23,32,.62);color:#fff;border:1.5px solid rgba(255,255,255,.85);display:grid;place-items:center;
  z-index:1;transition:background .2s,border-color .2s,transform .2s}
.cartao-video .play svg{width:22px;height:22px;margin-left:3px}
.cartao-video .dur{position:absolute;right:10px;bottom:10px;z-index:1;font-size:12px;font-weight:600;color:#fff;
  background:rgba(15,23,32,.72);padding:3px 8px;border-radius:999px;font-variant-numeric:tabular-nums}
.cartao-video .meta{display:block;padding:12px 2px 0}
.cartao-video .cliente{display:block;font-family:var(--f-display);font-weight:650;font-size:16px;line-height:1.25;color:var(--fg)}
.cartao-video .tipo{display:block;font-size:13.5px;color:var(--text);margin-top:2px}
@media (hover:hover){
  .cartao-video:hover .capa img{transform:scale(1.04)}
  .cartao-video:hover .play{background:var(--accent-on-ink);border-color:var(--accent-on-ink);transform:scale(1.06)}
}
.cartao-video:focus-visible{outline:none}
.cartao-video:focus-visible .capa{outline:3px solid var(--accent);outline-offset:3px}
.cartao-video:focus-visible .play{background:var(--accent-on-ink);border-color:var(--accent-on-ink)}

/* player */
dialog.player{border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;background:transparent;color:#fff;overflow:auto}
.player::backdrop{background:rgba(5,9,14,.9)}
.player .palco{min-height:100%;display:grid;place-content:center;justify-items:center;gap:14px;padding:20px}
.player video{display:block;height:min(80dvh,820px);aspect-ratio:9/16;width:auto;max-width:100%;background:#000;border-radius:12px}
.player .legenda{text-align:center}
.player .legenda b{display:block;font-family:var(--f-display);font-weight:650;font-size:17px}
.player .legenda span{font-size:14px;color:var(--on-ink-muted)}
.player .comandos{display:contents}
.player .ctl{width:44px;height:44px;padding:0;border-radius:50%;background:var(--ink-2);border:1px solid var(--ink-rule);color:#fff;display:grid;place-items:center;cursor:pointer}
.player .ctl:hover:not(:disabled){border-color:var(--on-ink-muted)}
.player .ctl:disabled{opacity:.35;cursor:default}
.player .ctl svg{width:20px;height:20px}
.player .fechar{position:fixed;top:max(20px,env(safe-area-inset-top));right:20px;z-index:2}
.player .ant,.player .prox{position:fixed;top:50%;margin-top:-22px}
.player .ant{left:max(24px,calc(50% - 300px))}
.player .prox{right:max(24px,calc(50% - 300px))}

/* telas menores */
@media (max-width:980px){
  .grade-videos{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .grade-videos{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .cartao-video .play{width:48px;height:48px;margin:-24px 0 0 -24px}
  .cartao-video .cliente{font-size:15px}
  .filtros{flex-direction:column;align-items:stretch;gap:8px}
  .filtros ul{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;margin-inline:-20px;padding-inline:20px;scrollbar-width:none}
  .filtros ul::-webkit-scrollbar{display:none}
  .chip-filtro{flex:none;scroll-snap-align:start;min-height:44px}
  .player .palco{padding:64px 12px 20px}
  .player video{height:calc(100dvh - 190px);border-radius:0}
  .player .comandos{display:flex;gap:16px;justify-content:center}
  .player .ant,.player .prox{position:static;margin:0}
  .player .fechar{top:max(12px,env(safe-area-inset-top));right:12px}
  .mais .btn{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .cartao-video .capa img,.cartao-video .play{transition:none}
  .cartao-video:hover .capa img,.cartao-video:hover .play{transform:none}
}