/**
 * mod_articles – Rental Slider layout
 * Template override for joomstarter
 *
 * Visual structure
 * ─────────────────────────────────────────────────────────────────────
 *  • .mod-articles-rental-slider   – outer section; dark navy bg, 100 vw
 *  • .rental-slider__inner         – container-width wrapper for header / CTA
 *  • .rental-slider__header        – two-column row: heading (right) + nav (left)
 *  • .rental-slider__viewport      – slider viewport; right = container right,
 *                                    left = viewport left edge (bleed-left)
 *  • .rental-slider__track         – Slick carousel root
 *  • .rental-slide-item            – per-slide wrapper
 *  • .rental-card  (+ children)    – reuses the rental.php card styles already
 *                                    defined in user.css; no duplication needed
 * ─────────────────────────────────────────────────────────────────────────── */

/* ============================================================
   CSS custom property – must match the template's container
   ============================================================ */
:root {
    --rs-container: 1200px;   /* Bootstrap xl container max-width           */
    --rs-gutter:     24px;    /* minimum side padding when viewport is small */
}

/* ============================================================
   Outer section – 100 vw dark background
   ============================================================ */
.mod-articles-rental-slider {
    /* Break out of the Joomla/Bootstrap container */
    width: 100vw;
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

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

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

    /*
     * Suppress page-level horizontal scroll that would otherwise appear
     * because the viewport-wide slider track overflows to both sides.
     * We rely on .rental-slider__viewport for the fine-grained clipping.
     */
    overflow-x: hidden;
}

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

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

/* ── Heading block ── */
.rental-slider__heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.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);
}

.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 ── */
.rental-slider__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    /* Push nav to the visual LEFT (= LTR right in RTL layout) */
    margin-inline-start: auto;
}

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

.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;
}

.rental-slider__arrow::before {
    display: none !important;
}

.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%);
}

.rental-slider__arrow:hover {
    background: #00B3F0;
    border-color: #00B3F0;
}

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

.rental-slider__arrow.slick-disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.rental-slider__arrow.slick-disabled:hover {
    background: transparent;
    border-color: #4B5060;
}

.rental-slider__arrow.slick-disabled:hover img {
    filter: brightness(0) saturate(100%) invert(27%) sepia(10%) saturate(600%)
            hue-rotate(192deg) brightness(95%) contrast(92%);
}

/* ── Keyboard focus indicator (WCAG 2.4.7 / IS 5568 AA) ──
   Outline בולט בתכלת על הרקע הכהה (#00B3F0 על #1E2438 ≈ 5:1) */
.rental-slider__arrow:focus {
    outline: none;
}

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

/* ============================================================
   Slider viewport
   ────────────────────────────────────────────────────────────
   Left edge  = container left boundary   (padding-left = gutter)
   Right edge = viewport right edge       (no right padding; the
                outer div is already 100 vw, so the right wall of
                the viewport IS the right edge of the screen)
   overflow: hidden clips any card that scrolls past the left
   container boundary; the right side is already at 100 vw.
   ============================================================ */
.rental-slider__viewport {
    /*
     * Align the RIGHT edge of the visible track with the container.
     *
     * When viewport ≥ --rs-container the container has equal gutters on
     * both sides: gutter = (100vw - --rs-container) / 2.
     * At smaller viewports the container is flush, padded only by
     * --rs-gutter, matching the header's own padding.
     *
     * Bleed direction: LEFT — the track has no left padding so it extends
     * all the way to the LEFT edge of the viewport, while the right side
     * is contained at the container boundary.
     */
    padding-right: max(calc((89vw - var(--rs-container)) / 2), var(--rs-gutter));
    padding-left:  0;   /* intentional – bleed to viewport left */

    overflow: hidden;   /* clip cards that cross the right container boundary */
}

/* ============================================================
   Slick track
   ============================================================ */
.rental-slider__track {
    width: 100%;
}

.rental-slider__track .slick-list {
    overflow: hidden;
    margin:  0;
    padding: 0;
}

.rental-slider__track .slick-track {
    display: flex;
    align-items: stretch;
}

.rental-slider__track .slick-slide {
    height: auto;
    float: none;
    display: block;
}

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

/*
 * The .rental-card, .rental-card-badge, .rental-card-inner,
 * .rental-card-image, .rental-card-content, .rental-tag styles
 * are already defined in user.css and are reused here without
 * modification.  Only slider-specific overrides go below.
 */

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

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

/* Ensure cards fill the full slide height */
.rental-slide-item .rental-card {
    height: 100%;
}

/* ============================================================
   CTA button row
   ============================================================ */
.rental-slider__cta-wrap {
    margin-top: 36px;
    text-align: start; /* RTL: start = right; LTR: start = left */
    direction: rtl;
}

.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;
}

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

/* ── Keyboard focus indicator on CTA (WCAG 2.4.7 / IS 5568 AA) ── */
.rental-slider__cta:focus {
    outline: none;
}

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

/* ============================================================
   RTL – Slick track direction
   ============================================================ */
html[dir="rtl"] .rental-slider__track .slick-list {
    direction: rtl;
}

/* ============================================================
   Fixed card width at ≥ 768 px  (variableWidth mode)
   ============================================================ */
@media (min-width: 768px) {
    .rental-slide-item {
        width: 446px;
    }
}

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

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

    .rental-slider__nav {
        margin-inline-start: 0;
    }
}

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

    .rental-slider__header {
        margin-bottom: 28px;
    }
}