/* Logo strip (library block, T18; moving row T18a).
   A short heading over one row of logos that scrolls left without end, with
   faded edges, as in the prototype (its marquee keyframes, mask 0-12% / 88-100%).

   Default (and under prefers-reduced-motion): the still layout from T18 -
   the first set only, centred, wrapping: 3 per row on phones, 4 on tablets,
   from 1200 px up to 8 in one row (9 to 12 logos: at most 6 per row).

   prefers-reduced-motion: no-preference: the moving row. Every logo sits in
   a cell of fixed width, so the view knows how many copies fill the strip
   (8 cells per half track, always wider than the strip; see logoStrip.cshtml).
   The track moves by half its width per loop. The loop time is
   cells per half x seconds per cell, so the speed stays near the prototype's
   (about 43 px a second: 1717 px in 40 s) whatever the number of logos.
   Hover and keyboard focus pause it. The optional Pause button
   (js/blocks/logoStrip.js; only with the editor option "Show pause button",
   off by default per decision #57, T46a) stops it until pressed again.
   Tokens only: no colour or size values of its own. */

.logo-strip__heading {
  max-width: var(--container-text);
  margin: 0 auto var(--space-7);
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  color: var(--color-eyebrow);
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
}

/* ---- Still layout (T18): reduced motion, and the base for the moving row ---- */

.logo-strip__list {
  --logo-strip-col-gap: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-4) var(--logo-strip-col-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.logo-strip__copy { display: none; }

.logo-strip__item {
  flex: 0 0 calc((100% - 2 * var(--logo-strip-col-gap)) / 3);
  min-width: 0;
  height: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-strip__item > picture { display: contents; }

.logo-strip__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--space-10);
  object-fit: contain;
}

@media (min-width: 768px) {
  .logo-strip__list {
    --logo-strip-col-gap: var(--space-10);
    row-gap: var(--space-8);
  }
  .logo-strip__item {
    flex-basis: var(--space-32);
    height: calc(var(--space-12) + var(--space-2));
  }
  .logo-strip__logo { max-height: var(--space-12); }
}

@media (min-width: 1200px) {
  .logo-strip__item { flex-basis: calc(var(--space-32) + var(--space-4)); }
  /* 9 to 12 logos: at most 6 per row, so 12 sit as 6 + 6. */
  .logo-strip__list:not(.logo-strip__list--one-row) {
    max-width: calc(6 * (var(--space-32) + var(--space-4)) + 5 * var(--logo-strip-col-gap));
    margin-inline: auto;
  }
  .logo-strip__list--one-row { flex-wrap: nowrap; }
  .logo-strip__list--one-row > .logo-strip__item { flex-shrink: 1; }
}

/* Pause / Play (editor option, off by default): shown by the script only when the row moves. Same shape as the
   hero carousel's control (44 px circle), in the light secondary colours. */
.logo-strip__controls {
  display: flex;
  justify-content: center;
}
.logo-strip__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--tap-min);
  height: var(--tap-min);
  margin-top: var(--space-6);
  padding: 0;
  border: var(--border-width) solid var(--btn-secondary-border);
  border-radius: var(--radius-pill);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-fg);
  cursor: pointer;
  transition: var(--transition-control);
}
.logo-strip__toggle[hidden] { display: none; }
.logo-strip__toggle:hover {
  border-color: var(--btn-hover-bg);
  background: var(--btn-hover-bg);
  color: var(--btn-hover-fg);
}
.logo-strip__icon-play { display: none; }
.logo-strip[data-state="paused"] .logo-strip__icon-play { display: block; }
.logo-strip[data-state="paused"] .logo-strip__icon-pause { display: none; }

/* ---- Moving row ---- */

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

@media (prefers-reduced-motion: no-preference) {
  .logo-strip {
    /* One cell = logo box + gap after it; seconds per cell keep ~43 px a second. */
    --logo-strip-cell: var(--space-32);
    --logo-strip-gap: var(--space-10);
    --logo-strip-cell-time: 3.9s;
  }

  /* The mask only uses alpha: "black" means fully shown, not a colour on screen. */
  .logo-strip__viewport {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, black 12%, black 88%, transparent 100%);
  }

  .logo-strip__track {
    display: flex;
    width: max-content;
    animation: logoStripMarquee calc(var(--logo-strip-cells, 8) * var(--logo-strip-cell-time)) linear infinite;
  }

  .logo-strip__track > .logo-strip__list {
    display: flex;
    flex: none;
    flex-wrap: nowrap;
    gap: 0;
    max-width: none;
    margin: 0;
  }

  .logo-strip__track .logo-strip__item {
    flex: 0 0 var(--logo-strip-cell);
    width: var(--logo-strip-cell);
    margin-right: var(--logo-strip-gap);
  }

  /* Hover or keyboard focus pauses; the Pause button stops it. After the button
     is pressed, its choice wins until the pointer or focus leaves the strip. */
  .logo-strip[data-state="paused"] .logo-strip__track,
  .logo-strip:not([data-override]):hover .logo-strip__track,
  .logo-strip:not([data-override]):focus-within .logo-strip__track {
    animation-play-state: paused;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
  .logo-strip {
    --logo-strip-cell: var(--space-32);
    --logo-strip-gap: var(--space-12);
    --logo-strip-cell-time: 4.1s;
  }
}

@media (prefers-reduced-motion: no-preference) and (min-width: 1200px) {
  .logo-strip {
    --logo-strip-cell: var(--space-40);
    --logo-strip-gap: var(--space-16);
    --logo-strip-cell-time: 5.2s;
  }
}

/* No button when the row stands still. */
@media (prefers-reduced-motion: reduce) {
  .logo-strip__controls { display: none; }
}