/**
 * 善のAX研究所 single post — enlarge [zen_figure] images (assets/js/lab-figure.js).
 * The figure itself is styled in main.css (.c-figure); this adds the zoom
 * button, the mobile-only 「タップで拡大」 hint and the overlay (.c-lightbox).
 */
.c-figure__zoom {
	display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
	border-radius: 12px; cursor: zoom-in; position: relative;
}
.c-figure__zoom:focus-visible { outline: 3px solid var(--c-main); outline-offset: 3px; }
.c-figure__zoom::after {
	/* small magnifier badge (decorative) */
	content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
	background: rgba(4, 52, 80, .78) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5 5M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 20px no-repeat;
	opacity: .85; transition: opacity .2s ease;
}
.c-figure__zoom:hover::after, .c-figure__zoom:focus-visible::after { opacity: 1; }
.c-figure__hint { display: none; }

@media (max-width: 767px) {
	.c-figure__zoom::after { width: 30px; height: 30px; right: 8px; bottom: 8px; background-size: 18px; }
	.c-figure__hint {
		display: block; margin: 6px 0 0; font-size: 12.5px; font-weight: 700; letter-spacing: .08em;
		color: var(--c-main-deep); text-align: right;
	}
}

/* ---------- overlay ---------- */
.c-lightbox {
	position: fixed; inset: 0; z-index: 10000;
	background: rgba(8, 20, 30, .92);
	opacity: 0; transition: opacity .2s ease;
	touch-action: pan-x pan-y pinch-zoom;
}
.c-lightbox[hidden] { display: none; }
.c-lightbox.is-open { opacity: 1; }
.c-lightbox__scroller {
	position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	display: flex; padding: 64px 3vw 32px;
}
.c-lightbox__scroller:focus-visible { outline: 3px solid var(--c-main); outline-offset: -3px; }
.c-lightbox__img {
	display: block; margin: auto; /* centres when smaller, scrolls from the edge when larger */
	width: auto; height: auto; max-width: min(1600px, 94vw); max-height: calc(100vh - 110px);
	background: #fff; border-radius: 10px; cursor: default;
}
.c-lightbox__close {
	position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .7); background: rgba(4, 52, 80, .9); color: #fff;
	font-size: 30px; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.c-lightbox__close:hover { background: var(--c-main-deep); }
.c-lightbox__close:focus-visible { outline: 3px solid var(--c-main); outline-offset: 3px; }

/* phones: show the figure ~2x the screen width, scroll sideways to read */
@media (max-width: 767px) {
	.c-lightbox__scroller { padding: 72px 16px 24px; align-items: center; }
	.c-lightbox__img { width: 200vw; max-width: none; max-height: none; margin: auto 0; flex: none; }
	.c-lightbox__scroller::after { content: ""; flex: none; width: 16px; } /* right padding inside the scroll area */
}

@media (prefers-reduced-motion: reduce) {
	.c-lightbox, .c-figure__zoom::after { transition: none; }
}