/**
 * Image variation: Halftone
 *
 * Subtle dot-pattern overlay using radial-gradient on a positioned
 * pseudo-element. Underlying image contrast is preserved — the dots
 * are decorative and use a 25% black tint that disappears at print.
 *
 * The figure must be positioned for the ::after pseudo-element to
 * stack over the image.
 *
 * @package PostFormatsBlockThemes
 * @since 2.1.0
 */

.wp-block-image.is-style-halftone {
	position: relative;
	display: inline-block;
	max-width: 100%;
}

.wp-block-image.is-style-halftone img {
	display: block;
	width: 100%;
}

.wp-block-image.is-style-halftone::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(
		circle at center,
		currentColor 0.5px,
		transparent 1.5px
	);
	background-size: 6px 6px;
	color: rgba(0, 0, 0, 0.25);
	mix-blend-mode: multiply;
	pointer-events: none;
}

.wp-block-image.is-style-halftone figcaption {
	position: relative;
	margin-block-start: var(--wp--preset--spacing--small, 0.75rem);
	margin-block-end: 0;
	margin-inline: 0;
	padding: 0;
}

@media print {
	.wp-block-image.is-style-halftone::after {
		display: none;
	}
}