/* ═══════════════════════════════════════════════
   Logo Wall Widget — logo-wall.css
   ═══════════════════════════════════════════════ */

/* Wrapper: clips overflow & anchors the fade overlays */
.lww-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* ── Scrolling track ─────────────────────────────── */
.lww-track {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 48px;           /* fallback; overridden by Elementor control */
  width: max-content;  /* let content dictate width */
  will-change: transform;
}

/* Pause via CSS class (toggled by JS on hover) */
.lww-wrapper.lww-paused .lww-track {
  animation-play-state: paused !important;
}

/* ── Individual logo item ────────────────────────── */
.lww-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  user-select: none;
}

.lww-logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.lww-logo img {
  display: block;
  height: 48px;        /* fallback; overridden by Elementor control */
  width: auto;
  max-width: none;
  object-fit: contain;
  opacity: 0.6;
  transition: opacity 300ms ease, filter 300ms ease;
  pointer-events: none; /* let <a> handle the click */
}

.lww-logo a .lww-logo img,
.lww-logo a:hover img {
  pointer-events: auto;
}

.lww-logo img:hover,
.lww-logo a:hover img {
  opacity: 1;
}

/* ── Edge fade overlays ──────────────────────────── */
/*
   The ::before / ::after pseudo-elements are positioned
   absolutely so they sit on top of the scrolling track.
   Their gradient colour is fed from a CSS custom property
   that the JS writes to the wrapper element.
*/
.lww-wrapper.lww-has-fade::before,
.lww-wrapper.lww-has-fade::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--lww-fade-width, 120px);
  z-index: 2;
  pointer-events: none;
}

.lww-wrapper.lww-has-fade::before {
  left: 0;
  background: linear-gradient(
    to right,
    var(--lww-fade-color, #ffffff) 0%,
    transparent 100%
  );
}

.lww-wrapper.lww-has-fade::after {
  right: 0;
  background: linear-gradient(
    to left,
    var(--lww-fade-color, #ffffff) 0%,
    transparent 100%
  );
}

/* ── Animation keyframes ─────────────────────────── */
/*
   Two directions. JS picks the right one and writes
   the animation-name + animation-duration to the track.
*/
@keyframes lww-scroll-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes lww-scroll-right {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}

/* ── Accessibility: respect reduced motion ───────── */
@media (prefers-reduced-motion: reduce) {
  .lww-track {
    animation: none !important;
  }
}