/**
 * Hero Banner Slider
 *
 * Generic Swiper-based hero banner component.
 *
 * Expected HTML structure:
 *
 * .hero-banner-slider
 * ├── .swiper-wrapper
 * │   └── .hero-banner-slider__slide
 * │       ├── .hero-banner-slider__media
 * │       └── .hero-banner-slider__content
 * ├── .swiper-pagination
 * ├── .swiper-button-prev
 * └── .swiper-button-next
 */


/* ==========================================================================
   Slider container
   ========================================================================== */

/**
 * Main Swiper container.
 *
 * The shared custom property controls the banner height across the slider,
 * slides and content layer. Update it within the responsive breakpoints
 * rather than maintaining separate height values on each element.
 *
 * The background colour acts as a fallback while images or videos load.
 */
.hero-banner-slider {
	--hero-banner-height: clamp(420px, 70vw, 650px);

	position: relative;
	width: 100%;
	min-height: var(--hero-banner-height);
	overflow: hidden;
	background-color: #111;
}


/* ==========================================================================
   Swiper wrapper
   ========================================================================== */

/**
 * The wrapper inherits the shared minimum height.
 *
 * This helps prevent layout movement while Swiper is initialising.
 */
.hero-banner-slider .swiper-wrapper {
	min-height: var(--hero-banner-height);
}


/* ==========================================================================
   Individual slides
   ========================================================================== */

/**
 * Each slide needs a defined minimum height because the media layer is
 * positioned absolutely and therefore does not contribute to document flow.
 */
.hero-banner-slider__slide {
	position: relative;
	min-height: var(--hero-banner-height);
	overflow: hidden;
}


/* ==========================================================================
   Image and video media
   ========================================================================== */

/**
 * Media fills the entire slide and sits beneath the content overlay.
 */
.hero-banner-slider__media {
	position: absolute;
	z-index: 1;
	inset: 0;
}

/**
 * The clickable image wrapper and picture element fill the slide.
 */
.hero-banner-slider__media-link,
.hero-banner-slider__picture {
	display: block;
	width: 100%;
	height: 100%;
}

/**
 * Images and videos fill the available slide area.
 *
 * object-fit: cover fills the banner without distortion, although some
 * cropping may occur depending on the uploaded image aspect ratio.
 */
.hero-banner-slider__image,
.hero-banner-slider__video {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
	object-position: center;
}


/* ==========================================================================
   Content positioning
   ========================================================================== */

/**
 * Content sits above the slide media.
 *
 * The shared minimum height allows flex alignment to place the panel
 * reliably at the bottom-left of the banner.
 *
 * Percentage padding controls the distance from the outer slider edges.
 */
.hero-banner-slider__content {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	min-height: var(--hero-banner-height);
	padding: 5%;
	pointer-events: none;
}


/* ==========================================================================
   Content panel
   ========================================================================== */

/**
 * Semi-transparent content panel positioned at the bottom-left.
 *
 * width: fit-content keeps the panel close to the width of its contents.
 * max-width prevents longer text from spanning too far across the banner.
 */
.hero-banner-slider__content-inner {
	width: fit-content;
	max-width: 650px;
	padding: 1.25rem 1.5rem;
	color: #fff;
    background: #000;
    background: rgba(0, 0, 0, 0.45);
	pointer-events: auto;
background-color: 
color-mix(in srgb, rgb(0, 0, 0) 40%, transparent);
    backdrop-filter: blur(1rem);	
}


/* ==========================================================================
   Heading and description
   ========================================================================== */

.hero-banner-slider__title {
    margin: 0 0 0.75rem;
    color: inherit;
    line-height: 1.1;
    font-family: "BMW Global Pro", Sans-serif;
    font-weight: 300;
    font-size: clamp(1.75rem, 3vw, 2rem);
}

.hero-banner-slider__description {
	max-width: 580px;
	margin: 0 0 1rem;
	color: inherit;
	font-size: clamp(0.8rem, 1.5vw, 1.05rem);
	line-height: 1.5;
}


/* ==========================================================================
   Call-to-action buttons
   ========================================================================== */

/**
 * Buttons display in a row by default and wrap when space is limited.
 */
.hero-banner-slider__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}
.hero-banner-slider__buttons .button {
	font-size: 1rem;
}

/**
 * Remove any default Foundation button margin so the flex gap controls
 * spacing consistently.
 */
