/**
 * Yeldam Testimonial Slider widget.
 *
 * Quotes are stacked in one grid cell so the block keeps the height of the
 * tallest one and nothing below jumps when the text changes. The outgoing
 * quote fades out in the first half of --ypw-tsl-speed, the incoming one
 * fades (and rises) in during the second half.
 *
 * Avatars are absolutely placed from the centre by their slot:
 *   --s  sign of the slot (-1, 0, 1)
 *   --a  distance from the centre in slots
 * Slots past --ypw-tsl-side are parked one slot beyond the edge, invisible,
 * so they slide in from there when their turn comes.
 */

.ypw-tsl {
	--ypw-tsl-speed: 600ms;
	--ypw-tsl-avatar: 40px;
	--ypw-tsl-avatar-active: 52px;
	--ypw-tsl-gap: 12px;
	--ypw-tsl-ring: #35a853;
	--ypw-tsl-ring-width: 3px;
	--ypw-tsl-inactive-opacity: 1;
	--ypw-tsl-icon-size: 44px;
	--ypw-tsl-side: 2;

	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* Quote area */

.ypw-tsl__stage {
	position: relative;
	width: 100%;
	max-width: 900px;
	margin-inline: auto;
}

.ypw-tsl--has-icon .ypw-tsl__stage {
	padding-inline: calc(var(--ypw-tsl-icon-size) + 16px);
}

.ypw-tsl__quote-icon {
	position: absolute;
	top: 0;
	left: 0;
	font-size: var(--ypw-tsl-icon-size);
	line-height: 1;
	color: #dcdcdc;
}

.ypw-tsl__quote-icon svg {
	width: 1em;
	height: 1em;
	fill: #dcdcdc;
}

.ypw-tsl__slides {
	display: grid;
	touch-action: pan-y;
}

.ypw-tsl__slide {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition:
		opacity calc(var(--ypw-tsl-speed) / 2) ease,
		transform 0s linear calc(var(--ypw-tsl-speed) / 2),
		visibility 0s linear calc(var(--ypw-tsl-speed) / 2);
}

.ypw-tsl__slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition:
		opacity calc(var(--ypw-tsl-speed) / 2) ease calc(var(--ypw-tsl-speed) / 2),
		transform calc(var(--ypw-tsl-speed) / 2) ease calc(var(--ypw-tsl-speed) / 2),
		visibility 0s linear calc(var(--ypw-tsl-speed) / 2);
}

/* Doubled class: beats the theme's blockquote:not([class*=has-]) box and quote mark. */
.ypw-tsl .ypw-tsl__quote {
	position: static;
	overflow: visible;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	font-size: 22px;
	line-height: 1.5;
	font-style: normal;
	color: #333;
	quotes: none;
}

.ypw-tsl .ypw-tsl__quote::before,
.ypw-tsl .ypw-tsl__quote::after {
	content: none;
	display: none;
}

.ypw-tsl__author {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 22px;
}

.ypw-tsl__name {
	font-size: 15px;
	font-weight: 600;
	color: #222;
}

.ypw-tsl__role {
	margin-top: 6px;
	font-size: 12px;
	color: #777;
}

/* Navigation row */

.ypw-tsl__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	max-width: 100%;
	margin-top: 36px;
}

.ypw-tsl__avatars {
	position: relative;
	flex: 0 1 auto;
	width: calc(var(--ypw-tsl-side) * 2 * (var(--ypw-tsl-avatar) + var(--ypw-tsl-gap)) + var(--ypw-tsl-avatar-active) + var(--ypw-tsl-ring-width) * 2 + 4px);
	max-width: 100%;
	height: calc(var(--ypw-tsl-avatar-active) + var(--ypw-tsl-ring-width) * 2 + 4px);
	overflow: hidden;
}

.ypw-tsl .ypw-tsl__avatar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--ypw-tsl-avatar);
	height: var(--ypw-tsl-avatar);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	box-shadow: 0 0 0 0 var(--ypw-tsl-ring);
	cursor: pointer;
	opacity: var(--ypw-tsl-inactive-opacity);
	transform: translate(-50%, -50%) translateX(calc(var(--s) * (min(var(--a), var(--ypw-tsl-side) + 1) * (var(--ypw-tsl-avatar) + var(--ypw-tsl-gap)) + (var(--ypw-tsl-avatar-active) - var(--ypw-tsl-avatar)) / 2)));
	transition:
		transform var(--ypw-tsl-speed) cubic-bezier(0.65, 0, 0.35, 1),
		width var(--ypw-tsl-speed) cubic-bezier(0.65, 0, 0.35, 1),
		height var(--ypw-tsl-speed) cubic-bezier(0.65, 0, 0.35, 1),
		box-shadow var(--ypw-tsl-speed) ease,
		opacity var(--ypw-tsl-speed) ease;
}

.ypw-tsl .ypw-tsl__avatar:hover,
.ypw-tsl .ypw-tsl__avatar:focus {
	background: none;
}

.ypw-tsl .ypw-tsl__avatar:focus-visible {
	outline: 2px solid var(--ypw-tsl-ring);
	outline-offset: 3px;
}

.ypw-tsl .ypw-tsl__avatar.is-active {
	width: var(--ypw-tsl-avatar-active);
	height: var(--ypw-tsl-avatar-active);
	opacity: 1;
	box-shadow: 0 0 0 var(--ypw-tsl-ring-width) var(--ypw-tsl-ring);
	cursor: default;
}

.ypw-tsl .ypw-tsl__avatar.is-hidden,
.ypw-tsl .ypw-tsl__avatar.is-entering {
	opacity: 0;
	pointer-events: none;
}

.ypw-tsl .ypw-tsl__avatar.is-instant {
	transition: none;
}

.ypw-tsl__avatar-inner {
	display: block;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: inherit;
	transition: filter var(--ypw-tsl-speed) ease;
}

.ypw-tsl__avatar-inner img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: inherit;
}

.ypw-tsl__initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: #e8f5ec;
	color: #2e7d46;
	font-size: 14px;
	font-weight: 600;
}

/* Arrows */

.ypw-tsl .ypw-tsl__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid #e2e2e2;
	border-radius: 50%;
	background-color: #fff;
	color: #555;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.ypw-tsl .ypw-tsl__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.ypw-tsl .ypw-tsl__arrow:hover,
.ypw-tsl .ypw-tsl__arrow:focus-visible {
	border-color: var(--ypw-tsl-ring);
	background-color: var(--ypw-tsl-ring);
	color: #fff;
}

@media (max-width: 767px) {
	.ypw-tsl {
		--ypw-tsl-icon-size: 28px;
	}

	.ypw-tsl--has-icon .ypw-tsl__stage {
		padding-inline: calc(var(--ypw-tsl-icon-size) * 0.5);
		padding-top: calc(var(--ypw-tsl-icon-size) + 8px);
	}

	.ypw-tsl__quote-icon {
		left: 50%;
		transform: translateX(-50%);
	}

	.ypw-tsl .ypw-tsl__quote {
		font-size: 17px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ypw-tsl {
		--ypw-tsl-speed: 1ms !important;
	}
}