/* ==========================================================================
   STHEFANY — hero da home
   hero.css · v0.11.0
   --------------------------------------------------------------------------
   Ocupa a largura da tela, recuado da janela por uma folga fina e arredondado
   nos quatro cantos — o papel branco contorna o bloco. A altura também não é
   cheia: sobra papel abaixo, senão a curva de baixo fica colada no limite da
   tela e não se vê.

   A fotografia é preto e branco de origem. Em vez de escurecer com um véu
   vermelho — que sobre cinza vira marrom chapado — ela recebe uma camada de
   vinho em mix-blend-mode: color. Isso colore a imagem preservando a
   luminância original, que é o duotone do kit de referência com o nosso tom.

   A foto é espelhada: o microfone nasce à esquerda do enquadramento, que é
   onde o título entra. Espelhando, o assunto vai para o lado livre.
   ========================================================================== */

.sp-hero {
  position: relative;
  color: var(--sp-texto);
  display: flex;
  align-items: flex-end;
  min-height: min(92svh, 58rem);
  padding-block: calc(var(--sp-cabecalho) + var(--sp-e-5)) var(--sp-e-9);
  overflow: hidden;
  isolation: isolate;
}

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

/* O fundo aceita mais de uma imagem. Com uma só, ela fica visível e nada
   acontece. Com várias, o script alterna entre elas — ver `data-fundo`. */
.sp-hero__fundo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0;
  transition: opacity 1200ms linear;
}

.sp-hero__fundo img[data-ativo="sim"] { opacity: 1; }

/* A foto do palco nasce com o microfone à esquerda, onde o título entra;
   espelhar joga o assunto para o lado livre. As fotos de artista não são
   espelhadas: rosto invertido incomoda. */
.sp-hero__fundo img[data-espelha] { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  .sp-hero__fundo img { transition: none; }
}

/* Tintura: colore o cinza sem apagar o contraste da luz de palco. */
.sp-hero__tinta {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--sp-vinho);
  mix-blend-mode: color;
  opacity: .62;
}

/* Véu: escurece o topo para o cabeçalho ter contraste, rebaixa a esquerda
   para o texto respirar e leva a base ao preto. O escurecimento do topo mora
   aqui, e não no cabeçalho, para não vazar sobre o papel branco em volta. */
.sp-hero__veu {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, rgba(11, 5, 5, .72), transparent 16%),
    linear-gradient(to right, rgba(11, 5, 5, .9) 6%, rgba(11, 5, 5, .18) 58%, transparent 82%),
    linear-gradient(to top, rgba(11, 5, 5, .92) 2%, rgba(11, 5, 5, .3) 40%, transparent 72%);
}

/* Título, texto e ações são um grupo só, ancorado na base do bloco e perto da
   borda de baixo. Distribuir os dois nas extremidades da altura abre um vazio
   no meio — foi o erro da 0.8.0. A fotografia fica com o espaço acima. */
.sp-hero__interno {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-e-6) var(--sp-e-9);
  width: 100%;
}

/* O espaçamento do grupo vem só do gap. Filho com margem própria aqui soma
   com o gap e dobra a distância — foi o que aconteceu até a 0.9.0. */
.sp-hero__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--sp-e-4);
  min-width: 0;
}

.sp-hero__titulo {
  max-width: 12ch;
  font-size: clamp(2.75rem, 6.2vw, 5.75rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  text-wrap: pretty;
}

.sp-hero__texto {
  max-width: 40ch;
  color: var(--sp-texto-2);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.sp-hero__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-e-3);
  margin-block-start: var(--sp-e-2);
}

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

/* A faixa da grade é dimensionada pelo conteúdo e fica mais larga que o
   painel; sem justify-self ele encosta na esquerda da faixa e sobra folga
   contra a margem do bloco. */
