/* Featured card — full-width burgundy frame around a large photo with centered
   overlaid content. Measured: gutter frame padding, 300px→600px image height,
   .15 soft-black scrim, absolutely centered content column. */

.featured-card {
	background-color: var(--color-burgundy-2);
	height: fit-content;
	overflow: hidden;
	padding: var(--grid-col-gutter);
	position: relative;
}

.featured-card__image-wrapper {
	height: 300px;
	margin-bottom: 0;
	position: relative;
	width: 100%;
}
@media screen and (min-width: 1024px) {
	.featured-card__image-wrapper { height: 600px; }
}
.featured-card__image-wrapper::after {
	background-color: var(--color-soft-black);
	bottom: 0;
	content: "";
	height: 100%;
	left: 0;
	opacity: 0.15;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}

.featured-card__image {
	bottom: 0;
	height: 300px;
	left: 0;
	min-height: 210px;
	object-fit: cover;
	position: absolute;
	right: 0;
	top: 0;
	width: 100%;
}
@media screen and (min-width: 1024px) {
	.featured-card__image { height: 600px; }
}

.featured-card__content {
	align-items: center;
	background-color: transparent;
	color: var(--color-soft-white);
	display: flex;
	flex-direction: column;
	left: 50%;
	padding: var(--grid-col-gutter) calc(var(--grid-col-gutter) * 2);
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	z-index: 1;
}
.featured-card__content > * { margin-bottom: 0; margin-top: 15px; }
.featured-card__content > :first-child { margin-top: 0; }
.featured-card__content h2 + *,
.featured-card__content h3 + *,
.featured-card__content h4 + * { margin-top: 10px; }

.featured-card__content p { max-width: var(--wrap-width-large); }

.featured-card--right .featured-card__content {
	left: auto;
	right: 0;
	transform: translate(0, -50%);
}