/* 4列グリッドの1カラム目と同じ幅にして、その中でセンターにする（currentと同じライン） */
.section-heading--archive {
	margin-top: var(--gk-unit);
	margin-bottom: calc(var(--gk-unit) / 2);
	width: calc((100% - (var(--gk-unit) * 3)) / 4);
	text-align: center;
}

/* current / upcomingの見出しは、画像の中央に来るようにする */
.exh-featured-col .section-heading {
	text-align: center;
	margin-bottom: calc(var(--gk-unit) / 2);
}

/* ---------- current / upcoming / archive（すべて同じ4列グリッドの列幅を共有） ---------- */
.exh-featured-grid,
.exh-archive-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--gk-unit);
	align-items: start;
}

.exh-featured-grid {
	margin-top: calc(var(--gk-unit) / 4);
	margin-bottom: var(--gk-unit);
}

.exh-archive-grid {
	margin-top: calc(var(--gk-unit) / 4);
	margin-bottom: calc(var(--gk-unit) * 2);
}

/*
 * event（任意、current/upcomingグリッドの3・4カラム目に差し込む.exh-featured-col）。
 * PC幅（4カラム）では、current(1)/upcoming(2)の右にそれぞれ固定の列を指定する
 * ことで、片方だけ投稿がある場合でも位置がずれない（無ければその列は空白のまま）。
 * タブレット・モバイル幅（2カラム）では@media側で解除し、current/upcomingの下に
 * 通常の流し込みで新しい行として並ぶようにする。
 */
.exh-featured-col--event-col3 {
	grid-column: 3;
}

.exh-featured-col--event-col4 {
	grid-column: 4;
}

/* A判（A4等）と同じ縦横比。他の「no image」枠もすべてこの比率に揃えている */
.exh-featured-placeholder {
	aspect-ratio: 210 / 297;
	width: 100%;
}

/* ---------- card (共通) ---------- */
.exh-card {
	display: block;
}

.exh-card__poster {
	width: 100%;
	height: auto;
}

/* archiveの画像・no image枠とも、A判比率（210:297）に揃える */
.exh-card--archive .exh-card__poster {
	aspect-ratio: 210 / 297;
}

.exh-card__poster.gk-placeholder {
	aspect-ratio: 210 / 297;
}

/*
 * 画像の下のタイトル（作家名＋展覧会名の2段組み）・会期。PCでは画像が大きく表示されるため
 * 不要だが、スマホ・タブレット幅では画像が小さくなる分、テキストでも情報を分かるようにする。
 * 作家名が無い場合は、展覧会名だけが1行で（作家名の位置に）表示される。
 */
.exh-card__meta {
	display: none;
	text-align: center;
}

/*
 * 作家名は1行に収める（2行に折り返すと、1〜2文字だけが2行目に浮いてしまい見た目が悪いため）。
 * 収まらない場合はそのまま…で省略する。
 */
.exh-card__artist {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: var(--gk-fs-body);
	line-height: var(--gk-lh-body);
}

/*
 * タイトルは1行だけだと幅ぴったりに収まる長さの前で早々に省略されてしまうため、
 * 2行まで折り返してから省略記号を出す。
 */
.exh-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--gk-fs-body);
	line-height: var(--gk-lh-body);
}

.exh-card__artist {
	margin-top: calc(var(--gk-unit) / 2);
}

.exh-card__title {
	margin-top: calc(var(--gk-unit) / 2);
}

.exh-card__artist + .exh-card__title {
	margin-top: 0;
}

.exh-card__date {
	display: block;
	margin-top: calc(var(--gk-unit) / 4);
	font-size: var(--gk-fs-body);
	opacity: 0.6;
}

/* ---------- responsive ---------- */
@media (max-width: 1366px) {
	.exh-featured-grid,
	.exh-archive-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.section-heading--archive {
		width: calc((100% - var(--gk-unit)) / 2);
	}

	.exh-card__meta {
		display: block;
	}

	.exh-featured-col--event-col3,
	.exh-featured-col--event-col4 {
		grid-column: auto;
	}
}

@media (max-width: 767px) {
	.exh-featured-grid,
	.exh-archive-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.section-heading--archive {
		width: 100%;
	}

	/* 見出し文字を隠す分（.page-heading側で非表示）、詰まって見えないよう余白を持たせる */
	.exh-featured-grid {
		margin-top: calc(var(--gk-unit-mobile) * 2);
	}
}