/* ============================================================
   services.css — Grade de Serviços e Diferenciais
   ============================================================ */

/* ── 8. SERVICES GRID (GRADE DE SERVIÇOS) ── */
/* Usamos CSS Grid mágico: o 'auto-fill' cria quantas colunas couberem na tela. 
   O 'minmax(260px, 1fr)' diz que cada card não pode ser menor que 260px, 
   mas se tiver espaço, ele estica (1fr) pra preencher o buraco. Isso zera a necessidade de media queries! */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: var(--max-width);
  margin-top: 3rem;
}

/* Card individual de serviço */
.service-card {
  display: flex;
  flex-direction: column; /* Faz com que imagem, título e descrição empilhem verticalmente */
  height: 100%; /* Garante que todos os cards da mesma linha fiquem da mesma altura */
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  overflow: hidden; /* Corta as pontas quadradas da imagem que vai no topo */
  text-align: left;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}

/* Efeito 'Hover' de flutuação e realce da cor */
.service-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px); /* Puxa 4px pra cima */
  box-shadow: 0 12px 36px rgba(14, 107, 168, 0.12); /* Sombra vira azulada */
}

/* A foto que encabeça cada card de serviço */
.service-card__img {
  width: 100%;
  height: auto;
  display: block; /* Tira o mini espaçamento fantasma que imagens nativamente deixam embaixo */
}

/* Animações Slide-Fade (Alternadas) ativadas pelo IntersectionObserver lá do main.js. 
   Deixamos isso apenas para mobile para não poluir quem acessa no PC (max-width: 768px). */
@media (max-width: 768px) {
  .service-card {
    opacity: 0; /* Começa invisível */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out, border-color 0.3s, box-shadow 0.3s;
  }
  
  /* Cards ímpares deslizam da esquerda pra direita */
  .service-card:nth-child(odd) {
    transform: translateX(-40px);
  }
  
  /* Cards pares deslizam da direita pra esquerda */
  .service-card:nth-child(even) {
    transform: translateX(40px);
  }
  
  /* A classe .is-visible engatilha o fade-in e zera o deslocamento, fazendo a animação "pousar" */
  .service-card.is-visible {
    opacity: 1;
    transform: translateX(0);
  }
}

.service-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-heading);
  padding: 24px 24px 8px; /* Respiro em cima, nas laterais, e só um pouquinho embaixo (8px) antes da descrição */
}

.service-card__desc {
  flex-grow: 1; /* Força a descrição a ocupar todo o espaço vazio, empurrando o fundo pra baixo pra igualar alturas */
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--color-text-body);
  padding: 0 24px 24px;
}

/* ── 9. DIFERENCIAIS GRID (Motivos para Escolher) ── */
/* Mais uma vez usando o CSS Grid mágico para dispensar Media Queries.
   Se a tela tiver 300px, fica 1 coluna. Se tiver 900px, cabem 3. Tudo automático! */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 24px;
  width: 100%;
  max-width: var(--max-width);
  margin-top: 3rem;
}

/* Item individual do diferencial (Ex: Agilidade, Limpeza) */
.diff-item {
  display: flex;
  align-items: center; /* Centraliza o ícone com o bloco de texto (título + desc) */
  gap: 16px;
  text-align: left;
  padding: 24px;
  border-radius: 16px;
  
  /* Esse bloco fica dentro de uma section escura (.section--dark), 
     então usamos fundo branco semi-transparente + blur para dar um contraste de vidro luxuoso. */
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* O "quadradinho" que guarda o ícone SVG */
.diff-item__icon {
  width: 44px;
  height: 44px;
  min-width: 44px; /* Garante que o ícone nunca seja esmagado se o texto ao lado for muito longo */
  border-radius: 10px;
  
  /* Um branco um pouco mais forte para destacar a caixa do ícone do resto do card */
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Formatação base dos ícones SVG que ficam dentro do quadrado */
.diff-item__icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--color-text-white); /* Usa a cor branca vinda da variável global */
  stroke-width: 2;
  fill: none; /* Apenas contorno, sem preenchimento */
  stroke-linecap: round; /* Bordas arredondadas nos traços do ícone */
  stroke-linejoin: round;
}

.diff-item h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-white);
  margin-bottom: 6px; /* Descola o título do texto logo abaixo */
}

.diff-item p {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.8); /* Branco a 80% pra dar hierarquia visual (o título brilha mais) */
  line-height: 1.5;
}