/* BP Résultats Hero V2 widget styles
 *
 * Wide immersive hero for the Résultats & Études de cas page.
 * One single full-bleed background image is anchored to the
 * right of the viewport. A layered cream gradient overlay
 * keeps the LEFT text block readable without ever covering
 * the image with a hard dark rectangle. The 3 quick points
 * share ONE translucent cream panel (no floating cards).
 *
 * No JS. All responsive rules are pure CSS.
 *
 * Visual stack (bottom to top):
 *   0. Fallback dark-green / cream gradient (when no image)
 *   1. Background image (full viewport width, right-anchored)
 *   2. Cream overlay (left = solid cream, right = transparent)
 *   3. Content (eyebrow / H1 / intro / quick-points rail)
 *
 * Color tokens (premium Barbary palette, shared with the
 * existing V2 heroes):
 *   --bp-rhv2-green:    #2F4A2F  (dark green, headings)
 *   --bp-rhv2-green-2:  #374F37
 *   --bp-rhv2-cream:    #F4EFE3  (warm cream, panel + overlay)
 *   --bp-rhv2-cream-2:  #EFE8D9
 *   --bp-rhv2-gold:     #B8B25A  (muted gold, accent)
 *   --bp-rhv2-ink:      #1F2A1F  (body text)
 *   --bp-rhv2-ink-soft: #586558  (support copy, muted gray-green)
 */

.bp-results-hero-v2 {
	--bp-rhv2-green:    #2F4A2F;
	--bp-rhv2-green-2:  #374F37;
	--bp-rhv2-cream:    #F4EFE3;
	--bp-rhv2-cream-2:  #EFE8D9;
	--bp-rhv2-gold:     #B8B25A;
	--bp-rhv2-ink:      #1F2A1F;
	--bp-rhv2-ink-soft: #586558;
	--bp-rhv2-divider:  rgba(88, 101, 88, 0.18);

	--bp-rhv2-inner-max: 1320px;
	--bp-rhv2-pad-x:     clamp(24px, 5vw, 64px);
	--bp-rhv2-pad-y:     clamp(56px, 7vw, 96px);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: none;
	min-block-size: 720px;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	color: var(--bp-rhv2-ink);
	background: var(--bp-rhv2-cream);
}

/* ---------------- Full-bleed breakout ----------------
 * Force the surrounding Elementor wrappers to 100% width and
 * break out of any boxed container via `100vw + calc(50%-50vw)`
 * so the hero truly spans the full viewport. Same pattern as
 * the existing V2 hero widgets. */
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget,
.elementor .elementor-section > .elementor-column > .elementor-widget-wrap > .elementor-widget > .bp-results-hero-v2,
.elementor-section .elementor-container {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-element.bp-results-hero-v2,
.elementor .bp-results-hero-v2,
.e-con.bp-results-hero-v2,
.bp-results-hero-v2 {
	padding: 0;
	margin: 0;
	inline-size: 100%;
	max-inline-size: 100%;
}

.elementor-inner section.elementor-section,
.elementor-inner section.elementor-section > .elementor-container,
.elementor-inner section.elementor-section > .elementor-row,
.elementor-inner section.elementor-section > .elementor-row > .elementor-column,
.elementor-inner section.elementor-section > .elementor-row > .elementor-column > .elementor-widget-wrap {
	width: 100% !important;
	max-width: 100% !important;
	padding-inline: 0 !important;
}

.elementor .elementor-widget.elementor-widget-bp-results-hero-v2,
.elementor-widget.elementor-widget-bp-results-hero-v2 {
	inline-size: 100vw !important;
	max-inline-size: 100vw !important;
	margin-inline-start: calc(50% - 50vw) !important;
	margin-inline-end:   calc(50% - 50vw) !important;
	position: relative;
	z-index: 1;
}

.e-con:has(> .elementor-widget-bp-results-hero-v2),
.e-con:has(> .e-con-inner > .elementor-widget-bp-results-hero-v2),
.e-con-inner:has(> .elementor-widget-bp-results-hero-v2) {
	--container-default-padding-top:    0px !important;
	--container-default-padding-bottom: 0px !important;
	padding-top:    0 !important;
	padding-bottom: 0 !important;
}
.elementor-widget.elementor-widget-bp-results-hero-v2 {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* ---------------- Fallback (no image) ----------------
 * When no background image is set, the hero shows an elegant
 * dark-green / cream diagonal gradient that does not feel
 * like a missing image. */
.bp-results-hero-v2__fallback {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(120% 90% at 100% 50%, rgba(184, 178, 90, 0.18) 0%, rgba(184, 178, 90, 0) 55%),
		linear-gradient(115deg, #F4EFE3 0%, #EAE0C8 55%, #2F4A2F 100%);
	pointer-events: none;
}

/* ---------------- Background image ---------------- */
.bp-results-hero-v2__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
	pointer-events: none;
}

/* ---------------- Cream overlay (left = solid, right = transparent) ----------------
 * Same hard-stop multi-stop gradient used in the existing V2
 * heroes so the transition between cream and image is gradual,
 * not a hard rectangular edge. */
.bp-results-hero-v2__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to right,
			rgba(244, 239, 227, 0.96) 0%,
			rgba(244, 239, 227, 0.88) 22%,
			rgba(244, 239, 227, 0.72) 38%,
			rgba(244, 239, 227, 0.50) 52%,
			rgba(244, 239, 227, 0.22) 70%,
			rgba(244, 239, 227, 0.00) 88%,
			rgba(244, 239, 227, 0.00) 100%
		);
}

