/* Branded media treatment for the opening homepage carousel slide. */
.hero-brand-video {
	margin: 0;
	background:
		radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .98), rgba(232, 236, 232, .94));
}

.hero-brand-video-media {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	background: #e8ece8;
	filter: contrast(1.06) saturate(1.04);
}

.hero-brand-video::after {
	background: radial-gradient(circle at center, transparent 58%, rgba(8, 47, 37, .08));
}

.hero-brand-video-toggle {
	position: absolute;
	z-index: 3;
	inset: 36px auto auto 50%;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	padding: 0;
	color: var(--emerald-950);
	background: rgba(255, 255, 255, .92);
	border: 1px solid rgba(138, 99, 21, .7);
	border-radius: 50% !important;
	box-shadow: 0 8px 24px rgba(2, 18, 13, .18);
	cursor: pointer;
	transform: translateX(-50%);
	transition: color var(--transition), background-color var(--transition), transform var(--transition);
}

.hero-brand-video-toggle:hover,
.hero-brand-video-toggle:focus-visible {
	color: #17140d;
	background: var(--gold-300);
	transform: translate(-50%, -2px);
}

.hero-brand-video-toggle:focus-visible {
	outline: 3px solid var(--white);
	outline-offset: 3px;
}

.hero-brand-video-toggle .icon {
	width: 18px;
	height: 18px;
}

.hero-brand-video-toggle .icon-play {
	display: none;
}

.hero-brand-video-toggle.is-video-paused .icon-pause {
	display: none;
}

.hero-brand-video-toggle.is-video-paused .icon-play {
	display: block;
}

/* Keep the carousel engine LTR while mirroring only the visible Arabic layout. */
[dir="rtl"] .hero-slider-footer {
	direction: rtl;
}

[dir="rtl"] .hero-slider-footer .slide-counter {
	direction: ltr;
}

[dir="rtl"] .hero-slider-footer .slider-controls {
	flex-direction: row;
}

[dir="rtl"] .hero-slider-footer [data-prev] .icon,
[dir="rtl"] .hero-slider-footer [data-next] .icon,
[dir="rtl"] .hero-copy .button-row .icon {
	transform: scaleX(-1);
}

@media (min-width: 821px) {
	[dir="rtl"] .hero-copy {
		margin-right: 0;
		margin-left: auto;
	}

	[dir="rtl"] .hero-photo {
		inset: 28px 62% 28px 28px;
	}

	.hero-brand-video,
	[dir="rtl"] .hero-brand-video {
		top: 50%;
		bottom: auto;
		height: auto;
		aspect-ratio: 1 / 1;
		border-radius: 50% 50% 16px 16px !important;
		transform: translateY(-50%);
	}

	[dir="rtl"] .hero-slider-footer {
		inset: auto 38px 18px 18px;
	}
}

@media (max-width: 820px) {
	.hero-brand-video {
		height: 262px;
		aspect-ratio: auto;
		transform: none;
	}

	.hero-brand-video-media {
		object-fit: contain;
	}

	.hero-brand-video-toggle {
		inset-block-start: 20px;
	}
}