/* Lite Blocks — سبک، RTL-first، بدون وابستگی. */

/* >>> ds-tokens — تولیدشده توسط scripts/tokens.py — دستی ویرایش نکن */
.lb-programs,
.lb-posts,
.lb-guide,
.lb-hub,
.lb-faculties,
.lb-rail,
.lb-feed,
#rank-math-faq,
#rank-math-howto {
	--lb-brand:         var(--ds-color-primary, #0d2b5e);
	--lb-brand-dark:    var(--ds-color-primary-dark, #091e47);
	--lb-brand-light:   var(--ds-color-primary-light, #163872);
	--lb-accent:        var(--ds-color-accent, #c9a84c);
	--lb-accent-light:  var(--ds-color-accent-light, #e2c87a);
	--lb-on-brand:      var(--ds-color-on-primary, #FFFFFF);
	--lb-on-brand-line: var(--ds-color-on-primary-line, rgba(255, 255, 255, 0.14));
	--lb-on-brand-fill: var(--ds-color-on-primary-fill, rgba(255, 255, 255, 0.10));
	--lb-on-brand-dim:  var(--ds-color-on-primary-dim, rgba(255, 255, 255, 0.72));
	--lb-text:          var(--ds-color-text, #2d3748);
	--lb-muted:         var(--ds-color-muted, #4a5568);
	--lb-ghost:         var(--ds-color-ghost, #9ca3af);
	--lb-border-strong: var(--ds-color-border-strong, #d1c9b8);
	--lb-text-ui-lg:    var(--ds-text-ui-lg, 1rem);
	--lb-border:        var(--ds-color-border, #e0d8cc);
	--lb-surface:       var(--ds-color-surface, #FFFFFF);
	--lb-bg-soft:       var(--ds-color-surface-soft, #f8f7f4);
	--lb-bg-tint:       var(--ds-color-surface-tint, #fbfaf8);
	--lb-danger:        var(--ds-color-danger, #B32D2E);
	--lb-radius:        var(--ds-radius-md, 8px);
	--lb-radius-lg:     var(--ds-radius-lg, 12px);
	--lb-radius-xl:     var(--ds-radius-xl, 16px);
	--lb-shadow-lg:     var(--ds-shadow-lg, 0 12px 32px rgba(6, 14, 36, 0.14));
	--lb-space-2:       var(--ds-space-2, 8px);
	--lb-space-3:       var(--ds-space-3, 12px);
	--lb-space-4:       var(--ds-space-4, 16px);
	--lb-space-5:       var(--ds-space-5, 24px);
	--lb-space-6:       var(--ds-space-6, 32px);
	--lb-space-7:       var(--ds-space-7, 48px);
	--lb-space-9:       var(--ds-space-9, 80px);
	--lb-motion-base:   var(--ds-motion-base, 250ms);
	--lb-motion-slow:   var(--ds-motion-slow, 500ms);
	--lb-ease:          var(--ds-ease, cubic-bezier(0.4, 0, 0.2, 1));
	--lb-text-ui-xs:    var(--ds-text-ui-xs, 0.6875rem);
	--lb-text-ui-sm:    var(--ds-text-ui-sm, 0.75rem);
	--lb-text-ui:       var(--ds-text-ui, 0.875rem);
	--lb-radius-sm:     var(--ds-radius-sm, 6px);
	--lb-radius-pill:   var(--ds-radius-pill, 999px);
	--lb-shadow:        var(--ds-shadow-sm, 0 1px 2px rgba(6, 14, 36, 0.06));
	--lb-leading:       var(--ds-leading-loose, 1.95);
	--lb-leading-tight: var(--ds-leading-tight, 1.3);
	--lb-tap-min:       var(--ds-tap-min, 44px);
	--lb-text-xs:       var(--ds-text-xs, 0.8125rem);
	--lb-text-sm:       var(--ds-text-sm, 0.9375rem);
	--lb-text-body:     var(--ds-text-body, clamp(1rem, 0.95rem + 0.22vw, 1.0625rem));
	--lb-text-h4:       var(--ds-text-h4, clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem));
	--lb-text-h3:       var(--ds-text-h3, clamp(1.25rem, 1.1rem + 0.65vw, 1.5rem));
	--lb-text-h2:       var(--ds-text-h2, clamp(1.5rem, 1.28rem + 0.95vw, 2rem));
}
/* <<< ds-tokens */

/* ───────────────── تله‌ی آسترا: فاصله‌ی درون‌خطیِ هر `ul` داخل محتوا ─────
   آسترا در CSSِ درون‌خطی‌اش می‌نویسد `.entry-content ul { padding-right: 20px }`
   تا گلوله جا شود. آن قاعده ویژگیِ ۰٬۲٬۰ دارد و `padding: 0`ِ ما روی
   `.lb-*__grid` (۰٬۱٬۰) را می‌بازد — بی‌صدا، چون هیچ لینتی رندر را نمی‌بیند.

   نتیجه‌اش روی ۳۷۵ دیده شد: نوارِ خالیِ ۲۰px در سمتِ راستِ شبکه، یعنی لبه‌ی
   کارت‌ها ۲۰px تو رفته بود و با لبه‌ی پاراگرافِ بالای‌شان یکی نبود. شبکه‌های
   ما `list-style: none` دارند و گلوله‌ای در کار نیست؛ آن فاصله فقط قرینگی
   را می‌شکند.

   هم‌ویژگی (۰٬۲٬۰) کافی است، چون این فایل بعد از CSSِ درون‌خطیِ آسترا بار
   می‌شود. هر شبکه‌ی `ul`ِ تازه باید به همین فهرست اضافه شود. */
.lb-faculties .lb-faculties__grid,
.lb-hub .lb-hub__grid {
	padding-inline: 0;
}

.lb-programs {
	direction: rtl;
	text-align: start;
	color: var(--lb-text);
}

.lb-is-hidden {
	display: none !important;
}

/* ---------- نوار فیلتر ---------- */

.lb-filters {
	background: var(--lb-bg-soft);
	border: 1px solid var(--lb-border);
	border-radius: var(--lb-radius);
	padding: 1.1rem 1.1rem 0.9rem;
	margin-bottom: 1.6rem;
}

.lb-filters-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 0.9rem;
}

.lb-field {
	margin: 0;
	display: flex;
	flex-direction: column;
}

.lb-field label {
	margin-bottom: 0.3rem;
	font-weight: 600;
	font-size: var(--lb-text-sm);
}

/* Astra تخصص بالایی روی فرم‌ها دارد؛ صریح بنویس وگرنه بازنویسی می‌کند. */
.lb-programs .lb-field input,
.lb-programs .lb-field select {
	width: 100%;
	padding: 0.5rem 0.7rem;
	font: inherit;
	font-size: var(--lb-text-body);
	color: var(--lb-text);
	background: var(--lb-surface);
	border: 1px solid var(--lb-border);
	border-radius: var(--lb-radius-sm);
	margin: 0;
}

.lb-programs .lb-field input:focus,
.lb-programs .lb-field select:focus {
	outline: 2px solid var(--lb-brand);
	outline-offset: 1px;
	border-color: var(--lb-brand);
}

.lb-attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.1rem;
	margin: 0.9rem 0 0;
	padding: 0.8rem 0 0;
	border: 0;
	border-top: 1px solid var(--lb-border);
}

.lb-check {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: var(--lb-text-sm);
	cursor: pointer;
}

.lb-programs .lb-check input {
	margin: 0;
}

.lb-filters-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
	padding-top: 0.8rem;
	border-top: 1px solid var(--lb-border);
	font-size: var(--lb-text-sm);
}

.lb-count strong {
	color: var(--lb-brand);
}

.lb-programs .lb-reset {
	padding: 0.4rem 0.9rem;
	font: inherit;
	font-size: var(--lb-text-sm);
	color: var(--lb-brand);
	background: var(--lb-surface);
	border: 1px solid var(--lb-border);
	border-radius: var(--lb-radius-sm);
	cursor: pointer;
}

.lb-programs .lb-reset:hover {
	background: var(--lb-brand);
	border-color: var(--lb-brand);
	color: #fff;  /* ds-allow: سفید روی آبی — UI.md استثنای ۲ */
}

.lb-empty {
	padding: 1.4rem;
	text-align: center;
	color: var(--lb-muted);
	background: var(--lb-bg-soft);
	border: 1px dashed var(--lb-border);
	border-radius: var(--lb-radius);
}

/* ---------- گروه دانشکده ---------- */

.lb-group {
	margin: 0 0 2.2rem;
}

.lb-group-title {
	margin: 0 0 0.7rem;
	font-size: var(--lb-text-h3);
	line-height: 1.4;
}

.lb-group-count {
	font-size: 0.8em;  /* ds-allow: عمداً نسبت به تیترِ والد، نه به مقیاس */
	font-weight: 400;
	color: var(--lb-muted);
}

/* ---------- جدول ---------- */

.lb-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--lb-border);
	border-radius: var(--lb-radius);
}

.lb-programs .lb-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: var(--lb-text-sm);
	background: var(--lb-surface);
}

.lb-programs .lb-table th,
.lb-programs .lb-table td {
	padding: 0.65rem 0.8rem;
	text-align: start;
	border: 0;
	border-bottom: 1px solid var(--lb-border);
	vertical-align: middle;
}

.lb-programs .lb-table thead th {
	background: var(--lb-bg-soft);
	font-weight: 700;
	white-space: nowrap;
}

.lb-programs .lb-table tbody tr:last-child td {
	border-bottom: 0;
}

.lb-programs .lb-table tbody tr:hover td {
	background: var(--lb-bg-tint);
}

.lb-name {
	font-weight: 600;
	min-width: 15rem;
}

.lb-mark {
	color: var(--lb-danger);
	font-weight: 700;
	margin-inline-start: 2px;
}

.lb-badge {
	display: inline-block;
	margin-inline-start: 0.35rem;
	padding: 0.1rem 0.45rem;
	font-size: var(--lb-text-xs);
	font-weight: 600;
	line-height: 1.6;
	white-space: nowrap;
	border-radius: var(--lb-radius-pill);
	background: #e7eef7;  /* ds-allow: سفید روی آبی — UI.md استثنای ۲ */
	color: var(--lb-brand-dark);
}

.lb-badge-online { background: #e3f4ea; color: #1c6b3c; }  /* ds-allow: پالت رسته‌ای برچسب‌ها — UI.md استثنای ۱ */
.lb-badge-double-major { background: #fdf0e0; color: #8a5314; }  /* ds-allow: پالت رسته‌ای برچسب‌ها — UI.md استثنای ۱ */
.lb-badge-minor { background: #f0eafc; color: #52348a; }  /* ds-allow: پالت رسته‌ای برچسب‌ها — UI.md استثنای ۱ */
.lb-badge-collaborative { background: #e6f3f7; color: #1a5c72; }  /* ds-allow: پالت رسته‌ای برچسب‌ها — UI.md استثنای ۱ */
.lb-badge-with-thesis,
.lb-badge-without-thesis { background: #eef0f3; color: #4a545f; }  /* ds-allow: پالت رسته‌ای برچسب‌ها — UI.md استثنای ۱ */

.lb-col-cta {
	width: 1%;
	white-space: nowrap;
}

.lb-programs .lb-apply {
	display: inline-block;
	padding: 0.42rem 0.9rem;
	font-size: var(--lb-text-sm);
	font-weight: 600;
	line-height: 1.5;
	color: #fff;  /* ds-allow: سفید روی آبی — UI.md استثنای ۲ */
	background: var(--lb-brand);
	border-radius: var(--lb-radius-sm);
	text-decoration: none;
}

.lb-programs .lb-apply:hover,
.lb-programs .lb-apply:focus {
	background: var(--lb-brand-dark);
	color: #fff;  /* ds-allow: سفید روی آبی — UI.md استثنای ۲ */
	text-decoration: none;
}

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

.lb-notes {
	margin-top: 1.2rem;
	padding: 0.9rem 1.1rem;
	font-size: var(--lb-text-sm);
	line-height: 1.9;
	color: var(--lb-muted);
	background: var(--lb-bg-soft);
	border-radius: var(--lb-radius);
}

.lb-notes p {
	margin: 0;
}

/* ---------- موبایل: هر ردیف یک کارت ---------- */

@media (max-width: 767px) {
	.lb-table-wrap {
		border: 0;
		border-radius: 0;
		overflow-x: visible;
	}

	.lb-programs .lb-table,
	.lb-programs .lb-table tbody,
	.lb-programs .lb-table tr,
	.lb-programs .lb-table td {
		display: block;
		width: auto;
	}

	.lb-programs .lb-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(1px, 1px, 1px, 1px);
		white-space: nowrap;
	}

	.lb-programs .lb-table tr {
		margin-bottom: 0.8rem;
		padding: 0.5rem 0.2rem;
		border: 1px solid var(--lb-border);
		border-radius: var(--lb-radius);
	}

	.lb-programs .lb-table td {
		border-bottom: 0;
		padding: 0.3rem 0.8rem;
	}

	/* عنوان ستون کنار مقدار — بدون آن، سلول‌های موبایل بی‌معنا می‌شوند.
	   عمداً اینجاست و نه در صفتِ data-th روی هر سلول: ۲۸۱ ردیف × ۴ برچسب
	   عربی حدود ۳۶KB به HTML اضافه می‌کرد. ترتیب ستون‌ها در
	   class-lb-programs-render.php ثابت است — اگر آنجا عوض شد، اینجا هم. */
	.lb-programs .lb-table td:nth-child(2)::before { content: "الدرجة العلمية: "; }
	.lb-programs .lb-table td:nth-child(3)::before { content: "المدة: "; }
	.lb-programs .lb-table td:nth-child(4)::before { content: "القسم: "; }
	.lb-programs .lb-table td:nth-child(5)::before { content: "اللغة: "; }

	.lb-programs .lb-table td::before {
		font-weight: 600;
		color: var(--lb-muted);
	}

	.lb-name {
		font-size: var(--lb-text-body);
		min-width: 0;
	}

	.lb-programs .lb-apply {
		display: block;
		text-align: center;
		margin-top: 0.35rem;
	}
}

/* مدت تحصیل نباید وسطش بشکند — «4 سنوات» در دو خط بد دیده می‌شود. */
.lb-duration {
	white-space: nowrap;
}

/* ============ کارت مقالات — [emu_posts] ============ */

.lb-posts {
	direction: rtl;
	text-align: start;
	display: grid;
	grid-template-columns: repeat(var(--lb-cols, 3), minmax(0, 1fr));
	gap: 1.4rem;
	color: var(--lb-text);
}

@media (max-width: 900px) {
	.lb-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.lb-posts { grid-template-columns: 1fr; }
}

.lb-post {
	display: flex;
	flex-direction: column;
	background: var(--lb-surface);
	border: 1px solid var(--lb-border);
	border-radius: var(--ds-radius-xl, 16px);
	overflow: hidden;
	box-shadow: var(--lb-shadow);
	transition: transform var(--ds-motion-base, 250ms) var(--ds-ease, ease),
	            box-shadow var(--ds-motion-base, 250ms) var(--ds-ease, ease),
	            border-color var(--ds-motion-base, 250ms) var(--ds-ease, ease);
}

.lb-post:hover,
.lb-post:focus-within {
	transform: translateY(-4px);
	border-color: var(--lb-accent);
	box-shadow: var(--ds-shadow-lg, 0 12px 32px rgba(6, 14, 36, 0.14));
}

.lb-post-media {
	display: block;
	/* نسبت ثابت: تصویر هر چه باشد، جای خودش را از اول می‌گیرد و
	   بقیه‌ی کارت موقع بارگذاری جابه‌جا نمی‌شود. */
	aspect-ratio: 16 / 9;
	background: var(--lb-brand);
	overflow: hidden;
}

.lb-posts .lb-post-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	transition: transform var(--ds-motion-slow, 500ms) var(--ds-ease, ease);
}

.lb-post:hover .lb-post-img,
.lb-post:focus-within .lb-post-img { transform: scale(1.05); }

/* حرکت باید بتواند خاموش شود — همان قاعده‌ی سراسری. */
@media (prefers-reduced-motion: reduce) {
	.lb-post,
	.lb-posts .lb-post-img { transition: none; }
	.lb-post:hover,
	.lb-post:focus-within { transform: none; }
	.lb-post:hover .lb-post-img,
	.lb-post:focus-within .lb-post-img { transform: none; }
}

.lb-post-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1rem 1.1rem 1.1rem;
}

.lb-posts .lb-post-title {
	margin: 0 0 0.35rem;
	font-size: var(--lb-text-h4);
	line-height: 1.6;
	font-weight: 600;
}

.lb-posts .lb-post-title a {
	color: var(--lb-text);
	text-decoration: none;
}

.lb-posts .lb-post-title a:hover {
	color: var(--lb-brand);
}

.lb-post-date {
	margin: 0 0 0.6rem;
	font-size: var(--lb-text-xs);
	color: var(--lb-muted);
}

.lb-post-excerpt {
	margin: 0 0 0.9rem;
	font-size: var(--lb-text-sm);
	line-height: 1.85;
	color: var(--lb-muted);
}

.lb-post-more {
	margin: auto 0 0;
}

.lb-posts .lb-post-more a {
	font-size: var(--lb-text-sm);
	font-weight: 600;
	color: var(--lb-brand);
	text-decoration: none;
}

.lb-posts .lb-post-more a:hover {
	color: var(--lb-accent);
	text-decoration: underline;
}

.lb-posts-empty {
	color: var(--lb-muted);
}

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

/* ---------- بلوک‌های FAQ و HowTo رانک‌مث ----------

   نشانه‌گذاری را خودِ رانک‌مث می‌سازد (قاعده‌ی ۱۲ در CLAUDE.md) و ما فقط
   لباسش را می‌دوزیم. سلکتورها مالِ افزونه‌اند، پس دست‌کاری‌شان نکن:
   #rank-math-faq  > .rank-math-list  > .rank-math-list-item
                                        > .rank-math-question / .rank-math-answer
   #rank-math-howto > .rank-math-steps > .rank-math-step
                                        > .rank-math-step-title / .rank-math-step-content
*/

#rank-math-faq,
#rank-math-howto {
	direction: rtl;
	text-align: start;
	color: var(--lb-text);
}

#rank-math-faq a,
#rank-math-howto a {
	color: var(--lb-brand);
}

#rank-math-faq a:hover,
#rank-math-howto a:hover {
	color: var(--lb-brand-dark);
}

#rank-math-faq p,
#rank-math-howto p {
	margin: 0 0 0.7rem;
	line-height: 1.95;
}

#rank-math-faq p:last-child,
#rank-math-howto p:last-child {
	margin-bottom: 0;
}

/* ---------- مراحل ---------- */

/* شماره‌ها را خودمان می‌کشیم: شماره‌ی پیش‌فرض <ol> در RTL جای ثابتی ندارد
   و با فاصله‌گذاری قالب Astra جابه‌جا می‌شود. */
#rank-math-howto .rank-math-steps {
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
	counter-reset: lb-step;
}

/* فاصله در سمتی که شماره می‌نشیند — با ویژگی منطقی، نه راست/چپِ فیزیکی.
   نسخه‌ی قبلی `padding: … 3.4rem … 0` را با `padding-inline-end` جبران
   می‌کرد که در RTL سمتِ مقابل است؛ یعنی فاصله به سمتِ خالی می‌رفت. */
#rank-math-howto .rank-math-step {
	position: relative;
	counter-increment: lb-step;
	padding: 0 0 0.2rem;
	padding-inline-start: 3rem;
	margin: 0 0 1.5rem;
}

#rank-math-howto .rank-math-step::before {
	content: counter(lb-step);
	position: absolute;
	inset-inline-start: 0;
	top: 0.1rem;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	background: var(--lb-brand);
	color: #fff;  /* ds-allow: سفید روی آبی — UI.md استثنای ۲ */
	font-size: var(--lb-text-body);
	font-weight: 700;
	line-height: 2.4rem;
	text-align: center;
}

#rank-math-howto .rank-math-step-title {
	margin: 0 0 0.4rem;
	font-size: var(--lb-text-h4);
	line-height: 1.6;
	color: var(--lb-brand-dark);
}

