/* ============================================================
   ivs-rail — auto-sliding, draggable card rail (komponen.md §ivs-rail).
   One row that scrolls sideways: native touch swipe, mouse drag, and a
   gentle one-card auto-advance every 5s (ivs-rail.js). The host page sets
   the knobs:
     --ivs-rail-item       card width (default clamp below)
     --ivs-rail-scrollbar  scrollbar thumb colour (default hairline)
   ============================================================ */

.ivs-rail {
    display: flex;
    gap: .8rem;
    overflow-x: auto;
    padding: .2rem .2rem .6rem;
    cursor: grab;
    scrollbar-width: thin;
    scrollbar-color: var(--ivs-rail-scrollbar, #e4e0d5) transparent;
    -webkit-overflow-scrolling: touch;
}
.ivs-rail.is-dragging { cursor: grabbing; }
.ivs-rail::-webkit-scrollbar { height: 5px; }
.ivs-rail::-webkit-scrollbar-track { background: transparent; }
.ivs-rail::-webkit-scrollbar-thumb { background: var(--ivs-rail-scrollbar, #e4e0d5); border-radius: 3px; }

.ivs-rail > * { flex: 0 0 auto; width: var(--ivs-rail-item, clamp(240px, 24%, 320px)); }
.ivs-rail img { -webkit-user-drag: none; -webkit-user-select: none; user-select: none; }