/*
 * Ad-optimized article layout (templates/single.html).
 *
 * Desktop (1024px+): one text column (up to 728px) + 40px gap + 300px ad
 * sidebar, centered (about 1,068px in total). The column flexes down to
 * ~624px on 1024px screens; the sidebar never shrinks.
 * Below 1024px: the text column is full width and the sidebar is hidden
 * (phones and tablets get in-content and sticky-footer ads instead).
 */
.curio-single__layout {
	--article-col: 45.5rem;
	--rail-gap: 2.5rem;
	width: var(--content-max);
	max-width: var(--article-col);
	margin: 0 auto;
}

/* Everything in the article fills the text column. */
.curio-single--ads .curio-single__article {
	--block-max-width: 100%;
	--block-wide-max-width: 100%;
	min-width: 0;
}

.curio-single--ads .curio-article-header.curio-article-header--default,
.curio-single--ads .curio-article-header--default .curio-article-header__content,
.curio-single--ads .curio-article-meta,
.curio-single--ads .curio-article-body,
.curio-single--ads .curio-article-meta--with-sidebar {
	--block-max-width: 100%;
	--block-wide-max-width: 100%;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.curio-single--ads .curio-rich-text > .alignfull,
.curio-single--ads .curio-rich-text > .alignwide {
	max-width: 100%;
}

/* Compact top: headline, deck and byline, so the text starts on the first screen. */
.curio-single--ads .curio-article-header.curio-article-header--default {
	margin-top: 0;
	margin-bottom: 1rem;
}

.curio-single--ads .curio-article-header--default .curio-article-header__content {
	margin-bottom: 0;
}

.curio-single--ads .curio-share {
	margin-bottom: 1.5rem;
}

.curio-single--ads .curio-article-footer {
	max-width: 100%;
}

@media (min-width: 64rem) {
	/* With the ad sidebar. */
	.curio-has-rail .curio-single__layout,
	.curio-single__layout:has(> .curio-ad-rail) {
		max-width: none;
		display: grid;
		grid-template-columns: minmax(0, var(--article-col)) 18.75rem;
		column-gap: var(--rail-gap);
		justify-content: center;
		align-items: stretch;
	}

	/* Sidebar turned off: a centered text column. */
	body:not(.curio-has-rail) .curio-single__layout:not(:has(> .curio-ad-rail)) {
		max-width: var(--article-col);
	}

	.curio-single--ads .curio-article-header.curio-article-header--default {
		margin-bottom: 1.25rem;
	}
}

/*
 * Small phones: ads inside the text use the full screen width (the text
 * keeps its side margins), so a 300px-wide ad fits even on 320px screens.
 * Covers Ad Inserter (.code-block), AdSense (responsive ins.adsbygoogle, Auto
 * ads), Mediavine, Raptive, Ezoic and the theme's own ad slots. Add the class
 * "curio-ad-fullbleed" to any other ad wrapper to get the same treatment.
 * Fixed-size AdSense units (an inline width) keep their width: see below.
 */
@media (max-width: 47.9375rem) {
	.curio-single--ads .entry-content > :is(
		.code-block,
		.ai-viewports,
		.google-auto-placed,
		ins.adsbygoogle:not([style*="width"]),
		.mv-ad-box,
		[class*="mv-content-ad"],
		.adthrive-ad,
		.adthrive-content,
		.ezoic-ad,
		[id^="ezoic-pub-ad-placeholder"],
		.curio-ad,
		.curio-ad-fullbleed
	) {
		box-sizing: border-box;
		width: auto !important;
		max-width: none !important;
		/* !important: ad plugins often set an inline "margin: … auto" on their wrappers. */
		margin-left: calc(var(--grid-edge) * -1) !important;
		margin-right: calc(var(--grid-edge) * -1) !important;
		text-align: center;
	}

	/*
	 * A fixed-size AdSense unit placed straight in the text (e.g. a Custom HTML
	 * block): keep its inline width (an empty inline-block given width:auto
	 * shrinks to 0px and AdSense then fails with availableWidth=0) and centre
	 * it on the screen, even when it is wider than the text column.
	 */
	.curio-single--ads .entry-content > ins.adsbygoogle[style*="width"] {
		display: block !important;
		position: relative;
		left: 50%;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		transform: translateX(-50%);
	}
}

/*
 * Reserve space for in-content ads so a late (lazy-loaded or refreshed) ad
 * doesn't push the text down (CLS). Applies only where ads are allowed
 * (body.curio-ads-on) and only to wrappers that are already in the page:
 * Ad Inserter blocks (.code-block), the theme's Ad Slot block (.curio-ad)
 * and any wrapper given "curio-ad-reserve" or
 * "curio-ad-fullbleed". The default suits 300x250; set another height on a
 * wrapper with style="--curio-ad-reserve:90px", or add "curio-ad-noreserve"
 * to reserve nothing. Mediavine and Raptive reserve their own space (turn on
 * "Optimize Ads for CLS" / "CLS Optimization").
 */
.curio-ads-on .curio-single--ads .entry-content > :is(.code-block, .curio-ad, .curio-ad-reserve, .curio-ad-fullbleed):not(.curio-ad-noreserve) {
	box-sizing: border-box;
	min-height: var(--curio-ad-reserve, 250px);
}

/*
 * Phones and tablets: room under the footer for a bottom anchor (adhesion)
 * ad, so it doesn't cover the last footer links.
 */
@media (max-width: 63.9375rem) {
	.curio-ads-on .curio-site-footer {
		padding-bottom: calc(1.75rem + 4rem + env(safe-area-inset-bottom, 0px));
	}
}