/* =============================================================
   Carrossel paginado (página inteira) — componente compartilhado
   JS: initPagedCarousels() em assets/js/main.js ([data-bimw-paged-carousel]).
   Números: numeric-pagination.css (bimwRenderNumericPagination).

   Usado nos depoimentos da Home (sections/home/testimonials.php) e da
   página Clientes (page-clientes.php) quando há 4+ itens. Os cards são os
   mesmos do grid; só o trilho muda de grid para flex.

   Cards por página: --carousel-per-page (3 desktop / 2 tablet / 1 mobile,
   iguais às colunas dos grids). O JS lê essa mesma variável.
   Seletores com 2 classes vencem o display:grid de cada seção sem
   depender da ordem de carregamento dos arquivos.
   ============================================================= */

.bimw-paged-carousel {
  --carousel-per-page: 1;
  --carousel-gap: 24px;
}

@media (min-width: 768px) {
  .bimw-paged-carousel {
    --carousel-per-page: 2;
  }
}

@media (min-width: 1024px) {
  .bimw-paged-carousel {
    --carousel-per-page: 3;
  }
}

/* overflow-x: clip corta só na horizontal — hover (translateY + sombra)
   continua visível acima/abaixo dos cards. */
.bimw-paged-carousel .bimw-paged-carousel__viewport {
  width: 100%;
  overflow-x: clip;
}

.bimw-paged-carousel .bimw-paged-carousel__track {
  display: flex;
  gap: var(--carousel-gap);
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.bimw-paged-carousel .bimw-paged-carousel__track > * {
  flex: 0 0 calc((100% - (var(--carousel-per-page) - 1) * var(--carousel-gap)) / var(--carousel-per-page));
  min-width: 0;
  height: auto; /* todos com a altura do mais alto (align-items: stretch) */
}

.bimw-paged-carousel .bimw-paged-carousel__pagination {
  display: flex;
  align-items: center;
  gap: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .bimw-paged-carousel .bimw-paged-carousel__track {
    transition: none;
  }
}