/* کاروسل ویژگی‌ها — استایل
   تراک با اسکرول بومی و scroll-snap ساخته شده، پس لمس و سوایپ و کیبورد
   بدون هیچ جاوااسکریپتی کار می‌کنند؛ JS فقط فلش‌ها را می‌گرداند. */

.dnk-tc {
	--dnk-tc-columns: 6;
	--dnk-tc-gap: 16px;
	--dnk-tc-image-size: 88px;
	--dnk-tc-image-radius: 50%;
	--dnk-tc-image-fit: contain;
	--dnk-tc-image-bg: #fff;
	--dnk-tc-image-padding: 8px;
	--dnk-tc-title-lines: 2;
	--dnk-tc-arrow-size: 38px;

	position: relative;
	display: flex;
	align-items: center;
	gap: 6px;
}

.dnk-tc-track {
	display: grid;
	grid-auto-flow: column;
	/* عرض هر آیتم از تعداد ستون و فاصله حساب می‌شود تا دقیقاً همان تعداد
	   در یک نما جا شود. */
	grid-auto-columns: calc(
		(100% - (var(--dnk-tc-gap) * (var(--dnk-tc-columns) - 1)))
		/ var(--dnk-tc-columns)
	);
	gap: var(--dnk-tc-gap);
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scroll-snap-type: inline mandatory;
	flex: 1 1 auto;
	min-width: 0;
	padding-block: 4px;

	/* نوار اسکرول پنهان می‌شود ولی خود اسکرول سر جایش است. */
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.dnk-tc-track::-webkit-scrollbar {
	display: none;
}

.dnk-tc-item {
	scroll-snap-align: start;
	min-width: 0;
}

.dnk-tc-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	text-align: center;
	text-decoration: none;
	color: inherit;
}

.dnk-tc-media {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--dnk-tc-image-size);
	block-size: var(--dnk-tc-image-size);
	padding: var(--dnk-tc-image-padding);
	border-radius: var(--dnk-tc-image-radius);
	background-color: var(--dnk-tc-image-bg);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.dnk-tc-image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: var(--dnk-tc-image-fit);
	display: block;
}

/* بدون تصویر: حرف اول نام. اندازه‌اش نسبت به قاب است تا با تغییر
   اندازهٔ تصویر خودش هماهنگ بماند. */
.dnk-tc-initial {
	font-size: calc(var(--dnk-tc-image-size) * 0.4);
	font-weight: 700;
	line-height: 1;
	color: #8a8a8a;
	user-select: none;
}

.dnk-tc-title {
	display: -webkit-box;
	-webkit-line-clamp: var(--dnk-tc-title-lines);
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.7;
	transition: color 0.2s ease;
}

.dnk-tc-count {
	font-size: 0.82em;
	line-height: 1.6;
}

.dnk-tc--hover .dnk-tc-item:hover .dnk-tc-media {
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.dnk-tc--hover .dnk-tc-item:hover .dnk-tc-media {
		transform: none;
	}
}

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

.dnk-tc-arrow {
	--dnk-tc-arrow-color: #2d333d;
	--dnk-tc-arrow-bg: #fff;

	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--dnk-tc-arrow-size);
	block-size: var(--dnk-tc-arrow-size);
	padding: 0;
	border: 1px solid #ebebeb;
	border-radius: 50%;
	background-color: var(--dnk-tc-arrow-bg);
	color: var(--dnk-tc-arrow-color);
	cursor: pointer;
	transition: opacity 0.2s ease, box-shadow 0.2s ease;
}

.dnk-tc-arrow svg {
	inline-size: 55%;
	block-size: 55%;
}

/* فلش «قبلی» در RTL باید سمت راست تراک باشد؛ ترتیب DOM را با order
   عوض می‌کنیم تا مارک‌آپ منطقی بماند. */
.dnk-tc-prev {
	order: 3;
}

.dnk-tc-track {
	order: 2;
}

.dnk-tc-next {
	order: 1;
}

.dnk-tc-arrow:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.dnk-tc-arrow--disabled {
	opacity: 0.35;
	pointer-events: none;
}

.dnk-tc-empty {
	margin: 0;
	padding: 16px;
	text-align: center;
	color: #8a8a8a;
}