/* BP Cultures Hero widget styles
 *
 * Full-width hero for the Cultures page. Same proven full-bleed
 * breakout pattern as the Homepage Hero (bp-hero.css): the
 * background image spans the entire viewport width via the
 * Elementor wrapper overrides + the `100vw + calc(50%-50vw)`
 * negative margin trick. Left editorial text block constrained
 * to the 1140px centered content container; right side shows
 * the dominant agricultural scene image with a soft cream
 * gradient blend so the transition between text and image is
 * seamless.
 *
 * Visual stack (bottom to top):
 *   0. Section fallback bg (cream — for no-image state)
 *   1. Background image (full viewport width, position: absolute)
 *   2. Soft blend overlay (cream → transparent gradient)
 *   3. Content (eyebrow / title / description / CTA) + empty media slot
 *
 * No JS. All responsive rules mirror the Homepage Hero breakpoints.
 */

.bp-cultures-hero {
	/* Theme tokens. Editable from Elementor sidebar. */
	--bp-ch-fallback-bg: transparent;
	--bp-ch-eyebrow:     #B8B25A;
	--bp-ch-title:       #374F37;
	--bp-ch-description: #1F2A1F;
	--bp-ch-cta-bg:      #374F37;
	--bp-ch-cta-fg:      #FFFFFF;
	--bp-ch-eyebrow-line:#B8B25A;

	--bp-ch-inner-max:  1480px;
	--bp-ch-pad-x:      clamp(24px, 5vw, 64px);
	--bp-ch-pad-y:      clamp(48px, 7vw, 88px);

	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--bp-ch-fallback-bg);
	color: var(--bp-ch-description);
	min-block-size: 620px;
	inline-size: 100%;
	max-inline-size: none;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
}

/* ---------------- Full-bleed breakout (copied from Homepage Hero) ----------------
 * Force the surrounding Elementor wrappers to 100% width. Then
 * break out of any boxed container via `100vw + calc(50%-50vw)`
 * so the hero truly spans the full viewport even when the
 * parent Elementor section uses a constrained content width. */
.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-cultures-hero,
.elementor-section .elementor-container {
	width: 100% !important;
	max-width: 100% !important;
}

.elementor-element.bp-cultures-hero,
.elementor .bp-cultures-hero,
.e-con.bp-cultures-hero,
.bp-cultures-hero {
	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;
}

/* The key breakout rule: take 100vw width and pull both edges
 * to the viewport sides via negative margins, regardless of
 * the parent container's width. */
.elementor .elementor-widget.elementor-widget-bp-cultures-hero,
.elementor-widget.elementor-widget-bp-cultures-hero {
	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;
}

/* Zero default Elementor container padding + inter-widget spacing
 * so the hero sits flush with the page header. */
.e-con:has(> .elementor-widget-bp-cultures-hero),
.e-con:has(> .e-con-inner > .elementor-widget-bp-cultures-hero),
.e-con-inner:has(> .elementor-widget-bp-cultures-hero) {
	--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-cultures-hero {
	margin-block-end: 0 !important;
	--kit-widget-spacing: 0px !important;
}

/* ---------------- Background image ----------------
 * Absolute-positioned layer, fills the entire hero, uses the
 * image URL as a CSS background. Position/size/opacity are
 * controlled from Elementor via responsive slider controls. */
.bp-cultures-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: transparent;
	background-repeat: no-repeat;
	background-position-x: 65%;
	background-position-y: 50%;
	background-size: cover;
	pointer-events: none;
	transition: opacity 200ms ease;
}

/* Cream overlay layer removed. The hero background image is
 * shown raw, without any cream tint or gradient. */
.bp-cultures-hero__blend { display: none; }

/* ---------------- Inner layout ----------------
 * Centered 1140px container matching the rest of the site.
 * Two columns: content (left ~46%) and media slot (right ~54%).
 * Content sits in the cream zone of the blend overlay. */
.bp-cultures-hero__inner {
	position: relative;
	z-index: 3;

	inline-size: 100%;
	max-inline-size: 1300px;
	margin-inline: auto;

	padding-inline: clamp(28px, 5vw, 72px);

	padding-block: var(--bp-ch-pad-y);

	display: grid;
	grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
	gap: clamp(20px, 3vw, 56px);
	align-items: center;
	min-block-size: inherit;

	box-sizing: border-box;
}

/* Left content block */
.bp-cultures-hero__content {
	display: flex;
	flex-direction: column;
	gap: 22px;
	max-inline-size: 1180px;
	justify-self: start;
	inline-size: 100%;
	position: relative;
	z-index: 4;
}

