/* BP Cultures Final CTA widget styles
 *
 * BOXED final CTA for the Cultures page (NOT a full-width
 * section):
 *
 *   .bp-cult-cta              transparent outer section
 *     .bp-cult-cta__box       centered panel: max-width 1140px,
 *                             rounded corners, thin subtle border,
 *                             overflow:hidden. The olive-tree
 *                             photo (set inline by the widget)
 *                             is the background of the whole
 *                             box; the CSS keeps a dark-green
 *                             fallback color underneath.
 *                             A subtle gradient scrim sits
 *                             between the photo and the
 *                             content so the text stays legible.
 *       .bp-cult-cta__inner   centered 1140px container
 *         .bp-cult-cta__content   single column (eyebrow + title
 *                                 + body + buttons)
 *       .bp-cult-cta__benefits bottom benefits row (3 items + 2
 *                               vertical dividers)
 *
 * No decorative botanicals, no outline strokes, no curved
 * image mask. The photo IS the single background of the
 * boxed CTA.
 *
 * Approved palette ONLY:
 *   #374F37  deep green
 *   #B8B25A  olive / gold
 *   #EDDBC3  cream
 *   #FFFFFF  white
 *   #1F2A1F  dark text
 *   No invented greens.
 *
 * All rules scoped under `.bp-cult-cta`. Logical CSS
 * properties so LTR and RTL share the same ruleset.
 */

/* =========================================================
 * ROOT
 * ========================================================= */
.bp-cult-cta {
	--bp-cult-cta-green:        #374F37;
	--bp-cult-cta-olive:        #B8B25A;
	--bp-cult-cta-cream:        #FBF6EC;
	--bp-cult-cta-white:        #FFFFFF;
	--bp-cult-cta-text:         #1F2A1F;

	--bp-cult-cta-box-max:      1140px;
	--bp-cult-cta-box-radius:   24px;
	--bp-cult-cta-box-border:   rgba(184, 178, 90, 0.18);

	--bp-cult-cta-inner-max:    1140px;

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

	position: relative;
	isolation: isolate;
	overflow: visible;
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 100%;
	margin: 0;
	padding: 0 24px;
	background-color: transparent;
	color: var(--bp-cult-cta-text);
	font-family: var(--bp-cult-cta-font-body);
}

.bp-cult-cta *,
.bp-cult-cta *::before,
.bp-cult-cta *::after {
	box-sizing: border-box;
}

/* Widget spacing — respects the page background on the sides. */
.elementor .elementor-widget.elementor-widget-bp-cultures-final-cta,
.elementor-widget.elementor-widget-bp-cultures-final-cta {
	position: relative;
	z-index: 1;
	margin-block-start: 64px;
	margin-block-end: 100px;
}

.elementor .elementor-widget.elementor-widget-bp-cultures-final-cta {
	--container-default-padding-top:    0px;
	--container-default-padding-bottom: 0px;
}

/* =========================================================
 * BOX — the boxed CTA panel
 * ========================================================= */
.bp-cult-cta__box {
	position: relative;
	isolation: isolate;
	inline-size: 100%;
	max-inline-size: var(--bp-cult-cta-box-max);
	margin-inline: auto;
	/* The olive-tree image IS the background of the whole CTA
	 * (set inline on the element from the Elementor media
	 * control). A subtle dark green gradient sits on top so
	 * the text stays legible without losing the photo. */
	background-color: var(--bp-cult-cta-green);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	border: 1px solid var(--bp-cult-cta-box-border);
	border-radius: var(--bp-cult-cta-box-radius);
	overflow: hidden;
	padding: 56px 56px 48px;
}

/* Dark scrim that lets the photo show through on the right
 * and stays solid on the left for text contrast. Sits between
 * the background image and the content. */
.bp-cult-cta__box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		to right,
		rgba(31, 42, 31, 0.92) 0%,
		rgba(31, 42, 31, 0.82) 38%,
		rgba(31, 42, 31, 0.55) 65%,
		rgba(31, 42, 31, 0.35) 100%
	);
	pointer-events: none;
}

/* =========================================================
 * INNER — single centered column over the background image
 * ========================================================= */
.bp-cult-cta__inner {
	position: relative;
	z-index: 2;
	inline-size: 100%;
	max-inline-size: var(--bp-cult-cta-inner-max);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 36px;
}

/* Content block (eyebrow + title + body + buttons). */
.bp-cult-cta__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 18px;
	max-inline-size: 560px;
	min-inline-size: 0;
}

/* Small olive-with-circle line icon at the very top of the
 * eyebrow block. */
