/**
 * MoneyPage Ad Inserter - frontend styles.
 *
 * Small on purpose. The container has three jobs: reserve the space the
 * creative will take so the article does not jump when it arrives, centre it,
 * and make sure a creative wider than the column can never push the page
 * sideways on a phone.
 *
 * The renderer writes the creative dimensions onto the container as custom
 * properties, so one rule set covers every format and no stylesheet has to be
 * touched when a new size is added in the admin.
 *
 * The `mpai-slot-*` classes mirror the runtime's state machine. They are for
 * styling and for debugging; nothing about targeting depends on them, because a
 * slot that must not run is never activated in the first place.
 */

.mpai-ad-slot {
	display: block;
	box-sizing: border-box;
	max-width: 100%;
	margin: 1.5em auto;
	overflow-x: hidden;
	text-align: center;
	clear: both;
}

.mpai-ad-slot__inner {
	display: inline-block;
	box-sizing: border-box;
	width: var(--mpai-ad-width, auto);

	/*
	 * A 970px billboard inside a 360px viewport must shrink to the column, not
	 * widen the document. `max-width` caps it and `overflow-x` on the slot keeps
	 * anything the ad server injects from escaping.
	 */
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
}

.mpai-ad-slot__inner > * {
	max-width: 100%;
}

/*
 * Space reservation. The inline `min-height` on the slot carries the creative
 * height; the inner box matches it so the reserved area is the ad's, not the
 * container's padding.
 */
.mpai-ad-slot--reserved .mpai-ad-slot__inner {
	min-height: var(--mpai-ad-height, 0);
}

/*
 * On narrow viewports a reserved height taken from a desktop creative would
 * leave a hole, since the creative itself will be swapped for a smaller one or
 * scaled down. Cap the reservation at something a phone can afford.
 */
@media screen and (max-width: 480px) {
	.mpai-ad-slot--reserved {
		min-height: 0 !important;
	}

	.mpai-ad-slot--reserved .mpai-ad-slot__inner {
		min-height: min(var(--mpai-ad-height, 0), 320px);
	}
}

/* Runtime states. */

.mpai-slot-pending .mpai-ad-slot__inner,
.mpai-slot-loading .mpai-ad-slot__inner {
	position: relative;
}

.mpai-slot-loading {
	opacity: 0.99; /* Own a compositing layer so the creative paints in one go. */
}

.mpai-slot-loaded {
	opacity: 1;
}

/*
 * A slot that came back with nothing keeps no reserved space: an empty gap in
 * the middle of an article is worse than no ad at all.
 */
.mpai-slot-empty,
.mpai-slot-error {
	min-height: 0 !important;
	margin: 0;
}

.mpai-slot-empty .mpai-ad-slot__inner,
.mpai-slot-error .mpai-ad-slot__inner {
	min-height: 0;
}

.mpai-ad-slot[hidden] {
	display: none !important;
}

/* Waiting to be moved next to its CSS selector by the runtime. */
.mpai-ad-slot--pending {
	margin: 0;
}

/*
 * Shown instead of a creative: in placeholder mode, or when consent was refused
 * and the site asked for a non-personalised box rather than a gap.
 */
.mpai-ad-slot__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--mpai-ad-height, 90px);
	padding: 8px;
	background: repeating-linear-gradient(45deg, #f6f7f7, #f6f7f7 8px, #ebebeb 8px, #ebebeb 16px);
	border: 1px dashed #8c8f94;
	color: #50575e;
	font-size: 12px;
	text-align: center;
}

.mpai-ad-slot__label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	line-height: 1.4;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
}

/* No label above a slot that has nothing to label. */
.mpai-slot-empty .mpai-ad-slot__label,
.mpai-slot-error .mpai-ad-slot__label {
	display: none;
}