/* =========================================================
   展示会 CSS（aL固有）
   配置: assets/css/al/42-exhibition.css

   構成：
     1. 展示基本情報（single のメタ：定義リスト型）
        - メタ本体 / 開催状況 / 営業時間 / メタ内カウントダウン / 会期表示
     2. 一覧カード群（rich / draft / compact）＋ カード用カウントダウン
     3. 在廊予定マトリクス
     4. 会場の地図アプリ選択リンク
     5. 展示会ヒーローカード（開催中・近日開催）

   ・色はトークン参照に統一。
   ========================================================= */


/* =========================================================
   1. 展示基本情報（single 展示会のメタ）
   定義リスト型：ラベル左・値右、行間に細い罫。
   ========================================================= */
.lr-exhibition-meta {
	margin: 0;
	border-top: 1px solid var(--lr-border);
}

/* 各行：ベース＝スマホ（ラベル上・値下の縦積み）。600px 以上で 2 カラム化。 */
.lr-exhibition-meta__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--lr-space-2xs);
	padding: var(--lr-space-md) 0;
	border-bottom: 1px solid var(--lr-border);
}

/* ラベル（会期・会場など） */
.lr-exhibition-meta__label {
	margin: 0;
	font-size: 0.8125rem;   /* 13px */
	font-weight: var(--lr-weight-bold);
	color: var(--lr-text-muted);
	letter-spacing: 0.04em;
}

/* 値 */
.lr-exhibition-meta__value {
	margin: 0;
	font-size: 0.95rem;
	line-height: var(--lr-leading-body);
	color: var(--lr-text);
}
/* 販売形態の値だけ差し色（赤）で強調 */
.lr-exhibition-meta__row[data-field="sale-format"] .lr-exhibition-meta__value {
	color: var(--lr-accent);
	font-weight: var(--lr-weight-bold);
}

/* 会場住所・注記などの補助行（値の下に小さく） */
.lr-exhibition-meta__sub {
	display: block;
	margin-top: var(--lr-space-2xs);
	font-size: 0.8125rem;
	color: var(--lr-text-muted);
}

/* ---- 開催状況（会期終了などの静的ラベル）---- */
.lr-exhibition-status {
	font-weight: var(--lr-weight-bold);
}
.lr-exhibition-status[data-status="ended"] { color: var(--lr-text-muted); }
.lr-exhibition-status[data-status="before"],
.lr-exhibition-status[data-status="open"]  { color: var(--lr-text); }

/* ---- 営業時間（曜日群＋時間、複数行）----
   曜日列は内容幅（auto）、本体列（時間＋note）は残り（1fr）。
   曜日名の長さが変わっても時間が詰まらないよう grid で分離
   （旧 min-width:5em は長い曜日群で破綻するため廃止）。
   note は本体列の中で時間の右に添える（幅が足りなければ折り返す）。 */
.lr-exhibition-hours__row {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--lr-space-sm);
	align-items: baseline;
}
.lr-exhibition-hours__row + .lr-exhibition-hours__row {
	margin-top: var(--lr-space-2xs);
}
.lr-exhibition-hours__days {
	color: var(--lr-text-muted);
}
.lr-exhibition-hours__body {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--lr-space-xs);
}
.lr-exhibition-hours__time {
	font-variant-numeric: tabular-nums;
}
.lr-exhibition-hours__note {
	font-size: 0.8125rem;
	color: var(--lr-text-muted);
}

/* ---- メタ内のカウントダウン（1行・控えめ・差し色あり）----
   カード側の強調カウントダウン（後述）とは別扱い。
   ここでは他のメタ値と同格サイズで、赤の差し色だけ効かせる。 */
