/* Botão "artista aleatório" do SQLVS — usado tanto na index/páginas de mês
   (que já definem --hero-color via css/sqlvs.css) quanto injetado nas
   páginas de show standalone (ver inject_random_button() em build.py), daí
   os fallbacks em var(--hero-color, ...)/var(--hero-shadow, ...): essas
   páginas não declaram essas variáveis, cada uma tem paleta própria. */
.sqlvs-random-cta {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  align-self: flex-start;
  margin-bottom: 1.25rem;
  padding: 10px 16px;
  border: 1px solid var(--hero-color, #00ff00);
  background: color-mix(in srgb, var(--hero-color, #00ff00) 6%, transparent);
  color: var(--hero-color, #00ff00);
  text-decoration: none;
  font-family: "Space Mono", monospace;
  font-size: 0.8rem;
  letter-spacing: 0.5px;
  text-shadow: 0 0 8px var(--hero-shadow, rgba(0, 255, 0, 0.5));
  box-shadow: 0 0 10px var(--hero-shadow, rgba(0, 255, 0, 0.3));
  transition: all 0.25s ease;
  cursor: pointer;
}

.sqlvs-random-cta:hover,
.sqlvs-random-cta:focus-visible {
  background: color-mix(in srgb, var(--hero-color, #00ff00) 14%, transparent);
  box-shadow: 0 0 20px var(--hero-shadow, rgba(0, 255, 0, 0.5));
}

.sqlvs-random-cta-cmd {
  font-weight: 700;
}

.sqlvs-random-cta-sub {
  opacity: 0.75;
  font-size: 0.7rem;
}

/* Linha de botões só usada na injeção das páginas de show (ver
   SQLVS_SHOW_FOOTER_TEMPLATE em build.py: voltar pro catálogo + sortear
   outro artista). Essas páginas têm containers internos de largura
   variável por artifact, então os botões são jogados pra fora de
   qualquer um deles e recentralizados aqui, de forma independente da
   estrutura interna de cada show. */
.sqlvs-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  padding: 32px 16px;
}

.sqlvs-cta-row .sqlvs-random-cta {
  align-self: center;
  align-items: center;
}