/*
 * Section: testimonials (the "jl-testimonials" group).
 *
 * A small label, a heading and a row of testimonials, each with a photo, a
 * quote and a name. Every testimonial is a Group ("jl-quote") holding an
 * Image and a Quote block.
 *
 * It is drawn like the services section: columns divided by hairlines, with
 * square photos and no boxes, shadows or rounded corners.
 *
 * In the editor the testimonials sit in a plain grid, so all of them can be
 * seen and edited. On the site inc/testimonials.php puts the row in a window
 * ("jl-testimonials__viewport") and adds arrows and dots, and
 * assets/js/testimonials.js turns it into a carousel: three columns on wide
 * screens with the middle one raised, one centred column with its neighbours
 * peeking in on tablets and phones. Without the script the row simply
 * scrolls sideways.
 *
 * Colours, fonts and edge spacing come from the theme.
 */

.jl-testimonials.jl-testimonials {
	--tm-pad: 48px;
	--tm-col: 28px;
	--tm-raise: 38px;
	--tm-img: 360px;
	--tm-btn: 52px;
	--tm-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	position: relative;
	margin-block: 0;
	padding: clamp(72px, 11vh, 120px) var(--tm-pad) clamp(96px, 14vh, 128px);
	overflow: hidden;
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

/* WordPress spaces out a Group's children; every part here sets its own spacing. */
.jl-testimonials.jl-testimonials > *,
.jl-testimonials .jl-testimonials__head > *,
.jl-testimonials .jl-testimonials__list > *,
.jl-testimonials .jl-quote > *,
.jl-testimonials .jl-quote blockquote > * {
	margin-block: 0;
}

/* ---------- Heading and intro ---------- */

/* The right side keeps room for the arrows. */
.jl-testimonials .jl-testimonials__head {
	position: relative;
	padding-right: calc(var(--tm-btn) * 2 + 42px);
}

/* Small labels: the one above the heading, and the names under the quotes */
.jl-testimonials .jl-testimonials__tag,
.jl-testimonials .jl-quote blockquote cite {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

.jl-testimonials .jl-testimonials__head h2 {
	max-width: 720px;
	margin-top: 28px;
	font-size: clamp(2.75rem, 4.6vw, 4rem);
	letter-spacing: -0.03em;
	line-height: 1;
	text-wrap: balance;
}

.jl-testimonials .jl-testimonials__head > p:not(.jl-testimonials__tag) {
	max-width: 440px;
	margin-top: 18px;
	font-size: 1.0625rem;
	line-height: 1.45;
}

/* Arrows: added on the site, and shown once the script can move the row. */
.jl-testimonials .jl-testimonials__arrows {
	position: absolute;
	right: 0;
	bottom: 0;
	display: none;
	gap: 10px;
}

.jl-testimonials.is-ready .jl-testimonials__arrows {
	display: flex;
}

.jl-testimonials .jl-testimonials__arrow {
	position: relative;
	width: var(--tm-btn);
	height: var(--tm-btn);
	padding: 0;
	border: 1px solid var(--jl-line);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: background-color 0.2s, border-color 0.2s, opacity 0.3s, transform 0.2s;
}

.jl-testimonials .jl-testimonials__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 18px;
	margin: -9px 0 0 -9px;
	background: var(--wp--preset--color--contrast);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9H16M10.5 3.5L16 9L10.5 14.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9H16M10.5 3.5L16 9L10.5 14.5'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color 0.2s;
}

.jl-testimonials .jl-testimonials__arrow--prev::before {
	transform: scaleX(-1);
}

.jl-testimonials .jl-testimonials__arrow:hover:not(:disabled) {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
}

.jl-testimonials .jl-testimonials__arrow:hover:not(:disabled)::before {
	background: var(--wp--preset--color--base);
}

.jl-testimonials .jl-testimonials__arrow:active:not(:disabled) {
	transform: scale(0.94);
}

.jl-testimonials .jl-testimonials__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.jl-testimonials .jl-testimonials__arrow:focus-visible,
.jl-testimonials .jl-testimonials__viewport:focus-visible,
.jl-testimonials .jl-testimonials__dot:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* ---------- The row ---------- */

/* In the editor: a grid, so every testimonial is in view. */
.jl-testimonials .jl-testimonials__list {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	row-gap: 48px;
	margin-top: 56px;
}

/* On the site: one row inside a window. The space above leaves room for the raised column. */
.jl-testimonials .jl-testimonials__viewport {
	position: relative;
	margin-top: 56px;
	padding: 48px 0 4px;
	overflow-x: auto;
}

.jl-testimonials .jl-testimonials__viewport > .jl-testimonials__list {
	display: flex;
	margin-top: 0;
}

.jl-testimonials .jl-quote__slide {
	flex: 0 0 calc(100% / 3);
	min-width: 0;
}

.jl-testimonials .jl-quote__lift {
	height: 100%;
	transform-origin: 50% 100%;
	transition: transform 0.7s var(--tm-ease), opacity 0.6s ease;
}

/* ---------- A testimonial: a column behind a hairline, like a service ---------- */

.jl-testimonials .jl-quote {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 var(--tm-col);
	border-left: 1px solid var(--jl-line);
}

.jl-testimonials .jl-quote figure {
	flex: none;
	height: var(--tm-img);
	margin: 0;
}

.jl-testimonials .jl-quote figure img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 30%, var(--wp--preset--color--accent-5));
}

