/**
 * AC | Journey Carousel — frontend.
 * Full-width, mas o 1º card começa alinhado ao grid (1104px) e os cards
 * estendem em full-bleed à direita (o último corta). Scroll horizontal com
 * snap; navegação por setas + dots (dots gerados via JS).
 */

.ac-journey-carousel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Padding top/bottom independentes (tokens DS). */
.ac-journey-carousel--pt-0  { padding-top: 0; }
.ac-journey-carousel--pt-24 { padding-top: 24px; }
.ac-journey-carousel--pt-32 { padding-top: 32px; }
.ac-journey-carousel--pt-40 { padding-top: 40px; }
.ac-journey-carousel--pt-48 { padding-top: 48px; }
.ac-journey-carousel--pt-56 { padding-top: 56px; }
.ac-journey-carousel--pt-80 { padding-top: 80px; }
.ac-journey-carousel--pb-0  { padding-bottom: 0; }
.ac-journey-carousel--pb-24 { padding-bottom: 24px; }
.ac-journey-carousel--pb-32 { padding-bottom: 32px; }
.ac-journey-carousel--pb-40 { padding-bottom: 40px; }
.ac-journey-carousel--pb-48 { padding-bottom: 48px; }
.ac-journey-carousel--pb-56 { padding-bottom: 56px; }
.ac-journey-carousel--pb-80 { padding-bottom: 80px; }

.ac-journey-carousel__scroll {
  overflow: hidden;
  /* A caixa COMEÇA no grid (margin-left) e vai full-bleed à direita.
   * O track translada via JS (transform: translateX) — independe de haver
   * scroll real. */
  margin-left: max(16px, calc((100% - 1104px) / 2));
  /* Gesto de arraste (mobile/mouse): cedemos o eixo horizontal pro JS e
   * deixamos o vertical rolar a página normalmente. */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.ac-journey-carousel__track {
  transition: transform 0.4s ease;
  will-change: transform;
}
/* Dentro de um ac-section (full-width 100vw, max-width interno 1104): o carrossel
 * começa alinhado ao grid (margin-left 0 = borda do .ac-section__inner) e ESTOURA
 * pra direita até a viewport (full-bleed), igual ao standalone. A section recorta
 * no limite (overflow:hidden da mancha / própria largura). Em telas <=1104 o
 * min(0px,…) zera o estouro (carrossel respeita o gutter). */
.ac-section .ac-journey-carousel__scroll {
  margin-left: 0;
  margin-right: min(0px, calc((1104px - 100vw) / 2 - 16px));
}
.ac-journey-carousel__scroll::-webkit-scrollbar { display: none; }

.ac-journey-carousel__track {
  display: flex;
  width: max-content;
}

/* --- Navegação --- */
.ac-journey-carousel__nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  margin-top: 40px;
}
.ac-journey-carousel__cta {
  margin-top: 16px;
}
.ac-journey-carousel-edit__cta {
  margin-top: 16px;
}
.ac-journey-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #0E5236;
  border-radius: 999px;
  background: transparent;
  color: #0E5236;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ac-journey-carousel__arrow:hover { background-color: #0E5236; color: #ffffff; }
.ac-journey-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.ac-journey-carousel__arrow:disabled:hover { background: transparent; color: #0E5236; }
.ac-journey-carousel__arrow svg { display: block; }

.ac-journey-carousel__dots {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ac-journey-carousel__dot {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  background-color: #ffffff;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ac-journey-carousel__dot.is-active {
  background-color: #0E5236;
  border-color: #0E5236;
  box-shadow: 0 0 0 3px rgba(14, 82, 54, 0.5);
}
.ac-journey-carousel__dot:focus-visible,
.ac-journey-carousel__arrow:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(14, 82, 54, 0.5);
}

/* Modo FINITO (infiniteScroll: false): reusa o MESMO mecanismo do infinito
 * (__scroll overflow:hidden + __track via transform), só que o JS não faz loop
 * — anda por índice e trava nos extremos. Não precisa de CSS próprio. */

/* ---------------------------------------------------------------------------
 * Variação ETAPAS: card = accamargo/feature-item (variante --card) dentro do
 * carrossel. Largura fixa de card + layout VERTICAL (ícone em cima, DS
 * "Item" 3558:18618). Escopado ao carrossel — não afeta o feature-item no
 * feature-grid (lá fica ícone à esquerda).
 * --------------------------------------------------------------------------- */
.ac-journey-carousel__track > .ac-feature-item {
  flex: 0 0 auto;
  width: 341px; /* DS Item 3558:18618 (341 × 157) — ícone à esquerda */
}
.ac-journey-carousel__track > .ac-feature-item + .ac-feature-item {
  margin-left: 24px;
}
@media (max-width: 768px) {
  .ac-journey-carousel__track > .ac-feature-item { width: 80vw; }
}