/* Projects Section - Carrossel horizontal com 2 cards */

.projects-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc(28% - 10px);
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 1rem 0;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.projects-carousel::-webkit-scrollbar {
  display: none; /* Chrome/Safari/Opera */
}

.project-card {
  scroll-snap-align: start;
  border-radius: 20px !important;
  overflow: hidden !important;
  border: none !important;
  transition: all 0.4s ease;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  background: linear-gradient(135deg, rgba(30, 30, 60, 0.6), rgba(50, 30, 80, 0.4)) !important;
  min-height: 280px !important;
  max-height: 280px !important;
  height: 280px !important;
}

.project-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 60px rgba(147, 51, 234, 0.5);
}

.project-card img {
  border-top-left-radius: 19px !important;
  border-top-right-radius: 19px !important;
}

/* Overlay com transições para fade in/out */
.pip-overlay {
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(0px);
  background-color: rgba(0, 0, 0, 0) !important;
  z-index: 9999;
  opacity: 0;
  perspective: 1500px;
  transition: opacity 0.6s ease, backdrop-filter 0.6s ease, background-color 0.6s ease, visibility 0s linear 0.6s;
}

.pip-overlay.show {
  visibility: visible;
  opacity: 1;
  backdrop-filter: blur(12px);
  background-color: rgba(0, 0, 0, 0.5) !important;
  transition: opacity 0.6s ease, backdrop-filter 0.6s ease, background-color 0.6s ease;
}

.pip-overlay.fade-out {
  opacity: 0;
  backdrop-filter: blur(0px);
  background-color: rgba(0, 0, 0, 0) !important;
  transition: opacity 0.5s ease, backdrop-filter 0.5s ease, background-color 0.5s ease;
}

/* Modal com animação de entrada e saída */
.pip-modal {
  opacity: 0;
  transform: scale(0.2) rotateX(90deg) rotateZ(-10deg);
  filter: blur(10px);
  transition: opacity 1.2s cubic-bezier(0.34, 1.56, 0.64, 1), 
              transform 1.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              filter 1.2s ease;
}

.pip-overlay.show .pip-modal {
  opacity: 1;
  transform: scale(1) rotateX(0deg) rotateZ(0deg);
  filter: blur(0px);
}

.pip-overlay.fade-out .pip-modal {
  opacity: 0;
  transform: scale(0.8) rotateX(-20deg) rotateZ(5deg);
  filter: blur(8px);
  transition: opacity 0.5s ease, 
              transform 0.5s cubic-bezier(0.6, 0, 0.8, 0.2),
              filter 0.5s ease;
}

/* Botão de fechar animado com círculos */
.pip-close-animated {
  width: 60px;
  height: 60px;
  position: absolute;
  right: 16px;
  top: 16px;
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  box-shadow: 0px 0px 20px 0px rgba(147, 51, 234, 0.4);
  z-index: 1000;
  display: block;
  cursor: pointer;
}

.pip-close-animated:hover {
  background-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0px 0px 30px 0px rgba(168, 85, 247, 0.6);
  transform: scale(1.05);
}