/* Empty right slot — the background image already shows there
 * via the blend overlay. Kept for symmetrical grid layout. */
.bp-cultures-hero__media-slot {
	align-self: stretch;
	pointer-events: none;
}

/* ---------------- Typography ---------------- */

/* Eyebrow: olive/gold uppercase text + short LEFT rule — matches
 * the VOTRE CULTURE pattern (.bp-cs__eyebrow) via a CSS ::before
 * pseudo-line so the structure stays symmetric (line—text—line)
 * without modifying the PHP render. The reference section uses
 * ONLY a single leading 40px line, so the hero keeps the same
 * 40px gold rule. */
.bp-cultures-hero__eyebrow {
	position: relative;
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--bp-ch-eyebrow);
	line-height: 1;
}
.bp-cultures-hero__eyebrow::before {
	display: none !important;
	content: none !important;
}

/* Title: dark green serif display — matches VOTRE CULTURE pattern
 * (.bp-cs__title) for color/font/weight/line-height. */
.bp-cultures-hero__title {
	margin: 0;
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif);
	font-weight: 400;
	color: var(--bp-ch-title);
	line-height: 1.1;
	letter-spacing: -0.01em;
	font-size: 56px;
}
.bp-cultures-hero__title-line {
	display: block;
}

/* Description */
.bp-cultures-hero__description {
	margin: 0;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-size: 17px;
	line-height: 1.62;
	color: var(--bp-ch-description);
	max-inline-size: 480px;
}

/* ---------------- CTA button ----------------
 * Force `.bp-cultures-hero__cta` to render EXACTLY like
 * `.bp-final-cta__btn--primary` from bp-final-cta.css.
 * Class-doubled selector (0,2,0) beats the single-class
 * original (0,1,0). All presentation tokens are copied
 * verbatim from the source so the hero CTA matches the
 * Final CTA pill: 48px tall, 999px radius, 13px / 700 /
 * 0.06em uppercase Manrope, dark green #374F37 + white
 * #FFFFFF, with the same transition + hover translateY. */
.bp-cultures-hero__cta.bp-cultures-hero__cta {
	gap: 10px;
	min-block-size: 48px;
	padding-block: 12px;
	padding-inline: 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: #374F37;
	color: #FFFFFF;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif);
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.bp-cultures-hero__cta.bp-cultures-hero__cta:hover,
.bp-cultures-hero__cta.bp-cultures-hero__cta:focus-visible {
	background: #2E422E;
	border-color: #2E422E;
	color: #FFFFFF;
	transform: translateY(-1px);
}
.bp-cultures-hero__cta-icon {
	flex: 0 0 auto;
	inline-size: 16px;
	block-size: 16px;
}

/* ---------------- Responsive: Tablet (769-1024) ---------------- */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-cultures-hero { min-block-size: 560px; }
	.bp-cultures-hero__title { font-size: 56px; }
	.bp-cultures-hero__inner {
		grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
		gap: 20px;
		padding-block: 48px;
	}
	.bp-cultures-hero__description { font-size: 15px; max-inline-size: 100%; }
	.bp-cultures-hero__content { max-inline-size: 100%; gap: 18px; }
}

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

	/* On mobile the blend layer stays hidden (it was disabled
	 * above so no vertical cream gradient is added on small
	 * screens either). */

	/* Reposition background image so the agricultural subject
	 * is still visible. */
	.bp-cultures-hero__bg {
		background-position-x: 70% !important;
		background-position-y: 40% !important;
	}

	.bp-cultures-hero__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 44px 20px;
		padding-inline: 24px;
		gap: 24px;
		align-items: stretch;
	}

	.bp-cultures-hero__content {
		max-inline-size: 100%;
		min-inline-size: 0;
		gap: 18px;
		align-items: flex-start;
	}

	.bp-cultures-hero__title {
		font-size: 36px;
		line-height: 1.06;
	}

	.bp-cultures-hero__description {
		max-inline-size: 100%;
		min-inline-size: 0;
		font-size: 16px;
		line-height: 1.6;
	}

	.bp-cultures-hero__cta {
		inline-size: auto;
		margin-block-start: 4px;
	}

	.bp-cultures-hero__media-slot {
		display: none;
	}
}

