/* Carrossel do celular: uma grade de cartões que, na tela estreita, vira uma fileira que rola de
   lado, com cada cartão encaixando e o próximo aparecendo na borda. A página nunca rola de lado:
   só a fileira. Nas telas maiores, a grade continua sendo a da página.
   Uso: <div class="carrossel" data-carrossel="Profissões">
          <div class="carrossel__trilho [grade da página]">cartões</div>
        </div>
   O js (js/componentes/carrossel.js) põe os pontos, marca o cartão da vez e liga as setas do
   teclado. Largura de cada cartão: --carrossel-item (padrão 86%). */

/* Dentro de uma grade, o carrossel não pode esticar a coluna até caber a fileira inteira. */
.carrossel {
  min-width: 0;
}

.carrossel__pontos {
  display: none;
}

@media (max-width: 600px) {
  .carrossel .carrossel__trilho {
    position: relative;
    display: flex;
    gap: var(--espaco-3);
    margin-inline: calc(-1 * var(--margem-lateral));
    padding-inline: var(--margem-lateral);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margem-lateral);
    scrollbar-width: none;
  }

  .carrossel .carrossel__trilho::-webkit-scrollbar {
    display: none;
  }

  .carrossel .carrossel__trilho:focus-visible {
    outline: none;
    box-shadow: var(--anel-foco);
  }

  .carrossel .carrossel__trilho > * {
    flex: 0 0 var(--carrossel-item, 86%);
    min-width: 0;
    scroll-snap-align: start;
  }

  .carrossel__pontos {
    display: flex;
    justify-content: center;
    margin-top: var(--espaco-3);
  }
}

/* O ponto é um alvo de toque de 24 px; o traço visível fica no ::before. */
.carrossel__ponto {
  --ponto-cor: var(--cor-borda-forte);
  --ponto-cor-atual: var(--cor-acao);

  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 4px;
  background: none;
  border: 0;
  border-radius: var(--raio-pilula);
  cursor: pointer;
}

.carrossel__ponto::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--ponto-cor);
  border-radius: var(--raio-pilula);
  transition:
    width var(--duracao-2) var(--curva-padrao),
    background-color var(--duracao-2) var(--curva-padrao);
}

.carrossel__ponto[aria-current="true"]::before {
  width: 22px;
  background: var(--ponto-cor-atual);
}

.carrossel__ponto:focus-visible {
  outline: none;
  box-shadow: var(--anel-foco);
}