/**
 * DigiPrensa — Ad zones (manual AdSense units).
 *
 * Containers reserve vertical space per format so the ad paints into a box of
 * its final height and causes NO layout shift (CLS). The subtle surface + tiny
 * "Publicidad" label keep the units honest and on-brand without shouting.
 *
 * Consumes tokens from css/tokens.css.
 *
 * @package understrap
 */

.dp-ad {
	/* min-height is set inline per format (anti-CLS); this is the floor. */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	width: 100%;
	max-width: var(--dp-max, 1200px);
	margin: var(--dp-gap, 1.5rem) auto;
	padding: .75rem;
	box-sizing: border-box;
	background: var(--dp-surface, #fff);
	border: 1px solid var(--dp-border, #dcdbd7);
	border-radius: var(--dp-radius, .5rem);
	overflow: hidden;
}

/* Small, quiet transparency label. */
.dp-ad__label {
	align-self: center;
	font-family: var(--dp-font-mono, monospace);
	font-size: .625rem;
	line-height: 1;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dp-ink-gray, #5a6b7b);
	opacity: .7;
}

/* The AdSense <ins> stretches to the container width. */
.dp-ad__ins {
	display: block;
	width: 100%;
}

/* Placeholder box while the slot ID is not configured yet: keeps the reserved
   height visible during setup with a faint on-brand hatch, zero requests. */
.dp-ad__placeholder {
	display: block;
	width: 100%;
	flex: 1 1 auto;
	min-height: 60px;
	border-radius: calc(var(--dp-radius, .5rem) - 2px);
	background:
		repeating-linear-gradient(
			45deg,
			var(--dp-paper, #fbfaf6),
			var(--dp-paper, #fbfaf6) 10px,
			var(--dp-surface, #fff) 10px,
			var(--dp-surface, #fff) 20px
		);
}

/* -------------------------------------------------------------------------- */
/* Per-format reserved heights (mirrors digiprensa_ad_format_min_height()).    */
/* min-height also lives inline; these keep the box sane if inline is dropped. */
/* -------------------------------------------------------------------------- */

.dp-ad--leaderboard {
	min-height: 100px; /* mobile floor; grows to inline min-height on desktop */
}

.dp-ad--in-article {
	min-height: 280px;
	max-width: 720px; /* keep in-article narrow, aligned to reading column */
}

.dp-ad--in-feed {
	min-height: 200px;
}

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

/* On small screens the leaderboard collapses to a shorter unit; keep the
   reserved floor modest so we don't push content on phones. */
@media (max-width: 575.98px) {
	.dp-ad--leaderboard {
		min-height: 100px !important;
	}
}