/* =========================================================================
 * Testimonial Slider 001 — One Review at a Time
 *
 * A white band, everything centred. pattern.js adds `is-ready` to the stage
 * once it has hidden all but one slide and placed the arrows; until then (no
 * JS) the reviews simply stack.
 *
 * The guest line is one paragraph: the initial is its <strong>, drawn as a
 * disc; the home is its <em>, set small and grey.
 * ========================================================================= */

.testimonial-slider-001 {
	background: var(--color-surface);
	text-align: center;
}

.testimonial-slider-001__intro > * {
	margin-block: 0;
}

.testimonial-slider-001__intro h2 {
	margin-bottom: var(--space-sm);
}

.testimonial-slider-001__stage {
	position: relative;
	max-width: 65.625rem;
	margin: var(--space-md) auto 0 !important;
	padding-inline: calc(45px + var(--space-md));
}

.testimonial-slider-001__slide {
	max-width: 53rem;
	margin: 0 auto !important;
}

.testimonial-slider-001__slide + .testimonial-slider-001__slide {
	margin-top: var(--space-lg) !important;
}

.testimonial-slider-001__stage.is-ready .testimonial-slider-001__slide {
	margin-top: 0 !important;
}

.testimonial-slider-001__slide[hidden] {
	display: none;
}

.testimonial-slider-001__slide > * {
	margin-block: 0;
}

.testimonial-slider-001__stars {
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: 0.22em;
	color: var(--color-accent);
}

.testimonial-slider-001__quote.testimonial-slider-001__quote {
	margin-block: var(--space-md);
	font-family: var(--font-display);
	line-height: 1.55;
	letter-spacing: -0.015em;
}

.testimonial-slider-001__line {
	display: block;
	overflow: hidden;
}

.testimonial-slider-001__line-text {
	display: block;
}

.testimonial-slider-001__guest {
	display: inline-grid;
	grid-template-columns: auto auto;
	column-gap: var(--space-sm);
	align-items: center;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.4;
	text-align: left;
}

.testimonial-slider-001__guest strong {
	grid-row: span 2;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--color-border) 50%, var(--color-surface));
	font-family: var(--font-display);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 400;
}

.testimonial-slider-001__guest br {
	display: none;
}

.testimonial-slider-001__guest em {
	grid-column: 2;
	font-style: normal;
	font-size: var(--wp--preset--font-size--xs);
	color: var(--color-muted);
}

/* The round arrows, either side of the review (added by pattern.js). */
.testimonial-slider-001__arrow {
	position: absolute;
	top: 45%;
	display: grid;
	place-items: center;
	width: 45px;
	height: 45px;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 50%;
	background: transparent;
	color: var(--color-text);
	font-size: var(--wp--preset--font-size--lg);
	cursor: pointer;
	transform: translateY(-50%);
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.testimonial-slider-001__arrow:hover {
	border-color: var(--color-primary);
	background: var(--color-primary);
	color: var(--color-background);
}

.testimonial-slider-001__arrow--prev {
	left: 0;
}

.testimonial-slider-001__arrow--next {
	right: 0;
}

@media (max-width: 40rem) {
	.testimonial-slider-001__stage {
		padding-inline: var(--space-lg);
	}

	.testimonial-slider-001__arrow {
		width: 27px;
		height: 32px;
		border: 0;
	}
}