/* =========================================================
   Logo Loop by Dycode — frontend styles
   ========================================================= */

.dycode_logo_loop .dll {
  position: relative;
  width: 100%;
  min-height: var(--dll-logo-height, 48px);
  overflow: hidden;
  --dll-gap: 48px;
  --dll-logo-height: 48px;
  --dll-base-color: currentColor;
  --dll-hover-color: currentColor;
  --dll-fade-color: #ffffff;
}

/* Visible placeholder when a logo has no image (also a quick diagnostic). */
.dycode_logo_loop .dll-logo--empty {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--dll-logo-height, 48px);
  min-width: 90px;
  padding: 0 12px;
  font-size: 12px;
  line-height: 1;
  color: currentColor;
  opacity: 0.6;
  border: 1px dashed currentColor;
  border-radius: 4px;
  white-space: nowrap;
}

/* ---- Track + sequence (flex marquee) ---- */
.dycode_logo_loop .dll-track {
  display: flex;
  align-items: center;
  gap: var(--dll-gap);
  width: max-content;
  will-change: transform;
  user-select: none;
}

.dycode_logo_loop .dll-seq {
  display: flex;
  align-items: center;
  gap: var(--dll-gap);
}

/* Whatever wrapper Divi gives each child, make it a clean, centered flex item.
   !important defeats Divi's mobile module margins that misalign items. */
.dycode_logo_loop .dll-seq > * {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  display: flex;
  align-items: center;
  align-self: center;
}

/* ---- Vertical variant ---- */
.dycode_logo_loop .dll--vertical {
  height: 100%;
}
.dycode_logo_loop .dll--vertical .dll-track,
.dycode_logo_loop .dll--vertical .dll-seq {
  flex-direction: column;
  width: 100%;
  height: max-content;
}

/* ---- The logo itself ---- */
.dycode_logo_loop .dll-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  outline-offset: 3px;
}

.dycode_logo_loop .dll-logo {
  display: inline-flex;
  align-items: center;
  --dll-src: none;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              background-color 0.3s ease;
  transform-origin: center center;
}

.dycode_logo_loop .dll-img {
  height: var(--dll-logo-height);
  width: auto;
  display: block;
  object-fit: contain;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

/* ---- Paint mode: recolor logos via mask ----
   The (hidden) <img> keeps the natural box size; the <span> is
   masked to the logo shape and filled with the chosen color. */
.dycode_logo_loop .dll--paint .dll-img {
  visibility: hidden;
}
.dycode_logo_loop .dll--paint .dll-logo {
  -webkit-mask: var(--dll-src) center / contain no-repeat;
          mask: var(--dll-src) center / contain no-repeat;
  background-color: var(--dll-base-color);
}
.dycode_logo_loop .dll--paint .dll-link:hover .dll-logo,
.dycode_logo_loop .dll--paint .dll-logo:hover {
  background-color: var(--dll-hover-color);
}

/* ---- Zoom on hover ---- */
.dycode_logo_loop .dll--scale .dll-link:hover .dll-logo,
.dycode_logo_loop .dll--scale .dll-logo:hover {
  transform: scale(1.18);
}

/* Give the zoom room so logos aren't clipped by the container's overflow. */
.dycode_logo_loop .dll--scale {
  padding-top: calc(var(--dll-logo-height, 48px) * 0.16);
  padding-bottom: calc(var(--dll-logo-height, 48px) * 0.16);
}
.dycode_logo_loop .dll--vertical.dll--scale {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: calc(var(--dll-logo-height, 48px) * 0.16);
  padding-right: calc(var(--dll-logo-height, 48px) * 0.16);
}

/* ---- Edge fade ---- */
.dycode_logo_loop .dll--fade::before,
.dycode_logo_loop .dll--fade::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(24px, 8%, 140px);
  pointer-events: none;
  z-index: 2;
}
.dycode_logo_loop .dll--fade::before {
  left: 0;
  background: linear-gradient(to right, var(--dll-fade-color) 0%, rgba(0, 0, 0, 0) 100%);
}
.dycode_logo_loop .dll--fade::after {
  right: 0;
  background: linear-gradient(to left, var(--dll-fade-color) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Vertical fade */
.dycode_logo_loop .dll--vertical.dll--fade::before,
.dycode_logo_loop .dll--vertical.dll--fade::after {
  left: 0;
  right: 0;
  width: 100%;
  height: clamp(24px, 8%, 140px);
}
.dycode_logo_loop .dll--vertical.dll--fade::before {
  top: 0;
  bottom: auto;
  background: linear-gradient(to bottom, var(--dll-fade-color) 0%, rgba(0, 0, 0, 0) 100%);
}
.dycode_logo_loop .dll--vertical.dll--fade::after {
  bottom: 0;
  top: auto;
  background: linear-gradient(to top, var(--dll-fade-color) 0%, rgba(0, 0, 0, 0) 100%);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .dycode_logo_loop .dll-track {
    transform: none !important;
  }
  .dycode_logo_loop .dll-logo {
    transition: none !important;
  }
}