/* ============================================================
   Image Marquee Plugin — image-marquee.css
   ============================================================ */

/* ── Reset / full-width bleed ──────────────────────────────── */
.imgmq-wrapper {
  --imgmq-height:    120px;
  --imgmq-gap:       40px;
  --imgmq-direction: normal;
  --imgmq-duration:  20s;  /* overridden by JS */

  position: relative;
  width: 100%;
  overflow: hidden;

  /* Break out of any container max-width (Beaver Builder, etc.) */
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;

  /* Fade edges for a polished look */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

/* ── Track: flex row holding all duplicate strips ──────────── */
.imgmq__track {
  display: flex;
  flex-direction: row;
  width: max-content;
  will-change: transform;
  animation: imgmq-scroll var(--imgmq-duration) linear infinite;
  animation-direction: var(--imgmq-direction);
}

/* ── Individual strip (one full set of images) ─────────────── */
.imgmq__strip {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--imgmq-gap);
  padding-right: var(--imgmq-gap); /* trailing gap to match leading */
  flex-shrink: 0;
}

/* ── Each item (link or span wrapper) ──────────────────────── */
.imgmq__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  text-decoration: none;
  cursor: default;
  outline: none;
}

a.imgmq__link {
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

a.imgmq__link:hover,
a.imgmq__link:focus-visible {
  opacity: 0.80;
  transform: scale(1.04);
}

a.imgmq__link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
  border-radius: 2px;
}

/* ── Images ────────────────────────────────────────────────── */
.imgmq__strip img {
  display: block;
  flex-shrink: 0;
  object-fit: contain;
  user-select: none;
  pointer-events: none; /* let the <a> handle clicks */
}

/* ── Pause on hover (JS adds/removes class) ────────────────── */
.imgmq-wrapper.is-paused .imgmq__track {
  animation-play-state: paused;
}

/* ── Keyframe ──────────────────────────────────────────────── */
@keyframes imgmq-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.3333%); } /* one strip width out of 3 duplicates */
}

/* ── Beaver Builder: cancel any column / module max-widths ─── */
.fl-builder .imgmq-wrapper,
.fl-module .imgmq-wrapper,
.fl-row-content .imgmq-wrapper {
  position: relative;
}

/* ── Respect reduced-motion preference ────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .imgmq__track {
    animation: none;
  }
  .imgmq-wrapper {
    overflow-x: auto;
  }
}