/* faixa.css: os cartões lado a lado que deslizam, usados em várias seções da página do Estúdio.
   - .faixa: o cabeçalho com as setas à direita e o trilho que corre de lado. No computador as setas andam um cartão
     por vez; no telefone as setas saem e o trilho se arrasta com o dedo, com o próximo cartão aparecendo na borda pra
     dizer que tem mais. As duas rodam sem fim (o estudio.js põe as cópias nas pontas).
   - .desliza: uma lista que no telefone vira a mesma fileira de arrastar e no computador fica do jeito que a folha
     da seção mandar (uma grade, quase sempre).
   Depende de: base.css (cores). Telefone nas regras soltas, computador no @media do fim. */

.faixa { display: grid; gap: 20px; min-width: 0; }

.faixa__cabeca { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.faixa__cabeca .secao-estudio__cabeca { margin-bottom: 0; }

.faixa__setas { display: none; flex: none; gap: 8px; }

.faixa__seta {
  display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--bloco-escuro); color: var(--texto);
}
.faixa__seta:hover { background: var(--bloco-apertado); }
.faixa__seta svg { width: 20px; height: 20px; }

.secao-estudio--preta .faixa__seta { background: rgba(255, 255, 255, .12); color: var(--branco); }
.secao-estudio--preta .faixa__seta:hover { background: rgba(255, 255, 255, .24); }

/* o trilho sangra até a borda da tela no telefone, pra o cartão de fora aparecer cortado na beira */
.faixa__trilho,
.desliza {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  margin-inline: calc(-1 * var(--margem)); padding-inline: var(--margem); scroll-padding-inline: var(--margem);
}
.faixa__trilho::-webkit-scrollbar,
.desliza::-webkit-scrollbar { display: none; }

.faixa__trilho > :not(template),
.desliza > :not(template) { flex: 0 0 var(--largura-no-telefone, 82%); min-width: 0; scroll-snap-align: start; }

@media (prefers-reduced-motion: reduce) {
  .faixa__trilho { scroll-behavior: auto; }
}

@media (min-width: 900px) {
  .faixa { gap: 32px; }
  .faixa__setas { display: flex; }
  .faixa__trilho { gap: 20px; margin-inline: 0; padding-inline: 0; scroll-padding-inline: 0; }
  .faixa__trilho > :not(template) { flex-basis: var(--largura-no-computador, calc((100% - 3 * 20px) / 4)); }
  /* no computador a .desliza deixa de correr de lado: a folha da seção põe a grade dela */
  .desliza { display: grid; overflow: visible; margin-inline: 0; padding-inline: 0; scroll-snap-type: none; }
}