/* ta-carousel — componente de carrossel compartilhado (Torteria Adriana)
   Modos: data-mode="fade" (crossfade) e data-mode="slide" (track deslizante). */

.ta-carousel { position: relative; }
.ta-carousel__viewport { position: relative; width: 100%; overflow: hidden; }

/* ---- Modo FADE (slides empilhados) ---- */
.ta-carousel[data-mode="fade"] .ta-carousel__viewport,
.ta-carousel[data-mode="fade"] .ta-carousel__track { position: absolute; inset: 0; height: 100%; }
.ta-carousel[data-mode="fade"] .ta-carousel__track { display: block; }
.ta-carousel[data-mode="fade"] .ta-carousel__slide {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 900ms ease;
}
.ta-carousel[data-mode="fade"] .ta-carousel__slide.is-active { opacity: 1; visibility: visible; }
.ta-carousel[data-mode="fade"] .ta-carousel__slide picture,
.ta-carousel[data-mode="fade"] .ta-carousel__slide img {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.ta-carousel[data-mode="fade"] .ta-carousel__slide img { object-fit: cover; }

/* ---- Modo SLIDE (track deslizante) ---- */
.ta-carousel[data-mode="slide"] .ta-carousel__track {
  display: flex;
  gap: var(--space-lg);
  transition: transform 500ms var(--ease-out-expo, cubic-bezier(0.16,1,0.3,1));
  will-change: transform;
}
.ta-carousel[data-mode="slide"] .ta-carousel__slide { flex: 0 0 auto; }

/* Arrastar: o cursor é a única pista visual de que a faixa é arrastável.
   pan-y libera o scroll vertical da página no mobile — só o eixo X é nosso. */
.ta-carousel[data-mode="slide"] .ta-carousel__viewport {
  cursor: grab;
  touch-action: pan-y;
}
.ta-carousel[data-mode="slide"].is-dragging .ta-carousel__viewport { cursor: grabbing; }
/* durante o arraste o track segue o ponteiro: sem transição e sem seleção de texto */
.ta-carousel[data-mode="slide"].is-dragging .ta-carousel__track { transition: none; }
.ta-carousel[data-mode="slide"].is-dragging { user-select: none; -webkit-user-select: none; }

/* ---- Setas ---- */
.ta-carousel__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 4;
  width: 48px; height: 48px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(26,10,8,0.55); color: var(--color-off-white);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background 200ms ease, transform 200ms ease;
}
.ta-carousel__arrow:hover { background: var(--color-orange-accent); color: var(--color-almost-black); }
.ta-carousel__arrow:focus-visible { outline: 3px solid var(--color-off-white); outline-offset: 2px; }
.ta-carousel__arrow--prev { left: var(--space-md); }
.ta-carousel__arrow--next { right: var(--space-md); }
.ta-carousel__arrow svg { width: 22px; height: 22px; pointer-events: none; }

/* ---- Dots (alvo de toque 44px, miolo visual menor) ---- */
.ta-carousel__dots {
  position: absolute; z-index: 4;
  bottom: var(--space-sm); right: var(--space-md);
  display: flex; gap: 2px;
}
.ta-carousel__dot {
  position: relative;
  width: 44px; height: 44px; padding: 0; flex: 0 0 44px;
  border: none; background: transparent; cursor: pointer;
}
.ta-carousel__dot::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%; background: rgba(251,245,239,0.5);
  transition: background 200ms ease, transform 200ms ease;
}
.ta-carousel__dot:hover::after { background: rgba(251,245,239,0.85); }
.ta-carousel__dot.is-active::after { background: var(--color-orange-accent); transform: scale(1.5); }
.ta-carousel__dot:focus-visible { outline: 2px solid var(--color-off-white); outline-offset: -8px; border-radius: 50%; }

/* Dots e setas no modo slide (carrossel de cards sobre fundo claro) */
.ta-carousel[data-mode="slide"] .ta-carousel__dots {
  position: static;
  justify-content: center;
  flex-wrap: wrap; /* muitos itens: quebra em vez de sair da tela (390px) */
  margin-top: var(--space-sm);
}
.ta-carousel[data-mode="slide"] .ta-carousel__dot::after { background: rgba(26,10,8,0.25); }
.ta-carousel[data-mode="slide"] .ta-carousel__dot:hover::after { background: rgba(26,10,8,0.5); }
.ta-carousel[data-mode="slide"] .ta-carousel__dot.is-active::after { background: var(--color-orange-accent); }
.ta-carousel[data-mode="slide"] .ta-carousel__dot:focus-visible { outline-color: var(--color-burgundy); }

/* ---- Movimento reduzido ---- */
@media (prefers-reduced-motion: reduce) {
  .ta-carousel[data-mode="fade"] .ta-carousel__slide,
  .ta-carousel[data-mode="slide"] .ta-carousel__track { transition: none; }
}