/**
 * Testimonial carousels.
 *
 * Replaces the Owl Carousel styling that Slide Anything injected. Only the
 * genuinely Owl-bound rules are reproduced here: the existing testimonial styles
 * in Additional CSS (.image-wrapper, .image-wrapper .date, .testimonial-content,
 * the shared .quote sizing and .testimonial-slider-secondary) are not tied to
 * Owl and keep applying to this markup unchanged.
 */

/**
 * Splide keeps its root hidden until it mounts. Overriding that leaves the first
 * slide readable if the script ever fails to load, and the explicit slide width
 * matches what Splide sets for perPage: 1, so nothing shifts on init.
 */
.testimonials-slider.splide {
	visibility: visible;
}

.testimonials-slider:not(.is-initialized) .splide__slide {
	width: 100%;
}

.testimonials-slider:not(.is-initialized) .splide__slide:not(:first-child) {
	display: none;
}

/**
 * Slides must size to their own content so the script can measure the active
 * one; the track height it sets is then animated in step with the movement.
 */
.testimonials-slider .splide__list {
	align-items: flex-start;
}

/**
 * The clip guards against a hairline seam: the track's edges can land on a
 * fractional device pixel, and the neighbouring slide then rasterises one pixel
 * inside the overflow clip. Clipping a pixel further in removes it, at the cost
 * of a pixel of the slide's own edge.
 */
.testimonials-slider .splide__track {
	clip-path: inset(0 1px);
	transition: height 200ms ease;
}

/**
 * Arrows — replaces the #slider_2135 and #slider_2136 .owl-nav rules.
 *
 * Small screens put them in a row beneath the slider. Placing them beside the
 * content there would cost 104px of a ~335px slide, and overlaying them covers
 * the testimonial, so below is the only option that keeps the text readable.
 * Splide renders its arrows container before the track, hence the reorder.
 */
.testimonials-slider {
	display: flex;
	flex-direction: column;
}

.testimonials-slider .splide__arrows {
	display: flex;
	order: 1;
	justify-content: center;
	margin-top: 20px;
	gap: 16px;
}

.testimonials-slider .splide__arrow {
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: center center;
	cursor: pointer;
}

.testimonials-slider .splide__arrow svg {
	display: none;
}

/**
 * Icons are the media-library files the old sliders already used, referenced
 * root-relative so the stylesheet stays portable across environments.
 */
.testimonials-slider--primary .splide__arrow--prev {
	background-image: url("/wp-content/uploads/2021/10/ic_button_back.svg");
}

.testimonials-slider--primary .splide__arrow--next {
	background-image: url("/wp-content/uploads/2021/10/ic_button_next.svg");
}

/* The secondary slider reuses the "next" icon for both directions. */
.testimonials-slider--secondary .splide__arrow {
	background-image: url("/wp-content/uploads/2021/10/ic_button_next.svg");
}

.testimonials-slider--secondary .splide__arrow--prev {
	transform: rotate(180deg);
}

/* Replaces .owl-carousel .owl-item img. */
.testimonials-slider--primary .testimonial-image {
	width: 100%;
	height: 100%;
	max-width: 900px;
	max-height: 600px;
}

/**
 * From 801px there is room to sit the arrows either side of the content, as the
 * old sliders did. The slide is inset by the arrow width plus a 10px gap.
 */
@media (min-width: 801px) {
	.testimonials-slider {
		display: block;
	}

	.testimonials-slider .splide__slide {
		padding: 0 62px;
	}

	.testimonials-slider .splide__arrows {
		display: block;
		margin-top: 0;
	}

	.testimonials-slider .splide__arrow {
		position: absolute;
		top: 50%;
		z-index: 2;
		transform: translateY(-50%);
	}

	.testimonials-slider .splide__arrow--prev {
		left: 10px;
	}

	.testimonials-slider .splide__arrow--next {
		right: 10px;
	}

	.testimonials-slider--secondary .splide__arrow--prev {
		transform: translateY(-50%) rotate(180deg);
	}
}

/**
 * Splide already honours reduced motion for its own movement and autoplay; the
 * height transition above is ours, so it has to opt out too.
 */
@media (prefers-reduced-motion: reduce) {
	.testimonials-slider .splide__track {
		transition: none;
	}
}