/**
 * Featured post on the Industry Insights blog index.
 * Desktop: text on the left (vertically centered), image on the right.
 * Mobile: image on top, text below.
 */

.mc-featured-post {
	/* Equal breathing room above and below the block. padding-top is used
	   (not margin) so it cannot margin-collapse into the header above.
	   Space above = padding-top; space below = padding-bottom + margin-bottom. */
	--mc-gap: clamp(2rem, 4vw, 3rem);
	/* 15px extra below to add space before the row of posts. */
	margin: 0 0 calc(var(--mc-gap) / 2 + 15px);
	padding: var(--mc-gap) 0 calc(var(--mc-gap) / 2);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.mc-featured-post .mc-featured-entry {
	margin: 0;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
	box-shadow: none;
}

.mc-featured-post .mc-featured-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(1.25rem, 3vw, 2.25rem);
}

/* Text column, left. The copy block is vertically centred in the column. */
.mc-featured-post .mc-featured-content {
	flex: 1 1 52%;
	min-width: 290px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	order: 1;
}

/* Image column, right. Original width, shown at its natural proportions and
   centred vertically so it lines up with the centred text. */
.mc-featured-post .mc-featured-media {
	flex: 1 1 44%;
	min-width: 300px;
	display: flex;
	align-items: center;
	order: 2;
}

/* Cap the image height so it does not tower over the text. Taller images are
   centre-cropped by clipping the overflow (bulletproof across browsers, unlike
   object-fit with an auto height); shorter images still show in full. */
.mc-featured-post .mc-featured-image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-height: 400px;
	overflow: hidden;
}

.mc-featured-post .mc-featured-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* When the featured post has no image, let the copy use the full width. */
.mc-featured-post.mc-no-image .mc-featured-content {
	flex-basis: 100%;
}

/* The copy is a normal block-flow wrapper so margins between the header,
   excerpt, and read-more collapse exactly as they do in the grid cards. */
.mc-featured-post .mc-featured-copy > * {
	margin-left: 0;
	margin-right: 0;
}

/* Stack on smaller screens: image first, then text. */
@media (max-width: 767px) {
	.mc-featured-post .mc-featured-inner {
		flex-direction: column;
	}

	.mc-featured-post .mc-featured-media {
		order: -1;
		width: 100%;
	}

	.mc-featured-post .mc-featured-content {
		width: 100%;
	}
}