/* کارت تبلیغ دوره — عیناً از سایت اصلی (بخش ۴۱ style.css) */
.ec-cc {
	--ecc2-gold: var(--econ-gold, #ccb070);
	--ecc2-navy: var(--econ-navy, #0a0830);
	--ecc2-cream: #fdfaf5;
	--ecc2-line: rgba(204, 176, 112, .40);
	--ecc2-ink: #3a3630;
	--ecc2-muted: #5a5959;
	--ecc2-was: #c62828;   /* قیمت پیش از تخفیف */
	--ecc2-now: #15803d;   /* قیمت پس از تخفیف */
	/* دکمه: عین «درخواست مدرک» هوم‌پیج (ویجت دکمهٔ پست ۱۵۸۴) */
	--ecc2-btn-bg: var(--econ-cream, #f8f4eb);
	/* ⚠ #a88a52 روی #f8f4eb تضادِ ۲٫۹۸:۱ می‌داد — زیر حدِ ۴٫۵.
	   #7a5f2e همان خانوادهٔ طلایی است با تضادِ ۵٫۵۲:۱. */
	--ecc2-btn-tx: var(--econ-gold-dark, #7a5f2e);
	--ecc2-btn-bd: var(--econ-line-hover, #ccaf72);
	--ecc2-r: 10px;

	display: flex;
	flex-direction: column;
	direction: rtl;
	overflow: hidden;
	clear: both;
	font-family: inherit;
	max-width: 520px;
	margin-block: clamp(26px, 4vw, 40px);
	margin-inline: auto;
	background: var(--ecc2-cream);
	border: 1px solid var(--ecc2-line);
	border-block-start: 4px solid var(--ecc2-gold);
	border-radius: var(--ecc2-r);
	color: var(--ecc2-ink);
	text-align: center;
}

/* ── پوستر: تمام‌پهنا، با نسبت دقیق خودش، بدون بریدن ── */
.ec-cc__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 857 / 457;
	overflow: hidden;
	background: rgba(10, 8, 48, .05);
	text-decoration: none;
}

.ec-cc .ec-cc__img,
.ec-cc__thumb img.ec-cc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	border-radius: 0;
	margin: 0;
	transition: transform .35s ease;
}

.ec-cc:hover .ec-cc__img { transform: scale(1.03); }

/* ── بدنه: فقط دادهٔ دوره ── */
.ec-cc__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 9px;
	padding: clamp(13px, 2vw, 18px) clamp(14px, 2.2vw, 20px);
}

/* ── مدت · امتیاز · دانش‌پژوه ── */
.ec-cc .ec-cc__meta {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 7px 15px;
	font-size: 15.5px;
	color: var(--ecc2-muted);
}

.ec-cc .ec-cc__meta li { margin: 0; padding: 0; list-style: none; }

.ec-cc .ec-cc__meta li + li { position: relative; padding-inline-start: 15px; }

.ec-cc .ec-cc__meta li + li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 50%;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	border-radius: 50%;
	background: var(--ecc2-gold);
}

/* ── قیمت جدید و قیمت خط‌خوردهٔ قرمز ── */
.ec-cc__prices {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 10px;
	font-variant-numeric: tabular-nums;
}

.ec-cc .ec-cc__price {
	font-size: clamp(17px, 2vw, 20px);
	font-weight: 800;
	color: var(--ecc2-now);
	line-height: 1.4;
}

.ec-cc .ec-cc__unit { font-size: 12.5px; font-weight: 500; }

.ec-cc .ec-cc__was {
	font-size: 13.5px;
	color: var(--ecc2-was);
	text-decoration: line-through;
	text-decoration-color: var(--ecc2-was);
	text-decoration-thickness: 1.5px;
	opacity: .95;
}

/* ── دکمه: هندسهٔ «درخواست مدرک» هوم‌پیج، هاور سرمه‌ای ── */
.ec-cc a.ec-cc__cta {
	align-self: stretch;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-block-start: 2px;
	padding: 12px 24px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.6;
	white-space: nowrap;
	/* ⚠ !important لازم است: «.entry-content a» در قالب جنه
	   !important دارد و متنِ دکمه را آبیِ لینک می‌کرد (اندازه‌گیری
	   ۱۵ شهریور: rgb(42,79,204) به‌جای طلاییِ کارت). */
	color: var(--ecc2-btn-tx) !important;
	background: var(--ecc2-btn-bg);
	border: 1px solid var(--ecc2-btn-bd);
	border-radius: 15px !important;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .18s ease, color .18s ease,
	            border-color .18s ease, box-shadow .18s ease;
}

	/* ⚠ مرز روی هاورِ سرمه‌ای باید روشن بماند: پیش از این
	   border-color هم سرمه‌ای می‌شد و لبهٔ دکمه در زمینه گم
	   می‌شد. طلاییِ #CCB070 روی #0A0830 تضادِ ۵٫۴ دارد. */
.ec-cc a.ec-cc__cta:hover,
.ec-cc a.ec-cc__cta:focus-visible {
	color: #fff !important;
	background: var(--ecc2-navy);
	border-color: #CCB070;
	box-shadow: 1px 1px 6px 1px rgba(10, 8, 48, .18);
}

.ec-cc a.ec-cc__cta:focus-visible { outline: 2px solid var(--ecc2-gold); outline-offset: 2px; }

/* ⚠ اندازه‌گیریِ ۱۵ شهریور: با اینکه اعلانِ بالا !important دارد،
   رنگِ متنِ دکمه همچنان rgb(42,79,204) خوانده می‌شد. علتش ویژگی
   است نه اهمیت: قالب جنه لینک‌های متن را با پیشوندِ شناسه‌ایِ
   «#tie-wrapper» رنگ می‌کند و (۱،۱،۱) از (۰،۲،۱) بالاتر است.
   این بلوک همان پیشوند را برمی‌دارد تا هم‌ترازِ آن شود. */
#tie-wrapper .ec-cc a.ec-cc__cta,
#tie-wrapper .entry-content .ec-cc a.ec-cc__cta,
html body #the-post .entry-content a.ec-cc__cta {
	color: var(--ecc2-btn-tx) !important;
}

