/*
 * Grade de logos (etapa E5) -- 32 logos em 3 grupos: 24 parceiros (index e parcerias, os
 * mesmos), 6 escolas (fale-conosco) e 2 no bloco de segurança.
 *
 * **O tamanho da célula não vem, e nos três ele é diferente:** 90px de altura nos parceiros,
 * ~176 nas escolas (a grade tem 352px em duas fileiras) e nenhum nos 2 do seguranca, onde
 * quem manda é o `max-height` do logo. Isso é moldura de página, pela regra da E1/E2/E3, e
 * chega na G12, na G11 e na G6.
 *
 * O que fica é o arranjo -- a grade, a célula que centra e o logo que cabe sem distorcer --
 * e o `gap`, que é interno ao componente pela distinção que a E4 registrou: o envelope aqui é
 * do próprio plugin, e não o `RowPlugin` compartilhado.
 *
 * Os valores são de `main.css:1187-1206` (parceiros), que é o grupo dominante -- 24 dos 32.
 */

.grade-logos {
  display: grid;
  gap: 40px 30px;
  align-items: center;
}

/*
 * "Em linha" é o caso dos 2 do seguranca (`.logos`): dois logos lado a lado, sem grade e sem
 * célula de largura fixa. `wrap` para não estourar a faixa se alguém puser mais.
 */
.grade-logos--em-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.grade-logos--colunas-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grade-logos--colunas-4 {
  grid-template-columns: repeat(4, 1fr);
}

.grade-logos__celula {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
 * O link ocupa a célula inteira, e isso é o estático: assim a área clicável é a célula, e não
 * só o desenho do logo -- que numa marca com muito espaço em branco seria um alvo pequeno.
 */
.grade-logos__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/*
 * `max-*` com `width`/`height` em `auto` e `contain`: a marca cabe na célula sem distorcer,
 * qualquer que seja a proporção do arquivo. As 32 têm proporções diferentes entre si.
 *
 * O `max-height` de 85px é o dos parceiros, e é o único valor de tamanho que o componente
 * traz -- sem ele um logo alto estouraria a fileira antes de a página existir, que é a
 * situação que a E2 decidiu não deixar acontecer. As páginas que quiserem outro (80% nas
 * escolas, 75px no seguranca) sobrescrevem.
 */
.grade-logos__logo {
  max-width: 100%;
  max-height: 85px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/*
 * No celular a grade de 4 vira de 3, com o `gap` menor -- transcrito dos parceiros, que é o
 * único dos três grupos com regra de celular própria para a grade.
 *
 * As outras contagens ficam como estão de propósito. O empilhamento das 6 escolas
 * (`flex-direction: column; gap: 48px`) é do painel de abas em que elas vivem, não da grade,
 * e chega com a G11.
 */
@media (max-width: 768px) {
  .grade-logos--colunas-4 {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
  }
}