/*
 * MRN mobile sponsor slots.
 *
 * The box reserves the creative's exact height before the image arrives, so
 * these cost nothing on the CLS budget. Hidden at >=1019px — the same
 * breakpoint the sidebar uses — which is the backstop for a mobile UA on a
 * wide viewport; the PHP already declines to render on desktop.
 */

.mrn-mad {
	display: block;
	margin: 24px auto;
	width: 100%;
	/*
	 * Fluid, not pinned to the creative's native 320px. The theme's mobile
	 * content column tracks the viewport, so a fixed 320px matched it exactly on
	 * a 390px phone but sat 31px narrower than the surrounding cards on a 430px
	 * one, which read as a misaligned block rather than a deliberate one.
	 *
	 * Capped at 480px because these are hidden only above 1019px: a tablet on a
	 * mobile UA has a content column several hundred pixels wider than the
	 * creatives were designed for, and stretching a 320px layout across it looks
	 * worse than centring it. Sources are rendered at 960px so they stay sharp
	 * anywhere in that range.
	 */
	max-width: 480px;
	text-align: center;
}

.mrn-mad__label {
	display: block;
	margin-bottom: 4px;
	color: var(--mrn-text-secondary, #5a5a6e);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	line-height: 1;
}

/*
 * Height is reserved on the link, not the image, so the space is held even
 * while LiteSpeed's lazy-loader is still holding a placeholder in the <img>.
 */
.mrn-mad__link {
	display: block;
	width: 100%;
	aspect-ratio: var(--mrn-mad-w, 320) / var(--mrn-mad-h, 50);
	min-height: calc(var(--mrn-mad-h, 50) * 1px);
	background: var(--mrn-surface, #f5f7fa);
	border-radius: 4px;
	overflow: hidden;
}

.mrn-mad__link img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Give the in-article rectangle a little more separation from body copy. */
.mrn-mad--inline {
	margin: 32px auto;
}

@media (min-width: 1019px) {
	.mrn-mad {
		display: none;
	}
}

/*
 * Header banner. Tighter margins than the in-content slots: it sits between the
 * masthead and the breaking-news bar, where 24px of air on both sides reads as
 * a layout gap rather than as separation.
 */
.mrn-mad--header {
	margin: 8px auto;
}