/**
 * ギャラリー（メイン＋サムネイル）— retro-fudosan/gallery
 *
 * 上にメイン写真、下にサムネイルを1行最大4枚で並べる（写真の数だけ縦に折り返す）。
 * 見た目の設定（角の丸み・すき間・枠の太さと色・縦横比）は CSS 変数で入ってくる。
 * テーマのスタイルに負けないよう、すべて .retro-gallery の中に閉じ込めている。
 */

.retro-gallery {
	--retro-gallery-radius: 0px;
	--retro-gallery-gap: 18px;
	--retro-gallery-border-width: 0px;
	--retro-gallery-border-color: #fff;
	--retro-gallery-active-color: #cd162c; /* 選択中のサムネイルの枠線・キーボード操作時の印（サイトのアクセントカラー） */
	--retro-gallery-main-ratio: 16 / 9;
	box-sizing: border-box;
	width: 100%;
}

.retro-gallery *,
.retro-gallery *::before,
.retro-gallery *::after {
	box-sizing: border-box;
}

.retro-gallery .retro-gallery__viewer {
	display: grid;
	gap: clamp(min(8px, var(--retro-gallery-gap)), 1.5vw, var(--retro-gallery-gap));
}

/* ───── メイン写真 ───── */
.retro-gallery .retro-gallery__item {
	min-width: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: var(--retro-gallery-border-width) solid var(--retro-gallery-border-color);
	border-radius: var(--retro-gallery-radius);
	background: rgba(0, 0, 0, .04);
}

/* メイン写真の背景は白（見切れないよう全体表示するため、写真の縦横比が枠と違うと余白が出る。その余白の色） */
.retro-gallery .retro-gallery__main {
	aspect-ratio: var(--retro-gallery-main-ratio);
	background: #fff;
}

.retro-gallery.is-shadow .retro-gallery__item {
	box-shadow: 0 22px 48px rgba(0, 0, 0, .16);
}

/* 写真の枠（拡大表示オンのときは button、オフのときは div） */
.retro-gallery .retro-gallery__frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
}

.retro-gallery .retro-gallery__button {
	cursor: zoom-in;
}

.retro-gallery .retro-gallery__button:focus-visible {
	outline: 3px solid var(--retro-gallery-active-color);
	outline-offset: -7px;
}

/* メイン写真は、写真の縦横比に関わらず全体を見せる（見切れさせない）。
   枠の縦横比は設定のまま固定し、余った部分は枠の背景色になる */
.retro-gallery .retro-gallery__frame img,
.retro-gallery .retro-gallery__image {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: contain;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

/* メイン写真はマウスを重ねても拡大しない（v1.8.0〜。拡大はサムネイルだけ） */

/* メインが動画のとき: 枠の中にそのまま再生できるプレーヤーを置く（余白は背景の白） */
.retro-gallery .retro-gallery__frame.is-video video {
	cursor: auto;
}

@media (max-width: 768px) {
	.retro-gallery .retro-gallery__item {
		border-width: calc(var(--retro-gallery-border-width) * .75);
		border-radius: calc(var(--retro-gallery-radius) * .77);
	}
}

/* ───── サムネイル（1行に最大4枚。5枚目からは次の行へ折り返し、写真の数だけ縦に並ぶ。スクロールなし） ───── */
.retro-gallery .retro-gallery__thumbs-wrap {
	min-width: 0;
}

.retro-gallery .retro-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(min(6px, var(--retro-gallery-gap)), 1.2vw, min(var(--retro-gallery-gap), 12px));
	margin: 0;
	padding: 0;
	overflow: visible;
}

/* サムネイル1枚。大きさは「幅いっぱい・高さ0＋下の余白56.25%」で 16:9 に固定し、写真は上に重ねる。
   選択・フォーカス・テーマのボタン用スタイルで枠や余白が付いても大きさが変わらず、他の写真が動かない（v1.3.0） */
