/* H-Lead Banners — b2b, transfer/rental
 * Verified against Figma banner-b2b-desktop_new / banner-transfer-rental-desktop_new. */

/* Banner B2B: dark #001c26, big image left (radius 16), right column with a
 * small image (radius 12) above eyebrow/title/description/yellow CTA. */
.hl-banner-b2b {
	position: relative;
	background-color: var(--hl-color-brand-700);
	overflow: hidden;
	font-family: var(--hl-font-family);
}

.hl-banner-b2b__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: var(--hl-space-48);
	max-width: 1340px;
	margin: 0 auto;
	padding: clamp(24px, 5vw, 95px) 24px;

}

.hl-banner-b2b__decor {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translate(50%, -50%);
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.hl-banner-b2b__media-left {
	position: relative;
	z-index: 1;
	flex: 0 1 644px;
	aspect-ratio: 644 / 676;
	border-radius: var(--hl-radius-16);
	overflow: hidden;
	background-color: var(--hl-color-placeholder-bg);
}

.hl-banner-b2b__media-left img,
.hl-banner-b2b__media-right img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.hl-banner-b2b__right {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--hl-space-48);

}

.hl-banner-b2b__media-right {
	width: min(392px, 100%);
	aspect-ratio: 392 / 264;
	border-radius: var(--hl-radius-12);
	overflow: hidden;
	background-color: var(--hl-color-placeholder-bg);
	margin-left: auto;
}

.hl-banner-b2b__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hl-space-12);
}

.hl-banner-b2b__eyebrow {
	margin: 0;
	color: var(--hl-color-yellow-500);
	font-size: var(--hl-body-default-size);
	line-height: var(--hl-body-default-line-height);
	font-weight: var(--hl-font-weight-bold);
	text-transform: uppercase;
}

.hl-banner-b2b__title {
	margin: 0;
	color: var(--hl-color-white);
	font-weight: var(--hl-font-weight-bold);
}

@media screen and (min-width: 1024px) {
	.hl-banner-b2b__title {
		font-size: var(--hl-text-h2-size);
		line-height: var(--hl-text-h2-line-height);
	}

	.hl-banner-b2b__right {
		flex: 0 1 588px;
	}
}

@media screen and (max-width:1024px) {
	.hl-banner-b2b__inner {
		padding: 50px 20px 70px 20px !important;
	}
}

.hl-banner-b2b__description {
	margin: 0;
	color: var(--hl-color-grey-100);
	font-size: var(--hl-body-leading-size);
	line-height: var(--hl-body-leading-line-height);
}

/* Secondary (yellow) button */
.hl-banner-b2b__cta {
	margin-top: var(--hl-space-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--hl-space-12) var(--hl-space-32);
	border-radius: var(--hl-radius-8);
	background-color: var(--hl-btn-secondary-surface);
	color: var(--hl-btn-secondary-content);
	font-size: var(--hl-body-default-size);
	line-height: var(--hl-body-default-line-height);
	font-weight: var(--hl-font-weight-semibold);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.hl-banner-b2b__cta:hover {
	background-color: var(--hl-btn-secondary-surface-hover);
	color: var(--hl-btn-secondary-content);
}

@media (min-width:1024px) {
	.hl-banner-b2b__cta {
		margin-bottom: var(--hl-space-32);
	}
}

@media (max-width: 1024px) {
	.hl-banner-b2b__inner {
		flex-direction: column;
	}

	.hl-banner-b2b__media-left {
		flex-basis: auto;
		width: 100%;
		aspect-ratio: 4 / 3;
	}
}

@media (max-width: 767px) {
	.hl-banner-b2b__media-right {
		display: none;
	}

	.hl-banner-b2b__media-left {
		aspect-ratio: 3 / 4;
	}
}

/* Banner Transfer/Rental: off-white #f6f5f1, radius 16, blurred colored
 * ellipses; text left (title, subtext, primary CTA), image right 644x676. */
.hl-banner-transfer-rental {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hl-space-48);
	background-color: var(--hl-color-off-white);
	border-radius: var(--hl-radius-16);
	overflow: hidden;
	font-family: var(--hl-font-family);
	padding: clamp(24px, 5vw, 55px) clamp(24px, 9vw, 55px);
}

.hl-banner-transfer-rental__bg-elements {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
	pointer-events: none;
}

.hl-banner-transfer-rental__ellipse {
	position: absolute;
	border-radius: 50%;
	filter: blur(100px);
}

/* Figma: #66828c ellipse, opacity .28, top-right */
.hl-banner-transfer-rental__ellipse--grey {
	width: 400px;
	height: 803px;
	background-color: var(--hl-color-brand-300);
	opacity: 0.2;
	right: -170px;
	top: -93px;

}

/* Figma: #f7ec13 ellipse, opacity .09, bottom-left */
.hl-banner-transfer-rental__ellipse--yellow {
	width: 577px;
	height: 577px;
	background-color: var(--hl-color-yellow-500);
	opacity: 0.09;
	left: -232px;
	bottom: -290px;

}

.hl-banner-transfer-rental__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--hl-space-12);
	flex: 0 1 588px;
}

.hl-banner-transfer-rental__title {
	margin: 0;
	color: var(--hl-color-brand-700);
	font-size: var(--hl-text-h2-size);
	line-height: var(--hl-text-h2-line-height);
	font-weight: var(--hl-font-weight-bold);
}

.hl-banner-transfer-rental__subtext {
	margin: 0;
	color: var(--hl-color-text-subtext);
	font-size: var(--hl-body-leading-size);
	line-height: var(--hl-body-leading-line-height);
}

/* Primary button */
.hl-banner-transfer-rental__cta {
	margin-top: var(--hl-space-20);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--hl-space-12) var(--hl-space-32);
	border-radius: var(--hl-radius-8);
	background-color: var(--hl-btn-primary-surface);
	color: var(--hl-btn-primary-content);
	font-size: var(--hl-body-default-size);
	line-height: var(--hl-body-default-line-height);
	font-weight: var(--hl-font-weight-semibold);
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.hl-banner-transfer-rental__cta:hover {
	background-color: var(--hl-btn-primary-surface-hover);
	color: var(--hl-btn-primary-content);
}

.hl-banner-transfer-rental__img {
	position: relative;
	z-index: 1;
	flex: 0 1 644px;
	aspect-ratio: 644 / 676;
	border-radius: var(--hl-radius-16);
	overflow: hidden;
	background-color: var(--hl-color-placeholder-bg);
}

.hl-banner-transfer-rental__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

@media (max-width: 1024px) {
	.hl-banner-transfer-rental {
		flex-direction: column-reverse;
		align-items: flex-start;
	}

	/* Figma banner-transfer-rental-mobile: title 20/30, body 16/24 */
	.hl-banner-transfer-rental__title {
		font-size: 20px;
		line-height: 30px;
	}

	.hl-banner-transfer-rental__subtext {
		font-size: 16px;
		line-height: 24px;
	}

	/* Figma banner-b2b-mobile: title 24/32 */
	.hl-banner-b2b__title {
		font-size: 24px;
		line-height: 32px;
	}

	.hl-banner-transfer-rental__content {
		flex: 0 1 auto;
		width: 100%;
	}

	.hl-banner-transfer-rental__img {
		flex-basis: auto;
		width: 100%;
	}
}