/* ==========================================================================
   CASA PIETRA — CARROSSEL DE BANNERS (lifestyle)
   Figma node 6692:419 (desktop 1366x488) e 6692:420 (mobile 360x224).
   Anotação do designer: "Banner rotativo".

   O texto de cada banner está queimado na arte — por isso não há tipografia
   aqui, só imagem. A frase é transcrita no alt de cada <img>.
   ========================================================================== */

.carousel {
  position: relative;
}

.carousel__viewport {
  position: relative;
  overflow: hidden;
  /* O gesto horizontal é nosso; o vertical continua rolando a página */
  touch-action: pan-y;
  cursor: grab;
  /* Reserva a caixa antes das imagens carregarem (evita CLS). A arte tem
     duas proporções distintas: 360x224 no mobile, 1366x488 no desktop. */
  aspect-ratio: 45 / 28;
}

.carousel__track {
  display: flex;
  height: 100%;
  transition: transform 600ms ease;
  will-change: transform;
}

.carousel__slide {
  flex: 0 0 100%;
  height: 100%;
}

.carousel__slide picture {
  display: block;
  width: 100%;
  height: 100%;
}

.carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Sem isto o navegador inicia o arrasto nativo da imagem e mata o gesto */
  user-select: none;
  -webkit-user-drag: none;
}

.carousel__viewport:active {
  cursor: grabbing;
}

/* --------------------------------------------------------------------------
   BOLINHAS DE NAVEGAÇÃO
   [DESVIO] Não existem no Figma. Adicionadas a pedido do cliente e porque a
   WCAG 2.2.2 exige um jeito de interromper conteúdo que se move sozinho.
   -------------------------------------------------------------------------- */

.carousel__dots {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sem gap: os botões ficam encostados e o espaço entre as bolinhas vem da
     largura do botão, mantendo a área de toque contínua. */
  gap: 0;
}

.carousel__dot {
  /* A bolinha visual tem 6px; o botão é maior para dar área de toque.
     14x24 fica abaixo dos 24x24 da WCAG 2.5.8 — foi o compromisso possível
     para deixar as bolinhas pequenas e juntas, conforme pedido. A altura de
     24px foi preservada porque o erro de toque é mais vertical que lateral. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 24px;
}

.carousel__dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--border-radius-circular);
  background-color: var(--color-gray-100);
  opacity: var(--opacity-level-medium);
  /* A arte varia muito de luminosidade; a sombra garante a bolinha visível */
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.4);
  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast);
}

.carousel__dot:hover::before {
  opacity: var(--opacity-level-semi-opaque);
}

.carousel__dot[aria-current="true"]::before {
  opacity: var(--opacity-level-default);
  transform: scale(1.25);
}

.carousel__dot:focus-visible {
  outline: var(--border-width-md) solid var(--color-white);
  outline-offset: 0;
  border-radius: var(--border-radius-circular);
}

/* ==========================================================================
   MD — 768px: troca a direção de arte e a proporção
   Acima disso entram os arquivos -lg / -xl, que têm recorte mais panorâmico.
   ========================================================================== */
@media (min-width: 768px) {
  .carousel__viewport {
    aspect-ratio: 1366 / 488;
  }

  .carousel__dots {
    inset-block-end: 24px;
  }
}

/* ==========================================================================
   Movimento reduzido: sem deslize, troca instantânea.
   O autoplay é desligado no JS.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .carousel__track {
    transition: none;
  }
}