/* -------------------------------------------------------------------------- */
/* Reviews horizontais exclusivas da landing page                             */
/* -------------------------------------------------------------------------- */

/* O percurso vertical fornece distância para o trilho cruzar a viewport. */
.spatial-reviews--horizontal {
  height: calc(100svh + var(--review-travel, 180rem));
  overflow: clip;
}

/* O palco permanece fixo enquanto a rolagem vertical move os cards de lado. */
.spatial-reviews--horizontal .spatial-stage {
  perspective: none;
}

/* O trilho parte do gutter e preserva espaço para o último card respirar. */
.spatial-reviews--horizontal .spatial-world {
  top: clamp(35rem, 48vh, 44rem);
  right: auto;
  bottom: auto;
  left: 0;
  display: flex;
  width: max-content;
  gap: 1.8rem;
  padding: 0 var(--gutter, 4vw) 3rem;
  transform-style: flat;
  will-change: transform;
}

/* A linha espacial 3D não participa do novo movimento lateral. */
.spatial-reviews--horizontal .spatial-axis {
  display: none;
}

/* Cada review funciona como um painel horizontal do mesmo design system. */
.spatial-reviews--horizontal .space-card {
  position: relative;
  top: auto;
  left: auto;
  width: min(68vw, 84rem);
  height: min(46vh, 43rem);
  min-height: 31rem;
  flex: 0 0 min(68vw, 84rem);
  border-radius: var(--radius-media);
  opacity: 1;
  translate: none;
  transform: none;
}

/* O foco torna a região rolável reconhecível para navegação por teclado. */
.spatial-reviews--horizontal .spatial-world:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: -0.4rem;
}

/* A instrução acompanha o canto inferior sem competir com os depoimentos. */
.review-scroll-hint {
  position: absolute;
  z-index: 9;
  right: var(--gutter, 4vw);
  bottom: 2.6rem;
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* A orientação por toque só aparece quando o trilho vira rolagem nativa. */
.review-scroll-hint__touch {
  display: none;
}

/* A orientação vertical aparece somente quando os cards são empilhados. */
.review-scroll-hint__mobile {
  display: none;
}

/* Tablets usam scroll-snap horizontal; o celular recebe um override vertical abaixo. */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .spatial-reviews--horizontal {
    height: auto;
  }

  /* O conteúdo volta ao fluxo para não criar uma seção artificialmente longa. */
  .spatial-reviews--horizontal .spatial-stage {
    position: relative;
    height: auto;
    min-height: 0;
    padding: 11rem 0 8rem;
    overflow: hidden;
  }

  /* O cabeçalho conserva os gutters editoriais da landing page. */
  .spatial-reviews--horizontal .spatial-head {
    position: relative;
    inset: auto;
    display: grid;
    margin: 0 var(--gutter, 4vw) 6rem;
  }

  /* Em tablets, o trilho responde diretamente ao arraste, teclado e touchpad. */
  .spatial-reviews--horizontal .spatial-world {
    position: relative;
    inset: auto;
    display: flex;
    width: auto;
    gap: 1.4rem;
    padding: 0 var(--gutter, 4vw) 2.2rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none !important;
  }

  /* A barra nativa é ocultada sem remover a capacidade de rolagem. */
  .spatial-reviews--horizontal .spatial-world::-webkit-scrollbar {
    display: none;
  }

  /* Cada card encaixa no centro e deixa o próximo painel parcialmente visível. */
  .spatial-reviews--horizontal .space-card {
    width: min(84vw, 76rem);
    height: auto;
    min-width: min(84vw, 76rem);
    min-height: 42rem;
    flex-basis: min(84vw, 76rem);
    scroll-snap-align: center;
  }

  /* A instrução passa para o fluxo logo abaixo dos cards. */
  .review-scroll-hint {
    position: relative;
    inset: auto;
    margin: 1.8rem var(--gutter, 4vw) 0;
  }

  .review-scroll-hint__desktop {
    display: none;
  }

  .review-scroll-hint__touch {
    display: inline;
  }
}

/* No celular, toda a seção volta ao eixo vertical para não criar scroll lateral. */
@media (max-width: 767px) {
  .spatial-reviews--horizontal .spatial-head {
    display: block;
  }

  /* A lista empilha os depoimentos e deixa a rolagem exclusivamente no documento. */
  .spatial-reviews--horizontal .spatial-world {
    display: grid;
    width: 100%;
    min-width: 0;
    padding-inline: var(--gutter, 4vw);
    overflow: visible;
    overscroll-behavior-inline: auto;
    scroll-snap-type: none;
  }

  /* Cada card ocupa a largura útil sem dimensões mínimas baseadas no viewport. */
  .spatial-reviews--horizontal .space-card {
    width: 100%;
    min-width: 0;
    min-height: 38rem;
    flex-basis: auto;
    scroll-snap-align: none;
  }

  .review-scroll-hint__touch {
    display: none;
  }

  .review-scroll-hint__mobile {
    display: inline;
  }
}

/* O foco visual mobile usa somente transform e opacity durante o scroll vertical. */
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .spatial-reviews--horizontal .space-card {
    opacity: var(--review-mobile-opacity, 1) !important;
    transform: var(--review-mobile-transform, none) !important;
    will-change: transform, opacity;
  }
}