/*
  Logo strip (logoStripBlock, MB-38 from Boyd's logo strip; contract umbraco/blocks/logoStripBlock.md).
  Default (and with prefers-reduced-motion): the still layout - the first set only, centred and wrapping: 3 a row on
  phones, 4 or more from 768 px, from 1200 px up to 8 in one row (9 to 20 logos: at most 6 a row).
  prefers-reduced-motion: no-preference: one row that scrolls left without end, with faded edges. Every logo sits in
  a cell of fixed width; the view repeats the set so each half of the track has at least 8 cells, and the track moves
  by half its width per loop. Loop time = cells per half x seconds per cell, so more logos make a longer loop, not a
  faster one (about 45 px a second). Hover and keyboard focus pause it; the optional Pause button stops it.
  MB-51, same visual area: the view gives each cell its logo's shape (--logo-ratio, width / height, from LogoShape) and the
  class logo-strip__item--shaped. Logos up to 2.5 times as wide as tall keep the full height (the look before); a wider logo
  gets height x sqrt(2.5 / ratio) and the matching width (the same area as a 2.5 logo), at most 192 px wide, and its cell grows
  to fit (the moving row's loop time counts the wider cells, so the speed stays). Without a shape a logo is sized as before:
  the full height, at most the cell's width.
  MB-109 options, set by the view on the section (nothing set = all of the above): Seconds per logo writes
  --logo-strip-cell-time; Logos in view (logo-strip--in-view, --logo-strip-view-1..5 for from 1201, 993-1200, 769-992,
  577-768 and up to 576 px) gives every logo an equal slot, the row's width divided by that number, with the gap inside the
  slot (a shaped logo keeps its area rule but no wider than the slot), so the row moves one slot per --logo-strip-cell-time
  and its speed in px a second follows the width; Full width (logo-strip--full) runs the moving row from screen edge to
  screen edge, whatever the page's column (the heading and button keep the column; the still layout is unchanged); Pause on hover and focus Off
  (logo-strip--no-hover-pause; the view then always shows the Pause button); Faded edges Off (logo-strip--no-fade).
  Reduced motion and the Pause button are unchanged.
  Tokens only. Site hooks: --logo-strip-cell-time, --logo-strip-logo-height.
*/
.logo-strip { padding: var(--section-space) var(--page-gutter); }
.logo-strip__inner { max-width: var(--container-max); margin: 0 auto; }

.logo-strip__heading {
  max-width: var(--container-text);
  margin: 0 auto var(--space-8);
  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;
}

.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 {
  --logo-strip-basis: calc((100% - 2 * var(--logo-strip-col-gap)) / 3);
  --logo-strip-h: var(--logo-strip-logo-height, var(--space-10));
  flex: 0 0 var(--logo-strip-basis);
  min-width: 0;
  height: var(--space-12);
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-strip__item picture { display: contents; }
.logo-strip__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; }
.logo-strip__link:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.logo-strip__logo {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: var(--logo-strip-logo-height, var(--space-10));
  object-fit: contain;
}
.logo-strip__item--shaped {
  --logo-strip-shaped-h: calc(var(--logo-strip-h) * min(1, sqrt(2.5 / var(--logo-ratio))));
  --logo-strip-shaped-w: min(calc(2 * var(--space-24)), calc(var(--logo-strip-shaped-h) * var(--logo-ratio)));
  flex-basis: max(var(--logo-strip-basis), var(--logo-strip-shaped-w));
  max-width: 100%;
}
.logo-strip__item--shaped .logo-strip__logo {
  flex: none;
  width: var(--logo-strip-shaped-w);
  max-height: none;
}

