/* ==========================================================================
   NA MÍDIA — o clipping no site
   Vinda do protótipo 0.106.0 sem mudança de regra. As duas únicas adições
   estão marcadas com "no tema": o estado da lista vem do PHP, e o cartão
   precisou de uma regra de foco que no protótipo o link já tinha.
   --------------------------------------------------------------------------
   "Na mídia" e não "clipping": clipping é palavra de assessoria. Quem chega
   aqui é fã, produtor ou jornalista procurando o que saiu sobre um artista, e
   nenhum dos três usa esse termo.

   O QUE SEPARA ESTE CARTÃO DO DE NOTÍCIA.
   --------------------------------------------------------------------------
   O cartão de notícia lidera pela manchete, porque a agência escreveu e o
   assunto é o que importa. Aqui o veículo vem ANTES do título: numa lista de
   clipping o que orienta é QUEM publicou — "saiu no Diário do Nordeste" decide
   se vale abrir mais do que a manchete decide.

   Não é variação de gosto: são duas perguntas diferentes na mesma página, e
   quem lê as duas listas precisa sentir a diferença sem que alguém explique.
   ========================================================================== */

.sp-namidia { padding-block: var(--sp-secao); }

/* O VÃO É `--sp-e-6`, e não `--sp-vao`.
   ---------------------------------------------------------------------------
   `--sp-vao` existe SÓ dentro de `.sp-carrossel__trilho` — é variável do
   componente, não do sistema. Usada aqui, `var(--sp-vao)` não resolve, e o
   navegador descarta a declaração inteira: o `gap` some e os cartões encostam.

   **Nada avisa.** Não é erro no console, não é linha riscada no inspetor: é uma
   propriedade que simplesmente não existe. Mesmo modo de falha do
   `--sp-linha-escura` no tema — variável sem valor e sem fallback.

   `--sp-e-6` é o mesmo vão do `.sp-blog__grade`, que é a grade irmã desta. */
.sp-namidia__grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: var(--sp-e-6);
  margin-block-start: var(--sp-e-6);
}

/* O estado vazio e a grade se revezam pelo `data-estado` da seção — mesmo
   mecanismo do `.sp-blog`, para as duas listagens do site se comportarem
   igual. **No tema quem escreve o atributo é o `have_posts()`**, e não a mão de
   quem editou o HTML: é a mesma linha do `archive-sth_produto.php`. */
.sp-namidia[data-estado="cheio"] .sp-vazio,
.sp-namidia[data-estado="vazio"] .sp-namidia__grade,
.sp-namidia[data-estado="vazio"] .sp-resultado { display: none; }


/* --- o cartão ------------------------------------------------------------- */

.sp-clip {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-2);
  color: inherit;
  text-decoration: none;
}

.sp-clip__foto {
  aspect-ratio: 3 / 2;
  border-radius: var(--sp-raio);
  margin-block-end: var(--sp-e-2);
}

/* O VEÍCULO EM CAIXA ALTA E CORPO MINI. Ele lidera a hierarquia sem competir
   com o título: maiúscula pequena lê como etiqueta, e etiqueta é exatamente o
   papel dele — dizer de onde vem antes de dizer o quê. */
.sp-clip__veiculo {
  font-size: var(--sp-t-mini);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sp-acento-texto);
}

.sp-clip__titulo {
  margin: 0;
  font-family: var(--sp-fonte-titulo);
  /* Mesmo degrau do `.sp-post__titulo`: os dois cartões convivem na home, e
     tamanhos diferentes fariam um parecer mais importante que o outro por
     acidente de folha. */
  font-size: var(--sp-t-h3);
  font-weight: 600;
  line-height: var(--sp-lh-titulo);
}

.sp-clip__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-2);
  align-items: baseline;
  margin: 0;
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
}

.sp-clip__artista { font-weight: 600; color: var(--sp-tinta-2); }

/* Algarismos de largura fixa: numa grade de cartões as datas ficam quase
   alinhadas entre si, e "quase" é o que o olho registra como torto. */
.sp-clip__quando { font-variant-numeric: tabular-nums; }

/* "Da agência" é ausência de artista, e não um artista chamado assim. O tom
   mais fraco é o que impede alguém de procurar essa página no elenco. */
.sp-clip__artista--agencia { font-weight: 400; color: var(--sp-tinta-3); }

.sp-clip__onde {
  margin: 0;
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
}

.sp-clip__conta { font-weight: 700; color: var(--sp-tinta); }

@media (hover: hover) and (pointer: fine) {
  .sp-clip:hover .sp-clip__titulo { color: var(--sp-acento-texto); }
}


/* ==========================================================================
   A PÁGINA DE UM CLIPPING
   --------------------------------------------------------------------------
   Um clipping é um ASSUNTO, não um link: a mesma matéria sai no portal, vira
   post e vira vídeo. Seis links soltos numa listagem não contam essa história;
   uma página que os reúne, sim. Foi o argumento que reverteu a decisão anterior
   de manter o clipping fora do site.
   ========================================================================== */