/* ---------------- ≤ 480px ---------------- */
@media ( max-width: 480px ) {
	.bp-cultures-hero__inner { padding-inline: 20px; padding-block: 36px 16px; }
	.bp-cultures-hero__title { font-size: 40px; }
	.bp-cultures-hero__content { gap: 14px; }

	/* Mobile patch: shift background image further to the right
	 * so the cream/light area remains visible behind the text on
	 * the LEFT, while the photo is anchored toward the RIGHT
	 * edge of the viewport. */
	.bp-cultures-hero__bg {
		background-position: 75% center !important;
		background-position-x: 75% !important;
		background-position-y: center !important;
	}
}

/* ---------------- ≤ 390px ---------------- */
@media ( max-width: 390px ) {
	.bp-cultures-hero__inner { padding-inline: 18px; padding-block: 32px 12px; }
	.bp-cultures-hero__title { font-size: 34px; line-height: 1.04; }
	.bp-cultures-hero__eyebrow {
		font-size: 10px;
		letter-spacing: 0.12em;
	}
	.bp-cultures-hero__description { font-size: 14px; line-height: 1.58; max-inline-size: 100%; min-inline-size: 0; word-break: break-word; }
	.bp-cultures-hero__content { gap: 12px; }
	.bp-cultures-hero__cta { font-size: 12px; padding-inline: 18px; }
}

/* ---------------- ≤ 360px ---------------- */
@media ( max-width: 360px ) {
	.bp-cultures-hero__inner { padding-inline: 16px; gap: 10px; padding-block: 28px 10px; }
	.bp-cultures-hero__title { font-size: 30px; line-height: 1.06; }
	.bp-cultures-hero__eyebrow { font-size: 9px; letter-spacing: 0.10em; }
	.bp-cultures-hero__description { font-size: 13px; line-height: 1.55; }
	.bp-cultures-hero__cta { font-size: 13px; padding-inline: 18px; min-block-size: 48px; }
}

/* ---------------- Arabic / RTL ---------------- */
[lang="ar"] .bp-cultures-hero__title,
[dir="rtl"] .bp-cultures-hero__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-cultures-hero__content { justify-self: end; }

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

/* =========================================================
 * MICRO PATCH 0.1.341 — /cultures-applications/ ID21
 *
 * Same root cause as the rest of the page: Elementor widget
 * controls compile to `.elementor-widget.elementor-widget-{name}
 * .bp-X` (0,3,0) and load AFTER the main stylesheet, so the
 * 0,2,0 class-doubled patch on `.bp-cultures-hero__cta` and
 * the 0,1,0 base rules on the eyebrow / title LOSE to the
 * elementor inline CSS.
 *
 * FIX: re-scope every override under
 *   `body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-hero .target`
 * which lands at 0,5,0 and outranks elementor's inline rule.
 * `!important` is used only on the properties that elementor's
 * Controls Manager actually emits (color, font-size, font-weight,
 * letter-spacing, text-transform, background-color, border-color,
 * padding, border-radius, min-block-size). Properties elementor
 * does not control (display, gap, alignment, transition) are set
 * WITHOUT !important because the selector itself wins.
 *
 * Targets:
 *   .bp-cultures-hero__title    (VOTRE CULTURE reference)
 *   .bp-cultures-hero__eyebrow  (VOTRE CULTURE reference)
 *   .bp-cultures-hero__cta      (PRIMARY CTA reference)
 * ========================================================= */
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-hero .bp-cultures-hero__title {
	font-family: var(--bp-font-display, 'DM Serif Display', Georgia, serif) !important;
	font-weight: 400 !important;
	font-size: 62px !important;
	line-height: 1.02 !important;
	letter-spacing: 0 !important;
	color: #374F37 !important;
	text-transform: uppercase !important;
}

body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-hero .bp-cultures-hero__eyebrow {
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: #374F37 !important;
	line-height: 1.3 !important;
}

body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-hero .bp-cultures-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-block-size: 48px !important;
	padding-block: 12px !important;
	padding-inline: 26px !important;
	border: 1px solid transparent;
	border-radius: 999px !important;
	background-color: #374F37 !important;
	color: #FFFFFF !important;
	font-family: var(--bp-font-body, 'Manrope', system-ui, sans-serif) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1 !important;
	letter-spacing: 0.06em !important;
	text-transform: uppercase !important;
	text-decoration: none;
	cursor: pointer;
	max-inline-size: 200px !important;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-hero .bp-cultures-hero__cta:hover,
body.elementor-page-21 .elementor-widget.elementor-widget-bp-cultures-hero .bp-cultures-hero__cta:focus-visible {
	background-color: #2E422E;
	border-color: #2E422E;
	color: #FFFFFF;
	transform: translateY(-1px);
}