/*
 * Arquivo CSS para a seção de Serviços em Destaque na página inicial.
 * Contém estilos para o layout do Swiper, cards de serviço, ícones, títulos,
 * e links de "Ver mais", incluindo animações e responsividade.
 */

/* Estilos para o layout do Swiper */
#services-swiper {
  --gap: 16px; /* Variável CSS para o espaçamento */
  padding: 4px 4px 0; /* Preenchimento interno */
}
#services-swiper .swiper-wrapper { align-items: stretch; } /* Alinha os itens do Swiper para esticar */
#services-swiper .swiper-slide { height: auto; } /* Altura automática para os slides do Swiper */

/* ====== Estilo de card ====== */
.service-card {
  outline: 1px solid var(--color-gray-300); /* Contorno do card */
  border-radius: 16px; /* Cantos arredondados */
  text-decoration: none; /* Remove sublinhado do link */
  transition: box-shadow .2s ease, transform .2s ease; /* Transição suave para hover/transform */
  height: 196px !important; /* Altura fixa do card */
  display: flex; /* Usa flexbox para alinhar o conteúdo */
  align-items: center; /* Alinha itens verticalmente */
  justify-content: center; /* Alinha itens horizontalmente */
}

/* Ajustes para mobile e tablets pequenos */
@media (max-width: 767px) {
  #services-swiper .swiper-slide {
    width: 160.72px !important; /* Largura fixa do slide para mobile */
  }
  .service-card {
    height: 164px !important; /* Altura fixa para mobile */
  }
  .service-icon {
    width: 57.78px !important; /* Largura exata do ícone */
    height: 57.97px !important; /* Altura exata do ícone */
  }
  .service-title {
    font-size: 13.12px !important; /* Tamanho exato da fonte */
    line-height: 1.2rem; /* Altura da linha ajustada */
  }
}
.service-card:hover {
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08); /* Sombra ao passar o mouse */
  transform: translateY(-2px); /* Leve movimento para cima ao passar o mouse */
}
.service-icon {
  width: 88px; /* Largura do ícone */
  height: 88px; /* Altura do ícone */
  margin-bottom: 0 !important; /* Remove margem inferior */
}
.service-title {
  font-family: var(--font-primary); /* Fonte do título */
  font-size: 16px; /* Tamanho da fonte */
  line-height: 1.3rem; /* Altura da linha */
  color: var(--color-gray-700); /* Cor do texto */
  font-weight: 400; /* Peso da fonte */
  text-align: center; /* Alinhamento do texto */
}

/* Efeito de hover para o card */
.service-card:hover {
  background: #FAFFFA; /* Cor de fundo ao passar o mouse */
  border-color: #C5C5C5; /* Cor da borda ao passar o mouse */
}
.service-card:hover .service-title {
  text-decoration: underline; /* Sublinha o título ao passar o mouse */
}

/* Efeito de clique (ativo) para o card */
.service-card:active {
  background: linear-gradient(90deg, #EEEEEE 14.54%, #D9F2EF 99.65%); /* Gradiente de fundo ao clicar */
  border-color: #C5C5C5; /* Cor da borda ao clicar */
  outline: 2px solid #C5C5C5; /* Contorno ao clicar */
}

/* Estilos para o card quando focado (acessibilidade via teclado) */
.service-card:focus-visible,
.service-card:focus {
  background: linear-gradient(90deg, #EEEEEE 14.54%, #D9F2EF 99.65%); /* Gradiente de fundo ao focar */
  outline: 2px solid #545FFF; /* Contorno azul para foco */
}

/* -------- Animação só em telas maiores ou iguais a 768px -------- */
@media (min-width: 768px) {
  .service-card {
    opacity: 0; /* Inicia com opacidade 0 */
    transform: translateY(16px); /* Inicia um pouco abaixo */
    will-change: opacity, transform; /* Otimização para animação */
  }
  #cc-home-featured-services.hfs-hidden .service-card {
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none;
  }
  #cc-home-featured-services.loading .service-card {
    opacity: 0 !important;
    pointer-events: none !important;
  }
  /* Keyframes da animação de fade-in e subida */
  @keyframes ccFadeInUp {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
  }
  /* Aplica a animação aos cards com a classe 'fade-seq' */
  .fade-seq.cc-animate-in {
    animation: ccFadeInUp .8s ease forwards; /* Animação de 0.8s */
    animation-delay: var(--cc-anim-delay, 0s); /* Atraso da animação (variável CSS) */
  }
}

/* Acessibilidade: respeita a preferência do usuário por movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .fade-seq.cc-animate-in {
    animation: none !important; /* Desativa animações */
    transition: none !important; /* Desativa transições */
    opacity: 1 !important; /* Garante opacidade total */
    transform: none !important; /* Remove transformações */
  }
}

/* Estilos para o link "Ver mais" */
.ver-mais-link {
  color: #1B7727; /* Cor do link */
  text-decoration: none !important; /* Remove sublinhado padrão */
  display: inline-flex; /* Exibe como flexbox inline */
  align-items: center; /* Alinha verticalmente texto e seta */
  gap: 4px; /* Espaço entre texto e seta */
}

/* Apenas o texto dentro do link "Ver mais" é sublinhado */
.ver-mais-link .destaque {
  text-decoration: underline !important; /* Força o sublinhado apenas no texto */
}

/* Remove o sublinhado do ícone dentro do link "Ver mais" */
.ver-mais-link i.material-icons {
  text-decoration: none !important; /* Remove o sublinhado do ícone */
  display: inline-flex; /* Garante que o ícone seja um flex item */
  align-items: center; /* Alinha o ícone verticalmente */
}