/* Horizontal card rail with prev/next controls — reusable scroller.
   Markup:
     <div class="hrail" data-hrail>
       <div class="sec-head">
         <div>…title…</div>
         <div class="rail-nav">
           <button class="rail-btn" data-rail-prev>…</button>
           <button class="rail-btn" data-rail-next>…</button>
         </div>
       </div>
       <div class="hrail-track">…cards…</div>
     </div>
   Behaviour lives in js/rail.js (arrows, disabled ends, auto-hide when it fits). */

.hrail-track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; padding-bottom: 8px; scrollbar-width: none; min-width: 0; }
.hrail-track::-webkit-scrollbar { display: none; }
.hrail-track > * { scroll-snap-align: start; flex: 0 0 300px; }
@media (max-width: 600px) { .hrail-track > * { flex-basis: 84%; } }

.rail-nav { display: flex; gap: 8px; }
.rail-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 200ms ease-out, color 200ms ease-out, opacity 200ms ease-out; }
.rail-btn:hover { border-color: var(--orange); color: var(--orange-deep); }
.rail-btn:disabled { opacity: 0.35; cursor: default; border-color: var(--border); color: var(--ink); }
.rail-btn svg { width: 18px; height: 18px; display: block; }