.ovo-slider {
    --ovo-slider-navy: #101d35;
    --ovo-slider-red: #ab1730;
    --ovo-slider-line: #dce4e9;
    position: relative;
    background: #fff;
}

.ovo-slider__stage {
    position: relative;
    overflow: hidden;
    background: var(--ovo-slider-navy);
}

.ovo-slider__swiper,
.ovo-slider__swiper .swiper-wrapper,
.ovo-slider__slide {
    height: 100%;
}

.ovo-slider__slide {
    position: relative;
    overflow: hidden;
    background: var(--ovo-slider-navy);
}

/* object-fit keeps every photo filling its frame, whatever its original size */
.ovo-slider__image {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    transform: scale(1.06);
    transition: transform 6s ease-out;
}

.ovo-events-showcase [data-position="top"] .ovo-slider__image { object-position: center top; }
.ovo-events-showcase [data-position="bottom"] .ovo-slider__image { object-position: center bottom; }
.ovo-events-showcase [data-position="left"] .ovo-slider__image { object-position: left center; }
.ovo-events-showcase [data-position="right"] .ovo-slider__image { object-position: right center; }

.ovo-events-showcase__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    text-transform: uppercase;
}

.ovo-events-showcase__label::before {
    width: 30px;
    height: 2px;
    background: #e9b3bd;
    content: '';
}

.ovo-slider__slide.swiper-slide-active .ovo-slider__image {
    transform: scale(1);
}

.ovo-slider__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    transition: background .5s ease;
}

.ovo-slider__title {
    margin: 0 0 14px;
    color: #fff;
    font-weight: 700;
    line-height: 1.08;
    text-wrap: balance;
    text-shadow: 0 2px 18px rgba(0, 0, 0, .25);
}

.ovo-slider__subtitle {
    margin: 0;
    color: rgba(255, 255, 255, .9);
    line-height: 1.6;
}

