/* Estilização básica do cabeçalho */
header {
  padding-block: 32px; /* Espaço acima e abaixo do <header> */
}

/* Container principal que agrupa a imagem de perfil e as informações */
#profile {
  display: flex; /* Layout em linha (horizontal) com Flexbox */
  align-items: stretch; /* Faz os elementos filhos ocuparem a mesma altura */
  gap: 32px; /* Espaço entre a imagem e o conteúdo do perfil */
  padding-block: 32px; /* Espaçamento vertical interno */
}

/* Estilização da imagem de perfil */
#profile img {
  width: 120px;
  height: 120px;
  border-radius: 50%; /* Torna a imagem circular */
  object-fit: cover; /* Garante que a imagem preencha todo o espaço sem distorcer */
  flex-shrink: 0; /* Impede que a imagem encolha quando o container for redimensionado */
  align-self: center; /* Centraliza a imagem verticalmente dentro do container pai */
}

/* Agrupa o conteúdo textual e a lista de informações à direita da imagem */
.profile-content {
  display: flex; /* Deixa os elementos (bio + infos) lado a lado */
  justify-content: space-between; /* Coloca um no início e outro no fim */
  align-items: center; /* Alinha verticalmente ao centro */
  width: 100%; /* Ocupa toda a largura restante do container */
}

/* Bloco com nome e descrição do usuário */
.bio {
  max-width: 600px; /* Limita a largura máxima do texto para melhor leitura */
}

/* Nome do usuário */
.bio h1 {
  font: var(--text-lg); /* Usa fonte grande, definida na variável */
  color: var(--text-color-primary); /* Cor escura para dar destaque */
  margin: 0 0 8px 0; /* Espaçamento abaixo do título */
}

/* Descrição do perfil */
.bio p {
  font: var(--text-md); /* Fonte média, ideal para textos descritivos */
  color: var(--text-color-secondary); /* Cor mais suave */
  line-height: 1.5; /* Espaçamento entre linhas para facilitar a leitura */
  margin: 0; /* Remove espaçamentos padrão */
}

/* Lista com as informações adicionais: localização, status, número de fotos */
#Info {
  list-style: none; /* Remove os marcadores da lista */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column; /* Organiza os itens verticalmente */
  gap: 12px; /* Espaço entre os itens */
  min-width: 200px; /* Garante uma largura mínima para o conteúdo da lista */
}

/* Estiliza cada item da lista */
#Info li {
  display: flex; /* Deixa o ícone e o texto lado a lado */
  align-items: center; /* Alinha verticalmente os itens */
  gap: 8px; /* Espaço entre o ícone e o texto */
  font: var(--text-sm); /* Usa fonte pequena */
  color: var(--text-color-secondary); /* Cor de texto mais suave */
}

/* Estiliza os ícones dentro da lista */
#Info li img {
  width: 16px;
  height: 16px;
  object-fit: contain; /* Garante que o ícone mantenha proporção e preencha corretamente */
}