/*
 * Página `politicas` (etapa G4) -- a moldura, e só ela.
 *
 * Transcreve as 21 regras `.page__policies` do `csc.css` que está no ar. O escopo é
 * `.pagina--politicas`, 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:** o fundo azul-claro da página, as larguras, os
 * recuos e o grafismo de linha do celular. O acordeão, os tópicos e o banner chegam prontos
 * dos componentes -- é a divisão que a D2 e a E4 fixaram, e nesta página ela se paga: o
 * `.title2` do banner é idêntico ao das outras duas ocorrências do site, medido na G2, então
 * a página não diz nada sobre tipografia.
 */

.pagina--politicas {
  background-color: var(--seb-azul-claro);
  padding-bottom: 92px;
}

/* --------------------------------------------------------------------- o banner
 *
 * `.wrapper__banner` no original. Os 1152px são de conteúdo e os 16px de recuo somam por
 * fora, como lá: o projeto não tem `box-sizing: border-box` global, e o estático também não
 * (ver `base.css`) -- copiar os dois números é copiar a medida.
 *
 * O `.content` de lá é o `.banner__conteudo` que o componente da E1 emite.
 */
.pagina--politicas > .banner {
  max-width: 1152px;
  margin: 0 auto 62px;
  padding: 62px 16px 0;
}

.pagina--politicas > .banner .banner__conteudo {
  max-width: 700px;
  width: 100%;
}

/* --------------------------------------------------------------------- os acordeões
 *
 * A `.coluna` é a `.wrapper__content` do original, e é o único plugin de moldura da página --
 * mesmo papel que a `.wrapper__about` tem no conduta. Ela existe porque a medida é de dois
 * níveis: o contêiner é centrado em 1152px e o grupo de acordeões, **dentro** dele, é limitado
 * a 927px e alinhado à esquerda. Sem o nível de fora, o alinhamento à esquerda só sairia de
 * uma conta de margem em `%`, que diz muito menos do que estas duas regras.
 *
 * (No original há um terceiro elemento aqui, o `.line` do desktop. Ele é `display: none` em
 * toda largura e o HTML da página não o traz -- as regras dele no `csc.css` são código morto,
 * registrado na G4 e não transcrito.)
 */
.pagina--politicas > .coluna {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 16px;
}

.pagina--politicas .accordions {
  max-width: 927px;
}

@media (max-width: 768px) {
  .pagina--politicas {
    padding-bottom: 62px;
  }

  .pagina--politicas > .banner {
    margin-bottom: 42px;
  }

  /*
   * O recuo da esquerda sai no celular -- é o original, e é o que faz o traço horizontal
   * abaixo começar na própria borda da tela.
   */
  .pagina--politicas > .coluna {
    padding: 0 16px 0 0;
  }

  /*
   * **O grafismo de linha é desenhado pela folha, e não montado como plugin.**
   *
   * No estático ele são dois `<div>` vazios dentro de um terceiro (`.line--is-mobile`): um
   * traço de 16px e uma linha vertical da altura dos acordeões, que juntos fazem o gancho à
   * esquerda da lista no celular. Três elementos sem conteúdo nenhum -- é decoração, e a
   * decisão do bloco G para decoração é a mesma da E2 e da D4: ela não vira conteúdo do CMS.
   * O conduta já faz assim com a régua do aviso final.
   *
   * Os 33px de recuo são a soma do original: 16 do traço + 1 da linha + 16 do `gap`.
   */
  .pagina--politicas .accordions {
    position: relative;
    padding-left: 33px;
  }

  /* A linha vertical, da altura da lista -- o `height: 100%` do original, que ali vem de um
   * `align-self: stretch` no elemento irmão. */
  .pagina--politicas .accordions::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--seb-azul);
  }

  /* O traço horizontal, 12px abaixo do topo -- o `margin-top` do original. */
  .pagina--politicas .accordions::after {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 16px;
    height: 1px;
    background-color: var(--seb-azul);
  }
}