/*
 * Abas (etapa F4) -- 3 grupos e 12 abas: 6 em nossas-escolas, 4 em fale-conosco, 2 em
 * privacidade-cookies.
 *
 * **Os três são o mesmo componente escrito três vezes** -- terceira vez nesta migração, e a
 * E3 e a E6 acharam as outras duas. Conferido: o seletor é idêntico nos três (`flex: 1`, fundo
 * `#A1A1A1`, texto branco, 64px de altura, ativo em azul da marca, hover em `#072f4881`). O
 * que difere é de página e não vem: `gap` (4px nas escolas, 18 no contato), tamanho de fonte
 * (18 contra 16), `max-width`, `margin-bottom` e o chevron que só o contato tem.
 *
 * Transcrito de `main.css:1774-1812` (escolas, o grupo dominante -- 6 das 12 abas).
 *
 * **Sem JavaScript**, e por construção: radio + rótulo + painel irmãos. Quem troca a aba é o
 * `<label>`, quem isola o grupo é o `name` do radio, e quem mostra o painel é o
 * `:checked ~`. O `data-tabs-v4.js` do estático não é migrado, e o defeito 6 dele -- seletor
 * global, que quebra dois grupos na mesma página -- não tem como acontecer aqui.
 */

/*
 * Um contêiner só para rótulos e painéis, com `wrap`: os rótulos ficam na primeira linha e o
 * painel, com `flex-basis: 100%`, cai para a linha de baixo. É o que dispensa os dois
 * contêineres do estático (`.tab__selectors` e `.tab__panes`), que separariam o radio do
 * painel dele e quebrariam o seletor `~`.
 */
.abas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  /*
   * O `gap` do grupo dominante -- escolas, 6 das 12 abas. Ele é medida interna do componente
   * pela distinção que a E4 registrou (o envelope aqui é do próprio plugin), e o contato, que
   * usa 18px, sobrescreve na G11. Mesma escolha da variante base da E3.
   */
  gap: 4px;
}

/*
 * `display: contents` **é a peça central**: o envelope de cada aba desaparece do layout -- os
 * três filhos participam do flex da faixa como se fossem dela -- e continua existindo na
 * árvore, mantendo radio, rótulo e painel irmãos entre si. Sem ele, o `~` de um radio
 * alcançaria os painéis de todas as abas seguintes.
 */
.abas__item {
  display: contents;
}

.abas__rotulo {
  /* Antes do painel na ordem visual, qualquer que seja a ordem no documento. */
  order: 1;
  /*
   * `flex: 1` é `1 1 0%`, e o `flex-basis: 0` vence a `width` -- então os 184px que o original
   * declara ali são inertes, e não vêm. Ficou registrado porque quem comparar as duas folhas
   * vai procurá-los.
   */
  flex: 1;
  /*
   * **Os 64px são a altura inteira, e é a G5 que descobriu que faltava dizer isso.**
   *
   * No original o seletor é um `<button>`, que ganha `box-sizing: border-box` da folha do
   * navegador -- então lá os 23px de `padding` vertical cabem *dentro* dos 64. Aqui ele é um
   * `<label>`, que usa o `content-box` do projeto (a `base.css` explica por que não há
   * `border-box` global): o rótulo saía com **87px**, medido na primeira página a usar as
   * abas. É o mesmo tipo de defeito que a troca de `<button>` por `<summary>` criou no
   * acordeão da D7, e a intenção do original é explícita -- a versão de celular de
   * nossas-escolas declara `box-sizing: border-box` na mão (`main.css:2171`).
   */
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  padding: 11px 12px 12px;
  background-color: var(--seb-cinza-inativo);
  color: var(--seb-branco);
  font-family: var(--seb-fonte-corpo);
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}

.abas__rotulo:hover {
  /* O azul a 50% do original, que aqui se deriva do token em vez de repetir `#072f4881`. */
  background-color: rgb(var(--seb-azul-rgb) / 0.5);
}

.abas__radio:checked ~ .abas__rotulo {
  background-color: var(--seb-azul);
}

/*
 * **O foco precisa aparecer no rótulo**, e esta regra não é opcional: o controle real é o
 * radio, e ele está escondido do olho por `.sr-only`. Sem isto, quem navega por teclado troca
 * de aba sem ver onde está -- o anel de foco do navegador ficaria num elemento de 1px.
 */
.abas__radio:focus-visible ~ .abas__rotulo {
  outline: 2px solid var(--seb-azul);
  outline-offset: 2px;
}

.abas__painel {
  order: 2;
  flex-basis: 100%;
  display: none;
}

.abas__radio:checked ~ .abas__painel {
  display: block;
}

/*
 * No celular os rótulos viram **três colunas de 116,5px**, que é o arranjo do grupo dominante
 * -- escolas, 6 das 12 abas (`main.css:2069-2081`). A primeira versão deste bloco inventava um
 * quarto arranjo ("repartir a linha com um piso de largura"), e a revisão pegou: os três do
 * estático são diferentes (escolas em 3 colunas de 116,5px; contato em 2 de 1fr; privacidade
 * em uma coluna cheia), e inventar um quinto para o meio não é transcrever nem deixar para a
 * página. Os outros dois arranjos chegam na G11 e na G5.
 *
 * `minmax(0, 116.5px)` é a correção de transbordo que a B5 mandou fazer na faixa do carrossel:
 * o original declara `repeat(3, 116.5px)` com `padding: 0 16px`, o que soma 357,5 + 32 e
 * estoura 360px de viewport por ~21px, escondidos pelo `overflow-x: hidden` do `body`. Como
 * `minmax`, a medida vale onde cabe e cede onde não cabe.
 *
 * **E é grade, não flex -- a G10 tentou os dois.** Flex parecia resolver o problema do painel
 * (abaixo) com menos código, mas ele não sabe dizer "sempre três por fila": quem quebra a linha
 * ali é a largura de base, então uma base fixa dá 5+1 numa tela de 600px, onde o original
 * mostra 3+3, e uma base relativa (um terço da faixa) é anulada pelo teto, que o flex aplica
 * **antes** de quebrar a linha. Medido nas duas formas antes de voltar.
 */
@media (max-width: 768px) {
  .abas {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 116.5px));
    justify-content: center;
  }

  .abas__rotulo {
    padding: 8px;
    font-size: 14px;
    font-weight: 500;
  }

  /*
   * **O painel atravessa as três colunas e ainda assim ocupa a tela inteira.** As duas coisas
   * não são a mesma: numa grade centrada, `1 / -1` mede o que as *colunas* medem -- 357,5px
   * numa tela de 375 --, e o painel das escolas leva fotos que vão de borda a borda. Foi assim
   * que elas nasceram 9px para dentro dos dois lados, achado na G10.
   *
   * `100vw` com `justify-self: center` resolve porque as colunas já estão centradas: o painel
   * fica centrado na mesma linha e, com a largura da janela, encosta nas duas bordas. O
   * `overflow-x: hidden` do `body` cobre o caso de uma janela estreita **de desktop**, onde a
   * barra de rolagem clássica faz `100vw` passar alguns pixels da área útil; em aparelho de
   * verdade, onde a barra é sobreposta, os dois valores são o mesmo.
   *
   * O recuo lateral que esta faixa tinha saiu junto: no estático ele é da `.tab__selectors`, e
   * os painéis são outro contêiner, sem recuo nenhum. Aqui os dois moram na mesma caixa, então
   * um `padding` nela alcançaria o painel também.
   */
  .abas__painel {
    grid-column: 1 / -1;
    width: 100vw;
    justify-self: center;
  }
}