/*
 * kg-collection の表示用スタイル。
 * Twenty Twenty-One の見た目・幅（--global--color-primary 等の CSS 変数）を流用し、
 * 独自の色は追加しない。スマホ幅 360px で崩れないことを優先する。
 */

/* -------------------------------------------------------------------------
 * 共通
 * ---------------------------------------------------------------------- */

.kg-page-header {
	margin-top: var(--global--spacing-vertical, 2rem) !important;
	margin-bottom: 1.25rem !important;
	padding-bottom: 0.75rem !important;
}

/* 親テーマのアーカイブ用見出し（特大）を通常の見出しサイズに抑える。 */
.kg-page-header .page-title {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem) !important;
	line-height: 1.3 !important;
	margin: 0 0 0.35em !important;
}


.kg-title-empty {
	opacity: 0.6;
}

.kg-empty {
	padding: 2em 0;
	text-align: center;
	opacity: 0.75;
}

/* 一覧全体を親テーマの alignwide 幅に揃える（archive テンプレートは #main 直下に置かれるため）。 */
.kg-list {
	max-width: var(--responsive--alignwide-width);
	/* 親テーマが #main 直下の要素間に付ける大きな上マージン（約90px）を打ち消す。 */
	margin: 0 auto !important;
	box-sizing: border-box;
}

.kg-section-title {
	font-size: 1.1rem;
}

/* -------------------------------------------------------------------------
 * 展覧会タブ・地域フィルタ
 * ---------------------------------------------------------------------- */

.kg-list-controls {
	margin-bottom: 1.5em;
}

.kg-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0 0 0.75em;
	list-style: none;
}

