/* R10-CAMP-01 · Partner logo carousel: the shared .logos strip with data-marquee-always.
   controller.js builds the endless marquee at every width for it (never the desktop pager),
   but site.css only styles .is-marquee at <=900px, so the rules are repeated here for all
   widths, with one logo box for every state so nothing jumps when the marquee starts. */

/* flush left before JS too, where the marquee starts, so the row doesn't shift when it begins */
.logos[data-marquee-always] .logo-track {
  flex-wrap: nowrap; justify-content: flex-start;
  width: max-content; max-width: none; gap: 80px;
  margin: 0; padding: 0;
}
/* fixed height + contain: the box is known before the image arrives, so the loop measures right */
.logos[data-marquee-always] .logo-track img {
  height: 48px; width: auto; max-height: none; max-width: 170px; object-fit: contain;
}

/* pre-JS, no-JS and reduced motion (.is-scrollable): one row that swipes, no repeats */
.logos[data-marquee-always]:not(.is-marquee) { overflow-x: auto; scrollbar-width: none; }
.logos[data-marquee-always]:not(.is-marquee)::-webkit-scrollbar { display: none; }
.logos[data-marquee-always]:not(.is-marquee) .cb-logo-dup { display: none; }
/* reduced motion never gets the marquee: keep the strip's usual centred row inside the gutter */
.logos[data-marquee-always].is-scrollable .logo-track { margin: 0 auto; padding: 0 var(--gutter); }
@media (prefers-reduced-motion: reduce) {
  .logos[data-marquee-always]:not(.is-marquee) .logo-track { margin: 0 auto; padding: 0 var(--gutter); }
}

/* the running marquee */
.logos[data-marquee-always].is-marquee .logo-track { gap: 0; will-change: transform; }
.logos[data-marquee-always].is-marquee .logo-group {
  display: flex; align-items: center; gap: 80px;
  padding-right: 80px; flex: none;
}

/* this strip never pages */
.logos[data-marquee-always] .logo-dots { display: none; }

@media (max-width: 900px) {
  .logos[data-marquee-always] .logo-track { gap: 52px; }
  .logos[data-marquee-always].is-marquee .logo-group { gap: 52px; padding-right: 52px; }
  .logos[data-marquee-always] .logo-track img { height: 44px; max-width: 132px; }
}

/* Background option (white / sand / light blue; the strip has no edge fade to recolour).
   Most partner logos are dark marks on an opaque white box, which would show as white tiles on
   sand or light blue: multiply drops the white into the band colour and keeps the ink. It sits
   on the track (not each logo) because the running marquee's transform isolates the images. */
.cb-partner_logos.cb-bg-sand .logo-track,
.cb-partner_logos.cb-bg-water .logo-track { mix-blend-mode: multiply; }