/**
 * Ad slot styling (brief §7).
 *
 * The ONLY job here: reserve space so ads never cause layout shift (CLS), keep
 * them clearly labelled and visually subordinate to content, and cap their
 * footprint. Loaded only when AdSense is enabled (see inc/enqueue.php).
 *
 * Reserved heights match common AdSense responsive unit heights; the ad fills
 * the reserved box, so nothing below it jumps when the ad renders.
 */

.ug-ad {
	display: block;
	margin: 2rem auto;
	max-width: 100%;
	text-align: center;
	/* Keep ads visually quiet — a subtle frame, not a billboard. */
}

.ug-ad__label {
	display: block;
	font-size: .65rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ug-muted);
	margin-bottom: .35rem;
}

/* Top leaderboard: full-width, centred, and deliberately SHORT so it never
   buries the headline or wrecks CWV. Reserved height = zero CLS. */
.ug-ad-leaderboard-wrap {
	width: 100%;
	background: var(--ug-surface-alt);
	border-bottom: 1px solid var(--ug-border);
}
.ug-ad--top_leaderboard {
	margin: 0 auto;
	padding: 6px 0;
	max-width: 970px;        /* Standard leaderboard width. */
	min-height: 100px;       /* 728x90 + label on desktop/tablet. */
}
@media (max-width: 767px) {
	.ug-ad--top_leaderboard { min-height: 60px; }  /* 320x50 mobile banner — short on purpose. */
}

/* Reserved heights per placement → zero CLS. The min-height is the contract. */
.ug-ad--after_intro,
.ug-ad--before_related {
	min-height: 280px;          /* Typical responsive in-content unit. */
	max-width: var(--ug-readw);
}
.ug-ad--mid_article {
	min-height: 280px;
	max-width: var(--ug-readw);
}
.ug-ad--sidebar_sticky {
	/* Standard 300x250 rather than a big 300x600 skyscraper — the owner wants
	   ads to be the main earner but kept modest to protect load speed. If speed
	   headroom allows and you want more revenue, raise this to 600px (300x600). */
	min-height: 280px;
	max-width: 300px;
	margin: 0 0 1.5rem;
}

/* The lazy wrapper keeps the reserved height before the ad loads. */
.ug-ad__lazy {
	min-height: inherit;
	display: block;
}
.ug-ad ins.adsbygoogle {
	display: block;
	min-height: inherit;
}

/* Density guard: never let an in-content ad dominate the viewport. */
@media (max-width: 599px) {
	.ug-ad--after_intro,
	.ug-ad--mid_article,
	.ug-ad--before_related { min-height: 250px; }
}

/* Hide empty/unfilled units so we don't show a labelled blank box. */
.ug-ad ins.adsbygoogle[data-ad-status="unfilled"] { display: none; }
.ug-ad:has(ins[data-ad-status="unfilled"]) .ug-ad__label { display: none; }