/* ──────────────────────────────────────────────────────────────────────────
   MediaCarousel — carrossel estilo Steam pro hero do detail.
   v2 (2026-05-01): swipe responsivo. Estrutura nova:
     .bp-mc-viewport  → aspect-ratio + overflow:hidden + bg + border
     .bp-mc-track     → flex strip com TODOS os slides (translateX)
     .bp-mc-slide     → flex: 0 0 100% (1 visível por vez)
   Reusa o vocabulário visual do trending banner.
   ────────────────────────────────────────────────────────────────────────── */

.bp-mc {
  position: relative;
  margin: 0 0 28px;
}

.bp-mc-stage {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

/* Viewport — container com aspect-ratio + overflow:hidden + bg + border.
   É o "frame" visual do carrossel; track fica dentro com inset:0. */
.bp-mc-viewport {
  flex: 1;
  min-width: 0;
  position: relative;
  border-radius: var(--bp-r-xl);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 70% 20%, rgba(0,153,255,0.10), transparent 60%),
    linear-gradient(135deg, #0a1626 0%, #0f1d30 50%, #08111c 100%);
  border: 1px solid var(--bp-glass-border);
  border-top-color: rgba(255,255,255,0.10);
  box-shadow:
    0 24px 80px -24px rgba(0,0,0,0.78),
    0 8px 24px -8px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.02) inset;
  /* Permite swipe horizontal sem brigar com pan vertical (touch-action
     pan-y deixa scroll vertical natural; swipe horizontal vira gesto
     próprio interceptado pelos handlers). */
  touch-action: pan-y;
}

/* Aspect-ratio via padding-top hack (mais compatível que aspect-ratio CSS) */
.bp-mc-viewport[data-aspect="16-9"]::before {
  content: '';
  display: block;
  padding-top: 56.25%;
}
.bp-mc-viewport[data-aspect="21-9"]::before {
  content: '';
  display: block;
  padding-top: 42.86%;
}
.bp-mc-viewport[data-aspect="4-3"]::before {
  content: '';
  display: block;
  padding-top: 75%;
}

/* Track — flex strip com TODOS os slides. Translate posiciona o current
   no zero; durante swipe, dragX vai junto pra mostrar adjacente entrando. */
.bp-mc-track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.bp-mc-track.is-dragging {
  transition: none;  /* segue o dedo sem easing */
}

/* Slide — flex item de 100% width (1 visível por vez no viewport) */
.bp-mc-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

/* Imagens — cover full bleed */
.bp-mc-slide img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Vídeo nativo — controls visíveis, autoplay desabilitado */
.bp-mc-slide video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  display: block;
}

/* Iframe (YouTube/Vimeo) */
.bp-mc-slide iframe {
  width: 100%; height: 100%;
  border: 0;
  display: block;
}

