/**
 * pchs/review-cards
 */

.pchs-sample-chip {
	display: inline-block;
	padding: 0.15em 0.5em;
	border: 1px solid var(--wp--custom--color--sample-border);
	border-radius: var(--wp--custom--radius--xxs);
	background: var(--wp--custom--color--sample-bg);
	color: var(--wp--custom--color--sample-ink);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Stars carry an aria-label, so the gold is decorative, not the message. */
.pchs-stars {
	color: var(--wp--custom--color--star);
	font-size: var(--wp--preset--font-size--base);
	letter-spacing: 0.15em;
	line-height: 1;
	white-space: nowrap;
}

.pchs-stars__star.is-empty {
	opacity: 0.28;
}

/* ----------------------------------------------------------------------- */

.pchs-review-cards {
	--pchs-pad-x: var(--wp--preset--spacing--50);

	padding-block: var(--wp--custom--section--y);
}

@media (min-width: 48em) {
	.pchs-review-cards {
		--pchs-pad-x: var(--wp--preset--spacing--70);
	}
}

.pchs-review-cards--surface {
	background: var(--wp--preset--color--surface);
}

/*
 * .pchs-quote is a white plate with no border, meant to sit on a surface band.
 * Home and /reviews/ author tone=base, which left the section transparent and
 * the plates invisible on the page. Paint the band for --base too so the
 * no-border design has a ground (same look as tone=surface).
 */
.pchs-review-cards--base {
	background: var(--wp--preset--color--surface);
}

.pchs-review-cards__inner {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--pchs-pad-x);
	box-sizing: border-box;
}

/* ---------------------------------------------------------------- head -- */

/*
 * Title with the rating beneath it on the left, the arrows on the right,
 * bottom-aligned with the rating so the controls read as belonging to the
 * row of cards rather than floating in a corner (owner, 2026-09-30).
 */
.pchs-review-cards__head {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	align-items: flex-end;
	justify-content: space-between;
	margin-block-end: var(--wp--preset--spacing--60);
}

.pchs-review-cards__headline {
	display: grid;
	gap: var(--wp--preset--spacing--30);
	justify-items: start;
}

.pchs-review-cards__headline .pchs-eyebrow {
	margin: 0;
}

.pchs-review-cards__title {
	margin: 0;
	text-wrap: balance;
}

.pchs-review-cards__rating {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	align-items: center;
}

.pchs-review-cards__badge {
	display: inline-flex;
	gap: var(--wp--preset--spacing--20);
	align-items: center;
	margin: 0;
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--ui);
	line-height: var(--wp--custom--leading--title);
}

.pchs-review-cards__g {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

/* A quiet link: the rating is the claim, this is where to check it. */
.pchs-review-cards__more {
	display: inline-flex;
	align-items: center;
	min-height: var(--pchs-tap);
	color: var(--wp--preset--color--green-dark);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--bold);
	text-decoration: none;
}

.pchs-review-cards__more:hover {
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--link--underline-offset);
}

.pchs-review-cards__controls {
	display: flex;
	gap: var(--wp--preset--spacing--30);
}

/* Hidden by render.php until view.js finds the row overflowing, and never
   shown on a phone: there the row is swiped, and the peek says so. */
.pchs-review-cards__controls[hidden] {
	display: none;
}

@media (max-width: 47.99em) {
	.pchs-review-cards__controls {
		display: none;
	}
}

.pchs-review-cards__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--pchs-btn-h-sm);
	height: var(--pchs-btn-h-sm);
	min-height: 0;
	padding: 0;
	border: 1px solid var(--wp--custom--color--border-cool-2);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--navy);
	cursor: pointer;
	transition: border-color var(--pchs-duration-fast) var(--pchs-ease), background-color var(--pchs-duration-fast) var(--pchs-ease);
}

.pchs-review-cards__nav svg {
	width: 1.125rem;
	height: 1.125rem;
}

.pchs-review-cards__nav:not( [aria-disabled="true"] ):hover {
	border-color: var(--wp--preset--color--navy);
	background: var(--wp--preset--color--surface);
}

/* app.css fades aria-disabled; the cursor says "nothing here", not "forbidden". */
.pchs-review-cards__nav[aria-disabled="true"] {
	cursor: default;
}

/* ---------------------------------------------------------------- list -- */

