/*
 * Banner de página (etapa E1) -- o componente mais reusado do site, 18 usos.
 *
 * **A moldura de cada banner não mora aqui, e isso é medido.** No `main.css` cada um deles é
 * estilizado pela página (`.home__map .wrapper__banner`, `.home__vision .wrapper__banner`…),
 * com `max-width`, `gap` e `margin` diferentes em cada uma -- não há geometria compartilhada
 * para transcrever. É a mesma constatação da D2 sobre o grid e da D3 sobre a escala
 * tipográfica, e a consequência é a mesma: aqui fica a **identidade**, e a medida chega com
 * a página, no bloco G.
 *
 * A identidade é o arranjo (imagem ao lado ou acima) e a tipografia do título, e essa é
 * medida: Manrope 52px em `--seb-azul`, com o destaque em Brownhill 92px em
 * `--seb-azul-claro`.
 */

.banner {
  display: flex;
  align-items: center;
  gap: 68px;
}

/*
 * `cover` é o `.banner` acima e não tem regra própria: a foto ao lado é o arranjo base, e um
 * modificador que não declara nada seria classe sem função. O template continua emitindo
 * `banner--cover` porque é por ele que a página do bloco G vai alcançar esta variante.
 *
 * `logo` é a das seis abas de escola: a marca fica **acima** do texto, não ao lado.
 */
.banner--logo {
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

/*
 * O lado da imagem é `row-reverse`, e não `order` nos filhos: assim a **ordem do documento**
 * continua sendo imagem-depois-texto em todos os casos, e quem lê por leitor de tela ou sem
 * CSS recebe sempre a mesma sequência.
 */
.banner--imagem-direita {
  flex-direction: row-reverse;
}

.banner--logo.banner--imagem-direita {
  align-items: flex-end;
}

/*
 * A foto de fundo, cuja URL o template escreve na custom property `--imagem-de-fundo` (a
 * convenção da B7 para as 9 imagens que o estático usa como fundo de CSS).
 *
 * **Só as duas declarações que não variam ficam aqui.** `background-size` e
 * `background-position` são moldura -- nas seis abas de escola elas são `100%` e `top right`,
 * e os outros três fundos do estático (`bg-map`, `bg-history`, `cover-partners-2`) usam
 * outros valores --, então elas chegam com a página, como o resto da moldura do banner.
 *
 * O `no-repeat` é do componente porque nenhum dos nove é ladrilho: um fundo que se repete
 * porque alguém esqueceu a declaração é defeito, não escolha de página.
 *
 * **E o modificador existe em vez de a declaração morar em `.banner`.** Sem ele a busca pela
 * custom property e o `no-repeat` valeriam para os 18 banners do site, 12 dos quais nunca terão
 * fundo -- e, mais importante, a página perderia o gancho que distingue *"os banners que têm
 * foto de fundo"* de *"os banners"*. Não é o caso do `banner--cover`, que este arquivo mantém
 * sem regra por ser o arranjo base: este declara.
 */
.banner--com-fundo {
  background-image: var(--imagem-de-fundo);
  background-repeat: no-repeat;
}

.banner__picture {
  display: contents;
}

.banner__picture > source {
  display: none;
}

.banner__imagem {
  min-width: 0;
  max-width: 100%;
  width: auto;
  height: auto;
}

.banner__titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 52px;
  font-weight: 400;
  line-height: normal;
  color: var(--seb-azul);
}

/*
 * O destaque é o traço visual da marca: Brownhill Script, maior que o resto do título e em
 * azul-claro. Os `0 16px` de respiro lateral são do original -- sem eles a letra manuscrita
 * encosta na palavra seguinte.
 */
.banner__destaque {
  font-family: var(--seb-fonte-destaque);
  font-size: 92px;
  font-weight: 400;
  color: var(--seb-azul-claro);
  padding: 0 16px;
}

/*
 * **A segunda linha do título é identidade, e isto foi medido na G2.** A E1 criou o campo e
 * deixou a aparência "para a página, no bloco G" -- e a medição na G2 diz que não há o que
 * decidir por página: as **três** ocorrências de `.title2` no site que está no ar (politicas,
 * privacidade-cookies e seguranca) são a mesma declaração, caractere por caractere, inclusive
 * no celular. Brownhill 122px em branco, 4px para a direita e 48px para cima.
 *
 * (A primeira versão desta nota contava quatro, com o conduta. O conduta **não** usa a segunda
 * linha: o título dele é destaque + resto na mesma `<h2>`. A quarta ocorrência vinha de um
 * build local do estático que não é o que está no ar -- ver a G2.)
 *
 * O `margin-top` negativo é o que faz a palavra em script subir por trás da linha de cima --
 * daí ela precisar do `z-index` menor, e a primeira linha precisar de contexto de empilhamento.
 * Sem isso o branco cobriria o azul.
 *
 * **`:has()` no lugar de uma classe no template**, como o `canais.css` e o `header.css` já
 * fazem: a regra vale para a primeira linha *porque existe uma segunda*, e isso o CSS sabe
 * ver. Um modificador escrito pelo template seria a mesma informação em dois lugares, e o
 * template não é quem decide desenho.
 *
 * E é `--seb-branco`, não `--seb-azul-claro`: o destaque *inline* (`.banner__destaque`) é
 * azul-claro, este é branco. São dois papéis, e o estático os distingue nas 18 ocorrências.
 */
.banner__titulo:has(+ .banner__titulo--segunda) {
  line-height: 42px;
  position: relative;
  z-index: 2;
}

.banner__titulo--segunda {
  font-family: var(--seb-fonte-destaque);
  font-size: 122px;
  line-height: normal;
  color: var(--seb-branco);
  margin-left: 4px;
  margin-top: -48px;
  position: relative;
  z-index: 1;
}

/*
 * **Sozinha, ela não sobe.** O `margin-top` negativo existe para a segunda linha passar por
 * trás da primeira; sem primeira linha -- o editor pode preencher só este campo -- ele
 * empurraria a palavra para fora da caixa do banner. Achado em revisão.
 */
.banner__titulo--segunda:first-child {
  margin-top: 0;
}

.banner__descricao {
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  line-height: 26px;
  color: var(--seb-azul);
}

/*
 * **O "título mobile" do estático é isto, e não um segundo texto.**
 *
 * Lá, dois dos 18 banners repetem as mesmas palavras num bloco `.title--is-mobile` para
 * mostrá-las empilhadas no celular. Conferido no `main.css` (linhas 772-793): a diferença é
 * inteiramente de apresentação -- padding, tamanho, `margin-top` negativo, `z-index`. O
 * destaque em `display: block` produz o mesmo, com um texto só.
 */
/*
 * No celular tudo empilha e alinha à esquerda.
 *
 * O seletor composto entra na lista **de propósito**: ele tem especificidade (0,2,0) e o
 * `.banner` sozinho tem (0,1,0), então sem ele o caso `logo` + `direita` continuaria alinhado
 * à direita enquanto todos os outros iam para a esquerda. Foi um achado de revisão.
 */
@media (max-width: 768px) {
  .banner,
  .banner--logo.banner--imagem-direita {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .banner__titulo {
    font-size: 42px;
  }

  .banner__destaque {
    display: block;
    font-size: 82px;
    padding: 0;
  }

  .banner__titulo:has(+ .banner__titulo--segunda) {
    line-height: 34px;
  }

  .banner__titulo--segunda {
    font-size: 102px;
  }

  .banner__descricao {
    font-size: 16px;
    line-height: 22px;
  }
}