/**
 * Tema visual do site público Os Seresteiros.
 * Paleta, tipografia e componentes reutilizáveis (título de seção, card de CD,
 * grids responsivos). Não usado no painel admin.
 */

:root {
    /* Os 4 tons de azul-marinho — dão o ritmo entre seções (ver uso em
       partials/*.php). Nenhuma seção pública usa mais fundo claro/branco. */
    --cor-primaria: #040221;
    --cor-profunda: #06051a;
    --cor-elevada: #09063A;
    --cor-media: #06032D;

    --cor-destaque: #FBD300;
    --cor-texto-suave: #E8E3D3;
    --cor-alerta: #E63946;

    /* Aliases: mantidos para que todo o restante do CSS/HTML que já
       referencia os nomes antigos continue funcionando sem precisar caçar
       cada ocorrência individualmente.
       --cor-branco NÃO é mais um fundo claro — aponta para um tom escuro de
       propósito (ver Tarefa 1), então qualquer texto que ainda dependa dela
       (ex.: "estava sobre fundo claro, uso texto escuro") precisa ter sido
       revisado para --cor-destaque/--cor-texto-suave nos partials. */
    --cor-secundaria: var(--cor-destaque);
    --cor-dourado: var(--cor-destaque);
    --cor-vermelho: var(--cor-alerta);
    --cor-preto: var(--cor-primaria);
    --cor-carvao: var(--cor-elevada);
    --cor-branco: var(--cor-elevada);
}

/* ==========================================================================
   Tipografia
   ========================================================================== */

.font-display {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
}

.font-body {
    font-family: 'Work Sans', sans-serif;
}

/* ==========================================================================
   Título de seção (rótulo + título grande, estilo "vocabulário de rádio/DJ")
   ========================================================================== */

.rotulo-secao {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.75rem;
    color: var(--cor-destaque);
    margin-bottom: 0.25rem;
}

.titulo-secao {
    font-family: 'Rubik', sans-serif;
    font-weight: 900;
    color: var(--cor-destaque);
    font-size: 1.875rem;
    line-height: 1.1;
}

@media (min-width: 768px) {
    .titulo-secao {
        font-size: 2.25rem;
    }
}

/* ==========================================================================
   Card de CD
   ========================================================================== */

.card-cd {
    display: block;
}

.card-cd-capa-wrap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: visible;
    border-radius: 0.5rem;
    /* Moldura dourada dupla, estática — fica no wrapper (nunca gira), não na
       imagem interna (.card-cd-capa, que recebe .vinil-tocando via JS). Assim
       o halo/rotação do vinil nunca disputa a propriedade box-shadow com a
       moldura: são elementos diferentes, cada um com seu próprio shadow. */
    box-shadow:
        0 0 0 2px var(--cor-destaque),
        0 0 0 5px var(--cor-primaria),
        0 0 0 6px var(--cor-destaque);
}

.card-cd-capa {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.5rem;
    transition: border-radius 0.5s ease, box-shadow 0.5s ease;
}

.btn-play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    background-color: var(--cor-destaque);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.25s ease, transform 0.2s ease;
}

.btn-play-overlay:hover {
    transform: translate(-50%, -50%) scale(1.08);
}

@media (min-width: 768px) {
    .btn-play-overlay {
        opacity: 0;
    }

    .card-cd:hover .btn-play-overlay,
    .card-cd:focus-within .btn-play-overlay {
        opacity: 1;
    }
}

.card-cd-titulo {
    display: block;
    margin-top: 0.7rem;
    margin-bottom: 0.2rem;
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    color: var(--cor-destaque);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 19px;
    line-height: 1;
}

.card-cd-artista {
    display: block;
    font-family: 'Work Sans', sans-serif;
    font-size: 0.8rem;
    color: rgba(232, 227, 211, 0.7);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-cd-nun {
    color: rgba(232, 227, 211, 0.55);
}

/* .secao-escura não altera mais nada: com o site 100% escuro, o título/artista
   do card já nascem corretos (dourado/creme) em qualquer seção — a classe
   pode continuar presente no HTML sem efeito (era usada para diferenciar
   seções claras/escuras, distinção que não existe mais). */

/* ==========================================================================
   Card simples (pendrives/mp3s) — capa mantém a proporção natural de cada
   imagem, sem crop forçado. Diferente de .card-cd-capa (sempre quadrada, de
   propósito, para o efeito de vinil girando em card_cd.php/card_musica.php).
   ========================================================================== */

.card-simples-capa-wrap {
    position: relative;
    border-radius: 0.5rem;
    /* Mesma moldura dourada dupla dos cards de CD, para consistência visual
       entre os tipos de card (pendrives/mp3s não têm efeito de vinil, então
       aqui não há nenhum conflito de box-shadow a evitar). */
    box-shadow:
        0 0 0 2px var(--cor-destaque),
        0 0 0 5px var(--cor-primaria),
        0 0 0 6px var(--cor-destaque);
}

.card-simples-capa {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

/* ==========================================================================
   Efeito de "vinil tocando" — aplicado via JS (assets/js/player.js) na imagem
   de capa cujo data-cd-id-capa corresponde ao CD tocando no momento.
   ========================================================================== */

[data-cd-id-capa] {
    transition: border-radius 0.5s ease, box-shadow 0.5s ease;
}

@keyframes girar-vinil {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.vinil-tocando {
    animation: girar-vinil 4s linear infinite;
    border-radius: 50% !important;
    box-shadow:
        0 0 0 3px var(--cor-secundaria),
        0 0 20px 4px rgba(251, 211, 0, 0.4),
        0 0 40px 8px rgba(251, 211, 0, 0.15);
}

/* ==========================================================================
   Player fixo (#player-bar, includes/public_layout_end.php) — capa pequena
   na Zona Esquerda com a mesma moldura dourada dupla dos cards, e um halo
   de vinil proporcionalmente menor (o padrão de .vinil-tocando acima foi
   pensado para capas de card/hero, bem maiores).
   ========================================================================== */

.player-capa-wrap {
    position: relative;
    overflow: visible;
    border-radius: 0.375rem;
    box-shadow:
        0 0 0 2px var(--cor-destaque),
        0 0 0 4px var(--cor-preto),
        0 0 0 5px var(--cor-destaque);
}

#player-thumb {
    border-radius: 0.375rem;
}

#player-thumb.vinil-tocando {
    box-shadow:
        0 0 0 2px var(--cor-secundaria),
        0 0 8px 2px rgba(251, 211, 0, 0.5),
        0 0 14px 3px rgba(251, 211, 0, 0.2);
}

/* Destaque da linha da faixa tocando atualmente na tracklist (cd_content.php),
   sincronizado via JS por Player.sincronizarFaixaAtiva() (assets/js/player.js). */
.faixa-tocando {
    background-color: rgba(251, 211, 0, 0.12);
    border-left-color: var(--cor-dourado) !important;
}
.faixa-tocando .faixa-titulo {
    color: var(--cor-dourado);
    font-weight: 600;
}

/* ==========================================================================
   Grids responsivos de cards
   ========================================================================== */

.grid-cards-6,
.grid-cards-4,
.grid-cards-2 {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .grid-cards-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .grid-cards-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .grid-cards-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}