/* ==========================================================================
   partner-logos.css — "Our partners" logo strip.
   Requires common.css.

   An endless, slowly scrolling row of logos. The track holds the logo set
   twice and moves left by half its width, so the loop is seamless. Pauses
   on hover / keyboard focus; with reduced motion the logos sit still and
   wrap instead.
   ========================================================================== */

.partner-logos {
  background: #fff;
}

.partner-logos__inner {
  padding-top: 3.9rem;
  padding-bottom: 3.9rem;
}

.partner-logos__header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.partner-logos__title {
  margin: 0;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.2;
}

.partner-logos__description {
  margin: 1rem auto 0;
  max-width: 60rem;
  font-size: 1.5rem;
  line-height: 1.6;
  color: rgba(var(--text-color), 0.75);
}

/* --- Strip ---------------------------------------------------------------- */
.partner-logos__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.partner-logos__track {
  display: flex;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: partner-logos-scroll var(--partner-logos-duration, 50s) linear infinite;
}

.partner-logos__viewport:hover .partner-logos__track,
.partner-logos__viewport:focus-within .partner-logos__track {
  animation-play-state: paused;
}

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

/* Spacing is padding, not gap, so both halves are exactly the same width. */
.partner-logos__item {
  flex: 0 0 auto;
  width: 14rem;
  padding: 0 1.5rem;
}

@media (min-width: 750px) {
  .partner-logos__item {
    width: 20rem;
    padding: 0 2.5rem;
  }
}

.partner-logos__link,
.partner-logos__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
}

@media (min-width: 750px) {
  .partner-logos__link,
  .partner-logos__logo {
    height: 9rem;
  }
}

.partner-logos__link:focus-visible {
  outline: 2px solid rgb(var(--text-color));
  outline-offset: 4px;
}

.partner-logos__image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: filter 0.3s ease, opacity 0.3s ease;
}

.partner-logos--grayscale .partner-logos__image {
  filter: grayscale(1);
  opacity: 0.7;
}

.partner-logos--grayscale .partner-logos__item:hover .partner-logos__image,
.partner-logos--grayscale .partner-logos__link:focus-visible .partner-logos__image {
  filter: none;
  opacity: 1;
}

/* --- Reduced motion: no scrolling, one set of logos wrapped and centred --- */
@media (prefers-reduced-motion: reduce) {
  .partner-logos__viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }

  .partner-logos__track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2rem;
    animation: none;
  }

  .partner-logos__item--clone {
    display: none;
  }
}