/* Subtle lower-left support so the intro + quick-points panel
 * stay readable on darker photos. */
.bp-results-hero-v2.has-image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(
			to top,
			rgba(31, 42, 31, 0.28) 0%,
			rgba(31, 42, 31, 0.12) 30%,
			rgba(31, 42, 31, 0.00) 60%
		);
}

/* ---------------- Inner layout ----------------
 * Centered 1320px container matching the rest of the site.
 * Vertically centered. Content sits in the left cream zone. */
.bp-results-hero-v2__inner {
	position: relative;
	z-index: 3;
	inline-size: 100%;
	max-inline-size: var(--bp-rhv2-inner-max);
	margin-inline: auto;
	padding-block:   var(--bp-rhv2-pad-y);
	padding-inline: var(--bp-rhv2-pad-x);
	display: flex;
	align-items: center;
	min-block-size: inherit;
}

.bp-results-hero-v2__content {
	display: flex;
	flex-direction: column;
	gap: 26px;
	inline-size: 100%;
	max-inline-size: 720px;
	justify-self: start;
}

/* ---------------- Eyebrow ----------------
 * Short gold accent line + uppercase label. Single decoration
 * device only — no floating leaves, no circles, no blobs. */
.bp-results-hero-v2__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-rhv2-green);
	line-height: 1;
}
.bp-results-hero-v2__eyebrow-line {
	display: inline-block;
	inline-size: 40px;
	block-size: 2px;
	background: var(--bp-rhv2-gold);
	border-radius: 1px;
}

/* ---------------- Title ----------------
 * Dark green serif display. Dominant visual. */
.bp-results-hero-v2__title {
	margin: 0;
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	font-weight: 400;
	font-size: 70px;
	line-height: 1.0;
	letter-spacing: -0.01em;
	color: #374F3C;
	max-inline-size: 18ch;
}

/* ---------------- Intro ---------------- */
.bp-results-hero-v2__intro {
	margin: 0;
	font-size: 18px;
	line-height: 1.65;
	color: var(--bp-rhv2-ink);
	max-inline-size: 620px;
}

/* ---------------- Quick-points rail ----------------
 * ONE shared translucent cream panel, 3 columns separated by
 * subtle vertical dividers. No floating cards. No heavy icons.
 * Only a small muted-gold number (01 / 02 / 03). */
.bp-results-hero-v2__rail {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin-block-start: 6px;
	padding: 24px 26px;
	background: rgba(247, 244, 236, 0.94);
	border: 1px solid rgba(184, 178, 90, 0.45);
	border-radius: 22px;
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

.bp-results-hero-v2__item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-inline: 22px;
	border-inline-start: 1px solid var(--bp-rhv2-divider);
}
.bp-results-hero-v2__item:first-child {
	border-inline-start: none;
	padding-inline-start: 0;
}
.bp-results-hero-v2__item:last-child {
	padding-inline-end: 0;
}

.bp-results-hero-v2__item-num {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--bp-rhv2-gold);
	line-height: 1;
}

.bp-results-hero-v2__item-label {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bp-rhv2-green);
	line-height: 1.2;
}

.bp-results-hero-v2__item-text {
	font-size: 14px;
	line-height: 1.5;
	color: var(--bp-rhv2-ink-soft);
}

