/*
 * skpa_slider: a horizontally scrolling, snapping strip of cards (used first for the Facilities
 * preview; any later section - gallery, events, toppers - can reuse the same three classes).
 * No third-party library. Works fully without JS: the viewport is a native scroll container with
 * CSS scroll-snap, so touch swipe, trackpad and keyboard all move it. slider.js only adds the
 * optional arrow buttons on top and is progressive enhancement, per the frontend rules.
 */
.skpa_slider { position: relative; }

.skpa_slider__viewport {
  display: flex;
  gap: var(--sb-space-4);
  margin: 0 -0.25rem;
  padding: 0.25rem 0.25rem var(--sb-space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.skpa_slider__viewport::-webkit-scrollbar { height: 0.4rem; }
.skpa_slider__viewport::-webkit-scrollbar-thumb { background: var(--sb-border); border-radius: 999px; }

/* One item per view on phones, two on tablets, three from desktop width up. */
.skpa_slider__item { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; }
@media (min-width: 40rem) { .skpa_slider__item { flex-basis: calc(50% - var(--sb-space-2)); } }
@media (min-width: 64rem) { .skpa_slider__item { flex-basis: calc(33.333% - var(--sb-space-3)); } }

/* One item per view at every width (certificates: a single large card, not a multi-per-view
   strip) - higher specificity than the two media-query rules above, so it wins at every size. */
.skpa_slider--single .skpa_slider__item { flex-basis: 100%; }

/* Arrow buttons: hidden in the markup, revealed by slider.js once it runs. */
.skpa_slider__nav {
  position: absolute; top: 45%; transform: translateY(-50%); z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0; color: var(--sb-navy);
  background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: 50%;
  box-shadow: var(--sb-shadow); cursor: pointer;
}
.skpa_slider__nav:hover { color: #fff; background: var(--sb-navy); }
.skpa_slider__nav:disabled { opacity: 0.35; cursor: default; }
.skpa_slider__nav:disabled:hover { color: var(--sb-navy); background: var(--sb-surface); }
.skpa_slider__prev { left: -0.6rem; }
.skpa_slider__next { right: -0.6rem; }
.skpa_slider__nav[hidden] { display: none; }

/* One card inside the strip. */
.skpa_slide { display: block; height: 100%; overflow: hidden; text-decoration: none; background: var(--sb-surface); border: 1px solid var(--sb-border); border-radius: var(--sb-radius-sm); }
.skpa_slide__img { display: block; width: 100%; height: 11rem; object-fit: cover; background: linear-gradient(135deg, var(--sb-navy), var(--sb-blue)); }
.skpa_slide__body { padding: var(--sb-space-3) var(--sb-space-4); }
.skpa_slide__title { margin: 0; font-size: var(--sb-text-md); font-weight: 600; color: var(--sb-navy); }
.skpa_slide__desc { margin: var(--sb-space-1) 0 0; color: var(--sb-text-muted); font-size: var(--sb-text-sm); }