/* === Estilo especial para os cards da sessão clientes (testemunhos) === */

/* Removido o estilo de carrossel para um layout de grade */
.clientes-carousel-root,
.clientes-carousel-track-wrapper,
.clientes-carousel-track,
.clientes-carousel-navigation,
.clientes-carousel-button {
  /* Estas classes não são mais usadas para um carrossel, mas podem ser mantidas se houver
     outros elementos que as utilizem ou para evitar quebras de layout inesperadas
     se o HTML ainda as referenciar de alguma forma.
     Neste caso, elas foram removidas do HTML para simplificar. */
}

.clientes-card {
  /* Ajustado para se adequar a um layout de grade Bootstrap */
  background: var(--secundaria);
  border-radius: 18px;
  padding: 2em;
  box-shadow: 0 5px 25px rgba(0,0,0,0.3);
  border: 1px solid rgba(100,255,218,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  min-height: 280px; /* Altura mínima para consistência */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  /* Removido flex-basis e margin-right específicos para carrossel,
     agora o Bootstrap controla isso com as classes de coluna e g-4 */
}

.clientes-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 20px rgba(100,255,218,0.5);
}

/* Estilo do cabeçalho do card (avatar e info) */
.clientes-card .card-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.2em;
}

.clientes-card .client-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 1em;
  border: 3px solid var(--destaque);
  box-shadow: 0 0 15px rgba(100,255,218,0.4);
}

.clientes-card .client-info {
  flex-grow: 1;
  /* Removido overflow: hidden; para permitir que o texto quebre a linha */
}

.clientes-card .client-name {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--destaque);
  margin-bottom: 0.2em;
  white-space: normal; /* Garante que o nome quebre a linha se for muito longo */
  overflow: visible; /* Garante que o texto não seja cortado */
  text-overflow: clip; /* Garante que não haja reticências */
}

.clientes-card .client-title {
  font-size: 0.9em;
  color: #a3b2cc;
  white-space: normal; /* Garante que o título quebre a linha se for muito longo */
  overflow: visible; /* Garante que o texto não seja cortado */
  text-overflow: clip; /* Garante que não haja reticências */
}

/* Estilo do texto do depoimento */
.clientes-card .testimonial-text {
  font-size: 1em;
  color: var(--texto-escuro);
  line-height: 1.6;
  margin-bottom: 1.5em;
  flex-grow: 1; /* Permite que o texto ocupe o espaço restante */
  font-style: italic; /* Define o estilo da fonte para itálico */
}

/* Estilo das estrelas de avaliação (se aplicável) */
.clientes-card .rating .fas {
  color: #ffc107; /* Cor amarela para estrelas */
  margin-right: 0.2em;
}

/* Novo estilo para o rodapé social do card */
.clientes-card .card-footer-social {
  display: flex;
  justify-content: flex-end; /* Alinha os ícones à direita */
  gap: 1em; /* Espaçamento entre os ícones */
  padding-top: 1em; /* Espaçamento acima dos ícones */
  border-top: 1px solid rgba(0,230,230,0.1); /* Linha separadora sutil */
}

.clientes-card .card-footer-social a {
  color: #8892b0; /* Cor padrão dos ícones */
  font-size: 1.4em; /* Tamanho dos ícones */
  transition: color 0.3s ease, transform 0.3s ease;
}

.clientes-card .card-footer-social a:hover {
  color: var(--destaque); /* Cor de destaque no hover */
  transform: translateY(-3px); /* Efeito de elevação no hover */
}


/* Responsividade */
@media (max-width: 768px) {
  .clientes-card {
    padding: 1.5em; /* Reduz o padding em telas menores */
    min-height: auto; /* Remove altura mínima fixa em mobile para se ajustar ao conteúdo */
  }

  .clientes-card .client-avatar {
    width: 50px;
    height: 50px;
    margin-right: 0.8em;
  }

  .clientes-card .client-name {
    font-size: 1em;
  }

  .clientes-card .client-title {
    font-size: 0.8em;
  }

  .clientes-card .testimonial-text {
    font-size: 0.9em;
    margin-bottom: 1em;
  }

  .clientes-card .card-footer-social {
    justify-content: center; /* Centraliza os ícones em telas menores */
  }
}

/* Novo wrapper para o grid customizado */
.clientes-grid-wrapper {
  display: grid;
  /* 3 colunas em telas maiores, mínimo de 280px por card, preenche o espaço disponível */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem; /* Espaçamento entre os cards */
  justify-items: center; /* Centraliza os itens dentro de suas áreas de grid */
  padding: 1rem; /* Adiciona um pouco de padding ao redor do grid */
}

/* Ajusta os cards para ocuparem a largura total de sua célula de grid */
.clientes-grid-wrapper .clientes-card {
  width: 100%;
  max-width: 380px; /* Opcional: limita a largura máxima de cards individuais */
}

/* Responsividade para telas menores para o novo grid */
@media (max-width: 767.98px) {
  .clientes-grid-wrapper {
    grid-template-columns: 1fr; /* Uma única coluna em telas pequenas */
  }
  .clientes-grid-wrapper .clientes-card {
    max-width: 90%; /* Ajusta a largura máxima para uma única coluna em telas pequenas */
    margin: 0 auto; /* Centraliza o card */
  }
}