/* ============================================= */
/* CONTAINER PRINCIPAL (SEM BACKGROUND) */
/* ============================================= */
.cards-com-fotos-container {
  padding: 60px 20px;
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
}

/* Remove a barra de scroll visual */
.cards-com-fotos-container::-webkit-scrollbar {
  display: none;
}

/* ============================================= */
/* LAYOUT DOS CARDS - MESMA LINHA SEMPRE */
/* ============================================= */
.cards-com-fotos-wrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 30px;
  min-width: min-content;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  scroll-snap-type: x proximity;
}

/* Lógica de largura proporcional */
.card-com-foto {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  flex: 1 1 0;
  min-width: calc((100% - (30px * ( - 1))) / );
  scroll-snap-align: start;
}

/* ============================================= */
/* ESTILOS DA IMAGEM */
/* ============================================= */
.card-image-container {
  width: 100%;
  height: px;
  overflow: hidden;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  will-change: transform;
}

.card-com-foto:hover .card-image {
  transform: scale(1.03);
}

/* ============================================= */
/* ESTILOS DO TÍTULO */
/* ============================================= */
.card-title {
  font-size: 23px;
  color: #007db5;
  font-family: inherit;
  margin: 0;
  line-height: 1.3;
  padding: 0 20px;
  font-weight: 500;
  text-align: center;
}

/* ============================================= */
/* ESTILOS DO LINK */
/* ============================================= */
.card-link {
  display:inline-
  padding: 8px 16px;
  color: #007db5;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  margin: 0 auto 20px;
  transition: all 0.3s ease;
  text-align: center;
  max-width: max-content;
}

.card-link:hover {
  color: #005f87;
  text-decoration: underline;
}

/* ============================================= */
/* CONTEÚDO DO CARD */
/* ============================================= */
.card-content {
  padding: 20px 0 0;
  font-family: inherit;
  text-align: center;
}

/* ============================================= */
/* COMPORTAMENTO POR QUANTIDADE DE CARDS */
/* ============================================= */
/* 1 Card - Ocupa 100% */
.card-com-foto:only-child {
  flex: 1 1 100%;
  max-width: 100%;
}

/* 2 Cards - 50% cada */
.card-com-foto:nth-last-child(2):first-child,
.card-com-foto:nth-last-child(2):first-child ~ .card-com-foto {
  flex-basis: calc(50% - 15px);
}

/* 6 Cards - 16.66% cada */
.card-com-foto:nth-last-child(6):first-child,
.card-com-foto:nth-last-child(6):first-child ~ .card-com-foto {
  flex-basis: calc(16.666% - 25px);
}

/* ============================================= */
/* RESPONSIVIDADE - TABLET (768px a 1024px) */
/* ============================================= */
@media (min-width: 768px) and (max-width: 1024px) {
  .cards-com-fotos-wrapper {
    gap: 20px;
  }
  
  .card-title {
    font-size: 16px;
    margin-bottom: 12px;
    padding: 0 15px;
  }
  
  .card-link {
    font-size: 15px;
    padding: 6px 12px;
    margin-bottom: 15px;
  }
  
  .card-content {
    padding-top: 15px;
  }
  
  .card-image-container {
    height: px;
  }
}

/* ============================================= */
/* RESPONSIVIDADE - MOBILE (até 767px) */
/* ============================================= */
@media (max-width: 767px) {
  .cards-com-fotos-wrapper {
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .card-com-foto {
    flex: 0 0 calc(50% - 8px); /* 2 cards por linha */
    min-width: calc(50% - 8px);
    margin-bottom: 15px;
  }
  
  .cards-com-fotos-container {
    padding: 30px 15px;
    overflow-x: hidden;
  }
  
  .card-title {
    font-size: 23px;
    padding: 0 15px;
    margin-bottom: 10px;
  }
  
  .card-link {
    font-size: 14px;
    padding: 6px 12px;
    margin-bottom: 15px;
  }
  
  .card-image-container {
    height: px;
  }
  
  /* Garante 1 card por linha em telas muito pequenas */
  @media (max-width: 480px) {
    .card-com-foto {
      flex: 0 0 100%;
      min-width: 100%;
    }
  }
}
/* Desativa interações durante a animação */
.card-com-foto[data-aos] {
  pointer-events: none;
}

/* Reativa interações quando animação completa */
.card-com-foto[data-aos].aos-animate {
  pointer-events: auto;
}

/* Otimizações de performance */
.card-com-foto {
  will-change: transform, opacity;
  backface-visibility: hidden;
}