/* Créditos das edições.
 *
 * Reaproveita a casca do acervo (topo, rodapé, tokens de tema) e acrescenta só
 * o que é próprio desta tela. Nada aqui compete com o player: a página é um
 * documento, e por isso a leitura vem antes do brilho.
 */

.creditos-intro {
  max-width: 68ch;
  margin: 0 auto 1.5rem;
  padding: 0 1rem;
}

.creditos-intro h1 {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  margin: 0 0 0.75rem;
  color: var(--phsp-text-primary);
}

.creditos-intro p {
  margin: 0 0 0.75rem;
  line-height: 1.6;
  color: var(--phsp-text-muted);
}

.creditos-resumo {
  font-weight: 600;
  color: var(--phsp-text-primary);
}

.creditos-nota {
  font-size: 0.92rem;
  opacity: 0.85;
}

.creditos-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  padding: 0 1rem 1.25rem;
}

.creditos-filtro {
  border: 1px solid var(--phsp-line);
  background: transparent;
  color: var(--phsp-text-muted);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

.creditos-filtro:hover { border-color: var(--phsp-accent); }

.creditos-filtro[aria-pressed='true'] {
  background: var(--phsp-accent);
  color: var(--phsp-ink);
  border-color: var(--phsp-accent);
  font-weight: 600;
}

/* Grade que respira em telas pequenas sem virar coluna única em telas grandes:
 * o crédito é uma lista de nomes, e nome curto em linha larga fica ilegível. */
.creditos-lista {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: 0.9rem;
  padding: 0 1rem 2rem;
}

.credito-cartao {
  border: 1px solid var(--phsp-line);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
  background: var(--phsp-panel);
}

.credito-cartao[hidden] { display: none; }

.credito-nome {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: var(--phsp-text-primary);
}

.credito-licenca {
  margin: 0 0 0.35rem;
  font-size: 0.88rem;
  color: var(--phsp-text-muted);
}

/* A obrigação fica visível no cartão, não escondida no rodapé: quem lê precisa
 * saber que sob CC BY o crédito é condição, não gentileza. */
.credito-obrigacao {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  opacity: 0.8;
  color: var(--phsp-text-muted);
}

.credito-cartao[data-licenca='cc-by-licenciado'] {
  border-left: 3px solid var(--phsp-accent);
}

.credito-cartao summary {
  cursor: pointer;
  font-size: 0.88rem;
  color: var(--phsp-text-muted);
}

.credito-obras {
  margin: 0.5rem 0 0;
  padding-left: 1.1rem;
  max-height: 14rem;
  overflow-y: auto;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--phsp-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
  .creditos-filtro { transition: background-color 120ms ease, border-color 120ms ease; }
}