/*
 * ESTILO DA PÁGINA DE CONTATO — e só dela.
 */


/* ----------------------------------------------------------- tabela de fontes */

/* A tabela rola DENTRO de si em tela estreita. Sem isto, ela empurraria a
   largura da página e criaria barra horizontal no documento inteiro — que é
   exatamente o que a regra de layout proíbe. */
.fontes {
  display: block;
  overflow-x: auto;
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.fontes-legenda {
  caption-side: top;
  text-align: left;
  color: var(--cor-texto-fraco);
  font-size: 0.85rem;
  padding-bottom: 0.6rem;
}

.fontes th, .fontes td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--cor-borda);
  text-align: left;
  vertical-align: top;
}

.fontes thead th {
  color: var(--cor-texto-fraco);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--cor-borda);
}

.fontes tbody th { font-weight: 700; white-space: nowrap; }

/* "Não exige chave" é a informação mais importante desta tabela: é o que faz o
   sistema continuar funcionando sem cadastro, sem cota e sem credencial que
   possa vazar. */
.sem-chave { color: #4ade80; font-weight: 600; white-space: nowrap; }

.fontes-notas { margin: 0.6rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.5rem; }
.fontes-notas li { font-size: 0.9rem; }

/* =============================================== o cartão com a foto */

/*
 * FOTO À ESQUERDA, identidade ao lado. `auto` na primeira coluna: a foto tem
 * tamanho próprio e não deve esticar; o texto fica com o que sobra.
 */
.cartao-pessoa {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1.5rem;
  width: 100%;
  margin-top: 1.2rem;
  padding: 1.4rem 1.5%;
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-destaque);
  border-radius: 0.5rem;
  background: var(--cor-superficie);
}

.pessoa-foto {
  /* Em `rem`: acompanha a fonte, e no telefone encolhe junto com o texto em vez
     de virar um bloco desproporcional. */
  width: 7.5rem;
  height: 7.5rem;
  border-radius: 50%;
  border: 2px solid var(--cor-destaque);
  object-fit: cover;
  flex: none;
}

.pessoa-identidade { display: flex; flex-direction: column; gap: 0.25rem; }
.pessoa-nome { margin: 0; font-size: 1.3rem; }
.pessoa-papel { margin: 0; color: var(--cor-texto-fraco); }
.pessoa-pilha {
  margin: 0;
  color: var(--cor-destaque);
  font-size: 0.82rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.pessoa-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.2rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.pessoa-link {
  color: var(--cor-texto);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.pessoa-link:hover, .pessoa-link:focus-visible {
  color: var(--cor-destaque);
  border-bottom-color: var(--cor-destaque);
  outline: none;
}

/* Em tela estreita a foto vai para cima do texto: lado a lado, sobra uma
   coluna de texto de três centímetros. */
@media (max-width: 640px) {
  .cartao-pessoa { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .pessoa-identidade { align-items: center; }
  .pessoa-links { justify-content: center; }
}