/*
 * Página `seguranca` (etapa G6) -- a moldura, e só ela.
 *
 * Transcreve as regras `.page__security` do `main.css` que está no ar. O escopo é
 * `.pagina--seguranca`, 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.
 *
 * **É a folha mais curta do bloco G até aqui, e isso é o resultado do bloco E.** Três
 * componentes foram desenhados com esta página na mão -- o bloco "sobre" da E2, a lista de
 * itens da E3 (a variante `destaque` é literalmente "a do seguranca") e a grade de logos da
 * E5 (o arranjo `em-linha` são "os 2 do bloco de segurança") --, então a tipografia inteira
 * já chega pronta. O que sobra é medida: larguras, recuos, o fundo e **a posição e o tamanho
 * de cada linha decorativa**, que a E2 mandou explicitamente para cá.
 */

.pagina--seguranca {
  background-color: var(--seb-azul-claro);
}

/* --------------------------------------------------------------------- o banner
 *
 * `.wrapper__banner` no original: **sem largura máxima e sem recuo**, e é isso que faz a foto
 * encostar na borda direita da tela -- o espelho do conduta, onde ela encosta na esquerda.
 *
 * **Sem `justify-content` aqui, e é de propósito.** O original empurra o par para a direita
 * com `flex-end`; o componente da E1 já emite `banner--imagem-direita`, que é
 * `flex-direction: row-reverse` -- e num eixo invertido o `flex-start` padrão empacota
 * justamente na direita. Declarar `flex-end` desfaria isso.
 */
.pagina--seguranca > .banner {
  gap: 108px;
  margin-bottom: 82px;
}

.pagina--seguranca > .banner .banner__imagem {
  max-width: 610px;
  width: 100%;
}

.pagina--seguranca > .banner .banner__conteudo {
  max-width: 436px;
  width: 100%;
  padding-left: 16px;
}

/*
 * As duas `<h2>` não estão aqui, e é o mesmo silêncio que a G4 registrou: o par
 * `.title`/`.title2` desta página é **idêntico** ao das outras duas ocorrências do site, e a
 * E1 já o traz inteiro -- 52/42px em Manrope e 122px em Brownhill branco, com o recuo
 * negativo e a sobreposição de `z-index`.
 *
 * A descrição é a exceção, e é o **primeiro uso do campo `descricao` da E1 numa página
 * montada**: os 28px daqui contra os 18px do caso comum. `line-height: normal` é o que o
 * original tem -- ele não declara nenhuma, e o componente declara 26px.
 */
.pagina--seguranca > .banner .banner__descricao {
  font-size: 28px;
  line-height: normal;
}

/* --------------------------------------------------------------------- o bloco "sobre"
 *
 * `.wrapper__about` no original, e aqui ele é o `.bloco-sobre` da E2 -- o único dos 11 usos
 * em que o bloco **não tem texto próprio**: ele é só o envelope das linhas, e o conteúdo
 * inteiro é a lista de itens que mora dentro.
 */
.pagina--seguranca > .bloco-sobre {
  margin-bottom: 62px;
}

/*
 * **As três linhas decorativas, e esta é a medida que a E2 mandou para a página.**
 *
 * No original elas são duas construções (três `<img>` no desktop, três pares de `<div>`
 * vazios no celular) e dois arquivos de tamanhos diferentes (`line-security.svg`, 236×72, e
 * `line-security-big.svg`, 236×212). A E2 unificou a construção e a B7 unificou o arquivo --
 * então "que altura tem cada linha" virou dever daqui, que é exatamente o que o comentário
 * do template da E2 previu ao dizer que "o bloco de seguranca depende disso".
 *
 * O padrão do componente é o canto superior **direito**; aqui a coluna de linhas fica à
 * esquerda do texto, como no original, daí o `right: auto`.
 *
 * As coordenadas saem da pilha do original, somada: a coluna é `flex-direction: column` com
 * `margin-top: 5px` na primeira, `margin-bottom: 42px` depois dela e `135px` depois da
 * segunda. Em absoluto isso é 5, 5+72+42 e 119+212+135.
 */
.pagina--seguranca .bloco-sobre__linha {
  left: 0;
  right: auto;
  width: 236px;
}

.pagina--seguranca .bloco-sobre__linha--1 {
  top: 5px;
  height: 72px;
}

.pagina--seguranca .bloco-sobre__linha--2 {
  top: 119px;
  height: 212px;
}

