/* Vídeos (HAC-62) — copiado para /videos/videos.css pelo paginas.mjs (também linkado pela home,
   seção "Últimos vídeos"). Press Sheet: sem cartões — colunas com fios, miniatura com retícula,
   play quadrado no acento, botões em mono. Tokens do /style.css; nenhum estilo inline na página. */
.pagina-videos .video-cta { margin: 22px 0 0; }

.grade-videos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  column-gap: 36px;
  border-top: 1px solid var(--fio);
}

.card-video {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 20px 0 24px;
  border-bottom: 1px dashed var(--fio);
  background: none;
}

.video-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  background: var(--papel-2);
}

/* link da miniatura na home (sem facade) também ganha a retícula */
.video-thumb-link { position: relative; display: block; }

.video-thumb-link::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--pontos) .7px, transparent 1.3px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

/* HAC-250: placeholder quando site/capas/yt/<id>.jpg não existe (fetch falhou,
   vídeo novo) — mesma caixa do .video-thumb (aspect-ratio 4/3), só estilizada
   por esta classe: nenhum <img> externo (CSP 'self'), nenhum style inline. */
.video-thumb-vazia {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 1px solid var(--fio);
  background: none;
  box-sizing: border-box;
}

.video-thumb-vazia::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 20px solid var(--acento);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.video-thumb-vazia::after {
  content: "Miniatura em breve";
  font: 500 .7rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

html[lang^="en"] .video-thumb-vazia::after { content: "Thumbnail coming soon"; }

.card-video h3 {
  margin: 6px 0 0;
  font: 600 1.18rem/1.22 var(--serif);
  letter-spacing: -.004em;
  overflow-wrap: anywhere;
}

.card-video h3 a { color: var(--tinta); text-decoration: none; }
.card-video h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

.video-meta {
  margin: 0;
  font: 500 .72rem/1.4 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.video-desc { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--tinta-2); overflow-wrap: anywhere; }

/* ---------- HAC-1615: etiqueta "Shorts" no card + filtro Todos/Vídeos/Shorts ---------- */
/* etiqueta pequena ao lado da data (mesma família da etiqueta de idioma) */
.video-kind-tag {
  margin-left: 8px;
  padding: 1px 7px;
  border: 1px solid var(--acento);
  border-radius: 999px;
  color: var(--acento);
  font-size: .68rem;
  letter-spacing: .06em;
  white-space: nowrap;
}

/* barra de filtro: botões-pill, o ativo fica cheio no acento (sem JS nada muda:
   o HTML sai com data-filtro="todos" e aria-pressed no botão Todos) */
.filtro-videos {
  margin: 18px 0 4px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.filtro-botao {
  padding: 7px 14px;
  font: 600 .74rem/1.2 var(--mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tinta-2);
  background: transparent;
  border: 1px solid var(--tinta-4, #c9c4bb);
  border-radius: 999px;
  cursor: pointer;
}

.filtro-botao:hover { color: var(--tinta); border-color: var(--tinta-3); }
.filtro-botao[aria-pressed="true"] {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-tinta, #fff);
}

/* estado do filtro mora no data-filtro do .pagina-videos (setado pelo videos.js):
   as seções cujo data-kind não casa somem do fluxo */
.pagina-videos[data-filtro="videos"] .secao-videos-lista[data-kind="short"],
.pagina-videos[data-filtro="videos"] .secao-videos-lista[data-kind="outros"],
.pagina-videos[data-filtro="shorts"] .secao-videos-lista[data-kind="video"],
.pagina-videos[data-filtro="shorts"] .secao-videos-lista[data-kind="outros"] { display: none; }

.video-botoes { margin: auto 0 0; padding-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }

.card-video .video-botoes .botao { padding: 10px 14px; font-size: .72rem; }

/* "Inscreva-se no canal" e "Ver ficha da estreia" (HAC-240): botões cheios no acento */
.botao-inscrever,
.botao-ficha {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--acento-tinta);
}

.botao-inscrever:hover,
.botao-ficha:hover {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}

.videos-vazio {
  margin-top: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.videos-vazio .texto { margin: 0; font: italic 500 1.15rem/1.4 var(--serif); color: var(--tinta-2); }

/* ---------- HAC-380: facade clique-para-tocar + Shorts (9:16) ---------- */

/* O botão-fachada ocupa o lugar da miniatura: mesmo tamanho do .video-thumb,
   sem borda/fundo de botão nativo. O visual do play vem das classes abaixo. */
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* retícula de meio-tom sobre a miniatura (como os pôsteres) */
.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--pontos) .7px, transparent 1.3px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

.video-facade:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; }

.video-facade .video-thumb { width: 100%; }

/* play: quadrado no acento com triângulo na cor de tinta do acento (sem imagem externa) */
.video-facade .video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  width: 58px;
  height: 58px;
  border-radius: 0;
  background: var(--acento);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.video-facade:hover .video-play,
.video-facade:focus-visible .video-play { background: var(--tinta); }

.video-facade .video-play::before {
  content: "";
  width: 0;
  height: 0;
  margin-left: 5px;
  border-left: 20px solid var(--acento-tinta);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}

.video-facade:hover .video-play::before,
.video-facade:focus-visible .video-play::before { border-left-color: var(--papel); }

/* duração: etiqueta em mono no canto inferior direito da miniatura */
.video-facade .video-dur {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 5px 8px;
  border-radius: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 600 .72rem/1 var(--mono);
  letter-spacing: .06em;
  pointer-events: none;
}

/* Shorts: miniatura e player verticais 9:16, limitados na largura da coluna */
.card-video-short .video-thumb,
.card-video-short .video-facade,
.card-video-short .video-moldura { aspect-ratio: 9 / 16; max-width: 300px; }

/* moldura do <iframe> que substitui o botão após o clique (mesma caixa do card) */
.video-moldura {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 0;
  overflow: hidden;
  background: var(--papel-2);
}

.video-moldura .video-player,
.video-player {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* etiqueta de idioma no card: "(Portuguese)" em /en/videos/, "(English)" em /videos/ */
.video-lang {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 6px;
  border: 1px solid var(--fio);
  border-radius: 0;
  background: none;
  color: var(--tinta-2);
  font: 600 .66rem/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* troca de idioma da aba (HAC-380): /videos/ <-> /en/videos/ */
.troca-idioma { margin: 0 0 18px; }

/* seção "Últimos vídeos" da home: a home tem layout próprio; aqui só o básico */
.secao-videos .grade-videos { margin-top: 18px; }

@media (max-width: 760px) {
  .grade-videos { column-gap: 24px; }
  .card-video-short .video-thumb,
  .card-video-short .video-facade,
  .card-video-short .video-moldura { max-width: none; }
}

/* HAC-746: página de detalhe do vídeo (/videos/<slug>/ e /en/videos/<slug>/) — tokens Press Sheet */
.pagina-video-detalhe { max-width: 720px; }

.pagina-video-detalhe h1 {
  font: 600 clamp(1.6rem, 3vw, 2.2rem)/1.15 var(--serif);
  margin: 0 0 6px;
}

/* player centralizado: fachada clicável (antes) e iframe nocookie (depois do clique) */
.pagina-video-detalhe-player { margin: 18px 0; }
.pagina-video-detalhe-player .video-facade,
.pagina-video-detalhe-player .video-moldura { max-width: 640px; margin: 0 auto; }

/* descrição completa (o card da aba corta em 160 caracteres) */
.pagina-video-detalhe .video-descricao { margin: 18px 0; }
.pagina-video-detalhe .video-descricao h2 { font: 600 1.25rem/1.2 var(--serif); }
.pagina-video-detalhe .video-descricao p { line-height: 1.6; }

.pagina-video-detalhe .video-botoes { margin: 14px 0; }
.pagina-video-detalhe .video-cta { margin: 22px 0 8px; }

/* HAC-969: transcrição do vídeo a partir dos .srt do repositório — bloco estático
   (SEO + acessibilidade), RECOLHIDO por padrão: nada de <details>/JS inline; o
   CSS esconde o texto e o /videos/videos.js abre/fecha pelo botão (aria-expanded).
   Sem JS o texto continua no HTML servido, apenas visualmente recolhido. */
.video-transcricao { margin: 20px 0; }
.video-transcricao h2 {
  font: 600 1.25rem/1.2 var(--serif);
  margin: 0 0 6px;
}

.transcricao-idioma {
  color: var(--tinta-3);
  font: 500 .72rem/1.4 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.transcricao-acao { margin: 0 0 10px; }
.transcricao-alternar { cursor: pointer; }

.transcricao-texto {
  display: none; /* recolhado por padrão; .aberta (videos.js) abre */
  border-top: 1px solid var(--fio-forte);
  border-bottom: 1px solid var(--fio);
  padding: 14px 0;
  color: var(--tinta-2);
  max-height: 420px;
  overflow-y: auto;
}

.video-transcricao.aberta .transcricao-texto { display: block; }
.transcricao-texto p { line-height: 1.7; margin: 0 0 12px; }
.transcricao-texto p:last-child { margin-bottom: 0; }

/* ---------- HAC-1815: agrupamento/filtro por playlist (ex.: Manhua Recaps) ---------- */
/* etiqueta da playlist no card (mesma pílula da etiqueta Shorts) */
.video-playlist-tag { border-color: var(--tinta-4, #c9c4bb); color: var(--tinta-2); }

/* filtro "playlist" (data-filtro="playlist" no .pagina-videos, setado pelo
   videos.js): mostra só as seções data-kind="playlist"; os filtros de tipo
   (vídeos/shorts) escondem as seções de playlist — cada vídeo fica em UMA
   seção só, sem duplicar card. Sem JS a aba continua mostrando tudo. */
.pagina-videos[data-filtro="videos"] .secao-videos-lista[data-kind="playlist"],
.pagina-videos[data-filtro="shorts"] .secao-videos-lista[data-kind="playlist"],
.pagina-videos[data-filtro="playlist"] .secao-videos-lista[data-kind="video"],
.pagina-videos[data-filtro="playlist"] .secao-videos-lista[data-kind="short"],
.pagina-videos[data-filtro="playlist"] .secao-videos-lista[data-kind="outros"] { display: none; }