/* MEU PERFIL — a foto ao lado do campo que a troca.
 *
 * O retrato existe para responder "deu certo?" sem recarregar: quem acabou de
 * escolher um arquivo precisa ver o que está valendo agora. No celular a dupla
 * empilha, e o retrato vem primeiro — é o que a pessoa veio ver. */

.perfil__foto {
  display: flex;
  gap: var(--esp-5);
  align-items: flex-start;
  margin-bottom: var(--esp-5);
  padding-bottom: var(--esp-5);
  border-bottom: 1px solid var(--cor-borda);
}

.perfil__retrato {
  flex: 0 0 auto;
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-afundado);
}

/* `cover` e não `contain`: retrato cortado no quadrado é o que todo mundo
 * espera de foto de perfil — encaixado com barra branca dos lados, não. */
.perfil__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.perfil__foto-campos {
  flex: 1 1 auto;
  min-width: 0;                 /* deixa o campo encolher no celular */
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  align-items: flex-start;
}

.perfil__foto-campos .campo { width: 100%; margin-bottom: 0; }

@media (max-width: 40rem) {
  .perfil__foto {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .perfil__foto-campos { align-items: stretch; }
}

/* O avatar do topo quando existe foto: mesmo tamanho e mesmo recorte do que já
 * havia com as iniciais, para a barra não mudar de altura ao subir uma foto. */
.avatar--com-foto { overflow: hidden; padding: 0; }

.avatar__imagem {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

/* A remoção da foto mora fora do formulário (form aninhado é HTML inválido),
 * mas pertence visualmente ao bloco da foto — daí a linha que a separa das
 * ações do formulário. */
.perfil__remocao {
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--cor-borda);
}