/**
 * اسلایدر مطالب بلاگ.
 *
 * ساختار کارت عمداً دو تکه است و تصویر «داخل» قاب سفید نیست:
 *
 *   [ تصویر — کمی باریک‌تر از قاب، گوشهٔ بالا گرد، پایین صاف ]
 *   [ قاب سفید با حاشیه — فقط متن، کمی عریض‌تر از تصویر      ]
 *
 * پایین تصویر دقیقاً روی لبهٔ بالای قاب می‌نشیند، پس گوشه‌های گردِ بالای قاب
 * از دو طرفِ تصویر بیرون می‌زنند. همین اختلافِ کوچک عرض، شکل اصلی دیزاین است.
 *
 * چیدمان روی اسکرول خود مرورگر سوار است (scroll-snap + overflow)، نه transform؛
 * پس لمس، درگ و صفحه‌کلید بدون کد اضافه کار می‌کنند.
 */

.ard-pslider {
	--ard-ps-gap: 20px;
	--ard-ps-radius: 20px;
	--ard-ps-pad: 16px;
	--ard-ps-card-bg: var(--ard-base, #fff);
	--ard-ps-card-line: #e6e9f3;
	--ard-ps-img-h: 220px;
	--ard-ps-media-inset: 3.8%;
	--ard-ps-title: var(--ard-text, #111827);
	--ard-ps-excerpt: #777779;
	--ard-ps-title-lines: 1;
	--ard-ps-excerpt-lines: 2;

	/* یک = همه هم‌اندازه. بیشتر = کارت وسط همان‌قدر برابر بقیه. */
	--ard-ps-active-ratio: 1;

	--ard-ps-chip: 38px;
	--ard-ps-chip-bg: rgba(255, 255, 255, .94);
	--ard-ps-chip-ink: var(--ard-text, #1f2937);
	--ard-ps-chip-inset: 13px;

	--ard-ps-arrow: 40px;
	/*
	 * پهنا و ارتفاع جدا، ولی هر دو از همان «اندازه» شروع می‌شوند تا دکمه
	 * پیش‌فرض مربع بماند و تنظیم یکی، دیگری را خراب نکند.
	 */
	--ard-ps-arrow-w: var(--ard-ps-arrow);
	--ard-ps-arrow-h: var(--ard-ps-arrow);
	--ard-ps-arrow-pad: 0px;
	--ard-ps-arrow-bw: 1px;
	--ard-ps-arrow-icon: 18px;
	--ard-ps-arrow-radius: 50%;
	--ard-ps-arrow-bg: var(--ard-base, #fff);
	--ard-ps-arrow-ink: var(--ard-text, #1f2937);
	--ard-ps-arrow-line: var(--ard-border, #e5e7eb);
	--ard-ps-arrow-bg-hover: var(--ard-primary, #0f766e);
	--ard-ps-arrow-ink-hover: #fff;
	--ard-ps-arrow-line-hover: var(--ard-ps-arrow-bg-hover);
	--ard-ps-arrow-inset: 8px;
	--ard-ps-arrow-gap: 10px;

	/*
	 * جایگاه آزاد هر دکمه.
	 *
	 * «ax/ay» لنگر است (۰٪ شروع، ۵۰٪ وسط، ۱۰۰٪ پایان) و «sx/sy» همان لنگر را
	 * به اندازهٔ خودِ دکمه عقب می‌کشد تا دکمه واقعاً روی لنگر بنشیند نه اینکه
	 * از آن آویزان شود. «x/y» هم جابه‌جایی دلخواه کاربر است.
	 *
	 * چرا margin و نه translate: جابه‌جایی با margin منطقی است و در راست‌چین
	 * خودش برعکس می‌شود؛ translateX همیشه به یک سمت می‌برد و در RTL باید
	 * علامتش را دستی برمی‌گرداندیم.
	 */
	--ard-ps-prev-ax: 0%;
	--ard-ps-prev-sx: 0px;
	--ard-ps-prev-ay: 50%;
	--ard-ps-prev-sy: calc(var(--ard-ps-arrow-h) / -2);
	--ard-ps-prev-x: 0px;
	--ard-ps-prev-y: 0px;

	--ard-ps-next-ax: 100%;
	--ard-ps-next-sx: calc(var(--ard-ps-arrow-w) * -1);
	--ard-ps-next-ay: 50%;
	--ard-ps-next-sy: calc(var(--ard-ps-arrow-h) / -2);
	--ard-ps-next-x: 0px;
	--ard-ps-next-y: 0px;

	--ard-ps-dot: var(--ard-border, #d5d9de);
	--ard-ps-dot-active: var(--ard-primary, #0f766e);
	--ard-ps-dot-size: 8px;
	--ard-ps-dot-active-w: 22px;
	--ard-ps-dot-gap: 6px;

	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ard-pslider--featured {
	--ard-ps-active-ratio: 2;
}

.ard-pslider__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.ard-pslider__head > .ard-head {
	margin-block-end: 0;
}

/*
 * صحنه همیشه block است و ریل تمام پهنایش را می‌گیرد؛ دکمه‌ها روی آن شناورند.
 *
 * قبلاً در حالت «دو طرف» یک فلکس بود و دکمه‌ها جا می‌گرفتند، ولی آن‌وقت
 * کنترل‌های جایگاه روی آن دو حالت بی‌اثر می‌ماندند. حالا هر دو حالت یک
 * ساختار دارند و فرقشان فقط در این است که «بیرون» کنار ریل جا باز می‌کند.
 */
.ard-pslider__stage {
	position: relative;
	display: block;
}

.ard-pslider--arrows-outside .ard-pslider__stage {
	padding-inline: calc(var(--ard-ps-arrow-w) + var(--ard-ps-arrow-gap));
}

.ard-pslider__car {
	flex: 1 1 auto;
	min-inline-size: 0;
}

/* ---------------------------------------- ریل */

.ard-pslider__track {
	--ard-per: 3;

	/*
	 * پهنای هر کارت.
	 *
	 * وقتی یک کارت «ratio برابر» بقیه است، مجموع عرض‌ها می‌شود
	 * (per − ۱ + ratio) واحد. پس یک واحد همین کسر است و جمعشان با فاصله‌ها
	 * دقیقاً ۱۰۰٪ می‌شود — بدون اینکه لازم باشد جاوااسکریپت عرض بدهد.
	 */
	--ard-ps-unit: calc(
		(100% - (var(--ard-per) - 1) * var(--ard-ps-gap))
		/ (var(--ard-per) - 1 + var(--ard-ps-active-ratio))
	);

	display: flex;
	gap: var(--ard-ps-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* جا برای سایهٔ قاب‌ها، وگرنه اسکرول لبه‌شان را می‌برد. */
	padding-block: 4px;
}

.ard-pslider__track::-webkit-scrollbar {
	display: none;
}

.ard-pslider__track > * {
	flex: 0 0 var(--ard-ps-unit);
	scroll-snap-align: start;
	transition: flex-basis .35s cubic-bezier(.2, .8, .3, 1);
}

.ard-pslider__track > .is-active {
	flex-basis: calc(var(--ard-ps-unit) * var(--ard-ps-active-ratio));
}

/* هنگام کشیدن با ماوس، snap باید کنار برود وگرنه به انگشت نمی‌چسبد. */
.ard-pslider__track.ard-drag {
	scroll-snap-type: none;
}

/* ---------------------------------------- کارت */

/*
 * خودِ کارت نه زمینه دارد نه حاشیه؛ فقط دو تکه را روی هم می‌چیند. رنگ و
 * حاشیه مالِ قاب متن است.
 */
.ard-pcardp {
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	block-size: 100%;
}

.ard-pcardp__media {
	position: relative;
	/* تصویر از هر طرف کمی تو می‌رود تا گوشهٔ گرد قاب از کنارش پیدا شود. */
	margin-inline: var(--ard-ps-media-inset);
	block-size: var(--ard-ps-img-h);
	border-start-start-radius: var(--ard-ps-radius);
	border-start-end-radius: var(--ard-ps-radius);
	background: var(--ard-surface-alt, #f3f4f6);
	overflow: hidden;
}

.ard-pcardp__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

/* ---------------------------------------- نشان‌های روی تصویر */

.ard-pcardp__chips {
	position: absolute;
	inset-block-start: var(--ard-ps-chip-inset);
	inset-inline-start: var(--ard-ps-chip-inset);
	display: flex;
	gap: 12px;
}

/* گوشهٔ دیگر، از کنترل «گوشه». */
.ard-ps-chips-end .ard-pcardp__chips {
	inset-inline-start: auto;
	inset-inline-end: var(--ard-ps-chip-inset);
}

.ard-pcardp__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	min-inline-size: var(--ard-ps-chip);
	block-size: var(--ard-ps-chip);
	padding-inline: 9px;
	border-radius: 999px;
	background: var(--ard-ps-chip-bg);
	color: var(--ard-ps-chip-ink);
	font-size: 11.5px;
	font-weight: 700;
	line-height: 1;
	/* شیشه‌ای، تا روی تصویرِ روشن و تیره هر دو خوانا بماند. */
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* بدون متن، چیپ دایرهٔ کامل است. */
.ard-pcardp__chip:not(:has(.ard-pcardp__chip-text)) {
	inline-size: var(--ard-ps-chip);
	padding-inline: 0;
}

.ard-pcardp__chip .ard-i {
	flex: 0 0 auto;
}

/* ---------------------------------------- قاب متن */

.ard-pcardp__box {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: var(--ard-ps-pad);
	border: 1px solid var(--ard-ps-card-line);
	border-radius: var(--ard-ps-radius);
	background: var(--ard-ps-card-bg);
}

.ard-pcardp__title {
	margin: 0;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.9;
	color: var(--ard-ps-title);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ard-ps-title-lines, 1);
	line-clamp: var(--ard-ps-title-lines, 1);
	overflow: hidden;
	overflow-wrap: anywhere;
}

.ard-pcardp__title a {
	color: inherit;
	text-decoration: none;
}

.ard-pcardp__title a:hover {
	color: var(--ard-primary, #0f766e);
	text-decoration: none;
}

.ard-pcardp__excerpt {
	margin: 0;
	font-size: 12.5px;
	line-height: 2;
	color: var(--ard-ps-excerpt);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--ard-ps-excerpt-lines, 2);
	line-clamp: var(--ard-ps-excerpt-lines, 2);
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* ---------------------------------------- دکمه‌های ناوبری */

/*
 * چرا [class] به انتخابگرها چسبیده.
 *
 * قالب‌ها و «استایل سراسری» المنتور همهٔ دکمه‌های صفحه را یک‌جا رنگ می‌کنند:
 *
 *     .elementor-kit-7 button, … { background-color: …; border: …; padding: … }
 *
 * وزن آن (۰,۱,۱) است و از یک کلاسِ تنها (۰,۱,۰) بالاتر؛ پس رنگ و حاشیه و
 * پدینگِ این دکمه‌ها را می‌بلعید و تنظیمات ویجت بی‌اثر به نظر می‌رسید.
 *
 * `[class]` روی هر عنصری که کلاس دارد می‌گیرد، پس چیزی از تطبیق کم نمی‌کند و
 * فقط وزن را به (۰,۲,۰) می‌برد. چون همهٔ قانون‌های این دکمه با هم بالا
 * می‌روند، ترتیب داخلی‌شان دست‌نخورده می‌ماند. !important عمداً استفاده نشده
 * تا سفارشی‌سازی کاربر همچنان ممکن بماند.
 */
.ard-pslider__arrow[class] {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	inline-size: var(--ard-ps-arrow-w);
	block-size: var(--ard-ps-arrow-h);
	padding: var(--ard-ps-arrow-pad);
	border: var(--ard-ps-arrow-bw) solid var(--ard-ps-arrow-line);
	border-radius: var(--ard-ps-arrow-radius);
	background: var(--ard-ps-arrow-bg);
	color: var(--ard-ps-arrow-ink);
	font: inherit;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.ard-pslider__arrow[class]:hover,
.ard-pslider__arrow[class]:focus-visible {
	border-color: var(--ard-ps-arrow-line-hover);
	background: var(--ard-ps-arrow-bg-hover);
	color: var(--ard-ps-arrow-ink-hover);
}

/* آیکون، چه SVG داخلی باشد چه فونت‌آیکونِ انتخابی کاربر. */
.ard-pslider__arrow[class] .ard-i,
.ard-pslider__arrow[class] svg {
	inline-size: var(--ard-ps-arrow-icon);
	block-size: var(--ard-ps-arrow-icon);
}

.ard-pslider__arrow[class] i {
	font-size: var(--ard-ps-arrow-icon);
	line-height: 1;
}

/* ---------------------------------------- جایگاه دکمه‌ها */

/*
 * هر دو دکمه همیشه absolute هستند و جایشان از متغیر می‌آید:
 *
 *   ax/ay  لنگر (۰٪ شروع، ۵۰٪ وسط، ۱۰۰٪ پایان)
 *   sx/sy  عقب‌کشیدن به اندازهٔ خودِ دکمه، تا روی لنگر بنشیند نه آویزان از آن
 *   x/y    جابه‌جایی دلخواه کاربر
 *
 * چرا margin و نه translate: margin منطقی است و در راست‌چین خودش برعکس
 * می‌شود؛ با translateX باید علامتش را دستی برمی‌گرداندیم و «جابه‌جایی مثبت»
 * در فارسی به بیرون صفحه می‌رفت.
 */
.ard-pslider__arrow[class] {
	position: absolute;
	z-index: 3;
	/* پدینگ نباید دکمه را بزرگ‌تر از اندازه‌ای کند که کاربر داده. */
	box-sizing: border-box;
}

.ard-pslider__arrow--prev[class] {
	inset-inline-start: calc(var(--ard-ps-prev-ax) + var(--ard-ps-prev-x));
	inset-block-start: calc(var(--ard-ps-prev-ay) + var(--ard-ps-prev-y));
	margin-inline-start: var(--ard-ps-prev-sx);
	margin-block-start: var(--ard-ps-prev-sy);
}

.ard-pslider__arrow--next[class] {
	inset-inline-start: calc(var(--ard-ps-next-ax) + var(--ard-ps-next-x));
	inset-block-start: calc(var(--ard-ps-next-ay) + var(--ard-ps-next-y));
	margin-inline-start: var(--ard-ps-next-sx);
	margin-block-start: var(--ard-ps-next-sy);
}

/*
 * «روی کارت‌ها»: دکمه‌ها از لبهٔ ریل کمی تو می‌آیند.
 *
 * این فاصله متغیر جداگانه‌ای دارد تا با «جابه‌جایی» کاربر قاطی نشود؛ آن یکی
 * دست کاربر است و این یکی مالِ خودِ حالت.
 */
.ard-pslider--arrows-inside .ard-pslider__arrow[class] {
	box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
}

.ard-pslider--arrows-inside .ard-pslider__arrow--prev[class] {
	inset-inline-start: calc(var(--ard-ps-prev-ax) + var(--ard-ps-prev-x) + var(--ard-ps-arrow-inset));
}

.ard-pslider--arrows-inside .ard-pslider__arrow--next[class] {
	inset-inline-start: calc(var(--ard-ps-next-ax) + var(--ard-ps-next-x) - var(--ard-ps-arrow-inset));
}

/* ---------------------------------------- نقطه‌ها */

.ard-pslider__dots[class] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ard-ps-dot-gap);
	margin-block-start: 10px;
}

.ard-pslider__dots[class]:empty {
	display: none;
}

/* نقطه‌ها هم <button> هستند، پس همان مشکلِ وزن را دارند. */
.ard-pslider__dot[class] {
	inline-size: var(--ard-ps-dot-size);
	block-size: var(--ard-ps-dot-size);
	min-inline-size: 0;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--ard-ps-dot);
	font: inherit;
	cursor: pointer;
	transition: inline-size .22s ease, background-color .22s ease;
}

.ard-pslider__dot.is-active[class] {
	inline-size: var(--ard-ps-dot-active-w);
	background: var(--ard-ps-dot-active);
}

/* ---------------------------------------- موبایل */

@media (max-width: 600px) {
	/*
	 * یک کارت در نما یعنی «بزرگ‌ترِ وسط» معنا ندارد؛ نسبت را برمی‌گردانیم
	 * به یک تا کارت تمام عرض را بگیرد.
	 */
	.ard-pslider--featured {
		--ard-ps-active-ratio: 1;
	}

	/*
	 * روی صفحهٔ باریک، گوشهٔ بیرونی جای ریل را تنگ می‌کند؛ دکمه‌ها می‌روند
	 * کنار و انگشت که از قبل می‌توانست اسلاید کند.
	 *
	 * اگر کاربر جای دکمه‌ها را خودش تنظیم کرده باشد، همان تنظیمِ موبایلِ خودش
	 * (کنترل‌ها ریسپانسیو هستند) بر این می‌چربد.
	 */
	.ard-pslider--arrows-outside .ard-pslider__stage {
		padding-inline: 0;
	}

	.ard-pslider--arrows-outside .ard-pslider__arrow[class] {
		display: none;
	}

	.ard-pslider__head {
		flex-wrap: wrap;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ard-pslider__dot[class],
	.ard-pslider__arrow[class],
	.ard-pslider__track > * {
		transition: none;
	}
}