/* ===================== Google reviews carousel ===================== */
/* Ported from the Fusion Relocations theme (fusion.css, "Reviews carousel") with the
   movement unchanged: a CSS scroll-snap track — usable with no JavaScript, scrolled
   natively by touch, trackpad and keyboard — with 32px gaps, one card per snap point,
   300px cards on narrow screens and three per view on wide ones, and arrows that
   smooth-scroll one card (reviews.js). Colours and type follow the home page's
   testimonial cards. Markup: inc/reviews.php. */

/* min-width: 0 is load-bearing. A grid or flex item defaults to min-width: auto, so the
   carousel could not shrink below its 300px card floor: the track grew wider than its
   parent and took the whole DOCUMENT into horizontal scroll. Overflow belongs inside the
   track. The carousel is also its own size container — see the three-up rule below. */
.sm-reviews {
	position: relative;
	grid-column: 1 / -1;
	min-width: 0;
	container-type: inline-size;
}
.sm-reviews__track {
	min-width: 0;
	display: grid;
	grid-auto-flow: column;
	/* 300px cards; min() keeps a card inside a phone narrower than 332px. */
	grid-auto-columns: minmax(min(300px, 100%), 1fr);
	gap: var(--sm-space-8);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding-bottom: 6px;
	scrollbar-width: thin;
	/* Equal-height cards: one row = the tallest card; the PHP excerpt keeps that card
	   short, and the line clamp is the safety net for anything that still runs long. */
	grid-auto-rows: 1fr;
	align-items: stretch;
}
.sm-reviews__track:focus-visible {
	outline-offset: 4px;
}
/* Three cards visible, the rest reached by scrolling — Fusion's 900px breakpoint, written
   against the carousel's own width: a full-width band measures 855px on a 900px screen
   (the container keeps 22.5px each side), so the home and country pages switch exactly
   where Fusion does, while the landing pages' narrower content column keeps whole 300px
   cards until it is that wide too.
   The width must be FIXED, not minmax() with a zero floor: a zero floor lets every column
   shrink to fit instead of overflowing, so nine reviews would render as nine ribbons of
   one word per line. Three cards and two gaps make up the width. */
@container (min-width: 855px) {
	.sm-reviews__track {
		grid-auto-columns: calc(33.333% - (var(--sm-space-8) * 2 / 3));
	}
}
@media (prefers-reduced-motion: reduce) {
	.sm-reviews__track {
		scroll-behavior: auto;
	}
}

/* ---------- Card ---------- */
.sm-review {
	scroll-snap-align: start;
	margin: 0;
	height: 100%;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 14px;
	background: var(--sm-white);
	border: 1px solid var(--sm-border);
	border-radius: var(--sm-radius-lg);
	padding: var(--sm-space-8);
	box-shadow: var(--sm-shadow-sm);
}
.sm-review__stars {
	display: flex;
	gap: 3px;
	color: var(--sm-green);
}
/* The five stars in front of the aggregate stay one tight group. */
.sm-reviews__stars {
	display: inline-flex;
	gap: 3px;
	color: var(--sm-green);
}
.sm-review__stars svg,
.sm-reviews__agg svg,
.sm-reviews-empty__score svg {
	flex: none;
	display: block;
}
.sm-review__stars svg.is-empty,
.sm-reviews__agg svg.is-empty {
	opacity: 0.22;
}
.sm-review .sm-review__quote {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	quotes: none;
	font-family: var(--sm-font-body);
	font-style: normal;
	font-size: 1rem;
	line-height: var(--sm-lh-relaxed);
	color: var(--sm-navy);
	display: -webkit-box;
	-webkit-line-clamp: 9;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sm-review__quote::before,
.sm-review__quote::after {
	content: none;
}
.sm-review .sm-review__more {
	display: block;
	margin: 6px 0 14px;
	font: 600 0.8125rem/1.4 var(--sm-font-body);
	color: var(--sm-green-text);
	text-decoration: none;
}
.sm-review .sm-review__more:hover {
	text-decoration: underline;
}
.sm-review__by {
	display: flex;
	align-items: center;
	gap: var(--sm-space-3);
	margin-top: auto;
	padding-top: var(--sm-space-4);
	border-top: 1px solid var(--sm-border);
}
.sm-review__avatar {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: var(--sm-radius-pill);
	display: grid;
	place-items: center;
	overflow: hidden;
	background: var(--sm-navy);
	color: var(--sm-white);
	font: 700 0.9375rem/1 var(--sm-font-display);
}
.sm-review__avatar img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.sm-review__by b {
	display: block;
	font: 700 0.9375rem/1.3 var(--sm-font-display);
	color: var(--sm-navy);
}
.sm-review__route {
	display: block;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--sm-muted);
}

