/* sections/reviews.php */
.rv-section {
	box-sizing: border-box; width: 100%;
	padding: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--space-gutter);
	--rv-blue: color-mix(in srgb, var(--c-primary) 8%, var(--c-primary-dark));
	--rv-soft: color-mix(in srgb, var(--c-on-dark) 82%, transparent);
	background: var(--c-bg); color: var(--c-text);
	font-family: var(--f-body); font-size: var(--fs-base); line-height: 1.6;
}
.rv-section *, .rv-section *::before, .rv-section *::after { box-sizing: border-box; }
.rv-inner { display: grid; gap: var(--space-6); max-width: var(--container); margin: 0 auto; }
.rv-inner > * { min-width: 0; }
.rv-icon { flex: none; width: 1.25rem; height: 1.25rem; }

.rv-label {
	display: inline-flex; align-items: center; gap: var(--space-2);
	margin: 0 0 var(--space-3); padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill); background: var(--c-primary-soft); color: var(--c-primary);
	font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.rv-label::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-accent); }
.rv-section .rv-title {
	margin: 0; color: var(--c-heading);
	font-family: var(--f-heading); font-size: var(--fs-2xl); font-weight: 800;
	line-height: 1.18; letter-spacing: -0.02em; text-wrap: balance;
}
.rv-intro { max-width: 40rem; margin: var(--space-3) 0 0; color: var(--c-text-muted); font-size: var(--fs-lg); }

/* Google rating: flat navy bar (logo and score, stars and count, button), wrapping on small screens */
.rv-score {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); padding: var(--space-4) var(--space-5);
	border-radius: var(--radius-lg) 3rem var(--radius-lg) 3rem; background: var(--rv-blue); color: var(--c-on-dark); box-shadow: var(--shadow-md);
}
.rv-score-top { display: flex; align-items: center; gap: var(--space-3); }
.rv-score-mid { display: grid; gap: var(--space-1); }
.rv-google { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; border-radius: 50%; background: var(--c-surface); }
.rv-google-logo { width: 1.625rem; height: 1.625rem; }
.rv-figure { margin: 0; }
.rv-number { font: 800 2.75rem/1 var(--f-heading); letter-spacing: -0.03em; }
.rv-out { color: var(--rv-soft); font-size: var(--fs-lg); font-weight: 600; }
.rv-stars { display: flex; gap: var(--space-1); color: var(--c-star); }
.rv-star { width: 1.375rem; height: 1.375rem; fill: currentColor; }
/* The stars pop in one after the other when the card comes on screen (site-wide entrance). */
.hec-reveal.is-in .rv-stars .rv-star { animation: rv-pop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1.4) backwards; }
.hec-reveal.is-in .rv-stars .rv-star:nth-child(1) { animation-delay: 0.35s; }
.hec-reveal.is-in .rv-stars .rv-star:nth-child(2) { animation-delay: 0.45s; }
.hec-reveal.is-in .rv-stars .rv-star:nth-child(3) { animation-delay: 0.55s; }
.hec-reveal.is-in .rv-stars .rv-star:nth-child(4) { animation-delay: 0.65s; }
.hec-reveal.is-in .rv-stars .rv-star:nth-child(5) { animation-delay: 0.75s; }
@keyframes rv-pop { from { opacity: 0; transform: scale(0.3) rotate(-30deg); } }
.rv-count { margin: 0; color: var(--rv-soft); font-size: var(--fs-sm); }
.rv-count strong { color: var(--c-on-dark); font-weight: 800; }
.rv-section .rv-btn {
	display: inline-flex; align-items: center; gap: var(--space-4); padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5);
	border-radius: var(--radius-pill); background: var(--c-surface); color: var(--c-primary);
	font: 700 var(--fs-base)/1.2 var(--f-body); text-decoration: none; transition: transform 0.25s;
}
.rv-section .rv-btn:hover, .rv-section .rv-btn:focus { background: var(--c-surface); color: var(--c-primary); transform: translateY(-2px); }
.rv-badge { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); }
.rv-badge .rv-icon { transform: rotate(-45deg); transition: transform 0.25s; }
.rv-btn:hover .rv-badge .rv-icon { transform: rotate(0deg); }
.rv-section .rv-btn:focus-visible { outline: 2px solid var(--c-on-dark); outline-offset: 3px; }

