/**
 * TrustonTap Reviews — front-end styles.
 *
 * The cards reuse the theme's testimonial classes, so typography, colours and
 * the star graphic come from the theme stylesheet. What lives here is the grid,
 * the filter bar, pagination, and the overrides needed to unpick the
 * carousel-specific geometry the theme attaches to those classes
 * (fixed 710px width, 290px min-height, and the dimmed name column).
 */

.tot-reviews {
	--tot-cols: 2;
	--tot-gap: 30px;
	/*
	 * One text colour, matching the theme's own body colour. The theme's
	 * testimonial card mixes two greys — #4a4a4a on the attribution, #5d656b on
	 * the quote and date — and carrying that into a full page of cards plus a
	 * heading block read as an inconsistency rather than as hierarchy. Size and
	 * weight do that work here instead.
	 */
	--tot-ink: #4a4a4a;
	--tot-accent: #3da2a4;
	--tot-line: #e3e8ea;
	--tot-card-pad: 40px;
}

.tot-reviews--cols-1 { --tot-cols: 1; }
.tot-reviews--cols-2 { --tot-cols: 2; }
.tot-reviews--cols-3 { --tot-cols: 3; --tot-card-pad: 32px; }
.tot-reviews--cols-4 { --tot-cols: 4; --tot-card-pad: 26px; }

/* ---------- grid ---------- */

/*
 * Qualified with the element and the wrapper so these beat theme content
 * styles like `.block ul, .block ol { padding-left: … }`, which are (0,1,1)
 * and would otherwise indent the grid — a bare `.tot-reviews__grid` is only
 * (0,1,0) and loses.
 */
.tot-reviews ul.tot-reviews__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	padding-left: 0;
	display: grid;
	gap: var( --tot-gap );
	grid-template-columns: repeat( var( --tot-cols, 2 ), minmax( 0, 1fr ) );
}

.tot-reviews ul.tot-reviews__grid > li.tot-reviews__item {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
}

.tot-reviews ul.tot-reviews__grid > li.tot-reviews__item::before,
.tot-reviews ul.tot-reviews__grid > li.tot-reviews__item::marker {
	content: none;
	display: none;
}

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

/*
 * Selectors here are one class deeper than the theme's own
 * (`.testimonials-items .testimonial-name`) so these win on specificity
 * regardless of stylesheet order — no !important needed.
 */

.tot-reviews .testimonials-items {
	/* The theme pins these for the 710px carousel slide. */
	min-width: 0;
	max-width: none;
	width: 100%;
	min-height: 0;
	padding: var( --tot-card-pad );
	/* Stacked: quote, stars, name, date. */
	flex-direction: column;
	align-items: stretch;
	opacity: 1;
}

.tot-reviews .testimonials-items .testimonial-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	opacity: 1;
	/* The theme centres this under 720px for the carousel. In a grid of cards
	   the quote should stay ranged left at every width. */
	text-align: left;
}

/* The quote takes the slack, so the stars and attribution sit on the baseline
   of every card in the row regardless of review length. */
.tot-reviews .testimonials-items .testimonial-content > .tot-reviews__quote {
	flex: 1 1 auto;
	margin: 0 0 28px;
	/*
	 * Normal, not pre-line. The review's own newlines are flattened in
	 * prepare_body(), and preserving them here would also turn any whitespace
	 * between the ellipsis, the toggle and the closing quote into a line break.
	 */
	white-space: normal;
	/* The theme sets #5d656b here; scoped to the plugin's own grid, so its
	   carousel elsewhere on the site is untouched. */
	color: var( --tot-ink );
}

.tot-reviews .testimonials-items .star-rating-new {
	margin: 0 0 22px;
	opacity: 1;
}

.tot-reviews .testimonials-items .testimonial-name {
	/* The carousel dims every slide except the centred one. */
	opacity: 1;
	flex: 0 0 auto;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	min-width: 0;
	padding: 0;
	margin: 0;
}

/* The theme's vertical divider belongs to the two-column carousel card. */
.tot-reviews .testimonials-items .testimonial-name::before {
	content: none;
	display: none;
}

