/* ================================================================
   Responsive Slider — Frontend Styles
   All colour/size variables are injected via inline style on the
   .rs-slider-outer element, so they cascade to every child.
   ================================================================ */

/* ---- Outer wrapper ---- */
.rs-slider-outer {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
/* Needed when arrows/dots live in the outer container */
.rs-slider-outer--relative { position: relative; }

/* ================================================================
   External caption areas  (above / below)
   CSS Grid trick: all groups sit in the same cell → the area is
   always as tall as the TALLEST group, so every slide takes the
   same vertical space even when some slides have no captions.
   ================================================================ */
.rs-ext-area {
    box-sizing: border-box;
    /* Grid container so child groups stack in one cell */
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
}

.rs-ext-group {
    /* All groups occupy the same grid cell → equal height */
    grid-row: 1;
    grid-column: 1;
    /* Hidden groups are invisible but still define the row height */
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s ease 0.3s;
}
.rs-ext-group--active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s ease 0s;
}

/* ---- Caption line wrapper (shared: ext + on-image) ---- */
.rs-line-wrap {
    /* p-level styles are set inline; keep margin 0 here as baseline */
    display: block;
}
.rs-line-wrap:last-child { margin-bottom: 0 !important; }

.rs-cap-line { display: inline; }

.rs-cap-line-link {
    display: inline;
    text-decoration: underline;
    text-underline-offset: 3px;
    color: inherit;
    transition: opacity 0.2s ease;
}
.rs-cap-line-link:hover,
.rs-cap-line-link:focus { opacity: 0.8; outline: 2px solid currentColor; outline-offset: 2px; }

/* ================================================================
   Slider wrapper  (the image area — fixed height)
   ================================================================ */
.rs-slider-wrapper {
    position: relative;
    height: var( --rs-height, 500px );
    overflow: hidden;
    background: var( --rs-wrapper-bg, #111 );
    outline: none;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    flex-shrink: 0;
}

.rs-slider-track { position: relative; width: 100%; height: 100%; }

/* ---- Individual slide ---- */
.rs-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var( --rs-transition, 500ms ) ease;
    pointer-events: none;
}
.rs-slide--active { opacity: 1; pointer-events: auto; z-index: 1; }

.rs-slide__figure { margin: 0; width: 100%; height: 100%; display: block; }
.rs-slide__image  { width: 100%; height: 100%; display: block; }
.rs-slide__link   { display: block; width: 100%; height: 100%; }

