/* ---------- Horizontal scroll rail ---------- */

.listing-rail {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.15rem 1rem 0.75rem; /* top pad clears focus rings, side pad = page gutter */
    margin: 0 -1rem; /* bleed edge-to-edge on mobile so the first/last card peeks correctly */

    /* snap each card into place on release/momentum stop */
    scroll-snap-type: x mandatory;
    scroll-padding-left: 1rem; /* snap position accounts for the gutter padding above */

    -webkit-overflow-scrolling: touch; /* momentum scroll on iOS */

    /* hide the scrollbar on touch devices — swipe is the primary affordance,
       a visible track just adds visual noise on mobile */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.listing-rail::-webkit-scrollbar {
    display: none;
}

/* On larger screens where mouse/trackpad scroll is common, show a thin
   scrollbar again since swipe isn't the default interaction there */
@media (min-width: 992px) {
    .listing-rail {
        scrollbar-width: thin;
    }
    .listing-rail::-webkit-scrollbar {
        display: block;
        height: 6px;
    }
    .listing-rail::-webkit-scrollbar-thumb {
        background-color: var(--bg-4, #1a2545);
        border-radius: 999px;
    }
    .listing-rail::-webkit-scrollbar-track {
        background: transparent;
    }
}

.listing-rail-item {
    flex: 0 0 auto;
    width: 82vw;       /* mobile: card takes most of the viewport, next card peeks ~18% */
    max-width: 320px;  /* caps width once viewport gets wide enough that vw sizing overshoots */
    scroll-snap-align: start;
    text-decoration: none;
    color: inherit;
}

@media (min-width: 576px) {
    .listing-rail-item {
        width: 340px; /* fixed width once we're past small phones */
    }
}

.listing-rail-more {
    width: 140px !important;
    max-width: 140px !important;
}

/* The landscape card itself needs a defined height inside the rail so the
   flex-row layout (media + body) has something to lay out against */
.listing-rail-item .card {
    height: 100%;
}