/**
 * Zone Six Worlds — ad slots.
 *
 * Three rules from the ad map, and all three are here rather than in the PHP:
 *
 *   1. Reserve the height before the ad loads, so the page never jumps. That is what
 *      --zsw-ad-h is for: min-height is set from it, per slot, from markup — so the box
 *      is the right size on the first paint, before AdSense has answered.
 *   2. Plain Zone Six style with an "Advertisement" label. No world skin ever reaches
 *      in here, which is why every rule is written to beat a .zsw-w-* ancestor.
 *   3. A slot with no fill collapses rather than leaving a labelled hole.
 */

.zsw-ad {
	display: block;
	position: relative;
	margin: clamp(20px, 3vw, 36px) auto;
	padding: 0;
	max-width: 100%;
	text-align: center;

	/* The reserved height, plus room for the label. */
	min-height: calc(var(--zsw-ad-h, 250px) + 22px);

	/* Deliberately neutral: an ad must not look like a Zone Six panel, and must not
	 * pick up a world's border, shadow or font from an ancestor skin. */
	background: #f1f0ec;
	border: 0;
	box-shadow: none;
	font-family: 'Barlow', 'Segoe UI', system-ui, sans-serif;
	color: #75717f;
}

.zsw-ad__label {
	display: block;
	padding: 5px 0 3px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #9a96a3;
	line-height: 1;
}

.zsw-ad__unit {
	display: block;
	min-height: var(--zsw-ad-h, 250px);
	overflow: hidden;
}

.zsw-ad__unit ins,
.zsw-ad__unit iframe {
	display: block;
	margin: 0 auto;
	max-width: 100%;
}

/**
 * Unfilled slots hide themselves.
 *
 * AdSense sets data-ad-status="unfilled" on the <ins> when it has nothing to serve. In
 * that state the reserved height is dead space with a label on it, so the whole aside
 * collapses. :has() is doing the work; a browser without it simply keeps the reserved
 * box, which is the old behaviour and not a break.
 */
.zsw-ad:has(> .zsw-ad__unit > ins[data-ad-status="unfilled"]) {
	display: none;
}

/* Sticky sidebar slots. The offset clears Soledad's sticky header. */
.zsw-ad--sticky {
	position: sticky;
	top: 90px;
	margin-inline: 0;
}

@media (max-width: 782px) {
	/* The map gives both sidebar slots "none" on a phone. */
	.zsw-ad--desktop-only {
		display: none;
	}

	.zsw-ad {
		min-height: calc(var(--zsw-ad-h-m, var(--zsw-ad-h, 250px)) + 22px);
	}

	.zsw-ad__unit {
		min-height: var(--zsw-ad-h-m, var(--zsw-ad-h, 250px));
	}

	.zsw-ad--sticky {
		position: static;
	}
}