/*
 * ページ上部の掲載区分ラベル（current/upcoming/archive）と、JP/EN切り替えボタンの行。
 * ヘッダーのタイトル＋searchや、notesの見出し＋フィルターと同じ、3分割（中央寄せ＋右寄せ）の考え方。
 * 切り替えボタンが無い（非表示の）場合も、ラベルはそのまま中央に来る。
 */
.exh-detail__type-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--gk-unit);
	padding-top: calc(var(--gk-unit) / 2);
}

.exh-detail__type {
	grid-column: 2;
	justify-self: center;
	font-size: var(--gk-fs-base);
	font-weight: 500;
	letter-spacing: var(--gk-tracking);
	text-transform: lowercase;
}

/*
 * 展示詳細ページと、about / access / contact（画像＋本文テンプレート）が共有するレイアウト。
 * 列幅は常に3等分で固定し、中身が少ない場合も他の列を広げない（about等が展示詳細より
 * 幅広くならないようにするため）。
 */
.exh-detail {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: calc(var(--gk-unit) * 2);
	padding-top: 30px;
	padding-bottom: var(--gk-unit);
	align-items: start;
}

/* about等は、exhibitions/space/notes/newsと同じ、見出しから本文までの余白に揃える */
.exh-detail--page {
	padding-top: calc(var(--gk-unit) / 4);
}

.exh-detail__poster img,
.exh-detail__poster-placeholder {
	width: 100%;
	height: auto;
}

.exh-detail__poster-placeholder {
	aspect-ratio: 210 / 297;
	display: flex;
	align-items: center;
	justify-content: center;
}

.exh-detail__lang-toggle {
	display: none;
	gap: var(--gk-unit);
}

/* 「current」の行にあるトグル（展示詳細のiPad幅用）だけ、行の右端に来るようにする */
.exh-detail__type-row .exh-detail__lang-toggle {
	grid-column: 3;
	justify-self: end;
}

.exh-detail__lang-toggle button {
	font-family: inherit;
	font-size: var(--gk-fs-base);
	letter-spacing: var(--gk-tracking);
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	opacity: 0.5;
}

.exh-detail__lang-toggle button.is-active {
	opacity: 1;
	text-decoration: underline;
}

.exh-detail__body :is(p, ul, ol) {
	margin-bottom: var(--gk-paragraph-gap);
}

.exh-detail__body p {
	text-align: justify;
}

.exh-detail__body hr {
	border: none;
	border-top: 1px solid var(--gk-color-line);
	margin: var(--gk-unit) 0;
}

.exh-detail__map iframe {
	display: block;
}

/*
 * 会場写真・地図・テキストなどが増えていくエリア。3列グリッドで、行の中で一番背が高い
 * 要素に合わせて次の行の天端をそろえる（masonryのような隙間埋めはしない＝newsと同じ考え方）。
 * 本文（投稿編集画面）に追加した各ブロック（画像・埋め込み・段落など）が、そのまま1つの
 * グリッドセルになる。
 */
.exh-detail__gallery {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--gk-unit);
	align-items: start;
	margin-bottom: calc(var(--gk-unit) * 2);
}

.exh-detail__gallery-item :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6) {
	margin-bottom: var(--gk-paragraph-gap);
}

.exh-detail__gallery-item p {
	text-align: justify;
}

/*
 * 短いタイトル＋URLの一覧など、両端揃えだと不自然に間延びして見にくい段落用。
 * ブロックの「追加CSSクラス」欄に gk-no-justify と入力すると、その段落だけ左寄せになる。
 */
.exh-detail__gallery-item p.gk-no-justify {
	text-align: left;
}

.exh-detail__gallery-item > :last-child {
	margin-bottom: 0;
}

/*
 * 段落のブロック設定で「追加CSSクラス」に gk-wide を付けると、そのマスが行全体を使い、
 * 下に確実な余白がつく。長い文章のすぐ下だけ広く空けたい場合などに使う
 * （スペーサーブロックだと、たまたま画像と同じ行に入ると効果が消えてしまうため）。
 */
.exh-detail__gallery-item--wide {
	grid-column: 1 / -1;
	margin-bottom: calc(var(--gk-unit) * 2);
}

/*
 * 横長の写真1枚を、縦長写真3枚をつなげたように見せる（gk-panorama）。
 * 画像は切り分けず1枚のまま横幅いっぱいに表示し、実際のグリッドの隙間
 * （3等分した境界）とまったく同じ位置・幅に、背景色の帯を重ねて「継ぎ目」に見せる。
 * calc()で列幅を計算しているので、画面幅が変わっても常に実際の隙間と位置がそろう。
 * 帯はpointer-events:noneにして、下の画像のクリック（ライトボックス表示）を妨げない。
 */
.exh-detail__gallery-item--panorama {
	grid-column: 1 / -1;
	position: relative;
}

.exh-detail__gallery-item--panorama::before,
.exh-detail__gallery-item--panorama::after {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	width: var(--gk-unit);
	background: var(--gk-color-bg);
	pointer-events: none;
}

.exh-detail__gallery-item--panorama::before {
	left: calc((100% - 2 * var(--gk-unit)) / 3);
}

