/**
 * Widget: Lista Sobreposta com Vídeo
 * Versão 1.3 - Layout 3 colunas + âncoras + validação de vídeo
 */

/* ==========================================
   VARIÁVEIS CSS
   ========================================== */
:root {
  --overlapping-transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --overlapping-card-shadow: none;
  --overlapping-card-radius: 0px;
  --overlapping-spacing-sm: 8px;
  --overlapping-spacing-md: 16px;
  --overlapping-spacing-lg: 24px;
}

/* ==========================================
   SCROLL SUAVE PARA NAVEGAÇÃO POR ÂNCORA
   ========================================== */
html {
  scroll-behavior: smooth;
}

/* ==========================================
   ESTRUTURA PRINCIPAL
   ========================================== */
.overlapping-list-video-widget {
  position: relative;
  width: 100%;
  font-family: inherit;
  min-height: auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

.overlapping-list-container {
  position: relative;
  width: 100%;
  display: block;
  overflow: visible;
}

/* ==========================================
   CARDS - ESTRUTURA BASE
   ========================================== */
.overlapping-card {
  position: -webkit-sticky !important;
  position: sticky !important;
  width: 100%;
  background-color: #ffffff;
  border-radius: var(--overlapping-card-radius);
  box-shadow: var(--overlapping-card-shadow);
  transition: var(--overlapping-transition);
  box-sizing: border-box;
  padding: 30px;
  /* margin-bottom controlado via seletor do Elementor */
  
  /* Performance */
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  
  /* ===================================================
     NOVO: Scroll margin para âncoras
     =================================================== */
  scroll-margin-top: 160px;
}

/* Scroll margin responsivo */
@media (max-width: 1024px) and (min-width: 768px) {
  .overlapping-card {
    scroll-margin-top: 140px;
  }
}

@media (max-width: 767px) {
  .overlapping-card {
    scroll-margin-top: 90px;
  }
}

/* Card fixado via ScrollTrigger (quando ScrollSmoother ativo) */
.overlapping-card.is-pinned {
  z-index: 10;
}

/* ==========================================
   LAYOUT DESKTOP/TABLET - 3 COLUNAS
   ========================================== */
@media (min-width: 768px) {
  .card-content-wrapper {
    display: grid;
    grid-template-columns: auto var(--content-width, 40%) 1fr;
    /* gap controlado via seletor do Elementor */
    align-items: start; /* CRÍTICO: Alinha todas as colunas ao topo */
  }
  
  /* COLUNA 1: Marcador Desktop */
  .card-marker-desktop {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch; /* Estende altura total da linha */
    order: 1;
  }
  
  /* COLUNA 2: Título + Descrição */
  .card-text-content {
    display: flex;
    flex-direction: column;
    gap: 0; /* Espaçamento controlado pelo title_spacing do Elementor */
    align-items: flex-start;
    align-self: start; /* Alinha ao topo */
    order: 2;
  }
  
  /* COLUNA 3: Vídeo */
  .video-container {
    display: flex;
    flex-direction: column;
    align-self: start; /* Alinha ao topo */
    order: 3;
  }
  
  /* Ocultar marcador mobile no desktop/tablet */
  .card-marker-mobile {
    display: none !important;
  }
}

/* ==========================================
   LAYOUT MOBILE - VERTICAL
   ========================================== */
@media (max-width: 767px) {
  /* Container sem padding extra no mobile */
  .overlapping-list-container {
    padding-bottom: 0 !important;
  }
  
  /* Cards sem margin-bottom extra no mobile */
  .overlapping-card {
    position: relative !important;
    margin-bottom: 30px !important; /* Espaçamento fixo no mobile */
  }
  
  .overlapping-card:last-child {
    margin-bottom: 0 !important;
  }
  
  .card-content-wrapper {
    display: flex;
    flex-direction: column;
    /* gap controlado via seletor do Elementor */
  }
  
  /* Ocultar marcador desktop no mobile */
  .card-marker-desktop {
    display: none !important;
  }
  
  /* ORDEM MOBILE: 1. Marcador → 2. Vídeo → 3. Texto */
  .video-container .card-marker-mobile {
    display: block !important;
    margin-bottom: var(--overlapping-spacing-md);
    order: 1;
  }
  
  /* Container do vídeo */
  .video-container {
    order: 2;
    display: flex;
    flex-direction: column;
  }
  
  /* Wrapper do vídeo depois do marcador */
  .video-wrapper {
    order: 2;
  }
  
  /* Conteúdo (título + descrição) por último */
  .card-text-content {
    order: 3;
    display: flex;
    flex-direction: column;
    gap: 0; /* Controlado pelo Elementor */
  }
}

/* ==========================================
   VÍDEO
   ========================================== */
.video-container {
  position: relative;
  width: 100%;
  min-height: 200px;
}

.video-wrapper {
  position: relative !important;
  width: 100% !important;
  padding-bottom: 56.25% !important; /* 16:9 default */
  overflow: hidden !important;
  background-color: #000;
  height: 0 !important;
  display: block !important;
}

.video-wrapper iframe,
.video-wrapper video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  display: block !important;
}

