/*
 * Ventureheap Builder - banner slider.
 *
 * The desktop and mobile banners are swapped by a <picture> element, not by
 * JavaScript and not by CSS background images, so the browser downloads only
 * the one it needs and never both.
 */

.vhb-slider { position: relative; }

.vhb-slider .vhb-carousel-track { gap: 0; }
.vhb-slider .vhb-slide { width: 100%; }

.vhb-slider__item {
	position: relative;
	display: flex;
	width: 100%;
	min-height: var(--vhb-slide-h-mobile, 420px);
	overflow: hidden;
	background: var(--vhb-alt);
	isolation: isolate;
}

/* Media ------------------------------------------------------------------- */
.vhb-slider__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	display: block;
}

.vhb-slider__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--vhb-slide-focus, center);
	display: block;
}

.vhb-slider__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--vhb-slide-overlay, rgba(15, 23, 42, .45));
	pointer-events: none;
}

/* Content ----------------------------------------------------------------- */
.vhb-slider__content {
	position: relative;
	z-index: 2;
	display: flex;
	width: 100%;
	padding: 40px 20px;
}

.vhb-slider__inner {
	width: 100%;
	max-width: var(--vhb-slide-max, 620px);
	display: flex;
	flex-direction: column;
	gap: .85rem;
}

/* Horizontal placement */
.vhb-slider__content--left { justify-content: flex-start; }
.vhb-slider__content--center { justify-content: center; }
.vhb-slider__content--center .vhb-slider__inner { text-align: center; align-items: center; }
.vhb-slider__content--right { justify-content: flex-end; }
.vhb-slider__content--right .vhb-slider__inner { text-align: right; align-items: flex-end; }

/* Vertical placement */
.vhb-slider__content--top { align-items: flex-start; }
.vhb-slider__content--middle { align-items: center; }
.vhb-slider__content--bottom { align-items: flex-end; }

.vhb-slider__eyebrow {
	margin: 0;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--vhb-accent);
}

.vhb-slider__title {
	margin: 0;
	font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.2rem);
	line-height: 1.15;
	color: #fff;
}

.vhb-slider__text {
	margin: 0;
	font-size: clamp(.95rem, .9rem + .3vw, 1.1rem);
	color: rgba(255, 255, 255, .88);
}

.vhb-slider__text p:last-child { margin-bottom: 0; }

.vhb-slider__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: .5rem;
}

.vhb-slider__content--center .vhb-slider__actions { justify-content: center; }
.vhb-slider__content--right .vhb-slider__actions { justify-content: flex-end; }

/* A whole-slide link sits above the image but below the buttons, so the
   buttons stay individually clickable. */
.vhb-slider__link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vhb-slider__actions .vhb-btn { position: relative; z-index: 3; }

/* Boxed content lines the text up with the rest of the page ---------------- */
.vhb-slider--boxed .vhb-slider__content {
	max-width: var(--vh-container, 1200px);
	margin-inline: auto;
}

/* Fade effect ------------------------------------------------------------- */
.vhb-carousel[data-effect="fade"] .vhb-carousel-track {
	display: block;
	position: relative;
}

.vhb-carousel[data-effect="fade"] .vhb-slide {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .5s ease;
}

.vhb-carousel[data-effect="fade"] .vhb-slide:first-child { position: relative; }
.vhb-carousel[data-effect="fade"] .vhb-slide.is-active { opacity: 1; visibility: visible; z-index: 2; }

/* Controls ---------------------------------------------------------------- */
.vhb-slider .vhb-carousel-prev { left: 12px; }
.vhb-slider .vhb-carousel-next { right: 12px; }

.vhb-slider .vhb-carousel-arrow {
	background: rgba(255, 255, 255, .9);
	border-color: transparent;
}

.vhb-slider .vhb-carousel-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 18px;
	margin: 0;
	z-index: 4;
}

.vhb-slider .vhb-carousel-dot { background: rgba(255, 255, 255, .5); }
.vhb-slider .vhb-carousel-dot[aria-selected="true"] { background: #fff; }

/* Breakpoints ------------------------------------------------------------- */
@media (min-width: 768px) {
	.vhb-slider__item { min-height: var(--vhb-slide-h-tablet, 480px); }
	.vhb-slider__content { padding: 56px 40px; }
}

@media (min-width: 1025px) {
	.vhb-slider__item { min-height: var(--vhb-slide-h, 600px); }
	.vhb-slider__content { padding: 64px 48px; }
	.vhb-slider .vhb-carousel-prev { left: 24px; }
	.vhb-slider .vhb-carousel-next { right: 24px; }
}

@media (prefers-reduced-motion: reduce) {
	.vhb-carousel[data-effect="fade"] .vhb-slide { transition-duration: .001ms; }
}