.tot-reviews .testimonials-items .testimonial-name p {
	margin: 0 0 2px;
	opacity: 1;
}

.tot-reviews .testimonials-items .testimonial-date {
	opacity: 1;
	color: var( --tot-ink );
}

/* ---------- read more ---------- */

/*
 * The full review is always in the markup — crawlers and anyone without
 * JavaScript get all of it. The script adds `tot-reviews--js` to the section,
 * and only then is the tail collapsed and the toggle shown.
 */

.tot-reviews__ellipsis,
.tot-reviews__more {
	display: none;
}

.tot-reviews--js .tot-reviews__item:not( .is-expanded ) .tot-reviews__rest {
	display: none;
}

.tot-reviews--js .tot-reviews__item:not( .is-expanded ) .tot-reviews__ellipsis {
	display: inline;
}

/*
 * The toggle lives inside the quote paragraph, immediately after the ellipsis
 * and before the closing quote mark, so it flows as part of the sentence
 * rather than sitting on its own line.
 */
.tot-reviews--js .tot-reviews__more {
	display: inline;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: var( --tot-ink );
	text-decoration: underline;
	cursor: pointer;
}

/* Expanded, the label follows the last word rather than an ellipsis, so it
   needs the word space the ellipsis was providing. */
.tot-reviews--js .tot-reviews__item.is-expanded .tot-reviews__more {
	margin-left: 0.35em;
}

.tot-reviews--js .tot-reviews__more:hover,
.tot-reviews--js .tot-reviews__more:focus {
	color: var( --tot-ink );
}

/*
 * The theme reveals the filled star bar with a per-instance <style> block
 * writing clip-path. One rule plus a custom property does the same job without
 * a style element in every card.
 */
.tot-reviews .star-rating-new__stars::after {
	clip-path: inset( 0 calc( 100% - var( --tot-star-fill, 100% ) ) 0 0 );
}

/* ---------- filter bar ---------- */

.tot-reviews__filters {
	margin: 0 0 28px;
	padding: 20px 24px;
	background: #fff;
	border-radius: 5px;
	box-shadow: rgba( 0, 0, 0, 0.09 ) 0 2px 16px 2px;
}

.tot-reviews__filters-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 16px;
}

/* Summary is the mobile accordion handle; on desktop the panel is always open
   and the handle is not shown. */
.tot-reviews__filters-toggle {
	display: none;
	cursor: pointer;
	list-style: none;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 17px;
	font-weight: 500;
	color: var( --tot-ink );
}

.tot-reviews__filters-toggle::-webkit-details-marker {
	display: none;
}

.tot-reviews__filters-toggle::after {
	content: "";
	width: 10px;
	height: 10px;
	flex: 0 0 auto;
	border-right: 2px solid var( --tot-ink );
	border-bottom: 2px solid var( --tot-ink );
	transform: rotate( 45deg ) translate( -2px, -2px );
	transition: transform 0.15s ease-out;
}

.tot-reviews__filters[open] > .tot-reviews__filters-toggle {
	margin-bottom: 18px;
}

.tot-reviews__filters[open] > .tot-reviews__filters-toggle::after {
	transform: rotate( -135deg ) translate( -3px, -3px );
}

.tot-reviews__filters-toggle:focus-visible {
	outline: 2px solid var( --tot-accent );
	outline-offset: 3px;
}

.tot-reviews__field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.tot-reviews__field--search {
	flex: 1 1 260px;
}

.tot-reviews__filters label {
	font-size: 1rem;
	line-height: 1.2;
	color: var( --tot-ink );
}

.tot-reviews__filters input[type="search"],
.tot-reviews__filters select {
	font: inherit;
	font-size: 16px;
	color: var( --tot-ink );
	background-color: #fff;
	border: 1px solid var( --tot-line );
	border-radius: 4px;
	padding: 9px 12px;
	min-height: 44px;
	max-width: 100%;
}

.tot-reviews__filters input[type="search"] {
	width: 100%;
}

/*
 * The native select arrow sits hard against the border and its position is not
 * controllable. Suppress it and draw our own, so the gap to the field edge is
 * ours to set.
 */
.tot-reviews__filters select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 46px;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%235D656B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 13px 8px;
}