/* ---------- سؤالات متداول ---------- */

#rank-math-faq .rank-math-list {
	margin: 0 0 2rem;
}

#rank-math-faq .rank-math-list-item {
	border: 1px solid var(--lb-border);
	border-radius: var(--lb-radius);
	background: var(--lb-bg-soft);
	padding: 1.05rem 1.15rem;
	margin: 0 0 0.85rem;
}

#rank-math-faq .rank-math-question {
	margin: 0 0 0.5rem;
	font-size: var(--lb-text-h4);
	line-height: 1.65;
	color: var(--lb-brand-dark);
}

/* موبایل مبنا است؛ فضای بیشترِ شماره‌ها فقط از ۶۰۰ به بالا. */
@media (min-width: 600px) {
	#rank-math-howto .rank-math-step {
		padding-inline-start: 3.4rem;
	}
}

/* ─────────────────────────── بلوک hub — کارت‌های صفحات فرزند ───────────
   موبایل مبنا: یک ستون. کلِ کارت هدفِ لمسی است، نه فقط متنِ لینک —
   روی ۳۷۵ کاربر با شست می‌زند و لبه‌ی کارت را نشانه می‌گیرد نه کلمه را. */

.lb-hub {
	margin: var(--ds-space-5) 0;
}

.lb-hub__title {
	margin: 0 0 var(--ds-space-3);
	font-size: var(--lb-text-h2);
	line-height: var(--lb-leading-tight);
	color: var(--lb-brand-dark);
}

