/* ==========================================================================
   MTR Testimonial — front-end carousel styles
   All themeable values are injected as CSS custom properties (see
   MTR_Testimonial_Render::dynamic_css) so the admin settings screen can
   control colors, radius, spacing, scale and typography without touching
   this file.
   ========================================================================== */

.mtr-testimonial-slider {
	--mtr-bg: transparent;
	--mtr-card-bg: #ffffff;
	--mtr-text-color: #4a4a4a;
	--mtr-name-color: #1a1a1a;
	--mtr-accent: #e48a5a;
	--mtr-radius: 24px;
	--mtr-gap: 24px;
	--mtr-font-size: 14px;
	--mtr-font-family: 'Montserrat', sans-serif;
	--mtr-center-scale: 1.1;
	--mtr-side-scale: 0.92;
	--mtr-line-clamp: 5;
	--mtr-center-collapsed-lines: 4;
	--mtr-quote-size: 32px;
	--mtr-transition: 450ms ease-in-out;
	--mtr-arrow-size: 48px;
	/* Fixed card box so the seamless belt has a deterministic track height and
	   every card reads as the same size. The testimonial text scrolls inside this
	   fixed box (see .mtr-ts-text), so the card never grows to fit a long quote.
	   --mtr-card-height is overridable from the admin ("Active Card Height"). */
	--mtr-card-height: 450px;
	--mtr-card-expand: 44px;

	/* Reset a handful of properties themes commonly set globally, so the
	   slider always renders consistently regardless of the active theme. */
	all: revert;
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	/* Defensive: some themes constrain, float or add rhythm to content children.
	   Keep the slider a full-width, self-contained block on any theme. */
	max-width: none;
	float: none;
	clear: both;
	margin: 0;
	box-sizing: border-box;
	background: var(--mtr-bg);
	padding: 64px 24px;
	border-radius: calc(var(--mtr-radius) * 0.6);
	font-family: var(--mtr-font-family);
	line-height: normal;
	text-align: left;
	overflow: hidden;
}

.mtr-testimonial-slider *,
.mtr-testimonial-slider *::before,
.mtr-testimonial-slider *::after {
	box-sizing: border-box;
}

/* Neutralize theme-level `button`/`img`/list styling that could otherwise
   bleed into the slider's controls (arrows, dots, Read More). Zero-specificity
   :where() keeps this reset losing to every other rule below it in the file. */
.mtr-testimonial-slider :where(button) {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
	font-family: inherit;
}

.mtr-testimonial-slider :where(img) {
	max-width: 100%;
	border: 0;
	box-shadow: none;
}

.mtr-testimonial-slider :where(p, div, span) {
	margin: 0;
}

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

.mtr-ts-viewport {
	flex: 1 1 auto;
	overflow: visible;
	position: relative;
	padding: 24px 0;
}

/* The track no longer slides as a single unit. Each card is absolutely
   positioned and translated to its own slot by the JS engine (a seamless
   "belt"), so wrapping from the last card to the first never snaps the whole
   strip back — the off-screen card simply teleports invisibly. The track only
   needs an explicit height because all its children are absolutely positioned;
   the exact value is set inline by JS from --mtr-card-height. */
.mtr-ts-track {
	position: relative;
	display: block;
	width: 100%;
	height: 380px;
}

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

.mtr-ts-card {
	position: absolute;
	top: 50%;
	left: 0;
	margin: 0;
	background: var(--mtr-card-bg);
	border-radius: var(--mtr-radius);
	box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.35);
	padding: 48px 40px 44px;
	display: flex;
	flex-direction: column;
	/* Positioned entirely by JS: translate(x, -50%) scale(...). The -50% keeps
	   every card vertically centred regardless of its individual height. */
	transform: translate(-50%, -50%) scale(var(--mtr-side-scale));
	opacity: 0.55;
	transition: transform var(--mtr-transition), opacity var(--mtr-transition),
		height var(--mtr-transition), filter var(--mtr-transition);
	z-index: 1;
	height: var(--mtr-card-height);
	overflow: hidden;
}

.mtr-ts-card--center {
	opacity: 1;
	z-index: 3;
	/* Let the quote icons (offset to -14px) peek outside the active card. The
	   testimonial text still scrolls within its own fixed-height area inside. */
	overflow: visible;
	box-shadow: 0 35px 80px -15px rgba(0, 0, 0, 0.5);
}

