/*
 * Página `fale-conosco` (etapa G11) -- a moldura, e só ela.
 *
 * Transcreve as regras `.page__contact` do `main.css` que está no ar (3312-3595 no desktop,
 * 4135-4237 no celular), **menos as do modal** -- os cinco modais não são migrados, e quatro
 * deles são marcação morta no próprio original (defeito 6 da análise; a decisão é da D9b).
 *
 * O escopo é `.pagina--fale-conosco`, que o `base.html` põe no `<main>` a partir do registro
 * de `backend/montagem`.
 *
 * **O que é moldura, e por isso mora aqui:** as larguras, os recuos, os espaços entre blocos,
 * a tarja azul de cada canal, a grade das 6 escolas e as duas coisas que a F4 nomeou como
 * sendo desta página -- o arranjo do celular em duas colunas e o chevron do rótulo.
 *
 * **E o desenho do formulário, que não é transcrição de nada.** A D9b entregou o `canais.css`
 * *"magro de propósito"* porque no estático esta página é um `<iframe>` e nada mais; o que
 * ela deixou para cá é a medida do bloco dentro do painel, e é só isso que este arquivo diz
 * sobre ele -- o desenho dos campos continua no componente, onde serve a qualquer página.
 */

.pagina--fale-conosco {
  margin-top: 35px;
  /* O mesmo grafismo do conduta e do global, na mesma posição -- é a terceira página a
   * usá-lo com estes valores. */
  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**, como no conduta -- a
 * foto encosta na borda esquerda da tela e o texto vem ao lado dela.
 */
.pagina--fale-conosco > .banner {
  gap: 42px;
  margin-bottom: 62px;
  /*
   * **O respiro da direita, que só aparece quando a linha aperta.** O banner não tem recuo (a
   * foto encosta na borda esquerda de propósito), e enquanto sobra espaço os itens ficam no
   * `flex-start` e este recuo não desloca nada. Ele só passa a valer onde a linha inteira não
   * cabe -- e é ali que, sem ele, a prosa encostaria na borda da tela.
   *
   * **No celular ele é desfeito**, e tem de ser: lá o banner empilha e cada filho já traz o
   * próprio recuo (a foto em 92%, a prosa em `calc(100% - 32px)` com 16 de margem). Somado a
   * eles, este viraria 32px de recuo à direita e uma foto 15px mais estreita.
   */
  padding-right: 16px;
}

/*
 * **660 é teto, não piso -- e `min-width` é o que faz a diferença.**
 *
 * A foto tem 696px de largura natural, e `min-width: auto` num item de flex vale o tamanho
 * intrínseco do conteúdo: ela se recusava a encolher abaixo dos 660, então a linha inteira
 * (660 + 42 de `gap` + 395 da prosa = 1097px) transbordava para a direita em qualquer tela
 * menor que isso. O `overflow-x: hidden` do `body` escondia o estrago em vez de evitá-lo, e o
 * título saía cortado pela borda.
 *
 * `min-width: 0` devolve à foto a capacidade de encolher, que é o que `width: 100%` já pedia.
 * A proporção se mantém sozinha (`height: auto` vem do componente).
 */
.pagina--fale-conosco > .banner .banner__imagem {
  max-width: 660px;
  width: 100%;
  min-width: 0;
}

/*
 * E quem cede é a foto, não a prosa: os 395px são a medida do título, e o destaque em script
 * de 122px não tem como encolher junto -- quebraria em duas linhas antes de caber. Travar o
 * encolhimento aqui põe toda a folga da linha na imagem, que é decoração e aguenta a perda.
 *
 * `flex-shrink` e não o atalho `flex`: `flex-grow` e `flex-basis` já são 0 e `auto`, e o
 * atalho os reescreveria só para mudar um -- é a forma que o `::after` do rótulo já usa nesta
 * mesma folha.
 */
.pagina--fale-conosco > .banner .banner__conteudo {
  max-width: 395px;
  width: 100%;
  flex-shrink: 0;
}

/*
 * **A quebra depois do destaque, e por que ela não é `display: block`.**
 *
 * No original o título é uma `<h2>` só, com `<span>Fale</span><br>conosco` dentro: o `<br>` é
 * quebra escrita à mão entre a palavra em script e o resto. O componente emite as duas partes
 * na mesma linha, e o campo do editor não aceita `<br>` -- ele é `CharField`, decisão da E1.
 *
 * `display: block` no destaque produziria a quebra (é o que o `banner.css` faz no celular),
 * **e mudaria a altura da linha**: medido no site no ar, a primeira linha do título tem 59px e
 * não os 40 declarados, porque a caixa do script de 122px sobe acima da linha e é ela que
 * define o topo. Como bloco, a linha volta aos 40 e a palavra "conosco" sobe 19px. Foi medido
 * nos dois arranjos antes de escolher.
 *
 * `content: "\A"` mantém o destaque **inline** -- ou seja, com a mesma conta de linha do
 * original -- e quebra depois dele, que é exatamente o que o `<br>` faz ali.
 *
 * Os 122px e o `margin-left: -10px` são desta página: o destaque do componente é 92px, que é
 * o tamanho dos outros 17 banners.
 */
.pagina--fale-conosco > .banner .banner__titulo {
  line-height: 40px;
  margin-bottom: 50px;
}

.pagina--fale-conosco > .banner .banner__destaque {
  font-size: 122px;
  padding: 0;
  margin-left: -10px;
}

.pagina--fale-conosco > .banner .banner__destaque::after {
  content: "\A";
  white-space: pre;
}

/*
 * As duas descrições do banner, que aqui têm **tamanhos diferentes** -- 26/34px na primeira e
 * 18/28 na segunda. É o único dos 18 banners em que isso acontece, e é por isso que a segunda
 * é alcançada pelo irmão adjacente em vez de por uma classe: o componente emite as duas com a
 * mesma classe (`descricao` e `descricao_2` são o mesmo elemento), o que é correto -- a
 * diferença é de página.
 */
.pagina--fale-conosco > .banner .banner__descricao {
  font-size: 26px;
  line-height: 34px;
  max-width: 395px;
}

.pagina--fale-conosco > .banner .banner__descricao + .banner__descricao {
  font-size: 18px;
  line-height: 28px;
  max-width: 346px;
  /* Os 27px que o original tem como `margin-bottom` da primeira. Aqui é o espaço *entre* as
   * duas, e ele é medido pelo bloco de cima -- a regra da D2, e a mesma forma que a G5 usa
   * dentro do painel. */
  margin-top: 27px;
}

/* --------------------------------------------------------------------- o bloco "sobre"
 *
 * A `.wrapper__about`: o "L" à esquerda e a prosa ao lado. No original os dois são itens de um
 * flex com `gap: 20px`; aqui a linha é `position: absolute` (decisão da E2, para ela não
 * empurrar nem receber clique), então o lugar da prosa sai de uma margem em vez do `gap`.
 */
.pagina--fale-conosco > .bloco-sobre {
  margin-bottom: 62px;
}

/*
 * **236x48, e o arquivo tem 236x72.** O original usa aqui o `line-contact.svg`, que é o mesmo
 * "L" do `line-decorativa.svg` com 24px a menos de altura -- a B7 unificou os dois, e é por
 * isso que a altura é regra de folha. Esticar sem engrossar o traço é o que a G6 tornou
 * possível (`vector-effect="non-scaling-stroke"` no arquivo).
 */
.pagina--fale-conosco .bloco-sobre__linha {
  top: 0;
  right: auto;
  left: 0;
  width: 236px;
  height: 48px;
}

/* Os 927px da `.about__description`, deslocados dos 236 da linha mais os 20 de `gap`. */
.pagina--fale-conosco .bloco-sobre__conteudo {
  max-width: 927px;
  margin-left: 256px;
}

.pagina--fale-conosco .bloco-sobre__conteudo > .texto {
  font-size: 18px;
  line-height: 28px;
}

/* --------------------------------------------------------------------- os canais
 *
 * O `.contact__title`, que no original é uma `<h2>` de 26px centrada. O peso, a fonte e a
 * centralização vêm do plugin (divisão da D3); daqui sai o tamanho e o espaço abaixo.
 */
.pagina--fale-conosco > .texto--seb-titulo {
  font-size: 26px;
  margin-bottom: 42px;
}

/*
 * **A faixa fica com a largura da página, e não com os 928px dos seletores.**
 *
 * No original são dois contêineres dentro de `.tabs`: `.tab__selectors`, com `max-width: 928px`,
 * e `.tab__panes`, cujo painel mede 740. A F4 uniu os dois num só (radio, rótulo e painel
 * precisam ser irmãos), então a largura de cada um passa a ser dele: 218px de teto no rótulo,
 * 740 nos filhos do painel.
 *
 * E a faixa **precisa** continuar da largura da tela: as 7 linhas decorativas dos painéis
 * entram pela borda esquerda (`left: -44px` no original), e uma faixa de 928px centrada as
 * poria no meio da página.
 */
.pagina--fale-conosco > .abas {
  /* Os 18px do contato, contra os 4 do grupo dominante que o `abas.css` traz. */
  gap: 18px;
}

/*
 * `flex: 1` com teto de 218px: os quatro repartem a linha, e o `max-width` é o que os impede
 * de esticar até a borda -- 4x218 + 3x18 dão os 926px que o original mede.
 */
.pagina--fale-conosco .abas__rotulo {
  max-width: 218px;
  gap: 10px;
  padding: 12px;
  font-size: 16px;
}

/*
 * **O chevron, que a F4 mandou para cá** -- *"o chevron que só as abas do fale-conosco têm não
 * sai daqui: é desenho daquela página"*.
 *
 * `::after` e não `<img>`: no original ele é uma imagem com `alt="Seta"`, anunciada quatro
 * vezes ao leitor de tela, e o que ela informa -- qual aba está aberta -- o `radio` marcado já
 * informa sozinho. É a mesma decisão que a E2 tomou com as 34 linhas.
 */
.pagina--fale-conosco .abas__rotulo::after {
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: url("../../icones/chevron-pane-contact.svg") no-repeat center / contain;
  transition: transform linear 0.15s;
}

.pagina--fale-conosco .abas__radio:checked ~ .abas__rotulo::after {
  transform: rotate(180deg);
}

/*
 * Os 72px que o original põe como `margin-bottom` da faixa de seletores, **menos os 18px de
 * `gap`** que a faixa já põe entre as duas linhas do flex: o painel cai para a linha de baixo
 * do mesmo contêiner, então o `gap` conta. É a mesma conta que a G5 fez com 42 e 4.
 *
 * `position: relative` não é necessário para as linhas (elas são fundo deste elemento), e não
 * está aqui: o que precisa dele é o conteúdo, e nenhum filho é posicionado.
 */
.pagina--fale-conosco .abas__painel {
  margin-top: 54px;
  margin-bottom: 92px;
}

/*
 * Os 740px do painel do original, aplicados aos **filhos**: o painel em si vai de borda a borda,
 * porque é ele que carrega as linhas decorativas que entram pela esquerda.
 */
.pagina--fale-conosco .abas__painel > * {
  max-width: 740px;
  margin-left: auto;
  margin-right: auto;
}

/*
 * ------------------------------------------------- as 7 linhas decorativas dos painéis
 *
 * `line-pane-contact.svg`: um traço horizontal com um círculo na ponta, e **não** o "L" que a
 * B7 unificou -- é outro desenho, e por isso outro arquivo.
 *
 * Elas são fundo, e não conteúdo, pela regra que a G10 aplicou ao grafismo das abas de escola:
 * decoração sem conteúdo próprio não é caixa de editor. E são `background-image` em camadas, e
 * não `::before`/`::after`, porque o primeiro painel tem **quatro** delas.
 *
 * As coordenadas são medidas no site no ar, e são relativas ao **topo do painel** -- no
 * original elas são relativas ao `.tabs`, que inclui o título e a faixa de seletores, e ancorar
 * no painel tira da conta duas alturas que aqui não são as mesmas.
 *
 * O `-44px` é o do original, e o efeito é o mesmo: a parte que fica antes da borda esquerda é
 * cortada, lá pelo `overflow-x: hidden` do `body` e aqui pela caixa do próprio painel. O
 * círculo, que está a 349,5px do começo do traço, continua visível nos dois.
 *
 * **Mas o `-44px` só serve enquanto a tela é larga.** O painel vai de borda a borda e o texto é
 * uma coluna de 740px centrada *dentro* dele: quanto mais estreita a tela, mais para a esquerda
 * começa o texto, enquanto o traço fica parado. Abaixo de ~1422px de painel os dois se cruzam --
 * é o defeito relatado, com o traço e o círculo por cima das palavras.
 *
 * `--linha-x` resolve isso ancorando o traço na **coluna de texto** em vez de na borda da tela:
 * ele termina 24px antes de onde o texto começa. Enquanto couber, o `min()` mantém os -44px
 * medidos, e as duas contas se encontram justamente nos 1422px; abaixo de ~782px de painel o
 * traço já saiu inteiro pela esquerda, que é a mesma saída que o original dá ao excedente e o
 * mesmo efeito do `background-image: none` que a media query de 768px aplica logo abaixo.
 *
 * A conta do `calc` desconta 180,5px porque porcentagem em `background-position` é medida sobre
 * *(largura do painel - 361 da imagem)*, e não sobre a largura do painel: o `50%` já vale
 * `painel/2 - 180,5`, e o que falta para `painel/2 - 370 - 24 - 361` são os 574,5 restantes.
 */
.pagina--fale-conosco .abas__painel {
  --linha-x: min(-44px, calc(50% - 574.5px));

  background-repeat: no-repeat;
  background-size: 361px 23px;
}

.pagina--fale-conosco .abas__item:nth-of-type(1) .abas__painel {
  background-image:
    url("../../icones/line-pane-contact.svg"),
    url("../../icones/line-pane-contact.svg"),
    url("../../icones/line-pane-contact.svg"),
    url("../../icones/line-pane-contact.svg");
  background-position:
    var(--linha-x) 139px,
    var(--linha-x) 261px,
    var(--linha-x) 351px,
    var(--linha-x) 529px;
}

.pagina--fale-conosco .abas__item:nth-of-type(2) .abas__painel {
  background-image: url("../../icones/line-pane-contact.svg");
  background-position: var(--linha-x) 139px;
}

.pagina--fale-conosco .abas__item:nth-of-type(3) .abas__painel {
  background-image:
    url("../../icones/line-pane-contact.svg"),
    url("../../icones/line-pane-contact.svg");
  background-position: var(--linha-x) 139px, var(--linha-x) 261px;
}

/* A quarta aba não tem regra nenhuma aqui, e é o original: ela é a das escolas, e não tem
 * linha. */

/*
 * ------------------------------------------------------------- o conteúdo de cada painel
 *
 * A tarja azul-clara com a descrição do canal (`.channel__info`). O tamanho vem daqui porque o
 * degrau `seb-texto` da D3 é 20px e o original usa 18.
 */
.pagina--fale-conosco .abas__painel > .texto {
  /* `border-box` porque os 740px do original incluem o recuo da tarja -- e o projeto não tem
   * `box-sizing` global. Sem isto o bloco sai 36px mais largo que o painel. */
  box-sizing: border-box;
  width: 100%;
  font-size: 18px;
  line-height: 28px;
  padding: 15px 18px;
  background-color: var(--seb-azul-claro);
  margin-bottom: 24px;
}

/*
 * **A prosa da quarta aba não é tarja.** No original ela é `.channel__info2`: mesmo tamanho,
 * sem fundo e sem recuo, com 60px de espaço abaixo. Aqui os dois são blocos de texto irmãos no
 * mesmo painel, e o que os distingue é a ordem -- o segundo é sempre o complemento.
 */
.pagina--fale-conosco .abas__painel > .texto + .texto {
  padding: 0;
  background-color: transparent;
  margin-bottom: 60px;
}

/*
 * ------------------------------------------------------- o botão que abre o formulário
 *
 * A `.buttons` do original, que na aba de privacidade cerca o `.btn-channel`. Aqui as três
 * primeiras abas a têm, porque nas duas primeiras o formulário era um `<iframe>` embutido e
 * agora é o mesmo modal das outras.
 *
 * O botão em si é o `.botao` da D5 -- o `btn-channel` **é** um dos três que aquela etapa
 * mediu e unificou. O que vem daqui são as medidas de página: os 358x62 do original, que a D5
 * recusou como largura fixa e que voltam como **teto**, pela mesma leitura que a G10 fez do
 * `btn-school` (reproduz onde cabe, cede onde não cabe).
 */
.pagina--fale-conosco .abas__painel > .canais {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
}

/* A `.buttons` do original: os botões centrados, com 21px entre eles. */
.pagina--fale-conosco .canais__acoes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
}