.bp-cult-cta__eyebrow-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	color: var(--bp-cult-cta-olive);
	flex: 0 0 auto;
}

.bp-cult-cta__eyebrow-mark svg {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

.bp-cult-cta__eyebrow {
	margin: 0;
	color: var(--bp-cult-cta-cream);
	font-family: var(--bp-cult-cta-font-body);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.3;
}

.bp-cult-cta__title {
	margin: 4px 0 0;
	font-family: var(--bp-cult-cta-font-display);
	font-weight: 400;
	font-size: clamp(34px, 3.8vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.005em;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bp-cult-cta__title-light {
	display: block;
	color: var(--bp-cult-cta-cream);
}

.bp-cult-cta__title-gold {
	display: block;
	color: var(--bp-cult-cta-olive);
}

.bp-cult-cta__body {
	margin: 6px 0 0;
	color: var(--bp-cult-cta-cream);
	font-family: var(--bp-cult-cta-font-body);
	font-size: 15px;
	line-height: 1.65;
	max-inline-size: 460px;
}

.bp-cult-cta__body br + br {
	display: block;
	content: "";
	margin-block-start: 0.35em;
}

/* =========================================================
 * BUTTONS
 * Large, aligned horizontally on desktop. Primary is a
 * gold/olive filled pill with dark-green text and a dark-
 * green circular arrow on the right. WhatsApp is a
 * transparent pill with a light cream border, white text +
 * WhatsApp icon.
 * ========================================================= */
.bp-cult-cta__buttons {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 16px;
	margin-block-start: 12px;
	inline-size: 100%;
}

.bp-cult-cta__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-block-size: 56px;
	padding-inline: 24px;
	padding-block: 12px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--bp-cult-cta-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
	white-space: nowrap;
}

.bp-cult-cta__btn:focus-visible {
	outline: 2px solid var(--bp-cult-cta-cream);
	outline-offset: 3px;
}

/* Primary — gold filled, dark green text. */
.bp-cult-cta__btn--primary {
	background-color: var(--bp-cult-cta-olive);
	color: var(--bp-cult-cta-green);
	border-color: var(--bp-cult-cta-olive);
	padding-inline-end: 14px;
	gap: 16px;
}

a.bp-cult-cta__btn--primary:hover,
a.bp-cult-cta__btn--primary:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(31, 42, 31, 0.18);
}

/* Circular dark-green arrow on the right of the primary. */
.bp-cult-cta__btn-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 32px;
	block-size: 32px;
	border-radius: 50%;
	background-color: var(--bp-cult-cta-green);
	color: var(--bp-cult-cta-olive);
	flex: 0 0 auto;
}

.bp-cult-cta__btn-arrow svg {
	inline-size: 16px;
	block-size: 16px;
	display: block;
}

/* WhatsApp — transparent dark-green, light border. */
.bp-cult-cta__btn--whatsapp {
	background-color: rgba(55, 79, 55, 0.0);
	color: var(--bp-cult-cta-white);
	border-color: rgba(251, 246, 236, 0.45);
}

a.bp-cult-cta__btn--whatsapp:hover,
a.bp-cult-cta__btn--whatsapp:focus-visible {
	background-color: rgba(255, 255, 255, 0.04);
	border-color: rgba(251, 246, 236, 0.75);
}

/* =========================================================
 * MICRO PATCH 0.1.340 — `/cultures-applications/` ID21
 *
 * `.bp-cult-cta__btn--whatsapp` is force-rewritten to EXACTLY
 * match the rendered `.bp-final-cta__btn--whatsapp` button.
 * Source tokens from bp-final-cta.css (lines 316–329):
 *   - background-color: #25D366 (WhatsApp green)
 *   - color: #FFFFFF
 *   - border-color: transparent
 *   - box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35)
 *   - hover: #1DA851 + 0 6px 18px rgba(29, 168, 81, 0.45) + translateY(-1px)
 * Class-doubled selector (0,2,0) beats the single-class
 * original (0,1,0).
 *
 * The dark-green circular `.bp-cult-cta__btn-arrow` badge is
 * hidden on the WhatsApp variant so the button reads as a
 * single flat WhatsApp pill (matches final-cta exactly).
 * ========================================================= */
