/* Image carousel ([mvo_carousel]): native scroll-snap track, JS only adds buttons, dots and autoplay. */
.child-carousel {
    --child-carousel-gap: 1rem;
    --child-carousel-transition: 360ms; /* Duration of a slide change (autoplay, arrows, dots, keys). */
    --child-carousel-visible: var(--child-carousel-per-view, 1);
    position: relative;
    margin: 0 0 2rem;
}
@media (max-width: 900px) { .child-carousel { --child-carousel-visible: min(var(--child-carousel-per-view, 1), 2); } }
@media (max-width: 600px) { .child-carousel { --child-carousel-visible: 1; } }

/* Rounded frame around the whole slider, so the corners stay rounded while slides move.
   clip-path in addition to overflow: Safari otherwise shows square corners during scrolling. */
.child-carousel__viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--child-radius-surface, 8px);
    clip-path: inset(0 round var(--child-radius-surface, 8px));
}
.child-carousel__track {
    display: flex;
    gap: var(--child-carousel-gap);
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    list-style: none;
}
.child-carousel__track::-webkit-scrollbar { display: none; }
.child-carousel__track:focus-visible { outline: 2px solid var(--child-color-field-focus, #228be6); outline-offset: 4px; }
.child-carousel__slide {
    flex: 0 0 calc((100% - (var(--child-carousel-visible) - 1) * var(--child-carousel-gap)) / var(--child-carousel-visible));
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}
.child-carousel__figure { margin: 0; }
.child-carousel__image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--child-carousel-ratio, 16 / 9);
    object-fit: cover;
    border-radius: var(--child-radius-surface, 8px);
}
.child-carousel__caption { margin-top: .5rem; font-size: .875rem; color: var(--child-color-text-muted, #595959); }

/* Same round arrow buttons as the review carousel. */
.child-carousel button.child-carousel__nav {
    position: absolute;
    z-index: 2;
    top: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 85%);
    color: var(--child-color-text, #333);
    box-shadow: none;
    transform: translateY(-50%);
    cursor: pointer;
    transition: opacity 180ms ease;
}
.child-carousel .child-carousel__nav--prev { left: .75rem; }
.child-carousel .child-carousel__nav--next { right: .75rem; }
.child-carousel .child-carousel__nav .ti { display: block; font-size: 48px; }
.child-carousel button.child-carousel__nav:hover { background: rgb(255 255 255 / 85%); color: var(--child-color-text, #333); opacity: .8; }
@media (max-width: 600px) { .child-carousel button.child-carousel__nav { display: none; } }

.child-carousel__controls { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: .75rem; }
.child-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
/* Dots: the active one is a pill three times as wide; its fill shows the autoplay progress. */
.child-carousel button.child-carousel__dot {
    position: relative;
    width: .625rem;
    height: .625rem;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: var(--child-color-border, #ced4da);
    cursor: pointer;
    transition: width 250ms ease;
}
.child-carousel button.child-carousel__dot[aria-current="true"] { width: 1.875rem; }
/* A real element instead of a pseudo-element: Safari does not reliably report their animation events. */
.child-carousel .child-carousel__dot-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0;
    border-radius: inherit;
    background: var(--child-color-text, #333);
}
.child-carousel button.child-carousel__dot[aria-current="true"] .child-carousel__dot-fill { width: 100%; }
.child-carousel--autoplay button.child-carousel__dot[aria-current="true"] .child-carousel__dot-fill {
    animation: child-carousel-progress var(--child-carousel-duration, 5s) linear forwards;
}
.child-carousel--autoplay.is-paused button.child-carousel__dot[aria-current="true"] .child-carousel__dot-fill { animation-play-state: paused; }
@keyframes child-carousel-progress { from { width: 0; } to { width: 100%; } }
.child-carousel :is(.child-carousel__nav, .child-carousel__dot):focus-visible {
    outline: 2px solid var(--child-color-field-focus, #228be6);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .child-carousel__track { scroll-behavior: auto; }
}

/* Fixed height (height="300px" / "viewport"): images fill the frame, the aspect ratio is ignored. */
.child-carousel--fixed-height .child-carousel__track { height: var(--child-carousel-height); }
.child-carousel--fixed-height .child-carousel__slide,
.child-carousel--fixed-height .child-carousel__figure { display: flex; flex-direction: column; height: 100%; }
.child-carousel--fixed-height .child-carousel__image { flex: 1 1 auto; min-height: 0; height: 100%; aspect-ratio: auto; }
.child-carousel--fixed-height .child-carousel__caption { flex: 0 0 auto; }