.lr-exhibition-meta .lr-countdown {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
}
.lr-exhibition-meta .lr-countdown__label {
	font-size: 0.8125rem;
	color: var(--lr-text-muted);
}
.lr-exhibition-meta .lr-countdown__value {
	font-size: 0.95rem;
	font-weight: var(--lr-weight-bold);
	line-height: var(--lr-leading-body);
	color: var(--lr-accent);              /* 赤で締める */
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* ---- 会期表示（〜 の前で折り返す）----
   al_exhibition_period( $id, true ) が出力する span 構造用。
   各かたまり（開始日 / 〜＋終了日）を nowrap にし、
   境目だけで折れるようにする。折り返し時、margin-left は行頭で無視される。 */
.lr-period__part {
	display: inline-block;
	white-space: nowrap;
}
.lr-period__part + .lr-period__part {
	margin-left: 0.25em;   /* 〜 の前の余白。好みで 0.5em など */
}

/* ---- タブレット以上：ラベル左・値右の 2 カラム ---- */
@media (min-width: 600px) {
	.lr-exhibition-meta__row {
		grid-template-columns: 6em 1fr;
		gap: var(--lr-space-md);
		align-items: baseline;
		padding: var(--lr-space-sm) 0;
	}
}


/* =========================================================
   2. 一覧カード群（rich / draft / compact）
   ・一覧カードは data-variant で分岐。
   ========================================================= */

/* ---- 一覧ページ見出し ---- */
.lr-exhibitions__heading {
	margin: 0 0 var(--lr-space-md);
	padding-bottom: var(--lr-space-xs);
	font-size: 1.25rem;
	font-weight: var(--lr-weight-bold);
	color: var(--lr-text);
	border-bottom: 1px solid var(--lr-border);
}

/* ---- カード共通 ---- */
.lr-exhibition-card__image {
	display: block;
	width: 100%;
	height: auto;
}
.lr-exhibition-card__title {
	margin: 0;
	line-height: 1.5;
	color: var(--lr-text);
}
.lr-exhibition-card__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--lr-ease);
}
.lr-exhibition-card__link:hover { color: var(--lr-link); }
.lr-exhibition-card__period {
	margin: var(--lr-space-2xs) 0;
	font-size: .95rem;
	color: var(--lr-text-muted);
}
.lr-exhibition-card__fee {
	margin: var(--lr-space-2xs) 0;
	font-size: .9rem;
	color: var(--lr-text-muted);
}

/* ---- リッチ（開催中・近日開催／1列）---- */
.lr-exhibition-card[data-variant="rich"] {
	display: grid;
	gap: var(--lr-space-md);
	align-items: start;
}
.lr-exhibition-card[data-variant="rich"] .lr-exhibition-card__media {
	max-width: 420px;
	margin-inline: auto;
}
@media (min-width: 700px) {
	.lr-exhibition-card[data-variant="rich"]:has(.lr-exhibition-card__media) {
		grid-template-columns: minmax(0, 320px) 1fr;
	}
	.lr-exhibition-card[data-variant="rich"] .lr-exhibition-card__media {
		max-width: none;
		margin-inline: 0;
	}
}
.lr-exhibition-card[data-variant="rich"] .lr-exhibition-card__title {
	font-size: 1.5rem;
	font-weight: var(--lr-weight-bold);
	margin-bottom: var(--lr-space-2xs);
}
.lr-exhibition-card[data-variant="rich"] .lr-exhibition-card__subtitle {
	margin: 0 0 var(--lr-space-xs);
	color: var(--lr-text-muted);
}
.lr-exhibition-card[data-variant="rich"] .lr-exhibition-card__overview {
	margin-top: var(--lr-space-sm);
	line-height: var(--lr-leading-body);
}

/* 販売ラベル（開催中のみ）＝赤の細枠バッジ */
.lr-exhibition-card__sales {
	display: inline-block;
	margin-bottom: var(--lr-space-xs);
	padding: .15em .7em;
	font-size: .75rem;
	color: var(--lr-accent);
	border: 1px solid var(--lr-accent);
	border-radius: var(--lr-radius);
}
.lr-exhibition-card__countdown { margin-top: var(--lr-space-xs); }

/* ---- カード用カウントダウン（data-deadline / data-mode 駆動）----
   一覧カードでは強調表示（赤・太字）。
   ※ メタ内カウントダウンは上の 1. 側で別途上書きしている。 */
.lr-countdown { font-variant-numeric: tabular-nums; }
.lr-countdown__label {
	margin-right: .4em;
	font-size: .85em;
	color: var(--lr-text-muted);
}
.lr-countdown__value {
	font-weight: var(--lr-weight-bold);
	color: var(--lr-accent);
}

/* ---- ドラフト（企画中／2列）---- */
.lr-exhibition-card[data-variant="draft"] {
	padding: var(--lr-space-md);
	border: 1px dashed var(--lr-border);
	color: var(--lr-text-muted);
}
.lr-exhibition-card[data-variant="draft"] .lr-exhibition-card__badge {
	display: inline-block;
	margin-bottom: var(--lr-space-xs);
	padding: .1em .6em;
	font-size: .7rem;
	border: 1px solid var(--lr-border);
	border-radius: var(--lr-radius);
}
.lr-exhibition-card[data-variant="draft"] .lr-exhibition-card__title {
	font-size: 1.1rem;
	color: var(--lr-text);
}
.lr-exhibition-card[data-variant="draft"] .lr-exhibition-card__artists {
	margin: var(--lr-space-2xs) 0 0;
	font-size: .9rem;
	line-height: var(--lr-leading-body);
	color: var(--lr-text);
}
.lr-exhibition-card[data-variant="draft"] .lr-exhibition-card__excerpt {
	margin: var(--lr-space-xs) 0 0;
	font-size: .85rem;
	line-height: var(--lr-leading-body);
	color: var(--lr-text-muted);
}