.bp-cult-cta__btn.bp-cult-cta__btn--whatsapp {
	background-color: #25D366;
	color: #FFFFFF;
	border-color: transparent;
	box-shadow: 0 4px 14px rgba(37, 211, 102, 0.35);
}
a.bp-cult-cta__btn.bp-cult-cta__btn--whatsapp:hover,
a.bp-cult-cta__btn.bp-cult-cta__btn--whatsapp:focus-visible {
	background-color: #1DA851;
	border-color: transparent;
	box-shadow: 0 6px 18px rgba(29, 168, 81, 0.45);
	transform: translateY(-1px);
}
.bp-cult-cta__btn--whatsapp .bp-cult-cta__btn-arrow { display: none; }
.bp-cult-cta__btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 20px;
	block-size: 20px;
	color: currentColor;
	flex: 0 0 auto;
}

.bp-cult-cta__btn-icon svg {
	inline-size: 100%;
	block-size: 100%;
	fill: currentColor;
}

.bp-cult-cta__btn-label {
	display: inline-block;
}

/* =========================================================
 * BOTTOM BENEFITS — 3 items + vertical dividers
 * ========================================================= */
.bp-cult-cta__benefits {
	position: relative;
	z-index: 2;
	list-style: none;
	margin: 36px 0 0;
	padding: 24px 0 0;
	inline-size: 100%;
	display: grid;
	grid-template-columns: 1fr 1px 1fr 1px 1fr;
	gap: 0;
	align-items: center;
	border-block-start: 1px solid rgba(251, 246, 236, 0.14);
}

.bp-cult-cta__benefit {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 4px 22px;
	min-inline-size: 0;
}

.bp-cult-cta__benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 36px;
	block-size: 36px;
	color: #FBF6EC;
	flex: 0 0 auto;
}

.bp-cult-cta__benefit-icon,
.bp-cult-cta__benefit-icon i,
.bp-cult-cta__benefit-icon svg,
.bp-cult-cta__benefit-icon svg * {
	color: #FBF6EC;
	fill: #FBF6EC;
	stroke: #FBF6EC;
}

.bp-cult-cta__benefit-icon i,
.bp-cult-cta__benefit-icon svg {
	inline-size: 100%;
	block-size: 100%;
	fill: #FBF6EC;
	stroke: #FBF6EC;
	stroke-width: 1.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bp-cult-cta__benefit-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-inline-size: 0;
}

.bp-cult-cta__benefit-title {
	color: var(--bp-cult-cta-white);
	font-family: var(--bp-cult-cta-font-body);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.25;
}

.bp-cult-cta__benefit-copy {
	color: rgba(251, 246, 236, 0.85);
	font-family: var(--bp-cult-cta-font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 1.4;
}

.bp-cult-cta__benefit-divider {
	inline-size: 1px;
	block-size: 44px;
	background-color: rgba(251, 246, 236, 0.22);
	justify-self: center;
	align-self: center;
}

/* =========================================================
 * TABLET (≤ 1024px)
 * Buttons keep their side-by-side layout. The image column
 * shrinks a bit. Decorative botanicals are reduced.
 * ========================================================= */
@media (max-width: 1024px) {
	.bp-cult-cta { padding: 0 20px; }

	.bp-cult-cta__box {
		padding: 48px 36px 40px;
		border-radius: 20px;
	}

	.bp-cult-cta__inner {
		gap: 28px;
	}

	.bp-cult-cta__title { font-size: clamp(30px, 4.2vw, 42px); }
	.bp-cult-cta__body  { font-size: 14.5px; }

	.bp-cult-cta__btn { min-block-size: 52px; padding-inline: 22px; font-size: 13.5px; }
	.bp-cult-cta__btn-arrow { inline-size: 28px; block-size: 28px; }
	.bp-cult-cta__btn-arrow svg { inline-size: 14px; block-size: 14px; }
}

/* =========================================================
 * TABLET (≤ 860px)
 * The two columns stack: text first, image BELOW the text.
 * Benefits remain 3 columns to keep their compact look.
 * ========================================================= */
@media (max-width: 860px) {
	.bp-cult-cta { padding: 0 18px; }

	.bp-cult-cta__box {
		padding: 44px 28px 36px;
		border-radius: 18px;
	}

	.bp-cult-cta__inner {
		gap: 32px;
	}

	.bp-cult-cta__title { font-size: clamp(30px, 5.4vw, 38px); }
	.bp-cult-cta__body  { max-inline-size: 100%; }

	.bp-cult-cta__buttons { gap: 12px; }
}

/* =========================================================
 * MOBILE (≤ 600px)
 * Buttons stack full-width. Benefits collapse to 1 column
 * with horizontal dividers. Image gets comfortable height.
 *
 * MOBILE WIDTH ARCHITECTURE: explicit `inline-size: 100% /
 * max-inline-size: 100% / min-inline-size: 0` on every key
 * element so the CTA card fills the available inner width
 * (≈ viewport − 2 × gutter) on every phone — not a squeezed
 * desktop column. */
@media (max-width: 600px) {
	.bp-cult-cta { padding: 0 16px; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }

	.bp-cult-cta__box {
		padding: 40px 22px 32px;
		border-radius: 16px;
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
	}

	.bp-cult-cta__inner { gap: 28px; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }

	.bp-cult-cta__content { gap: 14px; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }

	.bp-cult-cta__eyebrow-mark { inline-size: 32px; block-size: 32px; }
	.bp-cult-cta__eyebrow { font-size: 12px; letter-spacing: 0.2em; }

	.bp-cult-cta__title { font-size: clamp(28px, 7.5vw, 36px); gap: 2px; }
	.bp-cult-cta__body  { font-size: 14px; line-height: 1.6; max-inline-size: 100%; }

	.bp-cult-cta__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		margin-block-start: 8px;
	}

	.bp-cult-cta__btn {
		inline-size: 100%;
		max-inline-size: 100%;
		min-inline-size: 0;
		min-block-size: 52px;
		padding-block: 14px;
		font-size: 14px;
	}

	.bp-cult-cta__image-wrap { min-block-size: 280px; }

	.bp-cult-cta__benefits {
		grid-template-columns: 1fr;
		row-gap: 14px;
		margin-block-start: 28px;
		padding-block-start: 22px;
		inline-size: 100%;
		max-inline-size: 100%;
	}

	.bp-cult-cta__benefit {
		padding: 6px 0;
		gap: 12px;
		inline-size: 100%;
		max-inline-size: 100%;
	}

	.bp-cult-cta__benefit-divider {
		inline-size: 80%;
		block-size: 1px;
		justify-self: center;
	}
}

