/*! Alef Blocks 0.37.26 — generated, do not edit. */

/* --- audio --- */
/*
 * alef/audio — همه‌ی مقادیر ظاهری توکن‌اند (Alef_Blocks\Styles)، fallback خنثی.
 */

.alef-audio {
	margin: 0 0 24px;
	padding: var(--alef-audio-padding, 16px);
	background: var(--alef-audio-bg, #f7f7f8);
	border: 1px solid var(--alef-audio-border-color, #e3e6e8);
	border-radius: var(--alef-audio-radius, 8px);
}

.alef-audio__head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}

.alef-audio__title {
	font-size: var(--alef-audio-title-size, 1em);
	font-weight: 700;
	color: var(--alef-audio-title-color, inherit);
	margin: 0;
}

.alef-audio__duration {
	font-size: 0.85em;
	color: var(--alef-muted, #5c6971);
}

/* پخش‌کننده‌ی بومی مرورگر است؛ فقط عرض را کامل می‌کنیم. */
.alef-audio__player {
	display: block;
	width: 100%;
}

.alef-audio-editor__empty {
	margin: 0;
	opacity: 0.7;
	font-size: 0.9em;
}

/* --- blog --- */
/**
 * alef/blog — اسلایدر مقالات برتر + تب دسته‌بندی + گرید، و چیدمان نوار افقی.
 *
 * قواعد:
 *  - رنگ‌ها همیشه `var(--alef-…, fallback-خنثی)`. هیچ رنگ برندی اینجا نیست.
 *  - اسکرول افقی با `scroll-snap` بومی است؛ بدون JS هم سوایپ/اسکرول کار می‌کند.
 *  - سلکتور تصویرها `… img` است نه `… > img`، چون alef-image-optim خروجی را به
 *    `<picture><img></picture>` بازنویسی می‌کند و فرزند مستقیم دیگر img نیست.
 */

.alef-blog {
	--ab-gap: var(--alef-blog-gap, 20px);
	--ab-radius: var(--alef-blog-radius, var(--alef-radius, 10px));
	--ab-border: var(--alef-blog-border-color, var(--alef-border-color, #e3e6e8));
	--ab-surface: var(--alef-blog-card-bg, var(--alef-surface, #ffffff));
	--ab-muted: var(--alef-blog-meta-color, var(--alef-muted, #5c6971));
	--ab-accent: var(--alef-blog-accent, var(--alef-accent, #7c3aed));
}

.alef-blog__heading {
	margin: 0 0 var(--ab-gap);
}

/* ------------------------------------------------------------ مقالات برتر */

.alef-blog__featured {
	position: relative;
	margin-bottom: calc(var(--ab-gap) * 1.6);
}

.alef-blog__featured-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.alef-blog__featured-track::-webkit-scrollbar {
	display: none;
}

.alef-blog__slide {
	flex: 0 0 100%;
	min-width: 0;
	scroll-snap-align: start;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: clamp(16px, 3vw, 36px);
	background: var(--ab-surface);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	overflow: hidden;
}

/* سمت تصویر: مقدار از PHP می‌آید (۱ یا ۲) و جهت صفحه را هم لحاظ کرده است. */
.alef-blog__slide-media {
	order: var(--ab-media-order, 2);
	display: block;
	align-self: stretch;
	min-height: 100%;
}

.alef-blog__slide-media img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: var(--alef-blog-featured-height, 300px);
	object-fit: cover;
}

.alef-blog__slide-body {
	order: 1;
	min-width: 0;
	padding: clamp(16px, 3vw, 32px);
}

.alef-blog__slide-title {
	margin: 0.35em 0 0;
	font-size: var(--alef-blog-featured-title-size, clamp(1.15rem, 2.4vw, 1.75rem));
	line-height: 1.7;
}

.alef-blog__slide-excerpt {
	margin: 0.7em 0 0;
	color: var(--alef-blog-excerpt-color, inherit);
	line-height: 2.05;
}

/* ------------------------------------------------------- فلش‌ها و نقطه‌ها */

.alef-blog__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ab-border);
	border-radius: 50%;
	background: var(--ab-surface);
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
}

.alef-blog__nav:hover,
.alef-blog__nav:focus-visible {
	border-color: var(--ab-accent);
	color: var(--ab-accent);
}

.alef-blog__nav[disabled] {
	opacity: 0.35;
	cursor: default;
	box-shadow: none;
}

/* پراپرتی‌های منطقی: در RTL خودبه‌خود جابه‌جا می‌شوند و «قبلی» همیشه سمت شروع
   سطر می‌ماند، بدون هیچ استایل‌شیت جداگانه‌ی RTL. */
.alef-blog__nav--prev {
	inset-inline-start: -8px;
}

.alef-blog__nav--next {
	inset-inline-end: -8px;
}

/* روی موبایل فلش نداریم — سوایپ طبیعی‌تر است و فلش روی تصویر می‌نشیند. */
@media (max-width: 767px) {
	.alef-blog__nav {
		display: none;
	}
}

.alef-blog__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
}

.alef-blog__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ab-border);
	cursor: pointer;
}

.alef-blog__dot[aria-current="true"] {
	background: var(--ab-accent);
	transform: scale(1.25);
}

/* ------------------------------------------------------------------ تب‌ها */

.alef-blog__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--ab-gap);
	padding-bottom: 2px;
}

.alef-blog__tab {
	padding: var(--alef-blog-tab-padding-y, 8px) var(--alef-blog-tab-padding-x, 16px);
	border: 1px solid var(--ab-border);
	border-radius: var(--alef-blog-tab-radius, 999px);
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	line-height: 1.8;
	cursor: pointer;
	white-space: nowrap;
}

.alef-blog__tab:hover,
.alef-blog__tab:focus-visible {
	border-color: var(--ab-accent);
	color: var(--ab-accent);
}

.alef-blog__tab[aria-pressed="true"] {
	background: var(--ab-accent);
	border-color: var(--ab-accent);
	color: var(--alef-blog-tab-active-color, #ffffff);
}

/* موبایل: نوار تب به‌جای شکستن در چند سطر، افقی اسکرول می‌شود. */
@media (max-width: 575px) {
	.alef-blog__tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.alef-blog__tabs::-webkit-scrollbar {
		display: none;
	}
}

/* ------------------------------------------------------------------ گرید */

.alef-blog__grid {
	display: grid;
	grid-template-columns: repeat(var(--ab-cols, 3), minmax(0, 1fr));
	gap: var(--ab-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.alef-blog__item {
	margin: 0;
	list-style: none;
}

.alef-blog__empty {
	margin: var(--ab-gap) 0 0;
	color: var(--ab-muted);
	text-align: center;
}

/* ------------------------------------------------------------ نوار افقی */

.alef-blog__strip {
	position: relative;
}

.alef-blog__strip-track {
	display: flex;
	gap: var(--ab-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.alef-blog__strip-track::-webkit-scrollbar {
	display: none;
}

.alef-blog__strip-track > .alef-blog__item {
	flex: 0 0 calc((100% - (var(--ab-strip, 3) - 1) * var(--ab-gap)) / var(--ab-strip, 3));
	min-width: 0;
	scroll-snap-align: start;
}

/* ------------------------------------------------------------------ کارت */

.alef-blog__card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--ab-surface);
	border: 1px solid var(--ab-border);
	border-radius: var(--ab-radius);
	overflow: hidden;
}

.alef-blog__thumb {
	display: block;
}

.alef-blog__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--alef-blog-thumb-ratio, 16 / 10);
	object-fit: cover;
}

.alef-blog__card-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--alef-blog-card-padding, 16px);
}

.alef-blog__card-title {
	margin: 0.3em 0 0;
	font-size: var(--alef-blog-card-title-size, 1.02rem);
	line-height: 1.9;
}

.alef-blog__excerpt {
	margin: 0.55em 0 0;
	font-size: 0.9em;
	line-height: 2;
	color: var(--alef-blog-excerpt-color, inherit);
}

/* متا همیشه به کف کارت بچسبد تا کارت‌های هم‌ردیف، خط متای هم‌تراز داشته باشند. */
.alef-blog__meta {
	margin: auto 0 0;
	padding-top: 0.7em;
	font-size: 0.8em;
	color: var(--ab-muted);
}

.alef-blog__sep {
	margin: 0 0.45em;
	opacity: 0.6;
}

.alef-blog__cat a,
.alef-blog__meta a {
	color: inherit;
	text-decoration: none;
}

.alef-blog__cat {
	margin: 0;
	font-size: 0.78em;
	font-weight: 600;
	color: var(--ab-accent);
}

.alef-blog__card-title a,
.alef-blog__slide-title a {
	color: inherit;
	text-decoration: none;
}

.alef-blog__card-title a:hover,
.alef-blog__slide-title a:hover,
.alef-blog__cat a:hover {
	text-decoration: underline;
}

.alef-blog__more {
	margin-top: 0.8em;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--ab-accent);
	text-decoration: none;
}

