/* frontend only (when slick slider active) */
.block-testimonial-listing .slick-slide .block-testimonial-listing-item {
    padding: 0 0.9375rem;
}

/* frontend and backend */
.block-testimonial-listing-item {
	text-align: center;
    font-family: var(--wp--preset--font-family--secondary);
}

.block-testimonial-listing .block-testimonial-listing-item__inner {
    background: #fff;
    padding: 24px;
}

.editor-styles-wrapper .block-testimonial-listing-item a {
	pointer-events: none;
}

.block-testimonial-listing-item img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
}

.block-testimonial-listing-item__quote {
	display: block;
	color: inherit;
    margin-bottom: 12px;
    line-height: 1.2;
    font-size: var(--wp--preset--font-size--small);
    font-weight: 400;
}

.block-testimonial-listing-item__quote > * {
    margin: 0;
}

.block-testimonial-listing-item__quote > * + * {
    margin-top: 12px;
}

.block-testimonial-listing-item__name {
    display: block;
    color: var(--wp--custom--color--neutral-600);
    text-transform: uppercase;
    letter-spacing: var(--wp--custom--caps--tracking-tiny);
    font-size: var(--wp--custom--caps--tiny);
}


/* Stars only appear in the Arched photos style */
.block-testimonial-listing-item__stars {
	display: none;
}

/* Arched photos style (Testimonial Listing > Styles > Arched photos): no card; a tall photo with
   an arched top and a brass hairline ring 8px outside it, then five brass stars, the quote in
   Fraunces and the name in Brass Dark caps. Keep these quotes short: one or two sentences. */
.block-testimonial-listing.is-style-arch .block-testimonial-listing-item__inner {
	background: none;
	padding: 10px;
}

.block-testimonial-listing.is-style-arch .block-testimonial-listing-item img {
	aspect-ratio: auto;
	height: 340px;
	object-fit: cover;
	/* Photo focus on the story, when it is set; the middle of the photo otherwise. */
	object-position: var(--sgs-photo-focus, 50% 50%);
	border-radius: 999px 999px 0 0;
	outline: 1px solid var(--wp--preset--color--quaternary);
	outline-offset: 8px;
	margin-bottom: 30px;
}

.block-testimonial-listing.is-style-arch .block-testimonial-listing-item__stars {
	display: block;
	margin-bottom: 8px;
	font-size: 0.9375rem;
	letter-spacing: 2px;
	color: var(--wp--preset--color--quaternary);
}

.block-testimonial-listing.is-style-arch .block-testimonial-listing-item__quote {
	margin-bottom: 14px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.35;
	color: inherit; /* so the quote reads ivory on a dark band and Ink on a light one */
}

.block-testimonial-listing.is-style-arch .block-testimonial-listing-item__name {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--brass-dark);
}

/* Quotes are not all the same length, so without this the names ride up under the short ones and
   the row of stories reads as ragged. The content column fills the card's height and the name is
   pushed to the bottom of it, which puts every name on one line across the row. */
.block-testimonial-listing.is-style-arch .block-testimonial-listing-item,
.block-testimonial-listing.is-style-arch .block-testimonial-listing-item__inner {
	height: 100%;
}

.block-testimonial-listing.is-style-arch .block-testimonial-listing-item__inner {
	display: flex;
	flex-direction: column;
}

.block-testimonial-listing.is-style-arch .block-testimonial-listing-item__content {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.block-testimonial-listing.is-style-arch .block-testimonial-listing-item__name {
	margin-top: auto;
}

/* On phones one story fills the width */
@media only screen and (max-width: 767px) {
	.block-testimonial-listing.is-style-arch .block-testimonial-listing-item img {
		height: 360px;
	}
}

/* "Framed photos": the arched layout with the arch taken off, for photos where a curved top
   crops someone's head. Everything else about the style is shared. */
.block-testimonial-listing.is-style-arch-square .block-testimonial-listing-item img {
	border-radius: 0;
}

/* The first sentence of a quote carries it: Fraunces at the size the arch style used, with the
   rest of the quote following in the body face a size down, so a long story stays readable. */
.block-testimonial-listing.is-style-arch .block-testimonial-listing-item__lede {
	display: block;
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3125rem;
	font-weight: 700;
	line-height: 1.35;
	color: inherit; /* so the quote reads ivory on a dark band and Ink on a light one */
}
.block-testimonial-listing.is-style-arch .block-testimonial-listing-item__quote:has(.block-testimonial-listing-item__lede) {
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
}

/* On a dark band the whole card flips: the name takes light brass, which has the contrast there
   that Brass Dark has on ivory. */
.has-primary-background-color .block-testimonial-listing.is-style-arch .block-testimonial-listing-item__name {
	color: var(--wp--preset--color--quaternary);
}

/* Quote cards style (Testimonial Listing > Styles > Quote cards): a linen card with the quote in
   the heading face, and under it a small round photo (brass ring) beside the name. The content
   span steps aside (display: contents) so the photo and the name can share the card's bottom row
   whatever order render.php prints them in; the quote fills the space above, so the photo rows
   line up across the grid however long each quote is. */
.block-testimonial-listing.is-style-quotes .block-testimonial-listing-item {
	height: 100%;
	text-align: left;
}

.block-testimonial-listing.is-style-quotes .block-testimonial-listing-item__inner {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr);
	grid-template-rows: 1fr auto;
	grid-template-areas:
		"quote quote"
		"photo name";
	column-gap: 12px;
	row-gap: 18px;
	align-items: center;
	height: 100%;
	box-sizing: border-box;
	padding: 26px;
	border-radius: var(--wp--custom--border-radius--small);
	background: var(--wp--preset--color--secondary);
}

.block-testimonial-listing.is-style-quotes .block-testimonial-listing-item__content {
	display: contents;
}

.block-testimonial-listing.is-style-quotes .block-testimonial-listing-item img {
	grid-area: photo;
	width: 52px;
	height: 52px;
	aspect-ratio: 1;
	margin: 0;
	border: 2px solid var(--wp--preset--color--quaternary);
	border-radius: 50%;
	object-fit: cover;
	object-position: var(--sgs-photo-focus, 50% 50%);
	box-sizing: border-box;
}

.block-testimonial-listing.is-style-quotes .block-testimonial-listing-item__quote {
	grid-area: quote;
	align-self: start;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--black);
}

.block-testimonial-listing.is-style-quotes .block-testimonial-listing-item__name {
	grid-area: name;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--black);
}