/*
 * MRN sponsor slots: mobile slots (mrn-mobile-ads.php) and the desktop header
 * banners (mrn-desktop-ads.php).
 *
 * The box reserves the creative's exact height before the image arrives, so
 * these cost nothing on the CLS budget.
 *
 * Which set shows is decided HERE, by viewport width, and nowhere else: mobile
 * slots below 1019px (the breakpoint the sidebar uses), desktop header banners
 * from 1019px up. Both sets are in every page's markup on purpose. The Hostinger
 * CDN caches HTML in front of LiteSpeed without a device vary, so any server-side
 * device check ends up serving one device's markup to everyone.
 */

.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;
}

/*
 * The header banner's <img> sits in a <picture> (its desktop-width source is a
 * blank GIF). Without this the inline <picture> breaks the img's height:100%
 * chain and the reserved box collapses around a zero-height image.
 */
.mrn-mad__link picture {
	display: block;
	width: 100%;
	height: 100%;
}

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

/* Desktop header banners: the mirror image of the rule above. */
.mrn-desk-ad picture {
	display: block;
}

@media (max-width: 1018px) {
	.mrn-desk-ad {
		display: none !important;
	}
}

/*
 * 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;
}

/*
 * Header banner gutters come entirely from .td-container, which already
 * carries both the theme's outer gutter and the content column's inner
 * padding. Measured at 390px and 430px viewports, that alone puts the banner
 * on exactly the article text width (311/311 and 351/351), so no extra padding
 * belongs here — adding 20px a side made it 40px narrower than body copy.
 */