/**
 * توضیحات بلندِ محصول — جمع‌شونده.
 *
 * روی صفحه‌ی «کنوا پرو» اندازه‌گیری شد: توضیحات ۲۳۱۰ پیکسل بود، یعنی
 * ۶۲٪ کلِ صفحه و ۲.۶ برابرِ ارتفاعِ نمایشگر. هرچه زیرش بود — محصولات
 * مرتبط، نظرات، محصولات وابسته — زیرِ یک دیوارِ متن دفن بود.
 *
 * کلاسِ is-clamped را جاوااسکریپت می‌گذارد، نه CSS. اگر اسکریپت نرسد
 * متن کامل دیده می‌شود؛ برعکسش یعنی محتوای بریده‌ی بی‌دکمه، که هم برای
 * کاربر بد است هم برای موتور جستجو.
 *
 * هیچ عنصری جابه‌جا نمی‌شود: کلاس روی خودِ بلوکِ متن می‌نشیند و دکمه
 * کنارش اضافه می‌شود. المنتور ۴ رَپرِ .elementor-widget-container را
 * برداشته، پس هر راه‌حلی که به آن تکیه کند بی‌صدا از کار می‌افتد.
 */

.nb-rm__body {
	position: relative;
	transition: max-height .38s cubic-bezier( .4, 0, .2, 1 );
}

/*
 * ۰.۷۵.۹ — clip، نه فقط hidden. ظرفِ overflow:hidden را هنوز می‌شود با برنامه
 * پیمایش داد: پیوندِ فهرستِ مطالب (یا جست‌وجو در صفحه) که به سرفصلی زیرِ بُرش
 * اشاره کند، خودِ همین ظرف را چند پیکسل بالا می‌بَرد؛ محوشدگی و دکمه با متن
 * بالا می‌روند و زیرِ دکمه سرِ سطرِ بعدی دیده می‌شود (مالک روی گوشی: «هاله‌های
 * سفید»). clip هر پیمایشی را می‌بندد؛ مرورگری که آن را نمی‌شناسد همان hidden را
 * می‌گیرد و read-more.js پیمایشِ ظرف را صفر نگه می‌دارد.
 */
.nb-rm__body.is-clamped {
	overflow: hidden;
	overflow: clip;
}

/*
 * محوشدگیِ لبه، فقط وقتی جمع است.
 *
 * رنگش از توکنِ پس‌زمینه می‌آید نه یک مقدارِ ثابت، وگرنه روی هر
 * پس‌زمینه‌ای جز آن یکی، یک نوارِ خاکستریِ کثیف دیده می‌شود.
 */
.nb-rm__body.is-clamped::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 120px;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		transparent,
		var( --nb-bg, #070f1c ) 92%
	);
}

/*
 * رنگ‌ها از خودِ سایت درآمده‌اند، نه از سلیقه. اندازه‌گیری‌شده روی
 * nebolar.com: رنگِ متنِ تعاملی همه‌جا --nb-link (#a78bfa) است و
 * --nb-accent (#720eec) فقط برای پُرکردن به کار می‌رود، هیچ‌جا برای
 * متن. گوشه‌ها ۹ تا ۱۰ پیکسل‌اند و هیچ عنصری قرصِ کامل نیست. وزنِ
 * کنترل‌ها ۵۰۰ است. نسخه‌ی قبلی هر سه را نقض می‌کرد و برای همین
 * بیگانه دیده می‌شد.
 *
 * زمینه همان rgba(255,255,255,.05)ِ سواچ‌هاست تا چشم این دکمه را
 * هم‌خانواده‌ی همان کنترل‌ها ببیند.
 *
 * دکمه داخلِ خودِ کادرِ متن است، نه همسایه‌اش.
 *
 * نسخه‌ی قبلی با insertAdjacentElement('afterend') کنارِ ویجت گذاشته
 * می‌شد. در المنتور ۴ والدِ ویجت یک کانتینرِ فلکس است، پس دکمه یک
 * آیتمِ فلکس می‌شد و طبقِ قواعدِ فلکس بیرونِ کادر و سمتِ دیگرِ صفحه
 * می‌نشست — دیده‌شده روی nebolar.com.
 *
 * حالا فرزندِ همان بلوک است و با position:absolute به کفِ آن می‌چسبد،
 * یعنی دقیقاً وسطِ محوشدگی. left/transform عمدی است و منطقی نیست:
 * وسط‌چینی در راست‌چین و چپ‌چین یکی است.
 */
.nb-rm__toggle {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	white-space: nowrap;
	padding: 7px 16px;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	font: inherit;
	font-size: 12.5px;
	font-weight: 500;
	color: var( --nb-link, #a78bfa );
	background: rgba( 255, 255, 255, .05 );
	border: 1px solid var( --nb-border, #242c42 );
	border-radius: var( --nb-radius, 10px );
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* باز که شد دیگر چیزی برای پوشاندن نیست: می‌رود ته متن، در جریانِ عادی. */
.nb-rm__toggle.is-open {
	position: static;
	transform: none;
	margin: 18px auto 0;
}

.nb-rm__toggle:hover {
	border-color: var( --nb-accent, #720eec );
	background: var( --nb-accent-08, rgba( 114, 14, 236, .08 ) );
	color: var( --nb-text, #ededed );
}

.nb-rm__toggle:focus-visible {
	outline: 2px solid var( --nb-accent, #720eec );
	outline-offset: 2px;
}

.nb-rm__toggle svg {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform .25s ease;
}

.nb-rm__toggle.is-open svg {
	transform: rotate( 180deg );
}

@media ( prefers-reduced-motion: reduce ) {
	.nb-rm__body,
	.nb-rm__toggle svg {
		transition: none;
	}
}