/* While editing, WordPress wraps each image in a box that would otherwise shrink to the image's own size. */
.jl-testimonials .jl-quote figure > div {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
}

.jl-testimonials .jl-quote figure > a {
	display: block;
	height: 100%;
}

/* Quote, under an opening quotation mark. */
.jl-testimonials .jl-quote blockquote {
	display: flex;
	flex: 1;
	flex-direction: column;
	margin: 0;
	padding: 28px 0 0;
	border: 0;
	font-size: 1.125rem;
	font-weight: 400;
}

.jl-testimonials .jl-quote blockquote::before {
	content: "\201C";
	height: 26px;
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 2.5rem;
	line-height: 1;
}

.jl-testimonials .jl-quote blockquote p {
	margin-top: 6px;
	font-size: inherit;
	letter-spacing: -0.01em;
	line-height: 1.38;
}

.jl-testimonials .jl-quote blockquote p + p {
	margin-top: 0.6em;
}

/* Name: a small label at the foot of the column, whatever the length of the quote. */
.jl-testimonials .jl-quote blockquote cite {
	display: block;
	margin-top: auto;
	padding-top: 28px;
	color: var(--wp--preset--color--accent-4);
	font-style: normal;
}

/* Dots: phones only, filled in by the script. */
.jl-testimonials .jl-testimonials__dots {
	display: none;
	justify-content: center;
	gap: 6px;
	margin-top: 24px;
}

.jl-testimonials .jl-testimonials__dot {
	position: relative;
	width: 6px;
	height: 6px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 22%, transparent);
	cursor: pointer;
	transition: width 0.4s var(--tm-ease), background-color 0.3s;
}

/* A larger area to tap than the dot itself. */
.jl-testimonials .jl-testimonials__dot::after {
	content: "";
	position: absolute;
	inset: -10px -3px;
}

.jl-testimonials .jl-testimonials__dot[aria-current="true"] {
	width: 22px;
	background: var(--wp--preset--color--contrast);
}

/* ---------- Carousel (front only, once the script is running) ---------- */

.jl-js .jl-testimonials .jl-testimonials__viewport {
	overflow: hidden;
}

