/*
 * Opt-in visual variant for the reusable Home hero slider.
 *
 * Layout, content and interaction continue to come from the established hero
 * component. This layer changes only its design-system presentation.
 */
.dir-ui-hero-slider {
	--color-white: var(--dir-ui-color-neutral-0);
	--color-dark: var(--dir-ui-color-neutral-900);
	--color-blue: var(--dir-ui-color-brand-accessible);
	--color-blue-dark: var(--dir-ui-color-brand-dark);
	--color-accent: var(--dir-ui-color-accent);
	--color-muted: var(--dir-ui-color-neutral-300);
	color: var(--dir-ui-color-text-inverse);
	font-family: var(--dir-ui-font-body);
	background: var(--dir-ui-color-neutral-900);
}

.dir-ui-hero-slider .hero-slide__image {
	background: var(--dir-ui-color-neutral-900);
}

.dir-ui-hero-slider .hero-slide__overlay {
	background:
		linear-gradient(
			90deg,
			rgb(23 32 26 / 0.9) 0%,
			rgb(23 32 26 / 0.68) 40%,
			rgb(23 32 26 / 0.28) 72%,
			rgb(23 32 26 / 0.16) 100%
		),
		linear-gradient(
			0deg,
			rgb(11 61 27 / 0.3) 0%,
			transparent 54%
		);
}

.dir-ui-hero-slider .hero-slide__content {
	color: var(--dir-ui-color-text-inverse);
}

.dir-ui-hero-slider .hero-slide__eyebrow {
	color: var(--dir-ui-color-brand-on-dark);
	font-family: var(--dir-ui-font-heading);
	font-weight: var(--dir-ui-font-weight-bold);
	letter-spacing: var(--dir-ui-letter-spacing-label);
}

.dir-ui-hero-slider .hero-slide__eyebrow::before {
	background: var(--dir-ui-color-accent);
	opacity: 1;
}

.dir-ui-hero-slider .hero-slide__title {
	color: var(--dir-ui-color-text-inverse);
	font-family: var(--dir-ui-font-heading);
	font-size: clamp(2.5rem, min(4.6vw, 8vh), 5rem);
	font-weight: var(--dir-ui-font-weight-bold);
	line-height: 1.02;
	letter-spacing: var(--dir-ui-letter-spacing-tight);
}

.dir-ui-hero-slider .hero-slide__text {
	color: var(--dir-ui-color-neutral-200);
	font-family: var(--dir-ui-font-body);
	font-weight: var(--dir-ui-font-weight-regular);
	line-height: var(--dir-ui-line-height-body);
	margin-top: clamp(var(--dir-ui-space-6), 3.5vh, 2.25rem);
}

.dir-ui-hero-slider .hero-btn.dir-ui-button {
	min-height: 3.25rem;
	padding: 0.75rem 1.5rem;
	font-family: var(--dir-ui-font-heading);
	font-size: var(--dir-ui-font-size-300);
	font-weight: var(--dir-ui-font-weight-bold);
	text-transform: none;
	letter-spacing: 0;
	box-shadow: none;
}

.dir-ui-hero-slider .hero-btn.dir-ui-button--primary {
	color: var(--dir-ui-color-text-inverse);
	background: var(--dir-ui-color-brand-accessible);
	border-color: var(--dir-ui-color-brand-accessible);
}

.dir-ui-hero-slider .hero-btn.dir-ui-button--primary:hover,
.dir-ui-hero-slider .hero-btn.dir-ui-button--primary:focus-visible {
	color: var(--dir-ui-color-text-inverse);
	background: var(--dir-ui-color-brand-dark);
	border-color: var(--dir-ui-color-brand-dark);
}

.dir-ui-hero-slider .hero-btn.dir-ui-button--secondary {
	color: var(--dir-ui-color-neutral-900);
	background: var(--dir-ui-color-neutral-0);
	border-color: var(--dir-ui-color-neutral-0);
}

.dir-ui-hero-slider .hero-btn.dir-ui-button--secondary:hover,
.dir-ui-hero-slider .hero-btn.dir-ui-button--secondary:focus-visible {
	color: var(--dir-ui-color-neutral-900);
	background: var(--dir-ui-color-brand-on-dark);
	border-color: var(--dir-ui-color-brand-on-dark);
}

.dir-ui-hero-slider .hero-dot-number {
	color: var(--dir-ui-color-neutral-300);
	font-family: var(--dir-ui-font-heading);
	font-weight: var(--dir-ui-font-weight-bold);
}

.dir-ui-hero-slider .hero-dot-number:hover,
.dir-ui-hero-slider .hero-dot-number:focus-visible,
.dir-ui-hero-slider .hero-dot-number.is-active {
	color: var(--dir-ui-color-neutral-0);
}

.dir-ui-hero-slider .hero-slider__progress-line::before {
	background: rgb(255 255 255 / 0.36);
}

.dir-ui-hero-slider .hero-slider__progress-line span {
	background: var(--dir-ui-color-accent);
}

.dir-ui-hero-slider .hero-arrow {
	color: var(--dir-ui-color-text-inverse);
	font-family: var(--dir-ui-font-heading);
	background: var(--dir-ui-color-brand-accessible);
	border-color: var(--dir-ui-color-brand-accessible);
	border-radius: var(--dir-ui-button-radius) !important;
	box-shadow: var(--dir-ui-shadow-sm);
	backdrop-filter: none;
	transition:
		background-color var(--dir-ui-transition-fast),
		border-color var(--dir-ui-transition-fast),
		color var(--dir-ui-transition-fast),
		transform var(--dir-ui-transition-fast),
		box-shadow var(--dir-ui-transition-fast);
}

.dir-ui-hero-slider .hero-arrow:hover,
.dir-ui-hero-slider .hero-arrow:focus-visible {
	color: var(--dir-ui-color-text-inverse);
	background: var(--dir-ui-color-brand-dark);
	border-color: var(--dir-ui-color-brand-dark);
	box-shadow: var(--dir-ui-shadow-md);
	transform: translateY(-1px);
}

.dir-ui-hero-slider :where(.hero-dot-number, .hero-arrow):focus-visible {
	outline: 3px solid var(--dir-ui-color-focus);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.dir-ui-hero-slider .dir-ui-button:hover,
	.dir-ui-hero-slider .hero-arrow:hover,
	.dir-ui-hero-slider .hero-arrow:focus-visible {
		transform: none;
	}
}

@media (max-width: 640px) {
	.dir-ui-hero-slider .hero-slide__title {
		font-size: clamp(2rem, min(9.6vw, 8vh), 3.2rem);
		line-height: 1.02;
	}

	.dir-ui-hero-slider .hero-slide__text {
		margin-top: var(--dir-ui-space-6);
	}
}