/* ==========================================================================
   Nova Testimonials — NovaFolio V2
   Premium, tokens-first, fully aligned with NovaFolio design system.
   Compatible with current markup + PHP + editor controls.
   Variants: classic · bubble · minimal
   ========================================================================== */

/* ==========================================================================
   ROOT / TOKENS
   ========================================================================== */
.nvf-testimonials {
	--nvf-testi-card-bg: var(--nvf-block-card-bg, var(--nvf-surface-1, #fff));
	--nvf-testi-card-radius: var(--nvf-block-card-radius, var(--nvf-radius-card, 16px));
	--nvf-testi-card-border: var(--nvf-block-card-border, var(--nvf-border-soft, rgba(15, 23, 42, 0.18)));
	--nvf-testi-text-color: var(--nvf-text, var(--nvf-color-text, #111827));
	--nvf-testi-name-color: var(--nvf-color-headings, #111827);
	--nvf-testi-role-color: var(--nvf-text-muted, #6B7280);
	--nvf-testi-star-color: var(--nvf-color-accent, #4F46E5);
	--nvf-testi-quote-color: var(--nvf-testi-star-color);
	--nvf-testi-accent: var(--nvf-color-accent, #4F46E5);
	--nvf-testi-section-bg: transparent;
	--nvf-testi-carousel-max: 980px;
	--nvf-testi-quote-fs: var(--nvf-p-font-size, 1rem);
	--nvf-testi-name-fs: 1rem;

	--nvf-testi-gap: var(--nvf-space-m, 22px);
	--nvf-testi-card-pad-x: clamp(22px, 2vw, 34px);
	--nvf-testi-card-pad-y: clamp(24px, 2.2vw, 36px);
	--nvf-testi-card-min-h: 100%;
	--nvf-testi-avatar-size: 84px;
	--nvf-testi-avatar-ring: 0 0 0 3px var(--nvf-testi-accent), 0 0 0 8px color-mix(in srgb, var(--nvf-testi-accent) 12%, transparent);
	--nvf-testi-text-measure: 34ch;
	--nvf-testi-dot-size: 8px;
	--nvf-testi-dot-active-w: 22px;
	--nvf-testi-arrow-size: 44px;
	--nvf-testi-arrow-offset: 8px;

	position: relative;
	width: 100%;
	max-width: min(100%, var(--nvf-layout-wide-width, 1440px));
	margin-inline: auto;
	padding-inline: var(--nvf-layout-padding-x, 40px);
	box-sizing: border-box;
}
/* Section already provides horizontal padding */
.nvf-section__inner .nvf-testimonials {
	padding-inline: 0;
}

.nvf-testimonials--has-bg {
	background: var(--nvf-testi-section-bg);
	padding-block: clamp(28px, 4vw, 48px);
	border-radius: var(--nvf-radius-card, 16px);
}

/* ==========================================================================
   TRACKS
   ========================================================================== */
.nvf-testimonials__track {
	position: relative;
	z-index: 1;
}

.nvf-testimonials--grid .nvf-testimonials__track {
	display: grid;
	gap: var(--nvf-testi-gap);
}

.nvf-testimonials--cols-1 .nvf-testimonials__track {
	grid-template-columns: 1fr;
}

.nvf-testimonials--cols-2 .nvf-testimonials__track {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.nvf-testimonials--cols-3 .nvf-testimonials__track {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nvf-testimonials--cols-4 .nvf-testimonials__track {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nvf-testimonials--carousel .nvf-testimonials__track {
	display: grid;
	overflow: hidden;
	min-height: 1px;
}

.nvf-testimonials--carousel .nvf-testimonials__card {
	grid-area: 1 / 1;
	width: min(100%, 980px);
	justify-self: center;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	position: relative;
	margin: 0;
	transform: none;
	transition:
		opacity .45s cubic-bezier(.4, 0, .2, 1),
		transform .5s cubic-bezier(.4, 0, .2, 1),
		visibility 0s .45s;
}

.nvf-testimonials--carousel .nvf-testimonials__card.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
	transition:
		opacity .45s cubic-bezier(.4, 0, .2, 1),
		transform .5s cubic-bezier(.4, 0, .2, 1),
		visibility 0s 0s;
}

/* ---- Fade transition states ---- */

.nvf-testimonials--carousel .nvf-testimonials__card.is-leaving {
	opacity: 1;
	visibility: visible;
	z-index: 1;
	transition:
		opacity .4s cubic-bezier(.4, 0, .2, 1),
		visibility 0s .4s;
}

.nvf-testimonials--carousel .nvf-testimonials__card.is-entering {
	opacity: 0;
	visibility: visible;
	z-index: 2;
	transition:
		opacity .4s cubic-bezier(.4, 0, .2, 1),
		visibility 0s 0s;
}

.nvf-testimonials--carousel .nvf-testimonials__card.is-leaving.is-animating {
	opacity: 0;
}

.nvf-testimonials--carousel .nvf-testimonials__card.is-entering.is-animating {
	opacity: 1;
}

/* ---- Slide transition states ---- */

.nvf-testimonials[data-transition="slide"] .nvf-testimonials__card.is-leaving {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
	z-index: 1;
	transition:
		opacity .5s cubic-bezier(.4, 0, .2, 1),
		transform .5s cubic-bezier(.4, 0, .2, 1),
		visibility 0s .5s;
}

.nvf-testimonials[data-transition="slide"] .nvf-testimonials__card.is-entering {
	opacity: 0;
	visibility: visible;
	transform: translateX(50px);
	z-index: 2;
	transition:
		opacity .5s cubic-bezier(.4, 0, .2, 1),
		transform .5s cubic-bezier(.4, 0, .2, 1),
		visibility 0s 0s;
}

.nvf-testimonials[data-transition="slide"] .nvf-testimonials__card.is-leaving.is-animating {
	opacity: 0;
	transform: translateX(-50px);
}

.nvf-testimonials[data-transition="slide"] .nvf-testimonials__card.is-entering.is-animating {
	opacity: 1;
	transform: translateX(0);
}

/* ======================================================================
   BASE CARD
   ====================================================================== */
.nvf-testimonials__card {
	background: var(--nvf-testi-card-bg);
	border-radius: var(--nvf-testi-card-radius);
	border: 1px solid var(--nvf-block-card-border, var(--nvf-border-soft, rgba(15, 23, 42, 0.10)));
	padding: clamp(28px, 3vw, 40px);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: var(--nvf-space-s, 14px);
	position: relative;
	min-height: 100%;
	max-width: min(100%, 980px);
	margin-inline: auto;
	box-sizing: border-box;
	transition:
		box-shadow var(--nvf-anim-duration-slow, .28s) var(--nvf-anim-ease, ease),
		transform var(--nvf-anim-duration-slow, .28s) var(--nvf-anim-ease, ease),
		border-color var(--nvf-anim-duration, .18s) var(--nvf-anim-ease, ease);
}

.nvf-testimonials__card:hover {
	transform: translateY(-2px);
}

/* ==========================================================================
   SHADOW MODIFIERS
   ========================================================================== */
.nvf-testimonials--shadow-none .nvf-testimonials__card {
	box-shadow: none;
}

.nvf-testimonials--shadow-soft .nvf-testimonials__card {
	box-shadow:
		0 10px 30px rgba(15, 23, 42, 0.06),
		0 2px 10px rgba(15, 23, 42, 0.04);
}

.nvf-testimonials--shadow-soft .nvf-testimonials__card:hover {
	box-shadow:
		0 14px 36px rgba(15, 23, 42, 0.08),
		0 4px 14px rgba(15, 23, 42, 0.05);
}

.nvf-testimonials--shadow-medium .nvf-testimonials__card {
	box-shadow:
		0 16px 40px rgba(15, 23, 42, 0.10),
		0 4px 16px rgba(15, 23, 42, 0.06);
}

.nvf-testimonials--shadow-medium .nvf-testimonials__card:hover {
	box-shadow:
		0 20px 52px rgba(15, 23, 42, 0.14),
		0 6px 22px rgba(15, 23, 42, 0.08);
}

.nvf-testimonials--shadow-strong .nvf-testimonials__card {
	box-shadow:
		0 24px 64px rgba(15, 23, 42, 0.16),
		0 8px 28px rgba(15, 23, 42, 0.08);
}

.nvf-testimonials--shadow-strong .nvf-testimonials__card:hover {
	box-shadow:
		0 28px 76px rgba(15, 23, 42, 0.20),
		0 12px 34px rgba(15, 23, 42, 0.10);
}

/* ==========================================================================
   QUOTE MARK
   ========================================================================== */
.nvf-testimonials__quote-mark {
	position: absolute;
	top: 18px;
	right: 20px;
	line-height: 1;
	color: var(--nvf-testi-quote-color);
	opacity: .16;
	pointer-events: none;
}

svg.nvf-testimonials__quote-icon {
	width: 42px !important;
	height: 42px !important;
	overflow: visible !important;
	position: static !important;
}

.nvf-testimonials--no-quote .nvf-testimonials__quote-mark {
	display: none;
}

/* ==========================================================================
   STARS
   ========================================================================== */
.nvf-testimonials__stars {
	order: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
}

svg.nvf-testimonials__star {
	width: 18px !important;
	height: 18px !important;
	color: var(--nvf-color-border, #E5E7EB);
	overflow: visible !important;
	position: static !important;
}

.nvf-testimonials__star.is-filled {
	color: var(--nvf-testi-star-color);
}

/* ==========================================================================
   TEXT
   ========================================================================== */
.nvf-testimonials__text {
	order: 3;
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--nvf-testi-text-color);
	font-size: var(--nvf-testi-quote-fs);
	font-weight: var(--nvf-testi-quote-weight, normal);
	letter-spacing: var(--nvf-testi-quote-ls, normal);
	text-transform: var(--nvf-testi-quote-transform, none);
	line-height: 1.75;
	font-style: normal;
	max-width: var(--nvf-testi-text-measure);
	flex: 1 1 auto;
	position: relative;
}

/* ==========================================================================
   AUTHOR
   ========================================================================== */
.nvf-testimonials__author {
	order: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-bottom: 4px;
}

.nvf-testimonials__avatar-wrap {
	position: relative;
	line-height: 0;
	flex-shrink: 0;
	width: var(--nvf-testi-avatar-size);
	height: var(--nvf-testi-avatar-size);
	overflow: hidden;
	border-radius: inherit;
}

.nvf-testimonials__avatar,
.nvf-testimonials__avatar-placeholder {
	width: var(--nvf-testi-avatar-size);
	height: var(--nvf-testi-avatar-size);
}

.nvf-testimonials__avatar {
	display: block;
	object-fit: cover;
	background: var(--nvf-surface-2, #F3F4F6);
}

.nvf-testimonials__avatar-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--nvf-testi-accent) 92%, white);
	color: var(--nvf-color-on-accent, #fff);
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--nvf-testi-accent) 25%, transparent);
}

.nvf-testimonials--avatar-circle .nvf-testimonials__avatar-wrap,
.nvf-testimonials--avatar-ring .nvf-testimonials__avatar-wrap {
	border-radius: var(--nvf-radius-circle, 50%);
}

.nvf-testimonials--avatar-rounded .nvf-testimonials__avatar-wrap {
	border-radius: var(--nvf-radius-image, 16px);
}

.nvf-testimonials--avatar-circle .nvf-testimonials__avatar,
.nvf-testimonials--avatar-ring .nvf-testimonials__avatar {
	border-radius: var(--nvf-radius-circle, 50%);
}

.nvf-testimonials--avatar-rounded .nvf-testimonials__avatar {
	border-radius: var(--nvf-radius-image, 16px);
}

.nvf-testimonials--avatar-ring .nvf-testimonials__avatar-wrap {
	box-shadow: var(--nvf-testi-avatar-ring);
}

.nvf-testimonials__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.nvf-testimonials__name {
	margin: 0;
	color: var(--nvf-testi-name-color);
	font-family: var(--nvf-headings-font-family, inherit);
	font-size: var(--nvf-testi-name-fs);
	font-weight: var(--nvf-testi-name-weight, var(--nvf-headings-weight, 520));
	line-height: 1.2;
	letter-spacing: var(--nvf-testi-name-ls, var(--nvf-headings-letter-spacing, -.02em));
	text-transform: var(--nvf-testi-name-transform, none);
	font-style: normal;
}

.nvf-testimonials__role {
	color: var(--nvf-testi-role-color);
	font-size: var(--nvf-small-font-size, .875rem);
	line-height: 1.45;
	opacity: .9;
}

/* ==========================================================================
   VARIANT — CLASSIC
   Clean premium card.  Subtle accent top line, centered composition.
   ========================================================================== */
.nvf-testimonials--classic .nvf-testimonials__card {
	padding-top: var(--nvf-testi-card-pad-y);
	background: var(--nvf-testi-card-bg);
	border: 1px solid var(--nvf-testi-card-border);
}

.nvf-testimonials--classic .nvf-testimonials__quote-mark {
	opacity: .12;
}

.nvf-testimonials--classic .nvf-testimonials__text {
	max-width: 36ch;
}

/* ==========================================================================
   VARIANT — BUBBLE
   Speech-card, still refined and consistent with NovaFolio.
   ========================================================================== */
.nvf-testimonials--bubble .nvf-testimonials__card {
	align-items: flex-start;
	text-align: left;
	padding-bottom: calc(var(--nvf-testi-card-pad-y) + 14px);
	margin-bottom: 18px;
	border-color: color-mix(in srgb, var(--nvf-testi-accent) 22%, var(--nvf-testi-card-border));
}

.nvf-testimonials--bubble .nvf-testimonials__card::after {
	content: "";
	position: absolute;
	left: 34px;
	bottom: -12px;
	width: 24px;
	height: 24px;
	background: var(--nvf-testi-card-bg);
	border-right: 1px solid color-mix(in srgb, var(--nvf-testi-accent) 18%, var(--nvf-testi-card-border));
	border-bottom: 1px solid color-mix(in srgb, var(--nvf-testi-accent) 18%, var(--nvf-testi-card-border));
	transform: rotate(45deg);
	border-bottom-right-radius: 4px;
}

.nvf-testimonials--bubble .nvf-testimonials__author,
.nvf-testimonials--bubble .nvf-testimonials__meta {
	align-items: flex-start;
}

.nvf-testimonials--bubble .nvf-testimonials__stars {
	justify-content: flex-start;
}

.nvf-testimonials--bubble .nvf-testimonials__text {
	max-width: 40ch;
}

.nvf-testimonials--bubble .nvf-testimonials__quote-mark {
	top: 16px;
	right: 18px;
	opacity: .18;
}

/* ==========================================================================
   VARIANT — MINIMAL
   Quiet editorial quote. Transparent card, accent rule, less “boxed”.
   ========================================================================== */
.nvf-testimonials--minimal .nvf-testimonials__card {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none !important;
	padding:
		clamp(6px, 1vw, 10px) 0 clamp(6px, 1vw, 10px) clamp(18px, 2vw, 26px);
	border-left: 2px solid color-mix(in srgb, var(--nvf-testi-accent) 82%, transparent);
	transform: none !important;
}

.nvf-testimonials--minimal .nvf-testimonials__author,
.nvf-testimonials--minimal .nvf-testimonials__meta {
	align-items: flex-start;
}

.nvf-testimonials--minimal .nvf-testimonials__author {
	flex-direction: row;
	gap: 14px;
	padding-bottom: 0;
}

.nvf-testimonials--minimal .nvf-testimonials__stars {
	justify-content: flex-start;
}

.nvf-testimonials--minimal .nvf-testimonials__text {
	max-width: 42ch;
	font-style: italic;
	line-height: 1.85;
}

.nvf-testimonials--minimal .nvf-testimonials__quote-mark {
	top: 0;
	right: 0;
	opacity: .10;
}

/* ==========================================================================
   ARROWS
   Integrated UI style, aligned with NovaFolio surfaces/shadows.
   ========================================================================== */
.nvf-testimonials__arrow {
	position: absolute;
	top: 50%;
	z-index: 10;
	width: var(--nvf-testi-arrow-size);
	height: var(--nvf-testi-arrow-size);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--nvf-border-soft, rgba(15, 23, 42, .16));
	border-radius: 999px !important;
	background: color-mix(in srgb, var(--nvf-testi-card-bg) 92%, white);
	color: var(--nvf-testi-name-color);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
	cursor: pointer;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transform: translateY(-50%);
	transition:
		color var(--nvf-anim-duration, .18s) var(--nvf-anim-ease, ease),
		background-color var(--nvf-anim-duration, .18s) var(--nvf-anim-ease, ease),
		border-color var(--nvf-anim-duration, .18s) var(--nvf-anim-ease, ease),
		box-shadow var(--nvf-anim-duration-slow, .28s) var(--nvf-anim-ease, ease),
		transform var(--nvf-anim-duration-slow, .28s) var(--nvf-anim-ease, ease);
}

.nvf-testimonials__arrow:hover {
	background: var(--nvf-testi-name-color);
	color: var(--nvf-color-on-accent, #fff);
	border-color: var(--nvf-testi-name-color);
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
	transform: translateY(-50%) scale(1.04);
}

.nvf-testimonials__arrow:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--nvf-testi-accent) 55%, transparent);
	outline-offset: 3px;
	color: var(--nvf-testi-name-color);
}

.nvf-testimonials__arrow--prev {
	left: max(12px, calc(50% - 490px + 16px));
}

.nvf-testimonials__arrow--next {
	right: max(12px, calc(50% - 490px + 16px));
}

/* ==========================================================================
   DOTS
   ========================================================================== */
.nvf-testimonials__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: var(--nvf-space-m, 22px);
}

.nvf-testimonials__dot {
	width: var(--nvf-testi-dot-size);
	height: var(--nvf-testi-dot-size);
	padding: 0;
	border: 0;
	border-radius: var(--nvf-radius-pill, 999px);
	background: color-mix(in srgb, var(--nvf-color-ink-deep, #0F172A) 14%, transparent);
	cursor: pointer;
	transition:
		width var(--nvf-anim-duration-slow, .28s) var(--nvf-anim-ease, ease),
		background-color var(--nvf-anim-duration, .18s) var(--nvf-anim-ease, ease),
		transform var(--nvf-anim-duration, .18s) var(--nvf-anim-ease, ease);
}

.nvf-testimonials__dot.is-active {
	width: var(--nvf-testi-dot-active-w);
	background: var(--nvf-testi-accent);
	transform: none;
}

.nvf-testimonials__dot:focus-visible {
	outline: 2px solid color-mix(in srgb, var(--nvf-testi-accent) 55%, transparent);
	outline-offset: 2px;
}

/* ==========================================================================
   EDITOR
   ========================================================================== */
.editor-styles-wrapper .nvf-testimonials {
	max-width: 100%;
}

.editor-styles-wrapper .nvf-testimonials--carousel .nvf-testimonials__track {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.editor-styles-wrapper .nvf-testimonials--carousel .nvf-testimonials__card {
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	position: relative;
	grid-area: auto;
	transform: none !important;
	transition: none !important;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {

	.nvf-testimonials--cols-4 .nvf-testimonials__track,
	.nvf-testimonials--cols-3 .nvf-testimonials__track {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	.nvf-testimonials {
		--nvf-testi-avatar-size: 72px;
		--nvf-testi-card-pad-x: 20px;
		--nvf-testi-card-pad-y: 22px;
		--nvf-testi-arrow-size: 38px;
	}

	.nvf-testimonials__arrow--prev {
		left: 12px;
	}

	.nvf-testimonials__arrow--next {
		right: 12px;
	}

	.nvf-testimonials--grid .nvf-testimonials__track {
		grid-template-columns: 1fr;
	}

	.nvf-testimonials__text {
		max-width: none;
	}

	.nvf-testimonials--minimal .nvf-testimonials__author {
		align-items: center;
	}
}

@media (max-width: 480px) {
	.nvf-testimonials__quote-mark {
		top: 14px;
		right: 16px;
	}

	svg.nvf-testimonials__quote-icon {
		width: 34px !important;
		height: 34px !important;
	}

	.nvf-testimonials--bubble .nvf-testimonials__card::after {
		left: 24px;
	}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {

	.nvf-testimonials__card,
	.nvf-testimonials__arrow,
	.nvf-testimonials__dot,
	.nvf-testimonials--carousel .nvf-testimonials__card {
		transition: none !important;
	}
}

/* ==========================================================================
   PRINT
   ========================================================================== */
@media print {
	.nvf-testimonials--carousel .nvf-testimonials__card {
		opacity: 1 !important;
		position: relative !important;
		pointer-events: auto !important;
		transform: none !important;
	}

	.nvf-testimonials__arrow,
	.nvf-testimonials__dots {
		display: none !important;
	}
}
}