/**
 * ID Hero Slider — Frontend Styles
 *
 * @package ID_Hero_Slider
 */

/* ==========================================================================
   Slider Container
   ========================================================================== */

.idhs-slider {
	--idhs-height: 60vh;
	--idhs-overlay: 0.3;
	--idhs-transition: 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);

	position: relative;
	overflow: hidden;
	height: var(--idhs-height);
	width: 100%;
}

/* ==========================================================================
   Track & Slides
   ========================================================================== */

.idhs-slider__track {
	display: flex;
	height: 100%;
	transition: transform var(--idhs-transition);
	will-change: transform;
}

.idhs-slider__slide {
	flex: 0 0 50%;
	height: 100%;
	position: relative;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	cursor: pointer;
}

/*
 * Full-width mode: one slide fills the frame instead of the default 50%, so
 * no part of the neighbouring slides shows. The engine reads the rendered
 * slide width rather than assuming one, so nothing else has to change -- the
 * centring offset simply works out to zero.
 */
.idhs-slider--full .idhs-slider__slide {
	flex: 0 0 100%;
}

/* Dark overlay */
.idhs-slider__slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, var(--idhs-overlay));
	transition: background 0.3s;
	pointer-events: none;
}

/* Clickable slide link */
.idhs-slider__slide-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	padding: 2rem 3rem;
	text-decoration: none;
	color: #fff;
}

.idhs-slider__slide-content {
	max-width: 70%;
}

/* ==========================================================================
   Text position
   --------------------------------------------------------------------------
   The setting is one value, `{vertical}-{horizontal}`, which the template
   splits into two modifier classes -- six rules instead of nine combinations.

   Scoped to 769px and up on purpose: below that the slide switches to its own
   layout (text at the bottom, full width, tighter padding), which is what
   sliders already did before this setting existed. Overriding it here would
   silently move the text on every phone.
   ========================================================================== */

@media (min-width: 769px) {
	.idhs-slider--v-top .idhs-slider__slide-link {
		align-items: flex-start;
	}

	.idhs-slider--v-middle .idhs-slider__slide-link {
		align-items: center;
	}

	.idhs-slider--v-bottom .idhs-slider__slide-link {
		align-items: flex-end;
	}

	.idhs-slider--h-left .idhs-slider__slide-link {
		justify-content: flex-start;
	}

	.idhs-slider--h-middle .idhs-slider__slide-link {
		justify-content: center;
	}

	.idhs-slider--h-right .idhs-slider__slide-link {
		justify-content: flex-end;
	}

	/* The text should read from the same edge it is anchored to. */
	.idhs-slider--h-middle .idhs-slider__slide-content {
		text-align: center;
	}

	.idhs-slider--h-right .idhs-slider__slide-content {
		text-align: right;
	}
}

/* ==========================================================================
   Title & Subtitle — position set above, centred-left by default
   ========================================================================== */

.idhs-slider__title {
	display: block;
	font-size: clamp(1.25rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.idhs-slider__subtitle {
	display: inline-block;
	margin-top: 0.75rem;
	padding: 0.5rem 1.25rem;
	font-size: clamp(0.8rem, 1.2vw, 1rem);
	font-weight: 600;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.8);
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	transition: background 0.2s, border-color 0.2s;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.idhs-slider__slide-link:hover .idhs-slider__subtitle {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
}

/* ==========================================================================
   Navigation Arrows — large, transparent with white border
   ========================================================================== */

.idhs-slider__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.8);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	color: #fff;
	transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

.idhs-slider__nav:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: #fff;
	transform: translateY(-50%) scale(1.05);
}

.idhs-slider__nav--prev {
	left: 24px;
}

.idhs-slider__nav--next {
	right: 24px;
}

.idhs-slider__nav svg {
	display: block;
	stroke: #fff;
	fill: none;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet — smaller arrows */
@media (max-width: 1024px) {
	.idhs-slider__nav {
		width: 56px;
		height: 56px;
	}

	.idhs-slider__nav svg {
		width: 28px;
		height: 28px;
	}

	.idhs-slider__nav--prev {
		left: 12px;
	}

	.idhs-slider__nav--next {
		right: 12px;
	}
}

/* Mobile — full-width single slide, no arrows, no peek */
@media (max-width: 768px) {
	.idhs-slider__slide {
		flex: 0 0 100%;
	}

	.idhs-slider__nav {
		display: none;
	}

	.idhs-slider__slide-link {
		padding: 1.5rem;
		align-items: flex-end;
	}

	.idhs-slider__slide-content {
		max-width: 100%;
	}
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.idhs-slider__track {
		transition: none;
	}
}