/*!
 * Editor's Choice — انتخاب سردبیر
 * استایل بخش انتخاب سردبیر (RTL، ریسپانسیو، سازگار با حالت تاریک)
 */

/* ---------------------------------------------------------------
   1) توکن‌های رنگ و اندازه
   --------------------------------------------------------------- */
.hrtec {
	--hrtec-accent: #c6a35c;
	--hrtec-accent-soft: #f6efe1;
	--hrtec-accent-deep: #806a3c;

	--hrtec-bg: #f4f4f6;
	--hrtec-surface: #ffffff;
	--hrtec-surface-2: #faf9f6;
	--hrtec-text: #171b23;
	--hrtec-text-soft: #6b7280;
	--hrtec-border: #ededf0;
	--hrtec-rail: #e8e2d4;
	--hrtec-shadow: 0 24px 60px -34px rgba(15, 20, 30, 0.45);
	--hrtec-hero-shadow: 0 30px 70px -40px rgba(15, 20, 30, 0.7);

	--hrtec-radius: 22px;
	--hrtec-radius-sm: 12px;
	--hrtec-max: 1280px;

	box-sizing: border-box;
	display: block;
	background: var(--hrtec-bg);
	color: var(--hrtec-text);
	padding: clamp(36px, 5.5vw, 76px) clamp(14px, 3vw, 28px);
	font-family: inherit;
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
}

.hrtec *,
.hrtec *::before,
.hrtec *::after {
	box-sizing: border-box;
}

/* حالت تاریک دستی و خودکار */
.hrtec[data-scheme="dark"],
html[data-theme="dark"] .hrtec[data-scheme="auto"],
html[data-mode="dark"] .hrtec[data-scheme="auto"],
html.dark .hrtec[data-scheme="auto"],
body.dark .hrtec[data-scheme="auto"],
body.dark-mode .hrtec[data-scheme="auto"],
body.theme-dark .hrtec[data-scheme="auto"] {
	--hrtec-bg: #0e1116;
	--hrtec-surface: #161a21;
	--hrtec-surface-2: #1c212a;
	--hrtec-text: #eef1f6;
	--hrtec-text-soft: #9aa4b2;
	--hrtec-border: #242a34;
	--hrtec-rail: #2e3542;
	--hrtec-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
	--hrtec-hero-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.95);
}

@media (prefers-color-scheme: dark) {
	html:not([data-theme="light"]):not(.light) body:not(.light-mode) .hrtec[data-scheme="auto"] {
		--hrtec-bg: #0e1116;
		--hrtec-surface: #161a21;
		--hrtec-surface-2: #1c212a;
		--hrtec-text: #eef1f6;
		--hrtec-text-soft: #9aa4b2;
		--hrtec-border: #242a34;
		--hrtec-rail: #2e3542;
		--hrtec-shadow: 0 24px 60px -34px rgba(0, 0, 0, 0.9);
		--hrtec-hero-shadow: 0 30px 70px -40px rgba(0, 0, 0, 0.95);
	}
}

.hrtec__inner {
	max-width: var(--hrtec-max);
	margin-inline: auto;
}

/* ---------------------------------------------------------------
   2) سربرگ بخش
   --------------------------------------------------------------- */
.hrtec__head {
	text-align: center;
	margin-bottom: clamp(24px, 3vw, 42px);
}

.hrtec__ornament {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(10px, 1.4vw, 18px);
}

.hrtec__rule {
	display: block;
	height: 1px;
	width: clamp(56px, 11vw, 150px);
	background: linear-gradient(to left, transparent, var(--hrtec-accent));
}

.hrtec__rule:last-child {
	background: linear-gradient(to right, transparent, var(--hrtec-accent));
}

.hrtec__crest {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--hrtec-accent-soft);
	color: var(--hrtec-accent-deep);
	flex: 0 0 auto;
}