#tie-wrapper .ec-cc a.ec-cc__cta:hover,
#tie-wrapper .ec-cc a.ec-cc__cta:focus-visible,
#tie-wrapper .entry-content .ec-cc a.ec-cc__cta:hover,
#tie-wrapper .entry-content .ec-cc a.ec-cc__cta:focus-visible,
html body #the-post .entry-content a.ec-cc__cta:hover,
html body #the-post .entry-content a.ec-cc__cta:focus-visible {
	color: #fff !important;
	background: var(--ecc2-navy);
	border-color: #CCB070 !important;
}

/* همان کار برای کارتِ پایانِ صفحه */
#tie-wrapper .econ-cc a.econ-cc__btn,
#tie-wrapper .entry-content .econ-cc a.econ-cc__btn {
	color: var(--ecc2-btn-tx, #7a5f2e) !important;
}
#tie-wrapper .econ-cc a.econ-cc__btn:hover,
#tie-wrapper .econ-cc a.econ-cc__btn:focus-visible,
#tie-wrapper .entry-content .econ-cc a.econ-cc__btn:hover,
#tie-wrapper .entry-content .econ-cc a.econ-cc__btn:focus-visible {
	color: #fff !important;
	background: var(--ecc2-navy, #0a0830);
	border-color: #CCB070 !important;
}

.ec-cc .ec-cc__cta svg {
	width: 15px;
	height: 15px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
	.ec-cc .ec-cc__img,
	.ec-cc a.ec-cc__cta { transition: none; }
	.ec-cc:hover .ec-cc__img { transform: none; }
	.ec-cc a.ec-cc__cta:hover { box-shadow: none; }
}


