/*! CCRI slider - v1.0.2 - layout for .news-slider-2025, .events-slider-2025, .campuses-slide
 * Cards per view (--per-view) per screen width mirror the old Slick settings.
 * Works before any JavaScript runs; ccri-slider.js only moves the cards.
 */
div.news-slider-2025,
div.events-slider-2025,
div.campuses-slide {
  display: flex !important;
  gap: 1.8em;
  position: relative;
  --per-view: 5;
  --x: 0px;
  touch-action: pan-y;
  align-items: flex-start; /* each card keeps its natural height, like Slick */
}
div.events-slider-2025 { --per-view: 4; }

div.news-slider-2025 > :not(.slick-arrow),
div.events-slider-2025 > :not(.slick-arrow),
div.campuses-slide > :not(.slick-arrow) {
  /* Same card width Slick produced: (width / per-view) minus the gap shared across all cards.
     --n (number of cards) is set by the script; 10 is a sensible default before it runs. */
  flex: 0 0 calc(100% / var(--per-view) - 1.8em * (var(--n, 10) - 1) / var(--n, 10));
  min-width: 0;
  transform: translateX(var(--x));
}
.ccri-slider-animate > :not(.slick-arrow) { transition: transform .5s ease; }
.ccri-slider-dragging { cursor: grabbing; user-select: none; }
.ccri-slider-dragging a { pointer-events: none; }
.slick-arrow.slick-hidden { display: none; }

/* Same breakpoints as the old Slick settings (Slick switched below each width) */
@media (max-width: 1599.98px) {
  div.news-slider-2025, div.campuses-slide { --per-view: 4; }
}
@media (max-width: 1399.98px) {
  div.news-slider-2025, div.campuses-slide, div.events-slider-2025 { --per-view: 3; }
}
@media (max-width: 949.98px) {
  div.news-slider-2025, div.campuses-slide, div.events-slider-2025 { --per-view: 2; }
}
@media (max-width: 599.98px) {
  div.news-slider-2025, div.campuses-slide, div.events-slider-2025 { --per-view: 1; }
}

/* Old Slick image rule, re-targeted (cards are no longer wrapped in .slick-slide) */
.news-slider-2025 .news-slider-item img {
  display: block;
  transition: all 0.4s;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  width: 100%;
}
@media (prefers-reduced-motion: reduce) {
  .news-slider-2025 .news-slider-item img { transition: none; }
  .ccri-slider-animate > :not(.slick-arrow) { transition: none; }
}