/* Horizontal scrolling card strip, the header row above it and the
   arrow buttons that drive it. Consumers: portfolio_gallery(), Teachers,
   Reviews. The arrows are also reused on their own by the portfolio
   lightbox, which has no track. */

.scroll-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-inline: var(--section-padding-x);
  margin-bottom: var(--section-name-to-section);
}
@media (max-width: 988px) {
  .scroll-header { padding-inline: var(--section-padding-x-mobile); }
}

.scroll-track {
  display: flex;
  align-items: flex-start;
  width: 100%;
  gap: var(--gap-content-to-cta);
  overflow-x: auto;
  /* Explicit: overflow-x:auto alone computes overflow-y to auto, which
     gave this a phantom vertical scroll. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--section-padding-x);
  scrollbar-width: none;
}
.scroll-track::-webkit-scrollbar { display: none; }
/* Inset at rest, cards bleeding to the real screen edge while scrolling.
   Must be margin on the cards plus scroll-padding — container padding or
   a spacer element both break scroll-snap-align. */
.scroll-track > :first-child { margin-inline-start: var(--section-padding-x); }
.scroll-track > :last-child { margin-inline-end: var(--section-padding-x); }
@media (max-width: 988px) {
  .scroll-track { scroll-padding-inline: var(--section-padding-x-mobile); }
  .scroll-track > :first-child { margin-inline-start: var(--section-padding-x-mobile); }
  .scroll-track > :last-child { margin-inline-end: var(--section-padding-x-mobile); }
}

.scroll-nav {
  display: flex;
  align-items: center;
  gap: 11px;
  flex: none;
}
/* The arrows take the shared flair hover (accent, as FAQ's rows). The
   icon file carries its own white disc, so the fill sits above it and
   multiplies through: green on the disc, black stays black. The
   button is rounded so the fill is clipped to the disc. */
.scroll-nav .nav-arrow {
  border-radius: 50%;
  --button-flair-color: var(--color-accent);
}
.scroll-nav .button-flair__fill {
  z-index: 1;
  mix-blend-mode: multiply;
}
/* At the track's start/end (set by scroll-track.js): no hover fill. */
.scroll-nav .nav-arrow[aria-disabled="true"] .button-flair__fill {
  display: none;
}
@media (max-width: 700px) {
  .scroll-nav { display: none; }
}

.nav-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(30px, calc(7.297px + 3.2432vw), 54px);
  height: clamp(30px, calc(7.297px + 3.2432vw), 54px);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.nav-arrow img { display: block; width: 100%; height: 100%; }
.nav-arrow--prev img { transform: scaleX(-1); }
.nav-arrow:disabled { opacity: 0.35; cursor: default; }