/* ==========================================================================
   RS Side-Scroll Grid (yy_sidescroll)
   Fully encapsulated below the .rs-ssg root class – no global selectors.
   Configurable values arrive as CSS custom properties on the root element.
   ========================================================================== */

.rs-ssg {
    --rs-ssg-w: 400px;
    --rs-ssg-w-md: 340px;
    --rs-ssg-w-sm: 260px;
    --rs-ssg-gap: 20px;
    --rs-ssg-peek: 24px;
    --rs-ssg-radius: 28px;
    --rs-ssg-tile-bg: #f5f5f7;
    --rs-ssg-arrow-bg: #e8e8ed;
    --rs-ssg-arrow-color: #1d1d1f;
    --rs-ssg-overflow: 40px;   /* vertical buffer so hover zoom + shadow are not clipped */
    --rs-ssg-card-w: var(--rs-ssg-w-sm);
    position: relative;
}

@media (min-width: 768px) {
    .rs-ssg {
        --rs-ssg-card-w: var(--rs-ssg-w-md);
    }
}

@media (min-width: 1069px) {
    .rs-ssg {
        --rs-ssg-card-w: var(--rs-ssg-w);
    }
}

/* --- viewport (the scroll container) ------------------------------------ */
.rs-ssg__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;              /* Firefox */
    /* generous vertical padding so scaled cards and their shadows can render
       beyond the card edge without being clipped by the scroll container;
       the negative margins cancel the extra space in the page layout */
    padding: var(--rs-ssg-overflow) var(--rs-ssg-peek);
    margin-top: calc(-1 * var(--rs-ssg-overflow));
    margin-bottom: calc(-1 * var(--rs-ssg-overflow));
}

.rs-ssg__viewport::-webkit-scrollbar {
    display: none;                      /* WebKit */
}

.rs-ssg__viewport:focus-visible {
    outline: 2px solid var(--rs-ssg-arrow-color);
    outline-offset: 2px;
    border-radius: 8px;
}

.rs-ssg--snap-start .rs-ssg__viewport {
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--rs-ssg-peek);
}

.rs-ssg--snap-center .rs-ssg__viewport {
    scroll-snap-type: x mandatory;
}

/* JS switches snapping off while the marquee is running or while dragging */
.rs-ssg.rs-ssg--no-snap .rs-ssg__viewport {
    scroll-snap-type: none;
}

/* --- track & slides ------------------------------------------------------ */
.rs-ssg__track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--rs-ssg-gap);
    list-style: none;
    margin: 0;
    padding: 0;
    min-width: min-content;
}

.rs-ssg__slide {
    flex: 0 0 auto;
    width: var(--rs-ssg-card-w);
    max-width: calc(100vw - (2 * var(--rs-ssg-peek)));
    display: flex;
}

.rs-ssg--snap-start .rs-ssg__slide {
    scroll-snap-align: start;
}

.rs-ssg--snap-center .rs-ssg__slide {
    scroll-snap-align: center;
}

.rs-ssg__area {
    width: 100%;
    min-width: 0;
}

/* equal height: stretch the card slots to the tallest card */
.rs-ssg--equal .rs-ssg__area {
    display: flex;
    flex-direction: column;
    justify-content: stretch;
}

.rs-ssg--equal .rs-ssg__area > * {
    flex: 1 0 auto;
}

/* --- tile look (Apple-style card) ---------------------------------------- */
.rs-ssg--tile .rs-ssg__slide {
    background: var(--rs-ssg-tile-bg);
    border-radius: var(--rs-ssg-radius);
    overflow: hidden;
    transform: translateZ(0);
}

@media (hover: hover) {
    .rs-ssg--tile.rs-ssg--hover-zoom .rs-ssg__slide {
        transition: transform 300ms cubic-bezier(0.25, 0.1, 0.25, 1),
                    box-shadow 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
    }

    .rs-ssg--tile.rs-ssg--hover-zoom .rs-ssg__slide:hover,
    .rs-ssg--tile.rs-ssg--hover-zoom .rs-ssg__slide:focus-within {
        transform: scale(1.016);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        z-index: 1;
    }
}

/* --- drag scroll cursor --------------------------------------------------- */
.rs-ssg.rs-ssg--draggable .rs-ssg__viewport {
    cursor: grab;
}

.rs-ssg.rs-ssg--dragging .rs-ssg__viewport {
    cursor: grabbing;
    user-select: none;
}

.rs-ssg.rs-ssg--dragging .rs-ssg__slide {
    pointer-events: none;
}

/* --- arrow navigation ----------------------------------------------------- */
.rs-ssg__nav {
    display: none;                       /* enabled by JS (.rs-ssg--js) */
    justify-content: flex-end;
    gap: 12px;
    padding: 14px var(--rs-ssg-peek) 0 var(--rs-ssg-peek);
}

.rs-ssg--js .rs-ssg__nav {
    display: flex;
}

.rs-ssg__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--rs-ssg-arrow-bg);
    color: var(--rs-ssg-arrow-color);
    cursor: pointer;
    transition: opacity 150ms ease, transform 150ms ease;
}

.rs-ssg__btn:hover:not(:disabled) {
    transform: scale(1.06);
}

.rs-ssg__btn:focus-visible {
    outline: 2px solid var(--rs-ssg-arrow-color);
    outline-offset: 2px;
}

.rs-ssg__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.rs-ssg__icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* hide arrows on small touch layouts if configured */
@media (max-width: 767.98px) {
    .rs-ssg--hide-arrows-sm .rs-ssg__nav {
        display: none;
    }
}

/* --- reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .rs-ssg__viewport {
        scroll-behavior: auto;
    }

    .rs-ssg--tile.rs-ssg--hover-zoom .rs-ssg__slide,
    .rs-ssg__btn {
        transition: none;
    }

    .rs-ssg--tile.rs-ssg--hover-zoom .rs-ssg__slide:hover,
    .rs-ssg--tile.rs-ssg--hover-zoom .rs-ssg__slide:focus-within {
        transform: none;
    }
}