/*
 * سنجمان — کارت مقالات (اسنیپت Angie «SJM Related Articles»)
 * یک طراحی برای مقالات مرتبط صفحهٔ آزمون، بخش مجلهٔ صفحهٔ اول و آرشیو بلاگ.
 *
 * رنگ‌ها، ستون‌ها، فاصله، گردی، نسبت تصویر، تعداد خط، تایپوگرافی و چینش همه از پنل
 * خود ویجت در المنتور تنظیم می‌شوند؛ اینجا فقط مقدار پیش‌فرض متغیرها آمده است.
 * پیش‌فرض‌ها هم‌خانوادهٔ «کاتالوگ آزمون‌ها»یند تا صفحهٔ آزمون یک زبان بصری داشته باشد.
 */

.sjm-ra {
	--sjm-ra-cols: 3;
	--sjm-ra-gap: 24px;
	--sjm-ra-radius: 16px;
	--sjm-ra-ratio: 16 / 9;
	--sjm-ra-excerpt-lines: 3;
	--sjm-ra-primary: #0EA48A;
	--sjm-ra-primary-deep: #0B8571;
	--sjm-ra-tint: #E8F5F2;
	--sjm-ra-ink: #37474F;
	--sjm-ra-text: #66757B;
	--sjm-ra-card: #FFFFFF;
	--sjm-ra-line: #E2EAE8;
	direction: rtl;
	font-family: inherit;
}

/* ‼ ویژگی hidden در استایل پیش‌فرض مرورگر ضعیف‌ترین قاعده است؛ بدون این خط کارت‌های
   بعد از «نمایش بیشتر» و خود دکمه بعد از تمام‌شدن مقالات پنهان نمی‌شوند. */
.sjm-ra [hidden] { display: none !important; }

.sjm-ra .sjm-ra-note {
	margin: 0 0 18px;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--sjm-ra-tint);
	color: var(--sjm-ra-ink);
	font-size: 14px;
	line-height: 1.9;
}

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

.sjm-ra-grid {
	display: grid;
	grid-template-columns: repeat(var(--sjm-ra-cols), minmax(0, 1fr));
	gap: var(--sjm-ra-gap);
}

.sjm-ra-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--sjm-ra-card);
	border: 1px solid var(--sjm-ra-line);
	border-radius: var(--sjm-ra-radius);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(38, 50, 56, .04);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.sjm-ra-card:hover {
	transform: translateY(-4px);
	border-color: rgba(14, 164, 138, .35);
	box-shadow: 0 16px 32px -18px rgba(38, 50, 56, .32);
}

.sjm-ra-card:focus-within {
	border-color: var(--sjm-ra-primary);
}

.sjm-ra-card.is-entering { animation: sjmRaIn .3s ease both; }

@keyframes sjmRaIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- تصویر */

.sjm-ra-media {
	position: relative;
	aspect-ratio: var(--sjm-ra-ratio);
	overflow: hidden;
	background: var(--sjm-ra-tint);
}

.sjm-ra .sjm-ra-media img.sjm-ra-img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
	transition: transform .5s ease;
}

.sjm-ra-card:hover .sjm-ra-img { transform: scale(1.04); }

/* کارت بدون تصویر: همان بافت نقطه‌ای «پاسخ‌نامه» کاتالوگ آزمون‌ها، با نام آزمون. */
.sjm-ra-ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background-color: var(--sjm-ra-tint);
	background-image: radial-gradient(circle, rgba(14, 164, 138, .22) 1.6px, transparent 1.9px);
	background-size: 14px 14px;
	background-position: 3px 3px;
}

.sjm-ra-ph span {
	padding: 6px 16px;
	border-radius: 999px;
	background: var(--sjm-ra-tint);
	color: var(--sjm-ra-primary-deep);
	font-size: 22px;
	font-weight: 800;
	letter-spacing: .01em;
	unicode-bidi: isolate;
	box-shadow: 0 0 0 10px var(--sjm-ra-tint);
}

/* ---------------------------------------------------------------- بدنه */

.sjm-ra-body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	padding: 16px 18px 16px;
}

.sjm-ra .sjm-ra-cat {
	align-self: flex-start;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--sjm-ra-tint);
	color: var(--sjm-ra-primary-deep);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.7;
}

