/* Brave Ronil — Our Impact Journey. Figma node 5698:17290 (desktop, 1440),
   5698:17601 (tablet), 5698:17445 (mobile).
   Left: badge + heading + mission + journey list. Right: 3 cards. */
.brb-ij {
	/* Width 100% (NOT 100vw) — a 100vw bleed overshoots the viewport by the
	   scrollbar width and causes a horizontal scrollbar. Place the widget in a
	   full-width Elementor section to hit the Figma 1440 layout.
	   No overflow:hidden here — it would break the sticky left column. */
	width: 100%;
	background: #fff7f5;
	/* No outer side padding: width is driven by .brb-ij__inner (max 1280 + 32px
	   pad), identical to the other sections (e.g. donation banner). An extra 80px
	   here made this section narrower/misaligned below 1440. */
	padding: 96px 0;
	box-sizing: border-box;
}
.brb-ij *,
.brb-ij *::before,
.brb-ij *::after {
	box-sizing: border-box;
}

.brb-ij__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 32px;
	display: flex;
	gap: 64px;
	align-items: flex-start;
}

/* ---- Left column ---- */
.brb-ij__left {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 64px;
	align-items: flex-start;
}
/* Desktop + tablet (2-col): pin the left column while the right card stack
   scrolls past. Off below 600px where the layout is a single stack. */
@media (min-width: 601px) {
	.brb-ij__left {
		position: sticky;
		top: 120px;
		align-self: flex-start;
	}
}
.brb-ij__intro {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: flex-start;
}
.brb-ij__head {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}
.brb-ij__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.brb-ij__dot {
	width: 12px;
	height: 12px;
	border-radius: 9999px;
	background: #ff4405;
	flex: 0 0 auto;
}
.brb-ij .brb-ij__badge-txt {
	font-family: "Inter Tight", sans-serif;
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	color: #181d27;
}
.brb-ij .brb-ij__title {
	margin: 0;
	max-width: 637px;
	font-family: "Bitter", serif;
	font-weight: 600;
	font-size: 48px;
	line-height: 52px;
	letter-spacing: -0.96px;
	color: #181d27;
}
.brb-ij .brb-ij__mission {
	margin: 0;
	width: 493px;
	max-width: 100%;
	font-family: "Inter Tight", sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #414651;
}

/* Journey list */
.brb-ij__journey {
	width: 346px;
	max-width: 100%;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.brb-ij .brb-ij__journey-label {
	margin: 0;
	font-family: "Inter Tight", sans-serif;
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #181d27;
}
.brb-ij__list {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
}
.brb-ij .brb-ij__list-item {
	margin: 0;
	padding: 16px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	font-family: "Bitter", serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 30px;
	color: #717680;
	transition: color 0.3s ease;
	cursor: pointer;
}
.brb-ij .brb-ij__list-item:hover {
	color: #181d27;
}
.brb-ij .brb-ij__list-item:focus-visible {
	outline: 2px solid #ff4405;
	outline-offset: 2px;
}
.brb-ij .brb-ij__list-item.is-active {
	color: #181d27;
}

/* ---- Right column ---- */
.brb-ij__right {
	flex: 0 0 519px;
	width: 519px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Cards */
.brb-ij__card {
	width: 100%;
	background: #ffffff;
	border-radius: 16px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 40px;
	align-items: flex-start;
}
.brb-ij__card--dark {
	background: #0a190d;
}
.brb-ij__card-icon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
}
.brb-ij__card-icon img {
	display: block;
	width: 24px !important;
	height: 24px !important;
}
.brb-ij__card-text {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.brb-ij .brb-ij__card-title {
	margin: 0;
	font-family: "Bitter", serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 30px;
	color: #181d27;
}
.brb-ij .brb-ij__card-desc {
	margin: 0;
	font-family: "Inter Tight", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #414651;
}
.brb-ij__card--dark .brb-ij__card-title,
.brb-ij__card--dark .brb-ij__card-desc {
	color: #ffffff;
}

/* ---- Laptop (1025–1366px) — even 50/50 split like the donation banner.
   Left text column and right cards column each take half the row.
   (Large desktop / 1440 keeps the fixed 519px cards column above.) ---- */
@media (min-width: 1025px) and (max-width: 1366px) {
	.brb-ij__inner {
		gap: 48px;
	}
	.brb-ij__left {
		flex: 1 1 50%;
		min-width: 0;
	}
	.brb-ij__right {
		flex: 1 1 50%;
		min-width: 0;
	}
}

/* ---- Tablet (node 5698:17601) — keeps the two columns side by side ---- */
@media (max-width: 1024px) {
	.brb-ij {
		padding: 80px 32px;
	}
	.brb-ij__inner {
		gap: 48px;
		padding: 0;
	}
	.brb-ij__left {
		gap: 48px;
	}
	.brb-ij__right {
		flex: 1 1 0;
		width: auto;
	}
	.brb-ij__intro {
		gap: 16px;
	}
	.brb-ij__head {
		gap: 8px;
	}
	.brb-ij .brb-ij__title {
		font-size: 36px;
		line-height: 44px;
		letter-spacing: -0.72px;
	}
	.brb-ij .brb-ij__mission {
		width: 100%;
		font-size: 16px;
		line-height: 24px;
	}
	.brb-ij__journey {
		width: 100%;
	}

	/* "Through that work" card runs longest — Figma tightens its icon, its
	   icon→text gap and its title one step on tablet and mobile. */
	.brb-ij__card--compact {
		gap: 24px;
	}
	.brb-ij__card--compact .brb-ij__card-icon,
	.brb-ij__card--compact .brb-ij__card-icon img {
		width: 20px !important;
		height: 20px !important;
	}
	.brb-ij .brb-ij__card--compact .brb-ij__card-title {
		font-size: 18px;
		line-height: 28px;
	}
}

/* ---- Mobile (node 5698:17445): single column stack ---- */
@media (max-width: 600px) {
	.brb-ij {
		padding: 64px 16px;
	}
	.brb-ij__inner {
		flex-direction: column;
		gap: 48px;
	}
	.brb-ij__left,
	.brb-ij__right {
		flex: none;
		width: 100%;
	}
	.brb-ij .brb-ij__title {
		font-size: 32px;
		line-height: 40px;
		letter-spacing: 0;
	}
}