.jl-testimonials.is-ready .jl-testimonials__viewport {
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.jl-testimonials.is-ready .jl-testimonials__viewport.is-dragging {
	cursor: grabbing;
}

.jl-testimonials.is-ready .jl-testimonials__list {
	transition: transform 0.8s cubic-bezier(0.22, 0.8, 0.2, 1);
	will-change: transform;
}

.jl-testimonials.is-ready .is-dragging .jl-testimonials__list {
	transition: none;
}

/* The centred column sits a little higher than its neighbours. */
.jl-testimonials.is-ready .jl-quote__slide.is-center .jl-quote__lift {
	transform: translateY(calc(var(--tm-raise) * -1));
}

/* Fewer than three testimonials on a wide screen: keep them in the middle. */
@media (min-width: 1100px) {
	.jl-testimonials.is-few .jl-testimonials__viewport > .jl-testimonials__list {
		justify-content: center;
	}
}

/* Columns fade and rise in, one after another, when the section comes into view. */
.jl-js .jl-testimonials .jl-quote__slide {
	opacity: 0;
	transform: translateY(56px);
	transition: opacity 0.9s ease var(--delay, 0ms), transform 1s var(--tm-ease) var(--delay, 0ms);
}

.jl-js .jl-testimonials.is-in .jl-quote__slide {
	opacity: 1;
	transform: none;
}

/* The words of a quote arrive one by one the first time it is seen. */
.jl-testimonials .jl-word {
	display: inline-block;
	transition: opacity 0.5s ease var(--d, 0ms), transform 0.5s ease var(--d, 0ms);
}

.jl-js .jl-testimonials .jl-quote__slide:not(.is-seen) .jl-word {
	opacity: 0.08;
	transform: translateY(8px);
}

/* Set by the script if it could not start: the row scrolls sideways and everything shows at rest. */
.jl-js .jl-testimonials.is-plain .jl-testimonials__viewport {
	overflow-x: auto;
}

.jl-js .jl-testimonials.is-plain .jl-quote__slide,
.jl-js .jl-testimonials.is-plain .jl-word {
	opacity: 1 !important;
	transform: none !important;
}

/* ---------- Tablet: one centred column, its neighbours peeking in ---------- */
@media (max-width: 1099px) {
	.jl-testimonials.jl-testimonials {
		--tm-pad: 40px;
		--tm-col: 24px;
		--tm-raise: 23px;
		--tm-img: 320px;
		--tm-btn: 48px;
		--tm-peek: 58%;
		padding-top: 96px;
		padding-bottom: 104px;
	}

	.jl-testimonials .jl-testimonials__head h2 {
		margin-top: 20px;
		font-size: 3.25rem;
	}

	.jl-testimonials .jl-testimonials__head > p:not(.jl-testimonials__tag) {
		font-size: 1rem;
	}

	.jl-testimonials .jl-testimonials__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 48px;
	}

	.jl-testimonials .jl-testimonials__viewport {
		margin: 48px calc(-1 * var(--tm-pad)) 0;
		padding-top: 36px;
	}

	.jl-testimonials .jl-quote__slide {
		flex-basis: var(--tm-peek);
	}

	.jl-testimonials.is-ready .jl-quote__slide:not(.is-center) .jl-quote__lift {
		opacity: 0.55;
		transform: scale(0.93);
		cursor: pointer;
	}

	.jl-testimonials .jl-quote blockquote {
		font-size: 1.0625rem;
	}
}

/* ---------- Mobile: swipe and dots ---------- */
@media (max-width: 699px) {
	.jl-testimonials.jl-testimonials {
		--tm-pad: 24px;
		--tm-col: 18px;
		--tm-raise: 15px;
		--tm-img: 300px;
		--tm-peek: 84%;
		padding-top: 72px;
		padding-bottom: 64px;
	}

	.jl-testimonials .jl-testimonials__head {
		padding-right: 0;
	}

	.jl-testimonials .jl-testimonials__head h2 {
		font-size: 2.375rem;
	}

	.jl-testimonials .jl-testimonials__head > p:not(.jl-testimonials__tag) {
		font-size: 0.9375rem;
	}

	.jl-testimonials.is-ready .jl-testimonials__arrows {
		display: none;
	}

	.jl-testimonials .jl-testimonials__list {
		grid-template-columns: minmax(0, 1fr);
		margin-top: 36px;
	}

	.jl-testimonials .jl-testimonials__viewport {
		margin-top: 36px;
		padding-top: 24px;
	}

	.jl-testimonials .jl-quote blockquote {
		padding-top: 22px;
		font-size: 1rem;
	}

	.jl-testimonials .jl-quote blockquote cite {
		padding-top: 22px;
	}

	.jl-testimonials.is-ready .jl-testimonials__dots {
		display: flex;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jl-js .jl-testimonials .jl-quote__slide,
	.jl-js .jl-testimonials .jl-quote__slide .jl-word {
		opacity: 1 !important;
		transform: none !important;
	}

	.jl-testimonials.jl-testimonials *,
	.jl-testimonials.jl-testimonials *::before {
		transition: none !important;
	}
}