/**
 * 20MN Testimonials
 * https://20milesnorth.com
 *
 * Typography is inherited from the theme on purpose. Colours fall back to the
 * 20MN Property Listings variables when that plugin is active, so the two match
 * without configuring anything twice.
 */

.twmn-tm {
	--twmn-tm-accent: var(--twmn-pl-accent, #2f6047);
	--twmn-tm-ink: var(--twmn-pl-ink, #1b2430);
	--twmn-tm-muted: var(--twmn-pl-muted, #5f6b78);
	--twmn-tm-line: var(--twmn-pl-line, #e2e7ec);
	--twmn-tm-surface: var(--twmn-pl-surface, #fff);
	--twmn-tm-columns: 3;

	color: var(--twmn-tm-ink);
}

.twmn-tm *,
.twmn-tm *::before,
.twmn-tm *::after {
	box-sizing: border-box;
}

.twmn-tm__heading {
	margin: 0 0 1.5rem;
}

.twmn-tm__list {
	display: grid;
	grid-template-columns: repeat(var(--twmn-tm-columns), minmax(0, 1fr));
	gap: 1.5rem;
}

.twmn-tm__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 1.75rem;
	border: 1px solid var(--twmn-tm-line);
	border-radius: 10px;
	background: var(--twmn-tm-surface);
}

.twmn-tm__rating {
	margin: 0 0 .75rem;
	color: var(--twmn-tm-accent);
	font-size: 1.05rem;
	letter-spacing: .08em;
	line-height: 1;
}

.twmn-tm__quote {
	flex: 1 1 auto;
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--twmn-tm-ink);
	quotes: none;
}

.twmn-tm__quote p:first-child { margin-top: 0; }
.twmn-tm__quote p:last-child  { margin-bottom: 0; }

.twmn-tm__by {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: 0;
	padding-top: 1rem;
	border-top: 1px solid var(--twmn-tm-line);
}

.twmn-tm__photo img {
	display: block;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	object-fit: cover;
}

.twmn-tm__meta {
	min-width: 0;
}

.twmn-tm__name {
	display: block;
	font-weight: 700;
	line-height: 1.3;
}

.twmn-tm__role {
	display: block;
	margin-top: .1em;
	font-size: .85rem;
	color: var(--twmn-tm-muted);
}

@media (max-width: 1024px) {
	.twmn-tm__list { --twmn-tm-columns: 2; }
}

@media (max-width: 680px) {
	.twmn-tm__list { --twmn-tm-columns: 1; }
}

/* ---------------------------------------------------------------
   Carousel — one testimonial at a time
   --------------------------------------------------------------- */

.twmn-tm--slider {
	position: relative;
}

.twmn-tm--slider .twmn-tm__list {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding: 4px;
	margin: -4px;
}

.twmn-tm--slider .twmn-tm__list::-webkit-scrollbar {
	display: none;
}

.twmn-tm--slider .twmn-tm__item {
	flex: 0 0 100%;
	scroll-snap-align: start;
}

.twmn-tm__controls {
	display: flex;
	justify-content: flex-end;
	gap: .5rem;
	margin-bottom: 1rem;
}

.twmn-tm__arrow {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--twmn-tm-line);
	border-radius: 50%;
	background: var(--twmn-tm-surface);
	color: var(--twmn-tm-ink);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.twmn-tm__arrow:hover {
	border-color: var(--twmn-tm-accent);
	color: var(--twmn-tm-accent);
}

.twmn-tm__dots {
	display: flex;
	justify-content: center;
	gap: .45rem;
	margin-top: 1.25rem;
}

.twmn-tm__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--twmn-tm-line);
	cursor: pointer;
}

.twmn-tm__dot.is-active {
	background: var(--twmn-tm-accent);
	transform: scale(1.25);
}

/* ---------------------------------------------------------------
   Blockquote reset
   The quote is a <blockquote>, which themes commonly give a grey fill,
   a side border and quote marks. A single class loses to a rule like
   `.entry-content blockquote` (0,1,1), so reset at 0,2,1.
   --------------------------------------------------------------- */

.twmn-tm .twmn-tm__item blockquote.twmn-tm__quote,
.twmn-tm blockquote.twmn-tm__quote,
.twmn-tm .twmn-tm__quote {
	margin: 0 0 1.25rem;
	padding: 0;
	border: 0;
	border-left: 0;
	background: none;
	background-color: transparent;
	box-shadow: none;
	font-style: normal;
	quotes: none;
}

.twmn-tm blockquote.twmn-tm__quote::before,
.twmn-tm blockquote.twmn-tm__quote::after,
.twmn-tm .twmn-tm__quote p::before,
.twmn-tm .twmn-tm__quote p::after {
	content: none;
	display: none;
}

.twmn-tm .twmn-tm__quote p {
	background: none;
	padding: 0;
	font-style: normal;
}