/**
 * css/components/lightbox.css
 * ============================================================
 * A LEGEND 2：Splide Lightbox
 * ============================================================
 *
 * 役割：
 * - 共通Lightboxの表示、暗幕、画像、Splide矢印、paginationを定義します。
 * - 通常ページ内スライダーの .aleg2-slider とは分離し、.aleg2-lightbox 配下で完結します。
 *
 * 方針：
 * - 画像は object-fit: contain で全体表示を優先します。
 * - 縦長画像、横長画像、小さい画像のいずれも画面外へはみ出さないようにします。
 * - Lightbox表示中は最前面レイヤーとして扱い、固定ヘッダーやpointer glowの上へ出します。
 */

.aleg2-lightbox {
	position: fixed;
	inset: 0;
	z-index: calc(var(--aleg2-z-modal, 9000) + 20);
	display: grid;
	place-items: center;
	padding: clamp(16px, 3vw, 40px);
	color: #fff;
	background: rgba(0, 0, 0, 0.88);
	backdrop-filter: blur(20px);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--aleg2-duration-normal, 0.28s) var(--aleg2-ease-standard, ease);
}

.aleg2-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}

.aleg2-lightbox__backdrop {
	position: absolute;
	inset: 0;
	cursor: zoom-out;
}

.aleg2-lightbox__dialog {
	position: relative;
	z-index: 1;
	width: min(100%, 1440px);
	height: min(100%, calc(100vh - 32px));
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	align-items: center;
}

.aleg2-lightbox__slider,
.aleg2-lightbox__track,
.aleg2-lightbox .splide__track,
.aleg2-lightbox .splide__list,
.aleg2-lightbox .splide__slide {
	height: 100%;
}

.aleg2-lightbox__slider {
	width: 100%;
	min-width: 0;
}

.aleg2-lightbox__slide {
	display: grid;
	place-items: center;
	padding: clamp(44px, 7vh, 76px) clamp(8px, 6vw, 96px) clamp(48px, 7vh, 84px);
}

.aleg2-lightbox__figure {
	display: grid;
	grid-template-rows: minmax(0, auto) auto;
	justify-items: center;
	align-items: center;
	gap: var(--aleg2-space-3, 12px);
	width: 100%;
	height: 100%;
	margin: 0;
}

.aleg2-lightbox__image {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: calc(100vh - clamp(148px, 20vh, 220px));
	object-fit: contain;
	border-radius: var(--aleg2-radius-md, 16px);
	box-shadow: var(--aleg2-shadow-strong, 0 24px 80px rgba(0, 0, 0, 0.35));
	background: rgba(255, 255, 255, 0.04);
}


/**
 * 画像ロード状態
 * ------------------------------------------------------------
 * Splide lazyLoadとテーマ側の ensureImageLoaded() のどちらで読み込まれても、
 * 成功/失敗の状態をslide側へ集約します。
 * 画像URL切れやブラウザlazyの差異があっても、読み込み中表示が残り続けないようにします。
 */
.aleg2-lightbox__slide.is-loaded .splide__spinner,
.aleg2-lightbox__slide.is-error .splide__spinner {
	display: none;
}

.aleg2-lightbox__error {
	display: none;
	max-width: min(100%, 640px);
	margin: 0;
	padding: 1em 1.25em;
	color: rgba(255, 255, 255, 0.86);
	font-size: 0.9rem;
	line-height: 1.7;
	text-align: center;
	background: rgba(0, 0, 0, 0.38);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--aleg2-radius-md, 16px);
	backdrop-filter: blur(12px);
}

.aleg2-lightbox__slide.is-error .aleg2-lightbox__image {
	display: none;
}

.aleg2-lightbox__slide.is-error .aleg2-lightbox__error {
	display: block;
}

.aleg2-lightbox__caption {
	max-width: min(100%, 900px);
	margin: 0;
	color: rgba(255, 255, 255, 0.82);
	font-size: clamp(0.78rem, 1vw, 0.95rem);
	line-height: 1.7;
	text-align: center;
}

.aleg2-lightbox__close,
.aleg2-lightbox .splide__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: #fff;
	background: rgba(255, 255, 255, 0.11);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: 999px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(14px);
	transition:
		color var(--aleg2-duration-fast, 0.18s) var(--aleg2-ease-standard, ease),
		background var(--aleg2-duration-fast, 0.18s) var(--aleg2-ease-standard, ease),
		border-color var(--aleg2-duration-fast, 0.18s) var(--aleg2-ease-standard, ease),
		transform var(--aleg2-duration-fast, 0.18s) var(--aleg2-ease-standard, ease),
		opacity var(--aleg2-duration-fast, 0.18s) var(--aleg2-ease-standard, ease);
}