/* Center card grows only slightly when expanded; its text then scrolls. When it
   grows, the side (default) cards grow to the same box height so the row stays
   visually even — driven by the .mtr-ts-expanded state class on the slider. */
.mtr-ts-card--center.mtr-ts-card--expanded,
.mtr-ts-expanded .mtr-ts-card {
	height: calc(var(--mtr-card-height) + var(--mtr-card-expand));
}

.mtr-ts-card--hidden {
	opacity: 0;
	pointer-events: none;
}

/* quote icon — default built-in SVG or an admin-uploaded PNG/SVG image */

.mtr-ts-quote {
	position: absolute;
	color: var(--mtr-accent);
	width: var(--mtr-quote-size);
	height: var(--mtr-quote-size);
	opacity: 0.9;
	line-height: 0;
	z-index: 2;
}

.mtr-ts-quote svg,
.mtr-ts-quote img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.mtr-ts-quote--top { top: -14px; left: 32px; }
.mtr-ts-quote--bottom { bottom: -14px; right: 32px; transform: rotate(180deg); }

/* Per-setting opt-out: keep the bottom icon upright instead of mirroring the top one. */
.mtr-ts-no-rotate-bottom .mtr-ts-quote--bottom { transform: none; }

/* body text */

.mtr-ts-body {
	margin-top: 28px;
	flex: 1 1 auto;
	/* Flex column + min-height:0 lets the expanded text become a scroll area
	   that fills the leftover space, keeping the person row pinned below it. */
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Every card's testimonial text is a fixed-height scroll area that fills the
   space above the person row, so the full quote is reachable on any card
   without a Read More toggle. Font size is nudged down one pixel and the line
   spacing tightened so more of the testimonial is visible at once. */
.mtr-ts-text {
	margin: 0;
	min-height: 0;
	flex: 1 1 auto;
	font-size: calc(var(--mtr-font-size) - 1px);
	font-weight: 400;
	line-height: 1.5;
	color: var(--mtr-text-color);
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	padding-right: 10px;
	/* Always-visible thin scrollbar (Firefox). */
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, 0.28) rgba(0, 0, 0, 0.07);
}

/* Always-visible thin scrollbar (WebKit / Chromium / Safari). Styling the
   scrollbar pseudo-elements forces a persistent, non-overlay bar rather than
   the auto-hiding overlay scrollbar the OS would otherwise use. */
.mtr-ts-text::-webkit-scrollbar {
	width: 8px;
}

.mtr-ts-text::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.07);
	border-radius: 4px;
}

.mtr-ts-text::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.28);
	border-radius: 4px;
}

.mtr-ts-text::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 0, 0, 0.4);
}

/* person row */

.mtr-ts-person {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 28px;
}

.mtr-ts-avatar {
	width: 56px;
	height: 56px;
	border-radius: 100px;
	object-fit: cover;
	flex: 0 0 auto;
	border: 2px solid var(--mtr-accent);
}

.mtr-ts-avatar--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--mtr-accent);
	color: #fff;
	font-weight: 700;
	font-size: 20px;
}

.mtr-ts-person-info { min-width: 0; }

.mtr-ts-name {
	font-size: 16px;
	font-weight: 700;
	color: var(--mtr-name-color);
	line-height: 1.25;
}

.mtr-ts-role {
	font-size: 14px;
	font-weight: 400;
	color: var(--mtr-accent);
	margin-top: 2px;
}

/* On smaller / side cards, shrink the avatar a touch so proportions stay elegant */
.mtr-ts-card:not(.mtr-ts-card--center) .mtr-ts-avatar { width: 44px; height: 44px; }

/* ---------- arrows ---------- */

.mtr-ts-arrow {
	flex: 0 0 auto;
	width: var(--mtr-arrow-size);
	height: var(--mtr-arrow-size);
	border-radius: 50%;
	border: 1px solid var(--mtr-accent);
	background: var(--mtr-accent);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background var(--mtr-transition), opacity var(--mtr-transition), transform 200ms ease;
	z-index: 20;
}

.mtr-ts-arrow svg { width: 20px; height: 20px; }