.retro-gallery .retro-gallery__thumb {
	position: relative;
	display: block;
	width: 100% !important;
	height: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 0 56.25% !important; /* 16:9 */
	overflow: hidden;
	border: 0 !important;
	border-radius: calc(var(--retro-gallery-radius) * .5);
	outline: none;
	background: rgba(0, 0, 0, .04);
	box-shadow: none !important;
	cursor: pointer;
	transform: none !important;
}

.retro-gallery .retro-gallery__thumb img,
.retro-gallery .retro-gallery__thumb video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	border: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

/* マウスを重ねると写真が少し拡大（枠からははみ出さない。設定「マウスを重ねると少し拡大」に連動） */
@media (hover: hover) {
	.retro-gallery.is-hover-zoom .retro-gallery__thumb:hover img,
	.retro-gallery.is-hover-zoom .retro-gallery__thumb:hover video {
		transform: scale(1.08);
	}
}

/* 動画のサムネイル: 真ん中に再生マーク */
.retro-gallery .retro-gallery__play {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 1;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.retro-gallery .retro-gallery__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	border-width: 7px 0 7px 12px;
	border-style: solid;
	border-color: transparent transparent transparent #fff;
	transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
	.retro-gallery .retro-gallery__play { width: 26px; height: 26px; }
	.retro-gallery .retro-gallery__play::before { border-width: 5px 0 5px 9px; }
}

/* 選択中の枠線・キーボード操作時の印は、写真の内側に重ねて描く（外側に広がらないので、他の写真を押さない） */
.retro-gallery .retro-gallery__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	box-shadow: inset 0 0 0 3px transparent;
	pointer-events: none;
	transition: box-shadow .2s ease;
}

.retro-gallery .retro-gallery__thumb[aria-pressed="true"]::after {
	/* アクセントカラー 3px ＋ 内側に白の 1px（暗い写真でも明るい写真でも見分けやすく） */
	box-shadow: inset 0 0 0 3px var(--retro-gallery-active-color), inset 0 0 0 4px rgba(255, 255, 255, .9);
}

.retro-gallery .retro-gallery__thumb:focus-visible::after {
	box-shadow: inset 0 0 0 3px var(--retro-gallery-active-color), inset 0 0 0 4px rgba(255, 255, 255, .9);
}

/* ───── 動きを減らす設定の端末 ───── */
@media (prefers-reduced-motion: reduce) {
	.retro-gallery .retro-gallery__frame img,
	.retro-gallery .retro-gallery__image,
	.retro-gallery .retro-gallery__thumb img { transition: none; }
	.retro-gallery-lightbox,
	.retro-gallery-lightbox .retro-gallery-lightbox__image { transition: none; transform: none; }
}

/* ═════ 拡大表示 ═════ */
.retro-gallery-lightbox[hidden] {
	display: none !important;
}

.retro-gallery-lightbox {
	--retro-gallery-lightbox-duration: .5s;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	/* 列・行の幅を「余白を除いた幅」に固定する（写真が大きくても列が広がらず、真ん中からずれない） */
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(0, 1fr);
	place-items: center;
	margin: 0;
	padding: clamp(18px, 4vw, 52px);
	background: rgba(255, 255, 255, .6); /* 白系の薄いぼかし */
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity var(--retro-gallery-lightbox-duration) ease;
	touch-action: none; /* 指の横移動をブラウザのスクロールではなく、写真の送りに使う */
	-webkit-user-select: none;
	user-select: none;
}

/* ドラッグ中はつかんでいるカーソルに */
.retro-gallery-lightbox.is-dragging,
.retro-gallery-lightbox.is-dragging * {
	cursor: grabbing !important;
}

/* 開くとき: 背景がふわっと出る（is-open）。写真は読み込みが終わったら表示し（is-loaded）、
   押した写真の位置からそのまま大きくなる動きは view.js（Web Animations）で付ける */
