/* ===================================
   CORREÇÕES MOBILE - PÁGINA SOBRE
   Data: 14/11/2025
   =================================== */

/* ===================================
   CARROSSEL EQUIPE - MOBILE OTIMIZADO
   Mostra apenas 1 foto por vez
   =================================== */
@media (max-width: 768px) {
  .equipe-carousel-section {
    min-height: 520px !important;
    padding: 0 10px;
  }

  .equipe-carousel-section h2 {
    font-size: 24px !important;
    margin-bottom: 30px !important;
  }

  /* Container - Apenas 1 foto centralizada */
  .equipe-carousel-container {
    height: 320px !important;
    margin-bottom: 25px !important;
    gap: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    max-width: 100% !important;
    padding: 0 70px !important; /* Espaço para botões */
    overflow: hidden !important;
    position: relative !important;
  }

  /* Esconder TODAS as fotos exceto a ativa */
  .equipe-slide.prev-2,
  .equipe-slide.next-2,
  .equipe-slide.hidden-left,
  .equipe-slide.hidden-right,
  .equipe-slide.prev,
  .equipe-slide.next {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
  }

  /* Apenas a foto central (active) visível */
  .equipe-slide.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: scale(1) !important;
    z-index: 3 !important;
    margin: 0 auto !important;
    position: relative !important;
  }

  .equipe-slide.active img {
    width: 220px !important;
    height: 320px !important;
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.25)) !important;
    border-radius: 8px !important;
  }

  /* Container de informações */
  .equipe-info-container {
    padding: 20px 20px !important;
    max-width: 95% !important;
    min-height: 150px !important;
    margin: 0 auto !important;
  }

  .equipe-info h3 {
    font-size: 20px !important;
    margin-bottom: 6px !important;
  }

  .equipe-info span {
    font-size: 13px !important;
    margin-bottom: 12px !important;
  }

  .equipe-info p {
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    max-width: 100% !important;
  }

  /* Botões de navegação */
  .equipe-nav {
    width: 45px !important;
    height: 45px !important;
    font-size: 28px !important;
  }

  .equipe-nav.prev {
    left: 5px !important;
  }

  .equipe-nav.next {
    right: 5px !important;
  }
}

/* ===================================
   MOBILE PEQUENO (<480px)
   =================================== */
@media (max-width: 480px) {
  .equipe-carousel-section {
    min-height: 500px !important;
  }

  .equipe-carousel-section h2 {
    font-size: 22px !important;
    margin-bottom: 25px !important;
  }

  .equipe-carousel-container {
    height: 280px !important;
    padding: 0 60px !important;
  }

  /* Foto única - tamanho ajustado para telas pequenas */
  .equipe-slide.active img {
    width: 190px !important;
    height: 280px !important;
  }

  .equipe-info-container {
    padding: 18px 15px !important;
    min-height: 140px !important;
  }

  .equipe-info h3 {
    font-size: 18px !important;
  }

  .equipe-info span {
    font-size: 12px !important;
  }

  .equipe-info p {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .equipe-nav {
    width: 40px !important;
    height: 40px !important;
    font-size: 24px !important;
  }

  .equipe-nav.prev {
    left: 3px !important;
  }

  .equipe-nav.next {
    right: 3px !important;
  }
}

/* ===================================
   GALERIA - MOBILE OTIMIZADO
   =================================== */
@media (max-width: 768px) {
  .galeria {
    padding: 40px 15px !important;
    margin: 60px 0 !important;
  }

  .galeria-carousel-wrapper {
    max-width: 100% !important;
    min-height: 400px !important;
  }

  /* Mosaico mobile - Layout simplificado */
  .galeria-mosaic {
    max-width: 100% !important;
    height: 350px !important;
    position: relative !important;
  }

  /* Ajustar posições para mobile - Grid 2x4 */
  .galeria-mosaic .img-1 {
    width: 45% !important;
    height: 160px !important;
    top: 10px !important;
    left: 2.5% !important;
    transform: rotate(-2deg) !important;
    z-index: 2 !important;
  }

  .galeria-mosaic .img-2 {
    width: 45% !important;
    height: 160px !important;
    top: 10px !important;
    right: 2.5% !important;
    left: auto !important;
    transform: rotate(2deg) !important;
    z-index: 2 !important;
  }

  .galeria-mosaic .img-3 {
    width: 45% !important;
    height: 160px !important;
    top: 180px !important;
    left: 2.5% !important;
    transform: rotate(2deg) !important;
    z-index: 1 !important;
  }

  .galeria-mosaic .img-4 {
    width: 45% !important;
    height: 160px !important;
    top: 180px !important;
    right: 2.5% !important;
    left: auto !important;
    transform: rotate(-2deg) !important;
    z-index: 1 !important;
  }

  /* Esconder fotos extras no mobile (mostrar só 4 por página) */
  .galeria-mosaic .img-5,
  .galeria-mosaic .img-6,
  .galeria-mosaic .img-7,
  .galeria-mosaic .img-8 {
    display: none !important;
  }

  /* Botões navegação galeria */
  .galeria-nav {
    width: 45px !important;
    height: 45px !important;
    font-size: 22px !important;
  }

  .galeria-nav.prev {
    left: 10px !important;
  }

  .galeria-nav.next {
    right: 10px !important;
  }

  .galeria-dots {
    bottom: -35px !important;
  }
}

@media (max-width: 480px) {
  .galeria-mosaic {
    height: 320px !important;
  }

  .galeria-mosaic .img-1,
  .galeria-mosaic .img-2 {
    height: 145px !important;
  }

  .galeria-mosaic .img-3,
  .galeria-mosaic .img-4 {
    top: 165px !important;
    height: 145px !important;
  }

  .galeria-nav {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }

  .galeria-nav.prev {
    left: 5px !important;
  }

  .galeria-nav.next {
    right: 5px !important;
  }
}

/* ===================================
   TOUCH IMPROVEMENTS
   =================================== */
@media (hover: none) and (pointer: coarse) {
  /* Feedback visual ao tocar nos botões */
  .equipe-nav:active,
  .galeria-nav:active {
    transform: translateY(-50%) scale(0.95) !important;
    background: var(--brand) !important;
    color: white !important;
  }

  /* Desabilitar hover effects */
  .galeria-mosaic img:hover {
    transform: none !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  }

  .equipe-nav:hover,
  .galeria-nav:hover {
    transform: translateY(-50%) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    color: var(--brand) !important;
  }
}