/* ===========================================================
 * BP Product Offer — unified "NOTRE SOLUTION" section.
 * Reuses site tokens:
 *   --bp-font-display, --bp-font-body
 *   --bp-green, --bp-olive, --bp-cream
 * Single cream rounded card with thin gold border. Two
 * columns desktop, stacked mobile. 4 facts and 4 conditionnements
 * use the same visual system as the rest of the site.
 *
 * Desktop layout is intentionally compact: the right visual
 * column stretches to match the left content height, and the
 * product image fills that column with object-fit: cover so
 * the two columns end at the same baseline.
 * =========================================================== */

.bp-product-offer {
	--bp-po-fg:        #1F2A1F;
	--bp-po-green:     #2A3F2A;
	--bp-po-olive:     #B8B25A;
	--bp-po-cream:     #FAF6EC;
	--bp-po-cream-2:   #F4ECDD;
	--bp-po-inner-max: 1320px;

	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	color: var(--bp-po-fg);
	padding-inline: clamp( 20px, 4vw, 56px );
	padding-block: clamp( 40px, 6vw, 80px );
	background-color: transparent;
}

.bp-product-offer__card {
	max-inline-size: var(--bp-po-inner-max);
	margin-inline: auto;
	background: var(--bp-po-cream);
	border: 1.5px solid var(--bp-po-olive);
	border-radius: 24px;
	/* Desktop: 56px vertical, 56px horizontal. */
	padding: clamp( 40px, 4.2vw, 56px );
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.2fr);
	gap: clamp( 28px, 3.5vw, 56px );
	/* CRITICAL: stretch so right column matches left height. */
	align-items: stretch;
	box-shadow: 0 14px 32px rgba( 31, 42, 31, 0.06 );
}

/* ---------------- LEFT COLUMN ---------------- */
.bp-product-offer__left {
	display: flex;
	flex-direction: column;
	/* Deliberate, tight rhythm. We do NOT use a large
	   `gap` here because each child owns its own margin
	   tied to its visual role. */
	gap: 0;
	min-inline-size: 0;
}

/* Eyebrow (subtle, site-wide pattern) */
.bp-product-offer__eyebrow {
	display: inline-block;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-po-green);
	margin: 0 0 18px;
	opacity: 0.85;
}

/* Title (serif display) */
.bp-product-offer__title {
	margin: 0 0 22px;
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	font-weight: 400;
	color: #2A3F2A;
	text-transform: none;
	line-height: 1.02;
	letter-spacing: 0;
	font-size: clamp( 36px, 4vw, 60px );
	max-inline-size: 18ch;
}
.bp-product-offer__title-line { display: block; }

/* Gold accent divider (line + diamond + line) */
.bp-product-offer__divider {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 26px;
	justify-content: flex-start;
}
.bp-product-offer__divider-line {
	display: block;
	inline-size: 40px;
	block-size: 1px;
	background: var(--bp-po-olive);
	flex: 0 0 auto;
}
.bp-product-offer__divider-diamond {
	display: block;
	inline-size: 6px;
	block-size: 6px;
	background: var(--bp-po-olive);
	transform: rotate(45deg);
	flex: 0 0 auto;
}

/* Product identity (brand + reference) — treated as one compact group */
.bp-product-offer__identity {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 0 24px;
}
.bp-product-offer__brand {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--bp-po-green);
	margin: 0 0 4px;
}
.bp-product-offer__reference {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 500;
	color: var(--bp-po-fg);
	opacity: 0.85;
}
.bp-product-offer__reference em {
	font-style: normal;
	color: var(--bp-po-olive);
	font-weight: 700;
	letter-spacing: 0.06em;
}

/* Description */
.bp-product-offer__description {
	margin: 0 0 30px;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.65;
	color: var(--bp-po-fg);
	max-inline-size: 620px;
	opacity: 0.82;
}

/* Facts (icon + number + label + value) */
.bp-product-offer__facts {
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 4, minmax(0, 1fr) );
	gap: 0;
	border-block: 1px solid rgba( 184, 178, 90, 0.30 );
}
.bp-product-offer__fact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 18px;
	border-inline-end: 1px solid rgba( 184, 178, 90, 0.30 );
	min-inline-size: 0;
}
.bp-product-offer__fact:last-child { border-inline-end: 0; }
.bp-product-offer__fact-icon {
	display: inline-flex;
	inline-size: 28px;
	block-size: 28px;
	align-items: center;
	justify-content: center;
	color: var(--bp-po-green);
	line-height: 1;
	margin: 0 0 6px;
}
.bp-product-offer__fact-icon i,
.bp-product-offer__fact-icon svg {
	font-size: 22px;
	inline-size: 22px;
	block-size: 22px;
	stroke-width: 1.4;
	fill: currentColor;
}
.bp-product-offer__fact-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}
.bp-product-offer__fact-number {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--bp-po-olive);
}
.bp-product-offer__fact-label {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 13px;
	font-weight: 700;
	color: var(--bp-po-green);
}
.bp-product-offer__fact-value {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 12px;
	font-weight: 500;
	color: var(--bp-po-fg);
	opacity: 0.78;
	line-height: 1.4;
}

/* Conditionnements */
.bp-product-offer__packagings {
	margin: 0 0 30px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.bp-product-offer__packagings-label {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-po-green);
}
.bp-product-offer__packagings-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 4, minmax(0, 1fr) );
	gap: 10px;
}
.bp-product-offer__packaging {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 14px 8px;
	background: var(--bp-po-cream-2);
	border: 1px solid var(--bp-po-olive);
	border-radius: 14px;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 700;
	color: var(--bp-po-green);
	min-block-size: 56px;
	min-inline-size: 0;
}

