/* ==========================================================================
   STHEFANY — página de imprensa
   imprensa.css · v0.1.0
   --------------------------------------------------------------------------
   Press kit público, e o escopo dele é LANÇAMENTO: disco, single, clipe,
   entrada no artistas. Show contratado NÃO entra — o release da data é
   responsabilidade de quem contrata, e o material de apoio daquela data já
   vive na área do contratante, licenciado para ela.

   Isso muda a hierarquia da página. Se o assunto fosse show, a página seria
   uma listagem: catorze artistas, todos iguais, todos o tempo todo. Como o
   assunto é lançamento, um lançamento por vez ocupa a faixa inteira — quem
   chega no mês de um lançamento está procurando aquele, e não deve ter de
   encontrá-lo numa lista.

   Abaixo do destaque ficam os lançamentos anteriores, em lista de arquivo, e
   o material permanente do artistas: foto, bio e logotipo, que não dependem de
   haver lançamento. É esse último bloco que impede a página de ficar vazia
   entre um lançamento e outro — seção vazia envelhece rápido e trabalha
   contra.

   Continua sendo o subconjunto "divulgar" das três classificações da 0.52.0.
   Nada de produção — rider, mapa de palco e ficha técnica continuam só para
   quem contratou, e o contrato e a nota nem aparecem.

   No material permanente o agrupamento é por ARTISTA, não por tipo de
   arquivo: quem chega está procurando um nome, e agrupar por "fotos" e
   "textos" obrigaria a varrer catorze artistas duas vezes para montar uma
   matéria sobre um. Mesmo raciocínio da 0.51.0 — agrupar pela tarefa de quem
   consulta, não pela origem do arquivo.
   ========================================================================== */

.sp-imprensa { padding-block-end: var(--sp-secao-meia); }

.sp-imprensa__interno {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-8);
}

/* --- aviso de uso ----------------------------------------------------------
   Não é alerta: é a resposta à primeira pergunta de quem baixa um logotipo de
   uma agência. Faixa vermelha aqui daria a ela mais peso que o material que
   ela descreve — mesma correção que a nota de versão do contratante recebeu
   na 0.51.0. */
.sp-imprensa__aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-e-4);
  align-items: start;
  max-width: 78ch;
  padding: var(--sp-e-5);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-cartao, 16px);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: 1.6;
}

.sp-imprensa__aviso i {
  font-size: 1.25rem;
  color: var(--sp-acento-texto);
  line-height: 1.3;
}

/* --- grade de artistas -----------------------------------------------------
   `auto-fill`, não `auto-fit`: o artistas tem catorze nomes e vai crescer, então
   a última fileira não pode depender de a conta fechar. Mesma escolha da
   grade do artistas, e o oposto da loja, que tem quatro peças. */
.sp-imprensa__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  gap: var(--sp-e-6);
}

.sp-imprensa__artista {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-5);
  padding: var(--sp-e-6);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-cartao, 16px);
}

.sp-imprensa__cabecalho {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: var(--sp-e-5);
  align-items: center;
  padding-block-end: var(--sp-e-5);
  border-block-end: 1px solid var(--sp-linha-clara);
}

/* A foto entra colorida, como na página do artista: o preto e branco existe
   para homogeneizar acervo irregular, e aqui quem chega quer ver o artista. */
.sp-imprensa__foto { border-radius: var(--sp-raio); }

.sp-imprensa__nome {
  font-size: var(--sp-t-h3);
  line-height: 1.1;
}

.sp-imprensa__resumo {
  margin-block-start: var(--sp-e-2);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: 1.5;
}

.sp-imprensa__link {
  display: inline-block;
  margin-block-start: var(--sp-e-3);
  color: var(--sp-acento-texto);
  font-size: var(--sp-t-peq);
  font-weight: 500;
}

.sp-imprensa__itens {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-2);
}

.sp-subgrupo + .sp-subgrupo { margin-block-start: var(--sp-e-5); }

/* --- material que ainda não existe -----------------------------------------
   Fica na lista, apagado, com a razão escrita no lugar do formato. Sumir faria
   o jornalista achar que o link falhou e mandar a mensagem que esta página
   existe para evitar. É `<span>`, não `<a>`: não há para onde ir, e um link
   que não leva a lugar nenhum é pior que a ausência dele. */
.sp-item-material--fora {
  border-style: dashed;
  color: var(--sp-tinta-2);
  cursor: default;
}