/* =========================================================
 * SMALL MOBILE (≤ 380px)
 * ========================================================= */
@media (max-width: 380px) {
	.bp-cult-cta { padding: 0 14px; }

	.bp-cult-cta__box {
		padding: 36px 18px 28px;
		border-radius: 14px;
	}

	.bp-cult-cta__title { font-size: 28px; }
}

/* =========================================================
 * Safe-area insets (notched devices)
 * ========================================================= */
@supports (padding: max(0px)) {
	.bp-cult-cta { padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right)); }
}

/* =========================================================
 * ARABIC / RTL
 * Display family falls back to Arabic. Layout mirrors
 * automatically through logical properties; the clip path
 * flips with the inline direction so the curve stays on
 * the visual "outside" edge of the image (image sits on
 * the inline-end in both LTR and RTL).
 * ========================================================= */
[lang="ar"] .bp-cult-cta__title,
[dir="rtl"] .bp-cult-cta__title,
[lang="ar"] .bp-cult-cta__title-light,
[dir="rtl"] .bp-cult-cta__title-light,
[lang="ar"] .bp-cult-cta__title-gold,
[dir="rtl"] .bp-cult-cta__title-gold {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
}

/* =========================================================
 * Reduced motion
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	.bp-cult-cta [data-bp-reveal],
	.bp-cult-cta [data-bp-stagger] {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
	.bp-cult-cta__btn { transition: none !important; }
}

/* =========================================================
 * Print
 * ========================================================= */
@media print {
	.bp-cult-cta { padding: 0 16px; }
	.bp-cult-cta__box { padding: 24px 16px; }
}

/* =========================================================
 * MICRO PATCH 0.1.339 — `/cultures-applications/` ID21
 *
 * `.bp-cult-cta__btn--primary` is force-rewritten to EXACTLY
 * match the rendered `.bp-final-cta__btn--primary` button.
 * Class-doubled selector (0,2,0) beats the single-class
 * original (0,1,0). The original gold-olive + dark-green
 * pill is overridden with the final-CTA dark-green + white
 * pill tokens. The gold-on-dark-green arrow circle inside
 * the button is intentionally left as the source defines it
 * — it sits inside the primary button so its inverse colors
 * still read clearly.
 * ========================================================= */
.bp-cult-cta__btn.bp-cult-cta__btn--primary {
	gap: 10px;
	min-block-size: 48px;
	padding-block: 12px;
	padding-inline: 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: #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;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
a.bp-cult-cta__btn.bp-cult-cta__btn--primary:hover,
a.bp-cult-cta__btn.bp-cult-cta__btn--primary:focus-visible {
	background-color: #2E422E;
	border-color: #2E422E;
	color: #FFFFFF;
	transform: translateY(-1px);
}
.bp-cult-cta__btn--primary .bp-cult-cta__btn-arrow { display: none; }