/* ─── Responsive Slider — Frontend Styles ────────────────────────────────── */

/* ── Wrapper (the visible window) ───────────────────────────────────────────
   overflow: hidden is the key property — it hides every slide except the one
   currently in view. Without it you'd see all slides laid out side by side.   */

.rslider-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    outline: none;
}

/* ── Track (holds all slides in a horizontal row) ───────────────────────────
   display: flex lays the cells out in one continuous row.
   will-change: transform hints to the browser to composite on the GPU,
   which keeps the translateX animation smooth.                                */

.rslider-track {
    display: flex;
    will-change: transform;
}

/* ── Individual Cells ───────────────────────────────────────────────────────
   flex: 0 0 100% means: don't grow, don't shrink, be exactly 100% wide.
   Because the wrap is the reference, each cell fills one full "window".       */

.rslider-cell {
    flex: 0 0 100%;
    min-width: 0;
    position: relative;
    line-height: 0;
}

.rslider-cell a {
    display: block;
    line-height: 0;
    text-decoration: none;
}

/* ── Images ─────────────────────────────────────────────────────────────────
   pointer-events and user-select prevent the browser's native image-drag
   ghost from interfering with the drag-to-slide behaviour.                   */

.rslider-wrap .rslider-cell img,
.rslider-wrap .rslider-cell picture {
    display: block;
    width: 100%;
    height: auto;
    margin: auto;
    max-width: 100%;
    pointer-events: none;
    user-select: none;
}

/* ── Prev / Next Arrows ─────────────────────────────────────────────────────
   Absolutely positioned inside .rslider-wrap (which is position: relative).
   translateY(-50%) centres them vertically on the mid-point of the slider.   */

.rslider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.45);
    border: none;
    width: 32px;
    height: 32px;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.15s ease;
    color: #ffffff;
}

.rslider-btn:hover {
    background: rgba(0, 0, 0, 0.65);;
    transform: translateY(-50%) scale(1.05);
}

.rslider-btn:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

.rslider-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.rslider-btn--prev { left: 10px; }
.rslider-btn--next { right: 10px; }

.rslider-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Page Dots ──────────────────────────────────────────────────────────────
   Centred at the bottom of the slider using left: 50% + translateX(-50%).    */

.rslider-dots {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    line-height: 0;
}

.rslider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    background: rgba(255, 255, 255, 0.6);
    padding: 0;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.15s ease;
}

.rslider-dot.is-active {
    background: #fff;
    transform: scale(1.2);
}

.rslider-dot:focus-visible {
    outline: 3px solid #2271b1;
    outline-offset: 2px;
}

/* ── Vertical slide ─────────────────────────────────────────────────────────
   Stack cells in a column instead of a row. The JS sets an explicit height on
   the wrap equal to one cell, then translates by that many pixels per step.   */

.rslider--slide-vertical .rslider-track {
    flex-direction: column;
}

/* ── Fade ────────────────────────────────────────────────────────────────────
   All cells share the same grid area so they stack on top of each other.
   Only the active cell is visible; the grid auto-sizes to the tallest cell.   */

.rslider--fade .rslider-track {
    display: grid;
    will-change: unset; /* no transform is used, so the hint is unnecessary */
}

.rslider--fade .rslider-cell {
    grid-area: 1 / 1;
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.rslider--fade .rslider-cell.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* ── Reduce motion ──────────────────────────────────────────────────────────
   Respects the OS accessibility setting. When enabled, all transitions and
   animations are disabled — the slider still works, just cuts instantly.      */

@media (prefers-reduced-motion: reduce) {
    .rslider-track,
    .rslider-cell,
    .rslider-btn,
    .rslider-dot {
        transition: none !important;
        animation: none !important;
    }
}