/* ---- Overlay ---- */
.rs-overlay {
    position: absolute;
    inset: 0;
    background-color: var( --rs-overlay, #000 );
    opacity: var( --rs-overlay-opacity, 0.4 );
    pointer-events: none;
    z-index: 2;
}

/* ================================================================
   On-image caption container
   ================================================================ */
.rs-onimage-lines {
    position: absolute;
    z-index: 3;
    padding: var( --rs-cap-padding, 32px );
    text-shadow: 0 1px 4px rgba( 0, 0, 0, 0.55 );
    box-sizing: border-box;
    max-width: 80%;
}

/* Vertical */
.rs-cap--v-top    { top: 0; bottom: auto; }
.rs-cap--v-center { top: 50%; transform: translateY(-50%); bottom: auto; }
.rs-cap--v-bottom { bottom: 0; top: auto; }

/* Horizontal */
.rs-cap--h-left   { left: 0; right: auto; }
.rs-cap--h-center { left: 50%; right: auto; text-align: center; }
.rs-cap--h-right  { right: 0; left: auto; text-align: right; }

/* Combined transforms */
.rs-cap--v-center.rs-cap--h-center { transform: translate(-50%,-50%); }
.rs-cap--v-top.rs-cap--h-center    { transform: translateX(-50%); }
.rs-cap--v-bottom.rs-cap--h-center { transform: translateX(-50%); }

.rs-onimage-lines .rs-cap-line,
.rs-onimage-lines .rs-cap-line-link { text-shadow: inherit; }

/* ================================================================
   Navigation — Arrows
   ================================================================ */
.rs-btn {
    position: absolute;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var( --rs-arrow-border, rgba(255,255,255,.7) );
    background: var( --rs-arrow-bg, rgba(0,0,0,.35) );
    color: var( --rs-arrow-color, #fff );
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.rs-btn:hover,
.rs-btn:focus-visible {
    filter: brightness( 1.25 );
    outline: none;
}
.rs-btn:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.5); }

.rs-btn--prev { left: 14px; }
.rs-btn--next { right: 14px; }

/* ---- Arrows inside image area (.rs-slider-wrapper context) ---- */
.rs-slider-wrapper .rs-arrow--v-top    { top: 14px; transform: none; }
.rs-slider-wrapper .rs-arrow--v-center { top: 50%; transform: translateY(-50%); }
.rs-slider-wrapper .rs-arrow--v-bottom { bottom: 14px; top: auto; transform: none; }

/* ---- Arrows in outer container ---- */
.rs-outer-btn { z-index: 20; }
.rs-slider-outer--relative .rs-outer-btn { position: absolute; }
.rs-slider-outer--relative .rs-outer-btn.rs-arrow--v-top    { top: 14px; transform: none; }
.rs-slider-outer--relative .rs-outer-btn.rs-arrow--v-center { top: 50%; transform: translateY(-50%); }
.rs-slider-outer--relative .rs-outer-btn.rs-arrow--v-bottom { bottom: 14px; top: auto; transform: none; }

/* ================================================================
   Navigation — Dots
   ================================================================ */
.rs-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Dots inside image area */
.rs-slider-wrapper .rs-dots.rs-dots--v-top    { top: 14px; bottom: auto; }
.rs-slider-wrapper .rs-dots.rs-dots--v-center { top: 50%; bottom: auto; transform: translate(-50%,-50%); }
.rs-slider-wrapper .rs-dots.rs-dots--v-bottom { bottom: 14px; top: auto; }

/* Dots in outer container */
.rs-outer-dots { z-index: 20; }
.rs-slider-outer--relative .rs-outer-dots { position: absolute; }
.rs-slider-outer--relative .rs-outer-dots.rs-dots--v-top    { top: 14px; bottom: auto; }
.rs-slider-outer--relative .rs-outer-dots.rs-dots--v-center { top: 50%; bottom: auto; transform: translate(-50%,-50%); }
.rs-slider-outer--relative .rs-outer-dots.rs-dots--v-bottom { bottom: 14px; top: auto; }

/* ---- Dot button ---- */
.rs-dot {
    width:  var( --rs-dot-size, 10px );
    height: var( --rs-dot-size, 10px );
    border-radius: 50%;
    border: 2px solid var( --rs-dot-border, rgba(255,255,255,.8) );
    background: var( --rs-dot-inactive, rgba(255,255,255,.4) );
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.rs-dot--active {
    background: var( --rs-dot-active, #fff );
    border-color: var( --rs-dot-active, #fff );
    transform: scale( 1.25 );
}
.rs-dot:hover,
.rs-dot:focus-visible { filter: brightness(1.3); outline: none; }
.rs-dot:focus-visible { box-shadow: 0 0 0 3px rgba(255,255,255,.5); }

/* ================================================================
   Reduced motion
   ================================================================ */
@media ( prefers-reduced-motion: reduce ) {
    .rs-slide, .rs-btn, .rs-dot, .rs-ext-group { transition: none; }
}

/* ================================================================
   Responsive
   ================================================================ */
@media ( max-width: 768px ) {
    .rs-slider-wrapper { height: calc( var( --rs-height, 500px ) * 0.65 ); }
    .rs-btn { width: 36px; height: 36px; font-size: 20px; }
    .rs-btn--prev { left: 6px; }
    .rs-btn--next { right: 6px; }
    .rs-onimage-lines { max-width: 90% !important; }
}
@media ( max-width: 480px ) {
    .rs-slider-wrapper { height: calc( var( --rs-height, 500px ) * 0.5 ); }
    .rs-btn { width: 32px; height: 32px; font-size: 18px; }
}