/**
 * mod_osbslider – Scoped stylesheet
 *
 * All selectors are prefixed with `.osbslider-` to avoid collisions.
 * Instance-specific values (height, image-fit, overlay opacity, transition
 * speed, items-per-view) are driven by CSS custom properties set inline on
 * the wrapper element and updated by JavaScript per breakpoint.
 *
 * Card layout: two-zone design (image top ~62% + content bottom ~38%).
 * Reference style: modern booking platforms (Airbnb / Klook).
 *
 * Breakpoints (mirror osbslider.js):
 *   ≤ 576 px  – mobile
 *   577 – 991 px  – tablet
 *   ≥ 992 px  – desktop
 */

/* ── Wrapper ────────────────────────────────────────────────────────────── */
.osbslider-wrapper {
    /* --- Layout --- */
    --osbslider-height: 480px;
    --osbslider-fit: cover;
    --osbslider-overlay: 0.45;
    --osbslider-speed: 600ms;
    --osbslider-items: 1;
    --osbslider-gap: 18px;
    --osbslider-arrow-size: 44px;
    --osbslider-dot-size: 10px;

    /* --- Card --- */
    --osbslider-card-radius: 11px;
    --osbslider-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    --osbslider-card-hover-shadow: 0 8px 28px rgba(0, 0, 0, 0.20);

    /* --- Image zone (fraction of total card height) --- */
    --osbslider-img-fraction: 0.62;
    --osbslider-img-height: calc(var(--osbslider-height) * var(--osbslider-img-fraction));
    --osbslider-body-height: calc(var(--osbslider-height) * (1 - var(--osbslider-img-fraction)));

    /* --- Accent & button --- */
    --osbslider-accent: #FF6B35;
    --osbslider-btn-bg: #FF6B35;
    --osbslider-btn-hover-bg: #E55A24;
    --osbslider-btn-color: #ffffff;

    /* --- Content zone colours --- */
    --osbslider-body-bg: #ffffff;
    --osbslider-title-color: #111111;
    --osbslider-desc-color: #666666;
    --osbslider-price-color: #FF6B35;

    position: relative;
    width: 100%;
    overflow: hidden;
    background: transparent;
    /* Contain stacking context */
    isolation: isolate;
}

/* ── Track ──────────────────────────────────────────────────────────────── */
/*
 * The track is a flex row that holds ALL slides side by side.
 * Its natural width is (total slides × slide width + gaps) which overflows
 * the wrapper; overflow: hidden on the wrapper clips the invisible slides.
 * JavaScript translates the track left/right to reveal the correct window.
 */
.osbslider-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--osbslider-gap, 0px);
    height: var(--osbslider-height);
    will-change: transform;
    transition: transform var(--osbslider-speed) ease;
}

/* ── Single Slide (card) ────────────────────────────────────────────────── */
/*
 * Each slide occupies exactly its share of the wrapper width after
 * subtracting the total gap space between visible items.
 * Formula: (100% - (items - 1) * gap) / items
 *
 * Cards use flex-column layout: image zone on top, content zone below.
 */
.osbslider-slide {
    flex: 0 0 calc((100% - (var(--osbslider-items, 1) - 1) * var(--osbslider-gap, 0px)) / var(--osbslider-items, 1));
    min-width: 0;
    height: 100%;

    /* Card appearance */
    display: flex;
    flex-direction: column;
    border-radius: var(--osbslider-card-radius);
    box-shadow: var(--osbslider-card-shadow);
    overflow: hidden;
    background: var(--osbslider-body-bg);

    /* Smooth hover lift */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.osbslider-slide:hover {
    transform: translateY(-4px);
    box-shadow: var(--osbslider-card-hover-shadow);
}

/* ── Image Zone (top ~62% of card) ─────────────────────────────────────── */
.osbslider-slide__image {
    flex: 0 0 var(--osbslider-img-height);
    height: var(--osbslider-img-height);
    position: relative;
    overflow: hidden;
    background-size: var(--osbslider-fit, cover);
    background-position: center center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
}

/* Subtle scale-up on hover */
.osbslider-slide:hover .osbslider-slide__image {
    transform: scale(1.05);
}

/* Gradient overlay (decorative + legibility when text is on image) */
.osbslider-slide__overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.osbslider-slide__overlay--bottom {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, var(--osbslider-overlay)) 0%,
        rgba(0, 0, 0, 0.0) 60%
    );
}

.osbslider-slide__overlay--top {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, var(--osbslider-overlay)) 0%,
        rgba(0, 0, 0, 0.0) 60%
    );
}

.osbslider-slide__overlay--center {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, calc(var(--osbslider-overlay) * 0.6)) 0%,
        rgba(0, 0, 0, 0.0) 50%
    );
}

