/**
 * mod_articles – Rental Slider (Accessibility / Infinite-scroll variant)
 * Template override for joomstarter
 *
 * Visual parity with mod_articles_rental_slider.css, but tailored for the
 * vanilla-JS carousel in rental-slider-access.php:
 *   • No Slick selectors (.slick-list / .slick-track / .slick-slide).
 *   • Track is a flexbox sized to its content; movement via transform.
 *   • Clones use [inert] — no `aria-hidden` needed on focusable subtrees.
 */

/* ============================================================
   CSS custom properties – match the template's container
   ============================================================ */
:root {
    --rs-container: 1200px;
    --rs-gutter:     24px;
}

/* ============================================================
   Outer section – 100 vw dark background
   ============================================================ */
.mod-articles-rental-slider--access {
    width: 100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    background-color: #1E2438;
    color: #fff;

    padding-top:    56px;
    padding-bottom: 56px;

    /* Clip the viewport-wide track so it doesn't trigger page-level scroll. */
    overflow-x: hidden;
}

/* ============================================================
   Container-width inner wrapper (header + CTA)
   ============================================================ */
.mod-articles-rental-slider--access .rental-slider__inner {
    max-width: var(--rs-container);
    margin:  0 auto;
    padding: 0 var(--rs-gutter);
    box-sizing: border-box;
}

/* ============================================================
   Header row – heading right (RTL start), arrows left
   ============================================================ */
.mod-articles-rental-slider--access .rental-slider__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 40px;
    direction: rtl;
}

.mod-articles-rental-slider--access .rental-slider__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mod-articles-rental-slider--access .rental-slider__label {
    display: inline-block;
    font-family: Heebo, sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

.mod-articles-rental-slider--access .rental-slider__title {
    margin: 0;
    font-family: Heebo, sans-serif;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

/* ── Navigation arrows ── */
.mod-articles-rental-slider--access .rental-slider__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-inline-start: auto;
}

html[dir="rtl"] .mod-articles-rental-slider--access .rental-slider__nav {
    flex-direction: row;
}

.mod-articles-rental-slider--access .rental-slider__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border: 1px solid #4B5060;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.mod-articles-rental-slider--access .rental-slider__arrow::before {
    display: none !important;
}

.mod-articles-rental-slider--access .rental-slider__arrow img {
    display: block;
    width: 12px;
    height: 21px;
    filter: brightness(0) saturate(100%) invert(27%) sepia(10%) saturate(600%)
            hue-rotate(192deg) brightness(95%) contrast(92%);
}

.mod-articles-rental-slider--access .rental-slider__arrow:hover {
    background: #00B3F0;
    border-color: #00B3F0;
}

.mod-articles-rental-slider--access .rental-slider__arrow:hover img {
    filter: brightness(0) invert(1);
}

/* Keyboard focus indicator (WCAG 2.4.7 / IS 5568 AA): 5:1 contrast on dark bg */
.mod-articles-rental-slider--access .rental-slider__arrow:focus {
    outline: none;
}

.mod-articles-rental-slider--access .rental-slider__arrow:focus-visible {
    outline: 3px solid #00B3F0;
    outline-offset: 3px;
}

/* ============================================================
   Slider viewport
   ────────────────────────────────────────────────────────────
   Right edge aligns with the container's right boundary;
   left side bleeds to the viewport's left edge.
   ============================================================ */
.mod-articles-rental-slider--access .rental-slider__viewport {
    /*
     * Use margin (not padding) so the viewport's own box ends at the
     * container's right edge. overflow:hidden then clips correctly at that
     * boundary — leading clones don't leak into the right gutter on initial
     * load or while sliding.
     */
    margin-right: max(calc((89vw - var(--rs-container)) / 2), var(--rs-gutter));
    margin-left:  0;
    overflow: hidden;
}

/* ============================================================
   Track (custom carousel — replaces Slick's .slick-* layers)
   ============================================================ */
.mod-articles-rental-slider--access .rental-slider__track {
    display: flex;
    align-items: stretch;
    width: max-content;            /* track grows to fit all slides         */
    will-change: transform;        /* hint the compositor                   */
    margin: 0;
    padding: 0;
    transform: translateX(0);
}

html[dir="rtl"] .mod-articles-rental-slider--access .rental-slider__track {
    direction: rtl;
}

/* Respect users who prefer reduced motion — switch to an instant snap. */
@media (prefers-reduced-motion: reduce) {
    .mod-articles-rental-slider--access .rental-slider__track {
        transition: none !important;
    }
}

/* ============================================================
   Slide item wrapper
   ============================================================ */
.mod-articles-rental-slider--access .rental-slide-item {
    flex: 0 0 auto;
    padding: 0 12px;               /* 24 px total gap between cards */
    box-sizing: border-box;
}

/* Cards fill the full slide height for consistent rows. */
.mod-articles-rental-slider--access .rental-slide-item .rental-card {
    height: 100%;
}

/* Focus ring on the image link (WCAG 2.4.7 / IS 5568 AA)
   Double inset ring on <a> only — visible on variable photo backgrounds. */
.mod-articles-rental-slider--access .rental-card-image a:focus {
    outline: none;
}

.mod-articles-rental-slider--access .rental-card-image a:focus-visible {
    outline: none;
    box-shadow:
        inset 0 0 0 3px #fff,
        inset 0 0 0 6px #1E2438;
}

/* ============================================================
   CTA button row
   ============================================================ */
.mod-articles-rental-slider--access .rental-slider__cta-wrap {
    margin-top: 36px;
    text-align: start;
    direction: rtl;
}

.mod-articles-rental-slider--access .rental-slider__cta {
    display: inline-block;
    padding: 14px 32px;
    border: 2px solid #fff;
    border-radius: 40px;
    color: #fff;
    font-family: Heebo, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.mod-articles-rental-slider--access .rental-slider__cta:hover {
    background: #fff;
    color: #1E2438;
    text-decoration: none;
}

.mod-articles-rental-slider--access .rental-slider__cta:focus {
    outline: none;
}

.mod-articles-rental-slider--access .rental-slider__cta:focus-visible {
    outline: 3px solid #00B3F0;
    outline-offset: 4px;
}

/* ============================================================
   Slide widths – match the original layout
   ============================================================ */
@media (min-width: 768px) {
    .mod-articles-rental-slider--access .rental-slide-item {
        width: 446px;
    }
}

@media (max-width: 767.98px) {
    .mod-articles-rental-slider--access .rental-slide-item {
        width: calc(50vw - 36px);   /* 2 slides visible */
    }
}

@media (max-width: 599.98px) {
    .mod-articles-rental-slider--access .rental-slide-item {
        width: calc(100vw - 48px);  /* 1 slide visible */
    }
}

/* ============================================================
   Responsive header
   ============================================================ */
@media (max-width: 991px) {
    .mod-articles-rental-slider--access .rental-slider__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    html[dir="rtl"] .mod-articles-rental-slider--access .rental-slider__header {
        align-items: flex-end;
    }

    .mod-articles-rental-slider--access .rental-slider__nav {
        margin-inline-start: 0;
    }
}

@media (max-width: 768px) {
    .mod-articles-rental-slider--access {
        padding-top:    40px;
        padding-bottom: 40px;
    }

    .mod-articles-rental-slider--access .rental-slider__header {
        margin-bottom: 28px;
    }
}