/* ---------- Arrows ---------- */
.sm-reviews__nav {
	display: flex;
	gap: var(--sm-space-2);
	justify-content: flex-end;
	margin-top: var(--sm-space-4);
}
.sm-reviews .sm-reviews__btn {
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	display: inline-grid;
	place-items: center;
	cursor: pointer;
	border-radius: var(--sm-radius-pill);
	border: 1px solid rgba(26, 58, 107, 0.2);
	background: var(--sm-white);
	color: var(--sm-navy);
	box-shadow: none;
	transition: border-color var(--sm-dur-fast) var(--sm-ease), color var(--sm-dur-fast) var(--sm-ease);
}
/* The rule above also outranks Kadence's button:hover/:focus/:active fill and shadow;
   keyboard focus keeps the theme's global :focus-visible ring. */
.sm-reviews .sm-reviews__btn:hover {
	border-color: var(--sm-green);
	color: var(--sm-green-text);
}
.sm-reviews__btn svg {
	display: block;
}

/* ---------- Aggregate + invitation ---------- */
.sm-reviews__meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	flex-wrap: wrap;
	margin-top: 22px;
}
.sm-reviews__agg {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sm-text);
	font-size: 0.9375rem;
}
.sm-reviews__agg svg {
	color: var(--sm-green);
}
.sm-reviews .sm-reviews__cta {
	display: inline-block;
	padding: 10px 18px;
	border-radius: var(--sm-radius-pill);
	border: 1px solid var(--sm-green);
	color: var(--sm-green-text);
	font: 600 0.8125rem/1 var(--sm-font-display);
	letter-spacing: 0.04em;
	text-decoration: none;
}

/* ---------- No reviews stored yet: Google's figures ---------- */
.sm-reviews-empty {
	text-align: center;
}
.sm-reviews-empty .sm-reviews-empty__score {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: var(--sm-text);
}
.sm-reviews-empty__score svg {
	color: var(--sm-green);
	width: 20px;
	height: 20px;
}
.sm-reviews-empty__score strong {
	font-family: var(--sm-font-display);
	font-size: 1.375rem;
	color: var(--sm-navy);
}
.sm-reviews-empty .sm-reviews-empty__more {
	margin: var(--sm-space-3) 0 0;
}
.sm-reviews-empty__link {
	color: var(--sm-green-text);
	font-weight: 600;
}

/* ---------- Band (home page, country pages) ---------- */
.sm-reviews-band {
	background: var(--sm-white);
}
.sm-reviews-band--tint {
	background: var(--sm-lightgrey);
}
/* Most country pages have no audience guides, so the grey "More moving corridors" band
   follows this one directly — a hairline keeps the two apart. */
.sm-reviews-band--tint + .sm-location-more {
	border-top: 1px solid var(--sm-border);
}
.sm-reviews-band .sm-section__head {
	margin-bottom: var(--sm-space-10);
}
.sm-reviews-band__all {
	text-align: center;
	margin: var(--sm-space-6) 0 0;
}
.sm-reviews-band__all a {
	color: var(--sm-green-text);
	font-weight: 600;
}