/* Frontend + editor shared */
.wp-block-moveupnorth-stats-carousel.mun-stats-carousel{
  display:block;
  width:100%;
  max-width:100%;
  position: relative;
}

.mun-stats-carousel__controls{
  position:absolute;
  inset: 0;
  display:flex;
  justify-content: space-between;
  align-items:center;
  pointer-events:none;
  padding: 0 20px;
  z-index: 2;
}

.mun-stats-carousel__btn{
  pointer-events:auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--ast-global-color-3);
  background: transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color: var(--ast-global-color-3);
  padding: 0;
}

.mun-stats-carousel__btn:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.mun-stats-carousel__viewport{
  overflow:hidden;
  touch-action: pan-y; /* allow vertical scroll; still enables swipe detection */
}

.mun-stats-carousel__viewport:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 4px;
}

.mun-stats-carousel__track{
  display:flex;
  will-change: transform;
  transform: translateX(calc(var(--mun-offset, 0%) * -1));
  transition: transform 450ms ease;
}

@media (prefers-reduced-motion: reduce){
  .mun-stats-carousel__track{ transition:none; }
}

.wp-block-moveupnorth-stats-carousel .mun-stats-item{
  flex: 0 0 calc(100% / var(--mun-cols, 3));
}

/* SR-only utility */
.mun-sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