.hrtec__crest .hrtec-icon {
	width: 20px;
	height: 20px;
	opacity: 1;
}

.hrtec__title {
	margin: clamp(12px, 1.6vw, 18px) 0 6px;
	padding: 0;
	font-size: clamp(24px, 3vw, 40px);
	font-weight: 800;
	line-height: 1.5;
	color: var(--hrtec-text);
}

.hrtec__subtitle {
	margin: 0;
	padding: 0;
	font-size: clamp(13px, 1.1vw, 16px);
	color: var(--hrtec-text-soft);
}

/* ---------------------------------------------------------------
   3) شبکه اصلی
   --------------------------------------------------------------- */
.hrtec__grid {
	display: grid;
	gap: clamp(16px, 2vw, 26px);
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
	grid-template-areas: "aside hero";
	align-items: stretch;
}

.hrtec-hero {
	grid-area: hero;
}

.hrtec__aside {
	grid-area: aside;
}

/* ---------------------------------------------------------------
   4) کارت سرمقاله
   --------------------------------------------------------------- */
.hrtec-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(400px, 44vw, 640px);
	border-radius: var(--hrtec-radius);
	overflow: hidden;
	box-shadow: var(--hrtec-hero-shadow);
	background: #10141b;
}

.hrtec-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.hrtec-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
	will-change: transform;
}

.hrtec-hero:hover .hrtec-hero__media img {
	transform: scale(1.045);
}

.hrtec-hero__scrim {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(8, 10, 14, 0.94) 0%, rgba(8, 10, 14, 0.78) 26%, rgba(8, 10, 14, 0.28) 58%, rgba(8, 10, 14, 0.1) 78%),
		linear-gradient(to bottom, rgba(8, 10, 14, 0.45) 0%, transparent 30%);
}

.hrtec-hero__flag {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 12px 18px;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: rgba(10, 12, 16, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-top: 0;
	border-inline-start: 0;
	border-start-start-radius: var(--hrtec-radius);
	border-end-end-radius: 16px;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.hrtec-hero__flag .hrtec-icon {
	color: var(--hrtec-accent);
	width: 16px;
	height: 16px;
	opacity: 1;
}

.hrtec-hero__body {
	position: relative;
	z-index: 2;
	padding: clamp(20px, 2.6vw, 34px);
	color: #fff;
}

.hrtec-hero__title {
	margin: 12px 0 0;
	padding: 0;
	font-size: clamp(20px, 2.2vw, 32px);
	font-weight: 800;
	line-height: 1.75;
	color: #fff;
}

.hrtec-hero__title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(var(--hrtec-accent), var(--hrtec-accent));
	background-size: 0% 2px;
	background-repeat: no-repeat;
	background-position: right 100%;
	transition: background-size 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.hrtec-hero__title a:hover,
.hrtec-hero__title a:focus-visible {
	background-size: 100% 2px;
}

.hrtec-hero__excerpt {
	margin: 12px 0 0;
	padding: 0;
	max-width: 62ch;
	font-size: clamp(13px, 1.05vw, 15px);
	line-height: 2.1;
	color: rgba(255, 255, 255, 0.78);
}

.hrtec-hero__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: clamp(18px, 2vw, 26px);
}

/* دکمه اصلی */
.hrtec-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	border-radius: var(--hrtec-radius-sm);
	background: var(--hrtec-accent);
	color: #1a1509;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
	box-shadow: 0 14px 30px -16px rgba(0, 0, 0, 0.8);
	transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}

.hrtec-btn:hover,
.hrtec-btn:focus-visible {
	filter: brightness(1.07);
	transform: translateY(-2px);
	color: #1a1509;
}

.hrtec-btn .hrtec-icon {
	width: 17px;
	height: 17px;
	opacity: 1;
	transition: transform 0.3s ease;
}

.hrtec-btn:hover .hrtec-icon {
	transform: translateX(-4px);
}