@media (min-width: 768px) {
  .logo-strip__list { --logo-strip-col-gap: var(--space-10); row-gap: var(--space-8); }
  .logo-strip__item {
    --logo-strip-basis: calc(var(--space-24) + var(--space-8));
    --logo-strip-h: var(--logo-strip-logo-height, var(--space-12));
    height: calc(var(--space-12) + var(--space-2));
  }
  .logo-strip__logo { max-height: var(--logo-strip-logo-height, var(--space-12)); }
}
@media (min-width: 1200px) {
  .logo-strip__item { --logo-strip-basis: calc(var(--space-24) + var(--space-12)); }
  .logo-strip__list:not(.logo-strip__list--one-row) {
    max-width: calc(6 * (var(--space-24) + var(--space-12)) + 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 (Show pause button): shown by the script only while the row moves. Same pill as the Hero's. */
.logo-strip__controls { display: flex; justify-content: center; margin-top: var(--space-6); }
.logo-strip__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: var(--border-width-heavy, 2px) solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-body-sm);
  cursor: pointer;
}
.logo-strip__toggle[hidden] { display: none; }
.logo-strip__toggle:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.logo-strip__toggle-icon { width: 0.75rem; height: 0.875rem; border-inline: 0.25rem solid currentColor; }
.logo-strip[data-state="paused"] .logo-strip__toggle-icon {
  height: 0;
  border: 0;
  border-left: 0.75rem solid currentColor;
  border-block: 0.4375rem solid transparent;
}

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

@media (prefers-reduced-motion: no-preference) {
  .logo-strip {
    --logo-strip-cell: calc(var(--space-24) + var(--space-8));
    --logo-strip-gap: var(--space-10);
  }
  .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, 3.9s)) 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);
  }
  .logo-strip__track .logo-strip__item--shaped {
    flex-basis: max(var(--logo-strip-cell), var(--logo-strip-shaped-w));
    width: max(var(--logo-strip-cell), var(--logo-strip-shaped-w));
    max-width: none;
  }
  /* Hover or keyboard focus pauses; the Pause button stops it. After the button is pressed, its choice wins until
     the pointer and focus leave the strip (data-override). */
  .logo-strip[data-state="paused"] .logo-strip__track,
  .logo-strip:not([data-override]):not(.logo-strip--no-hover-pause):hover .logo-strip__track,
  .logo-strip:not([data-override]):not(.logo-strip--no-hover-pause):focus-within .logo-strip__track {
    animation-play-state: paused;
  }

  /* MB-109 options. */
  .logo-strip--no-fade .logo-strip__viewport { -webkit-mask-image: none; mask-image: none; }
  /* Full width: the moving row runs the window's width, whatever the page's main column (as the Hero). */
  .logo-strip--full .logo-strip__viewport { margin-inline: calc(50% - 50vw); }

  .logo-strip--in-view { --logo-strip-in-view: var(--logo-strip-view-5); }
  .logo-strip--in-view .logo-strip__viewport { container-type: inline-size; }
  .logo-strip--in-view .logo-strip__track .logo-strip__item,
  .logo-strip--in-view .logo-strip__track .logo-strip__item--shaped {
    --logo-strip-slot: calc(100cqw / var(--logo-strip-in-view));
    flex: 0 0 var(--logo-strip-slot);
    width: var(--logo-strip-slot);
    max-width: none;
    margin-right: 0;
    padding-inline: calc(min(var(--logo-strip-gap), var(--logo-strip-slot) / 4) / 2);
  }
  .logo-strip--in-view .logo-strip__track .logo-strip__item--shaped .logo-strip__logo { max-width: 100%; }
}
/* 100vw includes a desktop scrollbar: clip the few pixels instead of adding a sideways scroll (clip keeps sticky headers). */
@media (prefers-reduced-motion: no-preference) {
  body:has(.logo-strip--full) { overflow-x: clip; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 577px) {
  .logo-strip--in-view { --logo-strip-in-view: var(--logo-strip-view-4); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 769px) {
  .logo-strip--in-view { --logo-strip-in-view: var(--logo-strip-view-3); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 993px) {
  .logo-strip--in-view { --logo-strip-in-view: var(--logo-strip-view-2); }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1201px) {
  .logo-strip--in-view { --logo-strip-in-view: var(--logo-strip-view-1); }
}