/*
 * Página `privacidade-cookies` (etapa G5) -- a moldura, e só ela.
 *
 * Transcreve as 33 regras `.page__privacy` do `csc.css` que está no ar (160-345), menos as
 * que não têm elemento na página -- ver "código morto", no fim. O escopo é
 * `.pagina--privacidade-cookies`, que o `base.html` põe no `<main>` a partir do registro de
 * `backend/montagem`.
 *
 * **O que é moldura, e por isso mora aqui:** o fundo azul-claro, as larguras, os recuos, as
 * medidas de página da faixa de abas e o grafismo de linha do celular. O acordeão, os
 * tópicos, o banner e o desenho do seletor de aba chegam prontos dos componentes -- é a
 * divisão que a D2 e a E4 fixaram.
 *
 * A moldura é a mesma de `politicas.css` (mesmo fundo, mesmas larguras, mesmo gancho de linha
 * no celular), **com dois valores diferentes**: o espaço abaixo do banner é 42/32px aqui
 * contra 62/42 lá. As duas folhas não se fundem por isso: o que elas compartilham é o
 * desenho de duas páginas, e não um componente -- a G13 é a etapa que compara o conjunto e
 * decide se algo disso vira componente.
 */

.pagina--privacidade-cookies {
  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.
 */
.pagina--privacidade-cookies > .banner {
  max-width: 1152px;
  margin: 0 auto 42px;
  padding: 62px 16px 0;
}

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

/* --------------------------------------------------------------------- as abas
 *
 * **Uma moldura só para os seletores e os painéis, porque no original elas são iguais.** Lá
 * são dois contêineres (`.tab__selectors` e `.tab__panes .wrapper__pane`), e os dois medem
 * `max-width: 1152px; margin: 0 auto; padding: 0 16px`. Aqui os dois são o mesmo elemento --
 * a F4 uniu os contêineres do estático num só, porque radio, rótulo e painel precisam ser
 * irmãos --, e a medida repetida vira uma.
 */
.pagina--privacidade-cookies > .abas {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 16px;
}

/*
 * Os 42px que o original tem como `margin-bottom` da faixa de seletores, **menos os 4px de
 * `gap`** que a faixa da F4 já põe entre as linhas dela: o painel cai para a linha de baixo
 * do mesmo flex, então o `gap` conta. Somados dão os 42.
 */
.pagina--privacidade-cookies .abas__painel {
  margin-top: 38px;
}

/*
 * A `.pane__content` do original: 927px, alinhada à esquerda dentro dos 1152 do painel. É a
 * medida de dois níveis que a G4 descreveu em `politicas`, e é por isso que cada aba tem uma
 * `ColumnPlugin` dentro -- sem o nível de fora, o alinhamento à esquerda só sairia de uma
 * conta de margem em `%`.
 */
.pagina--privacidade-cookies .abas__painel > .coluna {
  max-width: 927px;
}

/*
 * --------------------------------------------- o espaço entre os blocos de dentro do painel
 *
 * No original ele são dois `margin-bottom`: 6px no `.pane__title` e 25px na
 * `.pane__description`. Aqui as peças são plugins, então o espaço é do contêiner (regra da
 * D2) -- e ele é **medido pelo bloco que vem antes**, porque é o que aqueles dois valores
 * dizem: depois do título, 6px; depois da descrição, 25px.
 *
 * O `>` não é enfeite: sem ele estas duas regras alcançariam também os parágrafos de dentro
 * dos acordeões -- que são o mesmo `.texto--seb-texto` -- e, com três classes contra uma,
 * venceriam o ritmo de 24px que o `acordeao.css` mede. O painel tem três filhos diretos, no
 * máximo, e são estes.
 */
.pagina--privacidade-cookies .abas__painel > .coluna > .texto--seb-subtitulo + * {
  margin-top: 6px;
}

.pagina--privacidade-cookies .abas__painel > .coluna > .texto--seb-texto + * {
  margin-top: 25px;
}

.pagina--privacidade-cookies .abas__painel > .coluna > .texto--seb-subtitulo,
.pagina--privacidade-cookies .abas__painel > .coluna > .texto--seb-texto {
  line-height: 28px;
}

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

  /* A descrição desce para 20px no original; o título continua com 6. */
  .pagina--privacidade-cookies .abas__painel > .coluna > .texto--seb-texto + * {
    margin-top: 20px;
  }

  .pagina--privacidade-cookies .abas__painel > .coluna > .texto--seb-subtitulo {
    font-size: 20px;
    line-height: 23px;
  }

  .pagina--privacidade-cookies .abas__painel > .coluna > .texto--seb-texto {
    line-height: 22px;
  }

  .pagina--privacidade-cookies > .banner {
    margin-bottom: 32px;
  }

  /*
   * **No celular os dois contêineres do original deixam de medir igual, e a faixa unida da
   * F4 tem de servir os dois.** Lá o seletor continua com `padding: 0 16px` e o
   * `.wrapper__pane` passa a `0 16px 0 0` -- o recuo da esquerda sai, e é o que faz o traço
   * horizontal do gancho começar na própria borda da tela (mesma decisão da G4).
   *
   * Então o recuo da esquerda sai da faixa e vai para o **rótulo**, que é quem ainda o quer.
   * O da direita fica na faixa, onde vale para os dois.
   */
  .pagina--privacidade-cookies > .abas {
    /* Uma coluna cheia -- o arranjo desta página. O da F4 é de três colunas de 116,5px, que é
     * o de nossas-escolas (6 das 12 abas do site); o terceiro, de duas, chega na G11. */
    grid-template-columns: 1fr;
    padding: 0 16px 0 0;
  }

  /*
   * **E o painel volta à largura da coluna, que aqui é a que ele quer.** A G10 fez o painel do
   * componente medir `100vw`, porque as fotos das escolas vão de borda a borda; aqui a coluna
   * é cheia e o recuo da direita, acima, é o que o original dá ao `.wrapper__pane` -- com
   * `100vw` ele voltaria a alcançar a borda e o recuo não valeria nada.
   */
  .pagina--privacidade-cookies .abas__painel {
    width: auto;
  }

  .pagina--privacidade-cookies .abas__rotulo {
    margin-left: 16px;
    /* `height: fit-content` no original: o rótulo deixa de ter os 64px do desktop e passa a
     * ser a altura do texto mais o recuo. */
    height: auto;
    padding: 16px 12px;
    font-size: 16px;
    /*
     * 400, e não os 500 da faixa da F4: aquele peso é do grupo dominante (nossas-escolas), e
     * aqui o original não sobrescreve o 400 do desktop.
     */
    font-weight: 400;
  }

  /*
   * Os 32px do original, menos os 4px de `gap` da grade -- pela mesma conta do desktop.
   *
   * **E 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 do painel, que juntos fazem o gancho à esquerda 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. A G4 já fez assim, e o
   * conduta antes dela, 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--privacidade-cookies .abas__painel {
    margin-top: 28px;
    position: relative;
    padding-left: 33px;
  }

  /*
   * A linha vertical, da altura do painel inteiro -- o `height: 100%` do original, que ali vem
   * de um `align-self: stretch` no elemento irmão. Ela acompanha o painel, e não o grupo de
   * acordeões: na primeira aba o título e a descrição ficam **dentro** do gancho, como lá.
   */
  .pagina--privacidade-cookies .abas__painel::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--privacidade-cookies .abas__painel::after {
    content: '';
    position: absolute;
    left: 0;
    top: 12px;
    width: 16px;
    height: 1px;
    background-color: var(--seb-azul);
  }
}

/*
 * --------------------------------------------------------------- código morto, não transcrito
 *
 * Três coisas do `.page__privacy` ficaram fora **de propósito**, e a lista está aqui para
 * quem comparar as duas folhas não procurá-las (a G13 recolhe estas notas):
 *
 * - `.wrapper__pane .line` (desktop) e as duas regras dele: o elemento não existe no HTML da
 *   página, e a folha o esconde no celular. Com ele sai o efeito do `gap: 20px` do
 *   `.wrapper__pane`, que só separava aquele traço do conteúdo. É o mesmo achado que a G4 fez
 *   em `.page__policies`;
 * - `.pane__description span { font-weight: 700 }`: nenhum dos dois arquivos tem `<span>`
 *   nessa descrição. A regra existe, e é por isso que a montagem converte `<span>` em
 *   `<strong>` ali também -- se um dia aparecer um, ele sai em negrito como o original faria;
 * - `.wrapper__banner .content .description`: a página não tem descrição no banner.
 *
 * E uma que é inerte, e não morta: o `width: 184px` do seletor. `flex: 1` é `1 1 0%`, e o
 * `flex-basis: 0` vence a `width` -- a F4 já registrou isso ao transcrever o componente.
 */