.sp-item-material--fora:hover {
  border-color: var(--sp-linha-clara);
  background: none;
}

/* --- material da agência ---------------------------------------------------
   Comum a todos os artistas, então não se repete dentro de cada bloco. Mesma
   razão pela qual, na área do contratante, logotipo e texto de divulgação
   ficam fora do contrato. */
.sp-imprensa__bloco .sp-titulo { margin-block-end: var(--sp-e-5); }

.sp-imprensa__apoio {
  margin-block: var(--sp-e-3) var(--sp-e-5);
  max-width: 60ch;
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: 1.6;
}

/* Lista de arquivo e cartão de apoio não acompanham a largura da página: em
   84rem uma linha de arquivo vira uma faixa atravessando a tela, com o nome
   de um lado e a seta do outro, longe demais um do outro para se lerem como
   um item só. */
.sp-imprensa__estreito { max-width: 44rem; }

/* --- lançamento em destaque ------------------------------------------------
   Capa quadrada à esquerda, ficha e material à direita. A capa é o único
   lugar da página onde a imagem é grande, e é de propósito: é ela que o
   jornalista reconhece antes de ler o título, e é o arquivo que ele veio
   buscar com mais frequência.

   A ficha usa `<dl>`. São pares nome/valor, e a lista de definição é o que
   faz o leitor de tela ler "Artista: Banda Vida Reluz" em vez de duas frases
   soltas. Ela traz margem da folha do navegador — zerada abaixo, senão abre
   um vão que se lê como desalinhamento. */
.sp-lancamento {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--sp-e-7);
  align-items: start;
  padding: var(--sp-e-6);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-cartao, 16px);
}

.sp-lancamento__capa .sp-imagem { border-radius: var(--sp-raio); }

.sp-lancamento__corpo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-4);
}

/* Rótulo em caixa alta acima de título é ruído em quase toda seção deste
   site. Aqui ele sobrevive porque nomeia um dado que o título não diz: o
   título é o nome do disco, e "Lançamento" é o que distingue este bloco dos
   anteriores logo abaixo. */
.sp-lancamento__etiqueta {
  color: var(--sp-acento-texto);
  font-size: var(--sp-t-mini);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sp-lancamento__titulo {
  font-size: var(--sp-t-h3);
  line-height: 1.1;
}

.sp-lancamento__resumo {
  max-width: 62ch;
  color: var(--sp-tinta-2);
  line-height: 1.6;
}

.sp-lancamento__ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-e-4) var(--sp-e-5);
  margin: 0;
  padding-block: var(--sp-e-4);
  border-block: 1px solid var(--sp-linha-clara);
}

.sp-lancamento__ficha dt {
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  font-weight: 500;
}

.sp-lancamento__ficha dd {
  margin: 0;
  margin-block-start: 2px;
  font-size: var(--sp-t-peq);
  font-weight: 600;
}

/* Streaming por link, não por embutido: um player do Spotify custa perto de
   meio mega e grava cookie, para entregar o que um link entrega. Mesma
   decisão da discografia, na página do artista. */
.sp-lancamento__ouvir {
  display: flex;
  align-items: center;
  gap: var(--sp-e-4);
}

.sp-lancamento__ouvir-rotulo {
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  font-weight: 500;
}

.sp-lancamento__ouvir a {
  font-size: 1.375rem;
  color: var(--sp-tinta-2);
  transition: color var(--sp-transicao);
}

.sp-lancamento__ouvir a:hover { color: var(--sp-acento-texto); }

@media (max-width: 60rem) {
  /* Em coluna a capa deixa de ser um bloco de 20rem ao lado do texto e passa
     a limitar a própria largura: esticada na tela toda, ela empurraria a
     ficha e o material para fora da primeira dobra. */
  .sp-lancamento { grid-template-columns: 1fr; }
  .sp-lancamento__capa { max-width: 16rem; }
}

@media (max-width: 40rem) {
  .sp-imprensa__grade { grid-template-columns: 1fr; }

  .sp-imprensa__cabecalho { grid-template-columns: 4rem minmax(0, 1fr); }

  .sp-imprensa__aviso {
    grid-template-columns: 1fr;
    gap: var(--sp-e-3);
  }
}