/* ─────────────────────────────────────────────────────────────
   کارتِ تبلیغِ پایانِ مطلب — .econ-cc

   تصویرِ نخستین دورهٔ مرتبط کنارِ متن می‌نشیند (در موبایل بالای
   آن). بولتِ <ul> برداشته می‌شود چون قرص‌های گردشده خودشان
   جداکننده‌اند و نشانهٔ فهرست استایل را به‌هم می‌ریخت.
   ───────────────────────────────────────────────────────────── */

.econ-cc__list,
.econ-cc ul.econ-cc__list {
	list-style: none !important;
	margin: 0 0 14px;
	padding: 0 !important;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.econ-cc__list > li,
.econ-cc ul.econ-cc__list > li.econ-cc__item {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.econ-cc__list > li::before,
.econ-cc__list > li::marker,
.econ-cc ul.econ-cc__list > li::before,
.econ-cc ul.econ-cc__list > li::marker {
	content: none !important;
	display: none !important;
}

.econ-cc--has-fig {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	padding: 0;
}

.econ-cc--has-fig .econ-cc__fig {
	flex: 0 0 38%;
	max-width: 38%;
	display: block;
	overflow: hidden;
	background: rgba(10, 8, 48, .04);
	text-decoration: none;
}

.econ-cc--has-fig .econ-cc__fig img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	object-fit: cover;
	object-position: center;
	margin: 0;
	border-radius: 0;
}

.econ-cc--has-fig .econ-cc__body {
	flex: 1 1 300px;
	min-width: 0;
	padding: 20px 22px;
}

@media (max-width: 600px) {
	.econ-cc--has-fig { display: block; }
	.econ-cc--has-fig .econ-cc__fig {
		max-width: 100%;
		flex: none;
		aspect-ratio: 16 / 9;
	}
	.econ-cc--has-fig .econ-cc__body { padding: 16px 16px 18px; }
}

/* ─────────────────────────────────────────────────────────────
   فاصلهٔ پیش از فوتر

   کارت‌های انتهای ستون به لبهٔ نوارِ طلاییِ فوتر می‌چسبیدند.
   یک سانتی‌متر (~۳۸px) فضای تنفس، و در موبایل کمی کمتر.
   ───────────────────────────────────────────────────────────── */

#tie-wrapper .ec-footer,
#tie-wrapper ~ .ec-footer,
.ec-footer,
.ec-precta {
	margin-block-start: 38px;
}

@media (max-width: 767px) {
	.ec-footer,
	.ec-precta { margin-block-start: 26px; }
}

#content, #tie-wrapper > .container:last-of-type { padding-block-end: 8px; }


/* ─────────────────────────────────────────────────────────────
   پوسترِ عمودیِ دوره — .econ-poster

   همان پوسترهایی که سایدبارِ سایت اصلی دارد. نسبتِ تصویر
   دست‌نخورده می‌ماند (پوسترها ۱۰۲۴×۱۵۳۶ و ۷۳۷×۱۰۲۴ اند و بریدن
   نوشتهٔ رویشان را قطع می‌کند).
   ───────────────────────────────────────────────────────────── */

.econ-poster { margin: 0; }

.econ-poster__link {
	display: block;
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	line-height: 0;
}

.econ-poster__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	transition: transform .35s ease;
}

