/*
 * Faixa de parceiros e clientes.
 *
 * O problema do site atual é que cada logo é servido no tamanho nativo, sem caixa
 * de contenção: proporções entre 4,4:1 e 1:1 dividem a mesma coluna e aparecem em
 * escalas aleatórias. Aqui cada logo vive numa caixa de altura fixa com
 * object-fit: contain, então todos ocupam o mesmo espaço visual.
 */
.partners-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  list-style: none;
}

.partner {
  display: grid;
  place-items: center;
  height: 5.5rem;
  padding: .9rem 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  /* Cartão claro fixo: alguns logos não têm transparência e trazem fundo branco
     embutido. Sobre o cartão isso passa despercebido, inclusive no tema escuro. */
  background: var(--partner-card-bg);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.partner:hover { border-color: var(--accent-color); box-shadow: var(--shadow-sm); transform: translateY(-2px); }

/*
 * Equilíbrio óptico: a caixa é larga e o teto de altura é baixo, então logos
 * horizontais (Microsoft, 4,7:1) crescem em largura e logos quadrados (SecIT,
 * 1:1) são contidos pela altura. Sem isso, a diferença de altura renderizada
 * ia de 23px a 52px e uns pareciam bem maiores que outros.
 */
.partner img {
  max-height: 2.6rem;
  max-width: 100%;
  width: auto;
  object-fit: contain;
}

@media (max-width: 575.98px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .partner { height: 5rem; padding: .75rem; }
  .partner img { max-height: 2.5rem; }
}