.sjm-ra .sjm-ra-title {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--sjm-ra-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sjm-ra .sjm-ra-title a,
.sjm-ra .sjm-ra-title a:visited {
	color: inherit;
	text-decoration: none;
}

/* کل کارت قابل کلیک است: پوشش نامرئیِ لینک عنوان روی تمام کارت کشیده می‌شود. */
.sjm-ra .sjm-ra-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sjm-ra-card:hover .sjm-ra-title { color: var(--sjm-ra-primary-deep); }

.sjm-ra .sjm-ra-title a:focus-visible { outline: none; }
.sjm-ra .sjm-ra-title a:focus-visible::after {
	outline: 2px solid var(--sjm-ra-primary);
	outline-offset: -2px;
	border-radius: var(--sjm-ra-radius);
}

.sjm-ra .sjm-ra-excerpt {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.95;
	color: var(--sjm-ra-text);
	display: -webkit-box;
	/* تعداد خط از پنل؛ صفر نامعتبر است و به «بدون محدودیت» برمی‌گردد. */
	-webkit-line-clamp: var(--sjm-ra-excerpt-lines, 3);
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ردیف پایین همیشه به کف کارت می‌چسبد تا در یک ردیف هم‌تراز بماند. */
.sjm-ra-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
	border-top: 1px solid var(--sjm-ra-line);
}

.sjm-ra .sjm-ra-time {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--sjm-ra-text);
	font-size: 12.5px;
	white-space: nowrap;
}

.sjm-ra-time svg {
	width: 15px;
	height: 15px;
	color: var(--sjm-ra-primary);
	flex: none;
}

