/*
File: RafinaStudio/inc/frontend/hero/hero.css
*/

.rafina-hero-wrap {
	margin-block: 24px;
}

.rafina-hero-slider {
	position: relative;
	width: 100%;
	aspect-ratio: 2560 / 533;
	overflow: hidden;
	border-radius: var(--rafina-radius, 18px);
	background: var(--rafina-panel);
	cursor: grab;
	user-select: none;
	/* صفحه RTL است؛ در حالت راست‌به‌چپ چیدمان فلکس و جهت سرریز برعکس
	   می‌شود و محاسبه‌ی translateX اسلایدر به فضای خالی می‌رسد (باعث
	   سفید ماندن اسلاید دوم می‌شد). چون محتوای اسلایدها فقط تصویر است،
	   جهت را اینجا LTR می‌کنیم تا ریاضیات جابه‌جایی استاندارد و درست باشد. */
	direction: ltr;
}
.rafina-hero-slider:active { cursor: grabbing; }

.rafina-hero-track {
	display: flex;
	height: 100%;
	direction: ltr;
	transition: transform .5s ease;
}

.rafina-hero-slide {
	flex-shrink: 0;
	width: 100%;
	height: 100%;
}
.rafina-hero-slide a,
.rafina-hero-slide picture {
	display: block;
	width: 100%;
	height: 100%;
}
.rafina-hero-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	-webkit-user-drag: none;
}

.rafina-hero-dots {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	z-index: 5;
}
.rafina-hero-dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	border: none;
	background: rgba(255,255,255,.5);
	cursor: pointer;
	padding: 0;
	transition: width .25s ease, background .25s ease;
}
.rafina-hero-dot.is-active {
	width: 24px;
	background: var(--rafina-accent-2, #19672a);
}

@media (max-width: 782px) {
	.rafina-hero-slider { aspect-ratio: 1 / 1; border-radius: 12px; }
}