/**
 * Full-width homepage hero slider (Phase 3.1)
 */

.jawharet-hero-slider {
	position: relative;
	width: 100%;
	max-width: 100%;
	margin: 0;
	color: var(--color-white);
	background: var(--color-navy);
	isolation: isolate;
}

.jawharet-hero-slider__viewport {
	position: relative;
	overflow: hidden;
	min-height: clamp(22rem, 72vh, 45rem);
}

.jawharet-hero-slider__track {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	min-height: inherit;
}

.jawharet-hero-slider__slide {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--hero-fade-duration, 600ms) ease;
	z-index: 1;
}

.jawharet-hero-slider__slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 2;
}

.jawharet-hero-slider__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.jawharet-hero-slider__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.jawharet-hero-slider__media-fallback {
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, var(--color-navy) 0%, color-mix(in srgb, var(--color-navy) 82%, #000) 100%);
}

.jawharet-hero-slider__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		270deg,
		rgb(20 45 62 / 0.15) 0%,
		rgb(20 45 62 / 0.55) 42%,
		rgb(20 45 62 / 0.88) 100%
	);
	pointer-events: none;
}

.jawharet-hero-slider__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	min-height: clamp(22rem, 72vh, 45rem);
	padding: var(--space-8) var(--container-padding);
}

.jawharet-hero-slider__content-inner {
	width: min(100%, 36rem);
	margin-inline-start: auto;
	text-align: right;
}

.jawharet-hero-slider__title {
	margin: 0 0 var(--space-3);
	font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl));
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-bold);
	color: var(--color-white);
	text-wrap: balance;
}

.jawharet-hero-slider__description {
	margin: 0 0 var(--space-5);
	font-size: clamp(var(--font-size-sm), 2.2vw, var(--font-size-md));
	line-height: var(--line-height-relaxed);
	color: rgb(255 255 255 / 0.92);
	max-width: 34rem;
}

.jawharet-hero-slider__actions {
	margin: 0;
}

.jawharet-hero-slider__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.55rem 1.35rem;
	border-radius: var(--radius-pill);
	background: var(--color-teal);
	color: var(--color-white) !important;
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
	box-shadow: var(--shadow-sm);
	transition: background var(--transition-fast), transform var(--transition-fast);
}

.jawharet-hero-slider__cta:hover,
.jawharet-hero-slider__cta:focus-visible {
	background: var(--color-teal-dark);
	color: var(--color-white) !important;
	transform: translateY(-1px);
}

.jawharet-hero-slider__nav--arrows {
	position: absolute;
	inset-block: 0;
	inset-inline: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: var(--space-3);
	pointer-events: none;
}

.jawharet-hero-slider__arrow {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid rgb(255 255 255 / 0.35);
	border-radius: var(--radius-pill);
	background: rgb(20 45 62 / 0.45);
	color: var(--color-white);
	font-size: 1.35rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition-fast), border-color var(--transition-fast);
}

.jawharet-hero-slider__arrow:hover,
.jawharet-hero-slider__arrow:focus-visible {
	background: rgb(8 126 139 / 0.85);
	border-color: rgb(255 255 255 / 0.65);
}

.jawharet-hero-slider__nav--dots {
	position: absolute;
	inset-inline: 0;
	bottom: var(--space-4);
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: var(--space-2);
	padding-inline: var(--space-4);
}

.jawharet-hero-slider__dot {
	width: 0.55rem;
	height: 0.55rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-pill);
	background: rgb(255 255 255 / 0.45);
	cursor: pointer;
	transition: transform var(--transition-fast), background var(--transition-fast);
}

.jawharet-hero-slider__dot.is-active {
	background: var(--color-teal);
	transform: scale(1.15);
}

.jawharet-hero-slider.is-paused .jawharet-hero-slider__slide {
	transition-duration: calc(var(--hero-fade-duration, 600ms) * 0.5);
}

@media (max-width: 782px) {
	.jawharet-hero-slider__content {
		padding-block: var(--space-10);
	}

	.jawharet-hero-slider__content-inner {
		width: 100%;
	}

	.jawharet-hero-slider__overlay {
		background: linear-gradient(
			180deg,
			rgb(20 45 62 / 0.35) 0%,
			rgb(20 45 62 / 0.82) 55%,
			rgb(20 45 62 / 0.92) 100%
		);
	}

	.jawharet-hero-slider__arrow {
		width: 2.25rem;
		height: 2.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.jawharet-hero-slider__slide {
		transition: none;
	}
}