/* Posicionamento
   A frase da dobra mora no canto esquerdo e os cartões correm à direita
   dela. As setas ficam acima, encostadas na direita.

   A dobra tem dois modos, e o que decide é a classe `auvp-js` no <html>:

   - sem script: a fila é uma lista que rola de lado com o dedo, com
     encaixe (scroll-snap). As setas somem, porque não teriam o que
     comandar, e as cópias dos cartões também — elas só servem ao laço.
   - com script: a janela para de rolar sozinha, as setas aparecem e quem
     desloca o trilho é o assets/js/auvp.js, um cartão por vez.

   O passo é a distância entre dois cartões, e quem a mede é o próprio
   JavaScript, no elemento — assim ela vale em qualquer largura, sem o
   CSS ter de repetir a conta. */
.auvp-roleta {
  --vis: 1;              /* cartões visíveis; cresce nas telas maiores */
  --gap: clamp(1rem, 2vw, 2rem);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Em tela estreita as setas passam para depois dos cartões: ali em cima,
   antes até da frase, elas apareciam sem nada para comandar. */
.auvp-roleta__nav {
  order: 2;
  display: none;
  justify-content: flex-end;
  gap: 0.6rem;
  padding-top: clamp(1.25rem, 2.5vw, 2rem);
}
.auvp-js .auvp-roleta__nav { display: flex; }

.auvp-roleta__bt {
  flex: none;
  width: clamp(34px, 2.6vw, 40px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--display);
  font-size: 0.8rem;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.4s var(--ease), background-color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.auvp-roleta__bt:hover {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--paper);
}

/* Texto e trilho lado a lado. Em tela estreita viram uma coluna só, com
   a frase em cima. */
.auvp-roleta__grade {
  display: grid;
  gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: start;
}
/* Na coluna a frase tem um terço da largura para trabalhar, então ela
   desce de corpo: no tamanho antigo quebrava em sete linhas. */
.auvp-proof__statement {
  font-size: clamp(1.55rem, 2.9vw, 2.9rem);
  line-height: 1.18;
  max-width: 22ch;
}
@media (min-width: 1200px) {
  .auvp-proof__statement { font-size: clamp(1.5rem, 2.1vw, 2.3rem); }
}

/* Sem script, a janela é o que rola. Com script, quem anda é o trilho, e
   a janela vira só a moldura. */
.auvp-roleta__janela {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.auvp-js .auvp-roleta__janela {
  overflow: hidden;
  scroll-snap-type: none;
}

.auvp-roleta__trilho {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--vis) - 1) * var(--gap)) / var(--vis));
  gap: var(--gap);
  transition: transform 0.7s var(--ease);
}

.auvp-roleta__cartao {
  display: grid;
  align-content: start;
  gap: 0.75rem;
  scroll-snap-align: start;
}
.auvp-roleta__foto {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: clamp(0.75rem, 1.5vw, 1.25rem);
  background: var(--paper-3);
  overflow: hidden;
}
.auvp-roleta__foto .auvp-art { transition: transform 1.1s var(--ease); }
.auvp-roleta__cartao:hover .auvp-art { transform: scale(1.05); }
.auvp-roleta__cartao h3 { font-size: clamp(1.2rem, 1.7vw, 1.75rem); line-height: 1.2; }
.auvp-roleta__cartao p { font-size: var(--fs-small); line-height: 1.7; color: var(--ink-60); }

/* As cópias fecham o laço do passeio: o trilho anda até parar sobre a
   cópia do primeiro cartão e volta ao começo sem transição, o que não
   aparece porque a tela é idêntica. Sem script não há passeio, e elas
   seriam só conteúdo repetido.

   Estas duas regras vêm depois da base do cartão de propósito: têm a
   mesma especificidade que ela, e quem vem por último ganha. Acima, o
   `display: grid` da base apagava o `none` daqui e as cópias apareciam
   mesmo sem script. */
.auvp-roleta__cartao--copia { display: none; }
.auvp-js .auvp-roleta__cartao--copia { display: grid; }

@media (min-width: 760px) {
  .auvp-roleta { --vis: 2; }
}
@media (min-width: 1200px) {
  .auvp-roleta__grade { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
  /* Com espaço, as setas voltam para cima dos cartões, no canto direito. */
  .auvp-roleta__nav { order: 0; padding-top: 0; padding-bottom: clamp(1.25rem, 2.5vw, 2rem); }
}