.pip-close-animated > span {
  background-color: rgba(168, 85, 247, 0.8);
  display: block;
  height: 8px;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  margin-top: -4px;
  left: 12px;
  width: 36px;
  display: flex;
  justify-content: space-between;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pip-close-animated > span span {
  display: block;
  background-color: rgb(147, 51, 234);
  width: 8px;
  height: 8px;
  border-radius: 4px;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  position: absolute;
  left: 0;
  top: 0;
}

.pip-close-animated > span.left {
  transform: rotate(45deg);
  transform-origin: center;
}

.pip-close-animated > span.left .circle-left {
  margin-left: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pip-close-animated > span.left .circle-right {
  margin-left: 28px;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pip-close-animated > span.right {
  transform: rotate(-45deg);
  transform-origin: center;
}

.pip-close-animated > span.right .circle-left {
  margin-left: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pip-close-animated > span.right .circle-right {
  margin-left: 28px;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pip-close-animated:hover > span {
  background-color: rgba(59, 130, 246, 0.8);
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pip-close-animated:hover > span span {
  background-color: rgb(37, 99, 235);
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pip-close-animated:hover > span.left .circle-left {
  margin-left: 28px;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pip-close-animated:hover > span.left .circle-right {
  margin-left: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pip-close-animated:hover > span.right .circle-left {
  margin-left: 28px;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.pip-close-animated:hover > span.right .circle-right {
  margin-left: 0;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* Content com scroll */
.pip-content {
  max-height: 80vh;
  overflow-y: auto;
  overflow-x: hidden;
}

.pip-content img {
  max-width: 100%;
  max-height: 75vh;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Desktop: imagem maior */
@media (min-width: 1024px) {
  .pip-content img {
    max-width: 100%;
    max-height: 80vh;
  }
}

/* Mobile: 1 coluna */
@media (max-width: 768px) {
  .projects-carousel {
    grid-auto-columns: 100%;
  }

  /* Aumentar o container na visualização mobile: ocupar mais largura e reduzir padding interno para dar mais conteúdo visível */
  /* Ajuste direto no container interno para aumentar área visível sem mexer no espaçamento vertical da seção */
  #projetos .max-w-6xl {
    max-width: 100% !important; /* permitir usar toda a largura disponível */
    padding-left: 0 !important; /* remover paddings laterais do wrapper para não criar gaps extras */
    padding-right: 0 !important;
  }

  /* O container relativo (fundo do card) deve ocupar quase toda a largura disponível e ter padding reduzido */
  #projetos .max-w-6xl > .relative {
    width: calc(100% - 20px) !important; /* pequena margem interna */
    max-width: calc(100% - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 1rem !important; /* reduz p-8 para algo mais compacto */
    border-radius: 18px !important;
  }

  .pip-content {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  .pip-content img {
    max-height: calc(100vh - 120px);
  }

  .pip-window {
    max-height: 95vh !important;
  }

  /* Reduzir espaçamento vertical da seção no mobile para aproximar das seções adjacentes */
  #pacotes, #servicos, #projetos {
    padding-top: 0.75rem !important; /* reduzir bastante o espaçamento vertical */
    padding-bottom: 0.75rem !important;
  }
}

/* Desktop: mostrar setas dentro do container (embaixo) */
@media (min-width: 769px) {
  #projectsPrevBottom, #projectsNextBottom {
    position: absolute !important; /* Mudar de fixed para absolute */
    top: 42% !important; /* subir mais (antes 46%) */
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 40 !important;
    opacity: 0.95 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 16px rgba(0,0,0,0.22) !important; /* sombra mais suave */
    background-color: rgba(88, 101, 242, 0.92) !important; /* menos saturado */
    border-radius: 12px !important; /* mais arredondado para suavizar */
  }

  #projectsPrevBottom { left: 12px !important; }
  #projectsNextBottom { right: 12px !important; }

  /* manter padding lateral do carrossel natural (sem deslocamento global) */
  .projects-carousel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.pip-overlay.show {
  display: flex !important;
}

@media (max-width: 768px) {
  .pip-window {
    width: 100% !important;
    height: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
  }
  
  .pip-controls {
    bottom: 20px;
    top: auto;
    left: 50%;
    transform: translateX(-50%) !important;
  }
}

/* Mobile fixes: esconder setas superiores e ajustar setas inferiores fixas */
@media (max-width: 768px) {
  /* botões superiores foram removidos do markup em deploy; não é necessário esconder via CSS */

  /* garantir as setas inferiores sempre visíveis e responsivas (maiores no mobile), posicionadas dentro do container */
  #projectsPrevBottom, #projectsNextBottom {
    position: absolute !important;
    top: 42% !important; /* subir mais no mobile também */
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 44px !important; /* tamanho reduzido no mobile também */
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    z-index: 40 !important;
    opacity: 0.95 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 6px 14px rgba(0,0,0,0.2) !important; /* sombra mais suave */
    background-color: rgba(88, 101, 242, 0.9) !important;
    border-radius: 10px !important;
  }

  #projectsPrevBottom { left: 10px !important; }
  #projectsNextBottom { right: 10px !important; }

  /* aumentar levemente o espaço e tamanho dos cards no mobile */
  .projects-carousel {
    grid-auto-columns: 95% !important;
    gap: 28px !important;
    padding-bottom: 110px !important;
  }

  .project-card img {
    height: 160px !important;
    object-fit: cover !important;
  }

  .project-card {
    padding: 1rem !important;
  }

  /* ícone reduzido para combinar com botões menores */
  #projectsPrevBottom i, #projectsNextBottom i { transform: scale(0.92); }

  /* interação delicada no hover/focus */
  #projectsPrevBottom:hover, #projectsNextBottom:hover,
  #projectsPrevBottom:focus, #projectsNextBottom:focus {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18) !important;
  }
}