/*
 * Carrossel (etapa F3) -- dois usos: 4 cartões na visão (home) e 5 no global.
 *
 * **Sem Owl e sem jQuery**, por decisão medida na B5: 132 KB para dois carrosséis de um item
 * por vez, com as duas inicializações idênticas. No lugar, rolagem nativa com `scroll-snap`.
 * As 67 linhas do `main.css` acopladas ao DOM do Owl (`.owl-stage`, `.owl-nav`,
 * `.owl-dots .owl-dot span`) não são transcritas -- elas descrevem uma marcação que não
 * existe mais. O que se transcreve é a **aparência**: a faixa das setas sobre o cartão, as
 * setas transparentes, os marcadores de 8px que só aparecem no celular.
 *
 * **A caixa de cada cartão não está aqui.** Os dois tipos do estático têm caixas diferentes
 * (a da visão só ganha fundo e sombra no celular; a do global tem fundo e 418px de altura
 * sempre), então ela é da página -- G12 e G9. Aqui fica a máquina de rolar.
 */

.carrossel {
  position: relative;
}

/*
 * A trilha. `scroll-snap-type: x mandatory` com `scroll-snap-align: center` no slide é o que
 * substitui o `items: 1` do Owl: um slide por vez, parando no lugar.
 *
 * `gap: 15px` é o `margin: 15` da configuração do Owl.
 *
 * A barra de rolagem é escondida **de propósito**, e é a única concessão de aparência: com os
 * marcadores e as setas presentes, ela é ruído. A rolagem continua inteira -- toque, roda,
 * trackpad e teclado.
 *
 * **E o `margin-top: 0` não é enfeite: o defeito foi medido na G9.** O `base.css` copia o
 * reset do original, que zera `padding-inline-start` e `margin-bottom` do `<ul>` e *deixa* o
 * `margin-top: 1em` do navegador -- e a trilha é um `<ul>`, então ela nascia 16px abaixo do
 * lugar. O mesmo vale para a lista dos marcadores, lá embaixo.
 *
 * É o mesmo achado que a G8 fez na lista de tópicos, e ali ele ficou na folha da página com a
 * nota de que o lugar talvez fosse o componente. É: uma trilha 16px fora do lugar está fora
 * do lugar nos dois carrosséis do site, e a G12 pagaria o mesmo.
 */
.carrossel__trilha {
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-top: 0;
}

.carrossel__trilha::-webkit-scrollbar {
  display: none;
}

/*
 * `flex: 0 0 100%` -- cada slide ocupa a trilha inteira, que é o `items: 1` do original.
 * `min-width: 0` porque um filho flex não encolhe abaixo do conteúdo sem isso, e um texto
 * longo dentro do cartão empurraria a largura do slide.
 */
/*
 * `display: flex` **subiu para cá na G12b**, e a G9 previu a promoção: ela nasceu na folha do
 * global e ficou lá porque o cartão de visão podia não querer esticar até a altura do slide --
 * "se a G12 quiser, ela promove a regra". Os dois carrosséis do site querem, e é a regra do
 * segundo uso: com dois, a decisão passa a ser do componente.
 *
 * O que ela faz: a trilha é `align-items: stretch`, então todo slide fica com a altura do mais
 * alto; sendo o slide flex, o que estiver dentro dele acompanha essa altura em vez de flutuar
 * no topo.
 */
.carrossel__slide {
  display: flex;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
}

/*
 * A faixa das setas, sobreposta ao cartão -- é o `.owl-nav` do original, medido.
 *
 * **Duas correções que a B5 mandou fazer, e as duas são defeito do original:**
 *
 * 1. `width: 1120px` **fixos** transborda entre 769px e 1120px de viewport e joga as setas
 *    fora da tela; o `overflow-x: hidden` do `body` só esconde o sintoma. `min()` resolve
 *    sem media query.
 * 2. A faixa cobre o meio do cartão e **engole cliques** -- inclusive o do botão "Global
 *    Experiences" que um dos cartões de visão tem dentro. `pointer-events: none` na faixa,
 *    `auto` nos botões.
 */
.carrossel__nav {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1120px, 100% - 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.carrossel__seta {
  pointer-events: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.carrossel__seta:hover {
  opacity: 0.7;
}

/*
 * A seta da ponta continua na tela, apagada e sem alcance de clique -- e não `display: none`.
 * Sumir com ela deslocaria a outra, porque a faixa é `space-between`: no primeiro slide a
 * seta de avançar saltaria para a esquerda.
 */
.carrossel__seta[disabled] {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.carrossel__seta img {
  display: block;
}

/*
 * Os marcadores só existem no celular, como no original -- no desktop as setas bastam. Eles
 * vêm renderizados do servidor de todo jeito, porque criá-los por JavaScript causaria pulo de
 * layout justamente onde eles ocupam altura.
 */
.carrossel__marcadores {
  display: none;
  /* O mesmo `margin-top: 1em` do navegador que a trilha acima zera, e pela mesma razão --
   * aqui ele afastaria os marcadores 16px do carrossel no celular, que é onde eles aparecem. */
  margin-top: 0;
}

/*
 * **A bolinha é o `::before`, e o alvo de toque é o elemento em volta.** No original o
 * marcador tem 8x8 e é o controle principal justamente onde o dedo é o ponteiro -- alvo de 8px
 * é erro de acessibilidade, e não geometria a preservar.
 *
 * O recuo de 8x4 dá 16x24 de área clicável **sem mexer no desenho**: a bolinha continua com
 * 8px, e o intervalo entre elas continua com 8px porque o `gap` da lista foi para zero e o
 * recuo o substitui. Chegar aos 24px de largura que a WCAG 2.5.8 pede dobraria o espaço entre
 * as bolinhas, o que é decisão de desenho e não de migração -- fica para quem revisar a
 * aparência, com o número na mão.
 */
.carrossel__marcador {
  display: block;
  padding: 8px 4px;
}

.carrossel__marcador::before {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 100%;
  background-color: #8c918d;
}

.carrossel__marcador[aria-current="true"]::before {
  background-color: var(--seb-azul);
}

/*
 * A rolagem suave é melhoria, não requisito -- e fica atrás da preferência do sistema, como
 * o `animacao.css` faz. Quem pede menos movimento continua navegando o carrossel inteiro; o
 * salto é que deixa de ser animado.
 */
@media (prefers-reduced-motion: no-preference) {
  .carrossel__trilha {
    scroll-behavior: smooth;
  }
}

@media (max-width: 768px) {
  /*
   * No celular as setas sobem para cima do carrossel e os marcadores aparecem. Medido no
   * original: `top: -50px`, faixa centrada com 16px de folga e `gap: 16px`.
   */
  .carrossel__nav {
    top: -50px;
    left: 16px;
    transform: none;
    width: calc(100% - 32px);
    justify-content: center;
    gap: 16px;
  }

  .carrossel__seta img {
    width: 32px;
    height: 32px;
  }

  /* `gap: 0`: o intervalo de 8px entre as bolinhas vem do recuo do próprio marcador, que é
   * o que amplia o alvo de toque sem afastá-las. */
  .carrossel__marcadores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
}

@media (min-width: 768.02px) and (max-width: 1119.98px) {
  .carrossel__nav {
    position: static;
    transform: none;
    width: auto;
    margin-top: 24px;
    justify-content: center;
    gap: 24px;
  }

  .carrossel__seta img {
    width: 48px;
    height: 48px;
  }
}