/* Fallback quando idea.hero_slides está vazio — mostra glyph */
.bp-mc-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(56,176,255,0.40);
  background-image:
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 40px 40px;
}
.bp-mc-fallback-glyph {
  filter: drop-shadow(0 0 32px rgba(0,153,255,0.25));
  animation: bpMcFallbackFloat 8s ease-in-out infinite;
}
@keyframes bpMcFallbackFloat {
  0%, 100% { transform: translateY(0)    scale(1); }
  50%      { transform: translateY(-6px) scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
  .bp-mc-fallback-glyph { animation: none; }
}

/* Edge fades — vinheta sutil nas bordas */
.bp-mc-fade {
  position: absolute; top: 0; bottom: 0; width: 56px;
  z-index: 3; pointer-events: none;
}
.bp-mc-fade-l {
  left: 0;
  background: linear-gradient(90deg, rgba(8,12,18,0.45), transparent 80%);
}
.bp-mc-fade-r {
  right: 0;
  background: linear-gradient(270deg, rgba(8,12,18,0.45), transparent 80%);
}

/* Pill com índice do slide (#1 / 4) — canto inferior esquerdo */
.bp-mc-counter {
  position: absolute;
  bottom: 14px; left: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px;
  background: rgba(8,12,18,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--bp-r-sm);
  font-family: var(--bp-mono);
  font-size: 10px; font-weight: 600;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.10em;
  z-index: 4;
  pointer-events: none;
}

/* Setas — glass rectangles fora do track */
.bp-mc-nav {
  flex-shrink: 0;
  width: 48px;
  align-self: stretch;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,16,24,0.60);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--bp-r-lg);
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  box-shadow:
    0 8px 32px -8px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  transition:
    background   var(--bp-dur) var(--bp-ease),
    border-color var(--bp-dur) var(--bp-ease),
    color        var(--bp-dur) var(--bp-ease),
    box-shadow   var(--bp-dur) var(--bp-ease);
}
.bp-mc-nav:hover {
  background: rgba(0,153,255,0.14);
  border-color: rgba(0,153,255,0.28);
  color: var(--bp-blue-hi, #38b0ff);
  box-shadow:
    0 8px 32px -8px rgba(0,153,255,0.22),
    0 0 0 1px rgba(0,153,255,0.10) inset;
}
.bp-mc-nav-arrow {
  display: block;
  transition: transform var(--bp-dur) var(--bp-ease);
}

/* Animação de clique — bounce direcional */
@keyframes bpMcNavClickPrev {
  0%   { transform: translateX(0)    scale(1);    }
  30%  { transform: translateX(-5px) scale(0.88); }
  65%  { transform: translateX(3px)  scale(1.08); }
  100% { transform: translateX(0)    scale(1);    }
}
@keyframes bpMcNavClickNext {
  0%   { transform: translateX(0)    scale(1);    }
  30%  { transform: translateX(5px)  scale(0.88); }
  65%  { transform: translateX(-3px) scale(1.08); }
  100% { transform: translateX(0)    scale(1);    }
}
.bp-mc-nav-prev.is-clicked .bp-mc-nav-arrow {
  animation: bpMcNavClickPrev 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.bp-mc-nav-next.is-clicked .bp-mc-nav-arrow {
  animation: bpMcNavClickNext 360ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.bp-mc-nav.is-clicked {
  box-shadow:
    0 0 0 3px rgba(0,153,255,0.25),
    0 8px 32px -8px rgba(0,153,255,0.30),
    0 0 0 1px rgba(0,153,255,0.12) inset;
  border-color: rgba(0,153,255,0.35);
}

/* Dots de navegação */
.bp-mc-dots {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 14px;
}
.bp-mc-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.20);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    width var(--bp-dur) var(--bp-ease),
    background var(--bp-dur) var(--bp-ease),
    border-radius var(--bp-dur) var(--bp-ease),
    box-shadow var(--bp-dur) var(--bp-ease);
}
.bp-mc-dot:hover { background: rgba(255,255,255,0.36); }
.bp-mc-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--bp-blue);
  box-shadow: 0 0 0 4px var(--bp-blue-soft);
}

/* Responsive */
@media (max-width: 768px) {
  .bp-mc-stage { gap: 6px; }
  .bp-mc-nav   { width: 36px; border-radius: var(--bp-r); }
  .bp-mc-fade  { display: none; }

  /* Dots: override do reset min-height: 44px do mobile.css. Sem isso,
     [role="tab"] vira uma faixa de 44px de altura cada. */
  .bp-mc-dot {
    min-height: 0 !important;
    width: 6px !important;
    height: 6px !important;
    padding: 0 !important;
  }
  .bp-mc-dot.active {
    width: 22px !important;
    height: 6px !important;
    border-radius: 4px !important;
  }
  .bp-mc-dots {
    gap: 6px;
    margin-top: 12px;
  }
}
@media (max-width: 480px) {
  .bp-mc-nav { display: none; }   /* mobile usa swipe — setas escondidas */
}