.pagina--fale-conosco .canais__abrir {
  /*
   * `border-box` porque os 358x62 do original são a caixa **inteira**: lá o `.btn-channel` não
   * tem recuo, e o `.botao` da D5 tem 7/32/8 -- transcritos dos outros dois botões do site, que
   * têm. Sem isto o botão sai 424x79.
   */
  box-sizing: border-box;
  width: 100%;
  max-width: 358px;
  min-height: 62px;
}

.pagina--fale-conosco .abas__painel > .lista-de-itens {
  /* `box-sizing` porque o projeto não tem `border-box` global e os 740px são de conteúdo,
   * como no original. */
  box-sizing: border-box;
  width: 100%;
  padding: 0 18px;
  margin-bottom: 58px;
}

/*
 * ------------------------------------------------------------- as 6 escolas da quarta aba
 *
 * A `.link__schools`: uma grade 3x2 de 709x352, sem espaço entre as células -- o respiro é o
 * `max-height: 80%` do logo dentro da célula. O `gap` de 40/30px do componente é o dos 24
 * parceiros, e aqui ele somaria à altura fixa.
 */
.pagina--fale-conosco .abas__painel > .grade-logos {
  width: 709px;
  max-width: 709px;
  height: 352px;
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  /*
   * **`stretch`, e é o que faz o teto de 80% do logo valer.** O componente centra as células
   * (`align-items: center`), que é o certo para os 24 parceiros; aqui isso deixa a célula com
   * a altura do próprio logo, e um `max-height` em porcentagem contra uma altura que depende
   * do conteúdo não resolve -- o logo da Maple Bear saía com 206px de altura em vez de 165.
   * Esticada, a célula tem a altura da linha e a porcentagem passa a ter contra o que medir.
   */
  align-items: stretch;
}