.lb-hub__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ds-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* آسترا به `li` هم فاصله و گلوله می‌دهد. فاصله‌ی خودِ `ul` جای دیگری
   خنثی می‌شود — «تله‌ی آسترا» در بالای همین فایل. */
.lb-hub__grid > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-hub__link {
	display: flex;
	flex-direction: column;
	gap: var(--ds-space-1);
	min-height: var(--lb-tap-min);
	padding: var(--ds-space-3) var(--ds-space-4);
	border: 1px solid var(--lb-border);
	border-radius: var(--lb-radius);
	background: var(--lb-surface);
	box-shadow: var(--lb-shadow);
	text-decoration: none;
	transition: border-color var(--ds-motion-fast) var(--ds-ease),
		box-shadow var(--ds-motion-fast) var(--ds-ease);
}

.lb-hub__link:hover,
.lb-hub__link:focus-visible {
	border-color: var(--lb-brand);
	box-shadow: var(--ds-shadow-md);
}

/* لبه‌ی سمتِ شروع، نشانه‌ی جهت در RTL — `inline` تا در LTR هم درست بماند. */
.lb-hub__link::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	inset-block: 0;
	width: 3px;
	border-start-start-radius: var(--lb-radius);
	border-end-start-radius: var(--lb-radius);
	background: var(--lb-accent);
	opacity: 0;
	transition: opacity var(--ds-motion-fast) var(--ds-ease);
}

