/* BP Product Solution widget styles
 *
 * Single rounded section: a full-bleed background image plus a
 * bottom-start product overlay that intentionally bleeds outside
 * the section for depth. Content sits on top, aligned to the end
 * side, with extra inline-start padding so the product never
 * overlaps text. Logical properties keep LTR/RTL aligned.
 */

.bp-product-solution {
	--bp-ps-bg:        #FBF6EC;
	--bp-ps-border:    #E4DCCB;
	--bp-ps-radius:    20px;
	--bp-ps-pad:       40px;
	--bp-ps-pad-left:  clamp(180px, 30vw, 360px);
	--bp-ps-fg:        #374F37;
	--bp-ps-muted:     #1F2A1F;
	--bp-ps-olive:     #B8B25A;
	--bp-ps-cta-bg:    #374F37;
	--bp-ps-cta-fg:    #FFFFFF;
	--bp-ps-shadow:    0 6px 18px rgba(31, 42, 31, 0.06);
	--bp-ps-font:      var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-ps-display:   var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	background-color: var(--bp-ps-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border: 1px solid var(--bp-ps-border);
	border-radius: var(--bp-ps-radius);
	padding: var(--bp-ps-pad);
	padding-inline-start: var(--bp-ps-pad-left);
	box-shadow: var(--bp-ps-shadow);
	color: var(--bp-ps-fg);
	font-family: var(--bp-ps-font);
	position: relative;
	overflow-x: clip;
	overflow-y: visible;
}

/* ---- Bottom-start product overlay (bleeds outside the section) ---- */
.bp-product-solution__product {
	position: absolute;
	inset-inline-start: -40px;
	inset-block-end: -40px;
	inline-size: clamp(200px, 30vw, 380px);
	block-size: auto;
	max-inline-size: 45%;
	z-index: 1;
	pointer-events: none;
	user-select: none;
}

/* ---- Content column ---- */
.bp-product-solution__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-inline-size: 560px;
	margin-inline-start: auto;
}

.bp-product-solution__eyebrow {
	margin: 0 0 12px;
	font-family: var(--bp-ps-font);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-ps-fg);
}

.bp-product-solution__title {
	margin: 0 0 16px;
	font-family: var(--bp-ps-display);
	font-weight: 400;
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.2;
	color: var(--bp-ps-fg);
	text-transform: uppercase;
	letter-spacing: 0.01em;
}

.bp-product-solution__divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block: 4px 18px;
}

.bp-product-solution__divider-line {
	display: inline-block;
	inline-size: 48px;
	block-size: 1px;
	background-color: var(--bp-ps-olive);
}

.bp-product-solution__divider-diamond {
	display: inline-block;
	inline-size: 7px;
	block-size: 7px;
	background-color: var(--bp-ps-olive);
	transform: rotate(45deg);
}

.bp-product-solution__description {
	margin: 0 0 22px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--bp-ps-muted);
}

/* ---- Benefits list ---- */
.bp-product-solution__benefits {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.bp-product-solution__benefit {
	display: flex;
	align-items: center;
	gap: 12px;
}

.bp-product-solution__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-ps-fg);
	flex: 0 0 auto;
	line-height: 1;
}

.bp-product-solution__benefit-icon i,
.bp-product-solution__benefit-icon svg {
	font-size: 18px;
	width: 18px;
	height: 18px;
	fill: currentColor;
}

.bp-product-solution__benefit-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--bp-ps-muted);
}

/* ---- CTA ---- */
.bp-product-solution__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background-color: var(--bp-ps-cta-bg);
	color: var(--bp-ps-cta-fg);
	padding-block: 14px;
	padding-inline: 24px;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	transition: background-color 200ms ease;
}

.bp-product-solution__cta:hover {
	background-color: #2C3F2C;
}

.bp-product-solution__cta-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.bp-product-solution__cta-icon i,
.bp-product-solution__cta-icon svg {
	font-size: 14px;
	width: 14px;
	height: 14px;
	fill: currentColor;
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
	.bp-product-solution {
		--bp-ps-pad:      28px;
		--bp-ps-pad-left: clamp(160px, 28vw, 280px);
	}
	.bp-product-solution__title {
		font-size: clamp(20px, 2.4vw, 26px);
	}
	.bp-product-solution__benefit-text {
		font-size: 13px;
	}
}

/* ---- Mobile ---- */
@media (max-width: 720px) {
	.bp-product-solution {
		--bp-ps-pad:      24px;
		--bp-ps-pad-left: 24px;
	}
	.bp-product-solution__product {
		inset-inline-start: -20px;
		inset-block-end: -20px;
		inline-size: 180px;
		max-inline-size: 55%;
	}
	.bp-product-solution__content {
		align-items: center;
		text-align: center;
		margin-inline-start: 0;
		max-inline-size: 100%;
	}
	.bp-product-solution__eyebrow,
	.bp-product-solution__title,
	.bp-product-solution__description {
		text-align: center;
	}
	.bp-product-solution__benefits {
		align-items: flex-start;
	}
	.bp-product-solution__divider {
		justify-content: center;
	}
}

@media (max-width: 420px) {
	.bp-product-solution {
		--bp-ps-pad:  20px;
	}
	.bp-product-solution__title {
		font-size: 20px;
	}
	.bp-product-solution__cta {
		font-size: 12px;
		padding-block: 12px;
		padding-inline: 18px;
	}
}