/**
 * Advertising slots.
 *
 * The one rule everything here serves: the box exists before the creative
 * does. Each slot carries its own width and height as custom properties, set
 * in PHP from the slot definition, and reserves that space up front. An
 * advertisement that arrives late therefore lands in a hole that was already
 * there rather than shoving the paragraph somebody is reading down the page.
 *
 * The label sits above the creative and is never optional.
 */

.ignr-ad {
	--ignr-paper-2: var(--paper-2, #eef2f6);
	--ignr-paper-3: var(--paper-3, #e3e9ef);
	--ignr-ink-meta: var(--ink-meta, #54697f);
	--ignr-ink-soft: var(--ink-soft, #3d5a72);
	--ignr-rule: var(--rule, #d5dee6);
	--ignr-accent-text: var(--accent-text, #8f5208);
	--ignr-navy: var(--brand-navy, #002038);
	--ignr-ui: var(--font-ui, "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif);

	display: block;
	margin-block: 2rem;
	text-align: center;
	font-family: var(--ignr-ui);
	container-type: inline-size;
}

.ignr-ad__label {
	display: block;
	margin-block-end: .375rem;

	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--ignr-ink-meta);
}

/*
 * The reserved box. Width is capped at the creative's own width so a 300px
 * rectangle does not stretch across a 1200px column, and the aspect ratio is
 * what actually holds the height open before anything loads.
 *
 * The custom properties arrive unitless, because aspect-ratio takes a ratio of
 * numbers and silently discards a ratio of lengths. So the ratio uses them raw
 * and max-width multiplies by 1px. Getting this wrong is invisible on a sold
 * slot, where the image's own width and height attributes reserve the space
 * anyway, and only shows up on an unsold one.
 */
.ignr-ad__slot {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	max-width: calc(var(--ad-mw, 300) * 1px);
	margin-inline: auto;
	aspect-ratio: var(--ad-mw, 1) / var(--ad-mh, 1);

	overflow: hidden;
}

@media (min-width: 782px) {
	.ignr-ad__slot {
		max-width: calc(var(--ad-w, 300) * 1px);
		aspect-ratio: var(--ad-w, 1) / var(--ad-h, 1);
	}
}

/* A slot with nothing sensible to show on a phone stays off it entirely. */
@media (max-width: 781px) {
	.ignr-ad--desktop-only {
		display: none;
	}
}

/* ── Creative ─────────────────────────────────────────────────────────── */

.ignr-ad__link {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}

.ignr-ad__link:focus-visible {
	outline: 3px solid var(--ignr-accent-text);
	outline-offset: 2px;
}

.ignr-ad__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/*
 * When both a desktop and a mobile creative exist, each is shown only at its
 * own width. Two <img> elements rather than a <picture>, because the two
 * creatives are different artwork rather than two sizes of one image, and
 * because lazy loading behaves more predictably this way.
 */
.ignr-ad__has-mobile {
	display: block;
	width: 100%;
	height: 100%;
}

.ignr-ad__img--mobile {
	display: block;
}

.ignr-ad__has-mobile .ignr-ad__img--desktop {
	display: none;
}

@media (min-width: 782px) {
	.ignr-ad__has-mobile .ignr-ad__img--desktop {
		display: block;
	}

	.ignr-ad__has-mobile .ignr-ad__img--mobile {
		display: none;
	}
}

/* ── House placeholder ────────────────────────────────────────────────── */

.ignr-ad__ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .25rem;

	width: 100%;
	height: 100%;
	padding: .75rem;

	text-decoration: none;
	background: var(--ignr-paper-2);
	border: 1px dashed var(--ignr-rule);
	transition: background .16s ease, border-color .16s ease;
}

@media (hover: hover) and (pointer: fine) {
	a.ignr-ad__ph:hover {
		background: var(--ignr-paper-3);
		border-color: var(--ignr-navy);
	}
}

.ignr-ad__ph-title {
	font-size: .8125rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--ignr-ink-soft);
}

.ignr-ad__ph-size {
	font-size: .6875rem;
	line-height: 1.3;
	color: var(--ignr-ink-meta);
}

.ignr-ad__ph-cta {
	margin-block-start: .25rem;
	font-size: .75rem;
	font-weight: 700;
	color: var(--ignr-accent-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Short slots cannot fit three lines, so the extras drop out. */
@container (max-height: 110px) {
	.ignr-ad__ph-cta {
		display: none;
	}
}

/* ── Placement tweaks ─────────────────────────────────────────────────── */

/*
 * The in-article slot is injected into the content, which on this theme runs
 * at a reading measure. Pulling it flush with that column keeps it from
 * reading as part of the prose.
 */
.ignr-ad--in-article {
	margin-block: 2.5rem;
	padding-block: 1.25rem;
	border-block: 1px solid var(--ignr-rule);
}

.ignr-ad--masthead {
	margin-block: 1.25rem 0;
}

.ignr-ad--sidebar-top,
.ignr-ad--sidebar-tall {
	margin-block: 0 1.5rem;
}

.ignr-ad--footer {
	margin-block: 2rem 0;
}

@media (prefers-reduced-motion: reduce) {
	.ignr-ad__ph {
		transition: none;
	}
}