/* ==========================================================================
   STHEFANY — página do show
   show.css · v0.4.0
   --------------------------------------------------------------------------
   É a página que abre a partir da agenda, e ela atende dois públicos ao mesmo
   tempo: quem quer assistir e quem viu o artista e quer contratar igual.

   O topo responde o que a pessoa foi buscar — quando, onde e quem — antes de
   qualquer outra coisa. Detalhe de produção vem depois.
   ========================================================================== */

.sp-show-topo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(66svh, 40rem);
  padding-block: calc(var(--sp-cabecalho) + var(--sp-e-6)) var(--sp-e-8);
  /* Sem `overflow: hidden`: o menu de agenda abre para baixo e seria cortado
     na borda do bloco. A fotografia é absoluta com `object-fit: cover`, então
     ela não transborda por conta própria. */
  isolation: isolate;
  color: var(--sp-texto);
}

.sp-show-topo__fundo { position: absolute; inset: 0; z-index: 0; }

.sp-show-topo__fundo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

.sp-show-topo__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(11, 5, 5, .7), transparent 20%),
    linear-gradient(to right, rgba(11, 5, 5, .88), rgba(11, 5, 5, .2) 60%),
    linear-gradient(to top, rgba(11, 5, 5, .94) 2%, rgba(11, 5, 5, .3) 44%, transparent 76%);
}

/* Em coluna única o véu lateral trabalha contra: ele escurece a esquerda e
   larga a direita em .2, mas o texto passa a ocupar a largura toda. O local e
   a data terminavam sobre a parte clara da fotografia. Sem a coluna, o véu
   deixa de ser lateral e vira só profundidade a partir da base. */
@media (max-width: 48rem) {
  .sp-show-topo__veu {
    background:
      linear-gradient(to bottom, rgba(11, 5, 5, .72), transparent 22%),
      linear-gradient(to top,
        rgba(11, 5, 5, .95) 4%,
        rgba(11, 5, 5, .78) 34%,
        rgba(11, 5, 5, .46) 62%,
        rgba(11, 5, 5, .18) 86%);
  }
}

.sp-show-topo__corpo { position: relative; z-index: 2; }

/* A data em tipografia grande é o dado que a pessoa foi buscar. */
.sp-show-topo__data {
  display: flex;
  align-items: baseline;
  gap: var(--sp-e-3);
  font-family: var(--sp-fonte-titulo);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--sp-e-3);
}
.sp-show-topo__data b {
  font-size: clamp(3rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: .82;
  color: var(--sp-acento-texto);
}
.sp-show-topo__data span {
  font-family: var(--sp-fonte-texto);
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--sp-texto-2);
}

.sp-show-topo__artista {
  max-width: 16ch;
  font-size: clamp(2rem, 4.6vw, 3.5rem);
  letter-spacing: -0.02em;
}

.sp-show-topo__local {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-e-2) var(--sp-e-4);
  margin-block-start: var(--sp-e-4);
  color: var(--sp-texto-2);
}
.sp-show-topo__local i { color: var(--sp-acento-texto); }

.sp-show-topo__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-3);
  margin-block-start: var(--sp-e-6);
}

/* --- detalhes ------------------------------------------------------------------ */

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

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

.sp-detalhes__lista {
  display: grid;
  gap: var(--sp-e-5);
}

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

.sp-detalhe i { color: var(--sp-acento-texto); font-size: 1.375rem; line-height: 1.4; }

.sp-detalhe__rotulo {
  color: var(--sp-tinta-3);
  font-size: var(--sp-t-mini);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.sp-detalhe__valor { margin-block-start: 2px; }
.sp-detalhe__extra { margin-block-start: var(--sp-e-1); color: var(--sp-tinta-2); font-size: var(--sp-t-peq); }

/* --- salvar na agenda ------------------------------------------------------
   Um `details` nativo: abre e fecha sem script, fecha com Escape, e funciona
   antes de qualquer JavaScript carregar. */

.sp-agenda-menu { position: relative; }

.sp-agenda-menu > summary {
  list-style: none;
  cursor: pointer;
}
.sp-agenda-menu > summary::-webkit-details-marker { display: none; }

/* O menu vive dentro de um bloco escuro, que remapeia os tokens de tinta para
   branco. Sem devolver os valores da superfície clara aqui, o texto sai branco
   sobre o painel branco e só o ícone aparece. */
.sp-agenda-menu__lista {
  --sp-tinta:       #16090A;
  --sp-tinta-2:     rgba(22, 9, 10, .70);
  --sp-tinta-3:     rgba(22, 9, 10, .48);
  --sp-linha-clara: rgba(22, 9, 10, .12);
  position: absolute;
  z-index: 20;
  inset-inline-start: 0;
  top: calc(100% + var(--sp-e-2));
  display: grid;
  gap: 2px;
  min-width: 15rem;
  padding: var(--sp-e-2);
  border: 1px solid var(--sp-linha-clara);
  border-radius: var(--sp-raio);
  background: var(--sp-papel);
  color: var(--sp-tinta);
  box-shadow: 0 12px 32px rgba(11, 5, 5, .18);
}

.sp-agenda-menu__item {
  display: flex;
  align-items: center;
  gap: var(--sp-e-3);
  width: 100%;
  padding: var(--sp-e-3) var(--sp-e-4);
  border: 0;
  border-radius: var(--sp-raio);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: var(--sp-t-peq);
  text-align: start;
  cursor: pointer;
  transition: background var(--sp-transicao);
}
.sp-agenda-menu__item:hover { background: color-mix(in srgb, currentColor 7%, transparent); }
.sp-agenda-menu__item i { color: var(--sp-acento-texto); font-size: 1.125rem; }

/* --- mapa -------------------------------------------------------------------
   Fachada, como no vídeo. Nenhum mapa de terceiro é carregado: o bloco mostra
   o endereço e leva para o aplicativo que a pessoa já usa. Mapa embutido do
   Google custa mais de 1 MB e grava cookie antes de qualquer consentimento,
   para entregar o que um botão entrega. */

.sp-mapa {
  position: relative;
  display: grid;
  gap: var(--sp-e-5);
  padding: var(--sp-e-7);
  border-radius: var(--sp-raio-bloco);
  overflow: hidden;
  isolation: isolate;
  color: var(--sp-texto);
}

.sp-mapa::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(120deg, rgba(142, 35, 28, .35), transparent 60%),
    linear-gradient(180deg, #1A0C0B, #0B0505);
}

/* Malha de ruas sugerida, não um mapa: desenhar quarteirão falso seria mentir
   sobre onde fica. */
.sp-mapa::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .16;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 46px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 68px);
}

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

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