/* Edge/IE render their own arrow on top of ours. */
.tot-reviews__filters select::-ms-expand {
	display: none;
}

.tot-reviews__filters input:focus,
.tot-reviews__filters select:focus {
	outline: 2px solid var( --tot-accent );
	outline-offset: 1px;
	border-color: var( --tot-accent );
}

.tot-reviews__actions {
	display: flex;
	align-items: center;
	gap: 14px;
}

/* Carries the theme's .btn .btn-darkGreen classes — only the bits a <button>
   does not inherit from them need setting. */
.tot-reviews__submit {
	font-family: inherit;
	appearance: none;
	-webkit-appearance: none;
}

.tot-reviews__clear {
	font-size: 15px;
	color: var( --tot-accent );
}

.tot-reviews__empty {
	margin: 0;
	padding: 40px;
	text-align: center;
	color: var( --tot-ink );
	background: #fff;
	border-radius: 5px;
	box-shadow: rgba( 0, 0, 0, 0.09 ) 0 2px 16px 2px;
}

/* ---------- pagination ---------- */

.tot-reviews__pagination {
	--tot-pg-size: 44px;
	--tot-pg-gap: 6px;
	margin-top: 36px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var( --tot-pg-gap );
}

.tot-reviews__pagination .tot-reviews__pg {
	/* Set explicitly rather than relying on the theme's global reset — without
	   it the padding and border sit outside min-width and every cell is 26px
	   wider than intended, which is enough to wrap the row on a phone. */
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: var( --tot-pg-size );
	height: var( --tot-pg-size );
	padding: 0 12px;
	border: 1px solid var( --tot-line );
	border-radius: 4px;
	background: #fff;
	color: var( --tot-ink );
	text-decoration: none;
	font-size: 16px;
	line-height: 1;
}

.tot-reviews__pagination a.tot-reviews__pg:hover,
.tot-reviews__pagination a.tot-reviews__pg:focus {
	border-color: var( --tot-accent );
	color: var( --tot-accent );
}

.tot-reviews__pagination .tot-reviews__pg.is-current {
	background: var( --tot-accent );
	border-color: var( --tot-accent );
	color: #fff;
	font-weight: 500;
}

/* Doubled class so the narrow padding survives the small-screen rule below,
   which would otherwise win on source order at equal specificity and make each
   ellipsis 29px — enough to wrap the row on a 320px phone. */
.tot-reviews__pagination .tot-reviews__pg.tot-reviews__pg--dots {
	border-color: transparent;
	background: none;
	min-width: 0;
	padding: 0 2px;
}

.tot-reviews__pg-arrow {
	font-size: 20px;
	line-height: 1;
}

/* Desktop: worded prev/next, full run of numbers, no mobile ellipses. */
.tot-reviews__pagination .is-mobile-only {
	display: none;
}

/* ---------- archive wrapper ---------- */

/*
 * Mirrors the theme's own `.container` (max-width 1272, 10px gutters widening
 * to 42px then 25px) so the archive's left edge lines up with every other page
 * on the site rather than sitting on its own inset.
 *
 * The generous top padding is clearance, not decoration: the theme's site
 * header is `position: absolute`, so it occupies no space in the document and
 * anything at the top of the page renders underneath it. 155px puts the H1 at
 * the same height as the H1 on a standard page.
 */
.tot-reviews-archive {
	width: 100%;
	max-width: 1272px;
	margin: 0 auto;
	padding: 155px 10px 48px;
}

/*
 * Defensive: the theme's `header { position: absolute; … }` rule is written
 * against the bare element, so this block is a <div>. Should a theme ever
 * target the class, these keep the block in flow rather than on top of the nav.
 */
.tot-reviews-archive__header {
	position: static;
	z-index: auto;
	width: auto;
	margin-bottom: 32px;
	text-align: left;
}

/*
 * The theme zeroes margins on headings and paragraphs, so the gap under the H1
 * has to be set here or the rating line sits hard against the descenders.
 */
.tot-reviews-archive__aggregate {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-top: 14px;
}