/*
 * Os 85px de teto do componente são a medida dos parceiros; aqui a célula tem 176px de altura
 * e o original dá ao logo 80% dela.
 */
.pagina--fale-conosco .grade-logos__logo {
  max-width: 80%;
  max-height: 80%;
}

/* --------------------------------------------------------------------- a foto do fim */
.pagina--fale-conosco > .imagem {
  width: 100%;
}

@media (max-width: 768px) {
  .pagina--fale-conosco {
    background: none;
  }

  .pagina--fale-conosco > .banner {
    gap: 32px;
    margin-bottom: 42px;
    /* O respiro da direita é do arranjo em linha; aqui cada filho traz o seu -- ver a nota
     * lá em cima. */
    padding-right: 0;
  }

  /* 92% da largura, encostado na esquerda -- o original escreve `margin-left: 0` junto, que é
   * o valor que a imagem já tem. */
  .pagina--fale-conosco > .banner .banner__imagem {
    max-width: none;
    width: 92%;
    margin-right: auto;
  }

  .pagina--fale-conosco > .banner .banner__conteudo {
    max-width: none;
    width: calc(100% - 32px);
    margin: 0 16px;
  }

  .pagina--fale-conosco > .banner .banner__titulo {
    margin-top: 32px;
    margin-left: 12px;
    line-height: 24px;
  }

  /*
   * 102px, que é o mesmo valor que o `banner.css` já dá ao destaque no celular -- ele está
   * repetido aqui porque a regra desta página tem duas classes e vence a do componente por
   * especificidade, dentro ou fora de media query.
   */
  .pagina--fale-conosco > .banner .banner__destaque {
    font-size: 102px;
    /* O `banner.css` põe `display: block` no destaque do celular, que é como os outros
     * banners quebram ali. Aqui quem quebra é o `::after` acima, e as duas coisas juntas
     * dariam duas quebras. */
    display: inline;
  }

  .pagina--fale-conosco > .banner .banner__descricao {
    font-size: 24px;
    line-height: 26px;
  }

  .pagina--fale-conosco > .banner .banner__descricao + .banner__descricao {
    font-size: 16px;
    line-height: 22px;
  }

  .pagina--fale-conosco > .bloco-sobre {
    margin-bottom: 42px;
  }

  /*
   * O "L" do celular: 17px de largura por 126 de altura. No original ele é outro desenho -- um
   * par de `<div>` vazios, 16x1 e 1x126 --, e a E2 decidiu por uma construção só. Os 17 são os
   * dois braços juntos, como a G10 mediu.
   */
  .pagina--fale-conosco .bloco-sobre__linha {
    width: 17px;
    height: 126px;
  }

  /*
   * A prosa desce para 16/22 no celular, e a regra tem de estar aqui: o degrau `seb-texto` do
   * componente já faz isso sozinho, mas a regra de desktop desta folha tem duas classes e
   * venceria a dele dentro da media query -- especificidade não muda por estar numa.
   */
  .pagina--fale-conosco .bloco-sobre__conteudo > .texto {
    font-size: 16px;
    line-height: 22px;
  }

  .pagina--fale-conosco .bloco-sobre__conteudo {
    max-width: none;
    /* Os 17px do "L" mais os 16 de `gap`, e o recuo da direita que o original dá à prosa. */
    margin-left: 33px;
    margin-right: 32px;
  }

  /*
   * **Duas colunas, que é o arranjo desta página** -- o terceiro dos três, e o que o
   * `abas.css` e a G5 deixaram anotado para cá. O da F4 é de três colunas de 116,5px
   * (nossas-escolas, 6 das 12 abas) e o da G5 é de uma coluna cheia.
   */
  .pagina--fale-conosco > .abas {
    grid-template-columns: repeat(2, minmax(0, 158px));
    gap: 10px;
  }

  .pagina--fale-conosco .abas__rotulo {
    max-width: none;
    height: 64px;
    padding: 12px;
    font-size: 16px;
    /* 400, e não os 500 do grupo dominante: o original não sobrescreve o peso do desktop. */
    font-weight: 400;
  }

  /*
   * O painel vai de borda a borda (é o que a F4 faz com `100vw`) e o recuo de 16px passa a ser
   * dele: no original ele é da `.tabs`, que aqui não existe como caixa separada.
   */
  .pagina--fale-conosco .abas__painel {
    box-sizing: border-box;
    padding: 0 16px;
    /* Os 42px de espaço abaixo dos seletores, menos os 10 de `gap`. */
    margin-top: 32px;
    margin-bottom: 62px;
  }

  /* As linhas somem no celular, como no original. Aba por aba, porque é aba por aba que elas
   * são declaradas -- uma regra só em `.abas__painel` perderia por especificidade. */
  .pagina--fale-conosco .abas__item:nth-of-type(1) .abas__painel,
  .pagina--fale-conosco .abas__item:nth-of-type(2) .abas__painel,
  .pagina--fale-conosco .abas__item:nth-of-type(3) .abas__painel {
    background-image: none;
  }

  /* O original leva o botão a `width: 100%` no celular, e a faixa vira coluna. */
  .pagina--fale-conosco .canais__acoes {
    flex-direction: column;
    gap: 20px;
  }

  .pagina--fale-conosco .canais__abrir {
    max-width: none;
  }

  /*
   * As 6 escolas viram uma coluna: sem a grade, sem a altura fixa e com 48px entre elas.
   */
  .pagina--fale-conosco .abas__painel > .grade-logos {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: none;
    height: auto;
    gap: 48px;
  }

  .pagina--fale-conosco .grade-logos__celula {
    max-height: 140px;
  }

  .pagina--fale-conosco > .imagem {
    height: 190px;
    object-fit: cover;
    object-position: center;
  }
}