/* ---- コンパクト（過去／4列）---- */
.lr-exhibition-card[data-variant="compact"] .lr-exhibition-card__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	margin-bottom: var(--lr-space-xs);
}
.lr-exhibition-card[data-variant="compact"] .lr-exhibition-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--lr-ease);
}
.lr-exhibition-card[data-variant="compact"] .lr-exhibition-card__link:hover .lr-exhibition-card__image {
	transform: scale(1.04);
}
.lr-exhibition-card[data-variant="compact"] .lr-exhibition-card__title { font-size: .95rem; }
.lr-exhibition-card[data-variant="compact"] .lr-exhibition-card__subtitle {
	margin: .15rem 0;
	font-size: .8rem;
	color: var(--lr-text-muted);
}
.lr-exhibition-card[data-variant="compact"] .lr-exhibition-card__period { font-size: .8rem; }

/* =========================================================
   2-b. 展示作品セクション（single）— 会期前の順次公開 注記
   出品作が揃いきる前（会期前）に「これで全部」と誤解させないための一文。
   ========================================================= */
.lr-exhibition-artworks-note {
	margin-top: var(--lr-space-lg);
	font-size: 0.9rem;
	line-height: var(--lr-leading-body);
	color: var(--lr-text-muted);
	text-align: center;
}

/* =========================================================
   3. 在廊予定マトリクス
   PC: 横テーブル / スマホ: 横スクロール。土=青・日=赤 は data-dow。
   ========================================================= */
