/*!
 * کاروسل مقالات engsinyor — نسخه 1.3.2
 * تمام رنگ‌ها و اندازه‌ها با متغیرهای CSS کنترل می‌شوند تا کنترل‌های المنتور بتوانند آن‌ها را بازنویسی کنند.
 */

/* ==========================================================================
   ۱. متغیرها و پایه
   ========================================================================== */

.eac {
	--eac-accent: #5B6BFF;

	--eac-per-view: 3;
	--eac-gap: 28px;

	--eac-card-radius: 24px;
	--eac-media-inset: 12px;
	--eac-img-radius: 18px;
	--eac-img-ratio: 3 / 2;
	--eac-img-zoom: 1.07;
	--eac-overlay: rgba(9, 12, 26, 0.55);
	--eac-blur: 16px;
	--eac-lift: -8px;

	--eac-align: right;
	--eac-title: #111827;
	--eac-title-hover: var(--eac-accent);
	--eac-excerpt: #6B7280;
	--eac-meta: #9199A8;
	--eac-meta-icon: var(--eac-meta);
	--eac-hairline: rgba(17, 24, 39, 0.09);

	--eac-badge-bg: var(--eac-accent);
	--eac-badge-color: #fff;

	--eac-btn-color: var(--eac-accent);
	--eac-btn-color-hover: var(--eac-accent);
	--eac-btn-bg: var(--eac-accent);
	--eac-btn-bg-hover: var(--eac-accent);
	--eac-btn-radius: 14px;

	--eac-arrow-size: 50px;
	--eac-arrow-icon: 15px;
	--eac-arrow-color: #111827;
	--eac-arrow-color-hover: #fff;
	--eac-arrow-bg: rgba(255, 255, 255, 0.92);
	--eac-arrow-bg-hover: var(--eac-accent);
	--eac-arrow-border: rgba(17, 24, 39, 0.08);
	--eac-arrow-radius: 50%;
	--eac-arrow-offset: 10px;

	--eac-dot: rgba(17, 24, 39, 0.18);
	--eac-dot-active: var(--eac-accent);
	--eac-dot-size: 8px;
	--eac-pagination-gap: 18px;

	--eac-stage-pt: 14px;
	--eac-stage-px: 8px;
	--eac-stage-pb: 22px;

	--eac-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	position: relative;
	width: 100%;
}

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

/* ==========================================================================
   ۲. صحنه و ساختار اسوایپر
   ========================================================================== */

.eac-stage {
	position: relative;
}

.eac .eac-carousel {
	position: relative;
	overflow: hidden;
	padding: var(--eac-stage-pt) var(--eac-stage-px) var(--eac-stage-pb);
	/* فضای تنفس برای سایه و بالا آمدن کارت در هاور */
}

.eac-carousel .swiper-wrapper {
	display: flex;
	align-items: stretch;
	box-sizing: content-box;
	position: relative;
	width: 100%;
	z-index: 1;
}

.eac-carousel .swiper-slide {
	position: relative;
	flex-shrink: 0;
	height: auto;
	display: flex;
}

/* پیش از آماده شدن اسوایپر، کارت‌ها با همان تعداد ستون چیده می‌شوند تا پرش دیده نشود */
.eac-carousel:not(.swiper-initialized) .swiper-wrapper {
	gap: var(--eac-gap);
	overflow: hidden;
}

.eac-carousel:not(.swiper-initialized) .swiper-slide {
	flex: 0 0 calc((100% - (var(--eac-per-view) - 1) * var(--eac-gap)) / var(--eac-per-view));
	max-width: calc((100% - (var(--eac-per-view) - 1) * var(--eac-gap)) / var(--eac-per-view));
}

/* ==========================================================================
   ۳. کارت
   ========================================================================== */

.eac-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background-color: #fff;
	border-radius: var(--eac-card-radius);
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.45s var(--eac-ease), box-shadow 0.45s var(--eac-ease), border-color 0.45s var(--eac-ease);
}

.eac--glass .eac-card {
	-webkit-backdrop-filter: blur(var(--eac-blur));
	backdrop-filter: blur(var(--eac-blur));
}

.eac-card:hover {
	transform: translateY(var(--eac-lift));
}

.eac-card__overlay-link {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: inherit;
}

/* محتوای قابل کلیک روی لایهٔ لینک کارت */
.eac-card__title a,
.eac-btn,
.eac-badge {
	position: relative;
	z-index: 4;
}

/* ==========================================================================
   ۴. تصویر
   ========================================================================== */

.eac-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--eac-img-radius);
	background-color: rgba(17, 24, 39, 0.05);
	flex-shrink: 0;
}