.tot-reviews-archive__aggregate-text {
	margin: 0;
	font-size: 18px;
	color: var( --tot-ink, #4a4a4a );
}

/*
 * The theme's star graphic again, this time outside the `.tot-reviews` section,
 * so the clip-path rule that reveals the filled portion has to reach here too.
 * The carousel dims its stars; the header's are not in a carousel.
 */
.tot-reviews-archive .star-rating-new {
	margin: 0;
	opacity: 1;
}

.tot-reviews-archive .star-rating-new__stars::after {
	clip-path: inset( 0 calc( 100% - var( --tot-star-fill, 100% ) ) 0 0 );
}

/* ---------- lede: heading block and header image ---------- */

/*
 * Two columns once there is an image, one when there is not. The metrics are
 * lifted from the theme's own hero on the location landing pages — 600px of
 * text, a 440px circle with a 15px lime ring — but written out here rather
 * than borrowing `.hero__media`, which also carries a full-bleed mobile
 * treatment and a teal band in a pseudo-element that would land on this page
 * as a large block of colour.
 */
.tot-reviews-archive__lede--with-image {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 40px;
	margin-bottom: 32px;
}

.tot-reviews-archive__lede--with-image .tot-reviews-archive__header {
	flex: 1 1 460px;
	/* The row owns the spacing now. */
	margin-bottom: 0;
}

.tot-reviews-archive__media {
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 440px;
	max-width: 100%;
	aspect-ratio: 1;
	border: 15px solid #b2d33d;
	border-radius: 50%;
	overflow: hidden;
}

.tot-reviews-archive__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Introduction. 22px matches the theme's own hero body copy
 * (`.hero__content` at >=768px), which is what this block is standing in for.
 *
 * Set on the paragraphs as well as the container: wpautop wraps this content in
 * <p> elements, and a theme rule targeting `p` directly would beat an inherited
 * size on the wrapper.
 */
.tot-reviews-archive__intro,
.tot-reviews-archive__intro p {
	font-size: 1.375rem;
	line-height: 1.5;
}

.tot-reviews-archive__intro {
	/* Clearly separated from the score row, which sits 16px below the aggregate
	   — the introduction is a different kind of thing, not a third line of it. */
	margin-top: 32px;
	color: var( --tot-ink, #4a4a4a );
	/* Roughly 70 characters. Without a header image this block would otherwise
	   run the full 1272px, which at 22px is a punishing line to read. */
	max-width: 34em;
}

/* wpautop's margins, not the container's, would otherwise decide the gaps. */
.tot-reviews-archive__intro > :first-child {
	margin-top: 0;
}

.tot-reviews-archive__intro > :last-child {
	margin-bottom: 0;
}

/* ---------- carer score breakdown ---------- */

/*
 * Qualified with the element, as the grid is, so these beat theme content
 * rules like `.block ul { padding-left: … }`, which are (0,1,1) and would
 * otherwise indent the row.
 */
.tot-reviews-archive ul.tot-reviews-archive__scores {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 34px;
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	padding-left: 0;
}

.tot-reviews-archive ul.tot-reviews-archive__scores > li.tot-reviews-archive__score {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
}

.tot-reviews-archive ul.tot-reviews-archive__scores > li.tot-reviews-archive__score::before,
.tot-reviews-archive ul.tot-reviews-archive__scores > li.tot-reviews-archive__score::marker {
	content: none;
	display: none;
}

/*
 * Deliberately smaller than the headline. These are supporting detail — the
 * aggregate above is the figure the page is making its case with, and three
 * large numbers underneath it competed with it rather than supported it.
 */
.tot-reviews-archive__score-value {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 600;
	color: var( --tot-ink, #4a4a4a );
}

.tot-reviews-archive__score-label {
	font-size: 1rem;
	color: var( --tot-ink, #4a4a4a );
}

/* ---------- responsive ---------- */

/* Gutter steps copied from the theme's `.container`. */
@media ( max-width: 1280px ) {
	.tot-reviews-archive {
		padding-right: 42px;
		padding-left: 42px;
	}
}

/*
 * At 1160px the theme swaps its 185px desktop header for a 72px mobile bar, so
 * the clearance above drops to ordinary spacing.
 */
@media ( max-width: 1160px ) {
	.tot-reviews-archive {
		padding-top: 48px;
	}
}

@media ( max-width: 1100px ) {
	.tot-reviews-archive__media {
		width: 340px;
		border-width: 12px;
	}

	.tot-reviews--cols-3,
	.tot-reviews--cols-4 {
		--tot-cols: 2;
	}
}

@media ( max-width: 820px ) {
	/*
	 * Stacked. The circle comes after the heading rather than above it: on a
	 * phone the first thing wanted is what the page is and what it scores, not
	 * a photograph pushing both below the fold.
	 */
	.tot-reviews-archive__lede--with-image {
		gap: 28px;
	}

	.tot-reviews-archive__media {
		width: 240px;
		border-width: 10px;
	}

	.tot-reviews--cols-2,
	.tot-reviews--cols-3,
	.tot-reviews--cols-4 {
		--tot-cols: 1;
	}

/* Filters become an accordion. */
	.tot-reviews__filters-toggle {
		display: flex;
	}

	.tot-reviews__filters-form {
		flex-direction: column;
		align-items: stretch;
		gap: 14px;
	}

	.tot-reviews__field--search {
		flex: 1 1 auto;
	}

	.tot-reviews__actions {
		justify-content: flex-start;
	}

	.tot-reviews__submit {
		min-width: 0;
		width: 100%;
	}

	
	/*
	 * Pagination trims to: ‹  1 … current … last  ›
	 * Arrows lose their words, the near pages and the desktop ellipses go, and
	 * the mobile ellipses take their place. Always seven cells or fewer, so the
	 * row never wraps and never changes width as you page through.
	 */
	.tot-reviews__pagination .is-desktop-only {
		display: none;
	}

	.tot-reviews__pagination .is-mobile-only {
		display: inline-flex;
	}

	.tot-reviews__pagination .tot-reviews__pg-label {
		display: none;
	}

	.tot-reviews__pagination .tot-reviews__pg--prev,
	.tot-reviews__pagination .tot-reviews__pg--next {
		padding: 0;
	}
}

/* Small phones: tighten the cells so seven still fit across 320px. */
@media ( max-width: 380px ) {
	.tot-reviews-archive ul.tot-reviews-archive__scores {
		gap: 0 12px;
	}

	.tot-reviews-archive__score-label {
		font-size: 0.75rem;
	}

	.tot-reviews-archive__score-value {
		font-size: 0.9375rem;
	}

	.tot-reviews__pagination {
		--tot-pg-size: 38px;
		--tot-pg-gap: 4px;
	}

	.tot-reviews__pagination .tot-reviews__pg {
		padding: 0 6px;
		font-size: 15px;
	}
}

@media ( max-width: 768px ) {
	.tot-reviews-archive {
		padding-right: 25px;
		padding-left: 25px;
	}

	/* The theme steps its hero copy down to 18px here; this follows it. */
	.tot-reviews-archive__intro,
	.tot-reviews-archive__intro p {
		font-size: 1.125rem;
	}

	.tot-reviews-archive__intro {
		margin-top: 24px;
	}
}

@media ( max-width: 560px ) {
	.tot-reviews {
		--tot-card-pad: 26px;
	}

	/*
	 * All three on one line. Stacked or wrapped they stop reading as one row of
	 * comparable figures, which is the only reason they are next to each other.
	 * nowrap on the row guarantees it; the sizes below are what make it fit.
	 */
	.tot-reviews-archive ul.tot-reviews-archive__scores {
		flex-wrap: nowrap;
		gap: 0 18px;
	}

	.tot-reviews-archive ul.tot-reviews-archive__scores > li.tot-reviews-archive__score {
		flex: 0 1 auto;
		min-width: 0;
	}

	/*
	 * Below the aggregate line, not level with it. At 18px these matched the
	 * headline exactly and pulled the eye off it; the aggregate has the stars
	 * and the bold figures and should keep the page's attention.
	 */
	.tot-reviews-archive__score-value {
		font-size: 1rem;
	}

	/* "Value for money" is the long one and must not break across two lines. */
	.tot-reviews-archive__score-label {
		font-size: 0.8125rem;
		white-space: nowrap;
	}
}