/* ==========================================================================
   BARRA DE CONTEXTO DO ARTISTA (context_bar.css)
   ========================================================================== */

/* 1. LAYOUT PRINCIPAL
   ========================================================================== */
/* Estilos para o container principal da barra e a faixa de rolagem. */
.artist-context-bar {
  width: 100%;
  background-color: var(--black);
  display: flex;
}

.context-content-wrapper {
  flex-grow: 1;
  overflow: hidden;
}

.context-track {
  display: flex;
  align-items: stretch;
  height: 170px;
  background-color: var(--black);
}
.context-track:first-of-type {
  border-top: 1px solid var(--red);
}
/* 2. LAYOUT E ESTILO BASE DOS CARDS
   ========================================================================== */
/* Define a aparência e o tamanho padrão dos cards. */

.context-card {
  display: block;
  position: relative;
  height: 100%;
  background-color: var(--black);
  overflow: hidden;
  flex-shrink: 0;
  transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  /* Estado padrão: comprimido (aspect-ratio 1:2) */
  width: 85px;
}

/* 3. EFEITOS DE EXPANSÃO DOS CARDS (HOVER/ACTIVE)
   ========================================================================== */
/* Controla a animação de largura dos cards quando o mouse passa por perto. */

/* Padrão (release/merch): expande para 1:1 */
.context-card.context-card-release.is-active,
.context-card.context-card-merch.is-active {
  width: 170px; /* Expande para um aspect-ratio de 1:1 */
}

/* Específico para vídeos e editorial: expande para 16:9 */
.context-card.context-card-video.is-active,
.context-card.context-card-editorial.is-active {
  width: 302px; /* Expande para um aspect-ratio de 16:9 (302px / 170px) */
}

/* Efeito para os vizinhos imediatos */
.context-card.is-adjacent-1 {
  width: 120px;
}

/* Efeito para os vizinhos mais distantes */
.context-card.is-adjacent-2 {
  width: 95px;
}

/* 4. ESTILOS DAS IMAGENS DOS CARDS
   ========================================================================== */
/* Controla o ajuste, filtros e transições das imagens. */

.context-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Efeito preto e branco para todos os cards, exceto o do artista */
.context-card img {
  filter: grayscale(10%);
}

/* Remove o efeito preto e branco no hover */
.context-card:hover img {
  filter: grayscale(0%);
}

/* Zoom padrão em vídeos para cortar letterbox do thumbnail do YouTube */
.context-card-video img {
  transform: scale(1.35); /* zoom fixo para eliminar tarjas */
  transform-origin: center center;
}

/*
  Configuração especial para as imagens 16:9 (vídeo/editorial) no estado "fechado"
  para evitar tarjas pretas, centralizando e cortando a imagem.
*/
.context-card-editorial img,
.context-card-video img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* preenche o 16:9 sem sobras */
  object-position: center center; /* centraliza qualquer proporção */
  position: static; /* reseta a centralização manual */
  left: auto;
  /* não redefinir transform aqui para não cancelar o zoom padrão de vídeo */
}

/*
  Correção para thumbnails de vídeo (4:3 com letterbox).
  Aumenta a altura da imagem em 33.33% (proporção de 4/3) e a centraliza
  verticalmente, cortando as barras pretas de cima e de baixo.
*/
/* Removido o ajuste específico 4:3 com letterbox; object-fit: cover já resolve o preenchimento. */

/* Quando o card de vídeo/editorial expande, removemos a centralização especial */
.context-card-video.is-active img,
.context-card-editorial.is-active img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* 5. OVERLAY E TEXTO DOS CARDS
   ========================================================================== */
/* Estilos para a camada de texto que aparece sobre as imagens. */

/* Base para todos os overlays */
.context-card .card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 8px;
  text-align: center;
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-color: var(--red);
}

/* Overlay para os cards de itens (começa invisível) */
.context-card .card-overlay {
  opacity: 0;
}

/* Efeito de hover para mostrar o overlay */
.context-card:hover .card-overlay {
  opacity: 1;
}

/* Estilos de texto para o overlay */
.context-card .card-overlay .p-small {
  margin: 0;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  /* Sombra para legibilidade sobre a imagem */
}

/* 6. BLOCO DE IDENTIDADE DO ARTISTA
   ========================================================================== */
/* Estilos para o bloco combinado de nome + imagem do artista. */
.artist-identity-block {
  display: flex;
  flex-shrink: 0;
  text-decoration: none;
}

.artist-name-part {
  /* Herda estilos do .context-divider */
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--black);
  font-family: var(--font-body);
  text-transform: uppercase;
  padding: 15px;
  max-width: 70px;
  writing-mode: vertical-rl;
  background-color: var(--red);
  transition: var(--transition);
}

.artist-image-part {
  width: 170px;
  height: 100%;
}

.artist-image-part img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 7. DIVISORES DE SEÇÃO
   ========================================================================== */
/* Estilos para os separadores verticais (Discografia, Merch, etc.). */
.context-divider {
  align-items: center;
  display: flex;
  height: 100%;
  color: var(--white);
  font-family: var(--font-body);
  text-transform: uppercase;
  flex-shrink: 0;
  padding: 15px;
  border-left: 1px solid var(--red);
  max-width: 70px;
  writing-mode: vertical-rl;
  background-color: var(--black);
  transition: var(--transition);
}

/* Efeito de hover para o bloco de identidade do artista */
.artist-identity-block:hover .artist-name-part {
  background-color: var(--grey);
}

/* Efeito de zoom na imagem do artista no hover */
.artist-identity-block:hover .artist-image-part img {
  transform: scale(1.005);
}

/* LIGHT THEME */
.page-light-theme .artist-context-bar {
  background-color: var(--white);
}
.page-light-theme .context-track {
  background-color: var(--white);
}
.page-light-theme .context-track:first-of-type {
  border-top: 1px solid var(--black);
}
.page-light-theme .artist-name-part,
.page-light-theme .context-divider {
  background-color: var(--white);
  color: var(--black);
}
.page-light-theme .context-divider {
  border-left: 1px solid var(--black);
}
.page-light-theme .context-card .card-overlay {
  background-color: var(--black);
  color: var(--white);
}
.page-light-theme .context-card .card-overlay .p-small {
  color: var(--white);
}

@media (max-width: 900px) {
  .artist-context-bar {
    display: none;
  }
}