/**
 * HCFP Ad Slots — front-end styles
 *
 * "CSS Guardrails" (per spec):
 *   - Min-height per format prevents Cumulative Layout Shift (CLS) when
 *     the ad iframe loads asynchronously.
 *   - `contain: layout` isolates layout calculations — an oversized ad
 *     iframe can't push surrounding page elements around.
 *   - `isolation: isolate` creates a new stacking context so ads can't
 *     overlay site UI via z-index manipulation.
 *   - `overflow: hidden` clips any creative that exceeds the slot bounds.
 *   - The "Sponsored / Advertisement" disclosure label is required by
 *     Google AdSense policy, styled to be clearly visible but unobtrusive.
 *     `pointer-events: none` keeps it visual-only — it can't be clicked.
 */

/* Outer wrapper — the boundary between site content and the ad. */
.hcfp-ad {
	display: block;
	margin: 24px auto;
	max-width: 100%;
	text-align: center;
	contain: layout;       /* don't let ad iframe affect surrounding layout */
	isolation: isolate;    /* new stacking context — ad can't overlay site UI */
	overflow: hidden;      /* clip creatives that try to spill outside */
	box-sizing: border-box;
	background: transparent;
}

/* Disclosure label — required by AdSense "identifying ads" policy */
.hcfp-ad-disclosure {
	display: block;
	margin: 0 auto 6px;
	padding: 0;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #6b7280;
	text-align: center;
	pointer-events: none;  /* label is informational only */
	user-select: none;
}

/* The AdSense <ins> element itself */
.hcfp-ad .adsbygoogle {
	display: block;
	margin: 0 auto;
}

/* ---- Per-format min-height (kills CLS) ---- */

.hcfp-ad-format-rectangle {
	min-height: 280px;
	max-width: 336px;
}

.hcfp-ad-format-banner {
	min-height: 90px;
	max-width: 728px;
}

.hcfp-ad-format-in-article {
	min-height: 250px;
	max-width: 760px;
}

.hcfp-ad-format-in-feed {
	min-height: 200px;
	max-width: 100%;
}

.hcfp-ad-format-auto {
	/* Auto format = AdSense decides. Reserve a sensible default so the
	   page doesn't shift when the iframe loads. */
	min-height: 250px;
}

/* ---- Mobile adjustments ---- */

@media (max-width: 768px) {
	.hcfp-ad {
		margin: 18px auto;
	}

	.hcfp-ad-format-banner {
		/* 728×90 banner doesn't fit on phones — AdSense responsive
		   handles the swap, but reserve a smaller min-height. */
		min-height: 100px;
		max-width: 100%;
	}

	.hcfp-ad-format-rectangle {
		max-width: 300px;
		min-height: 250px;
	}
}