/* --- Grade de Vídeos (Páginas de Vídeos e Artista) --- */
.grid-video {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  background-color: var(--black);
}

.video-card {
  display: flex; /* Melhora o alinhamento interno */
  flex-direction: column; /* Empilha imagem e conteúdo */
  height: 100%; /* Garante que o card ocupe todo o espaço do link */
  overflow: hidden; /* Garante que o overlay não vaze */
  background-color: var(--white); /* Cor de fundo consistente */
  transition: var(--transition);
  /* bordas internas: top+left para evitar redundância nas extremidades */
  border-bottom: 1px solid var(--black);
  border-right: 1px solid var(--black);
}
.video-card img {
  width: 100%; /* Garante que a imagem ocupe a largura do card */
  display: block; /* Remove espaços extras abaixo da imagem */
  aspect-ratio: 17 / 9;
  object-fit: cover; /* Faz a imagem cobrir a área sem distorcer */
  transition: transform 0.4s ease-in-out;
}

.video-card-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* Alinha o conteúdo à esquerda */
  align-items: center; /* Centraliza verticalmente */
  background-color: var(--black);
  min-height: 40px;
  border-top: 1px solid var(--black);
  position: relative; /* Garante que o conteúdo fique sobre a imagem */
  z-index: 2; /* Define a ordem de empilhamento */
  margin: 0;
  font-family: var(--font-body);
  color: var(--white);
  transition: background-color 0.3s ease-in-out;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px;
}

/* --- Efeitos de Hover para o Card de Vídeo --- */

/* Ao passar o mouse no card, a imagem dá um leve zoom */
.video-card:hover img {
  transform: scale(1.02);
}

/* Ao passar o mouse no card, o fundo do conteúdo e o texto mudam de cor */
.video-card:hover .video-card-content {
  background-color: var(--grey);
  color: var(--black);
}