/*
 * Carrossel sobre scroll-snap (js/carrossel.js): produtos (home e segurados), linha do tempo e imprensa (sobre nós).
 * Sem JS vira uma faixa com rolagem horizontal.
 */

@layer components {
  /* ---------- Carrossel (scroll-snap + js/carrossel.js) ---------- */
  .carrossel {
    --carrossel-por-vez: 3;
    --carrossel-gap: 20px;

    position: relative;
  }

  .carrossel__trilho {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* espaço para o efeito de zoom do card não ser cortado */
    padding-block: 12px;
    margin-block: -12px;
  }

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

  .carrossel__lista {
    display: flex;
    gap: var(--carrossel-gap);
  }

  .carrossel__item {
    flex: 0 0 calc((100% - (var(--carrossel-por-vez) - 1) * var(--carrossel-gap)) / var(--carrossel-por-vez));
    scroll-snap-align: start;
  }

  /* Setas: invisíveis como no original, mas clicáveis e visíveis com foco de teclado. */
  .carrossel__seta {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: transparent;
    font-size: 20px;
    transform: translateY(-50%);
  }

  .carrossel__seta:focus-visible {
    background: var(--cor-branco);
    color: var(--cor-primaria);
  }

  .carrossel__seta--anterior { left: 0; }
  .carrossel__seta--proxima { right: 0; }

  /* Setas aparentes (linha do tempo do sobre nós): quadrado verde, seta branca, 20px para fora. */
  .carrossel--setas-visiveis .carrossel__seta {
    width: auto;
    height: auto;
    padding: 10px 14px;
    border-radius: var(--raio-md);
    background: var(--cor-secundaria);
    color: var(--cor-branco);
  }

  .carrossel--setas-visiveis .carrossel__seta:hover,
  .carrossel--setas-visiveis .carrossel__seta:focus-visible {
    background: var(--cor-primaria);
    color: var(--cor-branco);
  }

  .carrossel--setas-visiveis .carrossel__seta--anterior { left: -20px; }
  .carrossel--setas-visiveis .carrossel__seta--proxima { right: -20px; }

  /* Carrossel de produtos (home e segurados): setas sobre as bordas internas dos cards, como no original. */
  .carrossel--produtos .carrossel__seta--anterior { left: 10px; }
  .carrossel--produtos .carrossel__seta--proxima { right: 10px; }

  @media (max-width: 1024px) {
    .carrossel {
      --carrossel-por-vez: 2;
    }
  }

  @media (max-width: 767px) {
    .carrossel {
      --carrossel-por-vez: 1;
    }
  }
}