/* slider.css - Estilos específicos para o Carrossel de Releases */

/* Estilos para o container principal do carrossel */
.release-slider {
    width: 100%;
    /* REMOVIDO o min-height fixo, a altura agora será determinada pelo conteúdo */
    overflow: hidden; /* Garante que as bordas arredondadas e outros elementos não vazem */
    padding-bottom: 40px; /* Espaço extra para a paginação e setas */
}

/* Garante que o wrapper Swiper se comporte como flex e ocupe o espaço */
.swiper-wrapper {
    display: flex;
    box-sizing: content-box;
}

/* Estilos para CADA slide (card) do carrossel */
.release-slider .swiper-slide {
    display: flex; /* Torna o slide um container flexível */
    flex-direction: column; /* Empilha imagem e informações verticalmente */
    justify-content: flex-start; /* Alinha o conteúdo ao topo do slide */
    align-items: center; /* Centraliza horizontalmente o conteúdo (imagem, info) */
    height: auto; /* Permite que a altura do slide se ajuste ao conteúdo */
    flex-shrink: 0; /* Impede que os slides encolham inesperadamente */
    box-sizing: border-box; /* Inclui padding/borda no cálculo de width/height */
    padding: 15px; /* Adiciona um padding interno para dar "respiro" ao card */
    background-color: var(--color-background-secondary); /* Cor de fundo para cada "card" de release */
    border-radius: 10px; /* Borda arredondada para o card inteiro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave para destacar o card */
    text-align: center; /* Centraliza o texto dentro do slide */
}

/* Estilos para a IMAGEM dentro de cada slide */
.release-slider .swiper-slide img {
    width: 100%; /* A imagem ocupa 100% da largura do seu slide */
    aspect-ratio: 1 / 1; /* FORÇA a imagem a ter proporção de 1:1 (QUADRADA) */
    height: auto; /* A altura se ajusta automaticamente para manter a proporção */
    display: block;
    object-fit: cover; /* Recorta a imagem para preencher a área definida, mantendo a proporção */
    border-radius: 8px; /* Canto ligeiramente arredondado para a imagem */
    margin-bottom: 15px; /* Espaço entre a imagem e o bloco de informações */
    transition: transform 0.3s ease; /* Transição suave para o hover */
}

.release-slider .swiper-slide img:hover {
    transform: scale(1.03); /* Leve zoom ao passar o mouse */
}

/* Estilos para o bloco de informações do release (título e artista) */
.release-info {
    width: 100%; /* Garante que o bloco de info ocupe toda a largura disponível */
}

.release-info h3 {
    margin: 0 0 5px 0; /* Zera margem superior e inferior, só mantém na base */
    font-size: 1.2em;
    color: var(--color-text-light); /* Cor do título */
    line-height: 1.2; /* Melhor espaçamento entre linhas do título */
    word-wrap: break-word; /* Garante que títulos longos quebrem a linha */
}

.release-info p {
    margin: 0; /* Zera margens padrão */
    font-size: 0.9em;
    color: var(--color-text-secondary); /* Cor do artista */
    line-height: 1.2;
    word-wrap: break-word; /* Garante que nomes longos quebrem a linha */
}

/* Estilos para os botões de navegação do Swiper (setas) */
.swiper-button-next,
.swiper-button-prev {
    color: var(--color-logo-yellow) !important; /* Cor das setas */
    transform: scale(1.5); /* Aumenta o tamanho das setas para melhor visibilidade */
    /* Ajuste de posição se necessário, dependendo do seu layout */
}

/* Estilos para a paginação do Swiper (bolinhas) */
.swiper-pagination-bullet {
    background: var(--color-text-secondary) !important; /* Cor das bolinhas inativas */
    opacity: 0.7;
}

.swiper-pagination-bullet-active {
    background: var(--color-logo-yellow) !important; /* Cor das bolinhas ativas */
    opacity: 1;
}

/* Estilo para a mensagem de carregamento */
.release-card-placeholder {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px; /* Altura para o placeholder */
    width: 100%;
}