/*
 * Listing Grid Scroll — layout styles.
 * Cards themselves reuse listing-grid.css; this file only controls the
 * horizontal / vertical scroll container.
 */

/* Container wrapper */
.rpl-gs {
    position: relative;
    width: 100%;
}

/* Common track (flex list of cards) */
.rpl-gs__track {
    display: flex;
    gap: var(--rpl-gs-gap, 20px);
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.rpl-gs__track > .rpl-card {
    flex: 0 0 auto;
}

/* Hide is-hidden children (kept for parity with grid variant, not used
 * in scroll layout since all cards are meant to be visible in the track). */
.rpl-gs__track > .is-hidden {
    display: none;
}

/* ---------- Horizontal ---------- */
.rpl-gs--horizontal .rpl-gs__track {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px; /* leaves space for scrollbar below cards */
}

.rpl-gs--horizontal .rpl-gs__track > .rpl-card {
    width: var(--rpl-gs-card-w, 320px);
    max-width: var(--rpl-gs-card-w, 320px);
}

/* Snap scroll (optional) */
.rpl-gs--snap.rpl-gs--horizontal .rpl-gs__track {
    scroll-snap-type: x mandatory;
}
.rpl-gs--snap.rpl-gs--horizontal .rpl-gs__track > .rpl-card {
    scroll-snap-align: start;
}

/* ---------- Vertical ---------- */
.rpl-gs--vertical {
    max-height: var(--rpl-gs-max-h, 640px);
}

.rpl-gs--vertical .rpl-gs__track {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: inherit;
    padding-right: 4px;
}

.rpl-gs--vertical .rpl-gs__track > .rpl-card {
    width: 100%;
}

.rpl-gs--snap.rpl-gs--vertical .rpl-gs__track {
    scroll-snap-type: y mandatory;
}
.rpl-gs--snap.rpl-gs--vertical .rpl-gs__track > .rpl-card {
    scroll-snap-align: start;
}

/* ---------- Scrollbar styling (WebKit) ---------- */
.rpl-gs__track::-webkit-scrollbar {
    height: var(--rpl-gs-sb-size, 8px);
    width:  var(--rpl-gs-sb-size, 8px);
}
.rpl-gs__track::-webkit-scrollbar-track {
    background: var(--rpl-gs-sb-track, #f1f1f1);
    border-radius: 999px;
}
.rpl-gs__track::-webkit-scrollbar-thumb {
    background: var(--rpl-gs-sb-thumb, #c9c9c9);
    border-radius: 999px;
}
.rpl-gs__track::-webkit-scrollbar-thumb:hover {
    background: var(--rpl-gs-sb-thumb-hover, #a6a6a6);
}

.rpl-gs--hide-scrollbar .rpl-gs__track {
    scrollbar-width: none; /* Firefox */
}
.rpl-gs--hide-scrollbar .rpl-gs__track::-webkit-scrollbar {
    display: none;        /* WebKit */
}

/* ---------- Scrollbar: auto-hide (reveal only while scrolling) ----------
 * Track is completely hidden by default. It only reveals itself while
 * the user is actively scrolling (JS toggles `.is-scrolling` and
 * clears it shortly after scroll stops). We intentionally do NOT
 * reveal on :hover — when a user is interacting with cards the
 * pointer is always inside the container and hover would keep the
 * bar visible permanently, which is what we want to avoid. */
.rpl-gs--sb-hover .rpl-gs__track {
    scrollbar-width: none !important;            /* Firefox: hidden */
    scrollbar-color: transparent transparent !important;
    transition: scrollbar-color var(--rpl-gs-sb-fade, 200ms) ease;
}
.rpl-gs--sb-hover .rpl-gs__track::-webkit-scrollbar {
    background: transparent !important;
}
.rpl-gs--sb-hover .rpl-gs__track::-webkit-scrollbar-track,
.rpl-gs--sb-hover .rpl-gs__track::-webkit-scrollbar-thumb {
    background-color: transparent !important;    /* WebKit: hidden */
    transition: background-color var(--rpl-gs-sb-fade, 200ms) ease;
}

/* Reveal ONLY while actively scrolling */
.rpl-gs--sb-hover.is-scrolling .rpl-gs__track {
    scrollbar-width: thin !important;            /* Firefox */
    scrollbar-color: var(--rpl-gs-sb-thumb, #c9c9c9) var(--rpl-gs-sb-track, #f1f1f1) !important;
}
.rpl-gs--sb-hover.is-scrolling .rpl-gs__track::-webkit-scrollbar-track {
    background-color: var(--rpl-gs-sb-track, #f1f1f1) !important;
}
.rpl-gs--sb-hover.is-scrolling .rpl-gs__track::-webkit-scrollbar-thumb {
    background-color: var(--rpl-gs-sb-thumb, #c9c9c9) !important;
}
.rpl-gs--sb-hover.is-scrolling .rpl-gs__track::-webkit-scrollbar-thumb:hover {
    background-color: var(--rpl-gs-sb-thumb-hover, #a6a6a6) !important;
}

/* ---------- Navigation arrows ---------- */
.rpl-gs__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:  var(--rpl-gs-nav-size, 40px);
    height: var(--rpl-gs-nav-size, 40px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 999px;
    background: #fff;
    color: #222;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.rpl-gs__nav:hover {
    transform: translateY(-50%) scale(1.05);
}
.rpl-gs__nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: translateY(-50%);
}
.rpl-gs__nav--prev { left:  8px; }
.rpl-gs__nav--next { right: 8px; }

/* Vertical: arrows go top / bottom */
.rpl-gs--vertical .rpl-gs__nav {
    top: auto;
    left: 50%;
    transform: translateX(-50%);
}
.rpl-gs--vertical .rpl-gs__nav--prev { top:    8px; }
.rpl-gs--vertical .rpl-gs__nav--next { bottom: 8px; }
.rpl-gs--vertical .rpl-gs__nav:hover  { transform: translateX(-50%) scale(1.05); }
.rpl-gs--vertical .rpl-gs__nav:disabled { transform: translateX(-50%); }

.rpl-gs__nav svg,
.rpl-gs__nav i {
    width:  1em;
    height: 1em;
    font-size: 18px;
}