.iuvg-outer {
	display: flex !important;
	justify-content: center !important;
	width: 100% !important;
	box-sizing: border-box;
	overflow-x: auto;
}

.iuvg-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--iuvg-gap, 16px);
	width: 100%;
	max-width: var(--iuvg-max-width, 900px);
	margin: 24px 0;
	direction: rtl;
	box-sizing: border-box;
	flex-shrink: 0;
}

.iuvg-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	/* بدون این خط، چون روی .iuvg-name متن با white-space:nowrap نمایش داده می‌شود،
	   مرورگر حداقل عرض هر آیتم گرید را برابر با طول کامل نام (بدون شکستن) در نظر
	   می‌گیرد. روی صفحه‌ی باریک/موبایل، جمع این سه حداقل‌عرض از عرض واقعی باکس بیشتر
	   می‌شود و کل گرید از هر دو طرف باکس بیرون می‌زند (دقیقاً همان چیزی که در اسکرین‌شات
	   موبایل دیده می‌شود). با min-width:0 به آیتم گرید اجازه می‌دهیم از عرض محتوایش
	   کوچک‌تر هم بشود؛ آن‌وقت ellipsis‌ی که روی .iuvg-name تعریف شده (به‌جای شکستن خط)
	   واقعاً فعال می‌شود و نام‌های بلند به‌جای بیرون‌زدگی، با سه‌نقطه کوتاه می‌شوند. */
	min-width: 0;
}

.iuvg-name {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-weight: 700;
	font-size: clamp(11px, 2.6vw, 15px);
	line-height: 1.35;
	color: var(--iuvg-name-color, #1f2937);
	background: var(--iuvg-name-bg, #f3f0ff);
	border-radius: 14px;
	padding: 6px 8px;
	margin-bottom: 8px;
	/* قبلاً white-space:nowrap + ellipsis بود که روی ستون‌های باریک، اسم‌های بلند رو با
	   سه‌نقطه نصفه می‌کرد. حالا اجازه می‌دیم متن به خط بعد بشکنه تا کامل و خوانا بمونه؛
	   به همین خاطر شکل کپسولی (border-radius:999px) هم به یک مستطیل با گوشه‌های گرد
	   تبدیل شد، چون کپسول کامل با متن دو/سه‌خطی شکل خوبی نمی‌سازد. */
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
}

.iuvg-video-frame {
	width: 100%;
	border: 3px solid var(--iuvg-border-color, #7c3aed);
	border-radius: var(--iuvg-radius, 16px);
	overflow: hidden;
	box-shadow: 0 6px 16px rgba(0,0,0,.12);
	background: #000;
	transition: transform .2s ease, box-shadow .2s ease;
	aspect-ratio: var(--iuvg-aspect, 16 / 9);
}

.iuvg-video-frame:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(0,0,0,.18);
}

.iuvg-video-frame video {
	width: 100%;
	height: 100%;
	object-fit: var(--iuvg-fit, cover);
	display: block;
	background: #000;
}

@media (max-width: 480px) {
	.iuvg-grid {
		gap: calc(var(--iuvg-gap, 16px) / 2);
	}
	.iuvg-video-frame {
		border-width: 2px;
	}
}