/* ── Content Zone (bottom ~38% of card) ────────────────────────────────── */
.osbslider-slide__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem 1.125rem 1.125rem;
    background: var(--osbslider-body-bg);
    gap: 0.35rem;
}

/* Title */
.osbslider-slide__title {
    margin: 0;
    font-size: clamp(0.9rem, 1.8vw, 1.05rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--osbslider-title-color);

    /* Clamp to 2 lines – webkit prefix required for cross-browser multi-line truncation */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.osbslider-slide__title-link {
    color: inherit;
    text-decoration: none;
}

.osbslider-slide__title-link:hover,
.osbslider-slide__title-link:focus {
    color: var(--osbslider-accent);
    text-decoration: none;
    outline: none;
}

.osbslider-slide__title-link:focus-visible {
    outline: 2px solid var(--osbslider-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Description */
.osbslider-slide__desc {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--osbslider-desc-color);

    /* Clamp to 2 lines – webkit prefix required for cross-browser multi-line truncation */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta / Price */
.osbslider-slide__meta {
    margin: 0;
    margin-top: auto;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--osbslider-price-color);
    letter-spacing: 0.01em;
}

/* CTA Button */
.osbslider-slide__btn {
    align-self: flex-start;
    padding: 0.45rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--osbslider-btn-color);
    background: var(--osbslider-btn-bg);
    border: none;
    border-radius: 3rem;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.osbslider-slide__btn:hover,
.osbslider-slide__btn:focus {
    background: var(--osbslider-btn-hover-bg);
    color: var(--osbslider-btn-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(229, 90, 36, 0.35);
    outline: none;
}

.osbslider-slide__btn:focus-visible {
    outline: 2px solid var(--osbslider-accent);
    outline-offset: 3px;
}

/* ── Arrow Buttons ──────────────────────────────────────────────────────── */
.osbslider-arrow {
    position: absolute;
    /* Vertically centre within the image zone */
    top: calc(var(--osbslider-img-height) / 2);
    transform: translateY(-50%);
    z-index: 10;
    width: var(--osbslider-arrow-size);
    height: var(--osbslider-arrow-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.85);
    color: #333;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    /* Hidden by default, revealed on hover */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease,
                background 0.2s ease,
                transform 0.2s ease;
    will-change: opacity;
}

/* Reveal arrows when hovering the wrapper */
.osbslider-wrapper:hover .osbslider-arrow,
.osbslider-wrapper:focus-within .osbslider-arrow {
    opacity: 1;
    pointer-events: auto;
}

.osbslider-arrow:hover,
.osbslider-arrow:focus {
    background: #fff;
    outline: none;
}

.osbslider-arrow:focus-visible {
    outline: 2px solid var(--osbslider-accent);
    outline-offset: 2px;
}

.osbslider-arrow--prev {
    left: 1rem;
}

.osbslider-arrow--next {
    right: 1rem;
}

/* ── Dot Navigation ─────────────────────────────────────────────────────── */
.osbslider-dots {
    position: absolute;
    /* Sit at the bottom of the image zone */
    bottom: calc(var(--osbslider-body-height) + 0.6rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 0.5rem;
    padding: 0.3rem 0.6rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 2rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.osbslider-dot {
    width: var(--osbslider-dot-size);
    height: var(--osbslider-dot-size);
    padding: 0;
    background: rgba(255, 255, 255, 0.55);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.25s ease,
                transform 0.25s ease;
    flex-shrink: 0;
}

.osbslider-dot--active,
.osbslider-dot:hover {
    background: #fff;
    transform: scale(1.25);
}

.osbslider-dot:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── Responsive adjustments ─────────────────────────────────────────────── */
@media (max-width: 991px) {
    .osbslider-track {
        /* Slightly shorter on tablet */
        height: min(var(--osbslider-height), 380px);
    }

    .osbslider-slide__body {
        padding: 0.875rem 1rem 1rem;
    }
}

@media (max-width: 576px) {
    .osbslider-track {
        /* Keep a useful height on small screens */
        height: min(var(--osbslider-height), 300px);
    }

    .osbslider-slide__body {
        padding: 0.75rem 0.875rem 0.875rem;
    }

    .osbslider-slide__desc {
        display: none; /* avoid crowding on very small screens */
    }

    .osbslider-arrow {
        --osbslider-arrow-size: 36px;
        /* Arrows always visible on touch devices (no hover) */
        opacity: 0.85;
        pointer-events: auto;
    }

    .osbslider-arrow--prev { left: 0.5rem; }
    .osbslider-arrow--next { right: 0.5rem; }
}

/* ── Reduced-motion preference ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .osbslider-track,
    .osbslider-slide,
    .osbslider-slide__image,
    .osbslider-slide__btn,
    .osbslider-arrow,
    .osbslider-dot {
        transition: none;
    }

    .osbslider-slide:hover,
    .osbslider-slide:hover .osbslider-slide__image {
        transform: none;
    }
}