.retro-gallery-lightbox.is-open {
	opacity: 1;
}

/* 写真と動画の要素を両方持ち、使わないほうは hidden で隠す（下の display: block より強く効かせる） */
.retro-gallery-lightbox .retro-gallery-lightbox__image[hidden] {
	display: none !important;
}

.retro-gallery-lightbox img.retro-gallery-lightbox__image {
	cursor: grab;
	-webkit-user-drag: none;
}

.retro-gallery-lightbox video.retro-gallery-lightbox__image {
	background: #000;
}

.retro-gallery-lightbox .retro-gallery-lightbox__image {
	position: relative;
	z-index: 1;
	display: block;
	width: auto;
	height: auto;
	/* 最大幅は「余白を除いた幅」（100%）。以前は 94vw で、スマホでは余白を除いた幅より大きくなり、
	   はみ出した分だけ右に寄っていた（v1.9.2 まで） */
	max-width: min(1180px, 100%);
	max-height: 88vh;
	max-height: 88dvh; /* スマホのブラウザのアドレスバー分を除いた高さ（対応していない端末は上の 88vh） */
	margin: 0;
	border-radius: 0;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
	object-fit: contain;
	opacity: 0;
}

.retro-gallery-lightbox.is-loaded .retro-gallery-lightbox__image {
	opacity: 1;
}

/* 前後の写真へ送るボタン（画面の左右の端・上下の真ん中） */
.retro-gallery-lightbox .retro-gallery-lightbox__nav {
	position: fixed;
	top: 50%;
	z-index: 2;
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	color: #1e1e1e;
	cursor: pointer;
	transform: translateY(-50%);
	-webkit-tap-highlight-color: transparent;
}

.retro-gallery-lightbox .retro-gallery-lightbox__nav.is-prev {
	left: max(16px, env(safe-area-inset-left));
}

.retro-gallery-lightbox .retro-gallery-lightbox__nav.is-next {
	right: max(16px, env(safe-area-inset-right));
}

.retro-gallery-lightbox .retro-gallery-lightbox__nav svg {
	display: block;
	width: 24px;
	height: 24px;
}

.retro-gallery-lightbox .retro-gallery-lightbox__nav:focus-visible,
.retro-gallery-lightbox .retro-gallery-lightbox__close:focus-visible {
	outline: 3px solid var(--retro-gallery-active-color, #2f3192);
	outline-offset: 2px;
}

/* 何枚目か（画面の下の真ん中） */
.retro-gallery-lightbox .retro-gallery-lightbox__count {
	position: fixed;
	bottom: max(16px, env(safe-area-inset-bottom));
	left: 50%;
	z-index: 2;
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .9);
	color: #1e1e1e;
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	line-height: 1.6;
	transform: translateX(-50%);
}

/* スマホ: ボタンを少し小さく・端に寄せ、写真は上下の余白（×ボタン・枚数）を空けて大きく見せる */
@media (max-width: 768px) {
	.retro-gallery-lightbox .retro-gallery-lightbox__nav {
		width: 42px;
		height: 42px;
	}
	.retro-gallery-lightbox .retro-gallery-lightbox__nav.is-prev { left: max(8px, env(safe-area-inset-left)); }
	.retro-gallery-lightbox .retro-gallery-lightbox__nav.is-next { right: max(8px, env(safe-area-inset-right)); }
	.retro-gallery-lightbox .retro-gallery-lightbox__image {
		max-height: calc(100vh - 160px);
		max-height: calc(100dvh - 160px);
	}
}

.retro-gallery-lightbox .retro-gallery-lightbox__close {
	position: fixed;
	top: max(18px, env(safe-area-inset-top));
	right: max(18px, env(safe-area-inset-right));
	z-index: 2;
	display: grid;
	width: 48px;
	height: 48px;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
	color: #1e1e1e;
	cursor: pointer;
	font-size: 30px;
	line-height: 1;
}