/* Hotfix: garantir que setas e CTA não quebrem layout no mobile */
@media (max-width: 768px) {
  .gcp-slider { 
    width: 100% !important; 
    max-width: 100vw !important; 
    margin: 0 auto !important; 
    overflow: hidden; 
  }
  .gcp-slider .gcp-slider-track { 
    width: 100% !important; 
  }
  .gcp-slider .gcp-frame {
    width: 100% !important;
    margin: 0 !important;
  }
  .gcp-slider .gcp-nav-btn {
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
  }
  .gcp-hero .gcp-bottom-section { flex-wrap: wrap; gap: 8px; }
  .gcp-hero .gcp-cta { max-width: 70%; }

  /* Garantir 16:9 no container de imagem e centralizar */
  .gcp-image-container { 
    position: relative; 
    width: 100% !important; 
    aspect-ratio: 16/9; 
    overflow: hidden; 
  }
  .gcp-image-container > img.gcp-bg { 
    position: absolute; 
    inset: 0; 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
  }
}

/**
 * GCP Slider - Mobile & Responsive
 * Media queries e estilos específicos para mobile/tablet
 */

/* Responsive design */
@media (max-width: 1024px) {
    /* ✅ TABLET: FULL WIDTH - SETAS FICAM FORA COM MARGENS NEGATIVAS */
    .gcp-slider {
        margin: 0 0 50px 0; /* Apenas margem inferior para dots */
        width: 100%; /* Largura total da página */
    }
    
    .gcp-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        min-height: auto;
    }
    
    .gcp-side {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 16px;
    }
    
    .gcp-hero {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }
    
    .gcp-card {
        min-height: 0;
    }
    
    .gcp-content {
        inset: auto 20px 20px 20px;
        gap: 10px;
    }
    
    .gcp-nav-btn {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }
    
    /* ✅ TABLET: Setas centralizadas com posição fixa */
    .gcp-prev {
        left: -60px !important; /* Fora do slider para tablet */
        top: 200px !important; /* Centralizada verticalmente - tablet */
    }
    
    .gcp-next {
        right: -60px !important; /* Fora do slider para tablet */
        top: 200px !important; /* Centralizada verticalmente - tablet */
    }
    
    .gcp-dots {
        bottom: -40px; /* Posição correta para tablet */
    }
}

/* ✅ Overrides adicionais para tablet */
@media (max-width: 1024px) {
  .gcp-grid {
      grid-template-columns: 2fr 1fr !important;
      gap: 20px !important;
  }
  .gcp-side {
      display: grid !important;
      grid-template-rows: 1fr 1fr !important;
      gap: 20px !important;
  }
}

