/* BP FAQ Next Steps V2 widget styles
 *
 * Lighter editorial resource navigation, replacing the
 * previous "bp-faq-next-steps" section. Calculator is
 * intentionally removed. No icons, no edge botanicals,
 * no shadow system, no images.
 *
 * Reuses the existing Barbary V2 palette and spacing
 * system (same tokens as bp-faq-category-nav). Visual
 * language matches the rest of the FAQ page so the page
 * reads as one continuous editorial story.
 *
 * Visual stack (bottom to top):
 *   0. Page cream background
 *   1. Centered 1320px inner container
 *   2. Section header (eyebrow / serif H2 / sans intro)
 *   3. 4-up resource grid (2-up on tablet, 1-up on mobile)
 *
 * Each tile:
 *   - cream-soft background, hairline border, soft radius
 *   - small number top-left
 *   - sans title + sans description
 *   - inline CTA pill (gold dot + label + arrow)
 *   - whole tile is clickable; hover lifts slightly
 *
 * Color tokens (existing V2 palette, no new tokens):
 *   --bp-fns2-bg:        #FBF6EC
 *   --bp-fns2-cream-1:   #F4ECDD  (eyebrow gold line)
 *   --bp-fns2-tile-bg:   #F2EBDA
 *   --bp-fns2-tile-bd:   #E4DCCB
 *   --bp-fns2-green:     #374F37
 *   --bp-fns2-green-2:   #2F4A2F
 *   --bp-fns2-text:      #1F2A1F
 *   --bp-fns2-soft:      #5C6A5C
 *   --bp-fns2-gold:      #B8B25A
 */

.bp-faq-next-steps-v2 {
	--bp-fns2-bg:        #FBF6EC;
	--bp-fns2-cream-1:   #F4ECDD;
	--bp-fns2-tile-bg:   #F2EBDA;
	--bp-fns2-tile-bd:   #E4DCCB;
	--bp-fns2-green:     #374F37;
	--bp-fns2-green-2:   #2F4A2F;
	--bp-fns2-text:      #1F2A1F;
	--bp-fns2-soft:      #5C6A5C;
	--bp-fns2-gold:      #B8B25A;

	--bp-fns2-inner-max: 1320px;

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

	position: relative;
	isolation: isolate;
	inline-size: 100%;
	max-inline-size: none;
	padding-block: clamp(64px, 8vw, 96px);
	background: var(--bp-fns2-bg);
	color: var(--bp-fns2-text);
	font-family: var(--bp-fns2-font-body);
}

.bp-faq-next-steps-v2 *,
.bp-faq-next-steps-v2 *::before,
.bp-faq-next-steps-v2 *::after {
	box-sizing: border-box;
}

/* ---- Inner container ---- */
.bp-faq-next-steps-v2 .bp-fns2__inner {
	inline-size: 100%;
	max-inline-size: var(--bp-fns2-inner-max);
	margin-inline: auto;
	padding-inline: clamp(16px, 3vw, 24px);
	display: flex;
	flex-direction: column;
	gap: clamp(28px, 4vw, 48px);
}

/* =========================================================
 * Header (centered)
 * ========================================================= */
.bp-faq-next-steps-v2 .bp-fns2__head {
	inline-size: 100%;
	max-inline-size: 820px;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}

