/**
 * Nexa industries — mobile + tablet carousel: block-by-block horizontal snap + auto-advance (JS).
 * Breakpoint matches theme: [data-desktop] hidden at max-width 1100px; [data-mobile] hidden from 1025px
 * unless overridden below for the industries gap 1025–1100px.
 */
@media (max-width: 1100px) {
  #what-we-do.component--industries .mobile .boxes .scroll.nexa-industries-mobile-carousel,
  .component--other-industries .mobile .boxes .scroll.nexa-other-industries-mobile-carousel {
    scroll-snap-type: x mandatory;
    scroll-behavior: auto;
    scroll-padding-inline: 5vw;
    overscroll-behavior-x: contain;
    /* pan-x alone blocks vertical page scroll when touch starts on the card; pan-y restores it.
       The browser routes mostly-vertical gestures to the page and horizontal ones to this scroller. */
    touch-action: pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling: touch;
  }

  #what-we-do.component--industries .mobile .boxes .scroll.nexa-industries-mobile-carousel .box,
  .component--other-industries .mobile .boxes .scroll.nexa-other-industries-mobile-carousel .box {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    flex-shrink: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #what-we-do.component--industries .mobile .boxes .scroll.nexa-industries-mobile-carousel,
  .component--other-industries .mobile .boxes .scroll.nexa-other-industries-mobile-carousel {
    scroll-behavior: auto;
  }
}

/* Theme would hide both [data-desktop] and [data-mobile] between 1025px and 1100px — keep mobile carousel only here */
@media (min-width: 1025px) and (max-width: 1100px) {
  #what-we-do.component--industries [data-mobile],
  .component--other-industries [data-mobile] {
    display: block !important;
  }
}