/* Thumbnail */
.video-thumbnail-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  cursor: pointer;
  transition: var(--overlapping-transition);
  display: block !important;
  background-color: #000;
}

.video-thumbnail {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block !important;
}

/* Play Icon */
.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
  transition: var(--overlapping-transition);
  opacity: 0.9;
}

.overlapping-card:hover .play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.1);
}

/* Esconder thumbnail quando vídeo está tocando */
.video-wrapper.playing .video-thumbnail-wrapper {
  opacity: 0;
  pointer-events: none;
}

/* ===================================================
   NOVO: ESTILOS PARA CARDS SEM VÍDEO
   =================================================== */

/* Card sem vídeo - Remove cursor pointer do thumbnail */
.overlapping-card.no-video .video-thumbnail-wrapper {
  cursor: default !important;
}

/* Card sem vídeo - Remove cursor pointer do wrapper */
.overlapping-card.no-video .video-wrapper {
  cursor: default !important;
}

/* Card sem vídeo - Oculta o ícone de play */
.overlapping-card.no-video .play-icon {
  display: none !important;
}

/* Card sem vídeo - Remove hover effect do thumbnail */
.overlapping-card.no-video:hover .video-thumbnail-wrapper {
  transform: none !important;
}

/* Card sem vídeo no modo lightbox - Remove atributos de clique */
.overlapping-card.no-video .video-wrapper.elementor-clickable {
  cursor: default !important;
  pointer-events: none;
}

/* Thumbnail sem vídeo - Apenas visual, sem interação */
.video-wrapper.no-video .video-thumbnail-wrapper {
  cursor: default !important;
  pointer-events: none;
}

/* ==========================================
   CONTEÚDO DO CARD
   ========================================== */

/* Marcador */
.card-marker {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--e-global-color-accent, #61ce70);
  transition: var(--overlapping-transition);
}

.marker-number {
  display: block;
}