.sp-destaque {
  align-self: end;
  justify-self: end;
  display: grid;
  grid-template-columns: 6.5rem 1fr;
  gap: var(--sp-e-5);
  align-items: center;
  width: min(27rem, 100%);
  padding: var(--sp-e-6);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 20px;
  background: rgba(28, 13, 12, .48);
  backdrop-filter: blur(22px) saturate(150%);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--sp-transicao), background var(--sp-transicao);
}
.sp-destaque:hover {
  border-color: rgba(255, 255, 255, .34);
  background: rgba(28, 13, 12, .66);
}

.sp-destaque__foto { border-radius: 14px; aspect-ratio: 1 / 1; }

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

.sp-destaque__artista {
  margin-block-start: var(--sp-e-2);
  font-family: var(--sp-fonte-titulo);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}

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

.sp-destaque__quando {
  display: flex;
  align-items: center;
  gap: var(--sp-e-2);
  width: 100%;
  margin-block-start: var(--sp-e-4);
  padding-block-start: var(--sp-e-4);
  border-block-start: 1px solid rgba(255, 255, 255, .14);
  color: var(--sp-texto-2);
  font-size: var(--sp-t-peq);
  font-variant-numeric: tabular-nums;
}
.sp-destaque__quando i { color: var(--sp-acento-texto); font-size: 1.125rem; }

/* --- variante sangrada -----------------------------------------------------
   Sem recuo e sem curva: o hero encosta nas quatro bordas da janela. É a
   escolha oposta à do quadro, e existe para ser comparada lado a lado. */

/* Recuo e curva são regra genérica, em `base.css`. Aqui fica só o que é do
   hero: sangrado ele ocupa a janela inteira. */
.sp-hero[data-moldura="sangra"] { min-height: 100svh; }

@media (max-width: 48rem) {
  .sp-hero[data-moldura="sangra"] {
    min-height: calc(100svh - var(--sp-abas) - env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 68rem) {
  .sp-hero__interno { grid-template-columns: minmax(0, 1fr); gap: var(--sp-e-6); }
  .sp-hero__coluna { gap: var(--sp-e-4); }

  /* Sem a coluna de texto ao lado, o painel vira um bloco solto boiando no
     escuro. E a seção de próximos shows fica logo abaixo, com a mesma
     informação e mais detalhe — então aqui ele sai, em vez de ser reencaixado
     numa forma que não é a dele. */
  .sp-destaque { display: none; }
}

@media (max-width: 48rem) {
  .sp-hero {
    /* Desconta a barra de abas e a área segura: sem isto o painel fica
       debaixo da barra fixa e some. */
    min-height: calc(100svh
                     - var(--sp-abas)
                     - env(safe-area-inset-bottom, 0px)
                     - var(--sp-recuo-bloco) * 2);
    padding-block: calc(var(--sp-cabecalho-min) + var(--sp-e-6)) var(--sp-e-8);
  }

  /* Traz o feixe e o microfone para o terço visível. Sem isto o
     enquadramento mostra só a parte morta da foto. */
  .sp-hero__fundo img { object-position: 64% 30%; }

  .sp-hero__veu {
    background:
      linear-gradient(to bottom, rgba(11, 5, 5, .7), transparent 14%),
      linear-gradient(to top, rgba(11, 5, 5, .95) 22%, rgba(11, 5, 5, .42) 52%, transparent 84%),
      linear-gradient(to right, rgba(11, 5, 5, .55), transparent 74%);
  }

  .sp-hero__interno { gap: var(--sp-e-5); }

  .sp-hero__titulo {
    max-width: 13ch;
    font-size: clamp(2.5rem, 11.5vw, 3.5rem);
  }

  .sp-hero__texto {
    max-width: 38ch;
    margin-block-start: var(--sp-e-4);
    font-size: 1.0625rem;
    line-height: 1.55;
  }

  .sp-hero__acoes { margin-block-start: var(--sp-e-5); }
  .sp-hero__acoes .sp-botao--cheio { flex: 1 1 auto; justify-content: center; }

  /* A ação secundária repete a aba "Contratar", que está fixa na tela o tempo
     todo. Dois botões grandes empilhados pesam e um deles é supérfluo. */
  .sp-hero__acoes .sp-botao--linha { display: none; }

  /* O painel passa a ocupar a largura toda, com a arte grande, como no kit. */
}