/* ---------------------------------------------------------------
   5) برچسب دسته و اطلاعات مطلب
   --------------------------------------------------------------- */
.hrtec-chip {
	display: inline-flex;
	align-items: center;
	align-self: start;
	max-width: 100%;
	padding: 4px 11px;
	border-radius: 7px;
	background: var(--chip-bg, var(--hrtec-accent-soft));
	color: var(--chip-fg, var(--hrtec-accent-deep));
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1.9;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: filter 0.2s ease;
}

.hrtec-chip:hover {
	filter: brightness(0.96);
	color: var(--chip-fg, var(--hrtec-accent-deep));
}

.hrtec-chip--hero {
	background: rgba(10, 12, 16, 0.62);
	border: 1px solid rgba(255, 255, 255, 0.16);
	color: #ffffff;
	font-size: 12px;
	padding: 5px 13px;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.hrtec-chip--hero:hover {
	color: #ffffff;
	background: rgba(10, 12, 16, 0.78);
	filter: none;
}

.hrtec-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.hrtec-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--hrtec-text-soft);
	white-space: nowrap;
}

.hrtec-meta--hero .hrtec-meta__item {
	padding: 9px 13px;
	border-radius: 10px;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(10, 12, 16, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.hrtec-icon {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	opacity: 0.8;
}

/* ---------------------------------------------------------------
   6) فهرست کناری
   --------------------------------------------------------------- */
.hrtec__aside {
	background: var(--hrtec-surface);
	border: 1px solid var(--hrtec-border);
	border-radius: var(--hrtec-radius);
	box-shadow: var(--hrtec-shadow);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(6px, 0.9vw, 12px) 0;
	overflow: hidden;
}

.hrtec-list {
	--rail: clamp(52px, 5vw, 74px);
	--pad-i: clamp(12px, 1.5vw, 20px);
	--pad-b: clamp(12px, 1.4vw, 18px);

	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}

.hrtec-item {
	position: relative;
	margin: 0;
	padding: 0;
}

/* خط عمودی تایم‌لاین */
.hrtec-item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	inset-inline-start: calc(var(--pad-i) + var(--rail) - 5px);
	width: 1px;
	background: var(--hrtec-rail);
	pointer-events: none;
}

.hrtec-item:first-child::before {
	top: 14px;
}

.hrtec-item:last-child::before {
	bottom: 14px;
}

/* جداکننده افقی */
.hrtec-item + .hrtec-item::after {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: calc(var(--pad-i) + var(--rail) + 12px);
	inset-inline-end: var(--pad-i);
	height: 1px;
	background: var(--hrtec-border);
	pointer-events: none;
}

.hrtec-item__link {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: var(--rail) auto minmax(0, 1fr);
	align-items: center;
	gap: clamp(10px, 1.3vw, 18px);
	padding: var(--pad-b) var(--pad-i);
	text-decoration: none;
	color: inherit;
	border-radius: 14px;
	transition: background-color 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.hrtec-item__link:hover,
.hrtec-item.is-active > .hrtec-item__link,
.hrtec-item__link:focus-visible {
	background: var(--hrtec-surface-2);
	transform: translateX(-4px);
}

.hrtec-item__link:focus-visible {
	outline: 2px solid var(--hrtec-accent);
	outline-offset: 2px;
}

.hrtec-item__rail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: var(--rail);
	flex: 0 0 auto;
}

.hrtec-item__num {
	font-family: "Iranian Sans", "Times New Roman", Georgia, serif;
	font-size: clamp(22px, 2.1vw, 34px);
	font-weight: 700;
	line-height: 1;
	color: var(--hrtec-accent);
	font-variant-numeric: tabular-nums;
	opacity: 0.9;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.hrtec-item__link:hover .hrtec-item__num,
.hrtec-item.is-active .hrtec-item__num {
	opacity: 1;
	transform: scale(1.06);
}

.hrtec-item__dot {
	position: relative;
	width: 9px;
	height: 9px;
	flex: 0 0 9px;
}

.hrtec-item__dot::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: 50%;
	background: var(--hrtec-accent);
	opacity: 0.45;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.hrtec-item:first-child .hrtec-item__dot::before,
.hrtec-item.is-active .hrtec-item__dot::before {
	background: var(--hrtec-bg);
	border: 2px solid var(--hrtec-accent);
	opacity: 1;
}

.hrtec-item__link:hover .hrtec-item__dot::before {
	opacity: 1;
	transform: scale(1.25);
}

.hrtec-item__thumb {
	display: block;
	width: clamp(92px, 11vw, 160px);
	aspect-ratio: 16 / 9;
	border-radius: var(--hrtec-radius-sm);
	overflow: hidden;
	background: var(--hrtec-surface-2);
	flex: 0 0 auto;
}

.hrtec-item__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.hrtec-item__link:hover .hrtec-item__thumb img {
	transform: scale(1.08);
}

.hrtec-item__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 7px;
	min-width: 0;
}

.hrtec-item__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: clamp(13.5px, 1.05vw, 15.5px);
	font-weight: 700;
	line-height: 2;
	color: var(--hrtec-text);
	transition: color 0.25s ease;
}

