/* ==========================================================================
   写真の拡大（ポップアップ。inc/lightbox.php・assets/js/lightbox/lightbox.js。2026-10-05）
   - c-lightbox-trigger: 押すと拡大する写真（記事の本文の写真と図・施工事例の写真）。カーソルは虫めがね
   - c-lightbox: 画面いっぱいの <dialog>。暗い濃紺の背景に写真を1枚（施工事例の見比べは、施工前と施工後の2枚を並べる＝is-pair）
   - 閉じるボタンは画面の右上に固定。写真の外（暗い所）を押しても閉じる
   動きは付けない（浮き上がりなどの動きはユーザーが嫌う。2026-10-02）。Figma にはまだない
   ========================================================================== */

.c-lightbox-trigger {
	cursor: zoom-in;
}

.c-lightbox-trigger:focus-visible {
	outline: 3px solid var(--color-border-brand);
	outline-offset: 3px;
}

/* 施工事例の1枚の写真は、見比べの部品と同じ枠で pointer-events: none なので、押せるように戻す */
.p-works-single__viewer--single img.c-lightbox-trigger {
	pointer-events: auto;
}

/* 開いているあいだは、うしろのページをスクロールさせない */
html.is-lightbox-open {
	overflow: hidden;
}

.c-lightbox {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text-on-brand);
	overscroll-behavior: contain;
}

.c-lightbox::backdrop {
	background: rgb(21 37 48 / 0.97); /* 濃紺 #152530（--navy-900）。うしろの文字が説明と重ならないよう、ほぼ不透明に */
}

.c-lightbox__close {
	position: fixed;
	top: var(--space-md);
	right: var(--space-md);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-full);
	background: var(--color-bg-canvas);
	color: var(--color-text-primary);
	cursor: pointer;
}

.c-lightbox__close:focus-visible {
	outline: 3px solid var(--color-text-on-brand);
	outline-offset: 3px;
}

.c-lightbox__body {
	box-sizing: border-box;
	display: flex;
	gap: var(--space-xl);
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: 80px var(--space-xl) var(--space-xl); /* 上は閉じるボタンの分 */
}

.c-lightbox__figure {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	align-items: center;
	min-width: 0;
	margin: 0;
}

.c-lightbox__img {
	display: block;
	width: auto;
	max-width: min(100%, 1200px);
	height: auto;
	max-height: calc(100dvh - 160px);
	object-fit: contain;
	background: var(--color-bg-canvas); /* 透明な PNG の図（コラムの図解）も白の上で見せる */
	border-radius: var(--radius-lg);
}

.c-lightbox__label {
	align-self: flex-start;
	padding: var(--space-2xs) var(--space-sm);
	border-radius: 6px;
	background: var(--color-bg-canvas);
	color: var(--color-text-primary);
	font: var(--text-label-s);
	letter-spacing: var(--ls-label-s);
}

.c-lightbox__caption {
	max-width: 720px;
	font: var(--text-body-s);
	letter-spacing: var(--ls-caption);
	text-align: center;
}

/* 施工前と施工後を並べる（PC は横に2枚、SP は縦に2枚でスクロール） */
.c-lightbox.is-pair .c-lightbox__figure {
	flex: 1 1 0;
}

.c-lightbox.is-pair .c-lightbox__img {
	max-height: calc(100dvh - 200px);
}

@media (max-width: 767px) {
	.c-lightbox__close {
		top: var(--space-sm);
		right: var(--space-sm);
	}

	.c-lightbox__body {
		gap: var(--space-lg);
		padding: 72px var(--space-md) var(--space-lg);
	}

	.c-lightbox__img {
		max-height: calc(100dvh - 140px);
		border-radius: var(--radius-md);
	}

	.c-lightbox.is-pair .c-lightbox__body {
		flex-direction: column;
		justify-content: flex-start;
	}

	.c-lightbox.is-pair .c-lightbox__figure {
		flex: none;
		width: 100%;
	}

	.c-lightbox.is-pair .c-lightbox__img {
		max-height: none;
	}
}