/* BP Blog Hero widget styles
 *
 * Full-bleed hero for the Blog page. A single agricultural
 * photograph spans the entire viewport width as one continuous
 * background — no boxed image, no collage, no separate visual
 * block. A cream → transparent gradient fade sits on the
 * inline-start side so the editorial left column (eyebrow,
 * uppercase serif title, gold divider line + diamond, supporting
 * text) stays perfectly readable while the photograph keeps
 * its full-bleed presence on the inline-end.
 *
 * Heading system is the SAME as the Homepage "POURQUOI
 * CHOISIR" section so all section headers on the site stay
 * consistent. Eyebrow 13px / 600 / 0.18em / uppercase /
 * #374F37. Title DM Serif Display / 400 / clamp(32px, 4.4vw,
 * 52px) / 1.1 / 0.01em / #374F37 / uppercase. Gold divider
 * 56px line + 8x8px diamond at #B8B25A.
 *
 * No independent section background color: the page background
 * flows continuously and the photograph uses a cream → clear
 * fade so the typography stays readable. The fade is a pure
 * CSS linear gradient on a dedicated layer so the photograph
 * is never clipped or masked.
 *
 * All visual rules use logical CSS properties (padding-inline,
 * inset-inline, margin-inline) so the same stylesheet covers
 * /ar/ without a separate RTL file.
 *
 * Desktop: full-bleed photograph, left content + right photo
 * emphasis, smooth cream fade. Tablet: keep image + fade,
 * reduce spacing. Mobile: stack naturally, the photograph
 * remains visible behind a stronger cream overlay.
 */

.bp-blog-hero {
	--bp-blog-hero-bg:         #FBF6EC;
	--bp-blog-hero-fg:         #374F37;
	--bp-blog-hero-muted:      #5C6A5C;
	--bp-blog-hero-olive:      #B8B25A;
	--bp-blog-hero-fade:       60%;

	--bp-blog-hero-inner-max:  1200px;
	--bp-blog-hero-pad-x:      clamp(24px, 5vw, 64px);
	--bp-blog-hero-pad-y-top:  clamp(56px, 6vw, 88px);
	--bp-blog-hero-pad-y-bot:  clamp(36px, 4vw, 56px);

	--bp-blog-hero-font-body:    var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	--bp-blog-hero-font-display: var(--bp-font-display, 'DM Serif Display', Georgia, serif);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	inline-size: 100%;
	max-inline-size: none;
	min-block-size: 540px;
	background-color: var(--bp-blog-hero-bg);
	color: var(--bp-blog-hero-fg);
	font-family: var(--bp-blog-hero-font-body);
}

/* ---------------- Full-bleed breakout ----------------
 * Force the surrounding Elementor wrappers to 100% width,
 * then break out of any boxed container via the 100vw +
 * calc(50%-50vw) trick so the hero truly spans the full
 * viewport regardless of the parent Elementor section width. */
.elementor-section:has(> .elementor-container .elementor-widget-bp-blog-hero) > .elementor-container,
.elementor-section:has(> .elementor-container .elementor-widget-bp-blog-hero) > .elementor-row,
.elementor-section:has(> .elementor-container .elementor-widget-bp-blog-hero) > .e-con,
.e-con:has(> .e-con-inner .elementor-widget-bp-blog-hero) > .e-con-inner,
.e-con:has(> .elementor-widget-bp-blog-hero) {
	max-inline-size: 100% !important;
	inline-size: 100% !important;
	padding-inline: 0 !important;
}
.elementor-section:has(> .elementor-container .elementor-widget-bp-blog-hero),
.e-con:has(> .e-con-inner .elementor-widget-bp-blog-hero),
.e-con:has(> .elementor-widget-bp-blog-hero) {
	margin-inline: calc(50% - 50vw) !important;
	max-inline-size: 100vw !important;
}

/* ---------------- Background photograph ---------------- */
.bp-blog-hero__bg {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right center;
	z-index: 0;
	pointer-events: none;
}

/* ---------------- Cream fade ----------------
 * L→R cream overlay on the inline-start side so the editorial
 * left column stays readable while the photo keeps its presence
 * on the inline-end. The fade is a linear gradient with
 * configurable strength. */
