/**
 * Testimonials Slider — Figma section 08 (node 1092:19175)
 * 1920x966, padding 120 240, bg #CCDBD2.
 * Grid: 3 columns, 30px gap, 460px cards. Round green arrows sit outside
 * the track; a dot pager sits below with the active dot elongated.
 *
 * NOTE: the extractor reports the heading and rating text as #FFFFFF. The
 * Figma export shows them as #010101 / #01963A — the white belongs to the
 * avatar initials, which share the same style signature. The export wins.
 */

/* Wide enough to keep the 64px heading on a single line, as in the design
 * (the Figma heading measures 890px). */
.testimonials-slider__head {
	max-width: 1000px;
	margin: 0 auto 49px;
	text-align: center;
}

/* Measured off the export: clover band 121-148, heading cap 183-236, rating
 * 274-297, first card at 356. That is 27px under the mark and 10px under the
 * heading — this section sits looser than the 16/20 the other eyebrows use. */
.testimonials-slider__head .section-eyebrow {
	margin-bottom: 27px;
}

.testimonials-slider__heading {
	margin-bottom: var(--space-10);
}

/* Figma "Google Rarting" 518x60: the 60x60 mark, 16, the 24x24 star, 9, then
 * the line at 24/28. Two different gaps, so they are margins on the parts
 * rather than one gap on the row. */
.testimonials-slider__rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 0;
}

.testimonials-slider__rating-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 60px;
	height: 60px;
	margin-right: 16px;
	border-radius: 50%;
	background-color: var(--white);
}

.testimonials-slider__rating-logo svg,
.testimonials-slider__rating-img {
	width: 28px;
	height: 28px;
	object-fit: contain;
}

/* 24 here, against the 30 the featured review is drawn with — hence the scope. */
.testimonials-slider__rating .rating-stars {
	flex: 0 0 auto;
	margin-right: 9px;
	margin-bottom: 0;
}

.testimonials-slider__rating .rating-stars svg {
	width: 24px;
	height: 24px;
}

.testimonials-slider__rating-text {
	color: var(--primary-black);
	font-family: var(--font-body);
	font-size: var(--fs-24);
	font-weight: 400;
	line-height: var(--lh-24-28);
}

.testimonials-slider__rating-text strong,
.testimonials-slider__rating-text b {
	font-weight: 700;
}

/* The review count is the one green run in the line. It sits inside the
 * plugin's own `.wp-google-based`, which sets colour and weight with
 * !important, so this has to answer in kind.
 *
 * The word space in front of it is a margin because the plugin strips
 * whitespace that sits between tags — 0.25em is Roboto's space advance. */
.testimonials-slider__rating-text .grw-count {
	margin-left: 0.25em !important;
	line-height: var(--lh-24-28) !important;
	font-size: var(--fs-24) !important;
	color: var(--primary-green) !important;
	font-weight: 700 !important;
}

/* --- live rating feed -----------------------------------------------------
 * `[grw id=1197]` is the plugin's "rating" layout: the score, then "Based on N
 * reviews" (re-translated to the design's phrasing in inc/google-reviews.php),
 * then "powered by Google". Everything below folds that into one line.
 *
 * The score sits in `.rpi-stars`, which pads itself to the right by
 * `--stars-w` and paints a five-star strip in ::before/::after over that
 * padding. `--stars: 0` collapses the strip to nothing and leaves the number,
 * which is all the design wants there — our own single star precedes it.
 * ------------------------------------------------------------------------ */
/* The plugin sizes `.wp-gr` at 16px, so `font-size: inherit` further down
 * inherits 16 rather than the line's 24 — the size has to be stated. */
.testimonials-slider__rating-text .wp-gr {
	display: inline;
	margin: 0;
	padding: 0;
	font-family: var(--font-body) !important;
	font-size: var(--fs-24) !important;
	line-height: var(--lh-24-28) !important;
}

/* `.wp-gr .wp-google-list.grw-rating .grw-header-inner` is the plugin's own
 * selector for the 16px inset, and its stylesheet loads after the theme's —
 * so !important is not enough, the selector has to out-specify it. That 16px
 * was indenting the first line against the second. */
