/**
 * Carsoft Video Gallery
 * اسکرول با scroll-snap بومی مرورگر — بدون هیچ JS برای حرکت.
 * تمام فاصله‌ها با logical properties نوشته شده‌اند تا RTL خودکار درست بچیند.
 */

.cs-gallery {
	--cs-h: 620px;
	--cs-h-md: 480px;
	--cs-h-sm: 380px;
	--cs-card: min(87.5vw, 1000px);
	--cs-edge: 6.25vw;
	--cs-gap: 20px;
	--cs-radius: 28px;
	--cs-overlay: rgba(0, 0, 0, 0);

	position: relative;
	max-width: 100%;
}

/* ---------- ریل اسکرول ----------
 *
 * مدل چیدمان عیناً از اپل (`.media-card-set`):
 *   scroll-snap-align: start          نه center
 *   scroll-padding-inline-start: 6.25vw
 *   width: min(87.5vw, max-width)
 *
 * چون کارت به لبهٔ **ابتدا** می‌چسبد نه وسط، فضای باقی‌مانده همه در سمت
 * انتها می‌ماند: کارت قبلی کم دیده می‌شود و کارت بعدی زیاد.
 * هرچه --cs-edge کمتر، این نامتقارنی بیشتر.
 */

.cs-track {
	display: flex;
	gap: var(--cs-gap);
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	padding-inline-start: var(--cs-edge);
	/* لبهٔ انتها آن‌قدر باشد که آخرین کارت هم بتواند به جای خودش برسد. */
	padding-inline-end: max(var(--cs-edge), calc(100% - var(--cs-card) - var(--cs-edge)));
	scroll-padding-inline-start: var(--cs-edge);

	scrollbar-width: none;
	-ms-overflow-style: none;
	-webkit-overflow-scrolling: touch;
}

.cs-track::-webkit-scrollbar {
	display: none;
}

.cs-track:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}

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

.cs-slide {
	flex: 0 0 var(--cs-card);
	scroll-snap-align: start;
	scroll-snap-stop: always;
	height: var(--cs-h);
	margin: 0;
	position: relative;
	border-radius: var(--cs-radius);
	overflow: hidden;
	background: #000;
	isolation: isolate;
}

.cs-slide__link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* اسلایدی که با کلیک پخش/توقف می‌شود */
.cs-slide--clickable {
	cursor: pointer;
}

.cs-video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
}

.cs-slide__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: var(--cs-overlay);
}

/* ---------- عنوان ---------- */

.cs-slide__caption {
	position: absolute;
	inset-inline: 0;
	z-index: 2;
	padding-inline: 8%;
	text-align: center;
	color: #f5f5f7;
	font-size: clamp(20px, 2.4vw, 34px);
	line-height: 1.5;
	text-wrap: balance;
	text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.cs-slide__caption--top {
	top: clamp(24px, 5%, 56px);
}

.cs-slide__caption--bottom {
	bottom: clamp(24px, 5%, 56px);
}

/* ---------- ناوبری پایین ----------
 *
 * مقادیر عیناً از CSS خود اپل (overview.built.css) برداشته شده‌اند:
 *   --sk-dotnav-size: 8px            اندازهٔ دات غیرفعال
 *   --sk-dotnav-margin-inline: 8px   یعنی ۱۶px فاصله بین دات‌ها
 *   --progress-bar-active-width: 32px  عرض قرص دات فعال
 *   --aap-inactive-fill-color: #a1a1a2
 *   --aap-active-fill-color:   #29292a
 *   --aap-background-color: rgba(232,232,237,0.72) + blur 7px
 *   --aap-bubble-gap: 16px
 */

.cs-gallery {
	--cs-dot-size: 8px;
	--cs-dot-gap: 16px;
	--cs-dot-active-width: 32px;
	--cs-dot-inactive: #a1a1a2;
	--cs-dot-active: #29292a;
	--cs-dot-track: rgba(29, 29, 31, 0.28);
	--cs-glass-bg: rgba(232, 232, 237, 0.72);
	--cs-glass-glow: rgba(0, 0, 0, 0.11);
	--cs-icon-color: rgb(29, 29, 31);
}

/* تم تیره — برای وقتی ناوبری روی پس‌زمینهٔ تیره می‌نشیند. */
.cs-gallery--dark {
	--cs-dot-inactive: #767677;
	--cs-dot-active: rgb(245, 245, 247);
	--cs-dot-track: rgba(245, 245, 247, 0.28);
	--cs-glass-bg: rgba(51, 51, 54, 0.7);
	--cs-glass-glow: rgba(232, 232, 237, 0.11);
	--cs-icon-color: rgb(245, 245, 247);
}

.cs-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cs-dot-gap);
}

/* پیش‌فرض: زیر ویدئو */
.cs-gallery--nav-below .cs-nav {
	margin-top: 20px;
}

/* اختیاری: شناور روی کارت */
.cs-gallery--nav-overlay .cs-nav {
	position: absolute;
	inset-inline: 0;
	bottom: 24px;
	z-index: 4;
	margin-top: 0;
	pointer-events: none;
}

.cs-gallery--nav-overlay .cs-dots,
.cs-gallery--nav-overlay .cs-playpause {
	pointer-events: auto;
}