.hrtec-item__link:hover .hrtec-item__title,
.hrtec-item.is-active .hrtec-item__title {
	color: var(--hrtec-accent-deep);
}

.hrtec-meta__item--plain {
	font-size: 12px;
}

/* حالت خالی */
.hrtec-empty {
	margin: 24px auto;
	max-width: 720px;
	padding: 16px 20px;
	border: 1px dashed #d7d7dc;
	border-radius: 12px;
	color: #6b7280;
	text-align: center;
}

/* ---------------------------------------------------------------
   7) واکنش‌گرایی
   --------------------------------------------------------------- */
@media (max-width: 1080px) {
	.hrtec__grid {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"hero"
			"aside";
	}

	.hrtec-hero {
		min-height: clamp(380px, 62vw, 540px);
		padding-top: 58px;
	}

	.hrtec__aside {
		justify-content: flex-start;
	}
}

@media (max-width: 600px) {
	.hrtec {
		padding-inline: 12px;
	}

	.hrtec-list {
		--rail: 44px;
		--pad-i: 12px;
	}

	.hrtec-item__num {
		font-size: 19px;
	}

	.hrtec-item__thumb {
		width: 84px;
		border-radius: 10px;
	}

	.hrtec-item__title {
		font-size: 13.5px;
		line-height: 1.9;
	}

	.hrtec-hero {
		min-height: 470px;
		padding-top: 62px;
	}

	.hrtec-hero__excerpt {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.hrtec-hero__foot {
		flex-direction: column;
		align-items: stretch;
	}

	.hrtec-btn {
		justify-content: center;
	}

	.hrtec-meta--hero {
		justify-content: flex-start;
	}

	.hrtec-meta--hero .hrtec-meta__item {
		font-size: 11.5px;
		padding: 7px 10px;
	}
}

@media (max-width: 380px) {
	.hrtec-item__thumb {
		display: none;
	}
}

/* ---------------------------------------------------------------
   8) دسترس‌پذیری و ترجیحات کاربر
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.hrtec *,
	.hrtec *::before,
	.hrtec *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.hrtec-item__link:hover {
		transform: none;
	}
}

@media print {
	.hrtec {
		background: #fff;
		padding: 0;
	}

	.hrtec__aside,
	.hrtec-hero {
		box-shadow: none;
	}
}

/* حالت‌های گذار پیش‌نمایش تعاملی */
.hrtec-hero.is-swapping .hrtec-hero__body,
.hrtec-hero.is-swapping .hrtec-hero__media img {
	opacity: 0.35;
	transition: opacity 0.18s ease;
}

.hrtec-hero__body {
	transition: opacity 0.28s ease;
}