/* Module: Logo Strip */
.jhg-logo-strip {
  overflow-x: clip;
  max-width: 100%;
}
.jhg-logo-strip-marquee {
  --jhg-logo-gap: clamp(1.25rem, 4vw, 5rem);
  width: 100%;
  overflow: hidden;
  height: 8rem;
  display: flex;
  align-items: center;
}
.jhg-logo-strip-track {
  /* Set inline by jhg_render_logo_marquee(); this keeps the keyframe valid on its own. */
  --jhg-logo-copies: 3;
  display: flex;
  width: max-content;
  will-change: transform;
  animation: jhg-logo-marquee 40s linear infinite;
}

.jhg-logo-strip-list {
  list-style: none;
  margin: 0;
  /* Trailing gap, so spacing across the seam between copies matches spacing within a copy */
  padding: 0 var(--jhg-logo-gap) 0 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--jhg-logo-gap);
  height: 3rem;
}

.jhg-logo-strip-divider {
  margin-bottom: var(--jhg-section-gap);
}
.jhg-logo-strip-item {
  flex: 0 1 auto;
}
.jhg-logo-strip-item img {
  display: block;
  max-width: 10rem;
  max-height: 2.0625rem;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: opacity 0.2s ease;
}

.jhg-logo-strip-item img:hover {
  opacity: 1;
}

/* One copy per cycle. Hover slow-down is applied in JS via playback rate, because
   swapping animation-duration mid-cycle makes the track jump. */
@keyframes jhg-logo-marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% / var(--jhg-logo-copies)));
  }
}

@media (max-width: 992px) {
  .jhg-logo-strip-marquee {
    height: 6.5rem;
  }
  .jhg-logo-strip-track {
    animation-duration: 36s;
  }
  .jhg-logo-strip-item img {
    max-height: 1.875rem;
    max-width: 9.375rem;
  }
}

@media (max-width: 576px) {
  .jhg-logo-strip-marquee {
    height: 6rem;
  }
  .jhg-logo-strip-track {
    animation-duration: 32s;
  }
  .jhg-logo-strip-item img {
    max-height: 1.625rem;
    max-width: 8.125rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jhg-logo-strip-track {
    animation: none;
    transform: none;
  }
}