/* Carrossel de vídeos das homes Confut: partes comuns a USA, Euro, Nordeste e Sudamericana.
   A cor vem de --confut-videos-accent, que cada edição define (padrão: --primary-color). */

/* As variáveis ficam na seção: os pontinhos são irmãos do carrossel, não filhos. */
.usa-videos-showcase,
.euro-videos-showcase {
  --confut-videos-accent: var(--primary-color, #cf1c31);
  --confut-videos-dot: rgba(148, 163, 184, 0.55);
}

/* USA e Euro não usam --primary-color para a marca. */
.usa-videos-showcase:not(.event-videos-showcase) {
  --confut-videos-accent: var(--usa-red, #cf1c31);
}

.euro-videos-showcase {
  --confut-videos-accent: var(--euro-orange, var(--euro-event-accent, #C9A15A));
}

/* Rolar a página na vertical por cima dos vídeos continua funcionando (antes era só pan-x). */
[data-confut-videos-carousel] [data-confut-videos-viewport] {
  touch-action: pan-x pan-y;
  cursor: grab;
}

[data-confut-videos-carousel].is-dragging [data-confut-videos-viewport] {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
}

[data-confut-videos-carousel].is-dragging button {
  pointer-events: none;
}

[data-confut-videos-carousel].is-static [data-confut-videos-viewport] > * {
  margin-inline: auto;
}

[data-confut-videos-carousel] button:disabled {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}

[data-confut-videos-carousel].is-static [data-usa-carousel-prev],
[data-confut-videos-carousel].is-static [data-usa-carousel-next],
[data-confut-videos-carousel].is-static [data-euro-carousel-prev],
[data-confut-videos-carousel].is-static [data-euro-carousel-next] {
  visibility: hidden;
}

/* Pontinhos: posição atual e atalho para cada vídeo. */
.confut-videos-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.15rem;
  margin-top: 0.35rem;
}

.confut-videos-nav[hidden] {
  display: none;
}

.confut-videos-nav__dot {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.confut-videos-nav__dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--confut-videos-dot);
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, background-color 0.25s ease;
}

.confut-videos-nav__dot.is-current::before {
  width: 22px;
  background: var(--confut-videos-accent);
}

.confut-videos-nav__dot:focus-visible {
  outline: 2px solid var(--confut-videos-accent);
  outline-offset: -2px;
  border-radius: 999px;
}

/* Celular: o card seguinte aparece cortado e a borda direita esmaece, sinal de que dá para arrastar. */
@media (max-width: 767.98px) {
  [data-confut-videos-carousel] [data-confut-videos-viewport] {
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
    mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 2.5rem), transparent 100%);
  }

  [data-confut-videos-carousel].is-at-end [data-confut-videos-viewport],
  [data-confut-videos-carousel].is-static [data-confut-videos-viewport] {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .confut-videos-nav__dot::before {
    transition: none;
  }
}