.lr-attendance {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.lr-attendance__table {
	border-collapse: collapse;
	width: 100%;
	min-width: max-content;
	font-size: 13px;
}
.lr-attendance__table th,
.lr-attendance__table td {
	border: 1px solid var(--lr-border);
	padding: 8px 10px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
}
.lr-attendance__corner {
	background: var(--lr-off-white);
	position: sticky;
	left: 0;
	z-index: 2;
}
.lr-attendance__artist {
	background: var(--lr-bg);
	font-weight: var(--lr-weight-bold);
	text-align: left;
	position: sticky;
	left: 0;
	z-index: 1;
	box-shadow: 1px 0 0 var(--lr-border);
}
.lr-attendance__date {
	background: var(--lr-off-white);
	font-weight: var(--lr-weight-bold);
	color: var(--lr-text);
}
/* 土＝青・日＝赤（青は既存トークンに無いため固有値を残す） */
.lr-attendance__date[data-dow="sat"] { color: #2266aa; }
.lr-attendance__date[data-dow="sun"] { color: var(--lr-accent); }
.lr-attendance__cell { color: var(--lr-text); }
.lr-attendance__cell[data-dow="sat"] { background: #f4f8fc; }
.lr-attendance__cell[data-dow="sun"] { background: #fcf4f4; }
.lr-attendance__time { display: block; line-height: 1.5; }
.lr-attendance__time + .lr-attendance__time { margin-top: 2px; }

/* =========================================================
   5. 展示会ヒーローカード（開催中・近日開催）
   ブランドサイトのヒーロー。枠・帯・影・背景色は使わない。
   余白とタイポグラフィで「行きたい」と思わせる。左揃え。

   モバイルファースト：ベース＝スマホ（縦積み）、
   @media (min-width: 800px) で PC 拡張（横並び・zig-zag・区切り線）。
   ========================================================= */

.lr-exhibition-hero {
	display: block;
}
.lr-exhibition-hero__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

/* ---- 画像：本来比率で全面表示（変形DMも切らない）＋ホバーで微ズーム ---- */
.lr-exhibition-hero__media {
	margin-bottom: var(--lr-space-lg);
	overflow: hidden;   /* ズームのはみ出しを隠す */
}
.lr-exhibition-hero__media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform 1.2s cubic-bezier(.2, .6, .2, 1);
}
.lr-exhibition-hero__link:hover .lr-exhibition-hero__media img {
	transform: scale(1.03);
}

/* ---- 本文 ---- */
.lr-exhibition-hero__body {
	max-width: 42rem;
}

/* ステータス：小さなアクセント。開催中だけ赤、開催前はミュート */
.lr-exhibition-hero__status {
	margin: 0 0 var(--lr-space-sm);
	font-size: .8125rem;
	font-weight: var(--lr-weight-bold);
	letter-spacing: .08em;
}
.lr-exhibition-hero__status[data-sales="onsale"]   { color: var(--lr-accent); }
.lr-exhibition-hero__status[data-sales="upcoming"] { color: var(--lr-text-muted); }

/* ステータス内のカウントダウンも同じ小ささ・同じ色を継承 */
.lr-exhibition-hero__status .lr-countdown {
	font-variant-numeric: tabular-nums;
}
.lr-exhibition-hero__status .lr-countdown__label {
	margin-right: .5em;
	font-weight: var(--lr-weight-bold);
}
.lr-exhibition-hero__status .lr-countdown__value {
	font-weight: var(--lr-weight-bold);
	color: inherit;
}

/* タイトル：主役。大きく極太。ホバーで赤（押せることを示す）*/
.lr-exhibition-hero__title {
	margin: 0 0 var(--lr-space-sm);
	font-size: clamp(1.75rem, 1.2rem + 2.4vw, 3rem);
	font-weight: var(--lr-weight-black);
	line-height: 1.15;
	letter-spacing: var(--lr-tracking-tight);
	color: var(--lr-text);
	transition: color var(--lr-ease);
}
.lr-exhibition-hero__link:hover .lr-exhibition-hero__title {
	color: var(--lr-accent);
}

/* 参加作家：タイトル直下。グループ展は複数名を読点で連結（テキストのみ）*/
.lr-exhibition-hero__artists {
	margin: 0 0 var(--lr-space-sm);
	font-size: .95rem;
	line-height: var(--lr-leading-body);
	color: var(--lr-text);
}

/* サブタイトル：タイトルを補う一行。ミュートで控えめに */
.lr-exhibition-hero__subtitle {
	margin: 0 0 var(--lr-space-lg);
	font-size: 1.0625rem;
	line-height: var(--lr-leading-body);
	color: var(--lr-text-muted);
}

/* 概要（抜粋）*/
.lr-exhibition-hero__excerpt {
	margin: 0 0 var(--lr-space-lg);
	font-size: .95rem;
	line-height: var(--lr-leading-body);
	color: var(--lr-text-muted);
}

/* ---- 会期・入場料：補助情報 ----
   ベース（スマホ）＝縦積み・区切り線なし。 */
.lr-exhibition-hero__detail {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--lr-space-2xs);
	font-size: .875rem;
	color: var(--lr-red-dark);
	letter-spacing: .02em;
}
.lr-exhibition-hero__label {
	font-weight: var(--lr-weight-bold);
	color: var(--lr-text-muted);
}
.lr-exhibition-hero__label::after {
	content: "：";
}

/* ---- カード間の余白（zig-zag を広く見せる）---- */
.lr-grid:has(.lr-exhibition-hero) {
	gap: var(--lr-space-2xl, 4rem);
}


/* ---- PC 拡張（800px 以上）---- */
@media (min-width: 800px) {

	/* 画像＋テキストの横並び。テキストは画像高さの中央に */
	.lr-exhibition-hero__link:has(.lr-exhibition-hero__media) {
		display: grid;
		gap: var(--lr-space-2xl, 4rem);
		align-items: center;
	}
	.lr-exhibition-hero__media {
		margin-bottom: 0;
	}

	/* 向きで画像列の幅を出し分け。縦=絞る / 正方形=中間 / 横=広げる＋上揃え */
	.lr-exhibition-hero[data-orientation="portrait"]  .lr-exhibition-hero__link {
		grid-template-columns: 33% 1fr;
	}
	.lr-exhibition-hero[data-orientation="square"]    .lr-exhibition-hero__link {
		grid-template-columns: 42% 1fr;
	}
	.lr-exhibition-hero[data-orientation="landscape"] .lr-exhibition-hero__link {
		grid-template-columns: 52% 1fr;
		align-items: start;
	}

	/* 偶数番目は画像とテキストを左右反転（zig-zag）。文字方向は戻す */
	.lr-grid__item:nth-child(even) .lr-exhibition-hero__link {
		direction: rtl;
	}
	.lr-grid__item:nth-child(even) .lr-exhibition-hero__body,
	.lr-grid__item:nth-child(even) .lr-exhibition-hero__media {
		direction: ltr;
	}

	/* 会期・入場料：横並び＋区切り線（PC のみ）*/
	.lr-exhibition-hero__detail {
		flex-direction: row;
	}
	/* 会期・入場料・販売：横並び＋区切り線（PC のみ）*/
	.lr-exhibition-hero__detail {
		flex-direction: row;
	}
	.lr-exhibition-hero__detail > span + span {
		margin-left: var(--lr-space-md);
		padding-left: var(--lr-space-md);
		border-left: 1px solid var(--lr-border);
	}

	/* カード間の余白はさらに広く */
	.lr-grid:has(.lr-exhibition-hero) {
		gap: var(--lr-space-3xl, 6rem);
	}
}

/* al/42-exhibition.css — 会期前の出品作 順次公開の注記 */
.lr-exhibition-artworks-note {
	margin-top: var(--lr-space-lg);
	font-size: 0.9rem;
	line-height: var(--lr-leading-body);
	text-align: center;
}