.wp-block-acf-image-slider,
.oqp-image-slider-block,
.oqp-image-slider {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.wp-block-acf-image-slider,
.oqp-image-slider-block {
    contain: inline-size;
}

.oqp-image-slider {
    position: relative;
    visibility: visible;
}

.oqp-image-slider .splide__track,
.oqp-image-slider .splide__list,
.oqp-image-slider .splide__slide,
.oqp-image-slider__figure {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.oqp-image-slider .splide__track {
    width: 100%;
    overflow: hidden;
}

.oqp-image-slider:not(.is-initialized) .splide__list {
    display: flex;
    gap: var(--image-slider-gap, 1rem);
    overflow-x: auto;
}

.oqp-image-slider:not(.is-initialized) .splide__slide {
    flex-basis: min(80%, 40rem);
    flex-grow: 0;
    flex-shrink: 0;
}

.oqp-image-slider {
    --image-slider-gap: clamp(0.75rem, 2vw, 1.5rem);
    --image-slider-radius: clamp(0.75rem, 1.25vw, 1.25rem);
    --image-slider-control-size: clamp(2.5rem, 5vw, 3rem);
    --image-slider-caption-padding: clamp(1rem, 2.5vw, 1.75rem);

}

.oqp-image-slider .splide__track {
    border-radius: var(--image-slider-radius);
}

.oqp-image-slider__figure {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border-radius: var(--image-slider-radius);
    background: var(--wp--preset--color--background);
    min-height: 12rem;
}

.oqp-image-slider__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    box-sizing: border-box;
    object-fit: cover;
}

/* Image ratios */

.oqp-image-slider--ratio-landscape .oqp-image-slider__figure {
    aspect-ratio: 4 / 3;
}

.oqp-image-slider--ratio-wide .oqp-image-slider__figure {
    aspect-ratio: 16 / 9;
}

.oqp-image-slider--ratio-portrait .oqp-image-slider__figure {
    aspect-ratio: 3 / 4;
}

.oqp-image-slider--ratio-square .oqp-image-slider__figure {
    aspect-ratio: 1 / 1;
}

.oqp-image-slider--ratio-natural .oqp-image-slider__figure {
    aspect-ratio: auto;
}

.oqp-image-slider--ratio-natural .oqp-image-slider__image {
    height: auto;
    object-fit: initial;
}

/* Caption */

.oqp-image-slider__caption {
    position: absolute;
    inset: auto 0 0;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding:
        calc(var(--image-slider-caption-padding) * 2)
        var(--image-slider-caption-padding)
        var(--image-slider-caption-padding);
    color: #fff;
    background:
        linear-gradient(
            to top,
            rgb(0 0 0 / 0.76),
            rgb(0 0 0 / 0)
        );
    overflow-wrap: anywhere;
}

/* Navigation arrows */

.oqp-image-slider .splide__arrow {
    width: var(--image-slider-control-size);
    height: var(--image-slider-control-size);
    opacity: 1;
    border: 1px solid rgb(255 255 255 / 0.35);
    color: var(--wp--preset--color--background);
    background: rgb(13 43 69 / 0.82);
    box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.16);
    backdrop-filter: blur(0.5rem);
    transition:
        transform 160ms ease,
        background-color 160ms ease;
}

.oqp-image-slider .splide__arrow:hover {
    transform: translateY(-50%) scale(1.05);
}

.oqp-image-slider .splide__arrow:focus-visible {
    outline: 0.1875rem solid currentColor;
    outline-offset: 0.1875rem;
}

.oqp-image-slider .splide__arrow svg {
    fill: currentColor;
}

.oqp-image-slider .splide__arrow--prev {
    left: clamp(0.5rem, 2vw, 1rem);
}

.oqp-image-slider .splide__arrow--next {
    right: clamp(0.5rem, 2vw, 1rem);
}

/* Pagination */

.oqp-image-slider .splide__pagination {
    position: static;
    gap: 0.375rem;
    margin: 1rem 0 0;
    padding: 0;
}

.oqp-image-slider .splide__pagination__page {
    width: 0.625rem;
    height: 0.625rem;
    margin: 0;
    opacity: 0.45;
    background: currentColor;
    transition:
        width 160ms ease,
        opacity 160ms ease,
        border-radius 160ms ease;
}

.oqp-image-slider .splide__pagination__page.is-active {
    width: 1.5rem;
    opacity: 1;
    border-radius: 999px;
    transform: none;
}

/* Empty editor state */

.oqp-image-slider-placeholder {
    padding: clamp(1.5rem, 4vw, 3rem);
    border: 1px dashed currentColor;
    border-radius: var(--image-slider-radius, 1rem);
    text-align: center;
    opacity: 0.7;
}

.oqp-image-slider-placeholder p {
    margin-block-end: 0;
}

@media (max-width: 40rem) {
    .oqp-image-slider {
        --image-slider-control-size: 2.25rem;
        --image-slider-caption-padding: 0.875rem;
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .oqp-image-slider *,
    .oqp-image-slider *::before,
    .oqp-image-slider *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}