.exh-detail__gallery-item--panorama::after {
	left: calc((100% - 2 * var(--gk-unit)) / 3 * 2 + var(--gk-unit));
}

.exh-detail__gallery-item img {
	width: 100%;
	height: auto;
	cursor: pointer;
}

.exh-detail__gallery-item iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
}

/*
 * 動画埋め込み（YouTubeなど）は、写真1枚分（1列）より横幅を広く取りたいが、
 * 文章のように3列いっぱいまでは広げず、2列分の横幅で表示する。
 * スマホ・タブレット・PCいずれも会場写真エリアの列数は3列のままなので、
 * span 2 は全ての幅で同じように機能する。
 */
.exh-detail__gallery-item--video {
	grid-column: span 2;
}

/*
 * Info系ページ（about / access / contact）の画像＋本文＋地図グリッド。
 * .exh-detail__gallery と同じ「区切り線で新しいマスに分かれる」グリッドをそのまま使うが、
 * ページの最初のブロックとして使うため、上下の余白だけ.exh-detailに揃えている。
 */
.exh-detail__gallery--page {
	padding-top: 45px;
	padding-bottom: var(--gk-unit);
}

/*
 * about / access / contact（.exh-detail--page）は、常に元の仕様のまま
 * （iPad幅でも3列、JP/ENは常に並べて表示、切り替えボタンはスマホでのみ使う）。
 * 展示詳細ページ（.exh-detail--pageが付かない方）だけ、iPad幅の見た目を変える。
 */
@media (min-width: 768px) and (max-width: 1366px) {
	.exh-detail__type-row .exh-detail__lang-toggle {
		display: flex;
	}

	.exh-detail:not(.exh-detail--page) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.exh-detail:not(.exh-detail--page) .exh-detail__col {
		grid-column: 2;
		display: none;
	}

	.exh-detail:not(.exh-detail--page) .exh-detail__col.is-visible {
		display: block;
	}
}

@media (max-width: 767px) {
	.exh-detail {
		grid-template-columns: 1fr;
	}

	/*
	 * 見出し文字を隠す分（.page-heading側で非表示）、詰まって見えないよう余白を持たせる。
	 * exhibitionsの「current」の画像上辺の高さに揃えている。
	 */
	.exh-detail__gallery--page {
		padding-top: 66px;
	}

	/* about / access / contact：見出し文字を隠す分の余白。「current」の高さに揃えている */
	.exh-detail--page {
		padding-top: calc(var(--gk-unit-mobile) * 2);
		row-gap: calc(var(--gk-unit-mobile) / 2);
	}

	/* 画像・地図がある場合（access等）は、「current」の画像上辺の高さに揃える */
	.exh-detail--page-has-poster {
		padding-top: 66px;
	}

	/* スマホでは元通り、画像のすぐ下に切り替えボタンを表示する（展示詳細のみ／about等はもともとここにある） */
	.exh-detail > .exh-detail__lang-toggle {
		display: flex;
	}

	.exh-detail__col {
		display: none;
	}

	.exh-detail__col.is-visible {
		display: block;
	}

	/* 写真は3列のままにし、文章のマスだけ横幅いっぱいに広げて読みやすくする */
	.exh-detail__gallery-item--text {
		grid-column: 1 / -1;
	}

	/*
	 * 写真の区切り用スペーサーは、PCの広い列幅を基準にした高さ（100pxなど）のままだと
	 * スマホの狭い列幅では相対的に大きすぎて目立ってしまうため、小さく制限する。
	 * インラインで高さが指定されているため、!importantで上書きする。
	 */
	.exh-detail__gallery-item .wp-block-spacer {
		height: 24px !important;
	}
}

/*
 * スマホ・iPad・PCとも、文章のマスは基本3列のまま（写真と同じ）だが、
 * すぐ隣がスペーサーのみのマスの場合は、その分を吸収して横幅いっぱい（3列分）に広げる。
 */
.exh-detail__gallery-item--text-before-spacer {
	grid-column: 1 / -1;
}

.exh-detail__gallery-item--spacer-absorbed {
	display: none;
}

/*
 * スマホでは文章のマスが横幅いっぱい（3列）になり、余る列が無いため、一番手前の
 * スペーサーも他と同じくdisplay:noneで完全に詰めてよい（元の仕様のまま）。
 */
.exh-detail__gallery-item--spacer-absorbed-first {
	display: none;
}

/*
 * タブレット・PCでは文章のマスが2列分になり、3列目が1列分だけ余るため、
 * 一番手前のスペーサーだけは詰めず、visibility:hiddenで場所を保持したまま見えなくする
 * （display:noneだと場所ごと詰めてしまい、次の写真がその行に上がってきてしまうため）。
 */
@media (min-width: 768px) {
	.exh-detail__gallery-item--spacer-absorbed-first {
		display: block;
		visibility: hidden;
	}
}

/*
 * タブレット・PCでは、文章のマスは常に2列分の横幅にする
 * （スマホだけは読みやすさのため引き続き横幅いっぱい）。
 * gk-wideで明示的に「行全体を使いたい」と指定した場合はこの対象外（常に横幅いっぱいのまま）。
 */
@media (min-width: 768px) {
	.exh-detail__gallery-item--text {
		grid-column: span 2;
	}
}