/* ==========================================================================
   STHEFANY — próximos shows
   shows.css · v0.6.0
   --------------------------------------------------------------------------
   Primeira seção sobre o papel branco, colada no hero: quem chega quer ver
   que a agência tem artista rodando, e a data é a prova disso.

   Duas colunas: à esquerda a fotografia em retrato, à direita o título e a
   lista. Cada linha traz o artista — a agência tem artistas, não um nome.

   Sem rótulo acima do título e sem parágrafo de apresentação: quem chega
   nesta seção quer ver data, não ler sobre como a agenda é mantida.
   ========================================================================== */

.sp-shows {
  padding-block: var(--sp-e-6) var(--sp-secao-meia);
}

.sp-shows__interno {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--sp-e-9);
  align-items: start;
}

.sp-shows__foto {
  border-radius: var(--sp-raio-bloco);
  position: sticky;
  top: calc(var(--sp-cabecalho-min) + var(--sp-e-6));
}

.sp-shows__titulo {
  max-width: 18ch;
}

.sp-shows__texto {
  max-width: 52ch;
  margin-block-start: var(--sp-e-4);
  color: var(--sp-tinta-2);
}

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

/* A linha ganha aqui uma coluna extra com a ação. O selo só aparece no que
   ainda falta confirmar, então a coluna dele pode estar vazia. */
.sp-shows .sp-data {
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--sp-e-5);
}

.sp-shows__rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-e-4);
  margin-block-start: var(--sp-e-6);
}

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

@media (max-width: 64rem) {
  .sp-shows__interno { grid-template-columns: minmax(0, 1fr); gap: var(--sp-e-7); }
  .sp-shows__foto { position: static; aspect-ratio: 16 / 10; }
}

@media (max-width: 48rem) {
  .sp-shows { padding-block: var(--sp-e-6) var(--sp-secao-meia); }

  /* No celular a linha vira duas: data e artista em cima, selo e ação
     embaixo. Quatro colunas em 360px espremem o nome do artista. */
  .sp-shows .sp-data {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-e-3) var(--sp-e-4);
  }
  .sp-shows .sp-data > .sp-selo { grid-column: 2; justify-self: start; }
  .sp-shows .sp-data > .sp-botao { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   Variante: carrossel
   --------------------------------------------------------------------------
   No carrossel a fotografia lateral sai e a faixa ocupa a largura toda: card
   de data espremido em metade da tela não cabe.

   Rolagem nativa com encaixe, sem autoplay. Agenda não é banner — nada se
   move sozinho por cima de informação que a pessoa está lendo.
   ========================================================================== */

/* No carrossel a seção fica bem mais baixa que na lista: sem a fotografia
   lateral, o espaçamento da lista deixa a faixa de cards boiando. */
.sp-shows[data-exibicao="carrossel"] {
  padding-block: var(--sp-e-8);
}

.sp-shows[data-exibicao="carrossel"] .sp-shows__interno {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-e-5);
}

.sp-shows[data-exibicao="carrossel"] .sp-carrossel__topo {
  margin-block-end: var(--sp-e-4);
}

/* Três cartões inteiros e um pedaço. No padrão de 4,3 a data e a cidade
   ficam espremidas. */
.sp-shows .sp-carrossel__trilho { --sp-visiveis: 3.3; }

/* --- card de data --------------------------------------------------------- */

.sp-cartao-data {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-4);
  padding: var(--sp-e-5);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio-bloco);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--sp-transicao), background var(--sp-transicao);
}
.sp-cartao-data:hover {
  border-color: currentColor;
  background: color-mix(in srgb, currentColor 4%, transparent);
}

.sp-cartao-data__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-e-3);
}

.sp-cartao-data__dia {
  display: flex;
  align-items: baseline;
  gap: var(--sp-e-2);
  font-family: var(--sp-fonte-titulo);
  font-variant-numeric: tabular-nums;
}
.sp-cartao-data__dia b {
  font-size: 3rem;
  font-weight: 700;
  line-height: .85;
  color: var(--sp-acento-texto);
}
.sp-cartao-data__dia span {
  font-family: var(--sp-fonte-texto);
  font-size: var(--sp-t-peq);
  font-weight: 500;
  color: var(--sp-tinta-3);
}

.sp-cartao-data__artista {
  font-family: var(--sp-fonte-titulo);
  font-size: var(--sp-t-h3);
  font-weight: 600;
  line-height: 1.1;
}

.sp-cartao-data__local {
  margin-block-start: var(--sp-e-2);
  color: var(--sp-tinta-2);
  font-size: var(--sp-t-peq);
}

.sp-cartao-data__corpo { flex: 1 1 auto; }

@media (max-width: 48rem) {
  .sp-shows .sp-carrossel__trilho { --sp-visiveis: 1.15; }
  .sp-carrossel__setas { display: none; }
  .sp-cartao-data__dia b { font-size: 2.5rem; }
}