/*
 * Connect demos — structure of the horizontal rails (js/rail.js), shared copy. A demo sets the
 * card size and the look through these custom properties on .rail (or any parent):
 *   --rail-card     width of one card            --rail-gap     space between cards
 *   --rail-pad      inner space at both ends      --rail-ui      colour of the edge controls
 *   --rail-ui-bg    their glass behind the chevron --rail-ui-rest opacity while the pointer is away
 *   --rail-line     progress track colour         --rail-thumb   progress thumb colour
 */
.rail {
    --rail-card: 260px;
    --rail-gap: 16px;
    --rail-pad: 0px;
    --rail-ui: #fff;
    --rail-ui-bg: rgb(24 23 26 / 0.38);
    --rail-ui-rest: 0.28;
    --rail-line: rgb(255 255 255 / 0.12);
    --rail-thumb: rgb(255 255 255 / 0.55);
    position: relative;
    /* reset the site's own .rail (css/site.css: display:flex, overflow-x:auto, padding, snap) */
    display: block;
    overflow: visible;
    padding: 0;
    gap: 0;
    scroll-snap-type: none;
}
.rail__track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--rail-rows, 1), auto);
    grid-auto-columns: var(--rail-card);
    gap: var(--rail-gap);
    padding-inline: var(--rail-pad);
    scroll-padding-inline: var(--rail-pad);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    cursor: grab;
    outline: none;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; min-width: 0; }
/* the last card snaps to the end, so the re-snap after a glide lands on the true end (is-end, and
   the wheel hands back to the page) instead of a start snap a few px before it */
.rail__track > :last-child { scroll-snap-align: end; }
.rail__track:focus-visible { box-shadow: inset 0 0 0 2px rgb(83 245 126 / 0.6); border-radius: 4px; }
.rail.is-moving .rail__track { scroll-snap-type: none; }
.rail.is-dragging .rail__track { cursor: grabbing; user-select: none; }
.rail.is-dragging .rail__track * { pointer-events: none; }

/* the edge zones: part of the row, soft and half-transparent, never covering a card's middle */
.rail__edge {
    position: absolute;
    top: 0;
    bottom: var(--rail-bar-h, 28px);
    z-index: 3;
    width: clamp(44px, 6vw, 84px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: var(--rail-ui);
    background: none;
    opacity: var(--rail-ui-rest);
    cursor: pointer;
    transition: opacity 0.35s ease;
}
.rail__edge--prev { left: 0; background: linear-gradient(90deg, var(--rail-fade, rgb(24 23 26 / 0.45)), transparent); }
.rail__edge--next { right: 0; background: linear-gradient(270deg, var(--rail-fade, rgb(24 23 26 / 0.45)), transparent); }
.rail__edge--prev .rail__chev { transform: scaleX(-1); }
.rail__chev {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--rail-ui-bg);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform 0.35s ease, background-color 0.35s ease;
}
.rail:hover .rail__edge, .rail:focus-within .rail__edge { opacity: 0.75; }
.rail .rail__edge:hover, .rail .rail__edge:focus-visible { opacity: 1; }
.rail__edge:focus-visible { outline: none; }
.rail__edge:focus-visible .rail__chev { box-shadow: 0 0 0 2px rgb(83 245 126 / 0.7); }
.rail.is-start .rail__edge--prev, .rail.is-end .rail__edge--next, .rail.is-static .rail__edge { opacity: 0; pointer-events: none; }

/* progress line + "03 / 12", in the row under the cards */
.rail__bar {
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--rail-bar-h, 28px);
    padding-inline: var(--rail-pad);
    opacity: 0.6;
    transition: opacity 0.35s ease;
}
.rail:hover .rail__bar { opacity: 1; }
.rail.is-static .rail__bar { visibility: hidden; }
.rail__line { position: relative; flex: 1; height: 1px; background: var(--rail-line); overflow: hidden; }
.rail__thumb {
    position: absolute;
    inset: 0 auto 0 0;
    width: calc(var(--rail-visible, 0.3) * 100%);
    background: var(--rail-thumb);
    transform: translateX(calc(var(--rail-progress, 0) * (1 / var(--rail-visible, 0.3) - 1) * 100%));
}
.rail__pos { font: 400 12px/1 "Lato", system-ui, sans-serif; letter-spacing: 0.12em; color: var(--rail-thumb); font-variant-numeric: tabular-nums; white-space: nowrap; }

@media (hover: none) {
    .rail__edge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .rail__edge, .rail__chev, .rail__bar { transition: none; }
}