.bp-faq-next-steps-v2 .bp-fns2__eyebrow {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	color: var(--bp-fns2-green);
	font-family: var(--bp-fns2-font-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.bp-faq-next-steps-v2 .bp-fns2__eyebrow-line {
	display: inline-block;
	inline-size: 40px;
	block-size: 1px;
	background: var(--bp-fns2-gold);
}

.bp-faq-next-steps-v2 .bp-fns2__title {
	margin: 0;
	font-family: var(--bp-fns2-font-display);
	font-weight: 400;
	font-size: clamp(34px, 4.4vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--bp-fns2-text);
}

.bp-faq-next-steps-v2 .bp-fns2__intro {
	margin: 0;
	font-family: var(--bp-fns2-font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--bp-fns2-soft);
	max-inline-size: 640px;
}

/* =========================================================
 * Grid (4-up desktop, 2-up tablet, 1-up mobile)
 * ========================================================= */
.bp-faq-next-steps-v2 .bp-fns2__grid {
	inline-size: 100%;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}

/* =========================================================
 * Tile
 * ========================================================= */
.bp-faq-next-steps-v2 .bp-fns2__tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	min-inline-size: 0;
	background: var(--bp-fns2-tile-bg);
	border: 1px solid var(--bp-fns2-tile-bd);
	border-radius: 16px;
	color: inherit;
	text-decoration: none;
	overflow: hidden;
	transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
				border-color 0.35s ease,
				background-color 0.35s ease;
}

.bp-faq-next-steps-v2 .bp-fns2__tile:hover,
.bp-faq-next-steps-v2 .bp-fns2__tile:focus-visible {
	transform: translateY(-2px);
	border-color: rgba(55, 79, 55, 0.22);
	background: #F7F1E2;
	outline: none;
}

.bp-faq-next-steps-v2 .bp-fns2__tile-inner {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 22px;
	block-size: 100%;
	min-block-size: 100%;
}

/* ---- Tile top: number ---- */
.bp-faq-next-steps-v2 .bp-fns2__tile-top {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.bp-faq-next-steps-v2 .bp-fns2__tile-number {
	font-family: var(--bp-fns2-font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--bp-fns2-gold);
	line-height: 1;
}

/* ---- Tile body: name + description ---- */
.bp-faq-next-steps-v2 .bp-fns2__tile-body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-block-size: 0;
}

.bp-faq-next-steps-v2 .bp-fns2__tile-name {
	margin: 0;
	font-family: var(--bp-fns2-font-body);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.2;
	letter-spacing: -0.005em;
	color: var(--bp-fns2-text);
	word-break: break-word;
}

.bp-faq-next-steps-v2 .bp-fns2__tile-desc {
	margin: 0;
	font-family: var(--bp-fns2-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--bp-fns2-soft);
	word-break: break-word;
}

/* ---- Tile bottom CTA pill ---- */
.bp-faq-next-steps-v2 .bp-fns2__tile-cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	background: rgba(244, 236, 221, 0.7);
	border: 1px solid rgba(55, 79, 55, 0.14);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.10em;
	color: var(--bp-fns2-green);
	line-height: 1;
	align-self: flex-start;
	margin-block-start: auto;
	transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.bp-faq-next-steps-v2 .bp-fns2__tile-cta-dot {
	inline-size: 6px;
	block-size: 6px;
	background: var(--bp-fns2-gold);
	border-radius: 999px;
	flex: 0 0 auto;
	transition: background-color 0.3s ease;
}

.bp-faq-next-steps-v2 .bp-fns2__tile-cta-label {
	white-space: nowrap;
}

.bp-faq-next-steps-v2 .bp-fns2__tile-cta-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bp-fns2-green);
	transition: transform 0.3s ease, color 0.3s ease;
}
.bp-faq-next-steps-v2 .bp-fns2__tile-cta-arrow svg {
	display: block;
	stroke: currentColor;
}

[dir="rtl"] .bp-faq-next-steps-v2 .bp-fns2__tile-cta-arrow,
[lang="ar"] .bp-faq-next-steps-v2 .bp-fns2__tile-cta-arrow {
	transform: scaleX(-1);
}

.bp-faq-next-steps-v2 .bp-fns2__tile:hover .bp-fns2__tile-cta,
.bp-faq-next-steps-v2 .bp-fns2__tile:focus-visible .bp-fns2__tile-cta {
	background: var(--bp-fns2-green);
	color: var(--bp-fns2-bg);
	border-color: var(--bp-fns2-green);
}
.bp-faq-next-steps-v2 .bp-fns2__tile:hover .bp-fns2__tile-cta-arrow,
.bp-faq-next-steps-v2 .bp-fns2__tile:focus-visible .bp-fns2__tile-cta-arrow {
	color: var(--bp-fns2-bg);
	transform: translateX(3px);
}
[dir="rtl"] .bp-faq-next-steps-v2 .bp-fns2__tile:hover .bp-fns2__tile-cta-arrow,
[lang="ar"]  .bp-faq-next-steps-v2 .bp-fns2__tile:hover .bp-fns2__tile-cta-arrow,
[dir="rtl"] .bp-faq-next-steps-v2 .bp-fns2__tile:focus-visible .bp-fns2__tile-cta-arrow,
[lang="ar"]  .bp-faq-next-steps-v2 .bp-fns2__tile:focus-visible .bp-fns2__tile-cta-arrow {
	transform: scaleX(-1) translateX(3px);
}

/* =========================================================
 * Tablet (769-1024) — 2 columns
 * ========================================================= */
