/* ===========================================================================
   The rail: a row you swipe instead of a column you scroll past.

   One component, four places -- the courses on the landing page, the
   programmes on For business, the categories in the playbook directory and
   the journeys on About. A phone shows a card and a half, a laptop shows
   three or four; the same markup does both, because the track is a flex row
   with scroll snapping rather than a grid that has been told how many
   columns to have at each width.

   Everything here is prefixed `rl-` so it cannot collide with the page
   stylesheets, which all define their own card classes.
   =========================================================================== */

.rl{position:relative}

.rl-track{display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* The gutter the snap lands against, so a card never sits flush to the
     edge of the screen with its shadow cut in half. */
  scroll-padding:0 2px;padding:6px 2px 16px;
  /* No scrollbar: the dots say where you are, and a bar across the cards
     on a trackpad looks like a mistake. */
  scrollbar-width:none;-ms-overflow-style:none}
.rl-track::-webkit-scrollbar{display:none}
.rl-track>*{flex:0 0 auto;scroll-snap-align:start}

/* Items size themselves off the rail, not off their content: --rl-w is how
   wide one card is, and a page sets it per breakpoint. */
.rl-track>.rl-item{width:var(--rl-w,340px)}

@media (prefers-reduced-motion:reduce){
  .rl-track{scroll-behavior:auto}
}

/* --------------------------------------------------------------- arrows -- */
/* A pointer gets buttons; a thumb gets the swipe it already expects. */
.rl-arr{position:absolute;top:calc(50% - 22px);z-index:3;width:44px;height:44px;
  display:none;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line-2,#E1E6EE);border-radius:999px;
  color:var(--ink,#0D084D);cursor:pointer;
  box-shadow:0 6px 20px rgba(13,8,77,.10);
  transition:transform .2s,box-shadow .2s,opacity .2s}
.rl-arr svg{width:18px;height:18px;display:block}
.rl-arr.prev{left:-18px}
.rl-arr.next{right:-18px}
.rl-arr:hover{transform:scale(1.06);box-shadow:0 10px 26px rgba(13,8,77,.16)}
.rl-arr:disabled{opacity:0;pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .rl.rl-on .rl-arr{display:flex}
}

/* ----------------------------------------------------------------- dots -- */
/* No gap: each button already carries its own space around the dot. */
.rl-dots{display:none;justify-content:center;gap:0;margin-top:4px}
.rl.rl-on .rl-dots{display:flex}
/* The dot you see is drawn inside the button; the button itself is the
   size of the thing you are aiming at. Doing it the other way round -- a
   7px button with its hit area hung off a pseudo-element -- works, and
   measures as a 7px control, which is what it is. */
.rl-dots button{width:22px;height:28px;padding:0;border:none;background:none;
  display:grid;place-items:center;cursor:pointer}
.rl-dots button::before{content:"";width:7px;height:7px;border-radius:999px;
  background:var(--line-2,#E1E6EE);transition:width .25s,background .25s}
.rl-dots button[aria-current="true"]::before{width:22px;background:var(--ink,#0D084D)}
@media (pointer:coarse){
  .rl-dots button{height:44px}
}

/* A rail with nothing to scroll to is a plain row: no arrows, no dots, and
   the items spread rather than huddling at the left. */
.rl:not(.rl-on) .rl-track{scroll-snap-type:none}