/**
 * Broadstreet ad slots, site-wide: gray background, 22px padding on all sides,
 * no "ADVERTISING" label.
 *
 * Only slots that actually received a creative get the background, so empty
 * or unfilled zones don't leave gray strips. border-box + max-width keep the
 * padded box inside narrow columns (the ad scales down instead).
 *
 * Add the class `iola-ad-no-bg` to any element containing an ad (for example
 * a Kadence row, column or group's "Additional CSS class") to drop the gray.
 */

:is(broadstreet-zone-container, broadstreet-zone-container-alt):has(broadstreet-zone a, broadstreet-zone img, broadstreet-zone iframe) {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	padding: 22px;
	background-color: #f8f8f8;
	text-align: center;
}

/*
 * Full-bleed gray band for the site-wide header/footer banners (direct
 * children of #wrapper) and, on the landing page, every banner ad. The
 * box-shadow paints the gray to the viewport edges without widening layout,
 * and clip-path trims the shadow top and bottom. Sidebar and multi-column ads
 * stay boxed.
 */
#wrapper > div > :is(broadstreet-zone-container, broadstreet-zone-container-alt):has(broadstreet-zone a, broadstreet-zone img, broadstreet-zone iframe),
.home :is(broadstreet-zone-container, broadstreet-zone-container-alt):has(broadstreet-zone a, broadstreet-zone img, broadstreet-zone iframe):not(aside *, .mw-sidebar *, .kt-row-column-wrap:not(.kt-has-1-columns) *),
/*
 * Magazine issue archives: mid-page banner sits in a full-width Kadence row
 * but was boxed to the creative width. Full-bleed gray like header/footer.
 */
body.tax-magazine-issue .kt-row-column-wrap.kt-has-1-columns > .wp-block-kadence-column > .kt-inside-inner-col > :is(broadstreet-zone-container, broadstreet-zone-container-alt):has(broadstreet-zone a, broadstreet-zone img, broadstreet-zone iframe) {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	box-shadow: 0 0 0 100vmax #f8f8f8;
	clip-path: inset(0 -100vmax);
}

/*
 * Landing page top banner: its wrapper (Kadence element, inline styles) has
 * margin-top 24px and margin-bottom -26px, which pulls the page content up
 * under the band. When an ad fills, drop the negative margin so the gap below
 * the band matches the 24px gap above it.
 */
.home #wrapper > div:has(> :is(broadstreet-zone-container, broadstreet-zone-container-alt) broadstreet-zone :is(a, img, iframe)) {
	margin-bottom: 0 !important;
}

/* Opt-out: no gray band (boxed or full-bleed) for ads inside .iola-ad-no-bg. */
.iola-ad-no-bg :is(broadstreet-zone-container, broadstreet-zone-container-alt) {
	background-color: transparent !important;
	box-shadow: none !important;
	clip-path: none !important;
}

/* Top Stories band ad column: the band is already gray, so no box or padding. */
.iola-top-stories__col--aside :is(broadstreet-zone-container, broadstreet-zone-container-alt) {
	padding: 0 !important;
	background-color: transparent !important;
}

/* Broadstreet wraps some creatives in an inline `padding-bottom: 20px` span. */
broadstreet-zone span[style*="padding-bottom"] {
	padding-bottom: 0 !important;
}

/*
 * Broadstreet adds an inline `padding-top: 20px` wrapper to make room for its
 * label. The label is hidden below, so drop the space to keep top and bottom even.
 */
broadstreet-zone > div[style*="padding-top"] {
	padding-top: 0 !important;
}

/* Inline images sit on the text baseline, adding a descender gap below. */
broadstreet-zone a,
broadstreet-zone img,
broadstreet-zone iframe {
	vertical-align: top;
}

/* In-story label injected by Broadstreet's script. */
broadstreet-zone .broadstreet-label-container,
broadstreet-zone .broadstreet-zone-label {
	display: none !important;
}