/* Broken image controller (inc/broken-images.php). The wrapper mirrors
   the original <img>'s box exactly (it's inserted right where the image
   was, then the image moves inside it) so the message has something to
   center over regardless of the image's own width/height attributes. */

.nonotami-broken-image {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 400px;
	max-width: 100%;
	aspect-ratio: 1 / 1;
}

.nonotami-broken-image img {
	display: block;
	width: 100%;
	height: 100%;
	/* Always a square box, centered, regardless of whatever width/height
	   the original <img> happened to declare — the placeholder graphic
	   fits inside it rather than being stretched to a non-square shape. */
	object-fit: contain;
}

.nonotami-broken-image-caption {
	position: absolute;
	top: 65%;
	left: 50%;
	transform: translate( -50%, -50% );
	max-width: 80%;
	box-sizing: border-box;
	padding: 0.5rem 0.75rem;
	background: rgba( 255, 255, 255, 0.85 );
	color: #000;
	font-style: italic;
	text-align: center;
	white-space: nowrap;
	border-radius: 4px;
}