.lb-hub__item {
	position: relative;
}

.lb-hub__link:hover::before,
.lb-hub__link:focus-visible::before {
	opacity: 1;
}

.lb-hub__label {
	font-size: var(--lb-text-h4);
	font-weight: 700;
	line-height: var(--lb-leading-tight);
	color: var(--lb-brand-dark);
}

.lb-hub__note {
	font-size: var(--lb-text-sm);
	line-height: var(--ds-leading-normal);
	color: var(--lb-muted);
}

@media (min-width: 600px) {
	.lb-hub__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--ds-space-4);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lb-hub__link,
	.lb-hub__link::before {
		transition: none;
	}
}

/* ───────────────────── بلوک faculties — ۱۷ کارتِ دانشکده ─────────────────
   موبایل مبنا: یک ستون (۷۳٪ نمایشِ سایت موبایل است → UI.md).
   کلِ کارت هدفِ لمسی است نه فقط نام — روی ۳۷۵ کاربر با شست لبه‌ی کارت را
   نشانه می‌گیرد، نه کلمه را. همان تصمیمِ `lb-hub`.

   ⚠️ نسبتِ عکس با `--ds-ratio-media` قفل است، نه با ارتفاعِ ثابت: ۱۷ عکس
   از سایت رسمی ابعادِ یکسان ندارند و بدون این، شبکه دندانه‌دار می‌شود و
   هر ردیف ارتفاعِ خودش را می‌گیرد. */

.lb-faculties {
	margin: var(--ds-space-5) 0;
}

.lb-faculties__title {
	margin: 0 0 var(--ds-space-3);
	font-size: var(--lb-text-h2);
	line-height: var(--lb-leading-tight);
	color: var(--lb-brand-dark);
}

.lb-faculties__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ds-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* آسترا به `li` هم فاصله و گلوله می‌دهد. فاصله‌ی خودِ `ul` جای دیگری
   خنثی می‌شود — «تله‌ی آسترا» در بالای همین فایل. */
.lb-faculties__grid > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.lb-faculties__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: var(--lb-tap-min);
	overflow: hidden;
	border: 1px solid var(--lb-border);
	border-radius: var(--lb-radius);
	background: var(--lb-surface);
	box-shadow: var(--lb-shadow);
	text-decoration: none;
	transition: border-color var(--ds-motion-fast) var(--ds-ease),
		box-shadow var(--ds-motion-fast) var(--ds-ease);
}

.lb-faculties__link:hover,
.lb-faculties__link:focus-visible {
	border-color: var(--lb-brand);
	box-shadow: var(--ds-shadow-md);
}

.lb-faculties__media {
	display: block;
	aspect-ratio: var(--ds-ratio-media);
	overflow: hidden;
	background: var(--lb-bg-soft);
}

.lb-faculties .lb-faculties__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.lb-faculties__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--ds-space-1);
	padding: var(--ds-space-4);
}

.lb-faculties__name {
	font-size: var(--lb-text-h4);
	font-weight: 700;
	line-height: var(--lb-leading-tight);
	color: var(--lb-brand-dark);
}

.lb-faculties__blurb {
	font-size: var(--lb-text-sm);
	line-height: var(--ds-leading-normal);
	color: var(--lb-muted);
}

/* تعداد رشته‌ها به ته کارت چسبیده تا در شبکه‌ای که جمله‌هایش دو تا چهار
   سطرند، همه‌ی کارت‌ها یک خطِ پایانی داشته باشند. */
.lb-faculties__count {
	margin-top: auto;
	padding-top: var(--ds-space-2);
	font-size: var(--lb-text-xs);
	font-weight: 700;
	color: var(--lb-brand);
}

@media (min-width: 600px) {
	.lb-faculties__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 900px) {
	.lb-faculties__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

/* عنوانِ گروهِ دانشکده در صفحه‌ی ۹۹۰ وقتی صفحه‌ی آن دانشکده ساخته شد
   لینک می‌شود — تا آن روز این قاعده مصرف‌کننده ندارد و بی‌ضرر است. */
.lb-programs .lb-group-link {
	color: inherit;
	text-decoration: none;
}

.lb-programs .lb-group-link:hover,
.lb-programs .lb-group-link:focus-visible {
	color: var(--lb-brand);
	text-decoration: underline;
}

/* ============ ریلِ رشته‌های پرتقاضا — بلوک `lite-blocks/programs-rail` ============

   کلِ باز و بسته شدنِ کارت‌ها **یک کلید** است: `--o` که ۰ یا ۱ می‌شود.
   عرض، گردیِ گوشه، بزرگ‌نماییِ عکس، پررنگیِ پرده و ظاهرشدنِ متن همه از
   همان یک عدد حساب می‌شوند. `--o` ویژگیِ ساده‌ی CSS است و به ارث می‌رسد،
   پس فرزندانِ کارت هم می‌بینندش.

   ── دو انتخابِ عمدی که با طرحِ استاتیک فرق دارند ──

     ۱. حالت با `input:checked + .card` عوض می‌شود، نه با
        `.card:has(input:checked)`. نتیجه یکی است، ولی ترفندِ خواهر
        پشتیبانیِ قدیمی‌تر و گسترده‌تری دارد و همان الگویی است که منوی
        موبایلِ خودِ سایت از قبل رویش سوار است — یک الگو، نه دو.
        بهایش این است که `<input>` باید **بیرونِ** کارت بنشیند؛
        نگهبانش `tests/lite-blocks/test-programs-rail.php`.

     ۲. `--o` **خودش انیمیت نمی‌شود**. طرحِ استاتیک آن را با `@property`
        ثبت می‌کرد و `transition: --o .7s` می‌نوشت. اینجا `--o` فقط یک
        کلیدِ صفر/یک است و ویژگی‌های واقعی (`flex-grow`، `flex-basis`،
        `border-radius`، `opacity`) گذار می‌کنند. نتیجه‌ی بصری همان است
        و به `@property` — که پشتیبانی‌اش تازه‌تر است — نیازی نیست.

   ⚠️ **تله‌ی اندازه‌گیری، نه تله‌ی CSS:** اگر پنجره‌ی مرورگر پنهان یا
   throttle شده باشد، فریمِ انیمیشن اجرا نمی‌شود و `getComputedStyle` هر
   ویژگیِ **در حال گذار** را روی مقدارِ اولش نشان می‌دهد — تا ابد. یک بار
   همین باعث شد فکر کنیم ریل خراب است. سنجشِ درست: اول
   `* { transition: none }` تزریق کن، بعد اندازه بگیر.

   ── تنزلِ آبرومند ──
   مرورگرِ بدونِ `calc()`ِ سیّال هم کارت‌ها را نشان می‌دهد، فقط بی‌حرکت.
   هیچ حالتی «هیچ‌چیز دیده نمی‌شود» نیست.
   ============================================================ */

.lb-rail {
	direction: rtl;
	text-align: start;
	color: var(--lb-text);
	margin-block: var(--lb-space-9);
}

.lb-rail__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--lb-space-4);
	margin-block-end: var(--lb-space-6);
}