/* 親テーマの button 装飾（濃色の塗り）より優先させるため !important を付ける。 */
.kg-tab,
.kg-filter {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: inherit;
	font-size: 0.9rem !important;
	line-height: 1.2 !important;
	padding: 0.5em 1em !important;
	border: 2px solid var(--global--color-primary, #28303d) !important;
	border-radius: 999px !important;
	background: var(--global--color-background, #fff) !important;
	color: var(--global--color-primary, #28303d) !important;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.kg-tab:hover,
.kg-filter:hover {
	background: rgba(40, 48, 61, 0.1) !important;
}

/* 選択中: アクセント色で塗る。 */
.kg-tab.is-active,
.kg-tab.is-active:hover,
.kg-filter.is-active,
.kg-filter.is-active:hover {
	background: var(--kg-accent, #d9541e) !important;
	color: #fff !important;
	border-color: var(--kg-accent, #d9541e) !important;
}

.kg-tab:focus-visible,
.kg-filter:focus-visible {
	outline: 2px solid var(--kg-accent, #d9541e);
	outline-offset: 2px;
}

.kg-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
}

.kg-tab.is-active[data-exhibition="all"],
.kg-filter.is-active[data-area="all"] {
	background: var(--global--color-primary, #28303d) !important;
	border-color: var(--global--color-primary, #28303d) !important;
}

/* -------------------------------------------------------------------------
 * カードグリッド（A / B ランク）
 * ---------------------------------------------------------------------- */

.kg-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5em 1.2em;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: start; /* 展開したカードが同じ行の他カードを引き伸ばさない */
}

@media only screen and (min-width: 401px) {
	.kg-cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media only screen and (min-width: 801px) {
	.kg-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.kg-card-item {
	margin: 0;
}

.kg-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.kg-card-link {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
}

.kg-card-link:hover .kg-card-title,
.kg-card-link:focus .kg-card-title {
	text-decoration: underline;
}

.kg-card-photo {
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 800 / 359;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.05);
}

.kg-card-photo-img {
	position: absolute;
	inset: 0;
	/* 親テーマ Twenty Twenty-One が付けるインライン style（width/height/max-width）を打ち消す。 */
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	display: block;
}

.kg-card-title {
	display: block;
	font-weight: 700;
	padding: 0.6em 0.1em 0;
}

/* B（写真なし）カード: 写真枠の代わりに上罫線を出す。 */
.kg-card--noimage .kg-card-title {
	padding-top: 0.5em;
	border-top: 3px solid var(--global--color-border, rgba(0, 0, 0, 0.15));
}

.kg-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em 0.6em;
	margin: 0.3em 0.1em 0;
	font-size: 0.85rem;
	opacity: 0.85;
}

/* -------------------------------------------------------------------------
 * カードの紹介文（3行クランプ）と「もっと見る」/「閉じる」ボタン
 * ---------------------------------------------------------------------- */

.kg-card-body {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--global--color-secondary, inherit);
	margin: 0.5em 0.1em 0;
}

.kg-card-body.is-clamped {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kg-card.is-open .kg-card-body {
	display: block;
	-webkit-line-clamp: none;
	overflow: visible;
}

.kg-card-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	margin: 0.5em 0.1em 0;
}

/* フィルターボタン（.kg-tab / .kg-filter）と同じピル型。区別のため塗りつぶさず枠線のみにする。
   親テーマの button 装飾（濃色の塗り）より優先させるため !important を付ける。 */
.kg-card-more,
.kg-card-fold {
	flex: 0 0 auto;
	white-space: nowrap;
	font-family: inherit;
	font-size: 0.85rem !important;
	line-height: 1.2 !important;
	padding: 0.45em 1em !important;
	border: 1px solid var(--global--color-primary, #28303d) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--global--color-primary, #28303d) !important;
	cursor: pointer;
	transition: background-color 0.15s, color 0.15s;
}

.kg-card-more:hover,
.kg-card-fold:hover {
	background: rgba(40, 48, 61, 0.08) !important;
}

.kg-card-more:focus-visible,
.kg-card-fold:focus-visible {
	outline: 2px solid var(--kg-accent, #d9541e);
	outline-offset: 2px;
}

.kg-card-detail {
	align-items: center;
	font-size: 0.85rem;
	font-weight: 700;
	text-decoration: underline;
	color: var(--global--color-primary, #28303d);
}

.kg-card-detail:hover,
.kg-card-detail:focus {
	text-decoration: none;
}

.kg-card-fold,
.kg-card-detail {
	display: none;
}

.kg-card.is-open .kg-card-more {
	display: none;
}

.kg-card.is-open .kg-card-fold,
.kg-card.is-open .kg-card-detail {
	display: inline-flex;
}

/* 3行に収まる（オーバーフローしていない）紹介文には「もっと見る」を出さない。 */
.kg-card-body:not(.is-overflow) + .kg-card-btns .kg-card-more {
	display: none;
}

/* -------------------------------------------------------------------------
 * 行リスト（B / C ランク）
 * ---------------------------------------------------------------------- */

.kg-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--global--color-border, rgba(0, 0, 0, 0.15));
}

.kg-row-item {
	border-bottom: 1px solid var(--global--color-border, rgba(0, 0, 0, 0.15));
}

.kg-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em 0.8em;
	padding: 0.75em 0.2em;
	text-decoration: none;
	color: inherit;
}

a.kg-row:hover,
a.kg-row:focus {
	background: rgba(0, 0, 0, 0.035);
}

.kg-row-maker {
	font-weight: 700;
	flex: 1 1 auto;
	min-width: 8em;
}

.kg-row-title {
	flex: 2 1 auto;
	min-width: 8em;
}

.kg-row-area,
.kg-row-year {
	font-size: 0.85rem;
	opacity: 0.75;
	flex: 0 0 auto;
}

.kg-row-external-icon {
	flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
 * 作品ページ
 * ---------------------------------------------------------------------- */

.kg-work-photo {
	margin-bottom: 1.5em;
}

.kg-lightbox-trigger,
.kg-lightbox-trigger:hover,
.kg-lightbox-trigger:focus {
	/* 親テーマの button 装飾（濃色背景・枠）を打ち消す。 */
	display: block;
	width: 100%;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	line-height: 0;
	cursor: zoom-in;
}

.kg-work-photo-img {
	display: block;
	/* 親テーマのインライン style を打ち消し、拡大せず等倍か縮小で出す。 */
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	margin: 0 auto;
}

.kg-work-photo--small .kg-work-photo-img {
	background: rgba(0, 0, 0, 0.03);
}

.kg-work-title {
	font-size: 1.8rem;
	margin-bottom: 0.5em;
}

.kg-work-meta-row {
	display: flex;
	gap: 0.5em;
	margin: 0;
}

.kg-work-meta-row dt {
	font-weight: 700;
	flex: 0 0 8em;
}

.kg-work-meta-row dd {
	margin: 0;
	flex: 1 1 auto;
}

.kg-work-subheading {
	font-size: 1.1rem;
	margin-bottom: 0.5em;
}

.kg-badges,
.kg-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
}

.kg-badge a {
	display: inline-block;
	padding: 0.4em 1em;
	border: 1px solid var(--global--color-border, currentColor);
	border-radius: 999px;
	text-decoration: none;
}

.kg-link-item a {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	text-decoration: none;
}

.kg-panel-download {
	display: inline-block;
	padding: 0.6em 1.2em;
	border: 1px solid var(--global--color-primary, currentColor);
	border-radius: 4px;
	text-decoration: none;
}

.kg-work-credit {
	margin-top: 2em;
	font-size: 0.9rem;
	opacity: 0.85;
}

/* -------------------------------------------------------------------------
 * ライトボックス
 * ---------------------------------------------------------------------- */

.kg-lightbox {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
}

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

.kg-lightbox-img {
	display: block;
	max-width: 100vw;
	max-height: 100vh;
	width: auto;
	height: auto;
}

.kg-lightbox-close {
	position: absolute;
	top: 0.5em;
	right: 0.75em;
	font-size: 2rem;
	line-height: 1;
	background: none;
	border: 0;
	color: #fff;
	cursor: pointer;
	padding: 0.25em 0.5em;
}

body.kg-lightbox-open {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * 展覧会一覧・展覧会ページ見出し
 * ---------------------------------------------------------------------- */

.kg-exhibitions-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.2em;
}

@media only screen and (min-width: 601px) {
	.kg-exhibitions-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.kg-exhibition-card-link {
	display: block;
	height: 100%;
	padding: 1.2em;
	border: 1px solid var(--global--color-border, rgba(0, 0, 0, 0.15));
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
}

.kg-exhibition-card-title {
	margin: 0 0 0.3em;
	font-size: 1.2rem;
}

.kg-exhibition-card-fullname,
.kg-exhibition-card-period,
.kg-exhibition-card-venue {
	margin: 0 0 0.2em;
	font-size: 0.9rem;
	opacity: 0.85;
}

.kg-exhibition-card-count {
	margin: 0.6em 0 0;
	font-weight: 700;
}

.kg-exhibition-meta-row {
	display: flex;
	gap: 0.5em;
	margin: 0;
}

.kg-exhibition-meta-row dt {
	font-weight: 700;
	flex: 0 0 6em;
}

.kg-exhibition-meta-row dd {
	margin: 0;
	flex: 1 1 auto;
}

.kg-exhibition-fullname {
	font-size: 1rem;
	opacity: 0.85;
}

.kg-exhibition-sitelink a {
	text-decoration: underline;
}

/* -------------------------------------------------------------------------
 * 体験談
 * ---------------------------------------------------------------------- */

.kg-story-lead {
	margin: 0;
	font-size: 0.95rem;
	opacity: 0.85;
}

.kg-story-label {
	margin: 0 0 0.3em;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	opacity: 0.75;
}

.kg-story-period {
	margin: 0;
	font-size: 0.9rem;
	opacity: 0.85;
}

/* 対象作品のカード（横並び。狭い画面では縦積み）。 */
.kg-story-work {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8em 1.2em;
	margin: 1.5em 0 2em;
	padding: 0.8em;
	border: 1px solid var(--global--color-border, rgba(0, 0, 0, 0.15));
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
}

.kg-story-work-photo {
	flex: 1 1 240px;
	max-width: 360px;
}

.kg-story-work-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 200px;
}

.kg-story-work .kg-card-title {
	padding-top: 0.2em;
}

.kg-story-work-caption {
	font-size: 0.8rem;
	opacity: 0.75;
}

.kg-story-work-more {
	margin-top: 0.5em;
	font-size: 0.9rem;
	text-decoration: underline;
}

.kg-story-body .kg-story-voice {
	font-size: 1.25rem;
	margin-top: 2.2em;
	padding-left: 0.6em;
	border-left: 4px solid var(--global--color-primary, currentColor);
}

.kg-story-body .kg-story-voice:first-child {
	margin-top: 0;
}

.kg-story-body h3 {
	font-size: 1.05rem;
	margin-top: 1.6em;
}

.kg-story-body .wp-block-image img {
	max-width: 100%;
	height: auto;
}

.kg-story-back {
	margin-top: 3em;
}

.kg-work-stories {
	margin-top: 1.5em;
}

/* -------------------------------------------------------------------------
 * 極小幅 (~360px) 対策
 * ---------------------------------------------------------------------- */

@media only screen and (max-width: 360px) {
	.kg-row-maker,
	.kg-row-title {
		min-width: 100%;
	}

	.kg-work-meta-row {
		flex-direction: column;
		gap: 0.1em;
	}

	.kg-work-meta-row dt {
		flex-basis: auto;
	}
}