/* ==========================================================================
   Article image modal — click an image inside .entry-content to view it
   enlarged. Loaded only on singular posts/pages (see inc/enqueue.php).
   ========================================================================== */

body.image-modal-open {
	overflow: hidden;
}

.image-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	/* Always flex (not toggled with display:none) — display can't be
	   transitioned, so opacity/pointer-events alone control both showing
	   and hiding, letting the fade play in both directions. */
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(17, 17, 17, 0.9);
	/* Top padding must stay bigger than the close button's height + gap
	   below (it sits entirely above the image), on every breakpoint, or it
	   would get clipped by the screen edge on narrow phones. */
	padding: 48px 24px 24px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.image-modal.is-open {
	opacity: 1;
	pointer-events: auto;
}

.image-modal-inner {
	position: relative;
	max-width: 100%;
	max-height: 100%;
	transform: scale( 0.96 );
	transition: transform 0.25s ease;
}

.image-modal.is-open .image-modal-inner {
	transform: scale( 1 );
}

.image-modal-img {
	/* No explicit size — the image renders at its own natural size by
	   default. max-width/max-height only ever shrink it, never enlarge it
	   past that, so it can't grow beyond its original dimensions. */
	display: block;
	max-width: 100%;
	max-height: calc(100vh - 64px);
	width: auto;
	height: auto;
	margin: 0 auto;
	border-radius: var(--radius-sm);
}

/* Sits entirely above the image, aligned to its right edge — never
   overlaps the image itself. Not fixed to the viewport; the modal's own
   top padding is what keeps it from being clipped by the screen edge, on
   any image size or viewport width. */
.image-modal-close {
	position: absolute;
	bottom: 100%;
	right: 0;
	margin-bottom: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 1.5px solid #fff;
	border-radius: 0;
	cursor: pointer;
	z-index: 210;
	/* The square border above is deliberate and always shown, instead of
	   relying on the browser's default focus outline — that only appears
	   while focused, and focus is gained/lost at unpredictable times
	   (auto-focused on open, browser-dependent otherwise), which looked
	   inconsistent. */
	outline: none;
}

.image-modal-close-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 3px;
	background: #fff;
	border-radius: 2px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.image-modal-close-bar:first-child {
	transform: translate( -50%, -50% ) rotate( 45deg );
}

.image-modal-close-bar:last-child {
	transform: translate( -50%, -50% ) rotate( -45deg );
}

.image-modal-close:hover {
	border-color: #ddd;
}

.image-modal-close:hover .image-modal-close-bar {
	background: #ddd;
}

@media ( max-width: 767px ) {
	.image-modal {
		padding: 40px 20px 20px;
	}

	.image-modal-close {
		margin-bottom: 6px;
		width: 28px;
		height: 28px;
	}

	.image-modal-close-bar {
		width: 16px;
	}
}