/**
 * Pre-Jesus History band and illustrated sections.
 * The History band is a full-width dark row: heading, then the paragraph.
 * Illustrated sections keep the image on the left and the text on the right.
 * Both stack when the column is narrow. A right-to-left page mirrors the row.
 * The same rules apply in the Visual editor (body.mce-content-body).
 */

.pre-jesus-history {
	display: flex;
	align-items: flex-start;
	gap: 80px;
	box-sizing: border-box;
	padding: 60px 0 80px;
	background: #083b50;
	color: rgba(255, 255, 255, 0.85);
}

.bs-role-pre_jesus .entry__content > .pre-jesus-history {
	margin-block-start: -70px;
	box-shadow: 0 0 0 100vmax #083b50;
	clip-path: inset(0 -100vmax);
}

.pre-jesus-history > h2,
.entry__content .pre-jesus-history > h2,
.mce-content-body .pre-jesus-history > h2 {
	flex: 0 0 320px;
	max-width: 320px;
	margin: 25px 0 0;
	color: #fff;
	font-family: var(--bs-font-serif, "Merriweather", Georgia, serif);
	font-size: 36px;
	font-weight: 700;
	line-height: 48px;
}

.pre-jesus-history__text {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: 26px;
	font-size: 18px;
	line-height: 29px;
}

.entry__content .pre-jesus-history__text p,
.mce-content-body .pre-jesus-history__text p {
	margin: 0;
	padding: 0;
	color: rgba(255, 255, 255, 0.85);
	font-size: 18px;
	line-height: 29px;
}

.entry__content .pre-jesus-history__text p + p,
.mce-content-body .pre-jesus-history__text p + p {
	padding-block-start: 16px;
}

@media (max-width: 1024px) {
	.pre-jesus-history > h2,
	.entry__content .pre-jesus-history > h2,
	.mce-content-body .pre-jesus-history > h2 {
		flex-basis: 260px;
		max-width: 260px;
	}
}

@media (max-width: 768px) {
	.bs-role-pre_jesus .entry__content > .pre-jesus-history {
		margin-block-start: -40px;
	}

	.pre-jesus-history {
		flex-direction: column;
		gap: 24px;
	}

	.pre-jesus-history > h2,
	.entry__content .pre-jesus-history > h2,
	.mce-content-body .pre-jesus-history > h2,
	.pre-jesus-history__text {
		flex: none;
		width: 100%;
		max-width: 100%;
		padding-top: 0;
	}
}

.pre-jesus-section {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 60px;
	padding: 40px 0 48px;
}

.pre-jesus-section__media {
	flex: 0 0 450px;
	max-width: 450px;
}

.pre-jesus-section__media img {
	display: block;
	width: 100%;
	height: 320px;
	max-width: 100%;
	object-fit: cover;
}

.pre-jesus-section__text {
	flex: 1 1 260px;
	min-width: 260px;
}

.entry__content .pre-jesus-section__text > h3,
.mce-content-body .pre-jesus-section__text > h3 {
	margin-block: 0 18px;
	font-size: 36px;
	font-weight: 700;
	line-height: 46px;
}

.bs-role-pre_jesus .entry__content hr {
	clear: both;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid rgba(110, 110, 110, 0.2);
}

.mce-content-body hr {
	clear: both;
	height: 0;
	margin: 28px 0;
	border: 0;
	border-top: 1px solid rgba(110, 110, 110, 0.35);
}

@media (max-width: 1024px) {
	.pre-jesus-section {
		gap: 44px;
	}

	.pre-jesus-section__media {
		flex-basis: 360px;
		max-width: 360px;
	}
}

@media (max-width: 768px) {
	.pre-jesus-section {
		flex-direction: column;
		gap: 24px;
		padding: 28px 0 32px;
	}

	.pre-jesus-section__media,
	.pre-jesus-section__text {
		flex: none;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.entry__content .pre-jesus-section__text > h3,
	.mce-content-body .pre-jesus-section__text > h3 {
		font-size: 26px;
		line-height: 36px;
	}
}