@media (min-width: 640px) {
	.lb-rail__head {
		flex-direction: row;
		align-items: flex-end;
		gap: var(--lb-space-5);
		margin-block-end: var(--lb-space-7);
	}
}

.lb-rail__kicker {
	display: block;
	color: var(--lb-accent);
	font-size: var(--lb-text-ui-sm);
	font-weight: 700;
	letter-spacing: .1em;
	margin-block-end: var(--lb-space-2);
}

.lb-rail .lb-rail__title {
	margin: 0;
	color: var(--lb-brand);
	font-size: var(--lb-text-h2);
	font-weight: 700;
	line-height: var(--lb-leading-tight);
}

.lb-rail__rule {
	display: block;
	height: 2px;
	width: 64px;
	margin-block-start: var(--lb-space-3);
	border-radius: var(--lb-radius-pill);
	background: linear-gradient(to left, var(--lb-accent), transparent);
}

.lb-rail__all {
	display: inline-flex;
	align-items: center;
	gap: var(--lb-space-2);
	font-size: var(--lb-text-ui);
	font-weight: 500;
	color: var(--lb-brand);
	text-decoration: none;
	white-space: nowrap;
}

.lb-rail__all:hover { color: var(--lb-accent); }

/* فلشِ کنارِ «عرض جميع البرامج» — با CSS، همان الگوی `lb-rail__arrow`. */
.lb-rail__all::after {
	content: "";
	width: .45em;
	height: .45em;
	border: solid currentColor;
	border-width: 0 0 2px 2px;
	transform: rotate(45deg);
}

/* ── خودِ ریل ──
   موبایل: عرضِ ثابت و پیمایشِ افقی با `scroll-snap`.
   از ۷۶۸ به بعد: `flex-grow` جای پیمایش را می‌گیرد و ریل تمامِ عرض را پر
   می‌کند. ⚠️ عمداً هیچ «سنجاق‌کردنِ اسکرول»ی پورت نشد؛ آن نسخه
   `matchMedia` + `requestAnimationFrame` می‌خواست و صفحه‌ی خانه بودجه‌ی
   جاوااسکریپت ندارد. */
.lb-rail__track {
	display: flex;
	gap: var(--lb-space-2);
	height: clamp(390px, 58vh, 470px);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	scrollbar-width: none;
	padding-block-end: var(--lb-space-3);
}

.lb-rail__track::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
	.lb-rail__track {
		height: clamp(440px, 62vh, 580px);
		gap: var(--lb-space-3);
		overflow: visible;
		scroll-snap-type: none;
	}
}

.lb-rail__card {
	--o: 0;
	position: relative;
	overflow: hidden;
	scroll-snap-align: start;
	background: linear-gradient(160deg, var(--lb-brand-dark), var(--lb-brand));
	/* موبایل: عرضِ ثابت، ریل می‌لغزد. */
	flex: 0 0 calc(56px + var(--o) * (min(64vw, 280px) - 56px));
	border-radius: calc(32px + (1 - var(--o)) * 967px);
	/* ویژگی‌های واقعی گذار می‌کنند، نه `--o`. شرحش در سرِ همین بخش. */
	transition: flex-basis .7s cubic-bezier(.22, 1, .36, 1),
	            flex-grow .7s cubic-bezier(.22, 1, .36, 1),
	            border-radius .7s cubic-bezier(.22, 1, .36, 1);
}

.lb-rail__radio:checked + .lb-rail__card { --o: 1; }

@media (min-width: 768px) {
	.lb-rail__card {
		/* دسکتاپ: ریل با `flex-grow` تمامِ ظرف را پر می‌کند. */
		flex: calc(.6 + var(--o) * 4.4) 1 0px;
		min-width: 88px;
	}

	/* هاور باز می‌کند؛ تا وقتی ماوس روی ریل است، کارتِ انتخاب‌شده جا را
	   به کارتِ زیرِ ماوس می‌دهد. فقط روی دستگاهِ اشاره‌گرِ دقیق — روی لمس
	   `:hover` می‌چسبد و کارت باز می‌ماند. */
	@media (hover: hover) and (pointer: fine) {
		.lb-rail__card:hover { --o: 1; }
		.lb-rail__track:hover .lb-rail__radio:checked + .lb-rail__card:not(:hover) { --o: 0; }

		/* آیکن هم باید همان هاور را دنبال کند، وگرنه کارتِ بازِ زیرِ ماوس
		   هنوز فلشِ «باز کن» را نشان می‌دهد. قرینه‌ی دقیقِ دو قاعده‌ی بالا. */
		.lb-rail__card:hover .lb-rail__btn .icon-open { display: block; }
		.lb-rail__card:hover .lb-rail__btn .icon-closed { display: none; }
		.lb-rail__track:hover .lb-rail__radio:checked + .lb-rail__card:not(:hover) .lb-rail__btn .icon-open { display: none; }
		.lb-rail__track:hover .lb-rail__radio:checked + .lb-rail__card:not(:hover) .lb-rail__btn .icon-closed { display: block; }
	}
}

/* رادیو فقط حاملِ حالت است — دیده نمی‌شود ولی حذف هم نمی‌شود، چون
   `display: none` آن را از دسترسِ صفحه‌کلید بیرون می‌برد. */
.lb-rail__radio {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.lb-rail__radio:focus-visible + .lb-rail__card {
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--lb-accent) 70%, transparent);
}

/* برچسبِ تمام‌کارت — هدفِ لمس برای باز کردن. زیرِ لینک می‌نشیند. */
.lb-rail__hit {
	position: absolute;
	inset: 0;
	z-index: 2;
	cursor: pointer;
}

.lb-rail__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	transform: scale(calc(1.08 - var(--o) * .08));
	transition: transform .7s ease-out;
}