/* GANCHOS DE ESTRUTURA — e por que eles ganharam regra aqui.
   ---------------------------------------------------------------------------
   O protótipo usa `.sp-clipagem`, `.sp-clipagem__principal`,
   `.sp-clipagem__lateral` e `.sp-onde` como ganchos e não declara nada para
   elas. O `verificar-tema.py` trata classe sem regra como erro, e está certo:
   é exatamente assim que um nome digitado errado aparece.

   As declarações abaixo não são cerimônia — são as que a grade pede. `min-width`
   zero porque coluna de grade tem mínimo automático de conteúdo, e um endereço
   longo sem espaço estoura a coluna em vez de quebrar; `flow-root` porque o
   topo escuro e o miolo têm margens que colapsariam através do `<article>`.

   **Isto precisa voltar para o protótipo** na próxima versão dele. */
.sp-clipagem { display: flow-root; }

.sp-clipagem__principal,
.sp-clipagem__lateral,
.sp-onde { min-width: 0; }

.sp-clipagem__topo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: calc(var(--sp-cabecalho) + var(--sp-e-8)) var(--sp-e-8);
}

.sp-clipagem__cabecalho { position: relative; z-index: 1; max-width: 52rem; }

.sp-migalha {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-2);
  margin-block-end: var(--sp-e-4);
  font-size: var(--sp-t-mini);
  color: var(--sp-texto-3);
}
.sp-migalha a { color: inherit; }

.sp-clipagem__titulo {
  margin: 0;
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h2);
  line-height: var(--sp-lh-titulo);
}

.sp-clipagem__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-2) var(--sp-e-4);
  margin-block-start: var(--sp-e-4);
  color: var(--sp-texto-3);
  font-size: var(--sp-t-peq);
}
.sp-clipagem__artista { color: inherit; font-weight: 600; }

.sp-clipagem__interno {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--sp-e-8);
  align-items: start;
  padding-block: var(--sp-secao-meia);
}

@media (max-width: 62rem) {
  .sp-clipagem__interno { grid-template-columns: minmax(0, 1fr); gap: var(--sp-e-7); }
}

/* O RESUMO É DA AGÊNCIA, e não da matéria. Copiar o texto do veículo seria
   republicar conteúdo de terceiro; o que cabe aqui é por que este registro
   existe e o que ele reúne. A medida de linha curta reforça isso: é nota de
   apresentação, não corpo de reportagem. */
.sp-clipagem__resumo {
  max-width: 60ch;
  margin: 0 0 var(--sp-e-7);
  font-size: var(--sp-t-corpo);
  line-height: var(--sp-lh-corpo);
  color: var(--sp-tinta-2);
}


/* --- onde saiu ------------------------------------------------------------ */

.sp-onde__titulo {
  margin: 0 0 var(--sp-e-5);
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h3);
}

.sp-onde__lista { margin: 0; padding: 0; list-style: none; }

.sp-onde__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--sp-e-4);
  align-items: center;
  padding-block: var(--sp-e-4);
  border-block-start: 1px solid var(--sp-linha-clara);
}
.sp-onde__item:last-child { border-block-end: 1px solid var(--sp-linha-clara); }

.sp-onde__item .sp-i { width: 1.25rem; height: 1.25rem; color: var(--sp-tinta-3); }

.sp-onde__corpo { min-width: 0; }

.sp-onde__link {
  display: block;
  color: inherit;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* VEICULAÇÃO SEM LINK EXISTE e não pode sumir da lista: TV e rádio nem sempre
   publicam on-line, e uma contagem que as ignorasse subnotificaria justamente o
   meio de maior alcance. Ela fica em tom secundário e sem sublinhado — o que
   diz "não clica" sem precisar de aviso. */
.sp-onde__link--sem { color: var(--sp-tinta-2); font-weight: 500; }

.sp-onde__meta {
  display: block;
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
}

/* O ENDEREÇO SECUNDÁRIO — "ver no YouTube da emissora".
   ---------------------------------------------------------------------------
   No protótipo ele é um `<span>` e herda tudo de `.sp-onde__meta`. No tema ele
   é um LINK: a veiculação é uma peça, e os endereços além do primeiro precisam
   ser alcançáveis. Linha própria para não virar continuação do nome do veículo,
   e sublinhado só no hover — dentro de um item que já tem um link forte acima,
   dois sublinhados competem. */
.sp-onde__em {
  display: block;
  color: var(--sp-tinta-3);
  text-decoration: none;
}
.sp-onde__em:hover { text-decoration: underline; }

.sp-onde__capa {
  inline-size: 7rem;
  aspect-ratio: 16 / 9;
  border-radius: var(--sp-raio-peq);
}

@media (max-width: 48rem) {
  .sp-onde__item { grid-template-columns: auto minmax(0, 1fr); }
  /* O ENDEREÇO SECUNDÁRIO — "ver no YouTube da emissora".
   ---------------------------------------------------------------------------
   No protótipo ele é um `<span>` e herda tudo de `.sp-onde__meta`. No tema ele
   é um LINK: a veiculação é uma peça, e os endereços além do primeiro precisam
   ser alcançáveis. Linha própria para não virar continuação do nome do veículo,
   e sublinhado só no hover — dentro de um item que já tem um link forte acima,
   dois sublinhados competem. */
.sp-onde__em {
  display: block;
  color: var(--sp-tinta-3);
  text-decoration: none;
}
.sp-onde__em:hover { text-decoration: underline; }

.sp-onde__capa { grid-column: 2; inline-size: 100%; margin-block-start: var(--sp-e-2); }
}


/* --- a ficha lateral ------------------------------------------------------ */

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

.sp-ficha__titulo {
  margin: 0 0 var(--sp-e-4);
  font-size: var(--sp-t-peq);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sp-tinta-3);
}

