/* Container principal do card do Instagram */
.instagram-profile-card {
  width: 100%;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  background-color: #fff;
  overflow: hidden; /* Garante que tudo dentro do card respeite o border-radius */
}

/* Estilos para o cabeçalho do perfil */
.profile-header {
  display: flex;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #f0f0f0;
  position: relative; /* Para posicionar o ícone do Instagram */
}

.profile-avatar-wrapper {
  flex-shrink: 0; /* Impede que o avatar encolha */
  margin-right: 15px;
}

.profile-avatar {
  width: 80px; /* Tamanho do avatar */
  height: 80px;
  border-radius: 50%; /* Torna o avatar redondo */
  object-fit: cover; /* Garante que a imagem preencha o círculo */
  border: 1px solid #eee;
}

.profile-info {
  flex-grow: 1; /* Permite que o info cresça */
}

.profile-username {
  font-size: 1.1em;
  font-weight: 600;
  color: #262626;
  display: block; /* Para que o nome e o ícone fiquem na mesma linha */
}

.instagram-icon-top {
  position: absolute;
  top: 20px;
  right: 20px;
}

.instagram-icon-top img {
  width: 24px; /* Tamanho do ícone do Instagram no topo */
  height: 24px;
}

.profile-name {
  font-size: 0.9em;
  color: #8e8e8e;
  margin-top: 2px;
  margin-bottom: 5px;
}

.profile-stats {
  font-size: 0.85em;
  color: #262626;
  margin: 0;
  line-height: 1.4;
}

.profile-stats .stat-item {
  font-weight: 500;
  margin-right: 10px;
}

/* Estilos para a grade de posts */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 colunas de igual largura */
  gap: 2px; /* Pequeno espaçamento entre as imagens */
  padding: 2px; /* Preenchimento para que as imagens não encostem nas bordas */
  background-color: #f0f0f0; /* Cor de fundo para o espaçamento */
}

.insta-grid-item {
  display: block; /* Para garantir que o link ocupe todo o espaço */
  overflow: hidden; /* Esconde qualquer parte da imagem que exceda o container */
}

.posts-grid img {
  width: 100%;
  height: 200px; /* Altura fixa para os posts para criar um mosaico */
  object-fit: cover; /* Garante que a imagem preencha o espaço sem distorcer */
  display: block; /* Remove espaçamentos extras de imagem */
  transition: transform 0.2s ease-in-out; /* Transição para o efeito hover */
}

.insta-grid-item:hover img {
  transform: scale(1.05); /* Efeito de zoom ao passar o mouse */
}

/* Estilos para o botão inferior */
.profile-button-wrapper {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
}

.profile-button {
  display: inline-block;
  background-color: #0095f6; /* Cor azul padrão do Instagram */
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 0.95em;
  font-weight: 600;
  transition: background-color 0.2s ease-in-out;
}
.profile-button a {
  color: #fff;
}

.profile-button:hover {
  background-color: #0077b5; /* Cor azul mais escura ao passar o mouse */
}

/* Responsividade básica (ajuste conforme necessário) */
@media (max-width: 400px) {
  .instagram-profile-card {
    width: 100%; /* Ocupa toda a largura em telas menores */
    border-radius: 0;
  }
}