.mtr-ts-arrow:hover {
	opacity: 0.85;
	transform: scale(1.06);
}

.mtr-ts-arrow:focus-visible {
	outline: 2px solid var(--mtr-accent);
	outline-offset: 2px;
}

.mtr-ts-arrow:disabled {
	opacity: 0.35;
	cursor: not-allowed;
	transform: none;
}

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

.mtr-ts-dots {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	z-index: 20;
}

.mtr-ts-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(128, 128, 128, 0.35);
	border: none;
	padding: 0;
	cursor: pointer;
	transition: all 250ms ease;
}

.mtr-ts-dot.is-active {
	width: 24px;
	border-radius: 4px;
	background: var(--mtr-accent);
}

/* ==========================================================================
   Responsive: number of visible cards is set inline by JS via
   flex-basis on .mtr-ts-card (see mtr-testimonial-frontend.js), these
   breakpoints only handle chrome/spacing so small screens stay usable.
   ========================================================================== */

@media (max-width: 1024px) {
	.mtr-testimonial-slider { padding: 48px 16px; gap: 8px; --mtr-arrow-size: 40px; }
	.mtr-ts-card { padding: 36px 28px 28px; }
}

@media (max-width: 640px) {
	.mtr-testimonial-slider { padding: 40px 8px 64px; flex-wrap: wrap; justify-content: center; gap: 20px; }
	.mtr-ts-viewport { order: 1; flex-basis: 100%; padding: 12px 0; }
	/* Arrows wrap onto their own row below the card and sit centered. */
	.mtr-ts-arrow { order: 2; margin-top: 4px; }
	.mtr-ts-dots { bottom: 10px; }

	/* Mobile shows one card at a time; it keeps the fixed-height belt so the
	   loop stays seamless, and the single visible card reads/scrolls via its
	   Read More just like the desktop center card. */
}

/* ==========================================================================
   Theme-conflict hardening
   ------------------------------------------------------------------------
   WordPress themes frequently style bare <button>, <svg>/<path>, <a> and list
   elements with high specificity or !important. Those rules can bleed into the
   slider's controls (arrows, dots, Read More) and its quote icons — which is
   exactly what makes the carousel "look like a plain theme section."

   Every rule below re-asserts the plugin's own appearance with a DOUBLED class
   (`.mtr-testimonial-slider.mtr-testimonial-slider`, specificity 0,2,x) plus
   !important on the handful of properties themes tend to force. This block is
   intentionally last in the file so it also wins any equal-specificity tie by
   source order. Keeping it in one place makes the defensive overrides auditable.
   ========================================================================== */

/* SVG icons never inherit a theme fill/stroke — quote icons stay on-accent and
   arrow chevrons stay stroked. Presentation attributes (fill="currentColor")
   lose to any theme `svg path{fill}`, so we force them here. */
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-quote {
	color: var(--mtr-accent) !important;
}
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-quote svg,
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-quote svg path {
	fill: currentColor !important;
	stroke: none !important;
}

/* Arrows: solid accent circle with a white chevron, regardless of theme buttons. */
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-arrow {
	width: var(--mtr-arrow-size) !important;
	height: var(--mtr-arrow-size) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	background: var(--mtr-accent) !important;
	border: 1px solid var(--mtr-accent) !important;
	border-radius: 50% !important;
	color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
	line-height: 1 !important;
}
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-arrow svg,
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-arrow svg path {
	fill: none !important;
	stroke: currentColor !important;
}

/* Pagination dots stay small pills, never theme-styled rectangles/buttons. */
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-dot {
	width: 8px !important;
	height: 8px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(128, 128, 128, 0.35) !important;
	box-shadow: none !important;
}
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-dot.is-active {
	width: 24px !important;
	border-radius: 4px !important;
	background: var(--mtr-accent) !important;
}

/* Card surface + text color can't be repainted by theme content styles. */
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-card {
	background: var(--mtr-card-bg) !important;
}
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-text {
	color: var(--mtr-text-color) !important;
}
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-name {
	color: var(--mtr-name-color) !important;
}
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-role {
	color: var(--mtr-accent) !important;
}
.mtr-testimonial-slider.mtr-testimonial-slider .mtr-ts-avatar {
	border-color: var(--mtr-accent) !important;
	border-radius: 100px !important;
}