/*
 * selectionページ（page-selection.php）専用のCSS。
 * 一覧グリッドと、詳細を表示するライトボックス（assets/js/selection-lightbox.js）
 * の両方をここで定義する。色はサイト全体の既存トークン（--gk-color-bg等）を
 * そのまま使い、新しい色は増やさない。
 */

/*
 * 一覧グリッド。8カラム→タブレット幅で4カラム→スマホ幅で2カラム
 * （既存の.exh-archive-grid、assets/css/exhibitions.cssと同じ、1366px/767pxの
 * 2段ブレークポイントに揃え、カラム数はそのつど半分にしている）。
 * margin-topは、画像の絶対位置をspaceページの画像帯の画像（[info]ナビ直下から
 * PC/タブレット137px、スマホ134px）と同じ絶対Y座標に揃えるための値
 * （実測ベース。レイアウトの統一原則、CLAUDE.md参照。.page-headingの高さぶんを
 * 差し引いた分、単純な24px/16pxより大きくなっている）。
 */
.selection-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: var(--gk-unit);
	margin-top: 63px;
	margin-bottom: calc(var(--gk-unit) * 2);
}

@media (max-width: 1366px) {
	.selection-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 767px) {
	.selection-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--gk-unit-mobile);
		margin-top: 72px;
	}
}

.selection-grid__item {
	display: block;
	width: 100%;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.selection-grid__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * ---------- ライトボックス ----------
 * ポップアップ型（既存の画像ライトボックスのような全画面表示ではない）。
 * 一覧グリッド（背景）を薄暗く隠すbackdrop（.gk-selection-lightbox__backdrop）の上に、
 * 実際の内容を一回り小さいボックス（.gk-selection-lightbox__box）として中央に重ねる
 * （使用イメージのオーバーレイ、.gk-selection-lightbox__overlayと同じ考え方）。
 * 上部バー（closeのテキストボタンのみ）はクラス名も含めて既存の画像ライトボックス
 * から流用し、右側にキャプションボックス（selection固有）を追加した構成。商品間の
 * 前後移動（prev/next・矢印ゾーン・スワイプ・ドット）は無い。JSは別実装
 * （assets/js/selection-lightbox.js）。
 */
.gk-selection-lightbox {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gk-unit);
}

.gk-selection-lightbox[hidden] {
	display: none;
}

/* 背景（一覧グリッド）を薄暗く隠す。グレー表現の慣例と同じく、新しい色を増やさずopacityで表現する */
.gk-selection-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: var(--gk-color-text);
	opacity: 0.5;
}

/*
 * 既存の画像ライトボックスの.gk-lightbox__barは、件数表示（左）とactions（右）の
 * 2要素をjustify-content: space-betweenで両端に振り分ける前提。selectionでは
 * 件数表示自体が無く（商品間の前後移動が無いため）actionsだけが残るため、
 * space-betweenのままだと唯一の子要素が左端に寄ってしまう。closeボタンを
 * 右端に固定する。
 */
.gk-selection-lightbox .gk-lightbox__bar {
	justify-content: flex-end;
}

/*
 * ライトボックスを開いている間、背後のページのスクロールを止める。html側にも
 * 付けているのは、このサイトでは<html>がスクロール制御要素になっているため
 * （既存のassets/js/lightbox.js・gk-lightbox-openと同じ考え方）。
 */
html.gk-selection-lightbox-open,
body.gk-selection-lightbox-open {
	overflow: hidden;
}

/*
 * 実際に見える内容（bar・body・media-caption）をまとめたボックス。backdropの
 * 上に重ねるためposition: relative + z-index: 1。widthは指定せず中身
 * （画像＋キャプション）の幅にフィットさせ、max-widthとmax-heightで画面から
 * はみ出さないようにする（はみ出す場合はoverflow-y: autoでボックス自体が
 * スクロールする）。
 */
.gk-selection-lightbox__box {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	max-width: calc(100% - var(--gk-unit) * 2);
	max-height: 100%;
	background: var(--gk-color-bg);
	overflow-y: auto;
}

