/* Homepage leadership quotes (Media & Text blocks with the "quote-feature" class).
   Remove this file (and its enqueue/editor-style lines in functions.php) to drop the styling. */
.wp-block-media-text.quote-feature {
	align-items: stretch;
	min-height: 520px;
	overflow: hidden;
	border-radius: 10px;
	background-color: #f04f5c0d;
}

.quote-feature .wp-block-media-text__media {
	align-self: stretch;
	position: relative;
	margin: 0;
	min-height: 100%;
}

.quote-feature .wp-block-media-text__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	border-radius: 0;
}

.quote-feature .wp-block-media-text__content {
	align-self: center;
	padding: clamp(1.75rem, 4vw, 3.5rem);
}

.quote-feature .quote-body {
	margin: 0;
	padding: 0;
	max-width: none;
}

.quote-feature .quote-mark {
	margin: 0 0 0.5rem;
	padding: 0;
	height: 3.25rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 7rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--custom-orange, #ef505d);
}

.quote-feature .quote-text {
	margin: 0 0 2rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 500;
	line-height: 1.3;
	color: var(--wp--preset--color--custom-dark-blue, #0d314e);
}

.quote-feature .quote-person {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
	padding: 0;
}

.quote-feature .quote-person figure {
	flex: none;
	margin: 0;
}

.quote-feature .quote-person p {
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.4;
	color: var(--wp--preset--color--custom-dark-blue, #0d314e);
}

@media (max-width: 600px) {
	.wp-block-media-text.quote-feature {
		min-height: 0;
	}

	.quote-feature .wp-block-media-text__media {
		min-height: 0;
	}

	.quote-feature .wp-block-media-text__media img {
		position: static;
		height: auto;
		max-height: 320px;
	}
}

/* "Make an impact today" donation panel: same split-panel layout as the quotes, in dark blue. */
.wp-block-media-text.impact-feature {
	background-color: var(--wp--preset--color--custom-dark-blue, #0d314e);
}

.impact-feature .impact-body {
	margin: 0;
	padding: 0;
	max-width: none;
}

.impact-feature .impact-title {
	margin: 0 0 0.75rem;
	padding: 0;
	color: #fff;
}

.impact-feature .impact-text {
	margin: 0 0 2rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	color: #fff;
}

.impact-feature .wp-block-buttons {
	margin: 0;
}

.impact-feature .wp-block-button__link {
	padding: 1rem 2rem;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	letter-spacing: 0.04em;
}

.impact-feature .wp-block-button__link img {
	width: 18px;
	height: auto;
}

/* Newsletter panel: same split-panel layout, built around a Cover block so the photo caption is kept. */
.news-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 520px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--wp--preset--color--custom-dark-blue, #0d314e);
}

.news-feature .news-photo {
	order: 2;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	border-radius: 0;
}

.news-feature .news-photo img {
	object-fit: cover;
}

.news-feature .news-photo .wp-block-cover__inner-container {
	width: 100%;
	padding: 0.9rem;
	text-align: left;
}

/* Photo caption as a small pill */
.news-feature .news-photo .wp-block-cover__inner-container p {
	display: inline-block;
	max-width: 100%;
	margin: 0;
	padding: 0.4rem 0.8rem;
	border-radius: 6px;
	background-color: rgba(13, 49, 78, 0.88);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
	text-align: left;
	color: #fff;
}

.news-feature .news-body {
	align-self: center;
	margin: 0;
	padding: clamp(1.75rem, 4vw, 3.5rem);
	max-width: none;
}

.news-feature .news-title {
	margin: 0 0 0.75rem;
	padding: 0;
	color: #fff;
}

.news-feature .news-text {
	margin: 0 0 1.75rem;
	padding: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	color: #fff;
}

@media (max-width: 600px) {
	.news-feature {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.news-feature .news-photo {
		order: 0;
		min-height: 240px;
	}
}