.ovo-slider__caption > * {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.swiper-slide-active .ovo-slider__caption > * {
    opacity: 1;
    transform: none;
    transition-delay: .25s;
}

.swiper-slide-active .ovo-slider__caption > :nth-child(2) {
    transition-delay: .4s;
}

.swiper-slide-active .ovo-slider__caption > :nth-child(3) {
    transition-delay: .55s;
}

.ovo-slider__arrow {
    position: absolute;
    top: 50%;
    z-index: 5;
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: rgba(16, 29, 53, .45);
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transform: translate(-50%, -50%);
    transition: background .2s ease, border-color .2s ease;
}

.ovo-slider__arrow svg {
    width: 22px;
    height: 22px;
}

.ovo-slider__arrow:hover {
    border-color: var(--ovo-slider-red);
    background: var(--ovo-slider-red);
}

/* ---------- Showcase: three panels, the centre one carries the caption ---------- */
.ovo-slider--showcase .ovo-slider__stage {
    height: clamp(440px, 34vw, 620px);
}

.ovo-slider--showcase .ovo-slider__shade {
    background: rgba(10, 18, 36, .12);
}

.ovo-slider--showcase .swiper-slide-active .ovo-slider__shade {
    background:
        linear-gradient(0deg, rgba(10, 18, 36, .88) 0%, rgba(10, 18, 36, .35) 50%, rgba(10, 18, 36, .1) 100%);
}

.ovo-slider--showcase .ovo-slider__caption {
    position: absolute;
    right: 48px;
    bottom: 44px;
    left: 48px;
    z-index: 2;
}

.ovo-slider--showcase .ovo-slider__title {
    font-size: clamp(28px, 2.6vw, 48px);
}

.ovo-slider--showcase .ovo-slider__subtitle {
    font-size: 17px;
}

.ovo-slider--showcase .ovo-slider__arrow--prev {
    left: calc(100% / 6);
}

.ovo-slider--showcase .ovo-slider__arrow--next {
    left: calc(100% / 6 * 5);
}

.ovo-slider__zoom {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 3;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    color: #fff;
    cursor: pointer;
    opacity: 0;
    backdrop-filter: blur(6px);
    transition: opacity .3s ease, background .2s ease;
}

.ovo-slider__zoom svg {
    width: 20px;
    height: 20px;
}

.swiper-slide-active .ovo-slider__zoom {
    opacity: 1;
}

.ovo-slider__zoom:hover {
    background: var(--ovo-slider-red);
}

.ovo-slider__bar {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 22px 36px;
    border-bottom: 1px solid var(--ovo-slider-line);
}

.ovo-slider__thumbs {
    position: relative;
    display: flex;
    flex: 1;
    gap: 12px;
    min-width: 0;
    overflow-x: auto;
    padding: 2px;
    scrollbar-width: none;
}

.ovo-slider__thumbs::-webkit-scrollbar {
    display: none;
}

.ovo-slider__thumb {
    display: flex;
    flex: 0 0 188px;
    align-items: center;
    gap: 12px;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: #f3f5f8;
    color: var(--ovo-slider-navy);
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease;
}

.ovo-slider__thumb:hover {
    background: #e9eef4;
}

.ovo-slider__thumb.is-active {
    border-color: var(--ovo-slider-red);
    background: #fbf1f3;
}

.ovo-slider__thumb img {
    flex: 0 0 58px;
    width: 58px;
    max-width: none;
    height: 58px;
    border-radius: 4px;
    object-fit: cover;
}

.ovo-slider__thumb-text {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.ovo-slider__thumb-number {
    color: #7a8494;
    font-size: 12px;
    font-weight: 600;
}

.ovo-slider__thumb.is-active .ovo-slider__thumb-number {
    color: var(--ovo-slider-red);
}

.ovo-slider__thumb-title {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ovo-slider__nav {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
}

.ovo-slider__nav-btn {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--ovo-slider-line);
    border-radius: 50%;
    background: #fff;
    color: var(--ovo-slider-navy);
    cursor: pointer;
    transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.ovo-slider__nav-btn svg {
    width: 20px;
    height: 20px;
}

.ovo-slider__nav-btn:hover {
    border-color: var(--ovo-slider-navy);
    background: var(--ovo-slider-navy);
    color: #fff;
}

.ovo-slider__counter {
    min-width: 54px;
    color: var(--ovo-slider-navy);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.ovo-slider__icon-pause,
.ovo-slider.is-playing .ovo-slider__icon-play {
    display: none;
}

.ovo-slider.is-playing .ovo-slider__icon-pause {
    display: block;
}

/* ---------- Full width: one large image with centred caption ---------- */
.ovo-slider--fullwidth .ovo-slider__stage {
    height: clamp(460px, 74vh, 800px);
}

.ovo-slider--fullwidth .ovo-slider__shade {
    background:
        linear-gradient(0deg, rgba(10, 18, 36, .7) 0%, rgba(10, 18, 36, 0) 45%),
        rgba(10, 18, 36, .35);
}

.ovo-slider--fullwidth .ovo-slider__caption {
    position: relative;
    z-index: 2;
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 60px;
    text-align: center;
}

.ovo-slider--fullwidth .ovo-slider__title {
    max-width: 900px;
    font-size: clamp(34px, 4.4vw, 64px);
}

.ovo-slider--fullwidth .ovo-slider__subtitle {
    max-width: 720px;
    font-size: clamp(16px, 1.3vw, 19px);
}

.ovo-slider--fullwidth .ovo-slider__arrow {
    transform: translateY(-50%);
}

.ovo-slider--fullwidth .ovo-slider__arrow--prev {
    left: 28px;
}

.ovo-slider--fullwidth .ovo-slider__arrow--next {
    right: 28px;
}

.ovo-slider__dots {
    position: absolute;
    bottom: 28px;
    left: 50%;
    z-index: 5;
    display: flex;
    gap: 10px;
    transform: translateX(-50%);
}

.ovo-slider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .5);
    cursor: pointer;
    transition: width .3s ease, background .3s ease;
}

.ovo-slider__dot.is-active {
    width: 34px;
    background: #fff;
}

/* The editor often wraps a block shortcode in an empty paragraph, which leaves a white strip above the slider */
.ck-content > p:empty {
    display: none;
}

.ck-content > .ovo-slider:first-child {
    margin-top: 0;
}

/* ---------- Responsive ---------- */
.ovo-slider--compact .ovo-slider__arrow--prev {
    left: 56px;
}

.ovo-slider--compact .ovo-slider__arrow--next {
    left: calc(100% - 56px);
}

/* Phones and tablets: one photo at full width, arrows live in the bar below */
@media (max-width: 991.98px) {
    .ovo-slider--showcase .ovo-slider__stage {
        height: clamp(460px, 78vw, 620px);
    }

    .ovo-slider--showcase .ovo-slider__arrow {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .ovo-slider--showcase .ovo-slider__stage {
        height: clamp(440px, 125vw, 600px);
    }

    .ovo-slider--showcase .ovo-slider__title {
        font-size: clamp(28px, 8vw, 36px);
    }

    .ovo-slider--showcase .ovo-slider__caption {
        right: 22px;
        bottom: 26px;
        left: 22px;
    }

    .ovo-slider--showcase .ovo-slider__subtitle {
        font-size: 15px;
    }

    .ovo-slider__subtitle {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
    }

    .ovo-slider__arrow {
        top: 40%;
    }

    .ovo-slider__bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 16px;
    }

    .ovo-slider__thumb {
        flex-basis: 160px;
    }

    .ovo-slider__nav {
        justify-content: center;
    }

    .ovo-slider--fullwidth .ovo-slider__stage {
        height: clamp(420px, 78vh, 620px);
    }

    .ovo-slider--fullwidth .ovo-slider__arrow {
        top: auto;
        bottom: 12px;
        width: 42px;
        height: 42px;
        transform: none;
    }

    .ovo-slider--fullwidth .ovo-slider__arrow--prev {
        left: 16px;
    }

    .ovo-slider--fullwidth .ovo-slider__arrow--next {
        right: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ovo-slider__image,
    .ovo-slider__caption > * {
        transition: none;
    }

    .ovo-slider__image {
        transform: none;
    }
}