/* ==========================================================================
   Para imprensa, na página do artista
   --------------------------------------------------------------------------
   O material aberto de um artista mora na página dele, não numa página de
   imprensa separada: o jornalista chega pelo NOME, e mandá-lo sair daqui para
   reencontrar o mesmo nome numa grade de catorze é trabalho que a página já
   podia ter poupado. Mesma lógica de vídeos, agenda e discografia estarem
   aqui.

   Aberto fica o que dá alcance e não tem custo de licença — bio, foto em
   resolução de tela, logotipo. Atrás da credencial fica o pesado e o que tem
   prazo, e é lá que a agência descobre quem é o veículo.

   A seção vem no fim, antes das notícias: quem veio ver o artista não deve
   topar com material de trabalho antes do conteúdo.
   ========================================================================== */

.sp-imprensa-artista {
  padding-block: var(--sp-secao-meia);
}

.sp-imprensa-artista__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--sp-e-8);
  align-items: start;
}

/* `.sp-titulo` não traz margem própria — o espaçamento vem do `gap` do
   container. Margem negativa aqui subia o texto por cima do título. */
.sp-imprensa-artista__texto {
  max-width: 56ch;
  margin-block: var(--sp-e-4) var(--sp-e-5);
  color: var(--sp-tinta-2);
  line-height: 1.6;
}

.sp-imprensa-artista__itens {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-2);
  max-width: 44rem;
}

/* O cartão diz o que está do outro lado da porta. Porta fechada sem lista do
   que há dentro é o que faz alguém desistir de bater. */
.sp-imprensa-artista__cartao { position: sticky; top: calc(var(--sp-cabecalho) + var(--sp-e-5)); }

@media (max-width: 64rem) {
  .sp-imprensa-artista__interno { grid-template-columns: 1fr; }
  .sp-imprensa-artista__cartao { position: static; max-width: 34rem; }
}

/* ==========================================================================
   Área de imprensa credenciada
   --------------------------------------------------------------------------
   Cinco telas na mesma página, trocadas por `data-etapa`, na mesma mecânica
   da área do contratante — que agora mora em `css/acesso.css`, porque duas
   páginas a usam.

   A diferença entre as duas áreas está no que vem ANTES do código. O
   contratante já está no contrato: a agência conhece o e-mail dele. Na
   imprensa não há contrato, e por isso existe uma etapa a mais.

   O dado do credenciamento é autodeclarado: ninguém verifica se a rádio
   existe. Isso não o torna inútil, mas define o que ele é — serve para
   registrar e para falar de volta, não para autenticar. Quem quer o release
   raramente mente sobre o veículo.
   ========================================================================== */

/* O formulário de credenciamento não cabe na caixa de 30 rem das outras
   telas: são dez campos, e espremidos em uma coluna eles viram uma rolagem
   que faz a pessoa desistir na metade. */
.sp-acesso__caixa--larga { width: min(46rem, 100%); }

.sp-credencial {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-6);
  margin-block-start: var(--sp-e-6);
}

.sp-credencial__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-e-4);
}

.sp-credencial__campos .sp-campo-bloco--largo { grid-column: 1 / -1; }

.sp-credencial__consentimentos {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-4);
  padding-block-start: var(--sp-e-5);
  border-block-start: 1px solid var(--sp-linha-clara);
}

/* Duas caixas, duas finalidades: dar acesso e manter contato. Juntá-las numa
   caixa só é o que a lei chama de consentimento em bloco — e recusar a
   segunda não pode tirar o material, senão ela não era opcional. */
.sp-consentimento {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-e-3);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
  line-height: 1.5;
  cursor: pointer;
}

.sp-consentimento input {
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  margin-block-start: 0.125rem;
  accent-color: var(--sp-acento);
  cursor: pointer;
}

.sp-consentimento:hover { color: var(--sp-tinta); }

.sp-credencial__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-e-3) var(--sp-e-5);
}

.sp-credencial__nota { color: var(--sp-tinta-2); font-size: var(--sp-t-peq); }

/* --- alternância das cinco telas -------------------------------------------
   Esconder é regra de `acesso.css`; aqui só se reacende a da vez, porque o
   `display` depende do que cada tela é. */
[data-etapa="acesso"]     .sp-etapa--acesso,
[data-etapa="credenciar"] .sp-etapa--credenciar,
[data-etapa="codigo"]     .sp-etapa--codigo,
[data-etapa="analise"]    .sp-etapa--analise { display: grid; }

[data-etapa="painel"] .sp-etapa--painel { display: block; }

