/* AEKE .sg — scrolling-images section: the workout-style strip.
 *
 * A port of the theme's `scrolling-images.css`, reduced to the parts our markup uses.
 * The theme also ships `scrolling-images.js`, for drag-to-scroll and manual
 * navigation; the live page has `data-manual-scroll="false"`, so the CSS animation is
 * what actually runs there and the script buys nothing we need. Skipping it means the
 * strip also works with scripting off.
 *
 * MEASURED AGAINST THE LIVE SITE:
 *   items a fixed 251px square (the same at 375, 768, 1024 and 1440 — it is a setting,
 *   not a formula), 10px apart on a phone and 20px from 768, 4px radius, label 18/26
 *   white 30px below the artwork, marquee 50s linear, section margin-bottom 70 (50 on
 *   a phone) and no top margin.
 *
 * THE MARQUEE NEEDS THE ITEMS TWICE. It translates the track by exactly -50%, so the
 * track has to hold two identical copies; the second one is what slides into view as
 * the first leaves. The template renders both and marks the second `aria-hidden`, so
 * the labels are announced once.
 *
 * `--marquee-speed` is the full loop time. 50s over eleven 271px items is slow enough
 * to read and slow enough that nobody notices where it restarts.
 */

.scrolling-images {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.scrolling-images--inner {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 10;
  width: 100%;
  overflow: hidden;
}

/* `white-space: nowrap` keeps the items on one line whatever the width; the track is
   allowed to be far wider than the viewport, and the animation is what moves it. */
.scrolling-images--container {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.scrolling-images:not(.scrolling-images--manual) .scrolling-images--inner.direction-left .scrolling-images--container {
  animation: marquee-left var(--marquee-speed, 50s) linear infinite;
}

.scrolling-images:not(.scrolling-images--manual) .scrolling-images--inner.direction-right .scrolling-images--container {
  animation: marquee-right var(--marquee-speed, 50s) linear infinite;
}

@keyframes marquee-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes marquee-right {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* --------------------------------------------------------------- items */

.scrolling-images--item {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  /* Inert, and worth stating anyway: a flex item's automatic minimum size already
     floors these at their 251px content width, which is why the live track measures
     5962px instead of being squeezed into the 1051px viewport. Naming it means the
     marquee's geometry does not quietly depend on that default. */
  flex-shrink: 0;
  user-select: none;
}

.scrolling-images--spacing-small .scrolling-images--item,
.scrolling-images--spacing-medium .scrolling-images--item {
  margin: 0 5px;
}

.scrolling-images--spacing-large .scrolling-images--item {
  margin: 0 5px;
}

@media (min-width: 48em) {
  .scrolling-images--spacing-medium .scrolling-images--item {
    margin: 0 10px;
  }

  .scrolling-images--spacing-large .scrolling-images--item {
    margin: 0 15px;
  }
}

/* `width` comes from the content as `--scrolling-item-width`. The live page repeats
   `width: 251px` inline on all twenty-two items; naming it once on the row says the
   same thing without twenty-two copies of it. */
.scrolling-images--image {
  position: relative;
  isolation: isolate;
  width: var(--scrolling-item-width, 251px);
  max-width: 70vw;
  border-radius: var(--block-border-radius);
}

@media (min-width: 48em) {
  .scrolling-images--image {
    max-width: 100%;
  }
}

.scrolling-images--content {
  margin-top: 30px;
}

.scrolling-images--content h3 {
  margin: 0 0 10px;
  color: var(--color-heading);
}

/* -------------------------------------------------------- reduced motion */

/* A marquee that cannot be stopped is a vestibular hazard, and it is also unreadable
   to anyone who needs longer than 50 seconds with it. When motion is reduced the
   animation stops and the row becomes an ordinary horizontal scroller, so the content
   stays reachable rather than simply freezing off-screen.

   The theme has no such rule — on the live site the strip never stops. This is the
   deliberate divergence. */
@media (prefers-reduced-motion: reduce) {
  .scrolling-images:not(.scrolling-images--manual) .scrolling-images--inner .scrolling-images--container {
    animation: none;
  }

  .scrolling-images--inner {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}