/*
 * Página `conduta` (etapa G2) -- a moldura, e só ela.
 *
 * **Transcrita do `main.css` que está no ar** (as 21 regras `.page__conduct`). A primeira
 * versão desta folha foi transcrita de um `csc.css` local que **não é o do ar**: o snapshot
 * em `data/` era outro build do site, com esta página reescrita. O desenho abaixo é o que o
 * visitante vê hoje. Ver a G2.
 *
 * Aqui o escopo é `.pagina--conduta`, que o `base.html` põe no `<main>` a partir do registro
 * de `backend/montagem` -- sem ele estas regras não teriam onde se pendurar, porque as
 * classes que os plugins emitem são as mesmas em toda página.
 *
 * **O que é moldura, e por isso mora aqui:** as larguras, os recuos, os espaços entre blocos,
 * a régua do aviso final e o grafismo de fundo. É a divisão que a D2 e a E4 fixaram -- o
 * componente traz a identidade, a página traz a medida.
 */

.pagina--conduta {
  margin-top: 35px;
  /* O grafismo que aparece à direita, na altura da lista. O arquivo é o mesmo do original,
   * agora no tema: `assets/img/detail-global.svg`. */
  background-image: url("../../icones/detail-global.svg");
  background-repeat: no-repeat;
  background-position: top 669px right;
  background-size: 160px;
}

/* --------------------------------------------------------------------- o banner
 *
 * `.wrapper__banner` no original: **sem largura máxima e sem recuo**, e é isso que faz a foto
 * encostar na borda esquerda da tela. O banner em si é o componente da E1 -- o `gap` de 68px
 * dele é o do caso mais comum, e aqui são 42.
 */
.pagina--conduta > .banner {
  gap: 42px;
  margin-bottom: 62px;
}

.pagina--conduta > .banner .banner__imagem {
  max-width: 660px;
  width: 100%;
}

.pagina--conduta > .banner .banner__conteudo {
  max-width: 395px;
  width: 100%;
}

/*
 * O título tem duas linhas e a de cima é o **destaque**: "Conduta" em Brownhill, azul-claro.
 * O componente já traz a fonte e a cor; a página traz o tamanho (122px contra os 92 do caso
 * comum), o recuo negativo e a quebra de linha.
 *
 * `display: block` é o que quebra a linha, e é o mesmo recurso que o componente usa no
 * celular -- no original a quebra é um `<br>` dentro do `<h2>`, que não vem para o campo do
 * plugin: quebra de linha é apresentação.
 */