.aleg2-lightbox__close:hover,
.aleg2-lightbox__close:focus-visible,
.aleg2-lightbox .splide__arrow:hover,
.aleg2-lightbox .splide__arrow:focus-visible {
	color: var(--aleg2-color-primary, currentColor);
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.42);
}

.aleg2-lightbox__close:focus-visible,
.aleg2-lightbox .splide__arrow:focus-visible,
.aleg2-lightbox .splide__pagination__page:focus-visible {
	outline: 2px solid var(--aleg2-color-primary, #fff);
	outline-offset: 3px;
}

.aleg2-lightbox__close {
	position: absolute;
	top: clamp(8px, 1.4vw, 18px);
	right: clamp(8px, 1.4vw, 18px);
	z-index: 4;
	padding: 0;
	cursor: pointer;
}

.aleg2-lightbox__close-icon {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.aleg2-lightbox .splide__arrow {
	z-index: 3;
	opacity: 1;
}

.aleg2-lightbox .splide__arrow svg {
	width: 1.15em;
	height: 1.15em;
	fill: currentColor;
}

.aleg2-lightbox .splide__arrow--prev {
	left: clamp(8px, 1.8vw, 24px);
}

.aleg2-lightbox .splide__arrow--next {
	right: clamp(8px, 1.8vw, 24px);
}

.aleg2-lightbox .splide__arrow:disabled {
	opacity: 0.25;
	pointer-events: none;
}

.aleg2-lightbox__counter {
	position: absolute;
	right: clamp(12px, 2vw, 28px);
	bottom: clamp(12px, 2vw, 28px);
	z-index: 3;
	padding: 0.35em 0.75em;
	color: rgba(255, 255, 255, 0.78);
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	line-height: 1.4;
	background: rgba(0, 0, 0, 0.34);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	backdrop-filter: blur(12px);
}

.aleg2-lightbox__counter[hidden] {
	display: none;
}

.aleg2-lightbox .splide__pagination {
	bottom: clamp(14px, 2vw, 28px);
	left: 50%;
	right: auto;
	z-index: 3;
	gap: 8px;
	width: auto;
	padding: 0.4em 0.6em;
	background: rgba(0, 0, 0, 0.24);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	backdrop-filter: blur(12px);
	transform: translateX(-50%);
}

.aleg2-lightbox .splide__pagination__page {
	width: 7px;
	height: 7px;
	margin: 0;
	background: rgba(255, 255, 255, 0.42);
	opacity: 1;
	transform: none;
	transition:
		width var(--aleg2-duration-fast, 0.18s) var(--aleg2-ease-standard, ease),
		background var(--aleg2-duration-fast, 0.18s) var(--aleg2-ease-standard, ease);
}

.aleg2-lightbox .splide__pagination__page.is-active {
	width: 18px;
	background: var(--aleg2-color-primary, #fff);
	transform: none;
}

html.aleg2-lightbox-is-open .aleg2-pointer-glow,
html.aleg2-lightbox-is-open [data-aleg2-pointer-glow] {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 760px) {
	.aleg2-lightbox {
		padding: 0;
	}

	.aleg2-lightbox__dialog {
		width: 100%;
		height: 100dvh;
	}

	.aleg2-lightbox__slide {
		padding: 64px 14px 84px;
	}

	.aleg2-lightbox__image {
		max-height: calc(100dvh - 176px);
		border-radius: var(--aleg2-radius-sm, 10px);
	}

	.aleg2-lightbox__caption {
		font-size: 0.78rem;
	}

	.aleg2-lightbox__close,
	.aleg2-lightbox .splide__arrow {
		width: 44px;
		height: 44px;
	}

	.aleg2-lightbox__close {
		top: max(12px, env(safe-area-inset-top));
		right: max(12px, env(safe-area-inset-right));
	}

	.aleg2-lightbox .splide__arrow {
		top: auto;
		bottom: max(20px, env(safe-area-inset-bottom));
		transform: none;
	}

	.aleg2-lightbox .splide__arrow--prev {
		left: max(14px, env(safe-area-inset-left));
	}

	.aleg2-lightbox .splide__arrow--next {
		right: max(14px, env(safe-area-inset-right));
	}

	.aleg2-lightbox .splide__pagination {
		bottom: max(24px, env(safe-area-inset-bottom));
		max-width: calc(100vw - 132px);
		overflow: hidden;
	}

	.aleg2-lightbox__counter {
		top: max(18px, env(safe-area-inset-top));
		bottom: auto;
		left: max(14px, env(safe-area-inset-left));
		right: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aleg2-lightbox,
	.aleg2-lightbox__close,
	.aleg2-lightbox .splide__arrow,
	.aleg2-lightbox .splide__pagination__page {
		transition: none;
	}
}