/* NextBricksExtensions Marquee (frontend) */
.nbe-marquee{
  overflow: hidden;
  width: 100%;
}

/* Optional: edge fade (JS toggles vars, CSS reads them) */
.nbe-marquee[data-fade="true"]{
  --nbe-fade-size: 48px;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--nbe-fade-size),
    #000 calc(100% - var(--nbe-fade-size)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--nbe-fade-size),
    #000 calc(100% - var(--nbe-fade-size)),
    transparent 100%
  );
}

.nbe-marquee__inner{
  display: flex;
  width: max-content;
  gap: var(--nbe-gap, 32px); /* Critical: ensures clones are visually separated */
  will-change: transform;
  transform: translateZ(0);
}

.nbe-marquee__track{
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  gap: var(--nbe-gap, 32px);
  align-items: center;
}

/* Let mixed content keep intrinsic widths, but prevent overflow resizing issues */
.nbe-marquee__track > *{
  flex: 0 0 auto;
  max-width: none;  /* Remove limit so long nowrap text can expand fully without overlapping neighbors */
  width: var(--nbe-item-width, auto); /* Responsive item width control */
}

/* Fix images/media sometimes loading with 0 width or exploding layout */
.nbe-marquee img,
.nbe-marquee svg,
.nbe-marquee video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Items (blocks) may contain text; prevent default margins from causing jitter */
.nbe-marquee__track p,
.nbe-marquee__track h1,
.nbe-marquee__track h2,
.nbe-marquee__track h3,
.nbe-marquee__track h4,
.nbe-marquee__track h5,
.nbe-marquee__track h6{
  margin: 0;
}

/* Drag/swipe interaction */
.nbe-marquee--dragging {
  cursor: grabbing !important;
  user-select: none;
}

.nbe-marquee--drag-desktop {
  cursor: grab;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .nbe-marquee__inner{
    transform: none !important;
  }
}