/*
 * Design system: páginas de descoberta.
 * Home, shorts, listagens de vídeos (latest/trending/top/category), busca,
 * hashtag, filmes e canais populares.
 *
 * Os templates dessas páginas recebem a classe .ds-discovery no contêiner
 * raiz; tudo aqui fica escopado nela (ou em :has() da página) para não
 * vazar para outras áreas, já que pages/*.css carregam em todas as páginas.
 */

/* =========================================================
 * Base compartilhada
 * ========================================================= */

.ds-discovery svg[stroke="currentColor"] {
  fill: none;
}

/* Grade responsiva de cards (substitui floats do Bootstrap) */
.ds-discovery .ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--card-min)), 1fr));
  gap: var(--space-8) var(--space-4);
  margin: 0 0 var(--space-8);
}



.ds-discovery .ds-grid::before,
.ds-discovery .ds-grid::after {
  display: none;
}

.ds-discovery .ds-grid > [class*="col-"] {
  float: none;
  width: auto;
  min-width: 0;
  padding: 0;
  margin: 0;
}

.ds-discovery .ds-grid .video-latest-list.video-wrapper,
.ds-discovery .ds-grid .video-wrapper {
  height: auto;
  margin: 0 !important;
}

/* Thumb 16:9 sem depender de height fixo legado */

.ds-discovery .video-latest-list .video-thumb a {
  height: auto !important;
  padding: 0 !important;
  aspect-ratio: 16 / 9;
}


.ds-discovery .video-latest-list .video-thumb a > img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: cover;
}

.ds-discovery .video-latest-list.short .video-thumb a{
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-xl) !important;
}

/* Avatar da linha do card: o seletor legado ".video-list img" o estica */
.ds-discovery .pt-vcard-avatar img{
  position: static !important;
  width: 36px !important;
  height: 36px !important;
  min-height: 0 !important;
  max-height: none !important;
  border-radius: var(--radius-full) !important;
}

.ds-discovery .video-latest-list .video-title h4 {
  margin-top: 0;
}

.ds-discovery .video-latest-list .descc {
  display: none;
}

/* Paginação */
.ds-discovery .ds-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.ds-discovery .ds-pager .showing_pages {
  float: none !important;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.ds-discovery .ds-pager .pull-right {
  float: none !important;
}

.ds-discovery .ds-pager .pagination {
  display: flex;
  gap: var(--space-1);
  margin: 0;
}

.ds-discovery .ds-pager .pagination > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md) !important;
  background: var(--background);
  color: var(--foreground);
  font-size: var(--text-sm);
}

.ds-discovery .ds-pager .pagination > li > a:hover {
  background: var(--accent);
}

.ds-discovery .ds-pager .pagination > li.active > a {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.ds-discovery .ds-pager .pagination svg {
  width: 16px;
  height: 16px;
}

/* Chips (abas de filtro, filtros de busca) */
.ds-discovery .ds-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ds-discovery .ds-chip,
.ds-discovery .ds-chips > li > a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--background);
  color: var(--foreground);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.ds-discovery .ds-chip:hover,
.ds-discovery .ds-chips > li > a:hover {
  background: var(--accent);
  text-decoration: none;
}

.ds-discovery .ds-chips > li.selected > a,
.ds-discovery .ds-chips > li.active > a,
.ds-discovery input:checked + .ds-chip {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground) !important;
}

.ds-discovery input:focus-visible + .ds-chip {
  box-shadow: var(--focus-ring);
}

.ds-discovery .ds-chips svg {
  width: 14px;
  height: 14px;
}

/* Toolbar (cabeçalho com ações à direita) */




/* =========================================================
 * Home
 * ========================================================= */

/* Barra de categorias */




/* Destaque */










































/* Modal de compartilhar */










/* Seções */






















/* Slick: gutter de 16px entre cards e setas discretas */















/* Shorts da home: título sobre o thumb */
















/* Artigos na home */










/* =========================================================
 * Listagens (latest / trending / top / category / hashtag)
 * ========================================================= */

.ds-discovery .ds-grid > .empty_state,
.ds-discovery .ds-grid > .no-content-found {
  grid-column: 1 / -1;
}

.ds-videos .tp_vid_fltr_tabs.ds-filter-bar {
  margin: 0 0 var(--space-6);
  overflow-x: auto;
  text-align: start;
  scrollbar-width: none;
}

.ds-videos .tp_vid_fltr_tabs.ds-filter-bar ul.ds-chips {
  display: flex;
  flex-wrap: nowrap;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.ds-videos .tp_vid_fltr_tabs.ds-filter-bar ul li a {
  margin: 0;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
}

.ds-videos .tp_vid_fltr_tabs.ds-filter-bar ul li.selected a {
  background: var(--primary);
  color: var(--primary-foreground) !important;
}

.ds-videos #sub_categories_ {
  margin: 0;
}

/* Hashtag: seção de shorts depois dos vídeos */


/* =========================================================
 * Busca
 * ========================================================= */

























/* Resultado horizontal */




























/* =========================================================
 * Cards de canal (canais populares, busca)
 * ========================================================= */

























/* Canais populares */














/* =========================================================
 * Filmes
 * ========================================================= */





















/* Ícone de lupa como fundo do campo: sempre centralizado, sem depender do container */
































/* =========================================================
 * Shorts (player vertical)
 * ========================================================= */



























































/* Gaveta de comentários dos shorts */






















/* =========================================================
 * Responsivo geral
 * ========================================================= */



@media (max-width: 767px) {
  .ds-discovery .ds-grid {
    gap: var(--space-6) var(--space-4);
  }

  

  

  

  

  

  

  

  

  
}