.hero-banner-slider__button {
	margin: 0;
}


/* ==========================================================================
   Swiper navigation arrows
   ========================================================================== */

/**
 * Keep navigation arrows above the media and content layers.
 *
 * The semi-transparent circular background helps the controls remain
 * visible over both light and dark imagery.
 */
.hero-banner-slider .swiper-button-prev,
.hero-banner-slider .swiper-button-next {
	z-index: 4;
	width: 44px;
	height: 44px;
	color: #fff;
	border-radius: 50%;
	background-color: rgba(0, 0, 0, 0.45);
    padding: 0.75rem 1rem;	
}

/**
 * Reduce the default Swiper arrow icon size.
 */
.hero-banner-slider .swiper-button-prev::after,
.hero-banner-slider .swiper-button-next::after {
	font-size: 1.25rem;
}


/* ==========================================================================
   Swiper pagination
   ========================================================================== */

.hero-banner-slider .swiper-pagination {
	z-index: 4;
}

/**
 * Inactive pagination bullets.
 */
.hero-banner-slider .swiper-pagination-bullet {
	background-color: #fff;
	opacity: 0.5;
}

/**
 * Active pagination bullet.
 */
.hero-banner-slider .swiper-pagination-bullet-active {
	opacity: 1;
}


/* ==========================================================================
   Single-slide state
   ========================================================================== */

/**
 * JavaScript adds .has-single-slide when only one slide exists.
 * Navigation controls are unnecessary in that situation.
 */
.hero-banner-slider.has-single-slide .swiper-button-prev,
.hero-banner-slider.has-single-slide .swiper-button-next,
.hero-banner-slider.has-single-slide .swiper-pagination {
	display: none;
}


/* ==========================================================================
   Tablet adjustments
   ========================================================================== */

@media screen and (max-width: 1024px) {

	/**
	 * Update the shared banner height for tablet screens.
	 *
	 * The slide, wrapper and content layers inherit this new value
	 * automatically through the custom property.
	 */
	.hero-banner-slider {
		--hero-banner-height: clamp(420px, 55vw, 550px);
	}

	/**
	 * Keep spacing around the content panel consistent.
	 */
	.hero-banner-slider__content {
		padding: 5%;
	}

	/**
	 * Slightly reduce the maximum width and internal spacing of the panel.
	 */
	.hero-banner-slider__content-inner {
		max-width: 560px;
		padding: 1rem 1.25rem;
	}
}


/* ==========================================================================
   Mobile adjustments
   ========================================================================== */

@media screen and (max-width: 640px) {

	/**
	 * Switch to a taller mobile banner format suitable for portrait artwork.
	 *
	 * The maximum height prevents the banner becoming excessively tall on
	 * wider mobile devices.
	 */
	.hero-banner-slider {
		--hero-banner-height: clamp(380px, 110vw, 500px);
	}

	/**
	 * Keep the content at the bottom-left with consistent outer spacing.
	 */
	.hero-banner-slider__content {
		padding: 5%;
	}

	/**
	 * Allow the content panel to use the available mobile width.
	 */
	.hero-banner-slider__content-inner {
		width: 100%;
		max-width: none;
		padding: 1rem;
	}

	.hero-banner-slider__title {
		font-size: clamp(1.5rem, 8vw, 1.75rem);
	}

	.hero-banner-slider__description {
		font-size: 0.8rem;
	}

	/**
	 * Stack the CTA buttons vertically on smaller screens.
	 */
	.hero-banner-slider__buttons {
		flex-direction: column;
		align-items: flex-start;
	}

	.hero-banner-slider__button {
		width: 100%;
		max-width: 280px;
		text-align: center;
	}

	/**
	 * Hide navigation arrows on mobile.
	 *
	 * Users can still move between slides using touch gestures and
	 * the pagination controls.
	 */
	.hero-banner-slider .swiper-button-prev,
	.hero-banner-slider .swiper-button-next {
		display: none;
	}
}


/* ==========================================================================
   Reduced motion accessibility
   ========================================================================== */

/**
 * Respect users who have enabled reduced motion in their operating system.
 */
@media (prefers-reduced-motion: reduce) {

	.hero-banner-slider *,
	.hero-banner-slider *::before,
	.hero-banner-slider *::after {
		scroll-behavior: auto !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}