/* چیدمان بیرونی (grid / slider) با کلاس‌های UIkit کنترل می‌شود، اینجا فقط استایل خود بلاک بنر تعریف شده */

.mod-bannerhero-block {
	position: relative;
	width: 100%;
	/* ارتفاع پیش‌فرض هر بلاک - از طریق فیلد "ارتفاع بلوک" در همون آیتم قابل بازنویسی است */
	min-height: 420px;
	background-image: var(--bh-bg-desktop, none);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mod-bannerhero-overlay {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	padding: 40px 20px;
}

.mod-bannerhero-content {
	text-align: center;
	max-width: 720px;
}

.mod-bannerhero-title1 {
	font-size: 2.2rem;
	font-weight: 700;
	margin: 0 0 10px;
}

.mod-bannerhero-title2 {
	font-size: 1.3rem;
	font-weight: 400;
	margin: 0 0 20px;
}

.mod-bannerhero-desc {
	font-size: 1rem;
	line-height: 1.5;
	margin: 0 0 20px;
	color: inherit;
	/* محدود کردن به حداکثر ۲ خط با سه‌نقطه در انتها اگر متن طولانی‌تر بود */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.mod-bannerhero-btn {
	margin-top: 10px;
}

@media (max-width: 640px) {
	.mod-bannerhero-block {
		min-height: 300px;
		background-image: var(--bh-bg-mobile, var(--bh-bg-desktop, none));
	}

	.mod-bannerhero-title1 {
		font-size: 1.5rem;
	}

	.mod-bannerhero-title2 {
		font-size: 1.05rem;
	}
}