/**
 * PureSourceCode — advertising slots.
 *
 * Mobile-first. Three jobs:
 *   1. Never let an ad break the layout (the 728px unit on a 360px phone).
 *   2. Reserve the ad's height before it paints, so nothing shifts.
 *   3. Honour the per-slot device rules in CSS, not JS, so there is no flash.
 */

/* ---------------------------------------------------------------------- *
 * Container
 * ---------------------------------------------------------------------- */
.psc-ad {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: var(--psc-space-6, 1.5rem) 0;
	/* The single most important rule here: an oversized creative is clipped
	   rather than pushing the page wide and creating horizontal scroll. */
	overflow: hidden;
	clear: both;
}

.psc-ad__inner {
	display: block;
	width: 100%;
	max-width: 100%;
	/* Reserved space. Falls back to 0 for fluid/in-feed units. */
	min-height: var(--psc-ad-h-mobile, 0);
}

/* Constrain anything the network injects. */
.psc-ad__inner img,
.psc-ad__inner iframe,
.psc-ad__inner ins,
.psc-ad__inner > * {
	max-width: 100%;
}

/* AdSense responsive units need an explicit block box to measure. */
.psc-ad__inner .adsbygoogle {
	display: block;
	width: 100%;
}

/* ---------------------------------------------------------------------- *
 * Label
 * ---------------------------------------------------------------------- */
.psc-ad__label {
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--psc-font-mono, ui-monospace, monospace);
	font-size: 0.625rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--psc-text-faint, #8a94a0);
}

.psc-ad--align-center .psc-ad__label { text-align: center; }
.psc-ad--align-left   .psc-ad__label { text-align: left; }
.psc-ad--align-right  .psc-ad__label { text-align: right; }

/* ---------------------------------------------------------------------- *
 * Alignment
 * ---------------------------------------------------------------------- */
.psc-ad--align-center .psc-ad__inner { margin-left: auto; margin-right: auto; text-align: center; }
.psc-ad--align-left   .psc-ad__inner { margin-right: auto; text-align: left; }
.psc-ad--align-right  .psc-ad__inner { margin-left: auto; text-align: right; }

/* ---------------------------------------------------------------------- *
 * Device visibility
 *
 * Breakpoints match the theme grid: <576 mobile, 576-991 tablet, >=992 desktop.
 * ---------------------------------------------------------------------- */
.psc-ad--devices-desktop,
.psc-ad--devices-tablet {
	display: none;
}

@media (min-width: 576px) {
	.psc-ad--devices-tablet { display: block; }
	.psc-ad--devices-mobile { display: none; }

	.psc-ad__inner { min-height: var(--psc-ad-h-tablet, 0); }
}

@media (min-width: 992px) {
	.psc-ad--devices-desktop { display: block; }

	.psc-ad__inner { min-height: var(--psc-ad-h-desktop, 0); }
}

/* ---------------------------------------------------------------------- *
 * Slot-specific placement
 * ---------------------------------------------------------------------- */

/* Header leaderboard sits beside the logo on desktop and stacks under it
   on smaller screens; the header grid handles the stacking. */
.psc-ad--header_leaderboard {
	margin: 0;
}

.psc-ad--below_menu {
	margin: 0;
	padding: var(--psc-space-4, 1rem) 0;
	background: var(--psc-surface-sunken, #f5f7fa);
}

/* Sticky sidebar unit. Desktop only — a sticky ad on a phone covers content
   and breaches AdSense's policy on obstructive formats. */
.psc-ad--sticky {
	position: static;
}

@media (min-width: 992px) {
	.psc-ad--sticky {
		position: sticky;
		/* Clears the sticky navigation bar. */
		top: calc(var(--psc-header-sticky-height, 64px) + var(--psc-space-4, 1rem));
	}
}

/* In-content units get a little more breathing room than the default. */
.psc-ad--single_in_content,
.psc-ad--single_before_content,
.psc-ad--single_after_content {
	margin: var(--psc-space-8, 2rem) 0;
}

/* In-feed unit inside the archive grid spans the full row. */
.psc-ad--archive_inline {
	grid-column: 1 / -1;
	width: 100%;
}

/* ---------------------------------------------------------------------- *
 * Editor / Customizer affordance
 *
 * An enabled slot with no code yet still shows its reserved box in the
 * Customizer preview, so positions can be judged before the codes exist.
 * ---------------------------------------------------------------------- */
.psc-ad--placeholder .psc-ad__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--psc-border, #dfe3e8);
	border-radius: var(--psc-radius-md, 6px);
	background: var(--psc-surface-sunken, #f5f7fa);
	font-family: var(--psc-font-mono, ui-monospace, monospace);
	font-size: 0.75rem;
	color: var(--psc-text-faint, #8a94a0);
}

/* ---------------------------------------------------------------------- *
 * Print
 * ---------------------------------------------------------------------- */
@media print {
	.psc-ad { display: none !important; }
}