.vp-carousel {
    position: relative;
    min-width: 0;
    outline-offset: 4px;
}

.vp-carousel-host.vp-work__media,
.vp-detail .wp-block-gallery.vp-carousel-host {
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin: 0 0 16px !important;
}

.vp-work__media.vp-carousel-host > .vp-carousel,
.vp-detail .wp-block-gallery.vp-carousel-host > .vp-carousel {
    display: block;
    width: 100%;
}

.vp-carousel .vp-carousel__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 3 / 2;
    border-radius: 10px;
    background: #f5f5f5;
    touch-action: pan-y;
}

.vp-carousel .vp-carousel__slide,
.vp-carousel .vp-carousel__slide > a,
.vp-carousel .vp-carousel__slide figure {
    width: 100%;
    height: 100%;
}

.vp-carousel .vp-carousel__slide > a,
.vp-carousel .vp-carousel__slide figure {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

.vp-carousel .vp-carousel__slide img {
    display: block;
    width: 100%;
    height: 100% !important;
    max-width: 100%;
    object-fit: contain !important;
    border-radius: 0;
}

.vp-carousel .vp-carousel__slide:not([hidden]) { display: block; }
.vp-carousel .vp-carousel__slide[hidden] { display: none !important; }
.vp-carousel:not(.vp-carousel--detail) .vp-carousel__slide figcaption { display: none !important; }

.vp-carousel--detail .vp-carousel__viewport {
    overflow: hidden;
}

.vp-carousel--detail .vp-carousel__slide figure {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    height: 100%;
}

.vp-carousel--detail .vp-carousel__slide img {
    min-height: 0;
}

.vp-carousel--detail .vp-carousel__slide figcaption {
    display: block !important;
    position: static !important;
    padding: 8px 12px !important;
    background: transparent !important;
    color: #666 !important;
    font-size: 13px;
}

.vp-carousel .vp-carousel__controls {
    position: absolute;
    inset-inline: 8px;
    bottom: 8px;
    z-index: 2;
    display: flex;
    justify-content: center;
    margin: 0;
    pointer-events: none;
}

.vp-carousel .vp-carousel__arrow,
.vp-carousel .vp-carousel__dot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    color: inherit;
    cursor: pointer;
}

.vp-carousel .vp-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgb(255 255 255 / 30%);
    font: inherit;
    font-size: 28px;
    line-height: 1;
}

.vp-carousel .vp-carousel__prev { left: 8px; }
.vp-carousel .vp-carousel__next { right: 8px; }
.vp-carousel .vp-carousel__arrow:hover { background: rgb(255 255 255 / 30%); }
.vp-carousel .vp-carousel__dots { display: flex; align-items: center; justify-content: center; }

.vp-carousel .vp-carousel__dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
}

.vp-carousel .vp-carousel__dot::before {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #a0a0a0;
    content: '';
}

.vp-carousel .vp-carousel__dot[aria-current="true"]::before { background: #222; }
.vp-carousel :is(button, a):focus-visible { outline: 3px solid rgb(255 57 57 / 55%); outline-offset: 2px; }

@media (prefers-reduced-motion: no-preference) {
    .vp-carousel .vp-carousel__slide img { transition: opacity .15s ease; }
}

.vp-work__image-link[hidden] { display: none !important; }
.vp-carousel .vp-carousel__dots { flex-wrap: wrap; max-width: 100%; }
/* Native Gallery applies a per-image column width even to nested figures. */
.vp-detail .wp-block-gallery.vp-carousel-host .vp-carousel__slide > figure.wp-block-image {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    flex: none !important;
    margin: 0 !important;
}
.vp-detail .wp-block-gallery.vp-carousel-host .vp-carousel__slide img {
    width: 100% !important;
}

.vp-carousel .vp-carousel__arrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    background: center / contain no-repeat;
    pointer-events: none;
}
.vp-carousel .vp-carousel__prev::before { background-image: url('icons/arrow-left.svg'); }
.vp-carousel .vp-carousel__next::before { background-image: url('icons/arrow-right.svg'); }
.vp-carousel .vp-carousel__dot { pointer-events: auto; }
.vp-carousel .vp-carousel__dot::before { box-shadow: 0 0 2px rgb(255 255 255 / 80%); }
/* All feed previews share one crop, including a work with a single photo. */
.vp-feed .vp-work__media img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: cover !important;
    object-position: center;
}

/* Keep desktop previews quiet until interaction; touch and keyboard controls stay visible. */
@media (hover: hover) and (pointer: fine) {
    .vp-carousel .vp-carousel__arrow {
        opacity: 0;
        pointer-events: none;
    }

    .vp-carousel:hover .vp-carousel__arrow,
    .vp-carousel:focus-within .vp-carousel__arrow {
        opacity: 1;
        pointer-events: auto;
    }

    @media (prefers-reduced-motion: no-preference) {
        .vp-carousel .vp-carousel__arrow {
            transition: opacity .15s ease;
        }
    }
}