/* partner-roll — heading left, scrolling logo track right.
 *
 * Built as a native scroll-snap track rather than a JS carousel: it works
 * without script, it is keyboard and touch scrollable for free, and the
 * buttons only need to nudge scrollLeft. See handoff/design-decisions.md.
 */

/* Rob's change 2026-08-21: 2rem on top, nothing below. The band sits
 * directly under a feature-split plate and does not need to be pushed off
 * it — the plate's own margin already separates them. */
.proll {
  background: none;
  padding-block: var(--space-md) 0;
}

.proll__inner {
  display: grid;
  /* The heading is set at --step-3 and does not wrap, so a fixed min track
   * let it run under the carousel. `max-content` gives it exactly the room it
   * needs and the track hands the rest to the logos. */
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xl);
}

.proll__head { color: var(--color-charcoal); }
.proll__heading { white-space: nowrap; }

.proll__viewport {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-xs);
}

.proll__track {
  display: flex;
  gap: var(--space-2xs);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
.proll__track::-webkit-scrollbar { display: none; }

.proll__item {
  background: none;
  flex: 0 0 clamp(7rem, 5.8125rem + 3.958vw, 9.375rem);
  scroll-snap-align: start;
  display: grid;
  place-items: center;
  height: clamp(5rem, 4.1875rem + 2.708vw, 6.625rem);
  padding: var(--space-3xs);
  background: var(--color-bg);
}
.proll__item img {
  width: auto;
  max-height: 100%;
}

.proll__nav {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  color: var(--color-charcoal);
  border-radius: 50%;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.proll__nav svg { width: 24px; height: 24px; }
.proll__nav:hover { background: rgb(0 0 0 / 0.06); }
.proll__nav:active { background: rgb(0 0 0 / 0.12); }
/* site.js sets .disabled at the ends of the track. Nothing styled it, so the
 * buttons looked live while doing nothing. */
.proll__nav:disabled {
  opacity: 0.25;
  cursor: default;
  background: none;
}

/* Logos are supplied at wildly different weights and colours, so the row
 * reads as noise. Resting them at reduced contrast and bringing the hovered
 * one to full lets the row read as one band without turning them grey —
 * which the mockup shows in colour. */
.proll__item img {
  opacity: 0.72;
  transition: opacity var(--dur-base) var(--ease-out);
}
.proll__item:hover img,
.proll__item:focus-within img { opacity: 1; }

@media (max-width: 992px) {
  .proll__inner { grid-template-columns: 1fr; gap: var(--space-md); }
  .proll__heading { white-space: normal; }
}
@media (max-width: 768px) {
  /* Buttons are redundant once the track is touch-scrollable at this width. */
  .proll__nav { display: none; }
  .proll__viewport { grid-template-columns: 1fr; }
}