.pchs-review-cards__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
	gap: var(--wp--preset--spacing--50);
	align-items: start;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 62em) {
	.pchs-review-cards--grid .pchs-review-cards__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/*
 * The scroller: one row on a native scroll-snap track, so touch, trackpad,
 * shift-wheel and arrow keys all work before view.js adds the buttons. One
 * card and a 15% peek on a phone, two on a tablet, three from 62em.
 */
.pchs-review-cards--scroller .pchs-review-cards__list {
	grid-template-columns: none;
	grid-auto-flow: column;
	/* One card, then the gap, then 15% of the next: the peek is what tells a
	   thumb the row moves, so it is measured after the gap, not through it. */
	grid-auto-columns: calc( ( 100% - var(--wp--preset--spacing--50) ) / 1.15 );
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--wp--preset--spacing--30);
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.pchs-review-cards--scroller .pchs-review-cards__list::-webkit-scrollbar {
	display: none;
}

@media (min-width: 48em) {
	.pchs-review-cards--scroller .pchs-review-cards__list {
		grid-auto-columns: calc( ( 100% - var(--wp--preset--spacing--50) ) / 2 );
	}
}

@media (min-width: 62em) {
	.pchs-review-cards--scroller .pchs-review-cards__list {
		grid-auto-columns: calc( ( 100% - 2 * var(--wp--preset--spacing--50) ) / 3 );
	}
}

.pchs-review-cards--scroller .pchs-review-cards__card {
	scroll-snap-align: start;
}

/* ---------------------------------------------------------------- card -- */

/*
 * .pchs-quote (app.css) gives the ground, radius and padding. The card is the
 * same height at rest wherever it sits: the quote is clamped to six lines and
 * also holds six lines' height when shorter, the "Read more" line is always
 * reserved, and the byline is pushed to the bottom. Expanding grows only that
 * card, because the row aligns to the start.
 */
.pchs-review-cards__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

.pchs-quote__top {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	justify-content: space-between;
}

.pchs-quote__top .pchs-stars {
	font-size: var(--wp--preset--font-size--base);
}

.pchs-quote__source {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
}

.pchs-quote__source--text {
	width: auto;
	height: auto;
	color: var(--wp--preset--color--muted);
}

/* The chip is a sibling in normal flow, not an overlay: it must never be
   clipped, overlapped or scrolled out of a card. */
.pchs-review-cards__card.is-sample .pchs-sample-chip {
	align-self: flex-start;
}

/*
 * No quote marks, generated or drawn. Some customers open their review with
 * one, and a second in front of it reads as a rendering fault.
 */
.pchs-quote__text {
	display: -webkit-box;
	min-height: 6lh;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--leading--body);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	line-clamp: 6;
}

.pchs-quote__text p {
	margin: 0;
}

.pchs-quote.is-expanded .pchs-quote__text {
	display: block;
	-webkit-line-clamp: unset;
	line-clamp: none;
}

/*
 * Measured 72×22 on /reviews/ — text-sized, not a tap. Growing min-height with
 * negative margins pulled the label 7px into the clamped quote (text bottom
 * 1352, button top 1345 at 1440). Absolute ::after expands the hit area
 * without moving the label or collapsing the gap before the byline.
 */
.pchs-quote__more {
	position: relative;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 0;
	margin-block-start: calc( -1 * var(--wp--preset--spacing--20) );
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--green-dark);
	font: inherit;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--leading--body);
	cursor: pointer;
}

.pchs-quote__more::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 50%;
	height: var(--pchs-tap);
	transform: translateY( -50% );
}

.pchs-quote__more:hover {
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--link--underline-offset);
}

/* Reserved, not removed: a card whose text fits keeps the same line empty,
   so every card in the row is the same height. */
.pchs-quote__more[hidden] {
	display: block;
	visibility: hidden;
}

.pchs-quote__footer {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: center;
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.pchs-quote__avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--green-tint);
	color: var(--wp--preset--color--green-dark);
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--leading--none);
}

.pchs-quote__who {
	display: grid;
	min-width: 0;
}

/* Capitalised for display only. The stored name is the reviewer's own. */
.pchs-quote__name {
	overflow: hidden;
	color: var(--wp--preset--color--navy);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--leading--title);
	text-overflow: ellipsis;
	text-transform: capitalize;
	white-space: nowrap;
}

.pchs-quote__meta {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--title);
}

.pchs-review-cards__disclaimer {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--body);
}