/*
 * AdvertServe ad slots. Loaded by inc/advertserve.php.
 *
 * Ported from the ad rules in the theme's old compiled main.css
 * (archived July 2026, main.css?ver=202607061430), plus empty-slot hiding.
 */

@keyframes ad-spin {
	to { transform: rotate(360deg); }
}

.advertserve-container {
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 1rem auto !important;
	max-width: 100%;
	overflow: visible;
	position: relative;
	text-align: center;
}

/* Super leaderboard: full-width white bar under the header, same width as the page container. */
#page > .advertserve-container[data-size="super-leaderboard"] {
	align-self: center;
	background-color: #fff;
	height: auto !important;
	margin: 0 auto !important;
	min-height: 90px !important;
	padding: 2rem calc(var(--bs-gutter-x, 1.5rem) * .5);
	pointer-events: none;
	width: 100% !important;
}

@media (min-width: 576px) {
	#page > .advertserve-container[data-size="super-leaderboard"] { max-width: 540px; }
}

@media (min-width: 768px) {
	#page > .advertserve-container[data-size="super-leaderboard"] { max-width: 720px; }
}

@media (min-width: 992px) {
	#page > .advertserve-container[data-size="super-leaderboard"] { max-width: 960px; }
}

@media (min-width: 1200px) {
	#page > .advertserve-container[data-size="super-leaderboard"] { max-width: 1140px; }
}

@media (min-width: 1400px) {
	#page > .advertserve-container[data-size="super-leaderboard"] { max-width: 1320px; }
}

#page > .advertserve-container[data-size="super-leaderboard"] .advertserve-content {
	pointer-events: auto;
	transform-origin: top center;
}

#page > .advertserve-container[data-size="super-leaderboard"] .advertserve-content * {
	pointer-events: auto;
}

/*
 * Fit wide ads into narrower columns: shrink the creative, keep it centred, and remove
 * the empty space a CSS transform would otherwise leave below it.
 * The super leaderboard factors (0.532 / 0.718 / 0.965) are the old site's; the
 * centring, gap removal, billboard, sidebar and small-phone rules are new.
 */
.advertserve-container[data-size="super-leaderboard"] { --as-h: 90px; }
.advertserve-container[data-size="billboard"]         { --as-h: 250px; }
.advertserve-container[data-size="filmstrip"]          { --as-h: 600px; }
.advertserve-container[data-size="medium-rectangle"]   { --as-h: 250px; }
.advertserve-container[data-size="mobile-leaderboard"] { --as-h: 50px; }

/* Content box is exactly as wide as the creative, so scaling centres it. */
.advertserve-container .advertserve-content {
	flex: 0 0 auto;
	width: max-content;
	max-width: none;
	transform-origin: top center;
	margin-bottom: calc(var(--as-h, 0px) * (var(--as-scale, 1) - 1));
}

/* Small tablets */
@media (min-width: 576px) and (max-width: 767.98px) {
	#page > .advertserve-container[data-size="super-leaderboard"],
	#primary > .advertserve-container[data-size="billboard"] { --as-scale: 0.532; }
}

/* Tablets */
@media (min-width: 768px) and (max-width: 991.98px) {
	#page > .advertserve-container[data-size="super-leaderboard"],
	#primary > .advertserve-container[data-size="billboard"] { --as-scale: 0.718; }
}

/* Small laptops: 960px container, 216px sidebar */
@media (min-width: 992px) and (max-width: 1199.98px) {
	#page > .advertserve-container[data-size="super-leaderboard"],
	#primary > .advertserve-container[data-size="billboard"] { --as-scale: 0.965; }
	#secondary .advertserve-container { --as-scale: 0.72; }
}

/* Laptops: 1140px container, 261px sidebar */
@media (min-width: 1200px) and (max-width: 1399.98px) {
	#secondary .advertserve-container { --as-scale: 0.87; }
}

/* Very small phones (under 360px wide) */
@media (max-width: 359.98px) {
	.advertserve-container[data-device="mobile"] { --as-scale: 0.92; }
}

/* Apply the scale wherever a factor is set above. */
@media (max-width: 1399.98px) {
	#page > .advertserve-container[data-size="super-leaderboard"],
	#primary > .advertserve-container[data-size="billboard"],
	#secondary .advertserve-container,
	.advertserve-container[data-device="mobile"] {
		overflow: hidden;
	}

	#page > .advertserve-container[data-size="super-leaderboard"] .advertserve-content,
	#primary > .advertserve-container[data-size="billboard"] .advertserve-content,
	#secondary .advertserve-container .advertserve-content,
	.advertserve-container[data-device="mobile"] .advertserve-content {
		transform: scale(var(--as-scale, 1));
	}

	/* Box height follows the shrunken creative (the inline height is the full size). */
	#primary > .advertserve-container[data-size="billboard"],
	#secondary .advertserve-container,
	.advertserve-container[data-device="mobile"] {
		height: auto !important;
		min-height: calc(var(--as-h, 0px) * var(--as-scale, 1)) !important;
	}
}

.advertserve-loading {
	align-items: center;
	background-color: #f0f0f1;
	display: flex;
	inset: 0;
	justify-content: center;
	position: absolute;
	z-index: 1;
}

.advertserve-spinner {
	animation: ad-spin 1s linear infinite;
	border: 3px solid rgba(0, 0, 0, 0.1);
	border-radius: 50%;
	border-top-color: #333;
	height: 30px;
	width: 30px;
}

.advertserve-content {
	display: block;
	position: relative;
	z-index: 2;
}

/* Phone-only and desktop-only slots. */
.advertserve-container[data-device="mobile"] {
	display: none;
}

@media (max-width: 575.98px) {
	.advertserve-container[data-device="desktop"] { display: none !important; }
	.advertserve-container[data-device="mobile"] { display: flex !important; }
}

.advertserve-roadblock {
	display: none;
}

/* Sidebar: the old sidebar had an empty widget between the filmstrip and the first
   medium rectangle, adding 1.5rem. Keep the same spacing. */
#secondary .widget-advertserve:first-child {
	margin-bottom: 3rem !important;
}

/* Homepage "Today's News" ad column (from the old home.css, archived Aug 2026). */
.todays-news-ad-space {
	width: 300px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* NEW: no ad delivered (nothing booked, or blocked): remove the slot and its spacing.
   Set by advertserve.js. Must stay after the device rules above. */
.advertserve-container[data-ad-state="empty"],
.advertserve-empty {
	display: none !important;
}

@media print {
	.advertserve-container { display: none !important; }
}