/* CTAs (homepage system) */
.bp-product-offer__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: 0;
}
.bp-product-offer__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 50px;
	padding: 14px 24px;
	border-radius: 10px;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-decoration: none;
	border: 1.5px solid transparent;
	transition: transform 200ms ease, background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
	white-space: nowrap;
	line-height: 1.1;
}
.bp-product-offer__cta-icon {
	display: inline-flex;
	inline-size: 18px;
	block-size: 18px;
	align-items: center;
	justify-content: center;
}
.bp-product-offer__cta-icon i,
.bp-product-offer__cta-icon svg {
	font-size: 16px;
	inline-size: 16px;
	block-size: 16px;
	fill: currentColor;
}
.bp-product-offer__cta--primary {
	background: var(--bp-po-green);
	color: #FBF6EC;
	border-color: var(--bp-po-green);
}
.bp-product-offer__cta--primary:hover,
.bp-product-offer__cta--primary:focus-visible {
	transform: translateY(-2px);
	background: #1F2F1F;
	box-shadow: 0 10px 24px rgba( 31, 42, 31, 0.30 );
}
.bp-product-offer__cta--secondary {
	background: #FFFFFF;
	color: var(--bp-po-green);
	border-color: #FFFFFF;
	border-width: 0;
}
.bp-product-offer__cta--secondary:hover,
.bp-product-offer__cta--secondary:focus-visible {
	transform: translateY(-2px);
	background: #FFFFFF;
	box-shadow: 0 6px 16px rgba( 31, 42, 31, 0.12 );
}
.bp-product-offer__cta:focus-visible {
	outline: 2px solid var(--bp-po-olive);
	outline-offset: 3px;
}

/* ---------------- RIGHT COLUMN ----------------
 * The right column must STRETCH to the same height as the
 * left column. The visual element fills that height with
 * object-fit: cover so the product image dominates the
 * column without distorting the bitmap. */
.bp-product-offer__right {
	min-inline-size: 0;
	display: flex;
	align-items: stretch;
	justify-content: stretch;
	/* Ensure children can actually grow. */
	min-block-size: 0;
}
.bp-product-offer__visual {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	gap: 12px;
	inline-size: 100%;
	min-block-size: 0;
}
.bp-product-offer__visual-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	flex: 1 1 auto;
	min-block-size: 0;
	object-fit: cover;
	object-position: center center;
	filter: drop-shadow( 0 18px 28px rgba( 31, 42, 31, 0.18 ) );
	border-radius: 30px !important;
}
.bp-product-offer__visual--empty {
	flex: 1 1 auto;
	min-block-size: 0;
	border-radius: 18px;
	background: linear-gradient( 180deg, var(--bp-po-cream-2) 0%, var(--bp-po-cream) 100% );
	border: 1px dashed rgba( 184, 178, 90, 0.45 );
}
.bp-product-offer__visual-caption {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-po-green);
	opacity: 0.7;
	margin: 0;
	flex: 0 0 auto;
	text-align: center;
}

/* ---------------- RESPONSIVE ---------------- */
@media ( max-width: 1024px ) {
	.bp-product-offer__card {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
		gap: 28px;
		padding: 36px 32px;
	}
	.bp-product-offer__title { font-size: clamp( 32px, 3.4vw, 48px ); }
	.bp-product-offer__facts { grid-template-columns: repeat( 2, minmax(0, 1fr) ); }
	.bp-product-offer__fact:nth-child(2) { border-inline-end: 0; }
	.bp-product-offer__fact:nth-child(1),
	.bp-product-offer__fact:nth-child(2) { border-block-end: 1px solid rgba( 184, 178, 90, 0.30 ); }
	.bp-product-offer__packagings-list { grid-template-columns: repeat( 2, minmax(0, 1fr) ); }
	/* Visual still fills the right column on tablet, but with a
	   sensible cap so a tall image does not dominate. */
	.bp-product-offer__visual-img { max-block-size: 520px; }
}

@media ( max-width: 768px ) {
	.bp-product-offer { padding-inline: 16px; }
	.bp-product-offer__card {
		grid-template-columns: minmax(0, 1fr);
		padding: 24px;
		gap: 24px;
	}
	.bp-product-offer__title { font-size: clamp( 28px, 7vw, 36px ); }
	.bp-product-offer__facts { grid-template-columns: repeat( 2, minmax(0, 1fr) ); }
	.bp-product-offer__packagings-list { grid-template-columns: repeat( 2, minmax(0, 1fr) ); }
	.bp-product-offer__ctas { flex-direction: column; align-items: stretch; }
	.bp-product-offer__ctas .bp-product-offer__cta { inline-size: 100%; max-inline-size: 360px; }
	.bp-product-offer__right { order: -1; }
	/* Mobile: revert the image to natural aspect ratio so it
	   does not stretch aggressively. */
	.bp-product-offer__visual-img {
		block-size: auto;
		aspect-ratio: 4 / 5;
		flex: 0 0 auto;
	}
}

@media ( max-width: 480px ) {
	.bp-product-offer__card { padding: 20px; }
	.bp-product-offer__title { font-size: 28px; }
	.bp-product-offer__fact { padding: 14px 12px 16px; }
}

@media ( max-width: 360px ) {
	.bp-product-offer__title { font-size: 24px; }
}

/* ---------------- Arabic font swap ---------------- */
[lang="ar"] .bp-product-offer__title,
[dir="rtl"] .bp-product-offer__title {
	font-family: var(--bp-font-arabic);
	font-weight: 700;
	line-height: 1.18;
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	.bp-product-offer__cta { transition: none; }
}