/* BP FAQ Final-CTA V2 widget styles
 *
 * Premium LIGHT Barbary CTA. Visually identical to the
 * existing `bp-cultures-final-cta-v2` and
 * `bp-results-final-cta-v2` — same tokens, same 1320px
 * container, same 58/42 split, same dark-green primary
 * pill, same image-edge cream fade, same cream/sage CSS
 * fallback when no image is selected.
 *
 * Palette tokens (no new tokens introduced):
 *   --bp-ffv2-cream:        #F4EFE3   base
 *   --bp-ffv2-cream-2:      #ECE4D0
 *   --bp-ffv2-cream-soft:   #E2DCC4
 *   --bp-ffv2-sage:         #C6C29B
 *   --bp-ffv2-green:        #374F37   primary type / dark CTA
 *   --bp-ffv2-green-2:      #2A3F2A
 *   --bp-ffv2-gold:         #B8B25A
 *   --bp-ffv2-gold-soft:    rgba(184, 178, 90, 0.32)
 */

.bp-faq-final-cta-v2 {
	--bp-ffv2-cream:        #F4EFE3;
	--bp-ffv2-cream-2:      #ECE4D0;
	--bp-ffv2-cream-soft:   #E2DCC4;
	--bp-ffv2-sage:         #C6C29B;
	--bp-ffv2-green:        #374F37;
	--bp-ffv2-green-2:      #2A3F2A;
	--bp-ffv2-gold:         #B8B25A;
	--bp-ffv2-gold-soft:    rgba(184, 178, 90, 0.32);

	--bp-ffv2-page-pad-y:   clamp(72px, 9vw, 128px);
	--bp-ffv2-page-pad-x:   clamp(20px, 4vw, 56px);

	--bp-ffv2-panel-radius:  30px;
	--bp-ffv2-panel-pad-x:  clamp(28px, 4.5vw, 64px);
	--bp-ffv2-panel-pad-y:  clamp(40px, 5.5vw, 64px);

	--bp-ffv2-max:          1320px;
	--bp-ffv2-gap:          clamp(36px, 5vw, 72px);

	background: transparent;
	box-sizing: border-box;
	padding-block: var(--bp-ffv2-page-pad-y);
	padding-inline: var(--bp-ffv2-page-pad-x);
	width: 100%;
}
.bp-faq-final-cta-v2 *,
.bp-faq-final-cta-v2 *::before,
.bp-faq-final-cta-v2 *::after { box-sizing: border-box; }

/* Section background: light cream wash so the cream
 * panel "lifts" off the section. */
.elementor-19 .bp-faq-final-cta-v2 {
	background:
		radial-gradient(120% 80% at 50% 0%, #F8F3E7 0%, #F0E8D2 100%);
}
.bp-ffv2__panel {
	background: var(--bp-ffv2-cream);
	border: 1px solid rgba(55, 79, 55, 0.10);
	border-radius: var(--bp-ffv2-panel-radius);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.6) inset,
		0 30px 60px -30px rgba(20, 30, 20, 0.30);
	position: relative;
	overflow: hidden;
	max-width: var(--bp-ffv2-max);
	margin-inline: auto;
	padding: var(--bp-ffv2-panel-pad-y) var(--bp-ffv2-panel-pad-x);
}

/* Decorative gold corner accent */
.bp-ffv2__panel::after {
	content: "";
	position: absolute;
	inset: auto auto 24px 24px;
	width: 56px;
	height: 1px;
	background: var(--bp-ffv2-gold-soft);
	pointer-events: none;
}

.bp-ffv2__inner {
	display: grid;
	grid-template-columns: 58fr 42fr;
	gap: var(--bp-ffv2-gap);
	align-items: center;
}

/* =====================================================
 * Text column
 * ===================================================== */
.bp-ffv2__text {
	display: flex;
	flex-direction: column;
	gap: clamp(18px, 1.8vw, 26px);
	color: var(--bp-ffv2-green);
}

.bp-ffv2__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-family: var(--bp-bp-eyebrow-font, "Inter", "Helvetica Neue", Arial, sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--bp-ffv2-green);
}
.bp-ffv2__eyebrow-line {
	display: inline-block;
	width: 32px;
	height: 1px;
	background: var(--bp-ffv2-gold);
	opacity: 0.95;
}
.bp-ffv2__eyebrow-text { line-height: 1.2; }

.bp-ffv2__title {
	margin: 0;
	font-family: var(--bp-bp-serif, "Cormorant Garamond", "EB Garamond", Georgia, serif);
	font-weight: 500;
	font-size: clamp(40px, 4.4vw, 58px);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: #374F3C;
	max-width: 18ch;
}

.bp-ffv2__text-body {
	margin: 0;
	font-family: var(--bp-bp-sans, "Inter", "Helvetica Neue", Arial, sans-serif);
	font-size: clamp(15px, 1.05vw, 17px);
	line-height: 1.65;
	color: var(--bp-ffv2-green-2);
	max-width: 52ch;
	opacity: 0.88;
}