/* پرده — بسته تیره‌تر از بالا، باز تیره‌تر از پایین تا متن خوانده شود. */
/* ---- پرده‌ی روی عکسِ کارت ----
   ⚠️ **دو** پرده است که با `--o` در هم محو می‌شوند، نه یکی. نسخه‌ی
   تک‌لایه‌ی قبلی وقتی نوشته شد که کارت‌ها هنوز عکس نداشتند و فقط
   سرمه‌ای بودند؛ چگالی‌اش (۹۲٪ پایین تا ۲۲٪ بالا) برای «پس‌زمینه‌ی
   رنگی» تنظیم شده بود نه برای عکس. با آمدنِ عکس‌ها (۳۰ اوت) همان پرده
   عملاً کلِ تصویر را می‌پوشاند — عکس بود و دیده نمی‌شد.

   قاعده‌ی طرح این است: هرچه پایین‌تر غلیظ‌تر (چون متن آنجاست) و بالای
   کارت **باز** تقریباً شفاف، تا عکس نفس بکشد. کارتِ بسته پرده‌ی
   یکنواخت‌تری می‌خواهد چون تنها متنش عنوانِ عمودی است و از پایین تا
   وسط کشیده می‌شود.

   عددها عیناً از `design-system/reference/static-theme/theme.css`
   (`.emu-prog__scrim::before` و `::after`). */
.lb-rail__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.lb-rail__scrim::before,
.lb-rail__scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	transition: opacity .7s;
}

/* کارتِ بسته */
.lb-rail__scrim::before {
	opacity: calc(1 - var(--o));
	background: linear-gradient(to top,
	            color-mix(in srgb, var(--lb-brand) 86%, transparent) 0%,
	            color-mix(in srgb, var(--lb-brand-light) 52%, transparent) 45%,
	            color-mix(in srgb, var(--lb-brand-light) 26%, transparent) 100%);
}

/* کارتِ باز — بالای کارت عمداً تقریباً شفاف است. */
.lb-rail__scrim::after {
	opacity: var(--o);
	background: linear-gradient(to top,
	            color-mix(in srgb, var(--lb-brand) 94%, transparent) 0%,
	            color-mix(in srgb, var(--lb-brand) 74%, transparent) 30%,
	            color-mix(in srgb, var(--lb-brand-light) 34%, transparent) 58%,
	            color-mix(in srgb, var(--lb-brand-light) 10%, transparent) 82%);
}

@media (prefers-reduced-motion: reduce) {
	.lb-rail__scrim::before,
	.lb-rail__scrim::after { transition: none; }
}

/* حلقه‌ی طلایی — فقط وقتی کارت باز است. */
.lb-rail__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lb-accent) 45%, transparent);
	opacity: var(--o);
	transition: opacity .5s;
}

/* ---- نشانِ گوشه‌ی کارت ----
   در طرح یک دایره‌ی شیشه‌ای است که با باز شدنِ کارت بزرگ‌تر و طلایی
   می‌شود و فلشش از حالتِ مورّب («باز کن») به حالتِ صاف («برو») می‌چرخد.
   همه‌اش از همان `--o`ِ کارت می‌آید (۰ بسته، ۱ باز)، پس نه حالتِ تازه‌ای
   لازم دارد نه جاوااسکریپتی.

   ⚠️ `inset-inline-end` است نه `left`: ریل RTL است و در طرح این نشان
   سمتِ چپِ کارت می‌نشیند؛ با ویژگیِ منطقی اگر روزی سایتِ LTR این بلوک
   را برداشت، نشان خودش قرینه می‌شود. */
.lb-rail__btn {
	/* ⚠️ جای افقی‌اش به حالت بستگی دارد و با درصد ساخته می‌شود، نه با
	   عددِ ثابت. کارتِ **بسته** باریک است و نشان باید وسطِ عرضش بنشیند تا
	   با عنوانِ عمودیِ زیرش هم‌راستا شود — چسبیده به گوشه، کارت کج به نظر
	   می‌رسید. کارتِ **باز** همان گوشه‌ی طرح را می‌خواهد.
	   `50% - نصفِ قطر` وسط است و درصد روی **عرضِ خودِ کارت** حساب می‌شود،
	   پس با هر عرضی درست می‌ماند. `--o` بینِ این دو حالت درون‌یابی می‌کند. */
	--lb-rail-btn: 32px;
	position: absolute;
	z-index: 3;
	top: var(--lb-space-4);
	inset-inline-end: calc(
		(1 - var(--o)) * (50% - var(--lb-rail-btn) / 2)
		+ var(--o) * var(--lb-space-4)
	);
	width: calc(var(--lb-rail-btn) + var(--o) * 8px);
	height: calc(var(--lb-rail-btn) + var(--o) * 8px);
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--lb-radius-pill);
	pointer-events: none;
	background: color-mix(in srgb, var(--lb-accent) calc(var(--o) * 100%), var(--lb-on-brand-fill));
	border: 1px solid color-mix(in srgb, var(--lb-on-brand) calc(30% * (1 - var(--o))), transparent);
	color: color-mix(in srgb, var(--lb-brand) calc(var(--o) * 100%), var(--lb-on-brand));
	backdrop-filter: blur(4px);
	transition: width .5s, height .5s, background .5s, color .5s, inset-inline-end .5s;
}

/* ⚠️ اینجا `display` نوشته **نمی‌شود**. همان تله‌ی دکمه‌های ویدیوی بالای
   صفحه: قاعده‌ی «اندازه‌ی عمومیِ svg» اگر `display` داشته باشد ممکن است
   قاعده‌های حالتِ زیر را ببرد و هر دو آیکن با هم دیده شوند. ضمناً
   `.lb-rail__btn` فلکس است و فرزندش خودبه‌خود بلوکی می‌شود. */
.lb-rail__btn svg { width: 15px; height: 15px; }

/* بسته «باز کن» را نشان می‌دهد و باز «برو». حالت را همان انتخابگرهای
   `--o` تعیین می‌کنند — `display` با متغیرِ عددی سوئیچ نمی‌شود، پس
   اینجا صریح تکرار می‌شوند. */
.lb-rail__btn .icon-open { display: none; }

.lb-rail__radio:checked + .lb-rail__card .lb-rail__btn .icon-open { display: block; }
.lb-rail__radio:checked + .lb-rail__card .lb-rail__btn .icon-closed { display: none; }

@media (min-width: 768px) {
	.lb-rail__btn {
		--lb-rail-btn: 36px;
		top: var(--lb-space-5);
		inset-inline-end: calc(
			(1 - var(--o)) * (50% - var(--lb-rail-btn) / 2)
			+ var(--o) * var(--lb-space-5)
		);
		width: calc(var(--lb-rail-btn) + var(--o) * 12px);
		height: calc(var(--lb-rail-btn) + var(--o) * 12px);
	}
}

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

/* عنوانِ عمودی — تنها چیزی که در کارتِ بسته دیده می‌شود. */
/* ⚠️ وسط‌چینی با فلکس، نه با `inset: 50%` + `translateX`.
   طرح `right: 50%` **فیزیکی** دارد؛ ما `inset-inline-end` نوشته بودیم که
   در ظرفِ RTL یعنی `left` — قرینه‌ی آن. نتیجه: جعبه‌ی عنوان کاملاً سمتِ
   یکِ کارت می‌افتاد و روی کارتِ بسته‌ی ۵۶پیکسلی حتی ۸px از لبه بیرون
   می‌زد و ناخوانا می‌شد. `inset-inline: 0` + `justify-content: center`
   در هر دو جهت درست می‌ماند و اصلاً قابلِ قرینه‌شدن نیست. */
.lb-rail__vtitle {
	position: absolute;
	inset-inline: 0;
	inset-block-end: var(--lb-space-6);
	z-index: 4;
	display: flex;
	justify-content: center;
	opacity: calc(1 - var(--o));
	pointer-events: none;
	transition: opacity .3s;
}