.eac-card__img {
	position: relative;
	width: 100%;
	aspect-ratio: var(--eac-img-ratio, 3 / 2);
	height: var(--eac-img-height, auto);
	overflow: hidden;
	border-radius: inherit;
}

.eac-card__img img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: inherit;
	transition: transform 0.7s var(--eac-ease);
}

.eac-card:hover .eac-card__img img {
	transform: scale(var(--eac-img-zoom));
}

.eac-card__img--empty {
	background: linear-gradient(135deg, rgba(17, 24, 39, 0.06), rgba(17, 24, 39, 0.02));
}

.eac-card__scrim {
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	border-radius: inherit;
	transition: opacity 0.45s var(--eac-ease);
}

/* برچسب دسته‌بندی */
.eac-badge {
	display: inline-flex;
	align-items: center;
	line-height: 1.6;
	background-color: var(--eac-badge-bg);
	color: var(--eac-badge-color);
	border-radius: 999px;
	white-space: nowrap;
	max-width: calc(100% - 32px);
	overflow: hidden;
	text-overflow: ellipsis;
}

.eac-card__media .eac-badge {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 2;
	box-shadow: 0 6px 18px rgba(9, 12, 26, 0.22);
}

/* ==========================================================================
   ۵. بدنه و متن‌ها
   ========================================================================== */

.eac-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	text-align: var(--eac-align);
	padding: 22px;
}

.eac-card__title {
	margin: 0 0 10px;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.75;
	color: var(--eac-title);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.eac-card__title a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s var(--eac-ease);
}

.eac-card:hover .eac-card__title,
.eac-card:hover .eac-card__title a {
	color: var(--eac-title-hover);
}

.eac-card__excerpt {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 2;
	color: var(--eac-excerpt);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.eac-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--eac-hairline);
}

.eac-card__footer:only-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* اطلاعات مطلب */
.eac-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 12px;
	line-height: 1.8;
	color: var(--eac-meta);
}

.eac-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.eac-meta__icon {
	display: inline-flex;
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
	color: var(--eac-meta-icon);
}

.eac-meta__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ==========================================================================
   ۶. دکمه
   ========================================================================== */

.eac-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.6;
	text-decoration: none;
	border-radius: var(--eac-btn-radius);
	color: var(--eac-btn-color);
	transition: color 0.3s var(--eac-ease), background-color 0.3s var(--eac-ease), border-color 0.3s var(--eac-ease), gap 0.3s var(--eac-ease);
}

.eac-btn__icon {
	display: inline-flex;
	align-items: center;
	font-size: 0.9em;
	transition: transform 0.35s var(--eac-ease);
}

.eac-btn__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.eac-card:hover .eac-btn__icon {
	transform: translateX(3px);
}

[dir="rtl"] .eac-card:hover .eac-btn__icon {
	transform: translateX(-3px);
}

/* حالت‌های دکمه */
.eac--btn-text .eac-btn {
	padding: 0;
	background: none;
}

.eac--btn-solid .eac-btn {
	background-color: var(--eac-btn-bg);
	color: #fff;
}

.eac--btn-solid .eac-btn:hover,
.eac--btn-solid .eac-card:hover .eac-btn {
	background-color: var(--eac-btn-bg-hover);
	filter: saturate(1.1);
}

.eac--btn-soft .eac-btn {
	position: relative;
	color: var(--eac-btn-color);
	background: none;
	overflow: hidden;
}

.eac--btn-soft .eac-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--eac-btn-bg);
	opacity: 0.12;
	border-radius: inherit;
	transition: opacity 0.3s var(--eac-ease);
}

.eac--btn-soft .eac-card:hover .eac-btn::before {
	opacity: 0.2;
}

.eac--btn-soft .eac-btn__text,
.eac--btn-soft .eac-btn__icon {
	position: relative;
}

.eac--btn-ghost .eac-btn {
	background: none;
	border: 1px solid currentColor;
	color: var(--eac-btn-color);
}

.eac--btn-ghost .eac-card:hover .eac-btn {
	color: var(--eac-btn-color-hover);
}

.eac-card:hover .eac-btn {
	color: var(--eac-btn-color-hover);
}

.eac--btn-solid .eac-card:hover .eac-btn {
	color: #fff;
}

/* ==========================================================================
   ۷. قالب کلاسیک
   ========================================================================== */

.eac--skin-classic .eac-card__media {
	margin: var(--eac-media-inset) var(--eac-media-inset) 0;
}

.eac--skin-classic .eac-card__media:first-child:last-child {
	margin-bottom: var(--eac-media-inset);
}

/* ==========================================================================
   ۸. قالب روی‌هم (متن روی تصویر)
   ========================================================================== */

