/* ==========================================================================
   sections/contact.css — Formulário centralizado + canais diretos

   Era um grid de duas colunas com o formulário à esquerda e um aside à
   direita. O aside foi esvaziado a pedido do cliente (atendimento e "como
   funciona" removidos em 2026-09-02) e o formulário passou a ocupar uma
   coluna única, centralizada.

   Os canais diretos sobreviveram como uma linha abaixo do formulário. Eles
   só aparecem quando `js/config.js` estiver preenchido — até lá,
   js/modules/contact-links.js remove a lista inteira.
   ========================================================================== */

.contact__grid {
  display: grid;
  gap: var(--space-xl);
  justify-items: center;
  /* Formulário estreito o bastante para a linha de leitura não esticar, e
     largo o bastante para os campos ainda caberem em duas colunas. */
  max-inline-size: 48rem;
  margin-inline: auto;
}

.contact__grid > .form {
  inline-size: 100%;
}

/* --------------------------------------------------------------------------
   Canais diretos
   -------------------------------------------------------------------------- */

.contact__channels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-lg);
  margin: 0;
  padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--border);
  inline-size: 100%;
}

/* Lista sem nenhum canal configurado é removida do DOM por contact-links.js;
   esta regra é só a rede de segurança para o instante antes do script rodar. */
.contact__channels:empty {
  display: none;
}

.contact__channel {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.contact__channel:hover {
  color: var(--accent);
}

.contact__channel svg {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  color: var(--accent);
}