/*
 * justify-content: centerは、画像（stage）とキャプションをひとまとまりとして
 * bodyの中央に配置するため。
 * 全画面表示だったときは、stageの高さ（ビューポート基準のcalc式）が常に
 * captionの中身の自然な高さより大きく、align-items: stretch（デフォルト）で
 * captionをstageの高さに引き伸ばし、その中の説明文（flex: 1）を「画像の高さに
 * 収まる分だけ表示し、はみ出る場合は… moreで省略する」可変クランプにしていた。
 * ポップアップ化でstageを固定400pxまで小さくした結果、説明文が長い商品では
 * この可変クランプがほぼ0になってしまう（画像の高さの方が本文の他の項目
 * （作品名〜価格）だけで埋まってしまうため）。ポップアップでは画像の高さに
 * 文章量を合わせる意味も薄いため、この可変クランプ自体をやめ、キャプションは
 * 常に中身の自然な高さで表示する（align-items: flex-startで、画像とは
 * 上端だけそろえる。タブレット・スマホ幅の「画像の下に積む」ときと同じ
 * 考え方。__caption、__col.is-visible、__fields、__row--desc、__desc参照）。
 * ボックス自体の高さがビューポートを超える場合は、.gk-selection-lightbox__box
 * のoverflow-y: autoでボックスごとスクロールする。
 */
.gk-selection-lightbox__body {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	min-height: 0;
}

/*
 * 中央: 画像の表示領域。width/heightを明示的に指定した正方形の箱にし、
 * marginで周囲の余白を確保する（右だけ他の辺より大きい32pxは、画像の右端と
 * キャプションボックスの間の余白）。全画面表示だったときの
 * calc(100vh - 224px)から、ポップアップ化にあたって一回り小さい固定値に
 * 変更した。
 */
.gk-selection-lightbox__stage {
	flex: 0 0 auto;
	position: relative;
	width: 400px;
	height: 400px;
	margin: var(--gk-unit) 32px var(--gk-unit) var(--gk-unit);
	overflow: hidden;
}

.gk-selection-lightbox__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 画像＋右のキャプション、両方の下に続く一言。既存の画像ライトボックス
 * （.gk-lightbox__caption）と高さ・余白・文字サイズを完全にそろえている
 * （3行ぶんの固定高さで、内容の行数に関わらず画像の位置がぶれないようにする
 * 考え方も含めて同じ）。幅は画像の列だけでなくbody全体（＝右のキャプション
 * ボックスまで含めた幅）いっぱいにしている（既存の画像ライトボックスの
 * キャプションも、画像だけでなくライトボックス全体の幅で改行・センター
 * 揃えされるため）。問い合わせの一言をここに1行で表示する
 * （assets/js/selection-lightbox.js、MEDIA_NOTE参照）。中のテキストは
 * 別要素（span、data-gk-selection-media-caption-text）に入れていて、
 * この一言自体はflexで縦センター、中のspanは継承したtext-align: centerで
 * 横センター揃えになる。
 */