/* Quem ainda não entrou não tem nome nem botão de sair no topo. */
[data-etapa="acesso"]     [data-fora-de-acesso],
[data-etapa="credenciar"] [data-fora-de-acesso],
[data-etapa="codigo"]     [data-fora-de-acesso],
[data-etapa="analise"]    [data-fora-de-acesso] { display: none; }

/* --- painel ---------------------------------------------------------------- */

.sp-painel__interno {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-8);
}

.sp-painel__titulo { font-size: var(--sp-t-h2); }

.sp-painel__texto {
  max-width: 62ch;
  margin-block-start: var(--sp-e-3);
  color: var(--sp-tinta-2);
  line-height: 1.6;
}

.sp-painel__colunas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: var(--sp-e-7);
  align-items: start;
}

@media (max-width: 40rem) {
  .sp-credencial__campos { grid-template-columns: 1fr; }
}

/* Cada grupo do credenciamento é um assunto: quem é você, qual é o veículo.
   Dez campos numa lista plana são uma pilha — mesma constatação da 0.52.0
   sobre os nove itens de "Para divulgar" na área do contratante. */
.sp-credencial__grupo { display: flex; flex-direction: column; gap: var(--sp-e-3); }

.sp-painel__topo { max-width: 62ch; }

/* Dentro do painel os títulos nomeiam blocos de uma tela de trabalho, não
   seções de uma página de leitura: em `--sp-t-h2` eles competem com o próprio
   material e "Lançamentos anteriores" quebra em duas linhas ao lado de uma
   lista de três itens. */
.sp-painel .sp-titulo,
.sp-imprensa-artista .sp-titulo { font-size: var(--sp-t-h3); }

/* As regras da sessão mudaram na 0.58.0: o estado global foi para `base.css`,
   o item da gaveta para `gaveta.css` e o cartão de credenciado para
   `componentes.css`. A gaveta existe em TODAS as páginas do site, e uma regra
   dela nesta folha só valeria onde a imprensa é carregada — que é o defeito
   que a regra de propriedade de classe existe para impedir. */

/* ==========================================================================
   Avisar que publiquei
   --------------------------------------------------------------------------
   Mora dentro da área logada, e não no formulário de contato: a pessoa já
   está identificada e não precisa se apresentar, o aviso vira registro
   estruturado em vez de texto que alguém teria de transcrever, e ela vê as
   próprias publicações logo abaixo — que é o retorno que faz alguém avisar
   uma segunda vez.

   Quatro campos, e nenhum a mais. Cada campo derruba a taxa de resposta, e
   este é o único indicador de RESULTADO do painel inteiro: o resto mede quem
   pegou o material, não quem o usou.
   ========================================================================== */

.sp-bloco-claro {
  padding: var(--sp-e-6);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-cartao, 16px);
}

.sp-bloco-claro .sp-titulo { font-size: var(--sp-t-h3); }

.sp-aviso {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-4);
  margin-block-start: var(--sp-e-5);
}

.sp-aviso__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--sp-e-4);
}

.sp-aviso__campos .sp-campo-bloco--largo { grid-column: 1 / -1; }

/* O "sobre o quê" é um `select` agrupado por artista, não um palpite com
   "não é este?". A lista completa custa um clique e evita que quem publicou
   sobre outro artista tenha de descobrir como corrigir. O `optgroup` é o que
   torna catorze artistas navegáveis: acha-se o nome primeiro, o lançamento
   depois. */
.sp-aviso .sp-botao { align-self: flex-start; }

/* --- o que você já avisou --------------------------------------------------
   Sem retorno visível o veículo avisa uma vez e para: entregou a informação e
   não viu acontecer nada. */

.sp-aviso__lista {
  margin-block-start: var(--sp-e-6);
  padding-block-start: var(--sp-e-5);
  border-block-start: 1px solid var(--sp-linha-clara);
}

.sp-publicacoes {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sp-publicacao {
  padding-block-end: var(--sp-e-3);
  border-block-end: 1px solid var(--sp-linha-clara);
}
.sp-publicacao:last-child { padding-block-end: 0; border-block-end: 0; }

.sp-publicacao__titulo { font-size: var(--sp-t-peq); font-weight: 600; }

.sp-publicacao__meta {
  margin-block-start: 2px;
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
}

/* O estado responde "e daí?": a pessoa avisou e quer saber se serviu. */
.sp-publicacao__estado { color: var(--sp-acento-texto); font-weight: 500; }