/* ---------------- Responsive: Tablet (769-1024) ---------------- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-results-hero-v2 { min-block-size: 640px; }
	.bp-results-hero-v2__title { font-size: 56px; max-inline-size: 20ch; }
	.bp-results-hero-v2__intro { font-size: 17px; max-inline-size: 100%; }
	.bp-results-hero-v2__content { max-inline-size: 70%; gap: 22px; }
	.bp-results-hero-v2__rail { padding: 20px 22px; }
	.bp-results-hero-v2__item { padding-inline: 16px; }
	.bp-results-hero-v2__item-text { font-size: 13.5px; }
	.bp-results-hero-v2__bg { background-position: 70% center; }
}

/* ---------------- Mobile (<= 768) ---------------- */
@media ( max-width: 768px ) {
	.bp-results-hero-v2 {
		min-block-size: auto;
	}

	.bp-results-hero-v2__inner {
		padding-block: 110px 48px;
		padding-inline: 24px;
		align-items: stretch;
	}

	.bp-results-hero-v2__content {
		max-inline-size: 100%;
		gap: 22px;
	}

	.bp-results-hero-v2__title {
		font-size: 44px;
		line-height: 1.02;
		max-inline-size: 100%;
	}

	.bp-results-hero-v2__intro {
		font-size: 16px;
		line-height: 1.6;
		max-inline-size: 100%;
	}

	/* On mobile the overlay strengthens across the whole image
	 * so the text remains readable above any photo. */
	.bp-results-hero-v2__overlay {
		background:
			linear-gradient(
				to bottom,
				rgba(244, 239, 227, 0.92) 0%,
				rgba(244, 239, 227, 0.82) 55%,
				rgba(244, 239, 227, 0.65) 100%
			);
	}
	.bp-results-hero-v2.has-image::after {
		background:
			linear-gradient(
				to bottom,
				rgba(31, 42, 31, 0.20) 0%,
				rgba(31, 42, 31, 0.05) 60%,
				rgba(31, 42, 31, 0.00) 100%
			);
	}

	.bp-results-hero-v2__bg { background-position: 65% 35%; }

	/* Quick-points stack vertically inside ONE shared panel.
	 * Subtle horizontal separators, no floating cards. */
	.bp-results-hero-v2__rail {
		grid-template-columns: minmax(0, 1fr);
		padding: 20px 22px;
		gap: 0;
	}
	.bp-results-hero-v2__item {
		padding-block: 14px;
		padding-inline: 0;
		border-inline-start: none;
		border-block-start: 1px solid var(--bp-rhv2-divider);
		gap: 4px;
	}
	.bp-results-hero-v2__item:first-child {
		padding-block-start: 0;
		border-block-start: none;
	}
	.bp-results-hero-v2__item:last-child {
		padding-block-end: 0;
	}
	.bp-results-hero-v2__item-text { font-size: 14px; }
}

/* ---------------- ≤ 480px ---------------- */
@media ( max-width: 480px ) {
	.bp-results-hero-v2__inner {
		padding-block: 96px 40px;
		padding-inline: 20px;
	}
	.bp-results-hero-v2__title { font-size: 40px; }
	.bp-results-hero-v2__eyebrow { font-size: 12px; }
	.bp-results-hero-v2__intro { font-size: 15px; }
	.bp-results-hero-v2__rail { padding: 18px 20px; }
}

/* ---------------- ≤ 390px ---------------- */
@media ( max-width: 390px ) {
	.bp-results-hero-v2__inner { padding-inline: 18px; padding-block: 88px 36px; }
	.bp-results-hero-v2__title { font-size: 36px; line-height: 1.04; }
	.bp-results-hero-v2__eyebrow { font-size: 11px; letter-spacing: 0.12em; }
	.bp-results-hero-v2__item-label { font-size: 11px; }
	.bp-results-hero-v2__item-text { font-size: 13px; line-height: 1.45; }
}

/* ---------------- ≤ 360px ---------------- */
@media ( max-width: 360px ) {
	.bp-results-hero-v2__inner { padding-inline: 16px; padding-block: 80px 32px; }
	.bp-results-hero-v2__title { font-size: 32px; line-height: 1.04; }
	.bp-results-hero-v2__eyebrow { font-size: 10px; letter-spacing: 0.10em; }
	.bp-results-hero-v2__intro { font-size: 14px; }
	.bp-results-hero-v2__rail { padding: 16px 18px; }
	.bp-results-hero-v2__item-num { font-size: 12px; }
}

/* ---------------- Arabic / RTL ---------------- */
[lang="ar"] .bp-results-hero-v2__title,
[dir="rtl"] .bp-results-hero-v2__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.18;
	letter-spacing: 0;
}
[dir="rtl"] .bp-results-hero-v2__bg { background-position: left center; }
[dir="rtl"] .bp-results-hero-v2__overlay {
	background:
		linear-gradient(
			to left,
			rgba(244, 239, 227, 0.96) 0%,
			rgba(244, 239, 227, 0.88) 22%,
			rgba(244, 239, 227, 0.72) 38%,
			rgba(244, 239, 227, 0.50) 52%,
			rgba(244, 239, 227, 0.22) 70%,
			rgba(244, 239, 227, 0.00) 88%,
			rgba(244, 239, 227, 0.00) 100%
		);
}

/* ---------------- Reduced motion ---------------- */
@media ( prefers-reduced-motion: reduce ) {
	.bp-results-hero-v2 [data-bp-stagger] {
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}