/**
 * قسم آراء المستفيدين في ثيم تنمية العرضية (template-parts/home/home-testimonials.php): «صوت واحد في كل مرة».
 * رأي واحد كبير في الوسط على خلفية فاتحة (علامة اقتباس خضراء ونص كبير واسم وصفة)، يتبدّل بتلاشٍ ناعم،
 * وتحته صف أزرار الوجوه في بلاطات بشكل الورقة، والحالي أكبر بحلقة خضراء.
 * بلا سكربت: أزرار الوجوه مخفية والآراء متراصّة بفواصل خفيفة.
 */

.tn-testimonials__stage {
	position: relative;
	max-width: 880px;
	margin-inline: auto;
	isolation: isolate;
}

/* ورقة كبيرة باهتة خلف الرأي */
.tn-testimonials__stage::before {
	content: '';
	position: absolute;
	top: 6px;
	bottom: 70px;
	left: 50%;
	z-index: -1;
	width: min(620px, 92%);
	border-radius: 260px 48px 260px 48px;
	background: rgba(var(--theme-secondary-rgb), 0.07);
	transform: translateX(-50%) rotate(-3deg);
	pointer-events: none;
}

.tn-testimonials__slider {
	min-width: 0;
}

/* ==========================================================================
   الرأي
   ========================================================================== */

.tn-testimonials__slide {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 12px 8px 8px;
	text-align: center;
}

/* بلا سكربت: الآراء متراصّة بفواصل خفيفة */
.tn-testimonials__list > .tn-testimonials__slide + .tn-testimonials__slide {
	margin-top: 28px;
	padding-top: 36px;
	border-top: 1px solid var(--tn-line);
}

.tn-testimonials.is-ready .tn-testimonials__list > .tn-testimonials__slide + .tn-testimonials__slide {
	margin-top: 0;
	padding-top: 12px;
	border-top: 0;
}

.tn-testimonials__mark {
	display: block;
	flex-shrink: 0;
	margin-bottom: 22px;
	color: var(--theme-secondary);
}

.tn-testimonials__text {
	max-width: 760px;
	margin: 0 0 26px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--tn-ink);
	font-size: clamp(1.12rem, 0.98rem + 0.6vw, 1.45rem);
	font-style: normal;
	font-weight: 500;
	line-height: 2;
}

.tn-testimonials__text p {
	margin: 0;
}

.tn-testimonials__who {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
}

.tn-testimonials__who::before {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	margin-bottom: 12px;
	border-radius: 3px;
	background: var(--theme-secondary);
}

.tn-testimonials__name {
	margin: 0;
	color: var(--tn-ink);
	font-size: 1.08rem;
	font-weight: 800;
	line-height: 1.6;
}

.tn-testimonials__role {
	color: var(--tn-leaf-deep);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.6;
}

/* ==========================================================================
   أزرار الوجوه
   ========================================================================== */

.tn-testimonials__people {
	display: none;
}

.tn-testimonials.is-ready .tn-testimonials__people {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 38px;
}

.tn-testimonials__person {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 74px;
	height: 74px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.tn-testimonials__face {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	overflow: hidden;
	border-radius: 22px 6px 22px 6px;
	background: var(--tn-sand-deep);
	color: #ffffff;
	font-size: 1.1rem;
	font-weight: 800;
	line-height: 1;
	opacity: 0.6;
	filter: grayscale(0.6);
	transition: width 0.35s var(--tn-ease), height 0.35s var(--tn-ease), opacity 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.tn-testimonials__face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* بلا صورة: الحرف الأول على ورقة تركوازية */
.tn-testimonials__face.is-empty {
	background: var(--theme-primary);
}

.tn-testimonials__person:hover .tn-testimonials__face {
	opacity: 1;
	filter: none;
}

.tn-testimonials__person:focus-visible {
	outline: none;
}

.tn-testimonials__person:focus-visible .tn-testimonials__face {
	opacity: 1;
	box-shadow: 0 0 0 3px var(--tn-sand), 0 0 0 6px var(--theme-primary);
}

/* الحالي: أكبر بحلقة خضراء */
.tn-testimonials__person.is-active .tn-testimonials__face {
	width: 70px;
	height: 70px;
	border-radius: 28px 7px 28px 7px;
	opacity: 1;
	filter: none;
	box-shadow: 0 0 0 3px var(--tn-sand), 0 0 0 6px var(--theme-secondary), 0 14px 26px -12px rgba(var(--theme-primary-rgb), 0.55);
}

.tn-testimonials__person.is-active:focus-visible .tn-testimonials__face {
	box-shadow: 0 0 0 3px var(--tn-sand), 0 0 0 6px var(--theme-primary);
}

/* ==========================================================================
   الاستجابة
   ========================================================================== */

@media (max-width: 640px) {
	.tn-testimonials.is-ready .tn-testimonials__people {
		gap: 6px;
		margin-top: 28px;
	}

	.tn-testimonials__person {
		width: 58px;
		height: 58px;
	}

	.tn-testimonials__face {
		width: 42px;
		height: 42px;
		border-radius: 18px 5px 18px 5px;
	}

	.tn-testimonials__person.is-active .tn-testimonials__face {
		width: 54px;
		height: 54px;
		border-radius: 22px 6px 22px 6px;
	}

	.tn-testimonials__mark {
		width: 42px;
		height: 31px;
		margin-bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tn-testimonials__face {
		transition: none;
	}
}