/* One horizontal rail for every carousel: People, Data Stories, charts and songs.

   Markup contract (see eraluma/templates/components/rail_arrows.html):
     .rail[data-rail]
       .rail__head            heading + .rail__arrows (arrows only on precise pointers)
       ul.rail__track[data-rail-track]  > li.rail__item > .rail-card
       .rail__progress > span[data-rail-progress]

   Native scroll snapping does the work; static/js/rail.js adds the arrows, one-card
   arrow-key steps and the progress bar. Cards own their content styles; the shared
   look (radius, shadow, scrim, pill) lives here. */
.rail {
  /* The track bleeds to the container's edge by exactly its gutter; a fixed rem once
     bled 4px past 360px phones and scrolled the whole page sideways. */
  --rail-bleed: calc(var(--bs-gutter-x, 1.5rem) * .5);
  --rail-gap: 14px;
  --rail-radius: 18px;
  --rail-card-w: 240px;
  --rail-card-w-phone: 70vw;
  --rail-card-max: 270px;
  --rail-card-bg: #fff;
  --rail-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 26px -10px rgba(15, 23, 42, .28);
  --rail-line: rgba(15, 23, 42, .12);
  --rail-thumb: #0f172a;
  --rail-arrow-bg: #fff;
  --rail-arrow-ink: #0f172a;
  --rail-arrow-line: rgba(15, 23, 42, .14);
  position: relative;
  min-width: 0;
}
.rail--dark {
  --rail-shadow: 0 14px 30px -12px rgba(0, 0, 0, .7);
  --rail-line: rgba(255, 255, 255, .18);
  --rail-thumb: rgba(255, 255, 255, .9);
  --rail-arrow-bg: rgba(255, 255, 255, .08);
  --rail-arrow-ink: #f8fafc;
  --rail-arrow-line: rgba(255, 255, 255, .22);
}

.rail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.rail__head > :first-child { min-width: 0; }

.rail__track {
  display: flex;
  gap: var(--rail-gap);
  margin: 0 calc(-1 * var(--rail-bleed));
  padding: .35rem var(--rail-bleed) 1.15rem;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--rail-bleed);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track:focus-visible { outline: 2px solid #22d3ee; outline-offset: -2px; border-radius: var(--rail-radius); }

.rail__item { flex: 0 0 var(--rail-card-w); display: flex; min-width: 0; scroll-snap-align: start; }
.rail__item > * { flex: 1 1 auto; min-width: 0; }
/* The next card peeks in on phones, so the rail reads as scrollable without a scrollbar. */
@media (max-width: 640px) {
  .rail__item { flex-basis: min(var(--rail-card-w-phone), var(--rail-card-max)); }
}

/* Per-rail card widths. */
.rail--people { --rail-card-w: 236px; --rail-card-w-phone: 66vw; --rail-card-max: 260px; }
.rail--stories { --rail-card-w: 320px; --rail-card-w-phone: 80vw; --rail-card-max: 320px; }
.rail--charts { --rail-card-w: 330px; --rail-card-w-phone: calc(100vw - 80px); --rail-card-max: 330px; }
.rail--songs { --rail-card-w: 224px; --rail-card-w-phone: 62vw; --rail-card-max: 250px; }

/* Arrows: only where a precise pointer can hover. Touch devices scroll and read the progress bar. */
.rail__arrows { display: none; gap: .5rem; }
@media (hover: hover) and (pointer: fine) {
  .rail__arrows { display: flex; }
}
.rail__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  border: 1px solid var(--rail-arrow-line); border-radius: 50%;
  background: var(--rail-arrow-bg); color: var(--rail-arrow-ink);
  font-size: 1.05rem; line-height: 1; cursor: pointer;
}
.rail__arrow:hover { border-color: currentColor; }
.rail__arrow:focus-visible { outline: 3px solid #22d3ee; outline-offset: 2px; }
.rail__arrow[disabled] { opacity: .35; cursor: default; }

/* Slim progress bar under the rail: how far along the track the view is. */
.rail__progress { width: 96px; max-width: 40%; height: 3px; margin: .1rem auto 0; border-radius: 3px; background: var(--rail-line); overflow: hidden; }
.rail__progress > span { display: block; width: 30%; height: 100%; border-radius: inherit; background: var(--rail-thumb); transform: translateX(0); }
.rail:not([data-rail-ready]) .rail__progress,
.rail--static .rail__progress { visibility: hidden; }

/* ── Shared card look ─────────────────────────────────────────────────────── */
.rail .rail-card { position: relative; border: 0; border-radius: var(--rail-radius); background: var(--rail-card-bg); box-shadow: var(--rail-shadow); overflow: hidden; }
/* Full-bleed media on top of a card; overlay cards carry their text on a scrim over it. */
.rail .rail-card__media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #0f172a; }
.rail .rail-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rail .rail-card__scrim {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3.25rem .9rem .85rem;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0) 0%, rgba(2, 6, 23, .6) 36%, rgba(2, 6, 23, .92) 100%);
  color: #fff;
}
.rail .rail-pill {
  display: inline-block; max-width: 100%;
  padding: .2rem .6rem; border-radius: 999px;
  font-size: .66rem; font-weight: 700; letter-spacing: .08em; line-height: 1.35; text-transform: uppercase;
  background: rgba(255, 255, 255, .2); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .rail .rail-card { transition: transform .2s ease, box-shadow .2s ease; }
  .rail .rail-card:hover { transform: translateY(-3px); }
}

/* Motion: smooth steps and a gliding bar only for visitors who have not asked for less. */
@media (prefers-reduced-motion: no-preference) {
  .rail__track { scroll-behavior: smooth; }
  .rail__progress > span { transition: transform .12s linear, width .12s linear; }
}
@media (prefers-reduced-motion: reduce) {
  .rail__track { scroll-behavior: auto; }
  .rail, .rail * { transition: none !important; animation: none !important; }
}