/*
 * A pastille is a deliberately small, fixed-footprint decorative block.
 * The circle size is defined by theme.json so every instance stays uniform.
 */
.wp-block-lpu-pastille.lpu-pastille {
	--lpu-pastille-size: clamp(
		var(--wp--custom--pastille--mobile-size),
		12vw,
		var(--wp--custom--pastille--size)
	);
	--lpu-pastille-boundary-offset: var(--wp--custom--pastille--boundary-offset-below);
	--lpu-pastille-gutter: clamp(
		var(--wp--preset--spacing--xs),
		2vw,
		var(--wp--preset--spacing--lg)
	);
	position: relative;
	z-index: 2;
	width: auto;
	max-width: none;
}

/* A between pastille straddles the boundary between two sections: no vertical
 * margin so it sits on the limit. The doubled selector beats the theme's
 * section/content boundary rule (.wp-block-post-content > :not(.lpu-section)
 * + .lpu-section) which would otherwise reserve section-compact space there. */
.wp-block-lpu-pastille.lpu-pastille--between.wp-block-lpu-pastille.lpu-pastille--between {
	margin-block: 0;
}

.lpu-pastille--between {
	/* Keep the block in flow without reserving the overlaid circle's height. */
	height: 0;
	min-height: 0;
}

.lpu-pastille__surface {
	display: grid;
	place-items: center;
	width: var(--lpu-pastille-size);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
}

.lpu-pastille--between .lpu-pastille__surface {
	/* Overlay across the boundary; the offset sets how far the circle straddles it. */
	position: absolute;
	top: 0;
	transform: translateY(var(--lpu-pastille-boundary-offset));
}

.wp-block-lpu-pastille.lpu-pastille--vertical-above {
	--lpu-pastille-boundary-offset: var(--wp--custom--pastille--boundary-offset-above);
}

.wp-block-lpu-pastille.lpu-pastille--vertical-center {
	--lpu-pastille-boundary-offset: var(--wp--custom--pastille--boundary-offset-center);
}

.wp-block-lpu-pastille.lpu-pastille--vertical-below {
	--lpu-pastille-boundary-offset: var(--wp--custom--pastille--boundary-offset-below);
}

.lpu-pastille--position-left .lpu-pastille__surface {
	inset-inline-start: var(--lpu-pastille-gutter);
}

.lpu-pastille--position-center .lpu-pastille__surface {
	/* Center offsets by half-width; left/right align directly to their gutters. */
	inset-inline-start: 50%;
	transform: translate(-50%, var(--lpu-pastille-boundary-offset));
}

.lpu-pastille--position-right .lpu-pastille__surface {
	inset-inline-end: var(--lpu-pastille-gutter);
}

.lpu-pastille--flow {
	/* Reserve the badge height so following content stays clear. */
	min-height: var(--lpu-pastille-size);
	padding-block: var(--wp--preset--spacing--sm);
}

.lpu-pastille--flow .lpu-pastille__surface {
	position: relative;
	top: auto;
	inset-inline-start: auto;
	inset-inline-end: auto;
	transform: none;
}

.lpu-pastille--flow.lpu-pastille--position-left .lpu-pastille__surface {
	margin-inline-start: var(--lpu-pastille-gutter);
}

.lpu-pastille--flow.lpu-pastille--position-center .lpu-pastille__surface {
	margin-inline: auto;
}

.lpu-pastille--flow.lpu-pastille--position-right .lpu-pastille__surface {
	margin-inline-end: var(--lpu-pastille-gutter);
	margin-inline-start: auto;
}

.lpu-pastille__text {
	display: block;
	width: 84%;
	height: 84%;
	overflow: visible;
	color: inherit;
}

.lpu-pastille__text text {
	fill: currentColor;
	font-family: var(--wp--preset--font-family--oswald);
	font-size: var(--wp--custom--pastille--text-font-size);
	font-weight: 500;
	letter-spacing: var(--wp--custom--pastille--text-letter-spacing);
}

.lpu-pastille__text--short text {
	font-size: var(--wp--custom--pastille--short-text-font-size);
	letter-spacing: var(--wp--custom--pastille--short-text-letter-spacing);
}

.lpu-pastille__text--medium text {
	font-size: var(--wp--custom--pastille--medium-text-font-size);
	letter-spacing: var(--wp--custom--pastille--medium-text-letter-spacing);
}

.lpu-pastille__graphic {
	display: block;
	width: 51%;
	height: 51%;
	object-fit: contain;
}

@media (max-width: 781px) {
	.wp-block-lpu-pastille.lpu-pastille--hide-small {
		display: none;
	}
}