.eac--skin-overlay {
	--eac-title: #fff;
	--eac-excerpt: rgba(255, 255, 255, 0.82);
	--eac-meta: rgba(255, 255, 255, 0.7);
	--eac-hairline: rgba(255, 255, 255, 0.18);
	--eac-btn-color: #fff;
	--eac-btn-color-hover: #fff;
}

.eac--skin-overlay .eac-card {
	min-height: 440px;
	justify-content: flex-end;
}

.eac--skin-overlay .eac-card__media {
	position: absolute;
	inset: 0;
	margin: 0;
	border-radius: inherit;
	z-index: 0;
}

.eac--skin-overlay .eac-card__img {
	height: 100%;
	aspect-ratio: auto;
}

.eac--skin-overlay .eac-card__scrim {
	opacity: 1;
	background: linear-gradient(to top, var(--eac-overlay) 6%, rgba(9, 12, 26, 0.32) 42%, transparent 78%);
	background: linear-gradient(to top, var(--eac-overlay) 6%, color-mix(in srgb, var(--eac-overlay) 55%, transparent) 42%, transparent 78%);
}

.eac--skin-overlay .eac-card__body {
	position: relative;
	z-index: 2;
	margin-top: auto;
	padding: 26px 24px 26px;
}

.eac-card__badge-row {
	margin-bottom: 12px;
	line-height: 0;
}

.eac--skin-overlay .eac-card__title {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   ۹. قالب افقی
   ========================================================================== */

.eac--skin-side .eac-card {
	flex-direction: row;
	align-items: stretch;
}

.eac--skin-side .eac-card__media {
	flex: 0 0 42%;
	max-width: 42%;
	border-radius: inherit;
}

.eac--skin-side .eac-card__img {
	height: 100%;
	aspect-ratio: auto;
	min-height: 200px;
}

.eac--skin-side .eac-card__body {
	flex: 1 1 auto;
	min-width: 0;
	justify-content: center;
}

@media (max-width: 520px) {
	.eac--skin-side .eac-card {
		flex-direction: column;
	}

	.eac--skin-side .eac-card__media {
		flex: 0 0 auto;
		max-width: 100%;
	}

	.eac--skin-side .eac-card__img {
		aspect-ratio: var(--eac-img-ratio, 16 / 10);
		min-height: 0;
	}
}

/* ==========================================================================
   ۱۰. فلش‌ها
   ========================================================================== */

.eac-arrow {
	position: absolute;
	top: calc((100% - var(--eac-stage-pb)) / 2);
	transform: translateY(-50%);
	z-index: 10;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--eac-arrow-size);
	height: var(--eac-arrow-size);
	padding: 0;
	margin: 0;
	font-size: var(--eac-arrow-icon);
	line-height: 1;
	color: var(--eac-arrow-color);
	background-color: var(--eac-arrow-bg);
	border: 1px solid var(--eac-arrow-border);
	border-radius: var(--eac-arrow-radius);
	box-shadow: 0 10px 26px rgba(17, 24, 39, 0.12);
	cursor: pointer;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition: color 0.3s var(--eac-ease), background-color 0.3s var(--eac-ease), border-color 0.3s var(--eac-ease), opacity 0.3s var(--eac-ease), transform 0.3s var(--eac-ease);
}

.eac-arrow svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}

.eac-arrow i {
	font-size: 1em;
	line-height: 1;
}

.eac-arrow:hover,
.eac-arrow:focus-visible {
	color: var(--eac-arrow-color-hover);
	background-color: var(--eac-arrow-bg-hover);
	border-color: transparent;
}

.eac-arrow:active {
	transform: translateY(-50%) scale(0.94);
}

.eac-arrow--disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.eac-arrow--locked {
	display: none;
}

.eac-arrow--prev {
	inset-inline-start: var(--eac-arrow-offset);
}

.eac-arrow--next {
	inset-inline-end: var(--eac-arrow-offset);
}

/* فلش‌های بیرون کاروسل */
.eac--arrows-outside .eac-stage {
	padding-inline: calc(var(--eac-arrow-size) + var(--eac-arrow-offset));
}

.eac--arrows-outside .eac-arrow--prev {
	inset-inline-start: 0;
}

.eac--arrows-outside .eac-arrow--next {
	inset-inline-end: 0;
}

/* نمایش فلش‌ها فقط هنگام هاور */
.eac--arrows-hover .eac-arrow {
	opacity: 0;
	visibility: hidden;
}

.eac--arrows-hover .eac-stage:hover .eac-arrow,
.eac--arrows-hover .eac-arrow:focus-visible {
	opacity: 1;
	visibility: visible;
}

/* نوار کنترل پایین */
.eac-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: var(--eac-pagination-gap);
}