@media ( min-width: 769px ) and ( max-width: 1024px ) {
	.bp-faq-next-steps-v2 .bp-fns2__title { font-size: 38px; }
	.bp-faq-next-steps-v2 .bp-fns2__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bp-faq-next-steps-v2 .bp-fns2__tile-name { font-size: 18px; }
}

/* =========================================================
 * Mobile (<= 768) — 1 column
 * ========================================================= */
@media ( max-width: 768px ) {
	.bp-faq-next-steps-v2 { padding-block: 56px; }
	.bp-faq-next-steps-v2 .bp-fns2__inner {
		padding-inline: clamp(16px, 5vw, 22px);
		gap: 32px;
	}
	.bp-faq-next-steps-v2 .bp-fns2__head { gap: 12px; }
	.bp-faq-next-steps-v2 .bp-fns2__title { font-size: 30px; line-height: 1.14; }
	.bp-faq-next-steps-v2 .bp-fns2__intro { font-size: 15px; }
	.bp-faq-next-steps-v2 .bp-fns2__eyebrow { font-size: 11px; letter-spacing: 0.18em; }
	.bp-faq-next-steps-v2 .bp-fns2__eyebrow-line { inline-size: 28px; }

	.bp-faq-next-steps-v2 .bp-fns2__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}
	.bp-faq-next-steps-v2 .bp-fns2__tile-inner {
		padding: 22px;
		gap: 14px;
	}
	.bp-faq-next-steps-v2 .bp-fns2__tile-name { font-size: 18px; }
	.bp-faq-next-steps-v2 .bp-fns2__tile-desc { font-size: 13.5px; }
}

/* =========================================================
 * ≤ 480
 * ========================================================= */
@media ( max-width: 480px ) {
	.bp-faq-next-steps-v2 { padding-block: 48px; }
	.bp-faq-next-steps-v2 .bp-fns2__title { font-size: 26px; }
	.bp-faq-next-steps-v2 .bp-fns2__tile-inner { padding: 20px; }
	.bp-faq-next-steps-v2 .bp-fns2__tile-name { font-size: 17px; }
	.bp-faq-next-steps-v2 .bp-fns2__tile-cta-label { font-size: 11.5px; letter-spacing: 0.08em; }
}

/* =========================================================
 * ≤ 390
 * ========================================================= */
@media ( max-width: 390px ) {
	.bp-faq-next-steps-v2 { padding-block: 44px; }
	.bp-faq-next-steps-v2 .bp-fns2__title { font-size: 23px; }
	.bp-faq-next-steps-v2 .bp-fns2__tile-inner { padding: 18px; gap: 12px; }
	.bp-faq-next-steps-v2 .bp-fns2__tile-name { font-size: 16px; }
	.bp-faq-next-steps-v2 .bp-fns2__tile-cta { padding: 9px 12px; gap: 8px; }
}

/* =========================================================
 * ≤ 360
 * ========================================================= */
@media ( max-width: 360px ) {
	.bp-faq-next-steps-v2 .bp-fns2__title { font-size: 21px; }
	.bp-faq-next-steps-v2 .bp-fns2__tile-inner { padding: 16px; }
	.bp-faq-next-steps-v2 .bp-fns2__tile-name { font-size: 15.5px; }
	.bp-faq-next-steps-v2 .bp-fns2__tile-desc { font-size: 13px; }
}

/* =========================================================
 * Arabic / RTL
 * ========================================================= */
[lang="ar"] .bp-faq-next-steps-v2,
[dir="rtl"] .bp-faq-next-steps-v2 {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
}

[lang="ar"] .bp-faq-next-steps-v2 .bp-fns2__title,
[dir="rtl"] .bp-faq-next-steps-v2 .bp-fns2__title {
	font-family: var(--bp-font-arabic, 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
}

[lang="ar"] .bp-faq-next-steps-v2 .bp-fns2__tile-name,
[dir="rtl"] .bp-faq-next-steps-v2 .bp-fns2__tile-name {
	font-weight: 700;
	letter-spacing: 0;
}

/* =========================================================
 * Reduced motion
 * ========================================================= */
@media ( prefers-reduced-motion: reduce ) {
	.bp-faq-next-steps-v2 [data-bp-stagger],
	.bp-faq-next-steps-v2 .bp-fns2__tile,
	.bp-faq-next-steps-v2 .bp-fns2__tile-cta,
	.bp-faq-next-steps-v2 .bp-fns2__tile-cta-arrow {
		transform: none !important;
		animation: none !important;
		transition: none !important;
	}
}