.gk-selection-lightbox__media-caption {
	flex-shrink: 0;
	height: calc(var(--gk-lh-body) * 3 + var(--gk-unit));
	overflow-y: auto;
	padding: 0 var(--gk-unit) var(--gk-unit);
	margin: 0;
	font-size: var(--gk-fs-body);
	line-height: var(--gk-lh-body);
	opacity: 0.6;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* text-alignはこのspanが継承する（親.media-captionのtext-align: centerのまま、センター合わせ） */
.gk-selection-lightbox__media-caption span {
	display: block;
	width: 100%;
}

/*
 * 問い合わせ一言の途中（JP「〜ございましたら」/EN「items, 」の直後）に常に
 * 入れているbr（assets/js/selection-lightbox.js、buildTextWithLink参照）。
 * PC・タブレットでは無効にし、通常の折り返しに任せる。スマホ幅でだけ
 * display: noneを解除し、指定した位置で必ず改行させる。
 */
.gk-selection-lightbox__mobile-break {
	display: none;
}

/*
 * 右側: キャプションボックス（1カラム）。JP/ENはタブ切り替え（同時併記はしない。
 * 詳細はassets/js/selection-lightbox.js参照）。heightは指定せず、中身の自然な
 * 高さのまま（.gk-selection-lightbox__body上部のコメント参照）。
 */
.gk-selection-lightbox__caption {
	width: 360px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	padding: var(--gk-unit);
}

/*
 * 日本語/ENGLISHのタブ。既存の.exh-detail__lang-toggle buttonと同じ見た目
 * （下線で選択中を示す）だが、ラベルが「jp/en」ではなく「日本語/ENGLISH」という
 * このキャプションボックス固有の表記のため、クラスは共有せず同じスタイルを
 * ここに複製している。
 */
.gk-selection-lightbox__tabs {
	flex-shrink: 0;
	display: flex;
	gap: var(--gk-unit);
	margin-bottom: var(--gk-unit);
}

.gk-selection-lightbox__tabs button {
	font-family: inherit;
	font-size: var(--gk-fs-base);
	letter-spacing: var(--gk-tracking);
	background: none;
	border: none;
	padding: 0;
	line-height: normal;
	border-bottom: 1px solid transparent;
	cursor: pointer;
	opacity: 0.5;
}

.gk-selection-lightbox__tabs button.is-active {
	opacity: 1;
	border-bottom-color: currentColor;
}

/*
 * jp/enパネル1つ分。中身はfields（作品名〜簡単な説明＋任意のリンク）のみ
 * （問い合わせ一言は画像下のmedia-captionに移動済み）。画像の高さに文章量を
 * 合わせる可変クランプはやめ（.gk-selection-lightbox__body上部のコメント
 * 参照）、常に自然な高さで全文表示する。
 */
.gk-selection-lightbox__col {
	display: none;
	flex-direction: column;
	font-size: var(--gk-fs-base);
	line-height: var(--gk-lh-body);
}

.gk-selection-lightbox__col.is-visible {
	display: flex;
}

.gk-selection-lightbox__fields {
	display: flex;
	flex-direction: column;
}

.gk-selection-lightbox__row {
	flex-shrink: 0;
	margin-bottom: var(--gk-paragraph-gap);
}

.gk-selection-lightbox__row--desc {
	display: flex;
	flex-direction: column;
}

/* fields内で最後の行になる場合は、下の余白を詰める */
.gk-selection-lightbox__row--desc:last-child {
	margin-bottom: 0;
}

/* 別ページ・別イメージへの任意のテキストリンク。他の項目より一回り小さい12pxにしている */
.gk-selection-lightbox__link-row {
	font-size: 12px;
}

.gk-selection-lightbox__link-row:last-child {
	margin-bottom: 0;
}

/*
 * 改行1行ぶん（buildDescLines、assets/js/selection-lightbox.js参照）。marginは
 * 付けない（もともと改行は余白を作らないため、行どうしを詰めたまま表示する。
 * 空行＝空のpもそのまま1行ぶんの高さとして残り、段落間の空行として見える）。
 * 日本語のみ均等揃え（text-align-lastは使わない。1行に収まる短い行や、
 * 各行自体の最後の行まで無理に引き伸ばさないため。detail-layout.cssの
 * .exh-detail__bodyと同じ考え方）。英語はハイフネーションが無く不自然に
 * 間延びしやすいため対象外（左揃えのまま）。
 */
.gk-selection-lightbox__desc-line {
	margin: 0;
}

[data-gk-selection-panel="ja"] .gk-selection-lightbox__desc-line {
	text-align: justify;
	text-justify: inter-character;
}

.gk-selection-lightbox__row-label {
	display: block;
	flex-shrink: 0;
	opacity: 0.6;
	font-size: var(--gk-fs-body);
	letter-spacing: var(--gk-tracking);
}

.gk-selection-lightbox__title {
	font-size: var(--gk-fs-base);
	font-weight: 500;
	margin-bottom: calc(var(--gk-unit) / 2);
}

/* priceに「soldout」と入力された場合の強調色。営業状態バナーの「本日休業」（style.css、--gk-color-status-closed）と同じ色に揃える */
.gk-selection-lightbox__price--soldout {
	color: var(--gk-color-status-closed);
}

/*
 * タブレット・モバイル幅では、キャプションを画像の右ではなく下に積む
 * （画像とキャプションの間に横方向の余白を取る、というデスクトップ幅だけの
 * 考え方はここでは不要なため、marginは均等・画像は中央寄せに戻す）。ボックス
 * 自体の横幅も、積み重なる分だけコンパクトな上限に絞る（画像とキャプションが
 * 横並びのデスクトップ幅ほど広い必要が無いため）。stageの大きさは、
 * ビューポートの高さ基準（デスクトップのcalc(100vh - 224px)相当）ではなく、
 * ボックス自身の幅に対する比率（aspect-ratio: 1 / 1の正方形、幅いっぱい・
 * 上限あり）にする。
 */
@media (max-width: 1366px) {
	.gk-selection-lightbox__box {
		max-width: min(480px, calc(100% - var(--gk-unit) * 2));
	}

	/*
	 * justify-content: centerはbodyの基本ルール（画像とキャプションを横方向に
	 * 中央寄せするため）で指定しているが、flex-direction: columnに変えると
	 * justify-contentの向きも縦方向に変わってしまう（意図しない縦方向の
	 * 中央寄せになる）ため、flex-startに戻す。
	 */
	.gk-selection-lightbox__body {
		flex-direction: column;
		justify-content: flex-start;
	}

	.gk-selection-lightbox__stage {
		flex: none;
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
		margin: var(--gk-unit) auto;
	}

	/*
	 * この幅では画像とキャプションが縦に積まれるため、キャプション内の文字
	 * （作品名〜説明文まで全部）の左端を、画像の左端とそろえたい。しかし
	 * ボックス自体にもpaddingやborderが無いため、この幅では画像・キャプションとも
	 * ボックス幅いっぱい＝左端が自然に一致する（JS側の調整は不要。
	 * syncCaptionInsetはデスクトップ⇔この幅の切り替え時にpadding-leftを
	 * 明示的に空にする）。
	 */
	.gk-selection-lightbox__caption {
		width: 100%;
		flex-shrink: 0;
		display: block;
	}

	.gk-selection-lightbox__col.is-visible {
		display: block;
	}

	.gk-selection-lightbox__fields {
		display: block;
	}

	.gk-selection-lightbox__row--desc {
		display: block;
	}
}

@media (max-width: 767px) {
	.gk-selection-lightbox {
		padding: var(--gk-unit-mobile);
	}

	.gk-selection-lightbox__box {
		max-width: min(480px, calc(100% - var(--gk-unit-mobile) * 2));
	}

	.gk-selection-lightbox__stage {
		margin: var(--gk-unit-mobile) auto;
	}

	.gk-selection-lightbox__caption {
		padding: var(--gk-unit-mobile);
	}

	.gk-selection-lightbox__mobile-break {
		display: inline;
	}
}

/*
 * 「… more」トリガー。実際に省略されたかどうかはJS側（checkDescClamp）で
 * scrollHeightを見て判定し、省略された場合だけ直後に挿入する
 * （.gk-selection-lightbox__desc参照）。
 */
.gk-selection-lightbox__more {
	display: block;
	flex-shrink: 0;
	margin-top: calc(var(--gk-paragraph-gap) / 2);
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: 12px;
	line-height: var(--gk-lh-body);
	letter-spacing: var(--gk-tracking);
	opacity: 0.6;
	cursor: pointer;
}

.gk-selection-lightbox__more:hover {
	opacity: 1;
}

/*
 * 商品ライトボックスの上に重ねる一時的なオーバーレイ（全文テキスト／画像共通）。
 * 開いている間は、既存のprev/next（テキストボタン・矢印ゾーンとも）を隠す
 * （商品間の移動と、テキストを読む／画像を見る操作が混ざらないようにするため）。
 */
.gk-selection-lightbox__overlay {
	position: fixed;
	inset: 0;
	z-index: 150;
	display: flex;
	align-items: center;
	justify-content: center;
}

.gk-selection-lightbox__overlay[hidden] {
	display: none;
}

/*
 * 全文テキストオーバーレイは、背景（商品ライトボックス）を「薄く」見せつつも、
 * 背後のテキスト（説明文など）が透けて読めてしまうと、手前のオーバーレイ本文と
 * 紛らわしく二重に見えてしまうため、ほぼ不透明にしている（実測して調整した値）。
 */
.gk-selection-lightbox__overlay-backdrop {
	position: absolute;
	inset: 0;
	background: var(--gk-color-bg);
	opacity: 0.99;
}

/*
 * 使用イメージのオーバーレイは、テキストが透けて二重に見える心配が無いため、
 * 商品ポップアップ（.gk-selection-lightbox__backdrop）と同じ「背景を薄暗く
 * 見せたまま重ねる」デザインにそろえる。
 */
[data-gk-selection-image-overlay] .gk-selection-lightbox__overlay-backdrop {
	background: var(--gk-color-text);
	opacity: 0.5;
}

.gk-selection-lightbox__overlay-close {
	position: absolute;
	z-index: 1;
	top: var(--gk-unit);
	right: var(--gk-unit);
	background: none;
	border: none;
	font-family: inherit;
	font-size: var(--gk-fs-base);
	letter-spacing: var(--gk-tracking);
	cursor: pointer;
}

.gk-selection-lightbox__overlay-text {
	position: relative;
	z-index: 1;
	width: calc(100% - var(--gk-unit) * 4);
	max-width: 640px;
	max-height: calc(100% - var(--gk-unit) * 4);
	overflow-y: auto;
	font-size: var(--gk-fs-base);
	line-height: var(--gk-lh-body);
}

/*
 * 画像＋closeボタンをまとめて囲む。max-width/height（元は画像自体に指定していた
 * もの）はこちらに移し、display: inline-flexで中身（画像の実寸）にぴったり
 * フィットさせる。これにより、closeボタンをこの枠の右上を基準に絶対配置すれば、
 * 画像のアスペクト比に関わらず常に画像の実際の右上に重なる。
 */
.gk-selection-lightbox__overlay-media {
	position: relative;
	z-index: 1;
	display: inline-flex;
	max-width: calc(100% - var(--gk-unit) * 4);
	max-height: calc(100% - var(--gk-unit) * 4);
}

.gk-selection-lightbox__overlay-image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/*
 * 画像オーバーレイのcloseボタンは、画像の右上に重ねるアイコン風にする
 * （テキストの「close」だと、写真の暗い部分に重なったとき見えにくいため）。
 * 半透明の黒い丸＋白い×は、写真の色に関わらず視認性を保てる、この種の
 * 「写真に重ねる閉じるボタン」で広く使われる配色パターンを踏襲した
 * （サイト内に既存の類似ボタンは無いため、一般的なデザインを参考にした）。
 * 背景色はopacityではなくrgba()で直接指定している（このボタンだけ、
 * 丸背景と中の×アイコンとで透明度を別々にしたいため。opacityをボタン全体に
 * かけると×アイコンまで薄くなってしまう）。
 */
.gk-selection-lightbox__overlay-close--icon {
	top: var(--gk-unit);
	right: var(--gk-unit);
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(17, 17, 17, 0.55);
	color: #fff;
	font-size: 20px;
	line-height: 1;
}

.gk-selection-lightbox__overlay-close--icon:hover {
	background: rgba(17, 17, 17, 0.75);
}

/* top/right（unit-mobileへの切り替え）は、下の.gk-selection-lightbox__overlay-closeのモバイル用ルールがこの要素にも効く（両方のクラスを持つため）*/
@media (max-width: 767px) {
	.gk-selection-lightbox__overlay-text {
		width: calc(100% - var(--gk-unit-mobile) * 4);
		max-width: calc(100% - var(--gk-unit-mobile) * 4);
		max-height: calc(100% - var(--gk-unit-mobile) * 4);
	}

	.gk-selection-lightbox__overlay-media {
		max-width: calc(100% - var(--gk-unit-mobile) * 4);
		max-height: calc(100% - var(--gk-unit-mobile) * 4);
	}

	.gk-selection-lightbox__overlay-close {
		top: var(--gk-unit-mobile);
		right: var(--gk-unit-mobile);
	}
}