/*
 * Carrossel de banners logo abaixo do header.
 * Desktop: 16:3 na largura do container. Mobile (< 900px): 2:1 com swipe (scroll-snap).
 * Setas, dots e botão de pausa; troca automática controlada por js/banners.js.
 */

.banners {
  padding-top: var(--space-4);
}

.banners__palco {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--superficie-sutil);
}

.banners__trilho {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.banners__trilho::-webkit-scrollbar {
  display: none;
}

.banners__slide {
  flex: none;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.banners__link {
  display: block;
  height: 100%;
}

.banners__link:focus-visible {
  outline-offset: -4px;
  outline-color: var(--superficie);
  box-shadow: inset 0 0 0 6px var(--oliva-700);
}

.banners__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Setas */
.banners__seta {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--alvo-toque) / -2);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: var(--superficie);
  box-shadow: var(--sombra-card);
  color: var(--grafite-700);
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.banners__seta:hover {
  background: var(--superficie-sutil);
  color: var(--grafite-900);
}

.banners__seta--anterior { left: var(--space-4); }
.banners__seta--proximo { right: var(--space-4); }

/* Em dispositivos com mouse, as setas aparecem no hover/foco */
@media (hover: hover) {
  .banners__seta {
    opacity: 0;
  }

  .banners__palco:hover .banners__seta,
  .banners__palco:focus-within .banners__seta {
    opacity: 1;
  }
}

/* Dots + pausa */
.banners__controles {
  position: absolute;
  z-index: 2;
  right: var(--space-3);
  bottom: var(--space-3);
  display: flex;
  align-items: center;
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--superficie);
  box-shadow: var(--sombra-card);
}

.banners__controles[hidden],
.banners__seta[hidden],
.banners__pausa[hidden] {
  display: none;
}

.banners__dots {
  display: flex;
}

.banners__dot,
.banners__pausa {
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--grafite-700);
}

.banners__dot::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--borda-controle);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.banners__dot:hover::before {
  background: var(--grafite-700);
}

.banners__dot[aria-current="true"]::before {
  width: 20px;
  background: var(--oliva-700);
}

.banners__pausa:hover {
  background: var(--superficie-sutil);
}

@media (min-width: 900px) {
  .banners__palco {
    aspect-ratio: 16 / 3;
  }
}

@media (max-width: 767.98px) {
  .banners {
    padding-top: var(--space-3);
  }

  /* No mobile a troca manual é pelo swipe; ficam só os dots e a pausa */
  .banners__seta {
    display: none;
  }

  /* Controles saem de cima da imagem e ficam logo abaixo dela, centralizados */
  .banners__palco {
    overflow: visible;
    aspect-ratio: auto;
    background: transparent;
  }

  .banners__trilho {
    aspect-ratio: 2 / 1;
    height: auto;
    border-radius: var(--radius-lg);
    background: var(--superficie-sutil);
  }

  .banners__controles {
    position: static;
    justify-content: center;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banners__dot::before,
  .banners__seta {
    transition: none;
  }
}