/* =====================================================
 * Actions
 * ===================================================== */
.bp-ffv2__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: clamp(8px, 1vw, 14px);
}

.bp-ffv2__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	font-family: var(--bp-bp-eyebrow-font, "Inter", "Helvetica Neue", Arial, sans-serif);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
	white-space: nowrap;
}
.bp-ffv2__btn-text { line-height: 1; }
.bp-ffv2__btn-arrow {
	display: inline-flex;
	align-items: center;
	transition: transform 0.25s ease;
}
.bp-ffv2__btn:hover .bp-ffv2__btn-arrow { transform: translateX(3px); }

/* Primary: dark green pill with cream text */
.bp-ffv2__btn--primary {
	background: var(--bp-ffv2-green);
	color: var(--bp-ffv2-cream);
	border: 1px solid var(--bp-ffv2-green);
	box-shadow: 0 6px 18px -8px rgba(20, 30, 20, 0.45);
}
.bp-ffv2__btn--primary:hover {
	background: var(--bp-ffv2-green-2);
	border-color: var(--bp-ffv2-green-2);
	color: var(--bp-ffv2-cream);
	transform: translateY(-1px);
}

/* Secondary: transparent + dark green border */
.bp-ffv2__btn--secondary {
	background: transparent;
	color: var(--bp-ffv2-green);
	border: 1px solid var(--bp-ffv2-green);
}
.bp-ffv2__btn--secondary:hover {
	background: rgba(55, 79, 55, 0.06);
	color: var(--bp-ffv2-green-2);
	border-color: var(--bp-ffv2-green-2);
}

/* =====================================================
 * Media column
 * ===================================================== */
.bp-ffv2__media {
	position: relative;
	min-width: 0;
	align-self: stretch;
	display: flex;
}
.bp-ffv2__image {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: 22px;
	overflow: hidden;
	background: linear-gradient(135deg, var(--bp-ffv2-cream-soft) 0%, var(--bp-ffv2-cream) 100%);
	box-shadow: 0 18px 40px -24px rgba(20, 30, 20, 0.45);
}
.bp-ffv2__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}
/* Soft cream gradient at the LEFT edge of the image so
 * it visually merges into the panel and never looks
 * like a separate card on the right. */
.bp-ffv2__image-fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--bp-ffv2-cream) 0%, rgba(244, 239, 227, 0.55) 25%, rgba(244, 239, 227, 0) 50%);
	pointer-events: none;
	z-index: 1;
}
.bp-ffv2__image--fallback {
	padding: 0;
	overflow: hidden;
}
.bp-ffv2__image--fallback svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* =====================================================
 * Responsive
 * ===================================================== */

/* Tablet: tighten padding, narrow title */
@media (max-width: 1024px) {
	.bp-ffv2__inner {
		grid-template-columns: 1fr;
		gap: clamp(28px, 4vw, 40px);
	}
	.bp-ffv2__title { max-width: none; font-size: clamp(36px, 5.4vw, 50px); }
	.bp-ffv2__media { max-width: 640px; margin-inline: auto; }
}

/* Mobile */
@media (max-width: 720px) {
	.bp-faq-final-cta-v2 { padding-block: clamp(56px, 9vw, 88px); }
	.bp-ffv2__panel {
		padding: clamp(28px, 6vw, 40px) clamp(20px, 5vw, 28px);
		border-radius: 22px;
	}
	.bp-ffv2__title { font-size: clamp(30px, 7.5vw, 40px); }
	.bp-ffv2__text-body { font-size: 15px; line-height: 1.6; }
	.bp-ffv2__actions { flex-direction: column; align-items: stretch; gap: 10px; }
	.bp-ffv2__btn { width: 100%; padding: 14px 20px; font-size: 12px; }
	.bp-ffv2__image { aspect-ratio: 16 / 11; border-radius: 18px; }
	.bp-ffv2__panel::after { width: 36px; bottom: 16px; left: 16px; }
}

/* Very small screens */
@media (max-width: 380px) {
	.bp-ffv2__title { font-size: 28px; }
	.bp-ffv2__btn { padding: 13px 16px; font-size: 11.5px; letter-spacing: 0.14em; }
}

/* RTL */
[lang="ar"] .bp-faq-final-cta-v2,
[dir="rtl"]  .bp-faq-final-cta-v2 {
	direction: rtl;
}
[lang="ar"] .bp-ffv2__image-fade,
[dir="rtl"]  .bp-ffv2__image-fade {
	background: linear-gradient(90deg, rgba(244, 239, 227, 0) 50%, rgba(244, 239, 227, 0.55) 75%, var(--bp-ffv2-cream) 100%);
}
[lang="ar"] .bp-ffv2__btn:hover .bp-ffv2__btn-arrow,
[dir="rtl"]  .bp-ffv2__btn:hover .bp-ffv2__btn-arrow { transform: translateX(-3px); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.bp-ffv2__btn,
	.bp-ffv2__btn-arrow { transition: none !important; }
	.bp-ffv2__btn:hover { transform: none !important; }
}