.econ-poster__link:hover .econ-poster__img { transform: scale(1.02); }
.econ-poster__link:focus-visible { outline: 2px solid var(--ecm-navy, #0a0830); outline-offset: 2px; }

.econ-poster-widget { padding: 0 !important; border: 0 !important; background: none !important; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.econ-poster__img { transition: none; }
	.econ-poster__link:hover .econ-poster__img { transform: none; }
}


/* ─────────────────────────────────────────────────────────────
   econ-cc-v2 — بازچیدمانِ کارتِ تبلیغ

   نسخهٔ پیشین دو ستونه بود و در ستونِ ۱۱۷۰ پیکسلی کشیده می‌شد:
   پوستر در قابِ ۴۴۴×۲۳۷ با object-fit:cover می‌افتاد و لبه‌اش
   بریده می‌شد، و دکمه فقط ۱۱۰ پیکسل عرض داشت — کنارِ کارتِ
   بزرگ گم بود.

   حالا همان الگوی سایت اصلی: پوستر تمام‌پهنا در بالا با نسبتِ
   واقعیِ خودش (۸۵۷×۴۵۷) و object-fit:contain تا هیچ بخشی بریده
   نشود؛ متن و دکمه زیرِ آن؛ و سقفِ پهنای ۵۲۰ پیکسل با وسط‌چین،
   چون کارتی به عرضِ کلِ ستون از خودِ مطلب پررنگ‌تر می‌شود.
   ───────────────────────────────────────────────────────────── */

.econ-cc,
.econ-cc--has-fig {
	display: flex;
	flex-direction: column;
	max-width: 520px;
	margin-inline: auto;
	margin-block: clamp(26px, 4vw, 40px);
	padding: 0;
	overflow: hidden;
	border: 1px solid rgba(204, 176, 112, .40);
	border-block-start: 4px solid #ccb070;
	border-radius: 10px;
	background: #fdfaf5;
	text-align: center;
}

.econ-cc--has-fig .econ-cc__fig {
	display: block;
	flex: 0 0 auto;
	max-width: 100%;
	width: 100%;
	aspect-ratio: 857 / 457;
	background: rgba(10, 8, 48, .05);
	overflow: hidden;
	text-decoration: none;
}

.econ-cc--has-fig .econ-cc__fig img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	margin: 0;
	border-radius: 0;
}

.econ-cc--has-fig .econ-cc__body,
.econ-cc .econ-cc__body {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	padding: 18px 22px 22px;
}

.econ-cc .econ-cc__h {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.6;
	color: #0a0830;
}

.econ-cc .econ-cc__sub {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.8;
	color: #5a5959;
}

.econ-cc .econ-cc__list,
.econ-cc ul.econ-cc__list {
	justify-content: center;
	margin: 0 0 16px;
}

/* دکمه تمام‌پهنا — هدفِ کلیکِ بزرگ‌تر و هم‌ترازِ کارتِ سایت اصلی */
.econ-cc .econ-cc__btn,
html body .econ-cc a.econ-cc__btn,
html body #the-post .entry-content a.econ-cc__btn {
	display: flex;
	width: 100%;
	min-height: 46px;
	/* هندسه عیناً همان .ec-cc__cta؛ فقط پهنا تمام‌عرض می‌ماند
	   چون این کارت خودش تمام‌عرضِ ستون است. */
	padding: 12px 24px;
	border-radius: 15px;
	font-size: 15px;
	/* ⚠ مقدار پشتیبان الزامی است: نشانه‌های --ecc2-* درون «.ec-cc»
	   تعریف شده‌اند، نه در :root. کارت پایانی «.econ-cc» است و
	   آن‌ها را نمی‌بیند؛ بدون پشتیبان، کلِ اعلان باطل می‌شود و
	   دکمه بی‌رنگ و بی‌کادر می‌ماند. */
	color: var(--ecc2-btn-tx, #7a5f2e) !important;
	background: var(--ecc2-btn-bg, #f8f4eb);
	border: 1px solid var(--ecc2-btn-bd, #ccaf72);
}

html body .econ-cc a.econ-cc__btn:hover,
html body .econ-cc a.econ-cc__btn:focus-visible,
html body #the-post .entry-content a.econ-cc__btn:hover,
html body #the-post .entry-content a.econ-cc__btn:focus-visible {
	color: #fff !important;
	background: var(--ecc2-navy, #0a0830);
	border-color: #CCB070;
}

@media (max-width: 600px) {
	.econ-cc--has-fig .econ-cc__body,
	.econ-cc .econ-cc__body { padding: 16px 16px 18px; }
}