/**
 * PNP Newsroom — Ad Manager front-end styles.
 *
 * Breakpoints match assets/css/style.css: mobile <680px, tablet 681-960px,
 * desktop >960px, so device-visibility settings line up with how the rest
 * of the theme actually reflows.
 */

/* ---------------------------------------------------------------
 * Reserved-space slot — this is what actually prevents CLS: the box
 * takes up its final size the instant the HTML parses, long before any
 * ad script has loaded or run.
 * ------------------------------------------------------------- */
.pnp-ad-slot {
	--pnp-ad-w: 300px;
	--pnp-ad-h: 250px;
	width: 100%;
	max-width: var(--pnp-ad-w);
	min-height: var(--pnp-ad-h);
	margin: 28px auto;
	display: none; /* shown by device-visibility classes below */
	flex-direction: column;
	align-items: center;
	position: relative;
	background: repeating-linear-gradient(
		45deg,
		rgba(0,0,0,.02),
		rgba(0,0,0,.02) 10px,
		rgba(0,0,0,.04) 10px,
		rgba(0,0,0,.04) 20px
	);
	border: 1px dashed var(--pnp-rule, #C9C5B7);
}

.pnp-ad-slot.pnp-ad-loaded {
	background: none;
	border: none;
}

.pnp-ad-inner {
	width: 100%;
	height: 100%;
	min-height: var(--pnp-ad-h);
	display: flex;
	align-items: center;
	justify-content: center;
}

.pnp-ad-inner iframe {
	width: 100%;
	max-width: var(--pnp-ad-w);
	height: var(--pnp-ad-h);
	border: 0;
	display: block;
}

.pnp-ad-label {
	position: absolute;
	top: 4px;
	left: 4px;
	font-family: var(--font-mono, monospace);
	font-size: 9px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pnp-steel, #6B6862);
	background: rgba(255,255,255,.85);
	padding: 2px 6px;
	z-index: 2;
}

/* ---------------------------------------------------------------
 * Device visibility — hide/show via CSS only, so the server-rendered
 * HTML is identical for every visitor (required for page-cache
 * compatibility) and the actual show/hide is free, layout-stable CSS.
 * ------------------------------------------------------------- */
@media (max-width: 680px) {
	.pnp-ad--show-mobile { display: flex; }
}
@media (min-width: 681px) and (max-width: 960px) {
	.pnp-ad--show-tablet { display: flex; }
}
@media (min-width: 961px) {
	.pnp-ad--show-desktop { display: flex; }
}

/* ---------------------------------------------------------------
 * Placement-specific containers
 * ------------------------------------------------------------- */
.pnp-ad-slot--header,
.pnp-ad-slot--below_header,
.pnp-ad-slot--footer,
.pnp-ad-slot--above_article,
.pnp-ad-slot--below_article {
	max-width: var(--pnp-max, 1240px);
}

.pnp-ad-slot--in_content { margin: 32px auto; }

.pnp-ad-slot--sidebar { margin-top: 0; }

.pnp-ad-slot--sticky_sidebar {
	position: sticky;
	top: 20px;
}

/* ---------------------------------------------------------------
 * Sticky bars: mobile sticky banner + desktop anchor.
 * Height-capped and dismissible per the Coalition for Better Ads
 * standard for sticky ads (no more than ~15% of viewport height).
 * ------------------------------------------------------------- */
.pnp-ad-slot--mobile_sticky,
.pnp-ad-slot--desktop_anchor {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
	max-width: 100vw;
	max-height: 15vh;
	z-index: 500;
	margin: 0;
	background: var(--pnp-paper, #FBFAF7);
	border: 1px solid var(--pnp-rule, #C9C5B7);
	border-bottom: none;
	box-shadow: 0 -2px 10px rgba(0,0,0,.12);
	padding-top: 4px;
}

.pnp-ad-slot--desktop_anchor { border-radius: 4px 4px 0 0; }

.pnp-ad-dismiss {
	position: absolute;
	top: -14px;
	right: -14px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--pnp-ink, #17181A);
	color: #fff;
	border: 2px solid var(--pnp-paper, #FBFAF7);
	font-size: 16px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 3;
}

.pnp-ad-slot--mobile_sticky.pnp-ad-dismissed,
.pnp-ad-slot--desktop_anchor.pnp-ad-dismissed {
	display: none !important;
}

/* ---------------------------------------------------------------
 * Reduced motion / print — ads never belong in print output.
 * ------------------------------------------------------------- */
@media print {
	.pnp-ad-slot { display: none !important; }
}