/* ============================================================= */
/* PORTFÓLIO – TEXTO + FUNDO FIXOS NO ÚLTIMO 1/5 DA IMAGEM (20%) */
/* Versão corrigida e forçada – funciona mesmo com CSS antigo   */
/* ============================================================= */

.work-thumb {
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  box-shadow: 0 15px 30px -10px rgba(0,0,0,0.1);
}

.work-thumb img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border: 10px solid #fff !important;
  transition: transform 0.4s ease !important;
}

/* Remove completamente qualquer ::before antigo que atrapalhe */
.work-thumb::before {
  display: none !important;
}

/* Fundo opaco preto fixo nos últimos 20% */
.work-thumb::after {
  content: "" !important;
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  height: 20% !important;                    /* exatamente 1/5 */
  background: rgba(149, 149, 149, 0.88) !important;
  z-index: 1 !important;
  transition: background 0.4s ease !important;
  pointer-events: none !important;
}

/* Caixa do texto – forçada no mesmo lugar do fundo */
.work-thumb .work-text {
  position: absolute !important;
  left: 10px !important;
  right: 10px !important;
  bottom: 10px !important;
  height: 20% !important;                    /* exatamente 1/5 */
  margin: 0 !important;
  padding: 12px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  z-index: 2 !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  top: auto !important;
}

/* Título e parágrafo – estilo limpo */
.work-thumb .work-text h2,
.work-thumb .work-text p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8) !important;
}

.work-thumb .work-text h2 {
  color: #fff !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
}

.work-thumb .work-text p {
  color: #ddd !important;
  font-size: 0.8rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.8px !important;
  margin-top: 4px !important;
}

/* Hover */
.work-thumb:hover img {
  transform: scale(1.1) !important;
}

.work-thumb:hover::after {
  background: rgba(111, 66, 193, 0.95) !important; /* roxo do tema */
}

.work-thumb:hover .work-text h2,
.work-thumb:hover .work-text p {
  color: #fff !important;
}


<style>
.carrossel-container {
  width: 100%;
  max-width: 1200px;
  margin: 60px auto;
  background: #000;
  border: 12px solid #fff;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.carrossel {
  width: 100%;
  height: 100%;
  position: relative;
}
.carrossel-slide {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  transition: opacity 1.8s ease;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carrossel-slide.ativo { opacity: 1; z-index: 2; }
.carrossel-slide img,
.carrossel-slide video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.carrossel-slide video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.carrossel-legenda {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: white;
  padding: 10px 25px;
  border-radius: 30px;
  font-family: 'Abril Fatface', serif;
  font-size: 1.1rem;
  z-index: 10;
  opacity: 0;
  transition: opacity 1s;
}
.carrossel-legenda.ativo { opacity: 1; }
</style>

<script>
// Função que cria um carrossel em qualquer div com data-pasta
document.addEventListener("DOMContentLoaded", function() {
  document.querySelectorAll('.carrossel-projeto').forEach(container => {
    const pasta = container.getAttribute('data-pasta');
    if (!pasta) return;

    // Cria estrutura
    container.innerHTML = `
      <div class="carrossel-container">
        <div class="carrossel"></div>
        <div class="carrossel-legenda">Carregando...</div>
      </div>
    `;

    const carrossel = container.querySelector('.carrossel');
    const legenda = container.querySelector('.carrossel-legenda');
    let slides = [];
    let indice = 0;
    let timer;

    fetch(`lista-arquivos.php?pasta=${encodeURIComponent(pasta)}`)
      .then(r => r.json())
      .then(data => {
        if (data.error || data.total === 0) {
          container.innerHTML = `<p style="text-align:center; color:#999; padding:50px;">Pasta não encontrada ou vazia: <strong>${pasta}</strong></p>`;
          return;
        }

        slides = data.arquivos;

        slides.forEach(item => {
          const div = document.createElement('div');
          div.className = 'carrossel-slide';

          if (item.tipo === 'imagem') {
            const img = document.createElement('img');
            img.src = item.url;
            img.alt = item.nome;
            div.appendChild(img);
          } else {
            const video = document.createElement('video');
            video.src = item.url;
            video.muted = true;
            video.loop = true;
            video.playsInline = true;
            div.appendChild(video);

            div.addEventListener('transitionend', () => {
              if (div.classList.contains('ativo') && video.paused) {
                video.play().catch(() => {});
              }
            });
          }
          carrossel.appendChild(div);
        });

        mostrarSlide(0);
        timer = setInterval(proximo, 6000);
      });

    function mostrarSlide(n) {
      carrossel.querySelectorAll('.carrossel-slide').forEach(s => s.classList.remove('ativo'));
      carrossel.children[n].classList.add('ativo');
      legenda.textContent = slides[n].nome.replace(/\.[^.]+$/, '').replace(/_/g, ' ');
      legenda.classList.add('ativo');
    }

    function proximo() {
      indice = (indice + 1) % slides.length;
      mostrarSlide(indice);
    }

    // Pausa no hover
    container.addEventListener('mouseenter', () => clearInterval(timer));
    container.addEventListener('mouseleave', () => timer = setInterval(proximo, 6000));
  });
});
</script>