/*
 * Bloco de texto avulso (etapa D3) -- os quatro degraus do `CustomTextPlugin` no site 2.
 *
 * O estático não tem escala tipográfica, então estes degraus não transcrevem nada: são os
 * pares desktop/mobile de maior frequência no `main.css`. **A medição e o critério estão na
 * D3** (`docs/migracao-sebeducation/historico-das-etapas.md`), com a tabela de ocorrências.
 *
 * O tamanho e o **peso** moram aqui -- e o link, pela razão que a regra `.texto a` explica
 * abaixo dos quatro degraus. Fonte, cor e alinhamento são escolha por bloco e vão no
 * atributo `style`, escritos pelo template. Continua valendo a regra da D2 para o resto:
 * sem largura, `padding` ou `gap` -- isso é do componente. Texto sem tamanho, porém, é
 * texto ilegível, e é por isso que o tamanho é a exceção.
 *
 * **O peso entrou na G9, e o valor dele continua sendo por bloco:** o que mora aqui é a regra
 * que o aplica, e o template escreve o valor numa custom property. O porquê está no comentário
 * da regra `.texto`, logo abaixo.
 *
 * Sem `line-height`: o original o define por componente, sem valor comum, e inventar um
 * aqui faria toda comparação do bloco G divergir. Fica para a G13.
 */

/*
 * **O peso, que vem do plugin como custom property.** Os outros três campos de aparência da
 * D3 são declaração no atributo `style`; este é `--texto-peso`, e é aqui que ele se aplica.
 *
 * A razão é da G9, e é medida: declaração no `style` não é alcançável por regra de folha
 * nenhuma, e o original **muda o peso de um título por ponto de quebra** -- o
 * `carousel__title` do global é 400 no desktop e 600 no celular, e em 400 a frase cai de três
 * linhas para duas, levando a faixa inteira 28px para cima. Como regra de classe, o
 * `font-weight` passa a ser vencível por especificidade, que é o que a folha daquela página
 * faz -- em vez do `!important` que era a única saída antes, e que este projeto não tem em
 * lugar nenhum.
 *
 * O `400` de reserva não é decoração: ele é o `default` do campo no model da D3, e sem ele um
 * elemento sem a property (nenhum hoje -- o template sempre a escreve) herdaria o peso do
 * ancestral em vez do peso normal do site.
 *
 * Isto **não** contraria a divisão da D3, que continua de pé: o valor é por instância e vem
 * do plugin; o que mudou é onde ele é aplicado. E não é a exceção do arquivo ao lado do
 * tamanho -- é a mesma regra, e é por isso que as duas moram aqui.
 */
.texto {
  font-weight: var(--texto-peso, 400);
}

.texto--seb-titulo {
  font-size: 52px;
}

.texto--seb-subtitulo {
  font-size: 28px;
}

.texto--seb-texto {
  font-size: 20px;
}

.texto--seb-texto-pequeno {
  font-size: 16px;
}

/*
 * **O link dentro de um bloco de texto precisa desta regra para existir**, e ela é a mesma
 * situação -- com a mesma solução -- que o `topicos.css` já descreve para o link dentro de um
 * tópico: a `base.css` faz de todo `<a>` um `display: block` sem sublinhado, porque no site
 * quase todo link é item de menu. Dentro de um parágrafo isso quebra a frase em duas e deixa o
 * link indistinguível do texto em volta.
 *
 * O caso chegou depois da G4: o estático trocou o nome da política, no conduta, por um link
 * para `politicas.html` -- e o link de lá carrega as três declarações abaixo **no atributo
 * `style`**, que é como aquele site remenda o próprio reset. `html_interno` não traz o `style`
 * (desenho não entra em campo de editor), e o remendo passa a morar aqui, onde vale para
 * qualquer bloco de texto de qualquer página.
 *
 * `display: inline`, e não o `inline-block` do original: `inline-block` não quebra entre
 * linhas, e um nome de política que não quebra é o mesmo tipo de transbordo que o título do
 * conduta acabou de custar. A cor é herdada, então o link não briga com a escolha do bloco.
 */
.texto a {
  display: inline;
  text-decoration: underline;
  color: inherit;
}

.texto strong,
.texto b {
  font-weight: 700;
}

/* O mesmo ponto de quebra do rodapé e da estrutura. */
@media (max-width: 768px) {
  .texto--seb-titulo {
    font-size: 42px;
  }

  .texto--seb-subtitulo {
    font-size: 22px;
  }

  .texto--seb-texto {
    font-size: 16px;
  }

  .texto--seb-texto-pequeno {
    font-size: 14px;
  }
}