/* Reel: one row running off the right edge, snapping per item, with a counter and two square steps.
   Set --card-w on the .reel for the item width. Used by Speakers S2 and Last year R3. */
.reel__controls {
  display: flex;
  align-items: end;
  justify-content: flex-end;
  gap: var(--sp-inset-xs);
}

.reel__count {
  display: flex;
  align-items: baseline;
  gap: var(--sp-inset-xs);
  margin-inline-end: auto;
  font-variant-numeric: tabular-nums;
}

.reel__count b {
  font-family: var(--font-display);
  font-size: var(--type-heading);
  line-height: 0.8;
}

.reel__count span {
  font-size: var(--text-small);
  line-height: 1;
}

.reel__step {
  display: grid;
  place-items: center;
  width: var(--ctl-xl);
  aspect-ratio: 1;
  border-width: 0;
  border-radius: var(--r-containers);
  background: var(--step-ground, var(--palette-lapis-blue));
  color: var(--step-ink, var(--inverse-foreground));
  font: inherit;
  font-size: var(--type-lead);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--duration-quick) var(--ease-standard);
}

.reel__step:hover:not(:disabled) {
  transform: translateY(calc(var(--sp-optical) * -1));
}

.reel__step:focus-visible {
  outline-color: var(--focus, var(--palette-lapis-blue));
}

/* At an end the step swaps to its quiet pair: still square, plainly unavailable. On a lapis ground set the
   four --step-* properties (see recap.css). */
.reel__step:disabled {
  background: var(--step-off-ground, var(--background));
  color: var(--step-off-ink, var(--palette-lapis-blue));
  cursor: default;
}

@media (prefers-reduced-motion: reduce) {
  .reel__step {
    transition: none;
  }
}

.reel {
  --card-w: min(78vw, calc(var(--sp-section) * 3.15));
  margin-top: calc(var(--sp-section) * 0.5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--lay-gutter);
  /* No scrollbar: it drew a line under the strip, and the counter and the steps already say where you are. */
  scrollbar-width: none;
}

.reel::-webkit-scrollbar {
  display: none;
}

.reel:focus-visible {
  outline-offset: calc(var(--sp-optical) * -1);
}

.reel__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--card-w);
  gap: var(--sp-stack-md);
  width: max-content;
  padding: 0 var(--lay-gutter) var(--sp-stack-md);
}

.reel__strip > * {
  scroll-snap-align: start;
}