/**
 * Partner logo marquee.
 *
 * Settings carried over from the Logo Marquee widget this replaces:
 *   visible items  5          item height    120px (fixed)
 *   speed          8000ms     item padding   5px
 *   direction      left       item border    1px solid
 *   image fit      contain    radius         0
 *   hover pause    no         gap            5px
 *
 * Sizing is driven by two custom properties set on the section, so the same
 * component works with any number of logos:
 *
 *   rail  = 2 sets              = 200% * count / visible
 *   set   = half the rail       = 50%
 *   item  = one of `count`      = 1/count of a set  ->  1/visible of the view
 *
 * Widths use margins rather than `gap`, because gap would sit between the two
 * sets as well and the -50% translate would no longer land exactly on the
 * seam.
 */

.deka-partners {
  /* The markup's count (desktop); the breakpoints below override it. */
  --deka-partner-visible: var(--deka-partner-visible-base, 5);

  width: min(100% - 2.5rem, var(--deka-container-wide));
  margin-inline: auto;
  padding-block: var(--deka-space-lg);
}

.deka-partners__viewport {
  overflow: hidden;
}

/*
 * `--deka-partner-speed` is the widget's own "Speed" number, which is NOT the
 * animation duration. That widget clones the logo list twice (4 sets) and sets
 *
 *     duration = speed * (children / 4) = speed * count
 *
 * over a -50% translate, i.e. 2 sets of travel. That works out at `speed / 2`
 * per logo. This rail carries 2 sets and -50% moves it by 1 set, so matching
 * that pace needs `speed * count / 2` — for 8 logos at 8000, 32s rather than
 * the 8s a literal reading gives, which ran four times too fast.
 */
.deka-partners__rail {
  display: flex;
  width: calc(200% * var(--deka-partner-count) / var(--deka-partner-visible));
  animation: deka-marquee
             calc(var(--deka-partner-speed) * var(--deka-partner-count) / 2)
             linear infinite;
  will-change: transform;
}

/* Deliberately no `:hover { animation-play-state: paused }` — the source
   setting is Autoplay Hover Pause: No. */

.deka-partners__set {
  display: flex;
  flex: 0 0 50%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.deka-partners__item {
  flex: 1 1 0;
  min-width: 0;
  height: 7.5rem; /* 120 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: 2.5px; /* 5px between neighbours */
  padding: 5px;
  border: 1px solid var(--deka-divider);
  border-radius: 0;
  background: var(--deka-surface-raised);
}

.deka-partners__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@keyframes deka-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/*
 * An endless sideways scroll is a common vestibular trigger, and unlike a
 * hover pause there is no way for a visitor to stop it. Under reduced motion
 * the rail holds still and becomes a normal scrollable row instead.
 */
@media (prefers-reduced-motion: reduce) {
  .deka-partners__rail {
    animation: none;
    width: auto;
  }

  .deka-partners__viewport {
    overflow-x: auto;
  }

  .deka-partners__set:last-child {
    display: none;
  }

  .deka-partners__item {
    flex: 0 0 calc(100% / var(--deka-partner-visible));
  }
}

@media (max-width: 64rem) { /* 1024 */
  .deka-partners { --deka-partner-visible: 3; }
}

/*
 * Phones, as on the live site at 375px: the row runs edge to edge with three
 * logos in view — 120×80 boxes, 5px apart, translucent white on the page with
 * a #D7D7D7 edge — and 20px before the next section.
 */
@media (max-width: 47.9375rem) { /* 767 */
  .deka-partners {
    --deka-partner-visible: 3;

    width: 100%;
    padding-block: 1.25rem; /* 20 each side, as live */
  }

  .deka-partners__item {
    height: 5rem; /* 80 */
    border-color: #d7d7d7;
    background: rgb(255 255 255 / 33%);
  }
}