/* Brave Ronil — Family Voices (testimonial).
   Desktop  (node 5014:14151): left column [heading, desc, quote card] + tall
            right image spanning the column height (bottom-aligned).
   Tablet   (node 5014:14424): row1 [heading | desc], row2 [quote card | image].
   The .brb-fv__top / .brb-fv__bottom wrappers are display:contents on desktop
   (so the four blocks act as direct grid items) and real flex rows on tablet. */
.brb-fv {
	/* Break out of any boxed Elementor container to full viewport width so the
	   layout always renders at the Figma widths instead of compressing. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: #ffffff;
	/* No outer side padding: width comes from .brb-fv__inner (max 1280 + 32px),
	   matching the other sections. The extra 80px made it narrower below 1440. */
	padding: 96px 0;
	box-sizing: border-box;
	overflow: hidden;
}
.brb-fv *,
.brb-fv *::before,
.brb-fv *::after {
	box-sizing: border-box;
}

/* ---- Desktop grid ---- */
.brb-fv__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 64px;
	row-gap: 0;
}
.brb-fv__top,
.brb-fv__bottom {
	display: contents; /* children become direct grid items on desktop */
}
.brb-fv__details {
	grid-column: 1;
	grid-row: 1;
	width: 519px;
	max-width: 100%;
	margin-bottom: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}
.brb-fv__desc {
	grid-column: 1;
	grid-row: 2;
	width: 519px;
	max-width: 100%;
	margin: 0 0 64px;
}
.brb-fv__quote-card {
	grid-column: 1;
	grid-row: 3;
	width: 100%;
}
.brb-fv__media {
	grid-column: 2;
	grid-row: 1 / 4;
	align-self: end;
	/* Fill the grid column. Without an explicit width the height+aspect-ratio
	   give the box an intrinsic ~575px width, which overflows the narrower
	   column on laptop and gets clipped by the section's overflow:hidden. */
	width: 100%;
	max-width: 100%;
	height: 504px !important; /* Figma; !important so theme img rules can't collapse it */
	aspect-ratio: 628 / 550; /* fallback when height is relaxed below desktop */
}

/* Badge */
.brb-fv__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.brb-fv__dot {
	width: 12px;
	height: 12px;
	border-radius: 9999px;
	background: #ff4405;
	flex: 0 0 auto;
}

/* Typography — scoped under .brb-fv (raised specificity) so theme / Elementor
   global font styles on h2/p cannot override the Figma type. */
.brb-fv .brb-fv__badge-txt {
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	color: #181d27;
}
.brb-fv .brb-fv__title {
	margin: 0;
	font-family: "Bitter", serif;
	font-weight: 600;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: -0.96px;
	color: #0a190d;
}
.brb-fv .brb-fv__desc {
	font-family: "Inter Tight", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #414651;
}

/* Quote card */
.brb-fv__quote-card {
	display: flex;
	align-items: center;
	gap: 39px;
	background: #f5f5ff;
	border-radius: 16px;
	padding: 16px 16px 16px 40px;
}
.brb-fv__quote-body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 17px;
	align-items: flex-start;
}
.brb-fv .brb-fv__quote {
	margin: 0;
	font-family: "Inter Tight", sans-serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 30px;
	color: #181d27;
}
.brb-fv .brb-fv__cite {
	margin: 0;
	font-family: "Bitter", serif;
	font-weight: 600;
	font-size: 16px;
	line-height: 24px;
	color: #a4a7ae;
}
.brb-fv__quote-img {
	flex: 0 0 auto;
	width: 195px;
	height: 209px;
	border-radius: 12px;
	overflow: hidden;
}
.brb-fv__quote-img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* Main image */
.brb-fv__media {
	border-radius: 16px;
	overflow: hidden;
}
.brb-fv__media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
}

/* ---- Tablet (node 5014:14424) ---- */
@media (max-width: 1024px) {
	.brb-fv {
		padding: 80px 32px;
	}
	.brb-fv__inner {
		max-width: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 48px;
	}

	/* Row 1: heading block | description, bottom-aligned */
	.brb-fv__top {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		gap: 16px;
		width: 100%;
	}
	.brb-fv__details {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		margin: 0;
		gap: 8px;
	}
	.brb-fv__desc {
		flex: 0 0 356px;
		width: 356px;
		max-width: 46%;
		margin: 0;
	}
	.brb-fv .brb-fv__title {
		font-size: 36px;
		line-height: 44px;
		letter-spacing: -0.72px;
	}
	.brb-fv .brb-fv__desc {
		font-size: 16px;
		line-height: 24px;
	}

	/* Row 2: quote card (stacked) | image, both 411 tall */
	.brb-fv__bottom {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		gap: 48px;
		width: 100%;
	}
	.brb-fv__quote-card {
		flex: 0 0 377px;
		width: 377px;
		height: 411px;
		flex-direction: column;
		align-items: flex-start;
		/* top-aligned with fixed 39px gap → image lands at the Figma y (186)
		   regardless of quote length, instead of floating when centered */
		justify-content: flex-start;
		gap: 39px;
		padding: 16px;
	}
	.brb-fv__quote-body {
		width: 100%;
		flex: 0 0 auto;
	}
	.brb-fv__quote-img {
		width: 100%;
		height: 209px;
	}
	.brb-fv__media {
		flex: 1 1 0;
		min-width: 0;
		align-self: stretch;
		height: 411px !important;
		aspect-ratio: auto;
	}
}

/* ---- Mobile (≤767px) ---- node 5014:14287: single-column stack, blocks gap
   48; quote card stacks quote over a full-width 209px image; main image fills
   width at the 628/550 ratio. Container px16 py64. */
@media (max-width: 767px) {
	.brb-fv {
		padding: 64px 16px;
	}
	.brb-fv__inner {
		gap: 48px;
	}
	.brb-fv__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}
	.brb-fv__details,
	.brb-fv__desc {
		flex: none;
		width: 100%;
		max-width: 100%;
	}
	.brb-fv__bottom {
		flex-direction: column;
		gap: 48px;
	}
	/* Card sizes to its content (quote + 39px gap + 209px image), NOT the
	   tablet's fixed 411px — otherwise the card is too tall on a phone. */
	.brb-fv__quote-card {
		flex: none;
		width: 100%;
		height: auto;
		justify-content: flex-start;
		gap: 39px;
		padding: 16px;
	}
	.brb-fv__quote-img {
		width: 100%;
		height: 209px;
	}
	/* height:auto + aspect-ratio defines the box height ONLY when the img is out
	   of flow. With the img in-flow at height:100% the two depend on each other
	   and the box collapses (image vanishes). Absolutely-positioned img breaks
	   the loop and fills the 628/550 frame (cover), matching Figma. */
	.brb-fv__media {
		position: relative;
		width: 100%;
		height: auto !important;
		aspect-ratio: 628 / 550;
		flex: 1;
	}
	.brb-fv__media .brb-fv__photo {
		position: absolute;
		inset: 0;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover;
	}
	.brb-fv .brb-fv__title {
		font-size: 32px;
		line-height: 40px;
		letter-spacing: 0;
	}
}

/* ---- Large phone / small tablet (575–767) ----
   Full-width quote image scales with the card instead of the fixed 209px used
   below 575px, so it doesn't look too short on wider phones. */
@media (min-width: 575px) and (max-width: 767px) {
	.brb-fv__quote-img {
		height: auto;
		aspect-ratio: 343 / 209;
	}
}