/* Lightbox overlay -- replaces swipebox's stylesheet. Self-hosted. */
.dim-lightbox {
	position: fixed; inset: 0; z-index: 9999; display: none;
	background: rgba(0,0,0,0.92);
	align-items: center; justify-content: center;
}
.dim-lightbox.is-open { display: flex; }
body.dim-lb-lock { overflow: hidden; }

.dim-lb-stage { margin: 0; max-width: 96vw; max-height: 96vh; text-align: center; }
.dim-lb-stage img {
	max-width: 96vw; max-height: 86vh;
	width: auto; height: auto; object-fit: contain;
}
.dim-lb-stage figcaption {
	color: #fff; font-size: 14px; padding: 10px 16px 0;
	max-width: 60em; margin: 0 auto; line-height: 1.4;
}

.dim-lightbox button {
	position: absolute; background: none; border: 0; color: #fff;
	cursor: pointer; opacity: 0.85; transition: opacity 150ms;
	font-size: 48px; line-height: 1; padding: 12px;
}
.dim-lightbox button:hover, .dim-lightbox button:focus { opacity: 1; outline: none; }
.dim-lb-close { top: 6px; right: 12px; font-size: 40px; }
.dim-lb-prev { left: 8px;  top: 50%; transform: translateY(-50%); }
.dim-lb-next { right: 8px; top: 50%; transform: translateY(-50%); }
.dim-lb-count {
	position: absolute; bottom: 10px; left: 0; right: 0;
	text-align: center; color: #bbb; font-size: 13px;
}

/* Auto-hiding chrome, as swipebox did after 5s of no interaction. */
.dim-lightbox.dim-lb-idle button,
.dim-lightbox.dim-lb-idle .dim-lb-count { opacity: 0; }
.dim-lightbox.dim-lb-idle:hover button { opacity: 0.85; }

/* Article images are clickable -- hint it. */
.the-content .wp-caption a { cursor: zoom-in; display: inline-block; }