/* ============================================================================
   United Way of Rhode Island — the drag rail, shared
   Pairs with rail.js. Loaded anywhere a rail appears: the board directory and
   both newsroom bands. Page-specific sizing (how wide a card is, what happens
   to the rail during a search) stays with the page's own stylesheet.
   ========================================================================== */

.uwb-rail-wrap {
  position: relative;
  --uwb-ease: cubic-bezier(.22, 1, .36, 1);
}

.uwb-rail {
  display: flex;
  gap: clamp(16px, 1.9vw, 30px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Never native-smooth. The rail eases every deliberate move itself, and the
     loop wrap is meant to be an instant, invisible jump — handing either to the
     browser's smooth scroller made the drift compound frame on frame (it kept
     retargeting an animation already in flight) and turned the wrap into a
     visible sprint back through the whole set. */
  scroll-behavior: auto;
  overscroll-behavior-inline: contain;
  scroll-padding-left: 0;
  padding: 34px 0 40px;                 /* room for the hover lift + shadow */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
}
.uwb-rail::-webkit-scrollbar { display: none; }
.uwb-rail:focus-visible { outline: 3px solid var(--uw-gold); outline-offset: 4px; border-radius: 14px; }
.uwb-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.uwb-rail.is-dragging > * { pointer-events: none; }

/* Every rail item keeps its own width and never stretches, so the cards read
   as upright posts sitting side by side rather than one full-width slab. */
.uwb-rail > .uwb-card,
.uwb-rail > .uwn-card {
  flex: 0 0 auto;
  scroll-snap-align: start;
}
/* Without a loop, mandatory snapping will not let the rail rest past the last
   snap point, so the final card needs an end-aligned one. A looping rail has
   no last card, and the rule would fight the wrap. */
.uwb-rail:not(.is-loop) > .uwb-card:last-child,
.uwb-rail:not(.is-loop) > .uwn-card:last-child { scroll-snap-align: end; }
.uwb-rail.is-loop { scroll-snap-type: none; }   /* the wrap sets scrollLeft itself */

/* coverflow: rail.js writes --d (0 at the rail centre, 1 at the edge) */
.uwb-js .uwb-rail > .uwb-card,
.uwb-js .uwb-rail > .uwn-card {
  transform: scale(calc(1 - var(--d, 0) * .1)) translateY(calc(var(--d, 0) * 10px));
  opacity: calc(1 - var(--d, 0) * .38);
}
.uwb-js .uwb-rail > .uwb-card:hover,
.uwb-js .uwb-rail > .uwn-card:hover {
  transform: scale(calc(1.02 - var(--d, 0) * .1)) translateY(-8px);
  opacity: 1;
}
/* clones exist only to make the loop seamless; a flat rail parks them */
.uwb-rail.is-flat > [data-clone] { display: none !important; }

/* entrance: the cards fan in once, when the rail first scrolls into view */
.uwb-js .uwb-rail-wrap:not(.is-in) .uwb-card,
.uwb-js .uwb-rail-wrap:not(.is-in) .uwn-card {
  opacity: 0;
  transform: translateY(34px) rotate(var(--tilt, 0deg));
}
.uwb-js .uwb-rail-wrap .uwb-card,
.uwb-js .uwb-rail-wrap .uwn-card { transition-delay: var(--stagger, 0ms); }
.uwb-js .uwb-rail-wrap.is-in .uwb-card,
.uwb-js .uwb-rail-wrap.is-in .uwn-card { transition-delay: 0ms; }

/* ── the controls under the rail ────────────────────────────────────────── */
.uwb-rail__nav {
  display: flex; align-items: center; gap: clamp(12px, 1.4vw, 20px);
  margin-top: clamp(4px, .6vw, 10px);
}
.uwb-rail__btn {
  width: 52px; height: 52px; flex: none;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .1); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: background-color .25s ease, color .25s ease, transform .3s var(--uwb-ease), opacity .25s ease;
}
.uwb-rail__btn svg { width: 18px; height: 18px; }
.uwb-rail__btn:hover { background: #fff; color: var(--uw-navy); transform: scale(1.06); }
.uwb-rail__btn[disabled] { opacity: .3; cursor: default; transform: none; }
.uwb-rail__track {
  position: relative; flex: 1; height: 4px; border-radius: 4px;
  background: rgba(255, 255, 255, .22); overflow: hidden;
}
.uwb-rail__fill {
  position: absolute; inset: 0;
  background: var(--uw-gold); border-radius: 4px;
  transform-origin: left center;
  transform: scaleX(.2);
  transition: transform .3s ease;
}
.uwb-rail__pos {
  font-family: var(--uw-display); font-weight: 600; font-size: clamp(13px, 1vw, 16px);
  letter-spacing: .04em; color: rgba(255, 255, 255, .82); flex: none;
  font-variant-numeric: tabular-nums;
}
.uwb-rail__hint {
  margin: 10px 0 0;
  font-size: 13px; font-weight: 700; letter-spacing: .02em;
  color: rgba(255, 255, 255, .55);
}
.uwb-rail-wrap[hidden] { display: none !important; }
.uwb-rail-wrap.is-flat .uwb-rail__nav,
.uwb-rail-wrap.is-flat .uwb-rail__hint { display: none; }

@media (prefers-reduced-motion: reduce) {
  .uwb-rail__btn { transition: none !important; }
  .uwb-js .uwb-rail > .uwb-card,
  .uwb-js .uwb-rail > .uwn-card { transform: none !important; opacity: 1 !important; }
  .uwb-js .uwb-rail-wrap:not(.is-in) .uwb-card,
  .uwb-js .uwb-rail-wrap:not(.is-in) .uwn-card { opacity: 1; transform: none; }
}

/* ── capped cards ────────────────────────────────────────────────────────
   Cards past the rail's cap. Not removed from the page — a search flattens
   the rail and clears the cap, so everything stays findable. */
.uwb-rail > .is-capped { display: none !important; }