.testimonials-slider__rating-text .wp-gr .wp-google-list,
.testimonials-slider__rating-text .wp-gr .grw-header,
.testimonials-slider__rating-text .wp-gr .wp-google-list.grw-rating .grw-header-inner,
.testimonials-slider__rating-text .wp-gr .grw-header-inner > .rpi-flx {
	display: inline !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	flex: 0 0 auto !important;
}

/* Not a control here — the design gives this line no affordance, and the
 * plugin's popup is unskinned. */
.testimonials-slider__rating-text .wp-gr .wp-google-list.grw-rating .grw-header-inner {
	cursor: default !important;
	pointer-events: none !important;
}

.testimonials-slider__rating-text .rpi-stars {
	--stars: 0;
	--star-gap: 0px;
	--rpi-star-size: 24px;
	--rating-scale: 1;
	--head-grade-weight: 700;
	--rpi-rating-color: var(--primary-black);

	display: inline !important;
	height: auto !important;
	padding: 0 !important;
	vertical-align: baseline !important;
	font-family: var(--font-body) !important;
	line-height: var(--lh-24-28) !important;
}

.testimonials-slider__rating-text .rpi-stars::before,
.testimonials-slider__rating-text .rpi-stars::after {
	content: none !important;
}

.testimonials-slider__rating-text .wp-google-based {
	display: inline !important;
	margin: 0 0 0 0.25em !important;
	padding: 0 !important;
	color: var(--primary-black) !important;
	font-size: var(--fs-24) !important;
	font-weight: 400 !important;
	line-height: var(--lh-24-28) !important;
}

/* The design has the Google mark instead, and no popup. */
.testimonials-slider__rating-text .wp-google-powered,
.testimonials-slider__rating-text .grw-popup,
.testimonials-slider__rating-text > .wp-gr > svg {
	display: none !important;
}

/* --- track --------------------------------------------------------- */

/* --- live Google reviews --------------------------------------------------
 * The cards are the Widget Google Reviews shortcode now, so this is a skin over
 * the plugin's markup. Two things about that plugin shape this block:
 *
 *  1. It sets nearly every property with !important, so ordinary rules lose
 *     however specific they are. But it reads its own custom properties first,
 *     so the colours and sizes below are set as VARIABLES and the plugin's own
 *     !important declarations then paint the design's values. Only the handful
 *     it hard-codes need !important here.
 *  2. Its slider is plain CSS — a flex track with `overflow-x: auto` — so
 *     three-up, the gap, the arrows and the pager are all reachable from CSS.
 *
 * Measurements are the design's own, carried over from the authored cards this
 * replaced: 460px items on a 30px gap inside the 1440 container, a 40px card
 * inset, 50px round green arrows 80px outside the card band, and a 10px dot
 * pager 40px below with a 59px pill for the active dot.
 * ---------------------------------------------------------------------- */
.testimonials-slider__reviews {
	position: relative;
}

