/**
 * Grid responsivo para vídeos de prova social.
 * Sobrescreve conflitos de carregamento (Bootstrap async, etc).
 * Valores equivalentes às classes Tailwind: gap-6, grid-cols-1, sm:2, md:3, lg:5.
 *
 * Cartões (.social-proof-video-wrap) e ícone de mute usam apenas este arquivo para
 * não depender do Tailwind (build.css), que pode aplicar depois na primeira carga.
 */
#social-proof-videos-container {
  display: grid !important;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.5rem;
}

@media (min-width: 640px) {
  #social-proof-videos-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  #social-proof-videos-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  #social-proof-videos-container {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Cartão de cada vídeo (antes: classes Tailwind no TS) */
#social-proof-videos-container > .social-proof-video-wrap {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #1f2937;
  aspect-ratio: 9 / 16;
  touch-action: pan-y;
}

#social-proof-videos-container > .social-proof-video-wrap > video.social-proof-video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  touch-action: pan-y;
}

#social-proof-videos-container > .social-proof-video-wrap.opacity-50 {
  opacity: 0.5;
}

/* Ícone mute/unmute (antes: absolute top-4 right-4 + utilitários Tailwind no SVG) */
#social-proof-videos-container .social-proof-mute-icon {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

#social-proof-videos-container .social-proof-mute-icon svg {
  width: 2rem;
  height: 2rem;
  color: #fff;
  fill: currentColor;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.5));
}

#social-proof-videos-container .social-proof-mute-icon.opacity-100 {
  opacity: 1;
}

#social-proof-videos-container .social-proof-mute-icon.opacity-0 {
  opacity: 0;
}

/* Estado de erro (antes: col-span-full + utilitários Tailwind) */
#social-proof-videos-container .social-proof-videos-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 0;
  color: #9ca3af;
}