/*
  Horizontal card rail.

  Two genuinely different interaction models behind one markup block:

    Desktop (>=900px, motion allowed, GSAP present) — rail.js pins the
    section and drives the track sideways from the vertical scroll. The
    page keeps scrolling normally; only the track moves horizontally.

    Everything else (phones, tablets, reduced-motion, no-JS) — native
    overflow-x with scroll-snap. Real momentum, real swipe, no JS needed.

  The fallback is the default in CSS and the pinned mode is opt-in via the
  .is-pinned class rail.js adds, so if the script never runs the rail is
  still a perfectly usable swipeable row rather than a broken pinned box.
*/

.m-rail-section{position:relative;padding-block:var(--section-y);overflow:hidden;}

.m-rail-viewport{
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  /* Full-bleed edges: the rail runs to the viewport edge so cards are cut
     off rather than boxed in, which is what signals "this scrolls". */
  margin-inline:calc(var(--gutter) * -1);
  padding-inline:var(--gutter);
  padding-block:var(--s-2) var(--s-5);
}
.m-rail-viewport::-webkit-scrollbar{display:none;}

.m-rail-track{
  display:flex;gap:clamp(var(--s-4), 2vw, var(--s-6));
  width:max-content;
}

/* Pinned mode: rail.js drives translateX, so the native scroll container
   must stand down or the two fight over the same axis. */
.m-rail-section.is-pinned{overflow:visible;}
.m-rail-section.is-pinned .m-rail-viewport{
  overflow:hidden;scroll-snap-type:none;
  margin-inline:0;padding-inline:0;
}
.m-rail-section.is-pinned .m-rail-track{will-change:transform;}

/* ---------- Card ---------- */
.m-rail-card{
  /* Sized so the row always overflows its viewport and the next card is
     visibly cut by the edge. That half-card peek is the affordance: a row
     that happens to fit exactly reads as a static three-up grid and gives
     the visitor no reason to drag it. */
  flex:0 0 clamp(300px, 35vw, 500px);
  scroll-snap-align:start;
  display:flex;flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  overflow:hidden;
  text-decoration:none;color:inherit;
  transition:border-color var(--dur-mid) var(--ease-out),
             box-shadow var(--dur-mid) var(--ease-out),
             transform var(--dur-mid) var(--ease-out);
}
.m-rail-card:hover{
  border-color:var(--accent-line);
  box-shadow:var(--shadow);
  transform:translateY(-4px);
}

.m-rail-card .m-media{border-radius:0;}
.m-rail-card-media{position:relative;}

/* Pillar index, stamped on the photo. */
.m-rail-card-index{
  position:absolute;top:var(--s-4);left:var(--s-4);z-index:2;
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  letter-spacing:.12em;color:var(--panel-dark-text);
  background:var(--accent-dark);padding:6px var(--s-3);border-radius:999px;
}

.m-rail-card-body{
  display:flex;flex-direction:column;gap:var(--s-4);
  padding:var(--s-6);flex:1;
}
.m-rail-card-body h3{margin:0;}
.m-rail-card-body p{
  margin:0;color:var(--ink-soft);font-size:var(--t-sm);line-height:1.6;
}

/* The card's own sequence line — the three-step path each pillar follows.
   Mono and hairline-separated so it reads as structure, not more prose. */
.m-rail-card-steps{
  list-style:none;margin:0;padding:var(--s-4) 0 0;
  border-top:1px solid var(--line);
  display:flex;flex-direction:column;gap:var(--s-2);
}
.m-rail-card-steps li{
  display:flex;gap:var(--s-3);align-items:baseline;
  font-size:var(--t-sm);color:var(--ink-soft);line-height:1.5;
}
.m-rail-card-steps li b{
  font-family:var(--font-mono);font-size:var(--t-mono);font-weight:500;
  color:var(--accent-2-deep);flex:none;
}

.m-rail-card-foot{
  margin-top:auto;padding-top:var(--s-5);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);
}
.m-rail-card-foot span{
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);
}
.m-rail-card:hover .m-arrow{
  background:var(--accent);border-color:var(--accent);color:#fff;
}
.m-rail-card:hover .m-arrow svg{transform:translateX(2px);}

/* ---------- Interaction cue ----------
   A visible affordance, not a hidden gesture: a progress rail that fills
   as the track advances, plus a mono hint that names the interaction. */
.m-rail-cue{
  display:flex;align-items:center;gap:var(--s-5);
  margin-top:var(--s-6);
}
/* rail.js sets this when the track fits and there is genuinely nothing to
   scroll — never advertise an interaction that does not exist. */
.m-rail-section.is-static .m-rail-cue{display:none;}
.m-rail-progress{
  position:relative;flex:1;height:2px;background:var(--line);border-radius:2px;
  overflow:hidden;max-width:320px;
}
.m-rail-progress i{
  position:absolute;inset:0;transform-origin:left center;
  transform:scaleX(var(--rail-progress,.2));
  background:var(--accent);border-radius:2px;
  transition:transform .12s linear;
}
.m-rail-hint{
  font-family:var(--font-mono);font-size:var(--t-mono);letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-faint);white-space:nowrap;
}

@media (max-width:640px){
  .m-rail-card{flex-basis:min(78vw,320px);}
  .m-rail-cue{margin-top:var(--s-5);}
  .m-rail-progress{max-width:none;}
}

@media (prefers-reduced-motion: reduce){
  .m-rail-viewport{scroll-behavior:auto;}
  .m-rail-card:hover{transform:none;}
  .m-rail-progress i{transition:none;}
}