.bp-blog-hero__fade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to right,
		rgba(251, 246, 236, 1) 0%,
		rgba(251, 246, 236, 0.92) calc(30% * var(--bp-blog-hero-fade) / 60%),
		rgba(251, 246, 236, 0.45) calc(60% * var(--bp-blog-hero-fade) / 60%),
		rgba(251, 246, 236, 0) 80%
	);
}

[dir="rtl"] .bp-blog-hero__fade {
	background: linear-gradient(
		to left,
		rgba(251, 246, 236, 1) 0%,
		rgba(251, 246, 236, 0.92) calc(30% * var(--bp-blog-hero-fade) / 60%),
		rgba(251, 246, 236, 0.45) calc(60% * var(--bp-blog-hero-fade) / 60%),
		rgba(251, 246, 236, 0) 80%
	);
}

/* ---------------- Inner ---------------- */
.bp-blog-hero__inner {
	position: relative;
	z-index: 2;
	max-inline-size: var(--bp-blog-hero-inner-max);
	margin-inline: auto;
	padding-block: var(--bp-blog-hero-pad-y-top) var(--bp-blog-hero-pad-y-bot);
	padding-inline: var(--bp-blog-hero-pad-x);
	display: flex;
	align-items: center;
	min-block-size: inherit;
}

.bp-blog-hero__content {
	max-inline-size: 600px;
	text-align: start;
}

/* ---------------- Heading system (1:1 with POURQUOI CHOISIR) ---------------- */
.bp-blog-hero__eyebrow {
	margin: 0 0 12px;
	font-family: var(--bp-blog-hero-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-blog-hero-fg);
}

.bp-blog-hero__title {
	margin: 0 0 16px;
	font-family: var(--bp-blog-hero-font-display);
	font-weight: 400;
	font-size: clamp(32px, 4.4vw, 52px);
	line-height: 1.1;
	letter-spacing: 0.01em;
	color: var(--bp-blog-hero-fg);
	text-transform: uppercase;
}

.bp-blog-hero__divider {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	margin-block: 8px 18px;
}

.bp-blog-hero__divider-line {
	display: inline-block;
	inline-size: 56px;
	block-size: 1px;
	background-color: var(--bp-blog-hero-olive);
}

.bp-blog-hero__divider-diamond {
	display: inline-block;
	inline-size: 8px;
	block-size: 8px;
	background-color: var(--bp-blog-hero-olive);
	transform: rotate(45deg);
}

.bp-blog-hero__description {
	margin: 0;
	max-inline-size: 540px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--bp-blog-hero-fg);
	opacity: 0.85;
}

/* ---------------- Tablet ---------------- */
@media (max-width: 1024px) {
	.bp-blog-hero {
		--bp-blog-hero-pad-y-top: 56px;
		--bp-blog-hero-pad-y-bot: 40px;
	}
	.bp-blog-hero__content {
		max-inline-size: 520px;
	}
}

/* ---------------- Mobile ---------------- */
@media (max-width: 768px) {
	.bp-blog-hero {
		min-block-size: 460px;
	}
	.bp-blog-hero__inner {
		padding-block: clamp(48px, 10vw, 64px) clamp(32px, 8vw, 48px);
		padding-inline: 18px;
		inline-size: calc(100% - 36px);
		margin-inline: auto;
	}
	.bp-blog-hero__content {
		max-inline-size: 100%;
	}
	.bp-blog-hero__description {
		font-size: 14.5px;
	}
	.bp-blog-hero__fade {
		background: linear-gradient(
			to right,
			rgba(251, 246, 236, 0.96) 0%,
			rgba(251, 246, 236, 0.88) 35%,
			rgba(251, 246, 236, 0.45) 65%,
			rgba(251, 246, 236, 0) 100%
		);
	}
	[dir="rtl"] .bp-blog-hero__fade {
		background: linear-gradient(
			to left,
			rgba(251, 246, 236, 0.96) 0%,
			rgba(251, 246, 236, 0.88) 35%,
			rgba(251, 246, 236, 0.45) 65%,
			rgba(251, 246, 236, 0) 100%
		);
	}
}

@media (max-width: 420px) {
	.bp-blog-hero__title {
		font-size: 30px;
	}
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion: reduce) {
	.bp-blog-hero__bg,
	.bp-blog-hero__fade {
		transition: none;
	}
}