/** Events slider styles **/
.events-slider {
    --events-slider-teal: #2ba9c3; /* active dot */
    --events-slider-russet: #cc9e5b; /* "Check our event" button */
    --events-slider-arrow: 48px;
    --events-slider-gutter: 64px; /* arrow + space outside the slider */

    position: relative;
    width: 100%;
}

.events-slider__viewport {
    overflow: hidden;
}

.events-slider__track {
    display: flex;
    transition: transform 0.5s ease;
}

.events-slider__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.events-slider__image,
.events-slider__slide picture,
.events-slider__slide img {
    display: block;
    width: 100%;
}

.events-slider__slide img {
    height: auto;
}

/* Buttons (Figma: "Reserve Now" + "Check our event").
   Typography, colours, padding and radius come from Elementor's
   Site Settings > Buttons via the .elementor-button class. */
.events-slider__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px;
    margin-bottom: 60px;
}

.events-slider .events-slider__button {
    text-decoration: none;
    white-space: nowrap;
}

/* Second colour from the design; Elementor's global button is teal */
.events-slider .elementor-button.events-slider__button--event {
    background-color: var(--events-slider-russet);
}

/* Arrows: outside the slider box, vertically centred on the image (top set by JS) */
.events-slider .events-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--events-slider-arrow);
    height: var(--events-slider-arrow);
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.events-slider .events-slider__arrow:hover,
.events-slider .events-slider__arrow:focus-visible {
    opacity: 0.75;
}

.events-slider__arrow--prev {
    left: calc(var(--events-slider-gutter) * -1);
}

.events-slider__arrow--next {
    right: calc(var(--events-slider-gutter) * -1);
}

/* No room beside the slider (set by events-slider.js): arrows inside, over the image */
.events-slider--arrows-inside .events-slider__arrow--prev {
    left: 8px;
}

.events-slider--arrows-inside .events-slider__arrow--next {
    right: 8px;
}

.events-slider.events-slider--arrows-inside .events-slider__arrow {
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.45);
}

/* Mobile: no arrows, swipe instead (events-slider.js) */
@media (max-width: 720px) {
    .events-slider .events-slider__arrow {
        display: none;
    }

    .events-slider__viewport {
        touch-action: pan-y;
    }

    .events-slider__actions {
        margin-bottom: 32px;
    }
}

/* Dots: below the image */
.events-slider__dots {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-top: 14px;
}

/* 24px tap area, 10px visible dot (padding + content-box background) */
.events-slider .events-slider__dot {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 7px;
    border: 0;
    border-radius: 50%;
    background: #fff;
    background-clip: content-box;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.events-slider .events-slider__dot.is-active {
    background-color: var(--events-slider-teal);
}

/* Arrows/dots the script hides (nothing to scroll, or past the last stop) */
.events-slider .events-slider__arrow[hidden],
.events-slider .events-slider__dots[hidden],
.events-slider .events-slider__dot[hidden] {
    display: none;
}

/* Carousel (per_view > 1): cards like tifhk's events carousel, Dragonfly styling.
   --events-slider-visible (4 / 3 / 2 / 1) is set by events-slider.js. */
.events-slider--multi {
    --events-slider-visible: 4;
    --events-slider-gap: 15px;
    --events-slider-gold: #cc9e5b;
    --events-slider-meta: #b6b6b6;
    --events-slider-font-display: 'Elsie Swash Caps', serif;
    --events-slider-font: 'Roboto Condensed', sans-serif;
}

.events-slider--multi .events-slider__track {
    gap: var(--events-slider-gap);
    align-items: flex-start;
}

.events-slider--multi .events-slider__slide {
    flex: 0 0 calc((100% - (var(--events-slider-visible) - 1) * var(--events-slider-gap)) / var(--events-slider-visible));
}

.events-slider--multi .events-slider__actions {
    gap: 12px;
    margin-bottom: 24px;
}

/* Image: fixed 16:10 box, cropped from the centre */
.events-slider--multi .events-slider__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #111;
}

.events-slider--multi .events-slider__image picture {
    height: 100%;
}

.events-slider--multi .events-slider__slide .events-slider__image img {
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.5s ease;
}

.events-slider--multi .events-slider__image:hover img {
    transform: scale(1.03);
}

/* Name, date and time below the image */
.events-slider__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 16px;
}

.events-slider .events-slider__title {
    margin: 0;
    padding: 0;
    font-family: var(--events-slider-font-display);
    font-size: 24px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.24px;
    text-transform: none;
}

.events-slider .events-slider__title a {
    color: var(--events-slider-gold);
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.events-slider .events-slider__title a:hover {
    opacity: 0.8;
}

.events-slider .events-slider__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.events-slider .events-slider__meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--events-slider-meta);
    font-family: var(--events-slider-font);
    font-size: 16px;
    line-height: 1.3;
}

.events-slider .events-slider__meta-item img {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
}

/* At the first / last card */
.events-slider .events-slider__arrow.is-disabled {
    opacity: 0.3;
    cursor: default;
}