.sjm-ra .sjm-ra-read {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	margin-inline-start: auto;
	color: var(--sjm-ra-primary-deep);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.sjm-ra-read svg {
	width: 16px;
	height: 16px;
	transition: transform .2s ease;
}

.sjm-ra-card:hover .sjm-ra-read svg { transform: translateX(-3px); }

/* -------------------------------------------------------- نمایش بیشتر */

.sjm-ra-more-wrap {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

/* ‼ reset.css قالب Hello روی [type=button] حاشیهٔ صورتی و رنگ پس‌زمینهٔ هاور می‌گذارد؛
   همهٔ حالت‌ها با دو کلاس نوشته شده‌اند تا برنده باشند. */
.sjm-ra .sjm-ra-more,
.sjm-ra .sjm-ra-more:hover,
.sjm-ra .sjm-ra-more:focus {
	-webkit-appearance: none;
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: auto;
	margin: 0;
	padding: 10px 22px 10px 18px;
	border: 1.5px solid var(--sjm-ra-primary);
	border-radius: 999px;
	background: transparent;
	color: var(--sjm-ra-primary-deep);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	text-transform: none;
	cursor: pointer;
	box-shadow: none;
	transition: background-color .2s ease, color .2s ease;
}

.sjm-ra .sjm-ra-more:hover {
	background: var(--sjm-ra-primary);
	color: #fff;
}

.sjm-ra .sjm-ra-more:focus-visible {
	outline: 2px solid var(--sjm-ra-primary);
	outline-offset: 3px;
}

.sjm-ra-more-n {
	display: inline-grid;
	place-items: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--sjm-ra-tint);
	color: var(--sjm-ra-primary-deep);
	font-size: 12px;
	font-weight: 700;
}

.sjm-ra .sjm-ra-more:hover .sjm-ra-more-n {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

.sjm-ra-more svg {
	width: 16px;
	height: 16px;
}

/* -------------------------------------------------- لینک «همهٔ مقالات» */

.sjm-ra-all-wrap {
	display: flex;
	justify-content: center;
	margin-top: 28px;
}

.sjm-ra .sjm-ra-all,
.sjm-ra .sjm-ra-all:visited {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 22px 10px 16px;
	border: 1.5px solid var(--sjm-ra-primary);
	border-radius: 999px;
	background: transparent;
	color: var(--sjm-ra-primary-deep);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}

.sjm-ra .sjm-ra-all:hover,
.sjm-ra .sjm-ra-all:focus-visible {
	background: var(--sjm-ra-primary);
	color: #fff;
}

.sjm-ra .sjm-ra-all:focus-visible {
	outline: 2px solid var(--sjm-ra-primary);
	outline-offset: 3px;
}

.sjm-ra-all svg {
	width: 16px;
	height: 16px;
	transition: transform .2s ease;
}

.sjm-ra .sjm-ra-all:hover svg { transform: translateX(-3px); }

/* ------------------------------------------------ دسته‌ها (آرشیو) */

.sjm-ra .sjm-ra-cats {
	margin: 0 0 24px;
}

.sjm-ra .sjm-ra-cats ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sjm-ra .sjm-ra-cats li {
	margin: 0;
	padding: 0;
}

.sjm-ra .sjm-ra-chip,
.sjm-ra .sjm-ra-chip:visited {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px 7px 8px;
	border: 1px solid var(--sjm-ra-line);
	border-radius: 999px;
	background: var(--sjm-ra-card);
	color: var(--sjm-ra-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.sjm-ra .sjm-ra-chip:hover {
	border-color: var(--sjm-ra-primary);
	color: var(--sjm-ra-primary-deep);
}

.sjm-ra .sjm-ra-chip:focus-visible {
	outline: 2px solid var(--sjm-ra-primary);
	outline-offset: 2px;
}

.sjm-ra .sjm-ra-chip.is-active {
	background: var(--sjm-ra-primary);
	border-color: var(--sjm-ra-primary);
	color: #fff;
}

.sjm-ra-chip-n {
	display: inline-grid;
	place-items: center;
	min-width: 26px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--sjm-ra-tint);
	color: var(--sjm-ra-primary-deep);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
}

.sjm-ra .sjm-ra-chip.is-active .sjm-ra-chip-n {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* ------------------------------------------------------- صفحه‌بندی */

.sjm-ra .sjm-ra-pager {
	margin-top: 40px;
}

.sjm-ra .sjm-ra-pager ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* flex روی li: بدون آن فاصلهٔ خط زمینه باعث می‌شد دکمهٔ «بعدی» (که متنش روی گوشی پنهان است) ۳px بالاتر بنشیند. */
.sjm-ra .sjm-ra-pager li {
	display: flex;
	margin: 0;
	padding: 0;
}

.sjm-ra .sjm-ra-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--sjm-ra-line);
	border-radius: 999px;
	background: var(--sjm-ra-card);
	color: var(--sjm-ra-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

.sjm-ra .sjm-ra-pager a.page-numbers:hover {
	border-color: var(--sjm-ra-primary);
	color: var(--sjm-ra-primary-deep);
}

.sjm-ra .sjm-ra-pager a.page-numbers:focus-visible {
	outline: 2px solid var(--sjm-ra-primary);
	outline-offset: 2px;
}

.sjm-ra .sjm-ra-pager .page-numbers.current {
	background: var(--sjm-ra-primary);
	border-color: var(--sjm-ra-primary);
	color: #fff;
}

.sjm-ra .sjm-ra-pager .page-numbers.dots {
	min-width: 20px;
	padding: 0 2px;
	border-color: transparent;
	background: transparent;
	color: var(--sjm-ra-text);
}

.sjm-ra .sjm-ra-pager .prev,
.sjm-ra .sjm-ra-pager .next {
	padding: 0 16px;
}

.sjm-ra-pager svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* ----------------------------------------------------------- واکنش‌گرا */

@media (max-width: 1024px) {
	.sjm-ra { --sjm-ra-cols: 2; }
}

@media (max-width: 640px) {
	.sjm-ra { --sjm-ra-cols: 1; --sjm-ra-gap: 16px; }
	.sjm-ra-body { padding: 14px 16px; }

	/* دسته‌ها در یک ردیف با اسکرول افقی، به‌جای چند ردیف دکمه بالای مقالات. */
	.sjm-ra .sjm-ra-cats ul {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 6px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}
	.sjm-ra .sjm-ra-cats ul::-webkit-scrollbar { display: none; }

	.sjm-ra .sjm-ra-pager { margin-top: 28px; }
	.sjm-ra .sjm-ra-pager .page-numbers { min-width: 38px; height: 38px; padding: 0 10px; }
	.sjm-ra .sjm-ra-pager .prev,
	.sjm-ra .sjm-ra-pager .next { padding: 0 12px; }
	/* روی گوشی فقط فلش؛ متن برای صفحه‌خوان می‌ماند. */
	.sjm-ra .sjm-ra-pager-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sjm-ra-card,
	.sjm-ra .sjm-ra-media img.sjm-ra-img,
	.sjm-ra-read svg,
	.sjm-ra-all svg { transition: none; }
	.sjm-ra .sjm-ra-all:hover svg { transform: none; }
	.sjm-ra-card:hover,
	.sjm-ra-card:hover .sjm-ra-img { transform: none; }
	.sjm-ra-card.is-entering { animation: none; }
}