.sp-mapa__acoes { display: flex; flex-wrap: wrap; gap: var(--sp-e-3); }

/* Esta consulta foi apagada por engano quando o cartão de apoio virou
   componente, e a página ficou com duas colunas no celular. */
@media (max-width: 64rem) {
  .sp-detalhes__interno { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 48rem) {
  .sp-mapa { padding: var(--sp-e-5); }
  .sp-mapa__acoes .sp-botao { flex: 1 1 auto; justify-content: center; }
}

/* --- impressão ---------------------------------------------------------------
   A página do show é a única do site que sai da tela: a produção local imprime
   o quando, o onde e o contato para levar ao sacristão, ao segurança do portão
   ou à secretaria da paróquia. Sem esta folha, a impressão sai com a
   fotografia sangrando, o cabeçalho fixo por cima do título e o endereço em
   branco sobre preto — que é papel gasto e texto ilegível.

   O que fica: título, data, local, endereço e o contato da agência.
   O que sai: navegação, fotografia de fundo, carrosséis, painel do protótipo e
   os links de ação, que não clicam no papel.

   O endereço dos links de conteúdo é impresso depois do texto, porque no papel
   um link sem endereço é só uma palavra colorida. */

@media print {
  .sp-cabecalho,
  .sp-gaveta,
  .sp-gaveta__fundo,
  .sp-barra,
  .sp-pular,
  .proto-gatilho,
  .proto-painel,
  .proto-fundo,
  .sp-show-topo__fundo,
  .sp-show-topo__veu,
  .sp-show-topo__acoes,
  .sp-shows,
  .sp-carrossel__setas,
  .sp-rodape__chamada,
  .sp-rodape__redes,
  .sp-mapa__malha { display: none !important; }

  /* O topo é bloco escuro sangrado: no papel vira texto preto sobre branco. */
  .sp-show-topo,
  .sp-show-topo.sp-escuro,
  .sp-rodape,
  .sp-rodape.sp-escuro {
    --sp-tinta:       #000;
    --sp-tinta-2:     #333;
    --sp-tinta-3:     #555;
    --sp-linha-clara: #bbb;
    background: none !important;
    color: #000 !important;
    padding-block: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .sp-show-topo { padding-block-start: 0 !important; min-block-size: auto !important; }
  .sp-show-topo__corpo { position: static !important; padding-inline: 0 !important; }
  .sp-show-topo__artista { font-size: 24pt; }

  body { background: #fff; color: #000; font-size: 11pt; }

  .sp-artigo__texto a[href^="http"]::after,
  .sp-mapa a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  /* Bloco de dados não pode partir entre páginas. */
  .sp-mapa, .sp-cartao { break-inside: avoid; }
}

/* --- estado do show --------------------------------------------------------
   Selo e aviso são escritos por `js/evento-estado.js` a partir de um atributo
   só, no `<section id="show">`. Confirmado não mostra nenhum dos dois.

   O selo nasce escondido com `[hidden]`, e por isso precisa da regra abaixo:
   o atributo só define `display: none` na folha do navegador, e qualquer
   `display` declarado em classe ganha dele. Foi o mesmo defeito das setas de
   carrossel na 0.4x.
   --------------------------------------------------------------------------- */
.sp-show-topo__estado[hidden],
.sp-show-topo__aviso[hidden] { display: none; }

.sp-show-topo__estado {
  align-self: flex-start;
  margin-block-end: var(--sp-e-3);
}

.sp-show-topo__aviso {
  max-width: 46ch;
  margin-block-start: var(--sp-e-4);
  padding: var(--sp-e-4) var(--sp-e-5);
  border-inline-start: 2px solid var(--sp-acento-texto);
  border-radius: 0 var(--sp-raio-item, 8px) var(--sp-raio-item, 8px) 0;
  background: rgba(255, 255, 255, .07);
  color: var(--sp-texto);
  font-size: var(--sp-t-peq);
  line-height: 1.55;
}