/* کپسول شیشه‌ای دات‌ها */
.cs-dots {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: var(--cs-dot-gap);
	height: 44px;
	padding: 0 20px;
	border-radius: 32px;
	background: var(--cs-glass-bg);
	box-shadow: inset 0 0 0 1px var(--cs-glass-glow);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	pointer-events: auto;
}

/* `display:flex` بر خاصیت hidden غلبه می‌کند، پس صریح خاموشش می‌کنیم. */
.cs-dots[hidden],
.cs-arrow[hidden] {
	display: none;
}

.cs-dots button {
	position: relative;
	overflow: hidden;
	width: var(--cs-dot-size);
	height: var(--cs-dot-size);
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: var(--cs-dot-inactive);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: width 0.35s ease, background-color 0.25s linear;
}

.cs-dots button:hover:not([aria-selected="true"]) {
	background: #8e8e93;
}

/* دات فعال = قرص کشیده، نه دایرهٔ بزرگ‌شده */
.cs-dots button[aria-selected="true"] {
	width: var(--cs-dot-active-width);
	background: var(--cs-dot-track);
	cursor: default;
}

/*
 * نوار پیشرفت داخل دات فعال.
 * عرضش را JS از روی currentTime/duration ویدئو ست می‌کند، پس با توقف
 * ویدئو خودش می‌ایستد و با لوپ شدن به صفر برمی‌گردد.
 * inset-inline-start یعنی در RTL از راست پر می‌شود — همان جهت خواندن.
 */
.cs-dots button[aria-selected="true"]::after {
	content: "";
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	height: 100%;
	width: calc(var(--cs-progress, 0) * 100%);
	border-radius: 10px;
	background: var(--cs-dot-active);
}

/* بدون نوار پیشرفت: دات فعال یکدست پر باشد */
.cs-gallery--no-progress .cs-dots button[aria-selected="true"] {
	background: var(--cs-dot-active);
}

.cs-gallery--no-progress .cs-dots button[aria-selected="true"]::after {
	display: none;
}

/* ---------- دکمهٔ پخش/توقف ---------- */

.cs-playpause {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--cs-glass-bg);
	box-shadow: inset 0 0 0 1px var(--cs-glass-glow);
	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: auto;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease;
}

.cs-playpause:hover {
	background: rgba(223, 223, 227, 0.88);
}

/*
 * فقط **یک** SVG داخل دکمه است و JS مسیرش را بین پخش و توقف عوض می‌کند.
 * SVG به‌جای شکل CSS چون در dir="rtl" آینه نمی‌شود — مثلث پخش همیشه به
 * راست اشاره می‌کند، مثل هر پخش‌کنندهٔ دیگری.
 */
.cs-playpause .cs-icon {
	width: 100%;
	height: 100%;
	display: block;
	fill: var(--cs-icon-color);
	pointer-events: none;
}

/* ---------- فلش‌ها ---------- */

.cs-arrow {
	position: absolute;
	top: calc(var(--cs-h) / 2);
	z-index: 3;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(210, 210, 215, 0.55);
	cursor: pointer;
	transform: translateY(-50%);
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.2s ease, opacity 0.2s ease;
}

.cs-arrow:hover {
	background: rgba(160, 160, 168, 0.75);
}

.cs-arrow[disabled] {
	opacity: 0.3;
	cursor: default;
}

/*
 * شِوران با border فیزیکی ساخته می‌شود (نه logical) تا جهتش قابل پیش‌بینی
 * بماند، و جهت هر فلش صراحتاً برای LTR و RTL تعیین می‌شود.
 * برخلاف مثلث پخش، فلش‌های قبلی/بعدی *باید* در RTL آینه شوند.
 */
.cs-arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 9px;
	height: 9px;
	border-top: 2px solid #1d1d1f;
	border-left: 2px solid #1d1d1f;
}

.cs-arrow--prev { inset-inline-start: 16px; }
.cs-arrow--next { inset-inline-end: 16px; }

/* LTR: قبلی ← ، بعدی → */
.cs-arrow--prev::before { transform: translateX(2px) rotate(-45deg); }
.cs-arrow--next::before { transform: translateX(-2px) rotate(135deg); }

/* RTL: جهت‌ها برعکس می‌شوند */
[dir="rtl"] .cs-arrow--prev::before { transform: translateX(-2px) rotate(135deg); }
[dir="rtl"] .cs-arrow--next::before { transform: translateX(2px) rotate(-45deg); }

/* ---------- ریسپانسیو ---------- */

@media (max-width: 1024px) {
	.cs-slide { height: var(--cs-h-md); }
	.cs-arrow { top: calc(var(--cs-h-md) / 2); }
}

@media (max-width: 767px) {
	.cs-gallery {
		--cs-card: 87.5vw;
		--cs-edge: 6.25vw;
		--cs-radius: 20px;
		--cs-gap: 12px;
		--cs-dot-gap: 12px;
		--cs-dot-active-width: 26px;
	}
	.cs-slide { height: var(--cs-h-sm); }
	.cs-arrow { display: none; }
	.cs-slide__caption { font-size: clamp(17px, 4.4vw, 22px); }
	.cs-nav { bottom: 16px; gap: 12px; }
	.cs-dots { height: 36px; padding: 0 16px; }
	.cs-playpause { width: 36px; height: 36px; }
}

/* ---------- کاهش انیمیشن ---------- */

@media (prefers-reduced-motion: reduce) {
	.cs-track { scroll-behavior: auto; }
	.cs-dots button { transition: none; }
}