.pagina--seguranca .bloco-sobre__linha--3 {
  top: 466px;
  height: 72px;
}

/*
 * O recuo do texto é o que no original era `gap: 20px` entre a coluna de linhas e o conteúdo:
 * 236 da linha mais 20 do espaço. Recuo e não `gap` porque as linhas saíram do fluxo -- é o
 * `position: absolute` que a E2 escolheu para elas não empurrarem o texto.
 */
.pagina--seguranca .bloco-sobre__conteudo {
  padding-left: 256px;
}

/* --------------------------------------------------------------------- os itens
 *
 * A escala inteira é a variante `destaque` da E3 -- 28/20px com 25px entre itens --, então
 * aqui fica só a largura, que é moldura de página pela regra da E1/E2/E3.
 */
.pagina--seguranca .lista-de-itens__item {
  max-width: 927px;
  width: 100%;
}

/*
 * As duas logos do item do School Mental Health Award. O arranjo `em-linha` da E5 já traz o
 * `display: flex` e os 16px de espaço; o que falta é o respiro acima e o teto de altura, que
 * a E5 registrou como sendo desta página (75px aqui contra os 85 do componente).
 */
.pagina--seguranca .grade-logos {
  margin-top: 16px;
}

.pagina--seguranca .grade-logos__logo {
  max-height: 75px;
}

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

@media (max-width: 768px) {
  /*
   * O banner empilha, e a foto vai para **baixo** do texto: no original o `.content` vem
   * antes da `<img>` no HTML, e o componente da E1 emite a imagem primeiro (é o que faz o
   * `row-reverse` do desktop funcionar). `column-reverse` é o que reconcilia os dois.
   */
  .pagina--seguranca > .banner {
    flex-direction: column-reverse;
    /*
     * **`center` desfaz o `flex-start` do componente, e é a única regra desta folha que
     * transcreve um acidente do original em vez de uma intenção.**
     *
     * Lá o `align-items: center` é do desktop, onde ele centra na vertical; o `@media` do
     * celular troca a direção e não o repete, então ele passa a valer na horizontal. E o
     * conteúdo transborda 16px (343 de largura mais 16 de recuo, entre margens de 16 numa
     * tela de 375), o que faz a centralização render um recuo de 8px em vez dos 16 que as
     * margens pedem -- o texto do banner fica 9px à esquerda dos itens de baixo.
     *
     * Sem esta linha a página sai *mais alinhada* que o original, e é por isso que ela existe:
     * o aceite do bloco G é a comparação lado a lado, e endireitar o desenho é decisão de quem
     * cuida do conteúdo. Está na lista da **G13**.
     */
    align-items: center;
    gap: 32px;
    padding-top: 62px;
    margin-bottom: 62px;
  }

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

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

  .pagina--seguranca > .banner .banner__descricao {
    font-size: 22px;
    line-height: 23px;
  }

  /*
   * **As mesmas três linhas, com a medida do celular.** No original este é o outro desenho --
   * os pares de `<div>`, com o braço horizontal de 16px e a barra vertical de 112, 454 e
   * 80px --, e com uma construção só ele vira três alturas aqui. Os 17px de largura são o
   * braço de 16 mais a barra de 1, que é a soma do original.
   *
   * As coordenadas saem da pilha de lá do mesmo jeito que as do desktop: `gap: 25px` entre os
   * três, ou seja 0, 112+25 e 137+454+25.
   */
  .pagina--seguranca .bloco-sobre__linha {
    width: 17px;
  }

  .pagina--seguranca .bloco-sobre__linha--1 {
    top: 0;
    height: 112px;
  }

  .pagina--seguranca .bloco-sobre__linha--2 {
    top: 137px;
    height: 454px;
  }

  .pagina--seguranca .bloco-sobre__linha--3 {
    top: 616px;
    height: 80px;
  }

  /* 17px da linha mais os 16px que no original são o `gap` do celular. */
  .pagina--seguranca .bloco-sobre__conteudo {
    padding-left: 33px;
  }

  .pagina--seguranca .lista-de-itens__item {
    width: calc(100% - 16px);
    margin-right: 16px;
  }

  /*
   * A foto do fim vira faixa, como no conduta e pela mesma razão: ela é larga, e sem o
   * recorte viraria uma tira baixa demais para se ver.
   */
  .pagina--seguranca .imagem {
    height: 200px;
    object-fit: cover;
    object-position: center;
  }
}