/* =========================
   Logo Carousel (seamless loop w/ track gap)
   ========================= */

.wp-block-gallery.logo-carousel {
  position: relative;
  overflow: hidden;
  display: block !important;

  --logo-h: 100px;
  --gap: 70px;       /* used both between logos (inside group) AND between groups (track gap) */
  --slot-w: 220px;
  --slot-h: 120px;
  --fade: 10%;
  --fade-bg: #fff;
}

/* Fade overlays */
.wp-block-gallery.logo-carousel::before,
.wp-block-gallery.logo-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--fade);
  z-index: 2;
  pointer-events: none;
}
.wp-block-gallery.logo-carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--fade-bg), rgba(255,255,255,0));
}
.wp-block-gallery.logo-carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--fade-bg), rgba(255,255,255,0));
}

/* Track has the gap (this creates the seam gap too) */
.wp-block-gallery.logo-carousel .marquee_track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--gap);
  width: max-content;

  will-change: transform;
  backface-visibility: hidden;
  /* remove transform here */
}

/* Each duplicated group */
.wp-block-gallery.logo-carousel .marquee_container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-shrink: 0;

  /* Gap between logos */
  gap: var(--gap);
}

/* Slot sizing */
.wp-block-gallery.logo-carousel figure.wp-block-image {
  margin: 0 !important;
  width: max-content !important;
  height: max-content;
  flex: 0 0 auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  contain: content;
}

/* Logo sizing */
.wp-block-gallery.logo-carousel figure.wp-block-image img {
  max-height: var(--logo-h) !important;
  max-width: 100% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
  display: block;
  image-rendering: auto !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wp-block-gallery.logo-carousel::before,
  .wp-block-gallery.logo-carousel::after {
    display: none;
  }
  .wp-block-gallery.logo-carousel .marquee_track {
    transform: none !important;
  }
}