/* Course strip: every course tile in one sideways-scrolling row with arrows (page.strip in build.js).
   First used on the H&S short courses page, 30 Oct 2026 (Ryan/Sue: each course gets its own title). */
.neb-strip { position: relative; margin: 0 -6px; }
.neb .neb-picker.is-strip {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding: 0 6px; scrollbar-width: none;
  padding: 8px 6px 20px; margin: 0;
}
.neb .neb-picker.is-strip::-webkit-scrollbar { display: none; }
.neb .is-strip .neb-pick { flex: 0 0 236px; scroll-snap-align: start; }
.neb .is-strip .neb-pick-name { padding-right: 0; }
.neb .is-strip .neb-pick-line { display: block; }

/* soft fade at whichever edge has more courses behind it */
.neb-strip.can-next .neb-picker.is-strip { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent); }
.neb-strip.can-prev .neb-picker.is-strip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px); mask-image: linear-gradient(90deg, transparent, #000 70px); }
.neb-strip.can-prev.can-next .neb-picker.is-strip { -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); }

.neb .neb-strip-btn {
  position: absolute; top: calc(50% - 6px); z-index: 2; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%; border: 0; padding: 0;
  background: var(--alv-teal); color: #fff; font-size: 18px; cursor: pointer;
  box-shadow: 0 8px 22px rgba(26, 40, 54, .25);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .2s ease, transform .2s ease, background .2s ease;
}
.neb .neb-strip-btn:hover { background: var(--alv-teal-dark); transform: translateY(-50%) scale(1.08); }
.neb .neb-strip-btn:focus-visible { outline: 3px solid #7fe3d6; outline-offset: 2px; }
.neb .neb-strip-btn.is-prev { left: -14px; }
.neb .neb-strip-btn.is-next { right: -14px; }
.neb .neb-strip-btn[disabled] { opacity: 0; pointer-events: none; }

/* "3 of 12" style progress under the strip */
.neb-strip-dots { display: flex; justify-content: center; gap: 6px; margin: -6px 0 6px; }
.neb .neb-strip-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d3dbe2; cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.neb .neb-strip-dots button.is-on { width: 22px; background: var(--alv-teal); }

@media (max-width: 991px) {
  .neb-strip { margin: 0 -15px; }
  .neb .neb-picker.is-strip { padding: 8px 15px 20px; scroll-padding: 0 15px; }
  .neb .is-strip .neb-pick { flex-basis: 220px; }
  .neb .neb-strip-btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .neb .neb-picker.is-strip { scroll-behavior: auto; }
}