.sp-ficha__lista { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-e-2) var(--sp-e-4); margin: 0; }
.sp-ficha__lista dt { color: var(--sp-tinta-3); font-size: var(--sp-t-mini); }
.sp-ficha__lista dd { margin: 0; font-size: var(--sp-t-peq); }

.sp-relacionados { padding-block: var(--sp-secao-meia); border-block-start: 1px solid var(--sp-linha-clara); }


/* ==========================================================================
   O CARROSSEL — home e página do artista
   --------------------------------------------------------------------------
   Reusa `.sp-carrossel` e o cartão acima. Não é grade porque, na home, o
   clipping compete com agenda, elenco e notícias: uma grade de catorze cartões
   empurraria tudo para baixo para mostrar o que quase ninguém veio ver.

   Na página do artista o argumento é o mesmo e mais forte — ali o clipping vem
   depois da discografia e da agenda, e quem rolou até lá está confirmando
   interesse, não descobrindo.
   ========================================================================== */

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

/* DESVIO DO PROTÓTIPO, e é de propriedade de classe: lá o texto de apoio da
   faixa usa `.sp-blog__texto`, que é do blog. Emprestar classe de outra seção
   obriga a carregar `blog.css` em toda página que tenha esta faixa — inclusive
   onde não há notícia nenhuma — e faz um ajuste no blog mexer aqui sem aviso. A
   regra é idêntica; só o dono mudou. */
.sp-namidia__texto {
  max-width: 46ch;
  color: var(--sp-tinta-2);
}

.sp-namidia__topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-e-4);
  margin-block-end: var(--sp-e-6);
}

.sp-namidia--secao .sp-carrossel__trilho > .sp-clip { scroll-snap-align: start; }


/* --- no tema: o anel de foco do cartão -------------------------------------
   O `:focus-visible` da base já desenha o anel com `outline-offset: 3px`, rente
   ao conteúdo. Num cartão que começa com foto de sangramento total, 3px encosta
   na imagem e o anel some dentro dela. A única coisa que muda aqui é o
   afastamento e o raio — a cor e a espessura continuam vindo da base, para o
   foco do site inteiro continuar sendo um só. */
.sp-clip:focus-visible {
  outline-offset: 4px;
  border-radius: var(--sp-raio);
}


/* ==========================================================================
   A PILHA DE ROSTOS
   --------------------------------------------------------------------------
   Um clipping cita quantos artistas quiser, e o cartão tem 17rem. Uma lista de
   nomes quebra em três linhas e empurra a contagem de veiculações para fora do
   alinhamento da grade; a pilha ocupa a MESMA altura com um ou com nove.

   A sobreposição é negativa e pequena: o suficiente para ler como grupo, não
   tanto que o rosto de trás vire só uma borda. A borda clara é o que separa um
   círculo do outro quando as duas fotos são escuras — sem ela, cinco rostos em
   preto e branco viram uma mancha só.
   ========================================================================== */

.sp-pilha {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-e-2);
  min-width: 0;
}

.sp-pilha__rostos { display: inline-flex; }

.sp-pilha__rosto {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--sp-linha-clara);
  box-shadow: 0 0 0 2px var(--sp-papel);
}

/* O primeiro não recua; os outros encavalam. `margin-inline-start` negativo em
   todos menos no primeiro, e não `margin-inline-end` negativo em todos: assim a
   largura total da pilha continua certa e o nome ao lado não encosta. */
.sp-pilha__rosto + .sp-pilha__rosto { margin-inline-start: -.5rem; }

.sp-pilha__rosto img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* O mesmo preto e branco do resto dos cartões desta grade. */
  filter: grayscale(1);
}

.sp-pilha__inicial,
.sp-pilha__rosto--mais {
  font-size: var(--sp-t-mini);
  font-weight: 700;
  color: var(--sp-tinta-2);
  line-height: 1;
}

.sp-pilha__rosto--mais { background: var(--sp-linha-clara); }

.sp-pilha__nome {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--sp-tinta-2);
}

/* No escuro do topo da página do registro a borda clara sumiria: ali o anel
   acompanha o fundo. */
.sp-escuro .sp-pilha__rosto { box-shadow: 0 0 0 2px var(--sp-tinta); }