/* releases.css: Estilos e Layout Específicos para a Página de Lançamento (k.html) */

/* ------------------------------------------- */
/* CONTAINER PRINCIPAL (WIDTH FIXO E CENTRALIZADO) */
/* ------------------------------------------- */
.container {
    width: 400px;
    margin: 0 auto;
    
    /* CORREÇÃO DO ESPAÇO SUPERIOR: Usando padding-top (Exemplo: 40px) */
    padding: 40px 10px 0 10px; 
    
    background-color: var(--cor-texto-claro);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    min-height: 100vh;
}

/* ------------------------------------------- */
/* 1. CAPA (PREENCHER CONTAINER E CONTAINER DO TAMANHO DA IMAGEM) */
/* ------------------------------------------- */
.album-cover-wrapper {
    /* Removido margin-top para que o padding-top do .container crie o espaço */
    margin-top: 0; 
    margin-bottom: 20px; 
    
    text-align: center;
    padding: 0; 
    display: inline-block; 
    margin-left: auto;
    margin-right: auto;

    overflow: hidden; 
}

.album-cover-wrapper img.album-cover {
    width: 100%;
    height: auto;
    display: block; 
    margin: 0;
}

/* ------------------------------------------- */
/* BLOCO DE TEXTO (HEADER) */
/* ------------------------------------------- */
.lancamento-header-reset {
    background-color: var(--cor-fundo-header); 
    color: var(--cor-texto-claro);
    padding: 20px 10px;
    margin: 0 -10px; 
    margin-bottom: 25px;
    text-align: center;
}

.lancamento-header-reset h1 {
    font-family: var(--fonte-destaque);
    text-transform: uppercase;
    font-size: 2.5em; 
    margin: 0;
    color: var(--cor-texto-claro); 
}

.lancamento-header-reset p {
    font-family: var(--fonte-subtitulo);
    font-style: italic;
    font-size: 1.2em;
    color: var(--cor-verde-principal); 
    margin: 5px 0 0 0;
}

/* ------------------------------------------- */
/* LISTA DE FAIXAS (TRACKLIST) */
/* ------------------------------------------- */
#detalhes-faixas {
    padding-bottom: 20px;
}

.info-album {
    text-align: center;
    margin-bottom: 20px;
}

.info-album p {
    font-size: 0.9em;
    font-style: italic;
    color: var(--cor-texto-principal); 
    margin: 5px 0;
}

.tracklist-container {
    background-color: var(--cor-texto-claro); 
    padding: 0; 
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid var(--cor-roxo-principal); 
    border-radius: 5px;
}
.faixa-item {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    border-bottom: 1px dashed rgba(75, 0, 130, 0.3);
    font-weight: 500;
}
.faixa-item:last-child { border-bottom: none; }
.faixa-nome { 
    color: var(--cor-roxo-principal); 
}
.duracao { 
    color: var(--cor-roxo-principal); 
    font-weight: bold; 
}


/* ------------------------------------------- */
/* LINKS DE PLATAFORMAS (FLEXBOX 2/3 e 1/3) */
/* ------------------------------------------- */
#streaming h2 {
    margin-top: 0;
    padding-top: 20px;
}

.plataforma-links-container { padding: 0; }
.plataforma-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%; 
    padding: 15px 0;
    /* LINHA DE DIVISÃO CORRIGIDA */
    border-bottom: 1px solid rgba(75, 0, 130, 0.3); 
}
.plataforma-linha:last-child { border-bottom: none; }

.plataforma-logo {
    display: flex;
    align-items: center;
    flex: 2; 
    padding-right: 10px; 
    border-right: 1px solid rgba(75, 0, 130, 0.4); 
    height: 60px; 
    margin: -15px 0; 
    padding-left: 10px; 
}
.plataforma-logo .logo-svg { max-height: 60px; width: auto; }

.plataforma-btn-wrapper {
    flex: 1; 
    padding-left: 10px;
    text-align: center;
}

/* ======================================= */
/* ESTILOS ESPECÍFICOS PARA BOTÕES (RELEASES.CSS) */
/* ======================================= */

.btn-ouvir {
    /* 1. LAYOUT E DIMENSÃO: Faz o elemento se comportar como um botão de bloco */
    display: inline-block;
    padding: 10px 20px; /* Espaçamento interno */
    
    /* 2. ESTILO VISUAL: Cores e Bordas */
    background-color: var(--cor-roxo-principal);
    color: white;             /* Cor do texto */
    border: none;             /* Remove qualquer borda padrão */
    border-radius: 5px;       /* Cantos arredondados */
    cursor: pointer;          /* Sinaliza que é clicável */
    
    /* 3. TIPOGRAFIA E TEXTO */
    text-decoration: none;    /* IMPEDE O SUBINHLADO AZUL/LINK */
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.9em;
    letter-spacing: 1px;
    
    /* 4. ANIMAÇÃO (Melhora a experiência) */
    transition: background-color 0.2s, transform 0.1s;
}

.btn-ouvir:hover {
    /* Efeito ao passar o mouse */
    background-color: var(--cor-hover-roxo); /* Cor um pouco mais escura */
    text-decoration: none; /* Mantém o sublinhado desativado */
    transform: translateY(-1px); /* Leve elevação */
}

/* Se você tiver outros botões (por exemplo, botões de detalhes ou formulários)
   que usam uma classe genérica como '.action-button' no seu código, 
   certifique-se de que o estilo deles também esteja aqui.
*/
.action-button {
    /* ... (Estilos similares, talvez com cor diferente, ex: azul) ... */
    background-color: var(--cor-hover-roxo);
    /* ... */
}

.spotify-btn {
    background-color: var(--cor-verde-principal);
    color: var(--cor-texto-principal) !important;
}
.spotify-btn:hover {
    background-color: var(--cor-hover-verde);
}

/* ------------------------------------------- */
/* LINKS SOCIAIS E RODAPÉ */
/* ------------------------------------------- */
.social-links-container {
    padding: 20px 0;
    text-align: center;
}

.social-links-container h2 { margin-bottom: 15px; }

.links-sociais a {
    display: inline-block;
    margin: 0 10px;
    font-family: var(--fonte-subtitulo);
    text-decoration: none;
    color: var(--cor-roxo-principal);
}

footer {
    padding: 15px 0;
    font-size: 0.8em;
    color: var(--cor-roxo-principal);
    text-align: center;
}