/* =====================================================================
   COMPONENTE carousel (AVT Core). Variáveis (valores padrão entre parênteses):
   --avt-carousel-gap       espaço entre itens            (10px)
   --avt-carousel-cols      itens visíveis no desktop     (4)
   --avt-carousel-cols-md   itens visíveis no tablet      (3)
   --avt-carousel-cols-sm   itens visíveis no celular     (2)
   --avt-carousel-btn-bg / -hover / --avt-carousel-btn-color / --avt-carousel-btn-radius
   ===================================================================== */
.avt-carousel{position:relative;contain:paint}
.avt-carousel__track{
  display:flex;align-items:stretch;gap:var(--avt-carousel-gap,10px);
  margin:0;padding:5px 1px;list-style:none;
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none
}
.avt-carousel__track::-webkit-scrollbar{display:none}
.avt-carousel__track>li{
  flex:0 0 calc((100% - (var(--avt-carousel-cols,4) - 1) * var(--avt-carousel-gap,10px)) / var(--avt-carousel-cols,4));
  scroll-snap-align:start;min-width:0
}
.avt-carousel__btn{
  position:absolute;top:42%;z-index:5;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;cursor:pointer;
  border-radius:var(--avt-carousel-btn-radius,4px);background:var(--avt-carousel-btn-bg,rgba(80,80,80,.6));color:var(--avt-carousel-btn-color,#fff);
  transition:background .2s
}
.avt-carousel__btn:hover{background:var(--avt-carousel-btn-bg-hover,#1f2937)}
.avt-carousel__btn[hidden]{display:none}
.avt-carousel__btn--prev{left:6px}
.avt-carousel__btn--next{right:6px}
@media (max-width:1024px){
  .avt-carousel__track>li{flex-basis:calc((100% - (var(--avt-carousel-cols-md,3) - 1) * var(--avt-carousel-gap,10px)) / var(--avt-carousel-cols-md,3))}
}
@media (max-width:767px){
  .avt-carousel__track>li{flex-basis:calc((100% - (var(--avt-carousel-cols-sm,2) - 1) * var(--avt-carousel-gap,10px)) / var(--avt-carousel-cols-sm,2))}
  .avt-carousel__btn{top:34%}
}