.pagina--conduta .banner__titulo {
  line-height: 48px;
  /*
   * **Coluna flex, e é o que faz as margens do destaque valerem.** Ele é bloco aqui (é o que
   * quebra a linha) e é o primeiro filho, então em fluxo normal a margem negativa do topo
   * **colapsa** com a do `<h2>` -- some, em vez de subir a palavra. Em container flex não há
   * colapso de margem, e os dois números abaixo passam a significar o que dizem.
   */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.pagina--conduta .banner__destaque {
  display: block;
  font-size: 122px;
  margin-left: -10px;
  padding: 0;
  /*
   * **A entrelinha e a margem negativa são medidas, não escolhidas.** No original o destaque é
   * um `<span>` *inline* seguido de `<br>`, e por ser inline a caixa dele é a da tinta da
   * fonte: 127px de altura para 122px de corpo, invadindo a linha de baixo. Aqui ele é bloco
   * -- é o que quebra a linha sem `<br>` no campo do editor --, e bloco ganha a caixa da
   * `line-height`, que é 48px: sem estas duas linhas a palavra em script sai esmagada por
   * cima do "e ética".
   *
   * Os três valores vêm da comparação lado a lado com `www.sebeducation.com` a 1280px, onde as
   * duas linhas ocupam **115px** juntas e a tinta do script começa **40px acima** do topo
   * desse bloco. Daí `127 - 40 - 20 + 48 = 115`, e o `-40` no topo.
   */
  line-height: 127px;
  margin-top: -40px;
  margin-bottom: -20px;
}

/* --------------------------------------------------------------------- a prosa
 *
 * `.wrapper__about`: a coluna centrada de 960px. É um `ColumnPlugin`, que a D2 deixou sem
 * geometria própria justamente para a página dar a medida.
 */
.pagina--conduta > .coluna {
  max-width: 960px;
  padding: 0 16px;
  margin: 0 auto 69px;
}

/*
 * **Aqui a página discorda da escala da D3, e o desvio é conhecido.** A escala põe o texto
 * corrido em 20/16px; esta página -- e o original inteiro -- usa 18/16px, com entrelinha de
 * 28px. A D7 já tinha registrado essa diferença de um degrau e deixado para a **G13** decidir
 * se a escala ganha um degrau ou muda de valor.
 *
 * Enquanto isso, quem manda é o original: o aceite de cada etapa do bloco G é a comparação
 * lado a lado, e uma página inteira de prosa 2px maior é justamente o que ela reprovaria. Se
 * a G3 repetir estas linhas, a resposta da G13 já estará dada -- o problema é a escala.
 *
 * A entrelinha não é override de nada: `texto.css` não declara `line-height` em degrau
 * nenhum, por decisão da D3.
 */
.pagina--conduta .texto--seb-texto {
  font-size: 18px;
  line-height: 28px;
}

/*
 * **A regra do `<span>` da prosa saiu daqui:** depois da G4 o estático trocou aquele `<span>`
 * -- o nome da política -- por um link, e quem desenha link é `componentes/texto.css`. Os
 * detalhes, inclusive o `text-underline-offset` que não foi com ele, estão na G4.
 */

/*
 * A lista. O original usa o marcador nativo (`list-style-type: disc`) e o componente da E6
 * desenha a bolinha em `::before` -- mesma aparência, e o vocabulário único foi a decisão de
 * lá. Da página vêm só o recuo e o espaço até a despedida.
 */
.pagina--conduta .topicos {
  padding-left: 24px;
  margin-bottom: 62px;
  /*
   * **O espaçamento da lista é o do original nesta página**, e isto desfaz localmente a
   * unificação da E6 -- ela deu ao componente o `gap: 8px` e a entrelinha 26px dos 25 usos de
   * acordeão, contra os 28px e o `gap: 4px` daqui. Medido a 1280px: a lista do original tem
   * 196px de altura (7 × 28) e a do componente 230, uma diferença de 34px que a comparação
   * lado a lado -- o aceite desta etapa -- reprova.
   *
   * A E6 continua valendo onde ela mediu: o componente segue com os valores dos acordeões, e
   * quem discorda é **esta página**, no lugar onde moram as medidas de página.
   */
  gap: 0;
}

.pagina--conduta .topicos__item {
  line-height: 28px;
}

/* --------------------------------------------------------------------- o aviso final
 *
 * `.about__bottom`: a régua de 1px e o texto de 14px. A régua é um `<div class="line">` vazio
 * no original -- aqui é `::before`, porque um elemento sem texto existe só para desenhar, e o
 * leitor de tela o percorreria sem nada para ler.
 *
 * Os 52px que o original põe embaixo da despedida (`.about__end`) chegam como `margin-top`
 * daqui: é a mesma distância entre os mesmos dois blocos, e não depende de qual deles é o
 * último da coluna.
 */
.pagina--conduta > .coluna > .coluna {
  margin-top: 52px;
}

.pagina--conduta > .coluna > .coluna::before {
  content: "";
  display: block;
  height: 1px;
  width: 100%;
  margin-bottom: 2px;
  background-color: var(--seb-azul);
}

.pagina--conduta .texto--seb-texto-pequeno {
  font-size: 14px;
  line-height: 20px;
}

/* A foto larga do fim, antes do rodapé. */
.pagina--conduta .imagem {
  width: 100%;
}

@media (max-width: 768px) {
  /* Sem o grafismo: no original ele é `background: none` no celular. */
  .pagina--conduta {
    background: none;
  }

  .pagina--conduta > .banner {
    gap: 32px;
    margin-bottom: 42px;
  }

  .pagina--conduta > .banner .banner__imagem {
    width: 92%;
    margin-left: 0;
    margin-right: auto;
  }

  .pagina--conduta > .banner .banner__conteudo {
    margin-left: 16px;
    margin-right: 16px;
    width: calc(100% - 32px);
  }

  .pagina--conduta .banner__titulo {
    font-size: 42px;
    line-height: 36px;
    margin-left: 12px;
    margin-top: 32px;
  }

  /*
   * No celular a conta é a mesma do desktop, com os números de lá: a tinta do script tem
   * 106px para 102px de corpo, as duas linhas ocupam **88px** juntas e o script começa **35px
   * acima**. Daí `106 - 35 - 19 + 36 = 88`.
   *
   * **O `min()` é blindagem, e é o único elemento da página que precisava dela.** "Conduta" é
   * uma palavra só e não quebra: se a caixa dela ficar maior que a tela, o texto transborda e
   * a página passa a rolar na horizontal. Isso não acontece com a folha que está aqui -- medi
   * em 320, 375, 412 e 430px --, mas acontece nos dois casos que **não** dependem desta folha:
   *
   * - **a fonte não carregar.** Em `sans-serif` a mesma palavra mede 386px em vez de 203px
   *   (medido), e a 375px de tela isso passa da borda;
   * - **o texto ampliado pelo sistema.** O Chrome do Android multiplica o `font-size` mesmo em
   *   `px`; a 130% os 102px viram 133 e a palavra cresce com eles.
   *
   * `vw` não é ampliado por nenhum dos dois, então o `min()` põe um teto que a tela sempre
   * respeita. **Os 28vw não mudam nada nas larguras conferidas** -- a 375px valem 105px, mais
   * que os 102 --, e só começam a apertar abaixo disso, que é onde a alternativa era transbordar.
   */
  .pagina--conduta .banner__destaque {
    font-size: min(102px, 28vw);
    line-height: 106px;
    margin-top: -35px;
    margin-bottom: -19px;
  }

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

  /*
   * A foto do fim vira faixa: 190px de altura, recortada no centro. É o que o original faz --
   * a imagem tem 1440×299, e sem isto ela viraria uma tira de 60px no celular.
   */
  .pagina--conduta .imagem {
    height: 190px;
    object-fit: cover;
    object-position: center;
  }
}