/*
 * Bloco "sobre" (etapa E2) -- 11 usos em 6 páginas.
 *
 * Como no banner da E1, **a moldura não mora aqui**: no `main.css` cada um destes blocos é
 * posicionado pela página, e as linhas decorativas ainda mais -- `.line1`, `.line2` e
 * `.line3` têm coordenadas diferentes em cada arquivo. O que fica é a identidade; a posição
 * chega com a página, no bloco G.
 *
 * Daí as classes numeradas `--1`, `--2` e `--3` saírem do template sem nenhuma regra aqui:
 * elas existem para a página do bloco G ter por onde pegar cada linha.
 */

.bloco-sobre {
  position: relative;
}

/*
 * `position: absolute` porque a linha é enfeite: ela não pode empurrar o texto nem entrar no
 * fluxo, nem receber clique.
 *
 * **O canto superior direito é um padrão sóbrio, não o desenho final.** A coordenada de cada
 * linha é da página -- e sem um padrão, um bloco usado antes de a página do bloco G existir
 * empilharia todas as linhas no canto superior esquerdo, atrás do texto. Um plugin que
 * renderiza errado enquanto espera outra etapa é um plugin que ninguém confia.
 */
.bloco-sobre__linha {
  position: absolute;
  top: 0;
  right: 0;
  pointer-events: none;
  max-width: 100%;
}

/*
 * Sem isto o texto pintaria **atrás** da linha: elementos posicionados vencem os do fluxo
 * normal na ordem de pintura, e a linha vem antes no DOM.
 */
.bloco-sobre__conteudo {
  position: relative;
}

.bloco-sobre__titulo {
  font-family: var(--seb-fonte-titulo);
  font-size: 24px;
  font-weight: 700;
  color: var(--seb-azul);
}

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

@media (max-width: 768px) {
  .bloco-sobre__titulo {
    font-size: 20px;
  }

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