/* Título */
.card-title {
  font-weight: 600;
  margin: 0;
  color: var(--e-global-color-primary, #007cba);
  transition: var(--overlapping-transition);
  line-height: 1.4;
  /* margin-bottom controlado via seletor do Elementor (title_spacing) */
}

/* Descrição */
.card-description {
  color: var(--e-global-color-text, #333333);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================
   POSICIONAMENTO DO MARCADOR - DESKTOP
   ========================================== */
@media (min-width: 768px) {
  /* Posição LEFT (padrão) */
  .marker-position-left .card-marker-desktop {
    /* margin-right controlado via seletor do Elementor (marker_spacing) */
  }
  
  /* Posição TOP */
  .marker-position-top .card-content-wrapper {
    grid-template-columns: 1fr; /* Uma única coluna */
    grid-template-rows: auto auto auto; /* 3 linhas */
  }
  
  .marker-position-top .card-marker-desktop {
    grid-column: 1;
    grid-row: 1;
    order: 1;
    /* margin-bottom controlado via seletor do Elementor (marker_spacing) */
  }
  
  .marker-position-top .card-text-content {
    grid-column: 1;
    grid-row: 2;
    order: 2;
  }
  
  .marker-position-top .video-container {
    grid-column: 1;
    grid-row: 3;
    order: 3;
  }
}

/* ==========================================
   CARDS SEMPRE VISÍVEIS (SEM ANIMAÇÕES)
   ========================================== */
.overlapping-card {
  opacity: 1 !important;
}

@media (min-width: 768px) {
  /* Estado pinned - Quando fixado via ScrollTrigger */
  .overlapping-card.is-pinned {
    opacity: 1 !important;
  }
}

/* ==========================================
   MOBILE/TABLET - SEM SOBREPOSIÇÃO
   ========================================== */
@media (max-width: 767px) {
  /* Cards sempre visíveis no mobile */
  .overlapping-card {
    opacity: 1 !important;
  }
}

/* ==========================================
   Z-INDEX SYSTEM
   ========================================== */
.overlapping-card:nth-child(1) { z-index: 10; }
.overlapping-card:nth-child(2) { z-index: 11; }
.overlapping-card:nth-child(3) { z-index: 12; }
.overlapping-card:nth-child(4) { z-index: 13; }
.overlapping-card:nth-child(5) { z-index: 14; }
.overlapping-card:nth-child(6) { z-index: 15; }
.overlapping-card:nth-child(7) { z-index: 16; }
.overlapping-card:nth-child(8) { z-index: 17; }
.overlapping-card:nth-child(9) { z-index: 18; }
.overlapping-card:nth-child(10) { z-index: 19; }

/* ==========================================
   ALTURA UNIFORME
   ========================================== */
.overlapping-list-video-widget[data-uniform-height="yes"] .overlapping-card {
  min-height: var(--uniform-card-height, 200px);
}

.overlapping-list-video-widget[data-uniform-height="yes"] .card-content-wrapper {
  height: 100%;
}

/* ==========================================
   ACESSIBILIDADE
   ========================================== */

/* Foco visível em elementos clicáveis */
.video-thumbnail-wrapper:focus,
.video-wrapper.elementor-clickable:focus {
  outline: 2px solid var(--e-global-color-accent, #61ce70);
  outline-offset: 4px;
}

/* Remove foco de elementos sem vídeo */
.overlapping-card.no-video .video-thumbnail-wrapper:focus,
.overlapping-card.no-video .video-wrapper:focus {
  outline: none;
}

/* Indicador de âncora ativa (opcional) */
.overlapping-card:target {
  animation: highlightCard 1.5s ease-in-out;
}

@keyframes highlightCard {
  0%, 100% {
    box-shadow: var(--overlapping-card-shadow);
  }
  50% {
    box-shadow: 0 0 0 3px var(--e-global-color-accent, #61ce70);
  }
}

/* Preferência de movimento reduzido */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  .overlapping-card,
  .play-icon,
  .video-thumbnail-wrapper,
  .video-lightbox-overlay {
    transition: none !important;
    animation: none !important;
  }
  
  .overlapping-list-video-widget[data-animations="yes"] .overlapping-card {
    opacity: 1 !important;
    transform: translateY(0) scale(1) translateZ(0) !important;
  }
  
  /* Remove animação de highlight para âncoras */
  .overlapping-card:target {
    animation: none !important;
  }
}

/* ==========================================
   MODO ESCURO
   ========================================== */
.elementor-editor-dark-mode .overlapping-card {
  background-color: rgba(255, 255, 255, 0.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* ==========================================
   RESPONSIVIDADE ADICIONAL
   ========================================== */
@media (max-width: 1024px) and (min-width: 768px) {
  /* Tablet: Ajustes de grid se necessário */
  .card-content-wrapper {
    grid-template-columns: auto minmax(0, var(--content-width, 40%)) 1fr;
  }
}

/* ==========================================
   UTILITÁRIOS
   ========================================== */
.video-iframe-placeholder {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.overlapping-card * {
  box-sizing: border-box;
}

/* Reset de estilos */
.card-title,
.card-description {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* ==========================================
   LIGHTBOX MODE - Cursor
   ========================================== */
.video-wrapper.elementor-clickable {
  cursor: pointer;
}

.video-wrapper.elementor-clickable:hover .video-thumbnail-wrapper {
  transform: scale(1.02);
}

/* Lightbox desabilitado em cards sem vídeo */
.overlapping-card.no-video .video-wrapper.elementor-clickable:hover .video-thumbnail-wrapper {
  transform: none !important;
}

/* ==========================================
   AJUSTES FINOS - Alinhamento Vertical
   ========================================== */
@media (min-width: 768px) {
  /* Garante que o marcador se estenda verticalmente */
  .marker-position-left .card-marker-desktop {
    display: flex;
    align-items: flex-start;
    min-height: 100%;
  }
  
  /* Garante que título e descrição comecem no topo */
  .card-text-content {
    justify-content: flex-start;
  }
  
  /* Garante que vídeo comece no topo */
  .video-container {
    justify-content: flex-start;
  }
}

/* ==========================================
   ESTADOS DE LOADING (OPCIONAL)
   ========================================== */

/* Placeholder enquanto vídeo carrega */
.video-wrapper.loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 4;
}

@keyframes spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Remove loading em cards sem vídeo */
.overlapping-card.no-video .video-wrapper.loading::before {
  display: none;
}

/* ==========================================
   PRINT STYLES
   ========================================== */
@media print {
  .overlapping-card {
    position: relative !important;
    page-break-inside: avoid;
    margin-bottom: 20px !important;
  }
  
  .play-icon {
    display: none !important;
  }
  
  .video-wrapper {
    background-color: #f5f5f5;
  }
}