/* ==========================================================================
   STHEFANY — topo de página
   topo.css · v0.1.0
   --------------------------------------------------------------------------
   O cabeçalho com fotografia de fundo, migalha, título e meta. Nasceu como
   `sp-post-topo` na página de notícia e a partir da 0.71.0 é o topo de todas
   as telas internas: arquivo (artistas, agenda, fotos, loja, notícias, loja),
   álbum, contato e privacidade.

   Ele substitui o `sp-arquivo-topo`, que era título e parágrafo sobre fundo
   branco. A justificativa que eu tinha escrito para aquele — "arquivo é lugar
   de encontrar, e imagem grande só adia a lista" — está certa em tese e errada
   aqui: o cabeçalho fixo é escuro e flutua, e sobre branco ele aparecia como
   uma barra solta no alto da tela, sem nada por trás que a sustentasse. A
   fotografia não está adiando a lista; está dando chão ao cabeçalho.

   O custo é real e por isso existe a variante curta.

   .sp-topo            — o do post: 34rem, a matéria merece a abertura
   .sp-topo--curto     — o do arquivo: 22rem, a lista aparece logo abaixo
   ========================================================================== */

.sp-topo {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(58svh, 34rem);
  padding-block: calc(var(--sp-cabecalho) + var(--sp-e-6)) var(--sp-e-7);
  isolation: isolate;
  color: var(--sp-texto);
}

/* Nas páginas de listagem o topo é mais baixo: o que a pessoa foi buscar está
   embaixo dele, e cada rem aqui é um rem que ela rola antes de encontrar. */
.sp-topo--curto {
  min-height: min(42svh, 22rem);
  padding-block: calc(var(--sp-cabecalho) + var(--sp-e-5)) var(--sp-e-6);
}

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

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

/* Dois degradês, não um. O de cima segura o contraste do cabeçalho flutuante,
   que passa por aqui; o de baixo segura o do título. Um véu chapado no bloco
   inteiro apagaria a fotografia no meio, que é onde ela ainda se vê. */
.sp-topo__veu {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(11, 5, 5, .7), transparent 22%),
    linear-gradient(to top, rgba(11, 5, 5, .94) 4%, rgba(11, 5, 5, .35) 48%, transparent 80%);
}

/* No topo curto o véu é mais forte. Não é preciosismo: o bloco tem 22rem e o
   texto ocupa quase toda a altura dele, então o degradê de baixo precisa
   chegar mais alto do que chega no post, onde há 34rem e metade do bloco é só
   fotografia. Sem isto a linha de meta do álbum caía em cima de um facho de
   luz e ficava perto de ilegível — e o axe não pega este caso, porque ele não
   avalia texto sobre imagem. Aqui a checagem é a olho. */
.sp-topo--curto .sp-topo__veu {
  background:
    linear-gradient(to bottom, rgba(11, 5, 5, .68), rgba(11, 5, 5, .08) 26%),
    linear-gradient(to top, rgba(11, 5, 5, .93) 6%, rgba(11, 5, 5, .68) 52%, rgba(11, 5, 5, .24) 92%);
}

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

.sp-topo__titulo {
  max-width: 22ch;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  letter-spacing: -0.02em;
}

/* No arquivo o título é mais curto que o de uma matéria e não precisa da
   mesma escala: em 1920 ele ficava do tamanho de uma manchete de capa para
   dizer "Loja". */
.sp-topo--curto .sp-topo__titulo {
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  max-width: 28ch;
}

.sp-topo__texto {
  max-width: 54ch;
  margin-block-start: var(--sp-e-4);
  color: var(--sp-texto-2);
}

.sp-topo__conta {
  margin-block-start: var(--sp-e-3);
  color: var(--sp-texto-3);
  font-size: var(--sp-t-peq);
  font-variant-numeric: tabular-nums;
}

.sp-topo__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-e-3) var(--sp-e-4);
  margin-block-start: var(--sp-e-4);
  color: var(--sp-texto-2);
  font-size: var(--sp-t-peq);
}

.sp-topo__meta > span {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-e-2);
}

.sp-topo__meta i { font-size: 1.125rem; color: var(--sp-acento-claro); }

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

/* A seção logo abaixo não repete o respiro do topo — mesma regra que o
   `sp-arquivo-topo` já tinha, e pela mesma razão: sem ela o recuo de um soma
   com o do outro e abre um vazio entre o título e a lista. Aqui vale meia
   seção, e não zero, porque o topo agora tem borda visível: colar a lista na
   base do bloco escuro aperta. */
.sp-topo + section,
.sp-topo + .sp-filtros { padding-block-start: var(--sp-secao-meia); }

@media (max-width: 48rem) {
  .sp-topo {
    min-height: min(52svh, 26rem);
    padding-block: calc(var(--sp-cabecalho-min) + var(--sp-e-8)) var(--sp-e-6);
  }
  .sp-topo--curto {
    min-height: min(38svh, 17rem);
    padding-block: calc(var(--sp-cabecalho-min) + var(--sp-e-7)) var(--sp-e-5);
  }
}