.lb-rail__vtitle span {
	display: block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: var(--lb-on-brand);
	font-size: var(--lb-text-ui);
	font-weight: 700;
	white-space: nowrap;
}

.lb-rail__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	z-index: 4;
	display: block;
	padding: var(--lb-space-5);
	opacity: var(--o);
	transform: translateY(calc((1 - var(--o)) * 16px));
	/* ⚠️ بدنه رویدادِ اشاره نمی‌گیرد تا کلیک به برچسبِ زیرش برسد و کارت
	   بتواند بسته شود. فقط خودِ لینک استثناست. */
	pointer-events: none;
	transition: opacity .5s, transform .5s;
}

@media (min-width: 768px) { .lb-rail__body { padding: var(--lb-space-6); } }

.lb-rail__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--lb-space-2);
}

.lb-rail__chip {
	border-radius: var(--lb-radius-pill);
	border: 1px solid var(--lb-on-brand-line);
	background: var(--lb-on-brand-fill);
	padding: 3px 10px;
	font-size: var(--lb-text-ui-xs);
	font-weight: 500;
	color: var(--lb-on-brand-dim);
	white-space: nowrap;
}

.lb-rail__name {
	display: block;
	color: var(--lb-on-brand);
	font-size: var(--lb-text-h3);
	font-weight: 700;
	line-height: var(--lb-leading-tight);
	margin: var(--lb-space-3) 0 var(--lb-space-2);
}

.lb-rail__note {
	display: block;
	color: var(--lb-on-brand-dim);
	font-size: var(--lb-text-ui-sm);
	line-height: 1.75;
	max-width: 512px;
}

@media (min-width: 768px) { .lb-rail__note { font-size: var(--lb-text-ui); } }

.lb-rail__link {
	display: inline-flex;
	align-items: center;
	gap: var(--lb-space-2);
	min-height: var(--lb-tap-min);
	margin-block-start: var(--lb-space-3);
	padding-inline: var(--lb-space-5);
	border-radius: var(--lb-radius-lg);
	font-size: var(--lb-text-ui);
	font-weight: 700;
	text-decoration: none;
	/* طلاییِ **شیشه‌ای**، نه طلاییِ پُر — همان دستورِ نشانِ
	   «في أقل من ٣ أيام» روی کارتِ CTA. پُرشدگیِ طلایی روی عکسِ کارت
	   سنگین می‌افتاد و با دایره‌ی طلاییِ گوشه هم‌وزن می‌شد. */
	background: color-mix(in srgb, var(--lb-accent) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--lb-accent) 40%, transparent);
	backdrop-filter: blur(4px);
	color: var(--lb-accent-light);
	/* استثنای قاعده‌ی بالا — تنها چیزی در بدنه که باید کلیک‌پذیر باشد. */
	pointer-events: auto;
}

/* روی موبایل کارتِ باز باریک است و دکمه نباید سهمِ متن را بخورد. */
@media (max-width: 767px) {
	.lb-rail__link {
		min-height: 38px;
		padding-inline: var(--lb-space-4);
		font-size: var(--lb-text-ui-sm);
	}
}

.lb-rail__link:hover,
.lb-rail__link:focus-visible {
	color: var(--lb-accent-light);
	background: color-mix(in srgb, var(--lb-accent) 28%, transparent);
	border-color: color-mix(in srgb, var(--lb-accent) 55%, transparent);
}

/* فلش با CSS، نه SVG — پنج کارت یعنی پنج SVGِ تکراری برای دو خط شکل. */
.lb-rail__arrow {
	width: .45em;
	height: .45em;
	border: solid currentColor;
	border-width: 0 0 2px 2px;
	transform: rotate(45deg);
}

/* ---- نقطه‌های موبایل ----
   روی موبایل ریل افقی می‌لغزد و هیچ نشانه‌ای نبود که چند کارت هست و
   کدام باز است. طرح همین نقطه‌ها را دارد. صفر جاوااسکریپت: هر رادیو
   `nth-of-type` خودش را دارد و `:has()` نقطه‌ی متناظر را می‌کشد.

   ⚠️ `nth-of-type` روی `input` می‌شمارد نه روی همه‌ی فرزندها — داخلِ
   `.lb-rail__track` یک `<input>` و یک `<div>` یکی‌درمیان می‌آیند، پس
   `input:nth-of-type(3)` یعنی سومین رادیو. اگر روزی `<input>` داخلِ کارت
   برود این می‌شکند؛ همان چیزی که تستِ ریل نگهبانش است.

   سقف عمداً هشت است: ریل امروز پنج کارت دارد و بیش از هشت کارت روی
   موبایل اصلاً قابلِ پیمایش نیست. */
.lb-rail__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-block-start: var(--lb-space-5);
}

@media (min-width: 768px) { .lb-rail__dots { display: none; } }

.lb-rail__dots span {
	width: 6px;
	height: 6px;
	border-radius: var(--lb-radius-pill);
	background: color-mix(in srgb, var(--lb-brand) 20%, transparent);
	transition: width .5s, background .5s;
}

.lb-rail:has(.lb-rail__radio:nth-of-type(1):checked) .lb-rail__dots span:nth-child(1),
.lb-rail:has(.lb-rail__radio:nth-of-type(2):checked) .lb-rail__dots span:nth-child(2),
.lb-rail:has(.lb-rail__radio:nth-of-type(3):checked) .lb-rail__dots span:nth-child(3),
.lb-rail:has(.lb-rail__radio:nth-of-type(4):checked) .lb-rail__dots span:nth-child(4),
.lb-rail:has(.lb-rail__radio:nth-of-type(5):checked) .lb-rail__dots span:nth-child(5),
.lb-rail:has(.lb-rail__radio:nth-of-type(6):checked) .lb-rail__dots span:nth-child(6),
.lb-rail:has(.lb-rail__radio:nth-of-type(7):checked) .lb-rail__dots span:nth-child(7),
.lb-rail:has(.lb-rail__radio:nth-of-type(8):checked) .lb-rail__dots span:nth-child(8) {
	width: 24px;
	background: var(--lb-accent);
}

@media (prefers-reduced-motion: reduce) {
	.lb-rail__dots span { transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.lb-rail__card,
	.lb-rail__img,
	.lb-rail__body,
	.lb-rail__vtitle,
	.lb-rail__card::after { transition: none; }
}

/* ============ مقالات: چیدمانِ شاخص + ستونِ کناری — `[emu_posts layout="featured"]` ============

   ⚠️ با **دو** نوشته هم باید درست بیفتد، نه فقط با سه: امروز سایت دو
   نوشته دارد. شاخص همیشه می‌آید؛ ستونِ کناری هرچه ماند.
   ============================================================ */

.lb-feed {
	direction: rtl;
	text-align: start;
	color: var(--lb-text);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lb-space-5);
	align-items: stretch;
}

@media (min-width: 1024px) {
	.lb-feed { grid-template-columns: 7fr 5fr; }
}

/* ---- کارتِ شاخص ---- */
.lb-feat {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--lb-radius-xl);
	border: 1px solid var(--lb-border);
	background: var(--lb-brand);
	aspect-ratio: 16 / 10;
	text-decoration: none;
	box-shadow: var(--lb-shadow);
	transition: box-shadow var(--lb-motion-base) var(--lb-ease);
}