@media (max-width: 768px) {
    /* ✅ MOBILE: FULL WIDTH sem setas laterais */
    .gcp-slider {
        margin: 0 0 40px 0; /* FULL WIDTH + margem inferior para dots */
        width: 100%;
    }
    
    /* ✅ MOBILE: Esconder setas laterais */
    .gcp-prev, .gcp-next {
        display: none !important;
    }
    
    /* ✅ CONTAINER FIXO - NUNCA SOME (como um deck de cartas) */
    .gcp-grid {
        display: block !important;
        padding: 0;
        position: relative !important;
        min-height: 0 !important;
        width: 100% !important;
        /* ✅ Container sempre visível - base para empilhamento */
        background: transparent !important;
        overflow: visible !important; /* ✅ Tags podem aparecer fora do container */
    }
    
    .gcp-side {
        display: block !important;
        position: relative !important;
        grid-template-rows: none !important;
        grid-template-columns: none !important;
        min-height: 0 !important;
        width: 100% !important;
        /* ✅ Base para empilhamento de cards */
    }
    
    /* ✅ CARDS INDIVIDUAIS: Mostrar apenas o ativo */
    .gcp-card {
        width: 100% !important;
        height: auto !important;
        position: absolute !important; /* empilhado no mesmo ponto */
        top: 0 !important;
        left: 0 !important;
        overflow: visible !important; /* ✅ Tags podem sair do card */
    }
    
    .gcp-hero {
        min-height: 0;
    }
    
    .gcp-card {
        min-height: 0;
    }
    
    .gcp-content {
        inset: auto 16px 16px 16px;
        gap: 8px;
    }
    
    /* ✅ MOBILE: Textos menores */
    .gcp-title {
        font-size: clamp(16px, 4.5vw, 22px) !important;
    }
    
    .gcp-hero .gcp-title {
        font-size: clamp(18px, 5.5vw, 26px) !important;
    }
    
    .gcp-subtitle {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    /* CTA menor com ícone ajustado */
    .gcp-cta {
        padding: 8px 14px !important;
        font-size: 12px !important;
    }
    
    /* ✅ ÍCONE MENOR NO MOBILE */
    .gcp-cta::before {
        width: 16px !important; /* ✅ Ícone menor no mobile */
        height: 16px !important;
    }

    /* Badge de desconto menor */
    .gcp-discount-badge, .gcp-badge {
        font-size: 10px !important;
        padding: 4px 6px !important;
    }

    /* ✅ HERO: Tag posicionada no topo, fora da imagem */
    .gcp-kicker-hero-inline,
    .gcp-kicker-moved {
        position: absolute !important;
        top: 0px !important; /* ancora na borda superior */
        left: 16px !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0px !important;
        z-index: 40 !important;
        transform: translateY(calc(-50% + 6px)) !important; /* ajuste fino: desce 6px para centralizar melhor */
    }
    
    /* ✅ Garantir overflow visível no hero */
    .gcp-hero {
        overflow: visible !important;
    }

    /* ✅ LATERAIS: Garantir que não corte */
    .gcp-kicker-side-top,
    .gcp-kicker-side-bottom {
        top: -12px !important; /* Menos para fora para não cortar */
        left: 16px !important;
        z-index: 20 !important;
    }

    /* ✅ MOBILE: Kicker menor (tamanho e tipografia) */
    .gcp-kicker {
        border-radius: 6px !important; /* arredondado mais suave nos cards laterais */
        font-size: 9px !important;
        padding: 2px 6px !important;
        letter-spacing: 0.2px !important;
    }
    
    /* ✅ MOBILE: Ocultar cupom */
    .gcp-coupon,
    .gcp-coupon-hero,
    .gcp-coupon-side {
        display: none !important;
    }
    
    .gcp-meta {
        gap: 8px;
    }
    
    /* ✅ MOBILE: Layout setas + dots lado a lado */
    .gcp-slider {
        position: relative;
        margin-bottom: 0 !important; /* sem espaço extra abaixo do slide */
    }
    
    /* Container para navegação centralizada */
    .gcp-mobile-nav {
        position: absolute; /* fixa logo abaixo do conteúdo do slider */
        left: 50%;
        transform: translateX(-50%);
        bottom: 20px; /* ainda mais próximo do slide */
        display: flex;
        align-items: center;
        justify-content: center; /* dots centralizados */
        gap: 12px; /* espaço entre setas e dots */
        width: auto;
        z-index: 10;
        pointer-events: auto;
    }
    
    .gcp-nav-btn {
        position: static !important;
        width: 28px;
        height: 28px;
        font-size: 12px;
        border-radius: 50%;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }
    
    .gcp-dots {
        display: flex;
        gap: 8px;
        margin: 0;
        justify-content: center;
        align-items: center;
        flex: 0 1 auto;
    }
    
    /* ✅ MOBILE: Cards laterais ocupam toda largura quando ativos */
    .gcp-card.is-active {
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 9 !important;
    }
    
    .gcp-dot {
        width: 8px !important;
        height: 8px !important;
        min-width: 8px !important;
        min-height: 8px !important;
        max-width: 8px !important;
        max-height: 8px !important;
        margin: 0 2px !important;
    }
}

/* ✅ MOBILE: EMPILHAMENTO DE CARDS - COMO DECK DE CARTAS */
@media (max-width: 768px) {
  /* ✅ PREPARAR CARDS PARA MOBILE: SÓ transição */
  .gcp-slider .gcp-frame .gcp-card,
  .gcp-slider .gcp-grid .gcp-card,
  .gcp-slider .gcp-hero,
  .gcp-slider .gcp-side .gcp-card {
      /* ✅ APENAS transição - SEM forçar opacity 0 */
      transition: opacity 0.6s ease-in-out !important;
      will-change: opacity !important;
      transform: translateZ(0) !important;
  }
  
  /* ✅ CARD ATIVO */
  .gcp-slider .gcp-mobile-card-active {
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
      z-index: 2 !important; /* topo */
  }

  /* ✅ CARD OCULTO (continua no fluxo para crossfade) */
  .gcp-slider .gcp-mobile-card-hidden {
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      z-index: 1 !important;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .gcp-slider-track {
        transition: none;
    }
    
    .gcp-card {
        transition: none;
    }
    
    .gcp-bg {
        transition: none;
    }
    
    .gcp-content > * {
        animation: none;
    }
    
    .gcp-card:hover {
        transform: none;
    }
    
    .gcp-card:hover .gcp-bg {
        transform: none;
    }
    
    /* ✅ Desabilita transições suaves para quem prefere menos movimento */
    .gcp-slider .gcp-frame {
        transition: none !important;
    }
    
    .gcp-slider .gcp-frame.is-active {
        transition: none !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .gcp-overlay {
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.9) 70%);
    }
    
    .gcp-nav-btn {
        background: rgba(0, 0, 0, 0.9);
        border: 2px solid #ffffff;
    }
    
    .gcp-dot {
        border: none !important;
    }
}

/* Print styles */
@media print {
    .gcp-slider {
        break-inside: avoid;
    }
    
    .gcp-nav-btn,
    .gcp-dots {
        display: none;
    }
}