/* Testimonial Spotlight (cwp/testimonial-spotlight): longer reader stories, one at a time.
   Ivory by default, or the Linen band style. The band paints the full width of the screen; its
   contents sit at the same content width as every other band on a sales page. */
.block-testimonial-spotlight {
	--wp--custom--layout--page: var(--wp--custom--layout--wide);
	position: relative;
	background: var(--wp--preset--color--background);
}

.block-testimonial-spotlight.is-style-linen {
	background: var(--wp--preset--color--secondary);
}

.block-testimonial-spotlight__inner {
	position: relative;
	/* The same content width as every other band on a sales page: the site's wide width, which
	   is also the header's logo-to-search span */
	max-width: var(--wp--custom--layout--wide);
	margin: 0 auto;
}

/* The photo column only has to hold a 420px portrait, so the rest of the row goes to the words:
   fewer lines per paragraph, and the two columns read as a pair rather than a split. */
.block-testimonial-spotlight__panel {
	display: grid;
	grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
	margin: 0;
}

.block-testimonial-spotlight__panel[hidden] {
	display: none;
}

/* Photo: a framed portrait in the left half rather than a full-bleed wall, centred in its
   column inside a brass hairline frame 10px out (like the arched testimonial photos) */
.block-testimonial-spotlight__photo {
	position: relative;
	align-self: center;
	width: 100%;
	max-width: 420px;
	min-height: 440px;
	/* The band's bottom padding sits under the photo too, so a short story (a team member's
	   bio) doesn't leave the photo's frame touching the next band */
	margin: 10px auto var(--wp--custom--layout--section-padding);
	background: var(--wp--preset--color--secondary);
	outline: 1px solid var(--wp--preset--color--quaternary);
	outline-offset: 10px;
}

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

/* Text column; extra room at the bottom for the row of photos */
.block-testimonial-spotlight__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--wp--custom--layout--section-padding) 56px;
}

/* The section label is a tag on the photo rather than a line above the text, which takes its
   height out of the right-hand column. Flush into the photo's top left corner. */
.block-testimonial-spotlight__kicker {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	margin: 0;
	padding: 11px 18px;
	background: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--secondary);
	font-size: var(--wp--custom--caps--label);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
}

/* The big brass quote mark: only the top half of the line box holds the glyph */
.block-testimonial-spotlight__mark {
	display: block;
	height: 0.5em;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 6.25rem;
	font-weight: 900;
	line-height: 1;
	color: var(--wp--preset--color--quaternary);
}

.block-testimonial-spotlight__quote {
	margin: 22px 0 0;
	padding: 0;
	border: 0;
	background: none;
}

.block-testimonial-spotlight__headline {
	margin: 0 0 18px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--wp--preset--color--black);
}

.block-testimonial-spotlight__story {
	margin: 0 0 24px;
	font-size: 1.125rem;
	line-height: 1.6;
}

.block-testimonial-spotlight__stars {
	display: block;
	margin-bottom: 4px;
	font-size: 1.0625rem;
	letter-spacing: 2px;
	color: var(--wp--preset--color--quaternary);
}

.block-testimonial-spotlight__name {
	display: block;
	font-size: var(--wp--custom--caps--label);
	font-weight: 700;
	letter-spacing: var(--wp--custom--caps--tracking-label);
	text-transform: uppercase;
	color: var(--wp--preset--color--black);
}

/* Round photos to switch stories, under the text behind a brass line */
.block-testimonial-spotlight__picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--quaternary);
}

.block-testimonial-spotlight__pick {
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	overflow: hidden;
	background: var(--wp--preset--color--secondary);
	cursor: pointer;
	/* Every face stays full colour: these are real people, not disabled controls. The ring is
	   what says which story is showing. */
	transition: box-shadow var(--wp--custom--transition--speed), transform var(--wp--custom--transition--speed);
}

.block-testimonial-spotlight__pick img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Hovering one lifts it and draws a thin brass ring, so it is clear it can be picked */
.block-testimonial-spotlight__pick:is(:hover, :focus-visible) {
	box-shadow: 0 0 0 2px var(--wp--preset--color--quaternary);
	transform: translateY(-3px);
}

/* The story being shown: bigger, with a thicker brass ring. Last, so it holds on hover too. */
.block-testimonial-spotlight__pick[aria-pressed="true"] {
	width: 64px;
	height: 64px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--quaternary);
	transform: none;
}

.block-testimonial-spotlight__empty {
	padding: 40px;
	text-align: center;
}

/* Phones: photo on top (4:5), then the text, then the row of photos */
@media only screen and (max-width: 767px) {
	.block-testimonial-spotlight__panel {
		grid-template-columns: minmax(0, 1fr);
	}

	.block-testimonial-spotlight__photo {
		min-height: 0;
		/* Square on a phone: a 4:5 portrait at the full width of the screen took most of it */
		aspect-ratio: 1 / 1;
		margin: 20px;
	}

	.block-testimonial-spotlight__content {
		padding: 40px var(--wp--custom--layout--padding) 20px;
	}

	.block-testimonial-spotlight__headline {
		font-size: 1.625rem;
	}

	.block-testimonial-spotlight__story {
		font-size: 1.0625rem;
	}

	.block-testimonial-spotlight__content {
		padding-bottom: 48px;
	}
}

/* Phones: the photo and the text line up with the gutter every other section uses. The band's
   own padding is the gutter, so the text column adds none of its own, and the photo fills the
   column instead of carrying side margins that pushed it past the edge. */
@media only screen and (max-width: 767px) {
	.block-testimonial-spotlight__photo {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	/* The quote mark's own line box carries all the space the story needs under the photo, so
	   nothing is added on top of it: the mark tucks up under her picture instead of floating in
	   a gap of its own. */
	.block-testimonial-spotlight__content {
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

/* A team member (a story with a Role): no quote mark above the name, so on phones the name gets
   the room under the photo that the mark's line box gives a reader story */
@media only screen and (max-width: 767px) {
	.block-testimonial-spotlight__panel--member .block-testimonial-spotlight__content {
		padding-top: 28px;
	}
}