.alef-blog__btn {
	display: inline-block;
	margin-top: 1.2em;
	padding: var(--alef-blog-btn-padding-y, 10px) var(--alef-blog-btn-padding-x, 22px);
	border-radius: var(--alef-blog-btn-radius, 6px);
	background: var(--alef-blog-btn-bg, var(--ab-accent));
	color: var(--alef-blog-btn-color, #ffffff);
	font-size: 0.92em;
	font-weight: 600;
	text-decoration: none;
}

.alef-blog__btn:hover,
.alef-blog__btn:focus-visible {
	filter: brightness(0.92);
	color: var(--alef-blog-btn-color, #ffffff);
}

/* متن فقط برای صفحه‌خوان — پوسته ممکن است این کلاس را نداشته باشد، پس خودمان
   تعریفش می‌کنیم (تعریف تکراری در پوسته بی‌ضرر است). */
.alef-blog .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------- ریسپانسیو */

@media (max-width: 1024px) {
	.alef-blog__grid {
		grid-template-columns: repeat(var(--ab-cols-t, 2), minmax(0, 1fr));
	}

	.alef-blog__strip-track > .alef-blog__item {
		flex-basis: calc((100% - (var(--ab-strip-t, 2) - 1) * var(--ab-gap)) / var(--ab-strip-t, 2));
	}
}

@media (max-width: 767px) {
	/* اسلاید برتر روی موبایل تک‌ستونی: تصویر بالا، متن پایین. */
	.alef-blog__slide {
		grid-template-columns: 1fr;
	}

	.alef-blog__slide-media {
		order: 1;
	}

	.alef-blog__slide-body {
		order: 2;
	}

	.alef-blog__slide-media img {
		min-height: 0;
		aspect-ratio: var(--alef-blog-thumb-ratio, 16 / 10);
	}

	.alef-blog__grid {
		grid-template-columns: repeat(var(--ab-cols-m, 1), minmax(0, 1fr));
	}

	.alef-blog__strip-track > .alef-blog__item {
		flex-basis: calc((100% - (var(--ab-strip-m, 1) - 1) * var(--ab-gap)) / var(--ab-strip-m, 1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.alef-blog__featured-track,
	.alef-blog__strip-track {
		scroll-behavior: auto;
	}

	.alef-blog__dot[aria-current="true"] {
		transform: none;
	}
}

/* --------------------------------------------------------- پیش‌نمایش ادیتور */

.alef-blog-editor {
	border: 1px dashed #949494;
	border-radius: 6px;
	padding: 14px;
}

.alef-blog-editor__label {
	margin: 0 0 6px;
	font-size: 11px;
	color: #757575;
}

.alef-blog-editor__summary {
	margin: 0;
	font-size: 13px;
	line-height: 2;
}

.alef-blog-editor__picked {
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
}

.alef-blog-editor__picked li {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 3px 0;
	border-bottom: 1px solid #f0f0f1;
}

.alef-blog-editor__picked li span {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.alef-blog-editor__results {
	max-height: 190px;
	overflow-y: auto;
	margin: 6px 0 0;
	border: 1px solid #dcdcde;
	border-radius: 4px;
}

.alef-blog-editor__results button {
	display: block;
	width: 100%;
	padding: 6px 8px;
	border: 0;
	border-bottom: 1px solid #f0f0f1;
	background: transparent;
	font: inherit;
	font-size: 12px;
	text-align: start;
	cursor: pointer;
}

.alef-blog-editor__results button:hover {
	background: #f0f0f1;
}

/* --- callout --- */
/*
 * alef/callout — جایگزین .highlight-box ی که قبلاً در HTML خام هر مقاله تکرار
 * می‌شد. چهار حالت، هرکدام با توکن رنگ مستقل خودش.
 */

.alef-callout {
	background: var(--alef-callout-bg, #f7f7f8);
	border-inline-start: var(--alef-callout-bar-width, 4px) solid var(--alef-callout-bar-color, #9aa1a8);
	border-radius: var(--alef-callout-radius, 6px);
	padding: var(--alef-callout-padding, 16px 18px);
	margin: 0 0 24px;
	color: var(--alef-callout-text, inherit);
}

.alef-callout__title {
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--alef-callout-title-color, inherit);
}

.alef-callout__body > :last-child {
	margin-bottom: 0;
}

.alef-callout--info {
	--alef-callout-bg: var(--alef-callout-info-bg, #eef4fb);
	--alef-callout-bar-color: var(--alef-callout-info-bar, #3b82c4);
}

.alef-callout--tip {
	--alef-callout-bg: var(--alef-callout-tip-bg, #eef8f0);
	--alef-callout-bar-color: var(--alef-callout-tip-bar, #3f9b57);
}

.alef-callout--warning {
	--alef-callout-bg: var(--alef-callout-warning-bg, #fdf3ea);
	--alef-callout-bar-color: var(--alef-callout-warning-bar, #d4802a);
}

.alef-callout--note {
	--alef-callout-bg: var(--alef-callout-note-bg, #f4f2f8);
	--alef-callout-bar-color: var(--alef-callout-note-bar, #7c3aed);
}

/* --- carousel --- */
/**
 * alef/carousel — کاروسل گسسته با scroll-snap بومی.
 * بدون JS هم کاملاً کار می‌کند (اسکرول دستی/سوایپ لمسی)؛ view.js فقط چرخش خودکار
 * را اضافه می‌کند. فرزندان مستقیم track = اسلایدها (هر بلوکی).
 */
.alef-carousel__track {
	--ac-items: var(--ac-d, 3);
	display: flex;
	gap: var(--ac-gap, 10px);
	min-height: 56px;
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.alef-carousel__track::-webkit-scrollbar {
	display: none;
}

.alef-carousel__track > * {
	flex: 0 0 calc((100% - (var(--ac-items) - 1) * var(--ac-gap, 10px)) / var(--ac-items));
	height: var(--ac-h, auto);
	min-width: 0;
	scroll-snap-align: start;
	margin: 0;
}

/* هم‌ارتفاع‌سازی اسلایدها وقتی فرزند بلوک‌هایی مثل kadence/infobox هستند: رنگ
   پس‌زمینه‌ی آن‌ها روی یک <span> این‌لاین (kt-blocks-info-box-link-wrap) اعمال
   می‌شود که به‌طور پیش‌فرض فقط به اندازه‌ی محتوایش قد می‌کشد، نه کل ارتفاع
   فلکس‌آیتم — نتیجه‌اش قبل از این فیکس نوارهای هم‌عرض ولی ناهم‌قد بود (ارتفاع هر
   کارت به آیکون داخلش محدود می‌شد و آیکون‌ها ابعاد مختلف داشتند). */
.alef-carousel__track > .wp-block-kadence-infobox {
	height: 100%;
	display: flex;
}
.alef-carousel__track > .wp-block-kadence-infobox > .kt-blocks-info-box-link-wrap {
	box-sizing: border-box;
	min-height: var(--ac-h, auto);
	height: var(--ac-h, auto);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width: 1024px) {
	.alef-carousel__track {
		--ac-items: var(--ac-t, 2);
	}
}

@media (max-width: 767px) {
	.alef-carousel__track {
		--ac-items: var(--ac-m, 1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.alef-carousel__track {
		scroll-behavior: auto;
	}
}

/* پیش‌نمایش ادیتور */
.alef-carousel-editor-preview {
	border: 1px dashed #999;
	border-radius: 6px;
	padding: 12px;
}
.alef-carousel-editor-preview > .alef-carousel-editor-label {
	font-size: 11px;
	color: #757575;
	margin-bottom: 8px;
}

/* --- comparison-table --- */
/*
 * alef/comparison-table
 * تا ۲۰۲۶-۰۷-۲۷ رنگ برند آهن‌تودی (#ed2124) مستقیم اینجا هارد‌کد بود — هم
 * نقض قاعده‌ی «هیچ چیز site-specific داخل الف»، هم دلیل اینکه تغییر ظاهر جدول
 * هربار نیازمند ویرایش کد می‌شد. حالا همه‌چیز توکن است.
 *
 * ── باگ «گوشه‌های بریده‌ی پایین» (رفع ۲۰۲۶-۰۷-۲۷) ────────────────────────────
 * علت ریشه‌ای: `border-collapse: collapse`. در این حالت حاشیه‌ها به خودِ جدول
 * تعلق می‌گیرند نه به سلول‌ها، و طبق استاندارد، مرورگر آن حاشیه‌های ادغام‌شده را
 * به border-radius جدول کلیپ نمی‌کند — یعنی رادیوس اعمال می‌شود ولی خط حاشیه از
 * زیرش رد می‌شود و گوشه (به‌ویژه دو گوشه‌ی پایین که پس‌زمینه‌ی رنگی هدر آن‌ها را
 * نمی‌پوشاند) «بریده» به‌نظر می‌رسد. `overflow: hidden` هم چاره نبود چون روی
 * <table> رفتار قابل‌اتکایی ندارد و ضمناً اسکرول افقی را می‌کشت.
 *
 * راه‌حل: `border-collapse: separate; border-spacing: 0`.
 *   • حاشیه‌ی بیرونی → روی خود <table> (پس رادیوس واقعاً آن را می‌بُرد).
 *   • حاشیه‌های داخلی → فقط `border-bottom` + `border-inline-start` روی سلول‌ها؛
 *     با این ترکیب هیچ خطی دوبار کشیده نمی‌شود.
 *   • اولین سلول هر ردیف حاشیه‌ی کناری نمی‌گیرد و آخرین ردیف حاشیه‌ی پایین
 *     نمی‌گیرد — چون حاشیه‌ی بیرونی جدول همان‌جاست.
 *   • رادیوس سلول‌های چهار گوشه هم جدا ست می‌شود، وگرنه پس‌زمینه‌ی هدر از گوشه‌ی
 *     گرد جدول بیرون می‌زند.
 * همه‌ی خواص گوشه‌ها منطقی‌اند (border-start-start-radius…) تا در RTL خودبه‌خود
 * درست بیفتند.
 */

.alef-comparison-table {
	margin: 0 0 24px;
	overflow-x: auto;
}

.alef-comparison-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: var(--alef-comparison-table-border-width, 1px) solid var(--alef-comparison-table-border-color, #d8dcdf);
	border-radius: var(--alef-comparison-table-radius, 8px);
}

.alef-comparison-table th,
.alef-comparison-table td {
	border-block-end: var(--alef-comparison-table-border-width, 1px) solid var(--alef-comparison-table-border-color, #d8dcdf);
	border-inline-start: var(--alef-comparison-table-border-width, 1px) solid var(--alef-comparison-table-border-color, #d8dcdf);
	padding: var(--alef-comparison-table-cell-padding-y, 8px) var(--alef-comparison-table-cell-padding-x, 10px);
	text-align: var(--alef-comparison-table-cell-align, center);
}

/* لبه‌ی کناری اولین سلول و لبه‌ی پایینِ آخرین ردیف = همان حاشیه‌ی بیرونی جدول. */
.alef-comparison-table tr > *:first-child {
	border-inline-start: 0;
}

.alef-comparison-table tbody tr:last-child > * {
	border-block-end: 0;
}

/*
 * گوشه‌ها: رادیوس داخلی کمی کمتر از رادیوس بیرونی است تا خط حاشیه و پس‌زمینه
 * هم‌مرکز دیده شوند. :has() برای تشخیص جدول بدون <thead> است — همان تکنیکی که
 * در alef/modal هم استفاده شده و پشتیبانی مرورگرها امروز کامل است.
 */
.alef-comparison-table thead tr:first-child > *:first-child,
.alef-comparison-table table:not(:has(thead)) tbody tr:first-child > *:first-child {
	border-start-start-radius: calc(var(--alef-comparison-table-radius, 8px) - var(--alef-comparison-table-border-width, 1px));
}

.alef-comparison-table thead tr:first-child > *:last-child,
.alef-comparison-table table:not(:has(thead)) tbody tr:first-child > *:last-child {
	border-start-end-radius: calc(var(--alef-comparison-table-radius, 8px) - var(--alef-comparison-table-border-width, 1px));
}

.alef-comparison-table tbody tr:last-child > *:first-child {
	border-end-start-radius: calc(var(--alef-comparison-table-radius, 8px) - var(--alef-comparison-table-border-width, 1px));
}

.alef-comparison-table tbody tr:last-child > *:last-child {
	border-end-end-radius: calc(var(--alef-comparison-table-radius, 8px) - var(--alef-comparison-table-border-width, 1px));
}

.alef-comparison-table th {
	background: var(--alef-comparison-table-head-bg, #3f4b50);
	color: var(--alef-comparison-table-head-color, #fff);
	font-weight: var(--alef-comparison-table-head-weight, 700);
	font-size: var(--alef-comparison-table-head-size, 1em);
}

/*
 * بدنه یک پله کوچک‌تر از متن مقاله است. جدول مقایسه ذاتاً داده‌ی اسکن‌شدنی است،
 * نه متن روایی؛ با اندازه‌ی کامل، جدول شش‌ستونی روی موبایل غیرقابل‌خواندن
 * می‌شود و ردیف‌ها بی‌دلیل بلند می‌شوند.
 */
.alef-comparison-table tbody {
	font-size: var(--alef-comparison-table-body-size, 0.95em);
}

/* زبرا وقتی خاموش است مقدارش transparent می‌ماند و هیچ اثری ندارد. */
.alef-comparison-table tbody tr:nth-child(even) td {
	background: var(--alef-comparison-table-zebra-bg, transparent);
}

/*
 * ستون اول برچسبِ ردیف است (نام معیار)، نه داده — پس هم‌ترازی‌اش جدا تنظیم
 * می‌شود و پیش‌فرضش «شروع خط» است، در حالی که بقیه‌ی ستون‌ها وسط‌چین‌اند.
 */
.alef-comparison-table tr > *:first-child {
	text-align: var(--alef-comparison-table-first-col-align, start);
}

.alef-comparison-table tbody td:first-child {
	font-weight: var(--alef-comparison-table-first-col-weight, 400);
}

.alef-comparison-table caption {
	caption-side: top;
	text-align: start;
	font-size: 0.9em;
	color: var(--alef-comparison-table-caption-color, var(--alef-muted, #5c6971));
	padding-block-end: 8px;
}

.alef-comparison-table-editor table {
	width: 100%;
	border-collapse: collapse;
	margin: 10px 0;
}

.alef-comparison-table-editor th,
.alef-comparison-table-editor td {
	border: 1px solid #e3e6e8;
	padding: 6px;
	vertical-align: top;
}

.alef-comparison-table-editor__actions {
	display: flex;
	gap: 8px;
}

/* --- cta --- */
/*
 * alef/cta — کادر فراخوان انتهای مقاله.
 */

.alef-cta {
	background: var(--alef-cta-bg, #f7f7f8);
	border: var(--alef-cta-border-width, 1px) solid var(--alef-cta-border-color, #e3e6e8);
	border-radius: var(--alef-cta-radius, 8px);
	padding: var(--alef-cta-padding, 20px 22px);
	margin: 0 0 28px;
	color: var(--alef-cta-text, inherit);
}

.alef-cta__title {
	font-weight: 700;
	font-size: var(--alef-cta-title-size, 1.1em);
	color: var(--alef-cta-title-color, inherit);
	margin: 0 0 8px;
}

.alef-cta__text {
	margin: 0 0 16px;
	line-height: 1.9;
}

.alef-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--alef-cta-actions-gap, 12px);
}

.alef-cta__button {
	display: inline-block;
	background: var(--alef-cta-button-bg, var(--alef-accent, #7c3aed));
	color: var(--alef-cta-button-text, #fff);
	border-radius: var(--alef-cta-button-radius, 6px);
	padding: var(--alef-cta-button-padding, 10px 20px);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.6;
}

.alef-cta__button:hover,
.alef-cta__button:focus-visible {
	background: var(--alef-cta-button-bg-hover, var(--alef-cta-button-bg, var(--alef-accent, #7c3aed)));
	filter: brightness(0.94);
	color: var(--alef-cta-button-text, #fff);
}

.alef-cta__phones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alef-cta-actions-gap, 12px);
}

/* شماره‌ها LTR می‌مانند حتی در متن RTL — وگرنه ترتیب رقم‌ها جابه‌جا دیده می‌شود. */
.alef-cta__phone {
	direction: ltr;
	unicode-bidi: isolate;
	color: var(--alef-cta-phone-color, var(--alef-accent, #7c3aed));
	font-weight: 700;
	text-decoration: none;
}

.alef-cta__phone:hover,
.alef-cta__phone:focus-visible {
	text-decoration: underline;
}

.alef-cta-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

/* --- divider --- */
/*
 * alef/divider
 * همه‌ی مقادیر ظاهری توکن‌اند (Alef_Blocks\Styles) و fallback داخل var() عمداً
 * خنثی است — هیچ رنگ site-specific ای اینجا نوشته نمی‌شود.
 *
 * چرا <hr> با border:0 و background به‌جای border-top؟ چون سبک پیش‌فرض «محو»
 * یک gradient است و gradient فقط روی background قابل کشیدن است، نه روی border.
 * ارتفاع خط هم همان ضخامت است؛ پس ضخامت با height کنترل می‌شود نه border-width.
 */

.alef-divider {
	border: 0;
	display: block;
	height: var(--alef-divider-thickness, 1px);
	width: var(--alef-divider-width, 100%);
	max-width: 100%;
	margin-block: var(--alef-divider-space-above, 28px) var(--alef-divider-space-below, 28px);
	margin-inline: auto;
	background: var(--alef-divider-style, linear-gradient(to right, transparent, var(--alef-divider-color, #e3e6e8), transparent));
}

/*
 * variant، override نمونه‌ای (per-instance) است: نویسنده می‌تواند برای یک
 * جداکننده‌ی مشخص سبک دیگری انتخاب کند بدون آنکه تنظیم سراسری عوض شود.
 * مقدارها عمداً همان مقدارهای map توکن `divider-style` هستند تا خروجی یکی باشد.
 */
.alef-divider--fade {
	background: linear-gradient(to right, transparent, var(--alef-divider-color, #e3e6e8), transparent);
}

.alef-divider--solid {
	background: var(--alef-divider-color, #e3e6e8);
}

/*
 * «نقطه‌چین»: یک دایره‌ی کوچک که با background-size تکرار می‌شود. با
 * border-style: dotted نمی‌شود این کار را کرد، چون فاصله‌ی نقطه‌ها در آن حالت
 * توسط مرورگر تعیین می‌شود و قابل تنظیم نیست.
 */
.alef-divider--dotted-center {
	background: radial-gradient(circle, var(--alef-divider-color, #e3e6e8) 45%, transparent 50%) 0 0 / 6px 100% repeat-x;
}

/* ویرایشگر: بدون این، خط ۱ پیکسلی عملاً غیرقابل انتخاب می‌شود. */
.alef-divider-editor {
	padding: 6px 0;
}

/* --- faq --- */
/*
 * alef/faq
 *
 * ساختار عمداً مثل آکاردئون کدنسِ خود سایت است: **سرتیتر** کادر رنگی است و
 * **پاسخ** یک پنل جدا زیر آن. نسخه‌ی قبلی کل <details> را یک کادر رنگی می‌کرد و
 * به همین دلیل هیچ‌وقت شبیه بقیه‌ی سایت نمی‌شد.
 *
 * همه‌ی مقادیر از توکن می‌آیند؛ fallback داخل var() عمداً خنثی است — رنگ برند هر
 * سایت از تنظیمات دیتابیس می‌آید، نه از این فایل.
 */

.alef-faq {
	margin: 0 0 24px;
	display: flex;
	flex-direction: column;
	gap: var(--alef-faq-gap, 10px);
}

.alef-faq__item {
	box-shadow: var(--alef-faq-shadow, none);
	border-radius: var(--alef-faq-radius, 6px);
}

/* -- سرتیتر: همان نوار رنگی ----------------------------------------------- */

.alef-faq__item summary {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 700;
	list-style: none;
	background: var(--alef-faq-bg, #f2f2f2);
	color: var(--alef-faq-title-color, #555555);
	border: 1px solid var(--alef-faq-border-color, var(--alef-faq-bg, #f2f2f2));
	border-radius: var(--alef-faq-radius, 6px);
	padding: var(--alef-faq-header-padding-y, 13px) var(--alef-faq-header-padding-x, 20px);
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.alef-faq__item summary::-webkit-details-marker {
	display: none;
}

.alef-faq__item[open] summary {
	background: var(--alef-faq-bg-open, var(--alef-faq-bg, #f2f2f2));
	color: var(--alef-faq-title-color-open, var(--alef-faq-title-color, #555555));
	border-color: var(--alef-faq-border-color-open, var(--alef-faq-bg-open, var(--alef-faq-bg, #f2f2f2)));
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.alef-faq__item summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* متن پرسش فضای باقی‌مانده را می‌گیرد تا آیکون همیشه به انتها بچسبد. */
.alef-faq__question {
	flex: 1 1 auto;
}

/* -- آیکون: دو میله که + را به − تبدیل می‌کنند (همان سبک basic کدنس) ------- */

.alef-faq__icon {
	flex: 0 0 auto;
	position: relative;
	width: 16px;
	height: 16px;
	color: var(--alef-faq-icon-color, currentColor);
}

.alef-faq__icon::before,
.alef-faq__icon::after {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 100%;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.1333s ease-in-out;
}

.alef-faq__icon::before {
	transform: translateY(-50%);
}

/* میله‌ی عمودی در حالت باز صاف می‌شود → + به − تبدیل می‌شود. */
.alef-faq__icon::after {
	transform: translateY(-50%) rotate(90deg);
}

.alef-faq__item[open] .alef-faq__icon {
	color: var(--alef-faq-icon-color-open, var(--alef-faq-icon-color, currentColor));
}

.alef-faq__item[open] .alef-faq__icon::after {
	transform: translateY(-50%) rotate(0deg);
}

/* سبک فلش، برای وقتی مالک + را نخواهد. */
.alef-faq[data-icon="chevron"] .alef-faq__icon::before {
	transform: translateY(-50%) rotate(45deg) translate(3px, 3px);
	width: 60%;
}

.alef-faq[data-icon="chevron"] .alef-faq__icon::after {
	transform: translateY(-50%) rotate(-45deg) translate(-3px, 3px);
	width: 60%;
	inset-inline-start: auto;
	inset-inline-end: 0;
}

.alef-faq[data-icon="none"] .alef-faq__icon {
	display: none;
}

/* -- پنل پاسخ ------------------------------------------------------------- */

.alef-faq__answer {
	background: var(--alef-faq-answer-bg, #ffffff);
	color: var(--alef-faq-answer-color, #18272e);
	line-height: 1.9;
	padding: var(--alef-faq-header-padding-y, 13px) var(--alef-faq-header-padding-x, 20px);
	border: 1px solid var(--alef-faq-border-color, #e3e6e8);
	border-top: 0;
	border-end-start-radius: var(--alef-faq-radius, 6px);
	border-end-end-radius: var(--alef-faq-radius, 6px);
}

.alef-faq__answer > :first-child { margin-top: 0; }
.alef-faq__answer > :last-child  { margin-bottom: 0; }

/*
 * انیمیشن ارتفاع را view.js می‌گیرد (<details> بومی نمی‌تواند ارتفاع را
 * انیمیت کند). این کلاس فقط وقتی JS حاضر است اضافه می‌شود، پس بدون JS هم
 * آکاردئون کاملاً کار می‌کند — فقط بدون نرمی.
 */
.alef-faq__panel {
	overflow: hidden;
}

.alef-faq--animating .alef-faq__panel {
	transition: height 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
	.alef-faq__item summary,
	.alef-faq__icon::before,
	.alef-faq__icon::after,
	.alef-faq--animating .alef-faq__panel {
		transition: none;
	}
}

/* -- ویرایشگر ------------------------------------------------------------- */

.alef-faq-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.alef-faq-editor__title {
	font-weight: 700;
	margin: 0 0 10px;
}

/* --- footnotes --- */
/*
 * alef/footnotes — همه‌ی مقادیر ظاهری توکن‌اند (Alef_Blocks\Styles)، fallback خنثی.
 */

.alef-footnotes {
	margin-block: var(--alef-footnotes-space-above, 32px) 24px;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--alef-footnotes-border-color, #e3e6e8);
	font-size: var(--alef-footnotes-text-size, 0.9em);
	color: var(--alef-footnotes-text-color, #3f4b50);
}

.alef-footnotes__title {
	font-size: var(--alef-footnotes-title-size, 1.1em);
	font-weight: 700;
	margin: 0 0 10px;
}

/*
 * `persian` یکی از counter-style های استاندارد CSS است و ارقام فارسی می‌دهد
 * (۱، ۲، ۳ …). مرورگری که نشناسدش بی‌صدا به decimal برمی‌گردد — یعنی افت
 * ظاهری، نه شکستن. شماره‌ی هر آیتم با ویژگی value روی <li> صریح ست می‌شود تا
 * اگر ترتیب پانویس‌ها با شماره‌شان یکی نبود، شماره‌ی درست نمایش داده شود.
 */
.alef-footnotes__list {
	margin: 0;
	padding-inline-start: 24px;
	list-style-type: persian;
	line-height: 1.9;
}

.alef-footnotes__list > li::marker {
	color: var(--alef-footnotes-marker-color, #5c6971);
}

.alef-footnotes__list > li + li {
	margin-block-start: 8px;
}

/* لینک بازگشت باید دیده شود ولی متن پانویس را نشکند. */
.alef-footnotes__back {
	margin-inline-start: 6px;
	text-decoration: none;
	color: var(--alef-footnotes-marker-color, #5c6971);
}

.alef-footnotes__back:hover,
.alef-footnotes__back:focus-visible {
	text-decoration: underline;
}

/* ارجاع درون‌متنی — خروجی Footnotes_Block::reference(). */
.alef-fnref {
	line-height: 0;
	font-size: 0.75em;
}

.alef-fnref a {
	text-decoration: none;
	color: var(--alef-footnotes-marker-color, #5c6971);
	padding-inline: 2px;
}

.alef-fnref a:hover,
.alef-fnref a:focus-visible {
	text-decoration: underline;
}

/* هدف پرش را زیر هدر چسبان نبَرد. */
.alef-footnotes__list > li:target {
	scroll-margin-block-start: 80px;
}

.alef-footnotes-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

/* --- gallery --- */
/**
 * alef/gallery — گرید بومی + لایت‌باکس `<dialog>`.
 *
 * ⚠ نقطه‌ی شکست‌ها روی خودِ قانونِ مصرف‌کننده اعمال می‌شوند، نه با بازتعریف
 * متغیر داخل media query: مقدارها inline روی element نشسته‌اند و inline از هر
 * قانون شیت قوی‌تر است، پس بازتعریف هیچ اثری نمی‌کند.
 */

.alef-gallery {
	--ag-gap: 16px;
	--ag-cols: 3;
}

/* ⚠ کلاس عمداً دو بار آمده (خصوصیت ۰,۲,۰).
   پوسته `.single-content h2 + * { margin-top: 0 }` دارد — خصوصیت ۰,۱,۲ — و
   گالری دقیقاً بعد از یک `<h2>` می‌نشیند، پس فاصله‌ی بالایش صفر می‌شد. برخلاف
   مورد `<ul>` (که با عوض‌کردن تگ حل شد)، اینجا راه فراری نیست: **هر** عنصری
   در آن جایگاه این قانون را می‌گیرد. خودِ کدنس هم همین کار را می‌کرد.
   فاصله‌ی اندازه‌گیری‌شده‌ی نسخه‌ی کدنس: `padding: 10px 0` و `margin: 24px 0 16px`. */
.alef-gallery.alef-gallery {
	padding-block: var( --ag-pad-y, 0 );
	margin-block: var( --ag-mt, 0 ) var( --ag-mb, 0 );
}

/* ⚠ ظرف یک `<div role="list">` است نه `<ul>`. پوسته‌ی این سایت به هر `ul` داخل
   `.single-content` یک `padding: 2em` می‌دهد (۳۴px) که بی‌صدا از عرض گالری کم
   می‌شد. بالابردن خصوصیت جوابِ یک بلوکِ عمومی نیست — روی پوسته‌ی بعدی سلکتور
   دیگری برنده می‌شود. نبودنِ `ul` کلاً آن سطح حمله را حذف می‌کند. */
.alef-gallery .alef-gallery__list {
	display: grid;
	grid-template-columns: repeat( var( --ag-cols ), minmax( 0, 1fr ) );
	gap: var( --ag-gap );
	margin: 0;
	padding: 0;
	list-style: none;
}

.alef-gallery .alef-gallery__item {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

.alef-gallery__figure {
	margin: 0;
	display: block;
}

/* گردی، سایه و برش همگی روی همین یک عنصر. `overflow:hidden` تصویر را به
   گوشه‌ی گرد می‌بُرد، ولی سایه بیرونش رندر می‌شود (box-shadow با overflow خودِ
   عنصر بریده نمی‌شود) — پس هر دو با هم کار می‌کنند. */
.alef-gallery__media {
	display: block;
	line-height: 0;
	border-radius: var( --ag-radius, 0 );
	box-shadow: var( --ag-shadow, none );
	overflow: hidden;
}

.alef-gallery__figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	border-radius: inherit;
}

/* نسبت ثابت فقط وقتی خواسته شده باشد — وگرنه ارتفاع از خود تصویر می‌آید و
   هیچ برشی اتفاق نمی‌افتد. */
.alef-gallery[ style*="--ag-ratio" ] .alef-gallery__figure img {
	aspect-ratio: var( --ag-ratio );
	object-fit: cover;
	height: auto;
}

.alef-gallery__caption {
	margin: .4em 0 0;
	font-size: .85em;
	line-height: 1.5;
	text-align: center;
}

/* ۹۹۱/۷۶۷ عمدی است: دقیقاً روی مرز md و sm کدنس می‌نشیند، پس گالری مهاجرت‌کرده
   در هر عرضی همان تعداد ستون قبلی را دارد. */
@media ( max-width: 991px ) {
	.alef-gallery .alef-gallery__list {
		grid-template-columns: repeat( var( --ag-cols-t, var( --ag-cols ) ), minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {
	.alef-gallery.alef-gallery {
		padding-block: var( --ag-pad-y-m, var( --ag-pad-y, 0 ) );
		margin-block: var( --ag-m-m, var( --ag-mt, 0 ) ) var( --ag-m-m, var( --ag-mb, 0 ) );
	}
	.alef-gallery .alef-gallery__list {
		grid-template-columns: repeat( var( --ag-cols-m, var( --ag-cols ) ), minmax( 0, 1fr ) );
		gap: var( --ag-gap-m, var( --ag-gap ) );
	}
}

/* ── لایت‌باکس ──────────────────────────────────────────────────────────────
   `<dialog>` بومی: top-layer یعنی هیچ z-index ای لازم نیست، Escape و تله‌ی
   فوکوس بومی‌اند، و `::backdrop` خودش پوشش است. */

.alef-gallery__lb {
	max-width: 100vw;
	max-height: 100vh;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: hidden;
}

.alef-gallery__lb::backdrop {
	background: rgba( 0, 0, 0, .82 );
}

.alef-gallery__lb[ open ] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	justify-items: center;
	gap: 8px;
	padding: max( 12px, env( safe-area-inset-top ) ) 12px 12px;
	box-sizing: border-box;
}

.alef-gallery__lb-img {
	grid-column: 2;
	max-width: 100%;
	max-height: 88vh;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 4px;
}

.alef-gallery__lb-nav,
.alef-gallery__lb-close {
	appearance: none;
	border: 0;
	cursor: pointer;
	color: #fff;
	background: rgba( 0, 0, 0, .45 );
	border-radius: 999px;
	line-height: 1;
	transition: background .15s ease-in-out;
}

.alef-gallery__lb-nav {
	width: 44px;
	height: 44px;
	font-size: 30px;
	/* در RTL «قبلی» سمت راست است؛ با ستون‌های صریح، جهت خودبه‌خود درست می‌شود. */
	grid-row: 1;
}

.alef-gallery__lb-prev { grid-column: 1; }
.alef-gallery__lb-next { grid-column: 3; }

.alef-gallery__lb-close {
	position: absolute;
	inset-block-start: 10px;
	inset-inline-end: 10px;
	width: 40px;
	height: 40px;
	font-size: 26px;
}

.alef-gallery__lb-nav:hover,
.alef-gallery__lb-close:hover { background: rgba( 0, 0, 0, .75 ); }

.alef-gallery__lb-nav:focus-visible,
.alef-gallery__lb-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.alef-gallery__lb-count {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
	color: #fff;
	font-size: .85rem;
	opacity: .8;
}

/* گالری تک‌تصویری فلش نمی‌خواهد. */
.alef-gallery__lb[ data-single ] .alef-gallery__lb-nav { display: none; }

@media ( max-width: 600px ) {
	.alef-gallery__lb-nav { width: 38px; height: 38px; font-size: 26px; }
	.alef-gallery__lb-img { max-height: 78vh; }
}

/* اسکرول پس‌زمینه هنگام باز بودن لایت‌باکس قفل شود. */
body:has( .alef-gallery__lb[ open ] ) { overflow: hidden; }

/* ── چیدمان carousel (جایگزین fluidcarousel کدنس) ─────────────────────────
   ارتفاع ثابت، عرض آزاد از روی نسبت خود تصویر، اسکرول افقی با scroll-snap
   بومی. حرکت خودکار گام‌به‌گام در `view.js`، ولی **بدون آن هم** کاملاً
   قابل‌استفاده است: کاربر می‌تواند سوایپ/اسکرول کند. */

.alef-gallery--carousel .alef-gallery__list {
	display: flex;
	grid-template-columns: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* نوار اسکرول عمداً پنهان است — نسخه‌ی کدنس هم نداشت. اسکرول با سوایپ،
	   چرخ ماوس و کیبورد همچنان کار می‌کند. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.alef-gallery--carousel .alef-gallery__list::-webkit-scrollbar { display: none; }

.alef-gallery--carousel .alef-gallery__item {
	flex: 0 0 auto;
	scroll-snap-align: start;
	height: var( --ag-height, auto );
	max-width: 100%;
}

.alef-gallery--carousel .alef-gallery__figure,
.alef-gallery--carousel .alef-gallery__media {
	height: 100%;
}

.alef-gallery--carousel .alef-gallery__figure img {
	height: 100%;
	width: auto;
	max-width: none;
	object-fit: cover;
}

@media ( max-width: 767px ) {
	/* کدنس روی موبایل عرض اسلاید را به کسری از ظرف محدود می‌کرد، نه به نسبت
	   طبیعی تصویر — اندازه‌گیری‌شده: ۲۷۳px داخل ظرف ۳۴۲px. */
	.alef-gallery--carousel .alef-gallery__item {
		max-width: var( --ag-item-max-m, 100% );
	}
	.alef-gallery--carousel .alef-gallery__figure img {
		width: 100%;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.alef-gallery--carousel .alef-gallery__list { scroll-behavior: auto; }
}

/* ── چیدمان scroller ───────────────────────────────────────────────────────
   یک ردیف افقی که همه‌ی تصویرها را نگه می‌دارد، به‌جای گریدی که آخرین ردیفش
   نیمه‌کاره می‌ماند (۹ گواهی در ۶ ستون = یک ردیف ۶تایی + یک ردیف یتیم ۳تایی).

   عرض هر آیتم **دقیقاً همان ریاضیِ گرید** است — `(۱۰۰٪ − (n−۱)×gap) / n` — پس
   تبدیل grid → scroller اندازه و فاصله‌ی تصویرها را ذره‌ای تغییر نمی‌دهد؛ فقط
   ردیف دوم به‌جای پایین‌آمدن، کنار می‌ایستد.

   ⚠ چرا `proximity` و نه `mandatory`: آخرین «صفحه» معمولاً ناقص است (۹ تصویر،
   ۶ در دید). با mandatory، مرورگر از نقطه‌ی snapِ فراتر از انتهای اسکرول به
   عقب پرتاب می‌کند و **انتهای فهرست عملاً دست‌نیافتنی می‌شود**. proximity همان
   حس تراز را می‌دهد بدون آن تله. */

.alef-gallery--scroller .alef-gallery__list {
	display: flex;
	grid-template-columns: none;
	align-items: flex-start;
	gap: var( --ag-gap );
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: x proximity;
	scroll-behavior: smooth;
	/* نوار اسکرول عمداً پنهان است — راهنمای «ادامه دارد» دکمه‌ها و محوشدگی لبه
	   است، نه یک نوار خاکستری زیر تصویرها. اسکرول با سوایپ، چرخ ماوس، شیفت+چرخ
	   و کیبورد همچنان کار می‌کند. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.alef-gallery--scroller .alef-gallery__list::-webkit-scrollbar { display: none; }

.alef-gallery--scroller .alef-gallery__item {
	flex: 0 0 calc( ( 100% - ( var( --ag-cols ) - 1 ) * var( --ag-gap ) ) / var( --ag-cols ) );
	scroll-snap-align: start;
}

@media ( max-width: 991px ) {
	.alef-gallery--scroller .alef-gallery__item {
		flex-basis: calc( ( 100% - ( var( --ag-cols-t, var( --ag-cols ) ) - 1 ) * var( --ag-gap ) ) / var( --ag-cols-t, var( --ag-cols ) ) );
	}
}

@media ( max-width: 767px ) {
	.alef-gallery--scroller .alef-gallery__list { gap: var( --ag-gap-m, var( --ag-gap ) ); }
	.alef-gallery--scroller .alef-gallery__item {
		flex-basis: calc( ( 100% - ( var( --ag-cols-m, var( --ag-cols ) ) - 1 ) * var( --ag-gap-m, var( --ag-gap ) ) ) / var( --ag-cols-m, var( --ag-cols ) ) );
	}
}

/* ── محوشدگی لبه ───────────────────────────────────────────────────────────
   قوی‌ترین نشانه‌ی «ادامه دارد» همین است: خودِ تصویرِ لبه نصفه‌محو می‌شود، پس
   چشم بدون خواندن هیچ دکمه‌ای می‌فهمد قاب ادامه دارد.

   ⚠ `mask-image` و نه یک گرادیانِ هم‌رنگِ پس‌زمینه روی لبه: رنگ پس‌زمینه‌ی این
   قسمت را بلوک نمی‌داند (پوسته/بخش تعیینش می‌کند) و هر حدسی روی اولین پس‌زمینه‌ی
   غیرسفید لو می‌رفت. ماسک خودِ محتوا را شفاف می‌کند، پس روی هر پس‌زمینه‌ای درست
   است.

   جهت‌ها عمداً **فیزیکی**‌اند (`-l`/`-r`) و نه منطقی: `view.js` می‌داند نوار در
   کدام جهت است و همان‌جا تصمیم می‌گیرد — این‌طور نه به `:dir()` نیاز است نه به
   دو نسخه‌ی آینه‌ای از همین قانون. */

.alef-gallery[ data-ag-nav ] .alef-gallery__list {
	--ag-fade-l: 0px;
	--ag-fade-r: 0px;
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 var( --ag-fade-l ), #000 calc( 100% - var( --ag-fade-r ) ), transparent 100% );
	mask-image: linear-gradient( to right, transparent 0, #000 var( --ag-fade-l ), #000 calc( 100% - var( --ag-fade-r ) ), transparent 100% );
}

.alef-gallery[ data-ag-fade-l ] .alef-gallery__list { --ag-fade-l: var( --ag-fade, 48px ); }
.alef-gallery[ data-ag-fade-r ] .alef-gallery__list { --ag-fade-r: var( --ag-fade, 48px ); }

/* ── دکمه‌های قبلی/بعدی ────────────────────────────────────────────────────
   عمداً کم‌رنگ و کوچک: کارشان اشاره است نه جلب توجه. تا وقتی جای رفتن نباشد
   اصلاً دیده نمی‌شوند (`[disabled]` → `opacity:0`)، پس در ابتدای فهرست فقط یک
   دکمه پیداست — که خودش می‌گوید ادامه از کدام سمت است. */

.alef-gallery__viewport {
	position: relative;
}

.alef-gallery__nav {
	position: absolute;
	inset-block-start: 50%;
	transform: translateY( -50% );
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var( --ag-nav-size, 36px );
	block-size: var( --ag-nav-size, 36px );
	padding: 0;
	appearance: none;
	border: 1px solid rgba( 0, 0, 0, .08 );
	border-radius: 999px;
	background: rgba( 255, 255, 255, .92 );
	color: #2b2b2b;
	cursor: pointer;
	opacity: .6;
	box-shadow: 0 1px 6px rgba( 0, 0, 0, .14 );
	transition: opacity .18s ease-out, background-color .18s ease-out, box-shadow .18s ease-out;
}

.alef-gallery__nav--prev { inset-inline-start: var( --ag-nav-inset, 0px ); }
.alef-gallery__nav--next { inset-inline-end: var( --ag-nav-inset, 0px ); }

.alef-gallery__nav:hover {
	opacity: 1;
	background: #fff;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, .2 );
}

.alef-gallery__nav:focus-visible {
	opacity: 1;
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* رسیدن به انتها = دکمه محو می‌شود، ولی جایش را نگه می‌دارد (`display` نه) تا
   ردیف موقع کلیک نپرد. */
.alef-gallery__nav[ disabled ] {
	opacity: 0;
	pointer-events: none;
}

.alef-gallery__chev {
	inline-size: 55%;
	block-size: 55%;
	display: block;
}

/* پیکان در SVG به چپِ فیزیکی است؛ در RTL آینه می‌شود. نتیجه: دکمه‌ی سمت شروع
   همیشه رو به شروع و دکمه‌ی سمت پایان همیشه رو به پایان اشاره می‌کند. */
.alef-gallery__nav--next .alef-gallery__chev { transform: scaleX( -1 ); }

[ dir="rtl" ] .alef-gallery__nav--prev .alef-gallery__chev { transform: scaleX( -1 ); }
[ dir="rtl" ] .alef-gallery__nav--next .alef-gallery__chev { transform: none; }

/* روی لمس، دکمه‌ها زائدند — انگشت خودش نوار را می‌کشد. محوشدگی لبه می‌ماند و
   همان نقش «ادامه دارد» را بازی می‌کند. */
@media ( hover: none ) and ( pointer: coarse ) {
	.alef-gallery__nav { display: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.alef-gallery--scroller .alef-gallery__list { scroll-behavior: auto; }
	.alef-gallery__nav { transition: none; }
}

/* ── برگشت به گرید زیر یک نقطه‌ی شکست ──────────────────────────────────────
   گریدی که روی دسکتاپ ردیف یتیم دارد، لزوماً روی موبایل ندارد (۹ تصویر در ۳
   ستون = ۳ ردیف کامل). `--from-md` یعنی «فقط از تبلت به بالا نواری باش»،
   `--from-lg` یعنی «فقط از دسکتاپ به بالا».

   `view.js` نیازی به خبردار شدن ندارد: با `overflow: visible` مقدار
   `scrollWidth − clientWidth` صفر می‌شود و همان منطقِ «چیزی برای اسکرول نیست»
   خودش دکمه‌ها را پنهان می‌کند. */

@media ( max-width: 767px ) {
	.alef-gallery--from-md .alef-gallery__list {
		display: grid;
		grid-template-columns: repeat( var( --ag-cols-m, var( --ag-cols ) ), minmax( 0, 1fr ) );
		overflow-x: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.alef-gallery--from-md .alef-gallery__item { flex-basis: auto; }
	.alef-gallery--from-md .alef-gallery__nav { display: none; }
}

@media ( max-width: 991px ) {
	.alef-gallery--from-lg .alef-gallery__list {
		display: grid;
		grid-template-columns: repeat( var( --ag-cols-t, var( --ag-cols ) ), minmax( 0, 1fr ) );
		overflow-x: visible;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.alef-gallery--from-lg .alef-gallery__item { flex-basis: auto; }
	.alef-gallery--from-lg .alef-gallery__nav { display: none; }
}

@media ( max-width: 767px ) {
	.alef-gallery--from-lg .alef-gallery__list {
		grid-template-columns: repeat( var( --ag-cols-m, var( --ag-cols ) ), minmax( 0, 1fr ) );
	}
}

/* --- heading --- */
/**
 * alef/heading — سرتیتر با آیکون اختیاری.
 *
 * ⚠ **این شیت هیچ خصوصیت تایپوگرافیِ پایه‌ای اعلام نمی‌کند.** مقدارهای دسکتاپ
 * به‌صورت خصوصیت واقعی، اینلاین روی خودِ عنصر می‌آیند و اگر تنظیم نشده باشند
 * اصلاً چاپ نمی‌شوند — پس سبک سرتیترِ پوسته دست‌نخورده برنده می‌ماند.
 *
 * نسخه‌ی اول اینجا `font-size: var(--ah-fs, inherit)` داشت. برای `h2` ای که
 * اندازه‌ای تنظیم نکرده بود این یعنی «از والد ارث ببر» و سبک پوسته را خاموش
 * می‌کرد: اندازه‌گیری‌شده **۱۹px → ۱۷px**. `inherit`، `unset` و `revert` هر سه
 * همین مشکل را دارند؛ تنها راه درست، **چاپ‌نکردن اعلان** است.
 *
 * مقدارهای موبایل نمی‌توانند اینلاین باشند (اینلاین از media query قوی‌تر است)،
 * پس از متغیر می‌آیند و هر قانون پشت یک کلاس modifier قفل شده تا وقتی متغیری
 * ست نشده، هیچ اعلانی فعال نشود.
 */

/* آیکون فقط وقتی هست، layout عوض می‌شود — سرتیتر بدون آیکون باید یک بلوک متن
   ساده بماند تا `text-align` و شکستن خط طبیعی‌اش حفظ شود. */
.alef-heading--has-icon {
	display: flex;
	align-items: center;
	gap: var(--ah-icon-gap, 8px);
}

.alef-heading--icon-right {
	flex-direction: row-reverse;
}

.alef-heading__icon {
	flex: 0 0 auto;
	display: inline-flex;
	color: var(--ah-icon-color, currentColor);
	line-height: 0;
}

.alef-heading__icon svg {
	width: var(--ah-icon-size, 1em);
	height: var(--ah-icon-size, 1em);
	display: block;
}

.alef-heading__link {
	color: inherit;
	text-decoration: none;
}

.alef-heading__link:hover {
	text-decoration: underline;
}

/* لینک‌های خامِ داخل `content` (نه attribute `link`) خط‌زیرِ پیش‌فرضِ مرورگر را
   دارند مگر این کلاس صریحاً خاموشش کند — کدنس همین را با `linkStyle:"none"`
   کنترل می‌کرد (`class-heading-block.php`).
   ⚠ `!important` عمدی است: پوسته‌ی کدنس یک قانونِ سراسری دارد
   (`.inner-link-style-normal a:not(.button){text-decoration:underline}`) که
   دقیقاً همین specificity (0,2,1) را دارد و چون بعد از این شیت لود می‌شود،
   بدون important در تساوی می‌برد — شماره‌تلفنِ هدر سراسری همین‌طور خط‌زیر
   ماند با اینکه این کلاس رویش بود (اندازه‌گیری‌شده). سومین نمونه‌ی این الگو در
   یک سشن (بعد از margin-top سرتیتر) — اگر باز هم تکرار شد، حلِ ریشه‌ای‌تر
   وابسته‌کردنِ هندلِ pack به هندل‌های CSS پوسته است، نه افزودن important تکی. */
.alef-heading--content-links-plain .alef-heading__text a {
	text-decoration: none !important;
}

/* کلاس پایه تکرار شده تا specificity به (۰,۲,۱) برسد و از قانونِ رنگِ لینکِ پوسته
   (`.entry-content a`) جلو بزند — وگرنه اعلان می‌نشیند ولی برنده نمی‌شود. */
.alef-heading.alef-heading--link-c .alef-heading__text a,
.alef-heading.alef-heading--link-c a.alef-heading__link {
	color: var(--ah-link-c);
}

.alef-heading.alef-heading--ml { margin-left: var(--ah-ml); }
.alef-heading.alef-heading--mr { margin-right: var(--ah-mr); }

/* ⚠ **مقدارهای دسکتاپ هم قانونِ شیت‌اند، نه اینلاین.** اعلانِ اینلاین از هر قانونِ
   شیت قوی‌تر است — حتی داخل media query — پس تا وقتی `font-size` دسکتاپ اینلاین بود،
   بلوک موبایلِ پایین هرگز برنده نمی‌شد و همه‌ی override های موبایل مرده بودند.
   هر قانون پشت یک کلاس نگهبان است، پس وقتی مقداری ست نشده هیچ اعلانی فعال نمی‌شود و
   سبک سرتیترِ پوسته دست‌نخورده می‌ماند. **ترتیب این دو بلوک مهم است.** */
/* ⚠ کلاس پایه عمداً تکرار شده تا specificity برابر (0,2,0) شود. با یک کلاس
   (0,1,0) قانون‌های خودِ پوسته مثل `.entry-content p` (0,1,1) برنده می‌شدند و
   `margin-bottom` روی موبایل ۲px نمی‌شد، ۳۲px می‌ماند (اندازه‌گیری‌شده). */
/* ⚠ `!important` روی این دو عمدی است: پوسته‌ی کدنس `.single-content h1:first-child`
   (و مشابه‌هایش برای h2..h6 و آخرین‌فرزند) دقیقاً همان specificity (0,2,0) را دارد و
   بعد از این شیت لود می‌شود، پس بدون important در تساوی specificity با ترتیب لود
   می‌برد — روی سرتیترِ اول صفحه، margin-top ست‌شده بی‌صدا صفر می‌شد (اندازه‌گیری‌شده
   روی صفحه‌ی گالری: ۴۸px گم‌شد). بقیه‌ی خصوصیت‌های این بلوک چنین همتای پوسته‌ای ندارند. */
.alef-heading.alef-heading--fs    { font-size: var(--ah-fs); }
.alef-heading.alef-heading--lh    { line-height: var(--ah-lh); }
.alef-heading.alef-heading--mt    { margin-top: var(--ah-mt) !important; }
.alef-heading.alef-heading--mb    { margin-bottom: var(--ah-mb) !important; }
.alef-heading.alef-heading--pad   { padding: var(--ah-pad); }
.alef-heading.alef-heading--align { text-align: var(--ah-align); }
.alef-heading.alef-heading--align.alef-heading--has-icon { justify-content: var(--ah-justify); }

@media (max-width: 767px) {
	/* همان قاعده‌ی بالا؛ و چون بعد از بلوک دسکتاپ می‌آید، با specificity برابر برنده است. */
	.alef-heading.alef-heading--fs-m    { font-size: var(--ah-fs-m); }
	.alef-heading.alef-heading--lh-m    { line-height: var(--ah-lh-m); }
	.alef-heading.alef-heading--mt-m    { margin-top: var(--ah-mt-m) !important; }
	.alef-heading.alef-heading--mb-m    { margin-bottom: var(--ah-mb-m) !important; }
	.alef-heading.alef-heading--pad-m   { padding: var(--ah-pad-m); }
	.alef-heading.alef-heading--align-m { text-align: var(--ah-align-m); }
	.alef-heading.alef-heading--align-m.alef-heading--has-icon { justify-content: var(--ah-justify-m); }
	.alef-heading.alef-heading--icon-m .alef-heading__icon svg {
		width: var(--ah-icon-size-m);
		height: var(--ah-icon-size-m);
	}
}

/* --- info-box --- */
/**
 * alef/info-box — کارت اطلاعات.
 *
 * ⚠ **هیچ اعلانی بدون کلاس نگهبان نیست.** هر خصوصیتی که مقدارش از بلوک می‌آید، پشت
 * یک کلاس modifier قفل شده تا وقتی چیزی تنظیم نشده هیچ اعلانی فعال نشود و سبکِ
 * ارث‌رسیده‌ی پوسته دست‌نخورده بماند. (در `alef/heading` نسخه‌ی اول
 * `font-size: var(--x, inherit)` داشت و برای سرتیترِ بدون اندازه، سبک پوسته را
 * خاموش می‌کرد: اندازه‌گیری‌شده ۱۹px → ۱۷px.)
 *
 * ⚠ **ترتیب دو بلوکِ دسکتاپ و موبایل مهم است، و هر دو قانونِ شیت‌اند.** هیچ‌کدام
 * اینلاین نیست، چون اعلانِ اینلاین از هر قانونِ شیت قوی‌تر است — حتی داخل
 * `@media` — و آن‌وقت هر override موبایل مرده می‌شود.
 *
 * ⚠ کلاس پایه در قانون‌های مقدار‌دار **عمداً تکرار شده** تا specificity برابر (۰,۲,۰)
 * شود؛ با یک کلاس (۰,۱,۰)، قانون‌های خود پوسته مثل `.entry-content p` (۰,۱,۱)
 * برنده می‌شدند.
 */

.alef-info-box {
	position: relative;
}

.alef-info-box__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ib-media-gap, 10px);
	height: 100%;
	color: inherit;
	text-decoration: none;
	background: var(--ib-bg, transparent);
	border-style: solid;
	border-width: 0;
	border-color: var(--ib-border-c, transparent);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* چیدمان افقی — معادل `kt-blocks-info-box-media-align-left/right` کدنس.
   ⚠ **`__body` باید `flex-grow` بگیرد.** بدونش، ستونِ متن فقط به‌اندازه‌ی
   محتوای خودش جمع می‌شود و فضای خالیِ سمتِ رسانه رها می‌ماند — متنی که در
   کدنس یک‌خط جا می‌شد، همین‌جا زودتر از موعد به خط بعد می‌رفت (اندازه‌گیری‌شده
   روی کارتِ «LC» سایدبار ۱۵۹۵: عرضِ واقعیِ متن ۲۴۰px به‌جای ۲۸۰px). عمودی
   (پیش‌فرض بدون این کلاس‌ها) دست‌نخورده می‌ماند چون آنجا رشد در جهتِ ستون
   معنایی ندارد. */
.alef-info-box--horizontal > .alef-info-box__inner > .alef-info-box__body {
	flex: 1 1 auto;
}

.alef-info-box--horizontal > .alef-info-box__inner {
	flex-direction: row;
	/* ⚠ پیش‌فرض `center` است، نه `flex-start` — قانونِ خودِ کدنس:
	   `.wp-block-kadence-infobox .kt-blocks-info-box-media-align-left{align-items:center}`.
	   `--ib-valign` فقط وقتی مقدار دارد که کارت `mediaVAlign` صریح داشته باشد
	   (کلاسِ `kb-info-box-vertical-media-align-*` کدنس). */
	align-items: var(--ib-valign, center);
}

.alef-info-box--horizontal-reverse > .alef-info-box__inner {
	flex-direction: row-reverse;
	align-items: var(--ib-valign, center);
}

/* ⚠ **چیدمان عمودی: رسانه باید به‌اندازه‌ی محتوای خودش باشد، نه کل عرض کارت.**
   والدش (`__inner`) فلکس-ستونی است؛ بدون این، `align-items` پیش‌فرض (`stretch`)
   عرض آیکون را به عرض کل کارت می‌کشد (اندازه‌گیری‌شده: ۷۰px → ۲۰۲px). کدنس آیکون را
   `inline-block` می‌گذارد که خودش را به محتوا جمع می‌کند. `horizontal`/`horizontal-reverse`
   عمداً مستثنا هستند چون آنجا `align-items: var(--ib-valign)` روی والد همین کار را
   می‌کند و این قانون رویش می‌نشیند. */
.alef-info-box:not(.alef-info-box--horizontal):not(.alef-info-box--horizontal-reverse) > .alef-info-box__inner > .alef-info-box__media {
	align-self: center;
}

.alef-info-box__media {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ib-media-bg, transparent);
	border-radius: var(--ib-media-r, 0);
	padding: var(--ib-media-pad, 0);
	/* ⚠ کدنس فاصله‌ی رسانه↔متن را با `margin` روی خودِ رسانه می‌سازد، نه با `gap`
	   روی ظرف — و گاهی منفی (کارتِ «تماس مستقیم»: `0 50px 0 -5px`). بدونِ این،
	   مهاجرت آیکون را روی متن می‌انداخت. */
	margin: var(--ib-media-mar, 0);
}

.alef-info-box__img {
	display: block;
	height: auto;
	max-width: 100%;
}

.alef-info-box__icon {
	display: inline-flex;
	color: var(--ib-icon-c, currentColor);
	line-height: 0;
}

.alef-info-box__icon svg {
	width: var(--ib-icon-size, 1em);
	height: var(--ib-icon-size, 1em);
	display: block;
}

.alef-info-box__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	line-height: 1;
}

.alef-info-box__body {
	min-width: 0;
}

/* ⚠ **`margin: 10px 0` عمدی است و از شیتِ پایه‌ی کدنس می‌آید.** بدونِ آن، هر
   کارت دقیقاً ۲۰px کوتاه‌تر می‌شود (اندازه‌گیری‌شده: ۳۲px در برابر ۵۲px) و تمامِ
   صفحه بالا می‌لغزد. */
.alef-info-box .alef-info-box__body .alef-info-box__title {
	color: var(--ib-title-c, inherit);
	margin-top: 10px;
	margin-bottom: 10px;
}

.alef-info-box__text {
	color: var(--ib-text-c, inherit);
}

.alef-info-box__more {
	display: inline-block;
}

/* ── مقدارهای دسکتاپ ─────────────────────────────────────────────────────── */
.alef-info-box.alef-info-box--align    { text-align: var(--ib-align); }
.alef-info-box.alef-info-box--pad > .alef-info-box__inner { padding: var(--ib-pad); }
/* ⚠ **مارجین روی `__inner` می‌نشیند، نه روی ریشه — عمدی است.** کدنس هم دقیقاً
   همین کار را می‌کند (CSSِ اینلاینِ هر بلوک روی `.kt-blocks-info-box-link-wrap`
   چاپ می‌شود، نه روی `.wp-block-kadence-infobox`). اگر روی ریشه بگذاری،
   قانونِ صفرکردنِ مارجینِ ستونِ فلکسِ `alef/section`
   (`.alef-section__col--flex.alef-section__col--flex > *`) — که آن هم (۰,۲,۰) است
   و دیرتر در پک می‌آید — مارجینِ عمودی را می‌خورد و کارت‌ها بهم می‌چسبند.
   کدنس این مشکل را ندارد چون مارجینش یک سطح عمیق‌تر از `> *` است. پدینگ هم
   از قبل روی همین `__inner` بود، پس این دو حالا هم‌جا هستند. */
.alef-info-box.alef-info-box--mar > .alef-info-box__inner { margin: var(--ib-mar); }
.alef-info-box.alef-info-box--r > .alef-info-box__inner   { border-radius: var(--ib-radius); }
.alef-info-box.alef-info-box--bw > .alef-info-box__inner  { border-width: var(--ib-border-w); }
.alef-info-box.alef-info-box--tfs .alef-info-box__title   { font-size: var(--ib-title-fs); }
.alef-info-box.alef-info-box--xfs .alef-info-box__text    { font-size: var(--ib-text-fs); }
.alef-info-box.alef-info-box--tfw .alef-info-box__title   { font-weight: var(--ib-title-fw); }
.alef-info-box.alef-info-box--xfw .alef-info-box__text    { font-weight: var(--ib-text-fw); }
/* پدینگ/مارجینِ صریح بر `margin: 10px 0`ِ پیش‌فرضِ عنوان (بالاتر) می‌نشیند —
   کلاس پایه تکرار شده تا وزنش (۰,۲,۱) از آن قانون بیشتر باشد. */
.alef-info-box.alef-info-box--tpad .alef-info-box__title  { padding: var(--ib-title-pad); }
.alef-info-box.alef-info-box--tmar .alef-info-box__title  { margin: var(--ib-title-mar); }
.alef-info-box.alef-info-box--xpad .alef-info-box__text   { padding: var(--ib-text-pad); }
.alef-info-box.alef-info-box--xmar .alef-info-box__text   { margin: var(--ib-text-mar); }

/* ── حالت hover: فقط وقتی مقداری هست ─────────────────────────────────────── */
.alef-info-box__inner:hover { background: var(--ib-bg-h, var(--ib-bg, transparent)); }
.alef-info-box__inner:hover .alef-info-box__title { color: var(--ib-title-c-h, var(--ib-title-c, inherit)); }
.alef-info-box__inner:hover .alef-info-box__text  { color: var(--ib-text-c-h, var(--ib-text-c, inherit)); }

/* ── موبایل: همان قانون‌ها، بعد از بلوک دسکتاپ ───────────────────────────── */
@media (max-width: 767px) {
	.alef-info-box.alef-info-box--align-m  { text-align: var(--ib-align-m); }
	.alef-info-box.alef-info-box--pad-m > .alef-info-box__inner { padding: var(--ib-pad-m); }
	.alef-info-box.alef-info-box--mar-m > .alef-info-box__inner { margin: var(--ib-mar-m); }
	.alef-info-box.alef-info-box--r-m > .alef-info-box__inner   { border-radius: var(--ib-radius-m); }
	.alef-info-box.alef-info-box--bw-m > .alef-info-box__inner  { border-width: var(--ib-border-w-m); }
	.alef-info-box.alef-info-box--tfs-m .alef-info-box__title   { font-size: var(--ib-title-fs-m); }
	.alef-info-box.alef-info-box--xfs-m .alef-info-box__text    { font-size: var(--ib-text-fs-m); }
}

/* --- key-facts --- */
.alef-key-facts {
	background: var(--alef-key-facts-bg, #f6f7f8);
	border-radius: 8px;
	padding: 20px 20px 20px 44px;
	margin: 0 0 24px;
}

/* وقتی این بلوک آخرین المنت محتوا باشد، قالب‌ها معمولا margin پایینی آخرین فرزند را
   صفر می‌کنند (در کیدنس: `.single-content ul:last-child`) و کادر می‌چسبد به فوتر.
   سلکتور با element+class نوشته شده تا specificity آن قانون را بدون !important ببرد. */
ul.alef-key-facts:last-child {
	margin-bottom: 40px;
}

.alef-key-facts li {
	margin-bottom: 10px;
	line-height: 1.8;
}

.alef-key-facts li:last-child {
	margin-bottom: 0;
}

.alef-key-facts cite {
	font-style: normal;
	color: #5c6971;
	font-size: 0.9em;
}

.alef-key-facts-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.alef-key-facts-editor__title {
	font-weight: 700;
	margin: 0 0 10px;
}

/* --- list --- */
/*
 * alef/list
 * همه‌ی مقادیر ظاهری توکن‌اند (Alef_Blocks\Styles) با fallback خنثی.
 *
 * ── مسئله‌ای که این بلوک حل می‌کند ──────────────────────────────────────────
 * core/list فاصله‌ی بین آیتم‌ها را به پوسته واگذار می‌کند و پوسته‌ی سایت آن را
 * تقریباً صفر می‌گذارد؛ نتیجه در متن فارسی (که ارتفاع خط بیشتری لازم دارد) یک
 * توده‌ی فشرده‌ی غیرقابل‌اسکن است. اینجا فاصله‌ی بین آیتم‌ها یک توکن مستقل با
 * پیش‌فرض سخاوتمندانه (۱۰px) است، جدا از line-height داخل خود آیتم.
 */

.alef-list {
	margin: 0 0 24px;
	padding-inline-start: var(--alef-list-indent, 22px);
	line-height: var(--alef-list-line-height, 1.9);
	list-style-type: var(--alef-list-marker-style, disc);
}

/*
 * فهرست شماره‌دار توکن نشانه‌ی خودش را دارد، وگرنه انتخاب «دایره» برای
 * فهرست‌های نقطه‌ای، شماره‌ها را هم به دایره تبدیل می‌کرد.
 * `persian` یکی از counter-style های استاندارد CSS است: ۱، ۲، ۳ … .
 */
ol.alef-list {
	list-style-type: var(--alef-list-marker-style-ordered, decimal);
}

/*
 * فاصله‌ی نشانه تا متن: با list-style-position: outside، نشانه بیرونِ لبه‌ی
 * border-box آیتم قرار می‌گیرد؛ پس padding خودِ <li> دقیقاً همان فاصله را باز
 * می‌کند و تورفتگی آویزان (hanging indent) خطوط بعدی هم حفظ می‌شود.
 */
.alef-list > li {
	padding-inline-start: var(--alef-list-marker-gap, 4px);
}

.alef-list > li + li {
	margin-block-start: var(--alef-list-item-gap, 10px);
}

.alef-list > li::marker {
	color: var(--alef-list-marker-color, inherit);
	font-size: var(--alef-list-marker-size, 1em);
}

/* فهرست تودرتو نباید فاصله‌ی بیرونی بلوک را دوباره بگیرد. */
.alef-list .alef-list {
	margin-block: var(--alef-list-item-gap, 10px) 0;
}

.alef-list-editor__row {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin-bottom: 6px;
}

.alef-list-editor__row .components-base-control {
	flex: 1 1 auto;
	margin-bottom: 0;
}

/* --- marquee-gallery --- */
/**
 * alef/marquee-gallery — مارکی بی‌نهایت با CSS خالص.
 *
 * تکنیک: دو کپی یکسان از تصاویر داخل یک track با width:max-content؛
 * translateX(0 → -50%) دقیقاً یک «کپی» جابه‌جا می‌شود پس loop بی‌درز است.
 * نکته‌ی ریاضی: فاصله‌ها با margin-right روی هر آیتم اعمال می‌شوند نه gap فلکس —
 * با gap، عرض کل = 2×کپی + (2n-1)×gap می‌شد و -50% نصفِ gap خطا داشت (پرش مرئی).
 * direction:ltr عمدی است (سایت RTL است) تا جهت translateX پایدار بماند.
 */
.alef-marquee {
	overflow: hidden;
	direction: ltr;
	container-type: inline-size;
}

.alef-marquee__track {
	display: flex;
	width: max-content;
	animation: alef-marquee var(--am-speed, 30s) linear infinite;
}

.alef-marquee__item {
	--am-items: var(--am-items-d, 6);
	--am-g: var(--am-gap, 66px);
	flex: 0 0 auto;
	box-sizing: border-box;
	width: calc((100cqw - var(--am-items) * var(--am-g)) / var(--am-items));
	aspect-ratio: 1;
	margin: 0 var(--am-g) 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.alef-marquee__item img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.alef-marquee--circle .alef-marquee__item img {
	border-radius: 50%;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.alef-marquee__item {
		--am-items: var(--am-items-t, 4);
	}
}

@media (max-width: 767px) {
	.alef-marquee__item {
		--am-items: var(--am-items-m, 3);
		--am-g: var(--am-gap-m, 20px);
	}
}

@keyframes alef-marquee {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

/* دسترس‌پذیری + deterministic بودن QA بصری (qa-visual با reducedMotion اجرا می‌شود) */
@media (prefers-reduced-motion: reduce) {
	.alef-marquee__track {
		animation: none;
	}
}

/* پیش‌نمایش ساده و ثابت در ویرایشگر (بدون انیمیشن) */
.alef-marquee-editor-preview {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
}
.alef-marquee-editor-preview img {
	width: 90px;
	height: 90px;
	object-fit: contain;
	background: #f6f7f7;
	border-radius: 4px;
}
.alef-marquee-editor-preview--circle img {
	border-radius: 50%;
	object-fit: cover;
}

/* --- modal --- */
/**
 * alef/modal — مودال بر پایه‌ی <dialog> بومی.
 *
 * چرا <dialog>: در top-layer مرورگر رندر می‌شود (بالای همه‌چیز، بدون هیچ z-index)،
 * Escape و focus-trap بومی دارد، و ::backdrop خودش overlay است — یعنی کل ماشین
 * z-index/overlay/aria مودال قدیمی (کدنس پرو، 18KB) حذف می‌شود.
 * قفل اسکرول بدنه هم CSS خالص است: body:has([open]).
 */
dialog.alef-modal {
	border: none;
	padding: 0;
	background: transparent;
	width: 100%;
	max-width: min(var(--am-maxw, 640px), 92vw);
	overflow: visible;
}

dialog.alef-modal::backdrop {
	background: rgba(0, 0, 0, var(--am-overlay, 0.6));
}

.alef-modal__content {
	background: var(--am-bg, var(--global-palette9, #fff));
	border: var(--am-bw, 0) solid var(--am-bc, transparent);
	border-radius: var(--am-br, 0);
	padding: var(--am-pad, 16px);
	max-height: 85dvh;
	overflow: auto;
}

/* جای‌گذاری عمودی — dialog با margin خودکار وسط است؛ top/bottom با margin override */
dialog.alef-modal--top {
	margin-top: 6dvh;
	margin-bottom: auto;
}

dialog.alef-modal--bottom {
	margin-bottom: 0;
	margin-top: auto;
	max-width: 100vw;
}

dialog.alef-modal--bottom .alef-modal__content {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	max-height: 90dvh;
}

.alef-modal__close {
	position: absolute;
	top: 8px;
	inset-inline-end: 8px;
	z-index: 1;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--am-close-color, currentColor);
	padding: 0;
}

.alef-modal__close--outside {
	top: -44px;
	inset-inline-end: 0;
	color: var(--am-close-color, #fff);
}

.alef-modal__close svg {
	width: 24px;
	height: 24px;
}

/* قفل اسکرول صفحه وقتی مودالی باز است — CSS خالص، بدون JS */
body:has(dialog.alef-modal[open]) {
	overflow: hidden;
}

/* انیمیشن ورود fade-up */
dialog.alef-modal[open] {
	animation: alef-modal-in 0.25s ease-out;
}

dialog.alef-modal[open]::backdrop {
	animation: alef-modal-backdrop-in 0.25s ease-out;
}

@keyframes alef-modal-in {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes alef-modal-backdrop-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	dialog.alef-modal[open],
	dialog.alef-modal[open]::backdrop {
		animation: none;
	}
}

/* پیش‌نمایش ادیتور: dialog باز نمی‌شود، یک قاب ساده نشان بده */
.alef-modal-editor-preview {
	border: 1px dashed #999;
	border-radius: 6px;
	padding: 12px;
}
.alef-modal-editor-preview > .alef-modal-editor-label {
	font-size: 11px;
	color: #757575;
	margin-bottom: 8px;
}

/* --- quick-answer --- */
/* alef/quick-answer — همه‌ی مقادیر ظاهری توکن‌اند (Alef_Blocks\Styles). */

.alef-quick-answer {
	background: var(--alef-quick-answer-bg, #f4f2f8);
	border-inline-start: var(--alef-quick-answer-bar-width, 4px) solid var(--alef-quick-answer-bar-color, var(--alef-accent, #7c3aed));
	border-radius: var(--alef-quick-answer-radius, 8px);
	padding: 16px 20px;
	margin: 0 0 24px;
	color: var(--alef-quick-answer-text-color, inherit);
}

.alef-quick-answer p {
	margin: 0;
	font-size: var(--alef-quick-answer-font-size, 1.05em);
	line-height: 1.9;
}

/* --- quote --- */
/*
 * alef/quote — جمله‌ی برجسته (pull) و نقل‌قول با انتساب (cite).
 *
 * ── چرا طراحی اول دور ریخته شد ─────────────────────────────────────────────
 * نسخه‌ی اول یک کادر با پس‌زمینه‌ی خاکستری و نوار کناری بود — یعنی دقیقاً همان
 * زبان بصریِ `alef/callout`، `alef/quick-answer` و `alef/key-facts`. در یک
 * مقاله‌ی پر از کادر، یک کادر دیگر «برجسته» نیست؛ نامرئی است. مالک درست گفت که
 * اصلاً متوجه وجودش نشده.
 *
 * ── طراحی فعلی ─────────────────────────────────────────────────────────────
 * برجستگی از **تایپوگرافی** می‌آید نه از کادر:
 *   • بدون پس‌زمینه و بدون قاب — روی زمینه‌ی خودِ مقاله می‌نشیند
 *   • متن بزرگ‌تر با ارتفاع خط بازتر: یک «تنفس» در دیوار متن
 *   • یک گیومه‌ی بزرگِ تزئینی در پس‌زمینه با شفافیت کم
 *   • یک خط کوتاه و ضخیم بالای متن به‌عنوان امضای بصری (نه یک قاب کامل)
 * نتیجه: در اسکرول سریع فوراً از پاراگراف عادی جدا دیده می‌شود، ولی با
 * کادرهای اطلاعاتی اشتباه گرفته نمی‌شود چون شکل کادر ندارد.
 *
 * همه‌ی فاصله‌ها منطقی‌اند (inline-start/end) تا RTL و LTR هر دو درست باشند.
 */

.alef-quote {
	position: relative;
	margin: 40px 0;
	padding: 0;
	border: 0;
	background: none;
}

/* امضای بصری: خط کوتاه و ضخیم بالای نقل‌قول. */
.alef-quote::after {
	content: "";
	display: block;
	inline-size: var(--alef-quote-rule-width, 56px);
	block-size: var(--alef-quote-rule-height, 3px);
	background: var(--alef-quote-rule-color, var(--alef-accent, #7c3aed));
	border-radius: 3px;
	margin-block-end: 18px;
	order: -1;
}

.alef-quote {
	display: flex;
	flex-direction: column;
}

/* گیومه‌ی تزئینی — بزرگ، کم‌رنگ، پشت متن. */
.alef-quote::before {
	content: "”";
	position: absolute;
	inset-block-start: var(--alef-quote-mark-top, -28px);
	inset-inline-start: var(--alef-quote-mark-inset, -8px);
	font-family: Georgia, "Times New Roman", serif;
	font-size: var(--alef-quote-mark-size, 120px);
	line-height: 1;
	color: var(--alef-quote-mark-color, currentColor);
	opacity: var(--alef-quote-mark-opacity, 0.07);
	pointer-events: none;
	user-select: none;
	z-index: 0;
}

.alef-quote__body {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-size: var(--alef-quote-text-size, 1.28em);
	line-height: var(--alef-quote-line-height, 2);
	font-weight: var(--alef-quote-text-weight, 600);
	color: var(--alef-quote-text-color, inherit);
	letter-spacing: -0.01em;
}

.alef-quote__body > :first-child { margin-top: 0; }
.alef-quote__body > :last-child { margin-bottom: 0; }

.alef-quote__cite {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 10px;
	margin-block-start: 16px;
	font-size: var(--alef-quote-cite-size, 0.82em);
	font-weight: 400;
	line-height: 1.8;
	color: var(--alef-quote-cite-color, #5c6971);
}

.alef-quote__cite::before {
	content: "";
	inline-size: 18px;
	block-size: 1px;
	background: currentColor;
	opacity: 0.5;
	align-self: center;
}

.alef-quote__name {
	font-style: normal;
	font-weight: 700;
	color: var(--alef-quote-name-color, inherit);
}

.alef-quote__link { text-decoration: none; }
.alef-quote__link:hover .alef-quote__name,
.alef-quote__link:focus-visible .alef-quote__name {
	text-decoration: underline;
}

.alef-quote__role { opacity: 0.9; }

/*
 * حالت pull: جمله‌ای از خودِ مقاله. بزرگ‌تر و بدون انتساب.
 * حالت cite: نقل‌قول از بیرون — کمی کوچک‌تر، چون انتساب هم زیرش می‌آید.
 */
.alef-quote--pull .alef-quote__body {
	font-size: var(--alef-quote-pull-text-size, 1.42em);
}

.alef-quote--cite .alef-quote__body {
	font-weight: var(--alef-quote-cite-text-weight, 500);
}

@media (max-width: 640px) {
	.alef-quote { margin: 32px 0; }
	.alef-quote::before {
		font-size: calc(var(--alef-quote-mark-size, 120px) * 0.6);
		inset-block-start: -18px;
	}
	.alef-quote--pull .alef-quote__body {
		font-size: var(--alef-quote-pull-text-size-mobile, 1.18em);
	}
	.alef-quote--cite .alef-quote__body { font-size: 1.1em; }
}

/* --- reels --- */
/**
 * alef/reels — نوار استوری + پخش‌کننده‌ی تمام‌صفحه.
 * نوار تامبنیل کاملاً CSS است (flex + overflow-x + scroll-snap)؛ فقط پخش‌کننده
 * به view.js (چند خط vanilla) نیاز دارد. رنگ برند از --ar-accent (attribute بلاک).
 * direction:ltr روی نوار عمدی است تا ترتیب استوری‌ها با ترتیب سگمنت‌های progress
 * در پخش‌کننده یکی بماند (سایت RTL است).
 *
 * دکمه‌ها (ctrl/close/nav) عمداً padding/transition/appearance صریح دارند —
 * سایت یک استایل global قدیمی و بیش‌ازحد گسترده دارد (`select, button {...}`،
 * از یک ویجت فرم دیگر، بدون scope) که روی بک‌گراند/پدینگ/ترنزیشن هر <button>ی
 * از جمله این‌ها اثر می‌گذاشت (دکمه‌های بیضی، آیکون سفید روی پس‌زمینه‌ی نزدیک‌به‌سفید
 * نامرئی، فلیکر روی hover). class-selector ما روی width/background/border-radius
 * به‌خاطر specificity برنده بود ولی روی padding/transition چیزی ست نکرده بودیم
 * پس به آن استایل global می‌افتاد — اینجا صریح می‌بندیمشان.
 */
.alef-reels__strip {
	list-style: none;
	display: flex;
	gap: 16px;
	margin: 0;
	padding: 4px;
	overflow-x: auto;
	overflow-y: visible;
	direction: ltr;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	-ms-overflow-style: none;
	touch-action: pan-x;
}

.alef-reels__strip::-webkit-scrollbar {
	display: none;
}

@media (pointer: fine) {
	.alef-reels__strip {
		cursor: grab;
		user-select: none;
	}

	/* بالاتر از cursor:pointer خودِ thumb (هر دو specificity برابر دارند، این باید
	   دومی/برنده بماند) — می‌خواهیم روی کل نوار، حتی روی خودِ thumb ها، دستِ درگ
	   بماند، نه اشاره‌گر لینک/سلکت. */
	.alef-reels__strip .alef-reels__thumb,
	.alef-reels__strip .alef-reels__thumb img {
		cursor: inherit;
	}

	.alef-reels__strip.is-dragging {
		cursor: grabbing;
		scroll-snap-type: none;
	}
}

.alef-reels__strip li {
	flex: 0 0 auto;
	scroll-snap-align: start;
	margin: 0;
}

.alef-reels__thumb {
	position: relative;
	display: block;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	/* استایل global قدیمی سایت روی hover یک box-shadow قرمز ۳۰px-بلور به هر
	   <button>ی تزریق می‌کند که چون نوار ارتفاعش تنگ است (overflow) بریده می‌شود
	   و به‌جای محو نرم، لبه‌ی بریده‌شده نشان می‌دهد — عمداً خاموشش می‌کنیم. */
	box-shadow: none !important;
}

.alef-reels__views {
	position: absolute;
	bottom: 6px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 1px 7px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.65);
	color: #fff;
	font-size: 10px;
	line-height: 1.6;
	white-space: nowrap;
	pointer-events: none;
}

.alef-reels__views-icon {
	width: 10px;
	height: 10px;
	fill: currentColor;
	flex: none;
}

.alef-reels__thumb img {
	display: block;
	width: 98px;
	height: 98px;
	object-fit: cover;
	border-radius: 50%;
	/* بدون این، مرورگر روی mousedown+move خودِ <img> عکس را «drag-out» می‌کند
	   (native image drag) و باعث می‌شود اسکرول-با-درگ فقط در فاصله‌ی خالی بین
	   استوری‌ها کار کند، نه روی خودِ دایره‌ها. */
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-user-select: none;
	user-select: none;
	/* حلقه‌ی دور thumb (سبک استوری). پیش‌فرض = طیف چندرنگ اینستاگرام.
	   چرا این تکنیک و نه `border: Npx solid <رنگ>`: حاشیه‌ی ساده گرادیان نمی‌گیرد.
	   پس حاشیه **شفاف** می‌شود و دو لایه پس‌زمینه می‌گذاریم — لایه‌ی توپرِ
	   `padding-box` فاصله‌ی سفید بین حلقه و تصویر را می‌سازد، و گرادیانِ
	   `border-box` از زیرِ حاشیه‌ی شفاف بیرون می‌زند و خودِ حلقه می‌شود. با
	   border-radius:50% هم درست کار می‌کند، برخلاف راه‌حل‌های مبتنی بر
	   border-image. هندسه دقیقا مثل قبل است (۴px حلقه + ۳px فاصله).
	   قابل تنظیم از: الف → Blocks → ظاهر بلوک‌ها → «ریلز / استوری». */
	border: var(--alef-reels-ring-width, 4px) solid transparent;
	padding: var(--alef-reels-ring-gap, 3px);
	background:
		linear-gradient(var(--alef-reels-ring-gap-color, #ffffff), var(--alef-reels-ring-gap-color, #ffffff)) padding-box,
		var(--alef-reels-ring, conic-gradient(from 215deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #feda75)) border-box;
	transition: transform 0.2s ease;
}

.alef-reels__thumb:hover img,
.alef-reels__thumb:focus-visible img {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.alef-reels__thumb img {
		transition: none;
	}
	.alef-reels__thumb:hover img {
		transform: none;
	}
}

/* -- پخش‌کننده (کلون <template>، توسط view.js به body وصل می‌شود) -------- */

.alef-reels__viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, 0.92);
	display: flex;
	align-items: center;
	justify-content: center;
	direction: ltr;
}

.alef-reels__stage {
	position: relative;
	width: min(92vw, 56vh);
	aspect-ratio: 9 / 16;
	max-height: 92vh;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
}

.alef-reels__stage video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.alef-reels__progress {
	position: absolute;
	top: 8px;
	left: 8px;
	right: 8px;
	display: flex;
	gap: 4px;
	z-index: 2;
}

.alef-reels__seg {
	flex: 1;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.35);
	overflow: hidden;
}

.alef-reels__seg-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left;
}

.alef-reels__seg.is-done .alef-reels__seg-fill {
	transform: scaleX(1);
}

.alef-reels__seg.is-active .alef-reels__seg-fill {
	animation: alef-reels-progress var(--dur, 5s) linear forwards;
}

/* موقع پاز شدن ویدیو (کلیک روی ویدیو یا دکمه‌ی پخش/توقف)، انیمیشن progress هم
   باید بایستد وگرنه سگمنت زودتر از ویدیوی واقعی تمام می‌شود. */
.alef-reels__viewer.is-paused .alef-reels__seg.is-active .alef-reels__seg-fill {
	animation-play-state: paused;
}

@keyframes alef-reels-progress {
	to { transform: scaleX(1); }
}

.alef-reels__title {
	position: absolute;
	top: 20px;
	left: 12px;
	right: 12px;
	z-index: 2;
	color: #fff;
	font-size: 13px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
	direction: rtl;
}

.alef-reels__close,
.alef-reels__nav {
	position: absolute;
	z-index: 3;
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: none;
}

.alef-reels__close:hover,
.alef-reels__nav:hover {
	box-shadow: none !important;
}

.alef-reels__close .alef-reels__icon,
.alef-reels__nav .alef-reels__icon {
	width: 20px;
	height: 20px;
}

.alef-reels__close {
	top: 12px;
	/* عمداً سمت چپ — عنوان استوری RTL است و از سمت راست پر می‌شود، پس دکمه‌ها
	   آن سمت روی متن عنوان می‌افتند. */
	left: 12px;
}

.alef-reels__nav {
	top: 50%;
	/* !important چون یک قانون global سایت روی hover/focus دکمه‌ها یک
	   transform «بالا رفتن» (lift effect) می‌گذارد که با transform مرکزکننده‌ی
	   عمودی ما تداخل می‌کند (یک ویژگی، آخری برنده — نه ترکیب‌شدنی) و باعث
	   می‌شود دکمه‌های ‹/› روی hover/click بپرند. */
	transform: translateY(-50%) !important;
}

.alef-reels__nav--prev { left: 8px; }
.alef-reels__nav--next { right: 8px; }

.alef-reels__nav[disabled] {
	opacity: 0.3;
	cursor: default;
}

/* گوشه‌ی بالا-چپ استیج: پخش/توقف + قطع/وصل صدا، کنار دکمه‌ی بستن — عمداً چپ،
   نه راست، چون عنوان RTL از سمت راست پر می‌شود (بالاتر توضیح داده شده). */
.alef-reels__controls {
	position: absolute;
	top: 12px;
	left: 60px;
	z-index: 3;
	display: flex;
	gap: 8px;
}

.alef-reels__ctrl {
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	padding: 0;
	box-sizing: border-box;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: none;
}

.alef-reels__ctrl:hover {
	box-shadow: none !important;
}

.alef-reels__icon {
	width: 16px;
	height: 16px;
	fill: currentColor;
}

.alef-reels__ctrl .alef-reels__icon--off { display: none; }

.alef-reels__viewer.is-paused .alef-reels__ctrl--play .alef-reels__icon--on { display: none; }
.alef-reels__viewer.is-paused .alef-reels__ctrl--play .alef-reels__icon--off { display: block; }

.alef-reels__ctrl--mute.is-muted .alef-reels__icon--on { display: none; }
.alef-reels__ctrl--mute.is-muted .alef-reels__icon--off { display: block; }

body.alef-reels-open {
	overflow: hidden;
}

/* پیش‌نمایش ویرایشگر */
.alef-reels-editor-note {
	border: 1px dashed #949494;
	border-radius: 6px;
	padding: 16px;
	background: #f6f7f7;
}

/* --- related-content --- */
/*
 * alef/related-content — دو حالت: تک‌خطی وسط متن، و فهرست انتهای مقاله.
 */

.alef-related--inline {
	background: var(--alef-related-inline-bg, #f7f7f8);
	border-inline-start: var(--alef-related-inline-bar-width, 3px) solid var(--alef-related-inline-bar-color, var(--alef-accent, #7c3aed));
	border-radius: var(--alef-related-radius, 6px);
	padding: var(--alef-related-inline-padding, 10px 14px);
	margin: 0 0 24px;
	line-height: 1.8;
}

.alef-related__label {
	font-weight: 700;
	color: var(--alef-related-label-color, inherit);
}

.alef-related--list {
	background: var(--alef-related-list-bg, transparent);
	border: var(--alef-related-list-border-width, 1px) solid var(--alef-related-list-border-color, #e3e6e8);
	border-radius: var(--alef-related-radius, 6px);
	padding: var(--alef-related-list-padding, 18px 20px);
	margin: 32px 0 24px;
}

.alef-related__title {
	font-weight: 700;
	font-size: var(--alef-related-title-size, 1em);
	color: var(--alef-related-title-color, inherit);
	margin: 0 0 12px;
}

.alef-related__list {
	margin: 0;
	padding-inline-start: var(--alef-related-indent, 20px);
	list-style: var(--alef-related-marker, disc);
}

.alef-related__item {
	margin: var(--alef-related-item-gap, 8px) 0;
	line-height: 1.7;
}

.alef-related a {
	color: var(--alef-related-link-color, var(--alef-accent, #7c3aed));
	text-decoration: none;
}

.alef-related a:hover,
.alef-related a:focus-visible {
	text-decoration: underline;
}

.alef-related-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.alef-related-editor__hint {
	margin: 10px 0 0;
	opacity: 0.7;
	font-size: 0.9em;
}

/* --- section --- */
/**
 * alef/section + alef/section-column — چیدمان چندستونه با گرید بومی.
 *
 * ⚠ **قرارداد نامذاکره‌پذیر این بلوک: هیچ `<style>` ای به‌ازای هر نمونه چاپ
 * نمی‌شود.** همه‌ی مقدارها متغیر CSS اینلاین روی خودِ عنصرند و این شیت ثابت
 * مصرفشان می‌کند. دلیلش عدد است، نه سلیقه: بلوک متناظر کدنس به‌ازای هر نمونه یک
 * سلکتور یکتا تولید و اینلاین می‌کرد و همین باعث شده بود ۵۹.۷٪ حجم HTML سایت
 * `<style>` باشد (`docs/reports/asset-baseline.md`). اگر روزی رندرکننده به چاپ
 * `<style>` رسید، کل دلیل وجود این بلوک از بین رفته است.
 *
 * نقطه‌های شکست **۱۰۲۴ و ۷۶۷** اند — دقیقاً مرز md/sm کدنس، تا صفحه‌ای که
 * مهاجرت می‌کند در هیچ عرضی تعداد ستونش عوض نشود.
 */

/* ⚠ **هر متغیری که این بلوک می‌خواند، اینجا مقدار پیش‌فرض می‌گیرد.** متغیرهای
   CSS **ارث می‌رسند**؛ پس سکشنی که داخل سکشن دیگری است، هر متغیرِ اعلام‌نشده را
   از والد به ارث می‌برد و `var(--x, fallback)` هرگز به fallback نمی‌رسد.
   روی صفحه‌ی «ارتباط با ما» ردیف تودرتو padding والد را ارث برد و عرض محتوایش
   از ۴۹۸ به ۲۸۴ افتاد. اعلام صریح، ارث را قطع می‌کند.
   **هر متغیر تازه‌ای که اضافه کردی، اینجا هم پیش‌فرضش را بگذار.** */
.alef-section {
	--as-cols: 1;
	--as-cols-t: var(--as-cols);
	--as-cols-m: 1;
	--as-gap: 2rem;
	--as-gap-m: var(--as-gap);
	--as-colgap-m: var(--as-gap-m);
	--as-rowgap-m: var(--as-gap-m);
	--as-tpl: repeat(var(--as-cols), minmax(0, 1fr));
	--as-tpl-t: repeat(var(--as-cols-t), minmax(0, 1fr));
	--as-pad: 0;
	--as-pad-m: var(--as-pad);
	--as-mar: 0;
	--as-mar-m: var(--as-mar);
	--as-bg: transparent;
	--as-bw: 0;
	--as-bc: transparent;
	--as-br: 0;
	--as-maxw: none;
	--as-minh: auto;
	--as-ov: 0;
	--as-ov-color: #000;
	--as-z: auto;
	--as-edge-pad: 0;
	position: relative;
	margin: var(--as-mar, 0);
	padding: var(--as-pad, 0);
	background-color: var(--as-bg, transparent);
	border: var(--as-bw, 0) solid var(--as-bc, transparent);
	border-radius: var(--as-br, 0);
	min-height: var(--as-minh, auto);
}

/* لایه فقط با opt-in — یک `z-index` بی‌دلیل روی هر سکشن یک stacking context تازه
   می‌سازد و می‌تواند چیزهای بالاتر (منو، مودال) را زیر خودش ببرد. */
.alef-section--has-z {
	z-index: var(--as-z, auto);
}

/* ⚠ تصویر پس‌زمینه اینجا **نیست** — خصوصیتِ اینلاینِ خودِ عنصر است. دلیلش در
   `class-section-block.php` مستند شده: `url()` داخل یک custom property نسبت به شیتی
   حل می‌شود که مصرفش می‌کند، و این شیت در `uploads/alef-blocks/` است. لایه‌ی جدا هم
   لازم نبود: پس‌زمینه‌ی خودِ عنصر زیر هر دو شبه‌عنصر می‌نشیند، پس overlay هنوز بین
   تصویر و محتوا قرار می‌گیرد. */
.alef-section--has-overlay::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.alef-section--has-overlay::after {
	background: var(--as-ov-color, #000);
	opacity: var(--as-ov, 0);
	z-index: 1;
}

/* ⚠ پس‌زمینه‌ی موبایل یک **لایه‌ی جدا** است، نه بازنویسیِ همان خصوصیت داخل
   media query — دلیلش هم مثل بالا: نمی‌تواند متغیر CSS باشد (url در اکسپورت
   می‌شکند)، و اینلاینِ واقعی را نمی‌شود پشتِ media query گذاشت. لایه‌اش پیش‌فرض
   مخفی است و فقط زیر ۷۶۸px روی پس‌زمینه‌ی دسکتاپ می‌نشیند. */
.alef-section__bg-m {
	display: none;
}

@media (max-width: 767px) {
	.alef-section--has-mobile-bg > .alef-section__bg-m {
		display: block;
		position: absolute;
		inset: 0;
		z-index: 0;
	}
}

.alef-section__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: var(--as-tpl, repeat(var(--as-cols), minmax(0, 1fr)));
	gap: var(--as-gap);
	max-width: var(--as-maxw, none);
	margin-inline: auto;
	width: 100%;
	/* معادل `.kt-row-has-bg > .kt-row-column-wrap` در شیت کدنس: ردیفی که
	   پس‌زمینه دارد نباید محتوایش به لبه بچسبد. پیش‌فرض صفر است تا سکشن‌های بدون
	   پس‌زمینه دست‌نخورده بمانند؛ مقدارش از اتریبیوت `edgePadding` می‌آید. */
	padding-inline: var(--as-edge-pad, 0);
}

@media (max-width: 1024px) {
	.alef-section__inner {
		grid-template-columns: var(--as-tpl-t, repeat(var(--as-cols-t), minmax(0, 1fr)));
	}
}

@media (max-width: 767px) {
	.alef-section__inner {
		grid-template-columns: repeat(var(--as-cols-m), minmax(0, 1fr));
		/* ⚠ روی موبایل، فاصله‌ی افقی و عمودی لزوماً یکی نیستند — ردیف
		   `1296_82d8b1-ae` روی موبایل `column-gap:0` و `row-gap:1rem` دارد
		   (خوانده‌شده از CSS تولیدشده). هر دو پیش‌فرض `--as-gap-m` می‌گیرند، پس
		   `gap` تکی هنوز مثل قبل کار می‌کند. */
		column-gap: var(--as-colgap-m);
		row-gap: var(--as-rowgap-m);
	}

	/* چیدمان `first-row` کدنس: **دو ستون، و آیتم اول تمام‌عرض.**
	   قانون خودِ کدنس `nth-child(3n+1 of *:not(style))` است؛ آن `of S` فقط لازم
	   بود چون کدنس `<style>` را کنار ستون‌ها چاپ می‌کند. این بلوک هیچ `<style>` ای
	   چاپ نمی‌کند (قرارداد بالای همین فایل)، پس `nth-child` ساده کافی است — و
	   پشتیبانی مرورگرش هم به‌مراتب گسترده‌تر است. */
	/* معادل `collapseOrder: right-to-left` کدنس: روی موبایل ستون دوم اول می‌آید.
	   کدنس این را با `order` روی `nth-child` می‌سازد؛ اینجا `flex-direction`
	   لازم نیست چون گرید تک‌ستونه است و `order` کافی است. */
	.alef-section--reverse-m > .alef-section__inner > *:nth-child(1) { order: 2; }
	.alef-section--reverse-m > .alef-section__inner > *:nth-child(2) { order: 1; }

	.alef-section--first-row-m > .alef-section__inner > *:nth-child(3n + 1) {
		grid-column: 1 / -1;
	}
	.alef-section {
		padding: var(--as-pad-m, var(--as-pad, 0));
		margin: var(--as-mar-m, var(--as-mar, 0));
	}
}

/* -- ستون -------------------------------------------------------------- */

/* ⚠ **پیش‌فرض `block` است، نه `flex`.** ستون کدنس هم `display:block` است
   (اندازه‌گیری‌شده). فلکس‌کردنِ بی‌قیدوشرط یک عارضه‌ی پنهان دارد: فرزندی که
   `margin-inline: auto` دارد در ظرف فلکس **کشیده نمی‌شود** (auto margin
   ترازِ stretch را خنثی می‌کند) و به عرض ذاتی‌اش می‌افتد. روی صفحه‌ی «ارتباط با
   ما» همین باعث شد نقشه‌ی گوگل از ۴۰۳px به ۳۰۰px (عرض ذاتی iframe) بیفتد و
   ارتفاع صفحه ۱۰٪ عوض شود. فلکس فقط وقتی روشن می‌شود که ستون واقعاً به آن
   نیاز داشته باشد. */
.alef-section__col {
	/* همان قاعده‌ی بالا: ستونِ تودرتو نباید متغیرهای ستون والد را ارث ببرد. */
	--asc-valign: flex-start;
	--asc-halign: stretch;
	--asc-gap: 0;
	--asc-span: 1;
	--asc-pad: 0;
	--asc-pad-m: var(--asc-pad);
	--asc-mar: 0;
	--asc-mar-m: var(--asc-mar);
	--asc-bg: transparent;
	--asc-bw: 0;
	--asc-bc: transparent;
	--asc-br: 0;
	--asc-sticky-top: 20px;
	--asc-minh: auto;
	display: block;
	grid-column: span var(--asc-span, 1);
	padding: var(--asc-pad, 0);
	margin: var(--asc-mar, 0);
	background-color: var(--asc-bg, transparent);
	border: var(--asc-bw, 0) solid var(--asc-bc, transparent);
	border-radius: var(--asc-br, 0);
	min-height: var(--asc-minh, auto);
	min-width: 0; /* بدون این، فرزندِ عریض (جدول) ستون گرید را می‌کشد */
}

/* ⚠ **`flow-root`، نه `block`.** ستونِ درونیِ کدنس (`.kt-inside-inner-col`) در عمل
   `display:flex` است و ظرفِ فلکس **مارجین فرزند را جمع نمی‌کند**؛ ستونِ `block`
   جمع می‌کند و مارجینِ بالا/پایینِ فرزند از ارتفاعش بیرون می‌زند.

   روی ردیف «مراحل خرید» صفحه‌ی اصلی همین اتفاق افتاد: کارت‌ها `margin-top:50px`
   و آیکونشان `margin-top:-75px` دارند؛ کارت‌ها **دقیقاً سرِ جای درست** رندر
   می‌شدند ولی ارتفاع سکشن ۵۵۷ → ۲۹۴ می‌شد و بخش بعدی ۲۶۰px بالا می‌آمد و
   رویشان می‌افتاد. (اندازه‌گیری‌شده؛ در دیفِ خودِ کارت‌ها صفر اختلاف بود — فقط
   جعبه‌ی والد کوتاه شده بود.)

   `flow-root` یک BFC می‌سازد و مارجین را نگه می‌دارد، ولی برخلاف `flex` چیدمانِ
   بلوکی را حفظ می‌کند — پس تله‌ی ثبت‌شده‌ی `margin-inline:auto` (نقشه‌ی گوگل که
   در ظرف فلکس از ۴۰۳ به ۳۰۰px افتاد) تکرار نمی‌شود. */
.alef-section__col {
	display: flow-root;
}

/* ⚠ **صفرکردن مارجینِ فرزند فقط برای ستونِ فلکس است، نه همه‌ی ستون‌ها.** کدنس
   این قانون را دقیقاً برای همان ستونی چاپ می‌کند که تراز (`justifyContent`) دارد —
   در کل صفحه‌ی اصلی، ۱ ستون از ۴۳. اول وسوسه‌کننده بود که برای همه‌ی ستون‌ها گذاشته
   شود، ولی آن یک تغییرِ نااندازه‌گیری‌شده روی هر ۶۱ صفحه بود. نبودش روی نوارِ چسبانِ
   فوتر ۱۵px به ارتفاع ستون اضافه می‌کرد و آیکون تلفن از نوار بیرون می‌زد. */
/* ⚠ کلاس عمداً تکرار شده تا specificity برابرِ (۰,۲,۰) شود — دقیقاً همان وزنی که
   قانونِ تولیدشده‌ی کدنس داشت (`.kadence-columnXXX > .kt-inside-inner-col > *`).
   با یک کلاس (۰,۱,۰) این قانون با قانونِ دست‌نویسِ خودِ سایت هم‌وزن می‌شد و چون آن
   دیرتر بار می‌شود، برنده می‌ماند و مارجین ۱۵px سرِ جایش.

   ⚠ **ماشه `--halign` است، نه `--flex`.** کدنس این reset را فقط برای ستونی چاپ
   می‌کند که `justifyContent` دارد — نه برای ستونی که فقط `verticalAlignment`
   دارد. ولی `--flex` وقتی هم اضافه می‌شود که فقط `valign` ست شده باشد، پس این
   قانون به ستون‌هایی می‌رسید که کدنس هرگز صفرشان نمی‌کرد و مارجینِ پیش‌فرضِ
   سرتیتر/پاراگرافِ داخلشان را می‌خورد: روی ۱۵۹۵ ستونِ `325ea8-b8` فقط
   `verticalAlignment:"middle"` دارد و در نسخه‌ی ۲۰۲۶-۰۸-۲۱ سرتیترش
   `margin-bottom:14px` و پاراگرافِ معرفی ۳۲px داشت — بعد از مهاجرت هر دو صفر
   شدند. `--halign` دقیقاً وقتی می‌آید که `justifyContent` مقدار دارد، یعنی
   همان شرطِ خودِ کدنس.
   `--flex-m` عمداً دست‌نخورده ماند: نوارِ چسبانِ فوترِ موبایل (المنت ۱۲۹۶) به
   رفتارِ فعلی‌اش وابسته است و آن ستون `justifyContent` موبایلی دارد. */
.alef-section__col--halign.alef-section__col--halign > *,
.alef-section__col--flex-m.alef-section__col--flex-m > *,
.alef-section__col--horizontal.alef-section__col--horizontal > *,
.alef-section__col--horizontal-reverse.alef-section__col--horizontal-reverse > * {
	margin-top: 0;
	margin-bottom: 0;
}

/* ⚠ **`var(--asc-valign, center)` به‌تنهایی امن نیست — متغیرهای CSS ارث می‌رسند.**
   اگر ستونِ والدی `--asc-valign` ست کرده باشد، ستونِ فرزند آن را به ارث می‌برد و
   fallbackِ داخل `var()` هرگز اجرا نمی‌شود. روی هدرِ سراسری دقیقاً همین شد: ستونِ
   افقیِ شماره‌تلفن هیچ `--asc-valign`ی نداشت ولی `flex-start` به ارث می‌برد، پس
   «تماس جهت مشاوره» و شماره از وسط‌چینِ عمودی درآمدند (اندازه‌گیری‌شده در برابر
   نسخه‌ی ۲۰۲۶-۰۸-۲۱: `align-items` از `center` به `flex-start` رفته بود).
   پس مقدارِ پیش‌فرض در خودِ قانون می‌آید و متغیر فقط پشتِ کلاسِ نگهبان خوانده
   می‌شود — همان الگوی `Props::gated` که بقیه‌ی بلوک‌ها دارند. */
.alef-section__col--flex {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: stretch;
}

.alef-section__col--horizontal {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}

.alef-section__col--horizontal-reverse {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-start;
}

/* ⚠ **فاصله برای هر سه چیدمانِ فلکس است، نه فقط `--flex`.** نسخه‌ی اول این اعلان
   را فقط داخل `.alef-section__col--flex` گذاشت؛ ستونِ هدر `--horizontal-reverse`
   است، پس `--asc-gap` چاپ می‌شد ولی هیچ‌جا خوانده نمی‌شد و «تماس جهت مشاوره» به
   آیکونِ تلفن می‌چسبید (اندازه‌گیری‌شده: فاصله‌ی ۶px در نسخه‌ی ۲۰۲۶-۰۸-۲۱ در برابر
   ‏−۱۰px، یعنی هم‌پوشانی).
   ردیف و ستون فاصله‌ی جدا دارند — کدنس روی همان ستون `row-gap:0` و
   `column-gap:1rem` داشت. وقتی `--asc-rowgap` ست نشده باشد همان `--asc-gap`
   می‌ماند، پس رفتارِ قبلی دست‌نخورده است. */
.alef-section__col--flex,
.alef-section__col--horizontal,
.alef-section__col--horizontal-reverse {
	gap: var(--asc-rowgap, var(--asc-gap, 0)) var(--asc-gap, 0);
}

/* همان دلیلِ `--asc-valign`: متغیر ارث می‌رسد، پس پیش‌فرض در قانون است و متغیر
   فقط پشتِ کلاسِ نگهبان خوانده می‌شود. */
.alef-section__col--flex.alef-section__col--halign {
	align-items: var(--asc-halign);
}

/* مقدارِ صریحِ خودِ بلوک — فقط با کلاسِ نگهبان، تا ارثِ ناخواسته دخالت نکند. */
.alef-section__col--flex.alef-section__col--valign {
	justify-content: var(--asc-valign);
}

.alef-section__col--horizontal.alef-section__col--valign,
.alef-section__col--horizontal-reverse.alef-section__col--valign {
	align-items: var(--asc-valign);
}

.alef-section__col--horizontal.alef-section__col--halign,
.alef-section__col--horizontal-reverse.alef-section__col--halign {
	justify-content: var(--asc-halign);
}

.alef-section__col--sticky {
	position: sticky;
	top: var(--asc-sticky-top, 20px);
	align-self: start;
}

/* ⚠ پشت کلاس نگهبان، چون `text-align` ارث‌بر است: اعلانِ بی‌مقدار روی ستونی که
   چیزی تنظیم نکرده، ترازِ ارث‌رسیده از والد را خاموش می‌کند. */
.alef-section__col--ta {
	text-align: var(--asc-ta);
}

/* لینک‌دار: کل ستون کلیک‌پذیر، بدون تغییر در ظاهر متن. */
a.alef-section__col {
	color: inherit;
	text-decoration: none;
}

@media (max-width: 767px) {
	.alef-section__col {
		padding: var(--asc-pad-m, var(--asc-pad, 0));
		margin: var(--asc-mar-m, var(--asc-mar, 0));
	}

	/* ⚠ **تراز فقط-موبایل باید کلاس باشد، نه متغیر.** کدنس `justifyContent` را
	   ریسپانسیو ذخیره می‌کند (`["","","center"]`) و در آن نقطه جعبه‌ی درونیِ
	   ستون را فلکس می‌کند. اگر اینجا فقط متغیر عوض شود، ستون در موبایل همچنان
	   `flow-root` می‌ماند و فرزندِ `inline-block` هم فاصله‌ی خط پایه می‌گیرد و هم
	   مارجین عمودی‌اش را نگه می‌دارد — روی نوارِ چسبانِ فوتر ۱۹px بلندتر می‌شد و
	   آیکون تلفن از نوار بیرون می‌زد. */
	.alef-section__col--flex-m {
		display: flex;
		flex-direction: column;
		justify-content: var(--asc-valign-m, var(--asc-valign, flex-start));
		align-items: var(--asc-halign-m, var(--asc-halign, stretch));
		gap: var(--asc-gap-m, var(--asc-gap, 0));
	}
}

/* پنهان‌سازی در هر نقطه‌ی شکست — معادل `kvs-*` کدنس. */
@media (min-width: 1025px) {
	.alef-section__col--hide-d { display: none; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.alef-section__col--hide-t { display: none; }
}
@media (max-width: 767px) {
	.alef-section__col--hide-m { display: none; }
}

/* پیش‌نمایش ویرایشگر */
.alef-section-editor-label {
	font-size: 11px;
	color: #757575;
	margin-bottom: 6px;
}

/* --- show-more --- */
/**
 * alef/show-more — بریدن محتوای بلند + دکمه‌ی باز/بسته. CSS خالص، صفر جاوااسکریپت.
 *
 * وضعیت روی یک چک‌باکس مخفی نگه داشته می‌شود و با سلکتور همزاد (~) به محتوا و دکمه‌ها
 * می‌رسد. به همین دلیل ترتیب مارک‌آپ اجباری است: input → content → actions.
 *
 * رنگ‌ها از توکن‌های مرکزی می‌آیند و fallbackها **خنثی**اند، نه رنگ برند هیچ سایتی
 * (قاعده‌ی خانواده‌ی الف). سایتی که توکن ست نکرده، یک دکمه‌ی خاکستری تمیز می‌گیرد.
 */
.alef-showmore {
	display: block;
}

/* چک‌باکس نباید دیده شود ولی باید فوکوس‌پذیر بماند — پس display:none ممنوع. */
.alef-showmore__state {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * بریدن با overflow:hidden انجام می‌شود، نه display:none — متن بریده‌شده در DOM و در
 * درخت دسترس‌پذیری کامل می‌ماند. این عمدی است: نه محتوا از کرالر پنهان می‌شود و نه
 * کاربر صفحه‌خوان چیزی از دست می‌دهد.
 */
.alef-showmore__content {
	max-height: var(--asm-h, 250px);
	overflow: hidden;
	position: relative;
}

.alef-showmore__state:checked ~ .alef-showmore__content {
	max-height: none;
	overflow: visible;
}

/* محو اختیاری روی لبه‌ی برش — پیش‌فرض خاموش است، چون نسخه‌ی کدنس برش تیز داشت. */
.alef-showmore--fade .alef-showmore__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 5em;
	background: linear-gradient(to bottom, transparent, var(--alef-showmore-fade-to, #ffffff));
	pointer-events: none;
}
.alef-showmore--fade .alef-showmore__state:checked ~ .alef-showmore__content::after {
	display: none;
}

.alef-showmore__actions {
	display: flex;
	justify-content: var(--asm-align, center);
	margin-top: var(--alef-showmore-gap, 16px);
}

.alef-showmore__btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--asm-btn-w, auto);
	cursor: pointer;
	user-select: none;
	text-align: center;
	font-size: var(--alef-showmore-btn-size, 0.9rem);
	line-height: var(--alef-showmore-btn-line, 1.6);
	padding: var(--alef-showmore-btn-padding-y, 6px) var(--alef-showmore-btn-padding-x, 14px);
	border-radius: var(--alef-showmore-btn-radius, 7px);
	transition: background-color .15s ease, color .15s ease;
}

/* حالت «بیشتر»: دکمه‌ی پُر. حالت «کمتر»: دکمه‌ی خطی — همان الگوی نسخه‌ی کدنس. */
.alef-showmore__btn--more {
	background: var(--alef-showmore-btn-bg, #444444);
	color: var(--alef-showmore-btn-text, #ffffff);
	border: var(--alef-showmore-btn-border-width, 0) solid transparent;
}
.alef-showmore__btn--less {
	background: transparent;
	color: var(--alef-showmore-btn-bg, #444444);
	border: 1px solid var(--alef-showmore-btn-bg, #444444);
}

.alef-showmore__btn--more:hover {
	background: var(--alef-showmore-btn-bg-hover, var(--alef-showmore-btn-bg, #444444));
}
.alef-showmore__btn--less:hover {
	background: color-mix(in srgb, var(--alef-showmore-btn-bg, #444444) 8%, transparent);
}

/* فقط یکی از دو دکمه در هر لحظه دیده می‌شود. */
.alef-showmore__btn--less,
.alef-showmore__state:checked ~ .alef-showmore__actions .alef-showmore__btn--more {
	display: none;
}
.alef-showmore__state:checked ~ .alef-showmore__actions .alef-showmore__btn--less {
	display: inline-flex;
}

/* چک‌باکس مخفی است، پس حلقه‌ی فوکوس باید روی دکمه‌ی مرئی ظاهر شود — وگرنه کاربر
   کیبورد نمی‌فهمد کجاست. */
.alef-showmore__state:focus-visible ~ .alef-showmore__actions .alef-showmore__btn {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* پیش‌نمایش ادیتور */
.alef-showmore-editor-preview {
	border: 1px dashed #999;
	border-radius: 6px;
	padding: 12px;
}
.alef-showmore-editor-label {
	font-size: 11px;
	color: #757575;
	margin-bottom: 8px;
}

/* --- slider --- */
/**
 * alef/slider — اسلایدر تک‌اسلایدی با محوشدگی. CSS خالص، صفر جاوااسکریپت.
 *
 * چرا محوشدگی و نه translateX: با لغزش افقی، برگشت از آخرین اسلاید به اولی یا
 * «پرش» مرئی دارد یا نیاز به کپی‌کردن اسلاید اول در انتهای track (کاری که مارکی
 * می‌کند و اینجا ممکن نیست، چون فرزندان بلوک‌های دلخواه‌اند و بریدن اولین فرزند
 * از رشته‌ی HTML رندرشده شکننده است). محوشدگی به‌طور طبیعی دور می‌زند — و در یک
 * سایت RTL هیچ مسئله‌ی جهت حرکتی هم ندارد.
 *
 * چیدمان: همه‌ی اسلایدها در یک سلول grid روی هم می‌نشینند. عمداً position:absolute
 * نیست — با absolute ارتفاع ظرف صفر می‌شد؛ اینطور ارتفاع = بلندترین اسلاید و از
 * همان ابتدا ثابت است (صفر CLS، بدون هیچ محاسبه‌ی ارتفاعی با JS آنطور که Splide
 * می‌کرد).
 *
 * تنها چیزی که در PHP ساخته می‌شود @keyframes است (درصدها از متغیر CSS درنمی‌آیند).
 * تاخیر هر اسلاید همین‌جا با calc() حساب می‌شود، پس CSSِ تولیدشده حداقلی می‌ماند.
 */
.alef-slider {
	display: grid;
}

.alef-slider > * {
	grid-area: 1 / 1;
	min-width: 0;
	margin: 0;
	animation-duration: calc(var(--as-n) * var(--as-auto));
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

/*
 * تاخیر اسلاید k ام (۱-پایه) = (k - 1 - n) × مدت هر اسلاید — همیشه منفی، یعنی
 * انیمیشن از همان فریم اول در جای درست است و لحظه‌ی بارگذاری هیچ پرشی نیست.
 * برای k=1 مقدار -n×auto یک دوره‌ی کامل است، که با صفر هم‌ارز است.
 */
.alef-slider > *:nth-child(1)  { animation-delay: calc((0  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(2)  { animation-delay: calc((1  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(3)  { animation-delay: calc((2  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(4)  { animation-delay: calc((3  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(5)  { animation-delay: calc((4  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(6)  { animation-delay: calc((5  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(7)  { animation-delay: calc((6  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(8)  { animation-delay: calc((7  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(9)  { animation-delay: calc((8  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(10) { animation-delay: calc((9  - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(11) { animation-delay: calc((10 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(12) { animation-delay: calc((11 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(13) { animation-delay: calc((12 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(14) { animation-delay: calc((13 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(15) { animation-delay: calc((14 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(16) { animation-delay: calc((15 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(17) { animation-delay: calc((16 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(18) { animation-delay: calc((17 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(19) { animation-delay: calc((18 - var(--as-n)) * var(--as-auto)); }
.alef-slider > *:nth-child(20) { animation-delay: calc((19 - var(--as-n)) * var(--as-auto)); }

/* توقف: hover (اختیاری) و هر وقت فوکوس داخل اسلایدر است — بدون این دومی، رسیدن
   با Tab به لینکی که دارد محو می‌شود غیرقابل‌استفاده است. */
.alef-slider[data-pause="1"]:hover > *,
.alef-slider:focus-within > * {
	animation-play-state: paused;
}

/*
 * کاهش حرکت: انیمیشن خاموش، فقط اسلاید اول دیده می‌شود. بقیه با visibility:hidden
 * از layout حذف نمی‌شوند، پس ارتفاع ظرف عوض نمی‌شود و صفحه نمی‌پرد.
 */
@media (prefers-reduced-motion: reduce) {
	.alef-slider > * {
		animation: none;
		opacity: 0;
		visibility: hidden;
	}
	.alef-slider > *:first-child {
		opacity: 1;
		visibility: visible;
	}
}

/* پیش‌نمایش ادیتور */
.alef-slider-editor-preview {
	border: 1px dashed #999;
	border-radius: 6px;
	padding: 12px;
}
.alef-slider-editor-label {
	font-size: 11px;
	color: #757575;
	margin-bottom: 8px;
}

/* --- sources --- */
/* alef/sources — همه‌ی مقادیر ظاهری توکن‌اند (Alef_Blocks\Styles). */

.alef-sources__title {
	margin: 0 0 10px;
}

.alef-sources {
	padding-inline-start: 22px;
	line-height: 2;
	color: var(--alef-sources-color, #3f4b50);
	font-size: var(--alef-sources-font-size, 0.8em);
	list-style: var(--alef-sources-marker, decimal);
}

.alef-sources a {
	color: var(--alef-sources-color, #3f4b50);
	text-decoration: none;
}

.alef-sources a:hover,
.alef-sources a:focus-visible {
	text-decoration: underline;
}

.alef-sources-editor__row {
	border: 1px solid #e3e6e8;
	border-radius: 6px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.alef-sources-editor__title {
	font-weight: 700;
	margin: 0 0 10px;
}

/* --- tabs --- */
/**
 * alef/tabs — تب با رادیو + CSS. صفر جاوااسکریپت.
 *
 * ⚠ همه‌جا `nth-of-type` است، نه `nth-child`. بلوک‌های کدنس `<style>` را وسط
 * محتوا تزریق می‌کنند و `nth-child` آن‌ها را هم می‌شمارد — همین یک بار روی
 * اسلایدر همین صفحه واقعاً شکست. `input`/`label`/`section` با nth-of-type از
 * تزریق هر تگ دیگری مصون‌اند.
 *
 * ⚠ نقطه‌ی شکست موبایل روی خودِ قانونِ مصرف‌کننده اعمال می‌شود، نه با
 * بازتعریف متغیر داخل media query: مقدارها inline روی element نشسته‌اند و
 * inline از هر قانون شیت قوی‌تر است، پس بازتعریف هیچ اثری نمی‌کرد.
 */

.alef-tabs {
	--at-tab-gap: 10px;
	--at-tab-line: 1.402;
}

/* رادیو باید فوکوس‌پذیر بماند، پس clip می‌شود نه display:none. */
.alef-tabs__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.alef-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	/* آخرین فاصله‌ی انتهایی را می‌خورد تا گروه دقیقاً وسط بیفتد. */
	margin-inline-start: var( --at-nav-inset, calc( -1 * var( --at-tab-gap ) ) );
}

.alef-tabs--start .alef-tabs__nav { justify-content: flex-start; }
.alef-tabs--end .alef-tabs__nav   { justify-content: flex-end; }

.alef-tabs__tab {
	/* عرض هر تب = یک ستون کامل منهای فاصله؛ فاصله خودش margin است، نه gap،
	   تا سهم هر تب از عرض دقیقاً `100%/cols` بماند. */
	flex: 0 0 calc( 100% / var( --at-cols, 4 ) - var( --at-tab-gap ) );
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	cursor: pointer;
	margin-inline-end: var( --at-tab-gap );
	margin-block-end: var( --at-nav-gap, 5px );
	padding: var( --at-tab-py, 8px ) var( --at-tab-px, 0px );
	border: var( --at-tab-bw, 3px ) solid var( --at-tab-border, var( --alef-tabs-border, #e5e5e5 ) );
	border-radius: var( --at-tab-radius, 10px );
	color: var( --at-tab-color, var( --alef-tabs-color, #3a3a3a ) );
	background: var( --at-tab-bg, transparent );
	font-size: var( --at-tab-size, 20px );
	line-height: var( --at-tab-line );
	transition: .2s ease-in-out;
	-webkit-tap-highlight-color: transparent;
}

.alef-tabs__title { display: block; }

/* ── وضعیت فعال ───────────────────────────────────────────────────────────
   ده تب پشتیبانی می‌شود؛ بیشتر از این در عمل پیش نیامده و قانونِ تولیدشده
   به‌ازای هر نمونه، بایت اضافه‌ی بی‌دلیل است. */
.alef-tabs > .alef-tabs__radio:nth-of-type(1):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(1),
.alef-tabs > .alef-tabs__radio:nth-of-type(2):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(2),
.alef-tabs > .alef-tabs__radio:nth-of-type(3):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(3),
.alef-tabs > .alef-tabs__radio:nth-of-type(4):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(4),
.alef-tabs > .alef-tabs__radio:nth-of-type(5):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(5),
.alef-tabs > .alef-tabs__radio:nth-of-type(6):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(6),
.alef-tabs > .alef-tabs__radio:nth-of-type(7):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(7),
.alef-tabs > .alef-tabs__radio:nth-of-type(8):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(8),
.alef-tabs > .alef-tabs__radio:nth-of-type(9):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(9),
.alef-tabs > .alef-tabs__radio:nth-of-type(10):checked ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(10) {
	color: var( --at-tab-color-a, var( --alef-tabs-color-active, #111111 ) );
	background: var( --at-tab-bg-a, #ffffff );
	border-color: var( --at-tab-border-a, var( --alef-tabs-border-active, #111111 ) );
}

/* hover فقط روی تبِ غیرفعال دیده می‌شود — نه به‌خاطر ترتیب، به‌خاطر خصوصیت:
   قانون فعال بالا چهار کلاس و دو شبه‌کلاس دارد و از این یکی قوی‌تر است. */
.alef-tabs__tab:hover {
	color: var( --at-tab-color-h, var( --at-tab-color, var( --alef-tabs-color, #3a3a3a ) ) );
	background: var( --at-tab-bg-h, var( --at-tab-bg, transparent ) );
	border-color: var( --at-tab-border-h, var( --at-tab-border, #e5e5e5 ) );
}

/* کاربر کیبورد باید ببیند کجاست؛ خود رادیو clip شده، پس حلقه روی عنوان می‌نشیند. */
.alef-tabs > .alef-tabs__radio:nth-of-type(1):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(1),
.alef-tabs > .alef-tabs__radio:nth-of-type(2):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(2),
.alef-tabs > .alef-tabs__radio:nth-of-type(3):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(3),
.alef-tabs > .alef-tabs__radio:nth-of-type(4):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(4),
.alef-tabs > .alef-tabs__radio:nth-of-type(5):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(5),
.alef-tabs > .alef-tabs__radio:nth-of-type(6):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(6),
.alef-tabs > .alef-tabs__radio:nth-of-type(7):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(7),
.alef-tabs > .alef-tabs__radio:nth-of-type(8):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(8),
.alef-tabs > .alef-tabs__radio:nth-of-type(9):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(9),
.alef-tabs > .alef-tabs__radio:nth-of-type(10):focus-visible ~ .alef-tabs__nav > .alef-tabs__tab:nth-of-type(10) {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ── پنل‌ها ───────────────────────────────────────────────────────────── */
.alef-tabs__panes {
	margin-inline: calc( -1 * var( --at-bleed, 0px ) );
}

.alef-tabs__pane {
	display: none;
	box-sizing: border-box;
	padding: var( --at-pane-p, 0px );
	border: var( --at-pane-bw, 0px ) solid var( --at-pane-border, transparent );
	border-radius: var( --at-pane-radius, 0px );
	background: var( --at-pane-bg, transparent );
}

.alef-tabs > .alef-tabs__radio:nth-of-type(1):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(1),
.alef-tabs > .alef-tabs__radio:nth-of-type(2):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(2),
.alef-tabs > .alef-tabs__radio:nth-of-type(3):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(3),
.alef-tabs > .alef-tabs__radio:nth-of-type(4):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(4),
.alef-tabs > .alef-tabs__radio:nth-of-type(5):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(5),
.alef-tabs > .alef-tabs__radio:nth-of-type(6):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(6),
.alef-tabs > .alef-tabs__radio:nth-of-type(7):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(7),
.alef-tabs > .alef-tabs__radio:nth-of-type(8):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(8),
.alef-tabs > .alef-tabs__radio:nth-of-type(9):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(9),
.alef-tabs > .alef-tabs__radio:nth-of-type(10):checked ~ .alef-tabs__panes > .alef-tabs__pane:nth-of-type(10) {
	display: block;
}

/* ── موبایل ───────────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
	.alef-tabs__nav {
		margin-inline-start: var( --at-nav-inset-m, var( --at-nav-inset, calc( -1 * var( --at-tab-gap ) ) ) );
	}
	.alef-tabs__tab {
		flex-basis: calc( 100% / var( --at-cols-m, var( --at-cols, 3 ) ) - var( --at-tab-gap ) );
		font-size: var( --at-tab-size-m, var( --at-tab-size, 20px ) );
	}
	.alef-tabs__pane {
		padding: var( --at-pane-p, 0px ) var( --at-pane-px-m, var( --at-pane-p, 0px ) );
	}
}

/* --- toc --- */
/*
 * alef/toc
 * همه‌ی مقادیر ظاهری از توکن می‌آیند (Alef_Blocks\Styles). مقدار fallback داخل
 * var() عمداً خنثی است، نه رنگ برند — رنگ واقعی سایت از تنظیمات دیتابیس می‌آید
 * تا هیچ چیز site-specific داخل کد افزونه نماند.
 *
 * ⚠ fallback هر var() باید دقیقاً برابر default همان توکن در Styles::registry()
 * باشد. دلیل: توکنِ دست‌نخورده اصلاً چاپ نمی‌شود (بهینه‌سازی «صفر بایت»)، پس
 * همین fallback عملاً مقدار پیش‌فرض سایت است.
 */

.alef-toc {
	background: var(--alef-toc-bg, #f7f7f8);
	border: var(--alef-toc-border-width, 1px) solid var(--alef-toc-border-color, #e3e6e8);
	border-radius: var(--alef-toc-radius, 8px);
	padding: var(--alef-toc-padding, 20px);
	margin: 0 0 28px;
}

.alef-toc__title {
	font-weight: var(--alef-toc-title-weight, 700);
	font-size: var(--alef-toc-title-size, 1em);
	color: var(--alef-toc-title-color, inherit);
	margin: 0 0 12px;
}

/*
 * حالت جمع‌شونده: تا امروز هیچ نشانه‌ی بصری‌ای نداشت — کاربر اصلاً نمی‌فهمید
 * عنوان قابل کلیک است. حالا یک فلش کوچک در انتهای خط می‌نشیند و با باز/بسته
 * شدن می‌چرخد. summary به flex تبدیل می‌شود تا فلش همیشه ته خط بماند.
 */
.alef-toc--collapsible > .alef-toc__title {
	cursor: pointer;
	list-style: none;
	margin-bottom: 0;
	display: flex;
	align-items: center;
	gap: 8px;
}

.alef-toc--collapsible > .alef-toc__title::after {
	content: "";
	margin-inline-start: auto;
	width: 8px;
	height: 8px;
	border-inline-end: 2px solid currentColor;
	border-block-end: 2px solid currentColor;
	opacity: 0.55;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.2s ease-in-out;
}

.alef-toc--collapsible[open] > .alef-toc__title::after {
	transform: rotate(225deg);
}

.alef-toc--collapsible[open] > .alef-toc__body {
	margin-block-start: 12px;
}

.alef-toc--collapsible > .alef-toc__title::-webkit-details-marker {
	display: none;
}

.alef-toc__list {
	margin: 0;
	padding-inline-start: var(--alef-toc-indent, 20px);
	list-style: var(--alef-toc-marker, disc);
}

.alef-toc__item {
	margin: var(--alef-toc-item-gap, 8px) 0;
	line-height: 1.7;
}

/*
 * سطح تودرتو (h3/h4 داخل آیتم h2 خودش). خط راهنمای عمودی عمداً بسیار ملایم
 * است: ۱ پیکسل با شفافیت پایین — کارش «اشاره» به تعلق است، نه کشیدن نگاه.
 * جای خط با border-inline-start است تا در RTL خودبه‌خود سمت درست بیفتد.
 */
.alef-toc__list--nested {
	margin-block: var(--alef-toc-item-gap, 8px) 0;
	padding-inline-start: var(--alef-toc-indent, 20px);
	border-inline-start: var(--alef-toc-guide-width, 1px) solid var(--alef-toc-guide-color, rgba(0, 0, 0, 0.12));
}

/* h3 کمی کوچک‌تر و کم‌رنگ‌تر تا سلسله‌مراتب بدون شماره‌گذاری خوانده شود. */
.alef-toc__item--h3 {
	font-size: 0.95em;
}

.alef-toc__item--h4 {
	font-size: 0.9em;
}

.alef-toc__item a {
	color: var(--alef-toc-link-color, var(--alef-accent, #7c3aed));
	text-decoration: none;
}

/*
 * ترتیب این قاعده بعد از قاعده‌ی بالا عمدی است: هم‌وزنِ آن است (یک کلاس + یک
 * تگ)، پس فقط به‌خاطر ترتیب برنده می‌شود. جابه‌جا کردنشان h3 را دوباره
 * هم‌رنگ h2 می‌کند.
 */
.alef-toc__item--h3 > a,
.alef-toc__item--h4 > a {
	color: var(--alef-toc-link-color, var(--alef-muted, #5c6971));
}

.alef-toc__item a:hover,
.alef-toc__item a:focus-visible {
	text-decoration: underline;
}

/* ویرایشگر: پیش‌نمایش بدون لینک. */
.alef-toc--editor .alef-toc__item {
	color: inherit;
}

.alef-toc-editor__empty {
	margin: 0;
	opacity: 0.7;
	font-size: 0.9em;
}