/* Course rails — the sideways-scrolling shelves of course thumbnails.
   Shared by /tbs, /courses and /bird-tbs-learning-hub (the last one for its
   Members' Media rails only — the course catalog itself lives at /courses).

   Why a rail and not a grid: 28 thumbnails laid out as a wall buries every
   other section on the page. Scrolling sideways keeps a hub a hub.

   The cost of that choice is discoverability — people were not realising the
   rails moved. Three signals fix it, and they are all driven by
   /js/course-rails.js: the cards fade out at whichever edge has more content,
   a "Scroll" hint sits in the rail head until you have scrolled, and desktop
   gets real arrow buttons because there is no swipe with a mouse. */

.crs-rail{margin:0 0 30px;position:relative}
.crs-rail:last-child{margin-bottom:0}
.crs-head{display:flex;align-items:flex-start;gap:14px;margin:0 0 14px;
  padding-bottom:11px;border-bottom:1px solid var(--line)}
.crs-num{font-family:var(--serif);font-size:26px;line-height:1;color:var(--red);
  font-weight:600;min-width:34px}
.crs-head h3{font-family:var(--serif);color:var(--navy);font-size:19px;margin:0;line-height:1.2}
.crs-head p{margin:2px 0 0;font-size:12.5px;color:var(--muted)}
.crs-track{display:flex;gap:13px;overflow-x:auto;padding-bottom:6px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.crs-track::-webkit-scrollbar{height:6px}
.crs-track::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.crs-card{flex:0 0 232px;scroll-snap-align:start;margin:0;background:#fff;
  border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.crs-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--red)}
.crs-card img{display:block;width:100%;height:auto}
.crs-card figcaption{padding:10px 13px 12px;border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:2px}
.crs-name{font-family:var(--serif);font-size:14px;font-weight:600;color:var(--navy);line-height:1.25}
.crs-sub{font-size:11.5px;color:var(--muted)}
/* the NISM artwork is 3:2, not 4:3 — a wider card keeps it from reading as cropped */
.crs-rail-wide .crs-card{flex-basis:290px}

/* The bonus rail carries a star where the others carry a numeral: it is a
   bonus, not track six, but it still has to start on the same text column or
   the whole stack looks misaligned. The star sits in the numeral's slot and
   takes the same red, so the column holds without pretending to be a number. */
/* Measured, not guessed: at the numerals' own 26px the star's ink top lands on
   exactly the same pixel as a "V", and it dips 2px below the baseline where the
   numeral sits on it. Inheriting the size and lifting 1px puts the two optical
   centres within half a pixel. At 22px it sat three pixels low, which is what
   made the column look crooked. */
.crs-star{display:inline-block;transform:translateY(-1px)}

/* ── 1. the cards fade out where there is more to see ───────────────────────
   A mask on the track, not a coloured gradient over it: the rails sit on a
   cream band here and could sit on any band later, and a mask does not care
   what is behind it. --fl and --fr are set by the script; both start at 0 so a
   rail that fits shows no fade at all. */
.crs-track{--fl:0px;--fr:0px;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),
                     #000 calc(100% - var(--fr)),transparent 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 var(--fl),
                     #000 calc(100% - var(--fr)),transparent 100%);
  transition:-webkit-mask-image .2s ease,mask-image .2s ease}

/* ── 2. the hint, until you have actually scrolled ──────────────────────────
   Sits in the rail head beside the course count, so it reads as part of the
   label rather than as a floating button. It removes itself the moment the
   rail is scrolled — a hint that stays after you have taken it is nagging. */
.crs-hint{display:inline-flex;align-items:center;gap:5px;margin-left:10px;
  font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--red);vertical-align:middle;white-space:nowrap;
  opacity:1;transition:opacity .25s ease}
.crs-rail.crs-touched .crs-hint{opacity:0;pointer-events:none}
.crs-hint .crs-arw{display:inline-block;animation:crsNudge 1.7s ease-in-out infinite}
@keyframes crsNudge{0%,60%,100%{transform:translateX(0)}30%{transform:translateX(4px)}}

/* ── 3. arrow buttons, desktop only ─────────────────────────────────────────
   A mouse has no swipe. Hidden on touch widths, where the hint and the fade
   are the whole story and a button would just cover a card. */
.crs-nav{position:absolute;top:calc(50% + 18px);transform:translateY(-50%);
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);
  background:rgba(255,255,255,.94);color:var(--navy);cursor:pointer;
  display:none;align-items:center;justify-content:center;font-size:17px;line-height:1;
  box-shadow:var(--shadow-sm);transition:opacity .2s ease,border-color .18s ease,background .18s ease;
  z-index:2;padding:0}
.crs-nav:hover{border-color:var(--red);color:var(--red);background:#fff}
.crs-nav:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.crs-nav[hidden]{display:none!important}
.crs-nav-prev{left:4px}
.crs-nav-next{right:4px}
@media (min-width:900px){
  .crs-rail.crs-scrollable .crs-nav{display:flex}
}
@media (max-width:620px){
  .crs-hint{margin-left:0;display:flex;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){
  .crs-track{scroll-behavior:auto}
  .crs-hint .crs-arw{animation:none}
}