@media (min-width: 1024px) {
	.lb-feat { aspect-ratio: auto; height: 100%; min-height: 420px; }
}

.lb-feat:hover,
.lb-feat:focus-visible { box-shadow: var(--lb-shadow-lg); }

.lb-feat__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	transition: transform var(--lb-motion-slow) var(--lb-ease);
}

.lb-feat:hover .lb-feat__img,
.lb-feat:focus-visible .lb-feat__img { transform: scale(1.05); }

.lb-feat__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
	            color-mix(in srgb, var(--lb-brand) 92%, transparent) 0%,
	            color-mix(in srgb, var(--lb-brand) 58%, transparent) 42%,
	            transparent 80%);
}

.lb-feat__tag {
	position: absolute;
	inset-block-start: var(--lb-space-4);
	inset-inline-end: var(--lb-space-4);
	padding: 4px 12px;
	border-radius: var(--lb-radius-pill);
	font-size: var(--lb-text-ui-sm);
	font-weight: 700;
	color: var(--lb-accent-light);
	background: color-mix(in srgb, var(--lb-accent) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--lb-accent) 40%, transparent);
	backdrop-filter: blur(4px);
}

/* ⚠️ این جعبه از **پایین** لنگر می‌گیرد و ارتفاعش را محتوا تعیین می‌کند،
   ولی خودِ کارت روی موبایل `aspect-ratio: 16/10` است (۳۴۳×۲۱۴). با
   عنوانِ سه‌خطی محتوا ۲۴۲px می‌شد و جعبه از **بالای کارت می‌زد بیرون** —
   برچسبِ دسته و چیپ‌های تاریخ روی هم می‌افتادند. دو راه با هم بسته‌اش
   می‌کنند: پدینگِ کوچک‌ترِ موبایل (اینجا) و بریدنِ عنوان در دو خط
   (پایین‌تر). سنجه: محتوا از ۲۴۲ به ۱۶۵ رسید. */
.lb-feat__body {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	display: block;
	padding: var(--lb-space-4);
}

@media (min-width: 640px) { .lb-feat__body { padding: var(--lb-space-6); } }
@media (min-width: 640px) { .lb-feat__more { margin-block-start: var(--lb-space-4); } }

.lb-feat__meta {
	display: flex;
	align-items: center;
	gap: var(--lb-space-2);
	margin-block-end: var(--lb-space-3);
}

.lb-feed__chip {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 10px;
	border-radius: var(--lb-radius-pill);
	border: 1px solid var(--lb-on-brand-line);
	background: var(--lb-on-brand-fill);
	font-size: var(--lb-text-ui-xs);
	font-weight: 500;
	color: var(--lb-on-brand-dim);
	backdrop-filter: blur(4px);
}

.lb-feed__ic { width: 12px; height: 12px; flex: none; }

/* روی موبایل عنوان در دو خط بریده می‌شود («…»). عنوانِ سه‌خطی جعبه را
   از کارت بیرون می‌زد؛ روی دسکتاپ کارت `min-height: 420px` است و جا
   دارد، پس آنجا بریده نمی‌شود. */
.lb-feat__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--lb-on-brand);
	font-size: var(--lb-text-h3);
	font-weight: 700;
	line-height: var(--lb-leading-tight);
	margin-block-end: var(--lb-space-2);
	transition: color var(--lb-motion-base) var(--lb-ease);
}

@media (min-width: 1024px) {
	.lb-feat__title {
		display: block;
		overflow: visible;
	}
}

.lb-feat:hover .lb-feat__title,
.lb-feat:focus-visible .lb-feat__title { color: var(--lb-accent-light); }

.lb-feat__excerpt {
	display: none;
	color: var(--lb-on-brand-dim);
	font-size: var(--lb-text-ui);
	line-height: 1.75;
	max-width: 576px;
}

@media (min-width: 640px) {
	.lb-feat__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

/* ⚠️ حاشیه‌ی بالای این لینک روی موبایل عمداً ریز است. جعبه از **پایین**
   لنگر است، پس هر پیکسلی که اینجا کم شود، عنوان و چیپ‌ها همان‌قدر
   **پایین‌تر** می‌آیند و بالای کارت باز می‌شود. */
.lb-feat__more {
	display: inline-flex;
	align-items: center;
	gap: var(--lb-space-2);
	margin-block-start: var(--lb-space-1);
	font-size: var(--lb-text-ui);
	font-weight: 700;
	color: var(--lb-accent-light);
}

/* فلش با CSS، نه SVG. */
.lb-feed__arrow {
	width: .45em;
	height: .45em;
	border: solid currentColor;
	border-width: 0 0 2px 2px;
	transform: rotate(45deg);
	transition: transform var(--lb-motion-base) var(--lb-ease);
}

.lb-feat:hover .lb-feed__arrow { transform: rotate(45deg) translate(3px, 3px); }

/* ---- ستونِ کناری ---- */
.lb-feed__side { display: flex; flex-direction: column; }

.lb-side {
	flex: 1;
	display: flex;
	align-items: flex-start;
	gap: var(--lb-space-4);
	padding-block: var(--lb-space-5);
	border-bottom: 1px solid var(--lb-border);
}

.lb-side:first-child { padding-block-start: 0; }
.lb-side:last-child  { padding-block-end: 0; border-bottom: 0; }

.lb-side__media {
	display: block;
	position: relative;
	width: 44%;
	flex: none;
	aspect-ratio: 16 / 10;
	border-radius: var(--lb-radius-lg);
	overflow: hidden;
	background: var(--lb-border);
}

.lb-side__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	margin: 0;
	transition: transform var(--lb-motion-slow) var(--lb-ease);
}

.lb-side:hover .lb-side__img { transform: scale(1.05); }

.lb-side__body { flex: 1; min-width: 0; }

.lb-side__tag {
	display: block;
	color: var(--lb-accent);
	font-size: var(--lb-text-ui-xs);
	font-weight: 700;
	margin-block-end: 6px;
}

.lb-feed .lb-side__title {
	margin: 0;
	font-size: var(--lb-text-ui-lg);
	font-weight: 700;
	line-height: var(--lb-leading-tight);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lb-feed .lb-side__title a {
	color: var(--lb-brand);
	text-decoration: none;
	transition: color var(--lb-motion-base) var(--lb-ease);
}

.lb-side:hover .lb-side__title a { color: var(--lb-accent); }

.lb-side__excerpt {
	display: none;
	color: var(--lb-muted);
	font-size: var(--lb-text-ui);
	line-height: 1.75;
	margin: 6px 0 0;
}

@media (min-width: 1024px) {
	.lb-side__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
}

.lb-side__meta {
	display: flex;
	align-items: center;
	gap: var(--lb-space-3);
	margin-block-start: 10px;
}

.lb-side__meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--lb-text-ui-sm);
	color: var(--lb-ghost);
}

.lb-side__sep {
	width: 4px;
	height: 4px;
	flex: none;
	border-radius: var(--lb-radius-pill);
	background: var(--lb-border-strong);
}

@media (prefers-reduced-motion: reduce) {
	.lb-feat,
	.lb-feat__img,
	.lb-feat__title,
	.lb-feed__arrow,
	.lb-side__img,
	.lb-feed .lb-side__title a { transition: none; }
	.lb-feat:hover .lb-feat__img,
	.lb-side:hover .lb-side__img,
	.lb-feat:hover .lb-feed__arrow { transform: none; }
}