.eac-controls .eac-arrow {
	position: static;
	transform: none;
	flex-shrink: 0;
}

.eac-controls .eac-arrow:active {
	transform: scale(0.94);
}

.eac-controls .eac-pagination {
	margin-top: 0;
	width: auto;
	min-width: 60px;
}

/* ==========================================================================
   ۱۱. صفحه‌بندی
   ========================================================================== */

.eac-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 7px;
	margin-top: var(--eac-pagination-gap);
	line-height: 1;
	color: var(--eac-meta);
	font-size: 13px;
}

.eac-bullet {
	display: block;
	width: var(--eac-dot-size);
	height: var(--eac-dot-size);
	border-radius: 999px;
	background-color: var(--eac-dot);
	opacity: 1;
	cursor: pointer;
	transition: width 0.35s var(--eac-ease), background-color 0.35s var(--eac-ease), transform 0.35s var(--eac-ease);
}

.eac-bullet--active {
	width: calc(var(--eac-dot-size) * 3);
	background-color: var(--eac-dot-active);
}

/* نقطه‌های پویا */
.eac-pagination--bullets-dynamic {
	overflow: hidden;
	white-space: nowrap;
	flex-wrap: nowrap;
}

/* نوار پیشرفت */
.eac-pagination--progressbar {
	position: relative;
	display: block;
	height: 4px;
	border-radius: 999px;
	background-color: var(--eac-dot);
	overflow: hidden;
}

.eac-pagination__fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background-color: var(--eac-dot-active);
	transform-origin: left top;
}

[dir="rtl"] .eac-pagination__fill {
	transform-origin: right top;
}

/* شمارشی */
.eac-pagination--fraction {
	gap: 4px;
	font-weight: 600;
	color: var(--eac-meta);
}

.eac-pagination__current {
	color: var(--eac-dot-active);
}

.eac-pagination--locked {
	display: none;
}

/* ==========================================================================
   ۱۲. حالت خالی
   ========================================================================== */

.eac-empty {
	padding: 40px 24px;
	text-align: center;
	color: #6B7280;
	background-color: rgba(17, 24, 39, 0.03);
	border: 1px dashed rgba(17, 24, 39, 0.12);
	border-radius: 20px;
}

.eac-empty p {
	margin: 0;
}

/* ==========================================================================
   ۱۳. دسترس‌پذیری و حالت‌های ویژه
   ========================================================================== */

.eac a:focus-visible,
.eac button:focus-visible {
	outline: 2px solid var(--eac-accent);
	outline-offset: 3px;
}

.eac-carousel.swiper-initialized .swiper-slide {
	touch-action: pan-y;
}

@media (hover: none) {
	.eac-card:hover {
		transform: none;
	}

	.eac-card:hover .eac-card__img img {
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eac *,
	.eac *::before,
	.eac *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   ۱۴. تبلت و موبایل
   ========================================================================== */

@media (max-width: 1024px) {
	.eac {
		--eac-stage-px: 6px;
		--eac-arrow-size: 44px;
	}

	.eac--skin-overlay .eac-card {
		min-height: 400px;
	}
}

@media (max-width: 767px) {
	.eac {
		--eac-card-radius: 20px;
		--eac-media-inset: 10px;
		--eac-stage-pt: 10px;
		--eac-stage-px: 4px;
		--eac-stage-pb: 16px;
		--eac-pagination-gap: 14px;
	}

	.eac-card__body {
		padding: 18px 16px 18px;
	}

	.eac-card__footer {
		padding-top: 12px;
		gap: 8px 12px;
	}

	.eac--skin-overlay .eac-card {
		min-height: 360px;
	}

	.eac--skin-overlay .eac-card__body {
		padding: 20px 18px;
	}

	/* در موبایل، لمس مهم‌تر از هاور است: دکمه‌ها بزرگ‌تر و قابل ضربه */
	.eac--btn-text .eac-btn,
	.eac-btn {
		min-height: 34px;
	}

	.eac--hide-arrows-mobile .eac-arrow {
		display: none;
	}

	.eac--arrows-outside .eac-stage {
		padding-inline: 0;
	}

	.eac-bullet {
		width: calc(var(--eac-dot-size) + 1px);
		height: calc(var(--eac-dot-size) + 1px);
	}

	.eac-pagination {
		gap: 8px;
	}
}

@media (min-width: 1025px) {
	.eac--hide-pagination-desktop .eac-pagination {
		display: none;
	}
}

/* هنگام درگ، انتخاب متن انجام نشود */
.eac-carousel.swiper-grabbing {
	cursor: grabbing;
}

.eac-carousel.swiper-grabbing .eac-card {
	user-select: none;
}