/* The plugin's own knobs, set to the design's palette and sizes. */
.testimonials-slider__reviews .wp-gr {
	--rev-color: var(--white);
	--card-gap: var(--space-30);
	--col: 3;
	--img-size: 60px;
	--name-color: var(--primary-black);
	--head-name-color: var(--primary-black);
	--text-color: var(--body-grey);
	--head-based-color: var(--body-grey);
	--star-color: var(--star-amber);
	--rpi-star-color: var(--star-amber);
	--rpi-rating-color: var(--star-amber);
	--rpi-star-size: 24px;
	--slider-dot-color: var(--muted-green);
	--slider-act-dot-color: var(--primary-green);

	/* The plugin masks a circular "bite" out of each end of the track so its
	 * own inline arrows can sit over the cards. The design puts the arrows
	 * outside the card band, so the bite just notched the first and last cards
	 * and clipped their copy. A flat mask turns it off. */
	--slider-bite: linear-gradient(#000 0 0);
}

/* The design's card is 440 tall. Live reviews vary, so this is a floor rather
 * than a height: it lines the three cards up and shows more of each quote
 * instead of cutting it after three lines.
 *
 * Square corners and no shadow: the design's card frame (460x440, #FFFFFF)
 * carries no cornerRadius and no effects at all. The plugin rounds it 8px via
 * a literal in `.grw-review-inner.grw-round`, not a variable, so that one has
 * to be beaten directly. */
.testimonials-slider__reviews .wp-gr .grw-review-inner {
	min-height: 440px;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* The plugin sets `height: 100px !important` on the quote and scrolls the
 * overflow, which cut every review after three lines behind a scrollbar. A
 * height, not a max-height, is what has to be beaten.
 *
 * Clamped to six lines rather than freed: the reviews are live and the longest
 * one would otherwise stretch all three cards to 1469px. Six 32px lines is what
 * the design's 440 card leaves under the author row and the stars, and the clamp
 * ends on an ellipsis the way the design's "Read More" does. */
.testimonials-slider__reviews .wp-gr .wp-google-feedback {
	display: -webkit-box !important;
	height: auto !important;
	max-height: none !important;
	overflow: hidden !important;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
}

/* Three 460s on a 30 gap: (1440 - 60) / 3. The plugin hard-codes a quarter.
 *
 * The 3px inline padding on the slide is the plugin's own gutter, and it is
 * inside the flex basis — with it the visible card measured 437 against the
 * design's 460. Removed, so the card IS the track's third. */
.testimonials-slider__reviews .wp-gr .rpi-slide {
	flex: 0 0 calc((100% - var(--space-30) * 2) / 3) !important;
	align-items: stretch;
	padding-inline: 0 !important;
}

/* The plugin insets the track 25px each side to make room for the arrows it
 * draws over the cards. The design puts the arrows 80px OUTSIDE the card band,
 * so that inset only pulled the first card off the container's left edge — the
 * track ran 265..1655 inside a 240..1680 container. Zeroed, the band aligns to
 * the container exactly and the three cards come out at the designed 460. */
.testimonials-slider__reviews .wp-gr .rpi-slides {
	gap: var(--space-30) !important;
	margin-inline: 0 !important;
	scrollbar-width: none;
}

.testimonials-slider__reviews .wp-gr .rpi-slides::-webkit-scrollbar {
	display: none;
}

/* Card inset — the plugin hard-codes 16px and a 4px margin. */
.testimonials-slider__reviews .wp-gr .grw-review-inner {
	margin: 0 !important;
	padding: var(--space-40) !important;
	width: 100% !important;
}

/* --- author row -------------------------------------------------------
 * Roboto at the developer's instruction, matching .review-meta-name. Both are
 * the same role at the same 22/600/30, and they share the homepage, so they
 * have to share a face. Deliberate departure: the design draws the reviewer
 * name in Open Sans SemiBold. */
.testimonials-slider__reviews .wp-gr .wp-google-name,
.testimonials-slider__reviews .wp-gr a.wp-google-name {
	font-family: var(--font-body) !important;
	font-size: var(--fs-22) !important;
	font-weight: 600 !important;
	line-height: 30px !important;
}

.testimonials-slider__reviews .wp-gr a.wp-google-name:hover,
.testimonials-slider__reviews .wp-gr a.wp-google-name:focus-visible {
	color: var(--primary-green) !important;
}

.testimonials-slider__reviews .wp-gr .wp-google-time {
	color: var(--body-grey) !important;
	font-family: var(--font-body) !important;
	font-size: var(--fs-16) !important;
	line-height: 17px !important;
}

/* --- quote ------------------------------------------------------------ */
.testimonials-slider__reviews .wp-gr .wp-google-text,
.testimonials-slider__reviews .wp-gr .wp-google-feedback {
	font-family: var(--font-body) !important;
	font-size: var(--fs-20) !important;
	line-height: var(--lh-body) !important;
}

.testimonials-slider__reviews .wp-gr .wp-google-feedback a {
	color: var(--primary-green) !important;
	text-decoration: underline !important;
}

/* --- arrows -----------------------------------------------------------
 * Styled centrally — see css/components/slider-arrows.css, which feeds the
 * plugin's --slider-btn-* knobs from the shared --slider-arrow-* tokens so this
 * block and the Slick sliders draw the same disc. Nothing arrow-shaped belongs
 * in this file any more.
 * ---------------------------------------------------------------------- */

/* --- dot pager -------------------------------------------------------- */
/* Figma draws it as one flattened 135x10 vector, and the export resolves to
 * four items 16 apart: 10px #768571 dots with the active one a wide green pill.
 * The plugin instead scales its dots down (.55 / .85 / .95) and drops them to
 * 40% opacity, which gave three unequal 8/7/5px dots — so the transform and the
 * opacity both have to go before the sizes mean anything. */
.testimonials-slider__reviews .wp-gr {
	--slider-dot-size: 10px;
	--slider-dot-gap: var(--space-16);
	--slider-dot-color: var(--pager-dot);
	--slider-act-dot-color: var(--primary-green);
	--slider-dot-padding-top: var(--space-40);
}

.testimonials-slider__reviews .wp-gr .rpi-dots-wrap {
	width: auto !important;
	max-width: 100% !important;
}

.testimonials-slider__reviews .wp-gr .rpi-dot {
	opacity: 1 !important;
	transform: none !important;
	flex: 0 0 auto !important;

	/* The pill grows from 10 to 59 when its slide becomes active. The plugin
	 * declares no transition on the dot, so without this the width snaps.
	 * Named properties rather than `all`: the dot's own width, fill and radius
	 * are the only things that change, and animating `all` here would also
	 * chase the scroll-snap offset the pager sets on itself. */
	/* !important because the plugin declares `transition: revert` on
	 * `.rpi button`, and revert discards author styling rather than losing to
	 * it on specificity — the computed value came back `all 0s` however
	 * specific this rule was. */
	transition:
		width 0.3s ease,
		background-color 0.3s ease,
		border-radius 0.3s ease !important;
}

/* The active dot is a 59px pill on a 5px radius, not a scaled-up circle. */
/* The plugin rings each avatar with a drop shadow it sets !important
 * (`0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.24)` on the ::before). The
 * design draws the avatars flat, so it is cleared. Left at the plugin's own
 * `body .wp-gr` reach rather than scoped to this block, so the rating line's
 * avatars and any other feed match. */
body .wp-gr .grw-img-wrap::before {
	box-shadow: none !important;
	border: 0 !important;
}

.testimonials-slider__reviews .wp-gr .rpi-dot.active {
	width: 59px !important;
	border-radius: 5px !important;
}

/* 1599, not 1440: the arrows need the container to be at least 80px off the
 * viewport edge, and that stops being true at 1600 — below it the left disc
 * would be pushed to a negative offset and take the page 20px wide with it.
 * The arrows come back inside the band instead, as they did before.
 *
 * Inside the band, but not ON the cards. The discs are 50 wide and were pulled
 * only 15 out, so 35px of each sat over the first and last card and covered the
 * quote underneath. The track is inset instead — 65 each side, the 50px disc
 * plus 15 clear — and the discs sit at the container edge (pos 0) inside that
 * gutter. Same trick the plugin ships with, sized for the design's disc. */
@media (max-width: 1599px) {

	.testimonials-slider__reviews .wp-gr .rpi-slides {
		margin-inline: var(--slider-arrow-gutter) !important;
	}
}

@media (max-width: 991px) {

	.testimonials-slider__reviews .wp-gr {
		--col: 2;
	}

	.testimonials-slider__reviews .wp-gr .rpi-slide {
		flex: 0 0 calc((100% - var(--space-30)) / 2) !important;
	}

	.testimonials-slider__reviews .wp-gr .grw-review-inner {
		padding: var(--space-25) !important;
	}
}

@media (max-width: 767px) {

	.testimonials-slider__reviews .wp-gr {
		--col: 1;
	}

	.testimonials-slider__reviews .wp-gr .rpi-slide {
		flex: 0 0 100% !important;
	}

	/* The arrows themselves are hidden in the shared component. No arrows down
	 * here means no gutter to keep clear of them, so the single card takes the
	 * full width back. */
	.testimonials-slider__reviews .wp-gr .rpi-slides {
		margin-inline: 0 !important;
	}

	/* 10 at the developer's instruction. One card per slide down here means one
	 * dot per review, so the pager is much longer than it is on desktop and the
	 * plugin's own gap runs it past the container. */
	.rpi .rpi-dots {
		gap: 10px;
	}

	/* The plugin draws each reviewer avatar at a fixed 60px. Reduced at the
	 * developer's instruction — on a 335 card that is a lot of the header row
	 * before the name and date get any. */
	.testimonials-slider__reviews .wp-gr .grw-img,
	.testimonials-slider__reviews .wp-gr .grw-img-wrap {
		width: 44px !important;
		height: 44px !important;
		min-width: 44px !important;
	}

	.testimonials-slider__reviews .wp-gr .grw-img-wrap::before {
		width: 44px !important;
		height: 44px !important;
	}
}