/*
	Carousel: a sideways scroller with scroll-snap (works by touch, trackpad and keyboard
	without the script). Phone: one row, the next card peeks in. From 768px: two rows of
	two cards per page. The script adds the arrows, the page count and the slow autoplay.
*/
.rv-list {
	display: grid; grid-auto-flow: column; grid-auto-columns: 86%; gap: var(--space-3);
	/* Room above and below for the lifted card of the hover state, cancelled by the margin. */
	margin: calc(-1 * var(--space-2)) 0; padding: var(--space-2) 0; list-style: none;
	overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.rv-list::-webkit-scrollbar { display: none; }
.rv-item { display: flex; min-width: 0; scroll-snap-align: start; }
.rv-card {
	position: relative; display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; padding: var(--space-5);
	border: 1px solid transparent; border-radius: var(--radius-lg); background: var(--c-bg-alt);
	transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s, background-color 0.25s;
}
.rv-card:hover { border-color: color-mix(in srgb, var(--c-primary) 30%, transparent); background: var(--c-surface); box-shadow: var(--shadow-sm); transform: translateY(-4px); }
.rv-section .rv-card-top { display: flex; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-4); color: inherit; font-size: inherit; font-style: normal; line-height: inherit; }
.rv-avatar {
	display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%;
	background: var(--c-primary); color: var(--c-on-primary); font: 800 var(--fs-lg)/1 var(--f-heading); text-transform: uppercase;
}
.rv-item:nth-child(even) .rv-avatar { background: var(--c-primary-light); color: var(--rv-blue); }
.rv-author { display: block; color: var(--c-heading); font-weight: 700; line-height: 1.3; }
.rv-source { display: flex; align-items: center; gap: var(--space-1); color: var(--c-text-muted); font-size: var(--fs-xs); font-weight: 600; }
.rv-source-logo { width: 0.875rem; height: 0.875rem; }
/* Opening quote mark, drawn large and faint in the corner */
.rv-card::after {
	content: "\201C"; position: absolute; top: var(--space-3); right: var(--space-5);
	color: var(--c-primary); opacity: 0.12; font: 800 4.5rem/1 var(--f-heading); pointer-events: none;
}
/* Stars of one review (only when its rating was supplied) */
.rv-card-stars { display: flex; gap: 0.125rem; margin-bottom: var(--space-3); color: var(--c-star); }
.rv-card-stars .rv-star { width: 1.125rem; height: 1.125rem; }
.rv-section .rv-quote { margin: 0; padding: 0; border: 0; color: var(--c-text); font-size: var(--fs-base); font-style: normal; white-space: pre-line; }
/* Link to check the review on Google, kept at the bottom of the card */
.rv-section .rv-check {
	display: inline-flex; align-items: center; gap: var(--space-1); align-self: flex-start; margin-top: auto; padding-top: var(--space-4);
	color: var(--c-primary); font-size: var(--fs-xs); font-weight: 700; text-decoration: none;
}
.rv-check .rv-icon { width: 0.875rem; height: 0.875rem; transform: rotate(-45deg); transition: transform 0.25s; }
.rv-section .rv-check:hover, .rv-section .rv-check:focus { color: var(--c-accent); }
.rv-check:hover .rv-icon { transform: rotate(0deg); }
.rv-section .rv-check:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.rv-quote.is-clamped { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; line-clamp: 5; }
.rv-section .rv-more {
	display: inline-block; margin-top: var(--space-2); padding: 0; border: 0; background: none;
	color: var(--c-primary); font: 700 var(--fs-sm)/1.4 var(--f-body); text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer;
}
.rv-section .rv-more:hover, .rv-section .rv-more:focus { background: none; color: var(--c-accent); }
.rv-section .rv-more:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.rv-more[hidden] { display: none; }

/* Carousel controls (shown by the script when there is more than one page): progress line, page count, arrows */
.rv-nav { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.rv-nav[hidden] { display: none; }
.rv-progress { flex: 1; height: 3px; overflow: hidden; border-radius: var(--radius-pill); background: var(--c-border); }
.rv-progress-fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--c-primary); transform: scaleX(var(--rv-progress, 0)); transform-origin: left; transition: transform 0.4s; }
.rv-pages { min-width: 3.25rem; color: var(--c-text-muted); font-size: var(--fs-sm); font-weight: 700; text-align: center; }
.rv-section .rv-arrow {
	display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0;
	border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-surface); color: var(--c-primary); cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.rv-section .rv-arrow:hover:not(:disabled), .rv-section .rv-arrow:focus-visible { border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary); }
.rv-section .rv-arrow:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.rv-section .rv-arrow:disabled { opacity: 0.4; cursor: default; }
.rv-arrow--prev .rv-icon { transform: rotate(180deg); }

/*
	Trustindex widget: it comes with its own stylesheet, loaded from Trustindex. Only its font
	and its text colours are brought to the site's look; the cards (pale grey, 12px corners,
	set in the Trustindex dashboard) and everything else are left to the widget.
*/
.rv-widget { min-height: 12rem; }
.rv-widget .ti-widget, .rv-widget .ti-widget * { font-family: var(--f-body) !important; }
.rv-widget .ti-widget .ti-name { color: var(--c-heading) !important; }
.rv-widget .ti-widget .ti-review-content, .rv-widget .ti-widget .ti-review-text-container { color: var(--c-text) !important; }

@media (min-width: 768px) {
	/* The widget keeps 1rem free on each side for its arrows: pulled out so its cards line up with the section's edges. */
	.rv-widget { margin-inline: -1rem; }
	/* Two rows of two cards per page; all the rows share one height. */
	.rv-list { grid-template-rows: repeat(2, 1fr); grid-auto-columns: calc((100% - var(--space-4)) / 2); gap: var(--space-4); }
}
@media (min-width: 1024px) {
	/* Row 1: heading on the left, rating bar on the right, on one base line. Row 2: the reviews across the full width. */
	.rv-inner { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6) var(--space-7); align-items: end; }
	.rv-main { grid-column: 1 / -1; }
	/* Own cards (no widget): one row of three per page. */
	.rv-list { grid-template-rows: 1fr; grid-auto-columns: calc((100% - 2 * var(--space-4)) / 3); }
}
@media (prefers-reduced-motion: reduce) {
	.rv-section * { animation: none !important; transition: none !important; }
}