/*
 * Hero com vídeo (etapa F1) -- a primeira dobra da home, um uso só.
 *
 * **Aqui a caixa vem inteira, e é a mesma distinção da E4:** o que não entra é a moldura de
 * *página*, e neste componente a caixa **é** ele. Sem a altura, o vídeo absoluto e o recuo
 * que empurra o texto para a parte escura do gradiente, não há hero -- há um vídeo solto e
 * duas linhas de texto em cima dele.
 *
 * Transcrito de `main.css:508-585`, com duas construções trocadas:
 *
 * **O gradiente é `::after`, e não o `<div class="overlay">`** do estático. É a decisão da E2
 * sobre as linhas decorativas, aplicada a um caso mais simples: elemento vazio para pintar
 * uma faixa é elemento que o leitor de tela percorre sem nada para anunciar. `pointer-events:
 * none` porque ele cobre o texto na ordem de pintura.
 *
 * **O azul do gradiente vem do token, por componentes RGB.** O original escreve
 * `rgba(7, 47, 72, 0.07)` e `rgba(7, 47, 72, 0.88)`; é exatamente o caso para o qual a B2
 * guardou `--seb-azul-rgb` separado.
 *
 * As paradas do gradiente **não** são arredondadas: 35,64% no desktop e 25,64% no celular são
 * o que o original tem, e a B8 mediu o que elas significam -- o terço de cima fica em 7% de
 * cobertura, e é por isso que o arquivo de 1080p se justifica no desktop.
 */

/*
 * O fundo azul é **piso**, não decoração: o gradiente acima dele vai de 7% a 88% de
 * opacidade, então sem nada atrás o texto branco cai sobre o branco da página. Ele cobre os
 * instantes antes de o poster pintar e o caso em que o poster falhe -- e é o azul da marca,
 * que é o que o gradiente escurece de todo jeito.
 */
.hero {
  position: relative;
  max-height: 702px;
  background-color: var(--seb-azul);
}

.hero__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgb(var(--seb-azul-rgb) / 0.07) 35.64%,
    rgb(var(--seb-azul-rgb) / 0.88) 100%
  );
}

/*
 * `z-index: 3` para o texto ficar acima do gradiente -- ele é o único dos três que está no
 * fluxo, e sem `position` o `z-index` não valeria.
 *
 * O recuo de 364px no topo não é espaçamento: é ele que põe o texto na faixa em que o
 * gradiente já escureceu o suficiente para o branco ter contraste. Mexer nele sem olhar o
 * gradiente quebra a legibilidade.
 */
.hero__conteudo {
  position: relative;
  z-index: 3;
  max-width: 820px;
  margin: 0 auto;
  padding: 364px 16px 96px;
}

.hero__titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 62px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  color: var(--seb-azul-claro);
  margin-bottom: 12px;
}

.hero__destaque {
  font-family: var(--seb-fonte-destaque);
  font-size: 122px;
  font-weight: 400;
  color: var(--seb-branco);
  padding: 0 16px;
}

.hero__subtitulo {
  font-family: var(--seb-fonte-corpo);
  font-size: 26px;
  font-weight: 400;
  line-height: normal;
  text-align: center;
  color: var(--seb-branco);
}

@media (max-width: 768px) {
  .hero {
    max-height: 620px;
  }

  /*
   * A rampa começa dez pontos antes: menos altura e mais cobertura, que é a medição da B8
   * sobre por que o arquivo de 720p custa menos justamente onde ele economiza mais.
   */
  .hero::after {
    background: linear-gradient(
      180deg,
      rgb(var(--seb-azul-rgb) / 0.07) 25.64%,
      rgb(var(--seb-azul-rgb) / 0.88) 100%
    );
  }

  .hero__conteudo {
    padding: 292px 16px 51px;
  }

  .hero__titulo {
    font-size: 52px;
    line-height: 56px;
  }

  .hero__destaque {
    font-size: 82px;
    padding: 0 8px;
  }

  .hero__subtitulo {
    font-size: 20px;
  }
}