/**
 * Testimonials block — front end (+ shortcode via theme style.css @import).
 */

.wp-block-shortcode:has(.testimonials-block),
.is-layout-constrained:has(.testimonials-block),
.wp-block-acf-testimonials:has(.testimonials-block),
.testimonials-block-wrap {
	overflow: visible;
	box-sizing: border-box;
}

.testimonials-block-wrap.alignfull.wp-block-acf-testimonials {
	overflow: hidden;
	/*
	 * Block spacing often saves margin-left/right: 0 inline, which beats WP alignfull
	 * breakout. Restore root-padding-aware bleed on the wrapper; inner fills 100%.
	 */
	width: calc(
		100% + var(--wp--style--root--padding-left, 0px) + var(--wp--style--root--padding-right, 0px)
	);
	max-width: none;
	margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1) !important;
	margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
}

/* Shortcode in constrained content: inner element does the viewport bleed */
.wp-block-shortcode .testimonials-block {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
}

/* ACF alignfull: wrapper breaks out; inner carousel fills the wrapper */
.testimonials-block-wrap.alignfull .testimonials-block {
	position: relative;
	width: 100%;
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

/* Block wrapper with default alignment / custom margin or padding: stay in flow */
.testimonials-block-wrap:not(.alignfull) .testimonials-block {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

.testimonials-block {
	--westeck-layout-wide: var(--wp--style--global--wide-size, 1300px);
	/* Right half aligns to the centered wide column (1300px in theme.json). */
	--westeck-testimonial-copy-gutter: max(
		var(--wp--style--root--padding-right, 1.5rem),
		calc((100vw - var(--westeck-layout-wide)) / 2)
	);

	background: linear-gradient(178deg, #001a3b -11.52%, #01316a 24.36%, #01399c 97.69%, var(--sky) 149.91%, #0095ff 230.33%, #48c8ff 293.4%, #c4eafd 347.21%);
}

.testimonials-block h2,
.testimonials-block__title {
	position: absolute;
	top: 0;
	left: 50%;
	right: var(--westeck-testimonial-copy-gutter);
	width: auto;
	max-width: calc(var(--westeck-layout-wide) / 2);
	padding: 96px 0 64px var(--wp--style--root--padding-left, 1.5rem);
	box-sizing: border-box;
	margin: 0;
}

.testimonials-block.swiper {
	position: relative;
	overflow: hidden;
	height: auto;
}

.testimonials-block .testimonial-item.swiper-slide {
	height: auto;
	min-height: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	width: 100%;
	box-sizing: border-box;
}

.testimonial-item__left {
	position: relative;
	overflow: hidden;
	min-height: 0;
	align-self: stretch;
}

.testimonial-item img {
	position: absolute;
	inset: 0;
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.testimonial-item .testimonial-item__heading {
	margin-bottom: 16px;
}

/* GSAP slide motion (testimonials-motion.js) — matches fade-left buttons */
html.westeck-motion-js .testimonials-block[data-testimonials-motion] .testimonial-item__left img:not(.is-testimonial-copy-done),
html.westeck-motion-js .testimonials-block[data-testimonials-motion] .testimonial-item__heading:not(.is-testimonial-copy-done),
html.westeck-motion-js .testimonials-block[data-testimonials-motion] .testimonial-item__text:not(.is-testimonial-copy-done) {
	opacity: 0;
	transform: translate3d(50px, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	html.westeck-motion-js .testimonials-block .testimonial-item__left img,
	html.westeck-motion-js .testimonials-block .testimonial-item__heading,
	html.westeck-motion-js .testimonials-block .testimonial-item__text {
		opacity: 1 !important;
		transform: none !important;
	}
}

.testimonials-block .swiper-wrapper {
	height: auto;
	flex-wrap: nowrap;
}

.testimonial-item__left,
.testimonial-item__right {
	flex: 0 0 50%;
	width: 50%;
	max-width: 50%;
	min-width: 0;
	box-sizing: border-box;
}

.testimonial-item__right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 284px var(--westeck-testimonial-copy-gutter) 64px var(--wp--style--root--padding-left, 1.5rem);
	box-sizing: border-box;
}

.testimonial-item__heading,
.testimonial-item__text {
	width: 100%;
	max-width: none;
}

/* No text selection on nav clicks; copy selectable only when idle (testimonials-motion.js) */
.testimonials-block .swiper-button-prev,
.testimonials-block .swiper-button-next {
	user-select: none;
	-webkit-user-select: none;
	-webkit-touch-callout: none;
}

.testimonials-block.is-testimonial-transitioning .testimonial-item__heading,
.testimonials-block.is-testimonial-transitioning .testimonial-item__text {
	user-select: none;
	-webkit-user-select: none;
}

.testimonials-block .swiper-button-prev,
.testimonials-block .swiper-button-next {
	color: var(--white);
	width: 81px;
	height: 123px;
	position: absolute;
	top: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	overflow: hidden;
	margin-top: 0;
	z-index: 10;
	background: rgba(150, 150, 150, 0.2);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.1);
	-webkit-mask-image: url('../../img/pagination.svg');
	mask-image: url('../../img/pagination.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
}

.testimonials-block .swiper-button-prev::before,
.testimonials-block .swiper-button-next::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url('../../img/pagination-outline.svg');
	background-repeat: no-repeat;
	background-position: center;
	background-size: 100% 100%;
	pointer-events: none;
	z-index: 2;
}

.testimonials-block .swiper-button-prev .swiper-navigation-icon,
.testimonials-block .swiper-button-next .swiper-navigation-icon {
	display: none !important;
}

.testimonials-block .swiper-button-prev::after,
.testimonials-block .swiper-button-next::after {
	font-size: calc(var(--text-body) - 1px);
	font-weight: 700;
	z-index: 3;
}

.testimonials-block .swiper-button-prev:focus-visible,
.testimonials-block .swiper-button-next:focus-visible {
	background: rgba(255, 255, 255, 0.6);
}

.testimonials-block .swiper-button-prev {
	left: 32px;
	right: auto;
	transform: translateY(-50%) scaleX(-1);
}

.testimonials-block .swiper-button-prev::after {
	transform: scaleX(-1);
}

.testimonials-block .swiper-button-next {
	right: 32px;
	left: auto;
	transform: translateY(-50%);
}

.testimonial-item__left img {
	will-change: transform;
	transform: translate3d(0, 0, 0) scale(1.18);
	transform-origin: center center;
}

.testimonials-block--empty {
	padding: 2rem;
	color: var(--white);
}

@media (max-width: 900px) {
	.testimonials-block {
		--westeck-testimonial-copy-gutter: var(--wp--style--root--padding-right, 1.5rem);
	}

	.testimonials-block h2,
	.testimonials-block__title {
		position: static;
		left: auto;
		right: auto;
		width: 100%;
		max-width: none;
		padding: 2rem 1.5rem 1rem;
	}

	.testimonials-block .testimonial-item.swiper-slide {
		flex-direction: column;
		height: auto;
		min-height: 0;
	}

	.testimonial-item__left,
	.testimonial-item__right {
		flex: none;
		width: 100%;
		max-width: 100%;
	}

	.testimonial-item__left {
		height: min(42vh, 320px);
		min-height: 200px;
		padding-inline: var(--westeck-testimonial-copy-gutter);
		box-sizing: border-box;
	}

	.testimonial-item__right {
		flex: 1 1 auto;
		padding: 1.5rem;
	}

	.testimonial-item__heading,
	.testimonial-item__text {
		max-width: none;
	}

	.testimonials-block .swiper-button-prev {
		left: 1rem;
	}

	.testimonials-block .swiper-button-next {
		right: 1rem;
	}
}

@media screen and (max-width: 1024px) {
	.testimonials-block .swiper-button-prev,
	.testimonials-block .swiper-button-next {
		width: calc(81px * 0.5);
		height: calc(123px * 0.5);
	}

	.testimonials-block .swiper-button-prev::after,
	.testimonials-block .swiper-button-next::after {
		font-size: calc((var(--text-body, 21px) - 1px) * 0.5);
	}
}

@media (max-width: 600px) {
	.testimonials-block .testimonial-item.swiper-slide {
		min-height: 0;
	}

	.testimonial-item__left {
		height: min(38vh, 260px);
		min-height: 180px;
	}
}