/*
  Upgrade 14 — Mobile Systèmes Marketing Carousel Motion
  Scope: mobile only. Desktop carousel/design remains untouched.
  Goal: keep the Systèmes Marketing carousel moving smoothly on mobile like desktop,
  while preserving the existing mobile layout and swipe behavior.
*/

@media (max-width: 767.98px) {
  #homeportfolio .elb-carousel-shell {
    overflow: hidden !important;
  }

  #homeportfolio .elb-carousel-rail {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    scroll-behavior: auto !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x pan-y !important;
    cursor: grab !important;
  }

  #homeportfolio .elb-carousel-rail.is-dragging {
    cursor: grabbing !important;
  }

  #homeportfolio .elb-mockup-track {
    display: flex !important;
    width: max-content !important;
    min-width: max-content !important;
    animation: none !important;
    transform: none !important;
    will-change: scroll-position !important;
    align-items: stretch !important;
    gap: 14px !important;
  }

  /* Keep duplicated slides visible on mobile so the existing JS can create a seamless infinite loop, exactly like desktop. */
  #homeportfolio .elb-mockup-slide[aria-hidden="true"] {
    display: block !important;
    visibility: visible !important;
  }

  #homeportfolio .elb-mockup-slide {
    flex: 0 0 calc(100vw - (var(--ea-mobile-page-pad) * 2)) !important;
    width: calc(100vw - (var(--ea-mobile-page-pad) * 2)) !important;
    min-width: calc(100vw - (var(--ea-mobile-page-pad) * 2)) !important;
    max-width: min(430px, calc(100vw - (var(--ea-mobile-page-pad) * 2))) !important;
    scroll-snap-align: none !important;
    margin: 0 !important;
  }

  #homeportfolio .elb-mockup-open {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 2 !important;
    touch-action: pan-x pan-y !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }

  #homeportfolio .elb-mockup-open img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    pointer-events: none !important;
    user-select: none !important;
    -webkit-user-drag: none !important;
  }
}

@media (max-width: 360px) {
  #homeportfolio .elb-mockup-slide {
    flex-basis: calc(100vw - 36px) !important;
    width: calc(100vw - 36px) !important;
    min-width: calc(100vw - 36px) !important;
    max-width: calc(100vw - 36px) !important;
  }
}