/* HOMEPAGE 9, sponsors. Owned by #sponsors.

   The organisations the wiki already names as working with us, and only
   those: the heading on the left, their logos running on the right.

   THE MARQUEE is CSS only. The track holds the list twice, the second copy
   aria-hidden with its links out of the tab order, and slides left by
   exactly one copy (-50%), so the loop has no seam. Each copy is at least as
   wide as the window onto it (100cqw of .sp-run), with the logos spaced
   evenly inside it, so a short list still fills the row. It pauses while the
   pointer is on it or a logo has focus. Only transform moves.

   Logos sit in one ink (greyscale, a little faded) and take their own colour
   back on hover and focus. The edges fade through a mask.

   Reduced motion: no movement, the copy is gone and the logos sit in one
   wrapped row. Without scripting nothing changes: there is no script. */

.sp { padding-top: 0; }
.sp__grid {
  display: grid; gap: var(--sp-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}
@media (min-width: 900px) {
  /* 7 Oct: the column holds the larger title on one line */
  .sp__grid { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); column-gap: var(--sp-7); }
}

.sp__title {
  margin: 0;
  font-family: var(--font-display);
  /* 7 Oct (owner): a step up from the page's h2 */
  font-size: clamp(1.875rem, 1.25rem + 1.9vw, 3rem);
  font-weight: 700; line-height: 1.14; letter-spacing: -.018em;
  color: var(--leaf-900);
  text-wrap: balance;
}

.sp-run {
  container-type: inline-size;
  overflow: hidden;
  padding-block: var(--sp-3);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sp-track {
  display: flex; width: max-content;
  animation: sp-run 70s linear infinite;   /* longer list, same pace */
}
.sp-run:hover .sp-track,
.sp-run:focus-within .sp-track { animation-play-state: paused; }
@keyframes sp-run { to { transform: translateX(-50%); } }

.sp-list {
  flex: none;
  display: flex; align-items: center; justify-content: space-around;
  gap: var(--sp-7);
  min-width: 100cqw;
  margin: 0; padding: 0 calc(var(--sp-7) / 2);
  list-style: none;
}
.sp-list li { flex: none; }
.sp-list a {
  display: block; border-radius: var(--radius-sm);
  text-decoration: none;
}
.sp-list a:focus-visible { outline: 2px solid var(--leaf-700); outline-offset: 6px; }
.sp-list img {
  display: block; width: auto;
  filter: grayscale(1); opacity: .7;
  transition: filter .3s ease, opacity .3s ease;
}
/* optical sizes: the Green Media mark carries a line of small type under
   its name, so it stands taller than the one-line ISLSDR mark */
.sp-list .sp-logo--gm { height: 3.5rem; }
.sp-list .sp-logo--islsdr { height: 2.25rem; }
.sp-list a:hover img,
.sp-list a:focus-visible img { filter: none; opacity: 1; }

@media (max-width: 639px) {
  .sp-list .sp-logo--gm { height: 3rem; }
  .sp-list .sp-logo--islsdr { height: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-track { animation: none; width: auto; }
  .sp-list[aria-hidden="true"] { display: none; }
  .sp-list { flex-wrap: wrap; justify-content: flex-start; min-width: 0; padding: 0; gap: var(--sp-5) var(--sp-6); }
  .sp-run { -webkit-mask-image: none; mask-image: none; }
  .sp-list img { transition: none; }
}

/* 1 Oct: the logos and names sit close together, not spread across the
   row (students), and the list is the organisations Human Practices names
   (owner, round 2). A name without a logo file is set in quiet type at a
   logo's weight. The track is two identical lists, each wider than the
   window, so the loop is seamless. */
.sp-list {
  min-width: 0; justify-content: flex-start;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: 0 calc(clamp(2rem, 4vw, 3.5rem) / 2);
}
.sp-name {
  display: block; white-space: nowrap;
  font-size: clamp(.95rem, .85rem + .35vw, 1.15rem);
  font-weight: 600; letter-spacing: -.005em;
  color: var(--gray-500);
}

/* 30 Sep, round 4 (owner): fixed-width units, about three in view. Every
   unit is a third of the strip; its logo sits centred in a box of one
   height and its name sits on one line under it, so the logos share a
   centre line and the names share a baseline across the row. Full colour,
   no grey-out. */
.sp-list { gap: 0; padding: 0; min-width: 0; }
.sp-unit {
  flex: none; width: calc(100cqw / 3);
  display: grid; grid-template-rows: 4.5rem auto; row-gap: .75rem;
  justify-items: center; align-items: center;
  padding: 0 var(--sp-4); text-align: center;
}
.sp-unit__logo { display: grid; place-items: center; width: 100%; height: 4.5rem; }
.sp-list .sp-unit__logo img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: none; opacity: 1;
}
.sp-unit__name {
  align-self: start;
  font-size: .8125rem; font-weight: 600; line-height: 1.3;
  color: var(--gray-600);
  text-wrap: balance;
}
.sp-mark { width: 3rem; height: 3rem; fill: none; stroke: var(--leaf-700); stroke-width: 2; stroke-linecap: round; }
.sp-mark__l { fill: var(--leaf-500); stroke: none; }
.sp-mark__l--b { fill: var(--leaf-700); }
.sp-track { animation-duration: 70s; }   /* 14 units at the pace 9 had in 45s */
@media (max-width: 639px) {
  .sp-unit { width: calc(100cqw / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .sp-list { flex-wrap: wrap; row-gap: var(--sp-5); }
}