/* =========================================================
   art-exhibitions.css
   ---------------------------------------------------------
   「障がい者手帳と美術展 in 横浜」(/art-exhibition-yokohama/) 専用。
   inc/art-exhibitions.php が出力する .nb-yae と、固定ページ body の
   .nb-yae-page スコープにのみ当たる。本ショートコードを含むページで
   だけ enqueue されるため、他ページへの影響はない。

   デザイン方針:
     美術展リーフレット / 展示室の壁ラベル / 案内状のトーン。
     Neutrope Biz 標準 UI から切り離すため、親テーマの --nt-* には依存
     せず、ページ専用のデザイン変数 (--yae-*) を定義する。
       - 背景: 生成り / オフホワイト、カードは少し明るい紙色
       - 文字: 墨色、見出しは明朝 (serif)、英字エイブローは字間広め
       - アクセント: くすみ金 / くすみ青 / 赤茶
       - 線は細く、影はほぼ無し、余白を広く、角はほぼ直角
     動的な座標 (タイムラインのバー位置/幅・今日線・月目盛り) は PHP が
     style 属性で CSS 変数 (--nb-bar-left 等) として渡す。
   ========================================================= */

/* ---------- ページ専用デザイントークン ---------- */
body.nb-yae-page,
.nb-yae {
	--yae-bg: #f3efe6;          /* 生成り背景 */
	--yae-paper: #fbf9f3;       /* 紙色 (カード/タイムライン) */
	--yae-ink: #2b2620;         /* 墨色 */
	--yae-ink-soft: #6e6557;    /* 弱い墨 (ラベル/補足) */
	--yae-line: #ddd4c4;        /* 細い罫 */
	--yae-line-strong: #c7bca6; /* やや強い罫 */
	--yae-gold: #9a7c41;        /* くすみ金 */
	--yae-gold-ink: #7a5f2e;    /* 金系の文字色 */
	--yae-gold-soft: #ece2cc;   /* 金の淡い面 */
	--yae-navy: #3b4a5b;        /* くすみ青 */
	--yae-rust: #9c5a3c;        /* 赤茶 */
	--yae-serif: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif JP", "Shippori Mincho", serif;
	--yae-eyebrow: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
}

/* =========================================================
   ページ全体 (body.nb-yae-page) — 親テーマヒーローのリーフレット化
   ========================================================= */
body.nb-yae-page {
	background-color: var(--yae-bg);
	color: var(--yae-ink);
	/* 自前の重ね合わせ文脈を作る。これにより 1099px 以下の薄い装飾
	   疑似要素 (::before/::after, z-index:-1) が body 背景色より前面・
	   本文より背面に正しく描かれる (root 文脈だと body 背景に隠れる)。 */
	isolation: isolate;
}

/* 本文セクションの白面を外し、生成り背景を活かす。 */
body.nb-yae-page .nt-section {
	background: transparent;
}

/* 親テーマの page hero (タイトル帯) を案内状調に。タイトルは 1 つだけ
   (h1 は重複させない) で、英字エイブローと金の罫を擬似要素で添える。 */
/* 大見出し欄は背景を透明にして左右の背景装飾を活かす。塗り背景 /
   下線 / 影は外す。本文カード・展覧会カードは透明化しない (別スコープ)。 */
body.nb-yae-page .nt-page-hero {
	background: transparent;
	padding-block: clamp(44px, 8vw, 92px);
	border-bottom: 0;
	box-shadow: none;
	text-align: center;
}

/* 親テーマ既定の装飾 (右上の radial-gradient アクセント円) を、本ページの
   静かなリーフレット調に合わせて消す。.nt-page-hero::before は親テーマの
   04-components.css 由来。 */
body.nb-yae-page .nt-page-hero::before {
	display: none;
}

body.nb-yae-page .nt-page-hero .nt-container {
	max-width: 780px;
}

body.nb-yae-page .nt-page-hero__title {
	margin: 0;
	font-family: var(--yae-serif);
	font-weight: 500;
	font-size: clamp(1.75rem, 4.6vw, 2.9rem);
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: var(--yae-ink);
}

/* 大見出しの「in 横浜」を 1 まとまりとして扱う (in と 横浜 の間で改行しない)。
   SP のみ block にして必ず 2 行目へ送る。PC/タブレットはインライン
   (= 既存表示、1 行に収まる/自然な折り返し)。span は the_title フィルタ
   (nbc_yae_split_hero_title) が当該ページのヒーローにのみ付与する。 */
body.nb-yae-page .nt-page-hero__title .nb-yae-title-place {
	white-space: nowrap;
}

@media (max-width: 767px) {
	body.nb-yae-page .nt-page-hero__title .nb-yae-title-place {
		display: block;
	}
}

body.nb-yae-page .nt-page-hero__title::before {
	content: "YOKOHAMA · ART ACCESS GUIDE";
	display: block;
	margin-bottom: 1.3em;
	font-family: var(--yae-eyebrow);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.34em;
	text-indent: 0.34em;
	color: var(--yae-gold);
}

body.nb-yae-page .nt-page-hero__title::after {
	content: "";
	display: block;
	width: 46px;
	height: 1px;
	margin: 1.2em auto 0;
	background: var(--yae-gold);
}

/* =========================================================
   左右の背景装飾 (左=星月夜 / 右=桜と富士)
   ---------------------------------------------------------
   ビューポートに固定した body の背景画像レイヤーとして左右端に置く。
   背景画像なので本文・カード (不透明な紙面) より確実に下のレイヤーになり、
   ポインタイベントも受け取らない (= pointer-events:none 相当)。装飾は
   中央コンテンツ両脇の余白 (article/section/main は透明) にだけ覗く。

   画像は内側がオフホワイトにフェードする縦長素材 (724x2172) で、ページ
   背景色 (--yae-bg) と自然になじむ。
     - PC (≥1100px) のみ表示。スマホ・タブレットは画像を出さない
       (=「PC表示のみ」。未マッチのメディアでは画像自体ダウンロードされない)。
   ========================================================= */
@media (min-width: 1100px) {
	body.nb-yae-page {
		background-image:
			url("/wp-content/uploads/2026/06/art-yokohama-bg-left-starry.webp"),
			url("/wp-content/uploads/2026/06/art-yokohama-bg-right-sakura-fuji.webp");
		background-repeat: no-repeat, no-repeat;
		background-position: left center, right center;
		background-size: auto 100%, auto 100%;
		background-attachment: fixed, fixed;
	}
}

/* ===== main gradient trial (START) =====================================
   メイン欄背景を「左:ごく薄い青 〜 中央:白 〜 右:ごく薄い金」の淡い
   グラデーションにする試行 (左右の装飾画像の色味をつなぐ狙い)。
   採用しない場合は この START〜END ブロックを丸ごと削除すれば、上の
   通常背景 (単色 --yae-bg + 装飾画像) に戻る。
   ※ background-image は上書き(マージ不可)のため、装飾画像 2 枚も併記し、
      最背面にグラデーションを重ねている。本文の可読性優先で中央は白系。
   ======================================================================= */
@media (min-width: 1100px) {
	body.nb-yae-page {
		background-image:
			url("/wp-content/uploads/2026/06/art-yokohama-bg-left-starry.webp"),
			url("/wp-content/uploads/2026/06/art-yokohama-bg-right-sakura-fuji.webp"),
			linear-gradient(
				90deg,
				rgba(245, 240, 230, 0) 0%,
				rgba(245, 240, 230, 0.88) 12%,
				#fffaf4 50%,
				rgba(254, 247, 237, 0.88) 88%,
				rgba(254, 247, 237, 0) 100%
			);
		background-repeat: no-repeat, no-repeat, no-repeat;
		background-position: left center, right center, center center;
		background-size: auto 100%, auto 100%, 100% 100%;
		background-attachment: fixed, fixed, fixed;
	}
}

/* ≤1099px (タブレット/スマホ共通): 画面全体に暖色グラデーションを下地として
   敷く (最背面)。左右の装飾はこの「上」に薄く乗せる (下の装飾セクション)。
   ≥1100px (PC) の edge-fading gradient は変更しない。 */
@media (max-width: 1099px) {
	body.nb-yae-page {
		background-image: linear-gradient(90deg, #efe4cf 0%, #f6efdc 50%, #f3e7d2 100%);
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: scroll;
	}
}
/* ===== main gradient trial (END) ======================================= */

/* =========================================================
   左右の背景装飾 — タブレット/スマホ (≤1099px)
   ---------------------------------------------------------
   レイヤー順 (背面→前面):
     ① 暖色グラデーション (body の background-image。上の trial 内)
     ② 左右の装飾画像 (この ::before/::after、z-index:-1、薄く)
     ③ 本文/カード/ボタン (body の isolation で自動的に前面)
   グラデーションは装飾の「下」。装飾はその上に薄く乗せるだけで、
   オーバーレイで覆い隠さない (前回の失敗=ベージュ一色化を回避)。
     - ::before=左(星月夜) / ::after=右(桜富士)、pointer-events:none
     - mask-image で内側へ自然にフェード (端は見え、中央へ向かって透明)
     - opacity は低め: タブレット 0.13 / SP 左0.08・右0.10
       (左の青は暖色を打ち消しやすいので SP は低め + 軽い暖色フィルタ)
     - position:fixed + 端寄せのため横スクロールは発生しない
       (SP タイムラインの横スクロールにも影響しない)
   PC (≥1100px) は body の background-image 実装のため本疑似要素は不使用。
   ========================================================= */
@media (max-width: 1099px) {
	body.nb-yae-page::before,
	body.nb-yae-page::after {
		content: "";
		position: fixed;
		top: 0;
		bottom: 0;
		width: clamp(120px, 26vw, 260px);
		z-index: -1;
		pointer-events: none;
		opacity: 0.13;
		background-repeat: no-repeat;
		background-size: auto 100%;
	}

	body.nb-yae-page::before {
		left: 0;
		background-image: url("/wp-content/uploads/2026/06/art-yokohama-bg-left-starry.webp");
		background-position: left center;
		/* 内側(右)へ自然にフェード */
		-webkit-mask-image: linear-gradient(to right, #000 0%, #000 38%, transparent 100%);
		mask-image: linear-gradient(to right, #000 0%, #000 38%, transparent 100%);
		/* 青を少しだけ暖色寄りに (やりすぎない) */
		filter: sepia(0.18) saturate(0.8) brightness(1.06);
	}

	body.nb-yae-page::after {
		right: 0;
		background-image: url("/wp-content/uploads/2026/06/art-yokohama-bg-right-sakura-fuji.webp");
		background-position: right center;
		/* 内側(左)へ自然にフェード */
		-webkit-mask-image: linear-gradient(to left, #000 0%, #000 38%, transparent 100%);
		mask-image: linear-gradient(to left, #000 0%, #000 38%, transparent 100%);
	}
}

@media (max-width: 767px) {
	/* SP: 暖色を活かすため左(青)は特に低め、右(金)はやや残す */
	body.nb-yae-page::before {
		opacity: 0.08;
	}

	body.nb-yae-page::after {
		opacity: 0.10;
	}
}

/* =========================================================
   ショートコード本体
   ========================================================= */
.nb-yae {
	color: var(--yae-ink);
	line-height: 1.8;
}

.nb-yae strong {
	font-weight: 600;
	color: var(--yae-ink);
}

/* ---------- 導入文 + カレンダー導線 ---------- */
.nb-yae-intro {
	max-width: 760px;
	margin: clamp(28px, 5vw, 48px) auto clamp(34px, 6vw, 60px);
	text-align: center;
}

.nb-yae-intro__lead {
	margin: 0 0 1.6em;
	font-size: 1.02rem;
	line-height: 1.95;
	color: var(--yae-ink);
}

.nb-yae-intro__lead strong {
	border-bottom: 1px solid var(--yae-gold);
	padding-bottom: 1px;
}

.nb-yae-intro__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}

/* ---------- ボタン (案内状 / チケット風) ---------- */
.nb-yae-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.7em 1.4em;
	border: 1px solid var(--yae-line-strong);
	border-radius: 2px;
	background: var(--yae-paper);
	color: var(--yae-ink);
	font-size: 0.86rem;
	letter-spacing: 0.06em;
	line-height: 1.4;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.nb-yae-btn:hover,
.nb-yae-btn:focus-visible {
	background: var(--yae-ink);
	color: var(--yae-paper);
	border-color: var(--yae-ink);
}

/* チケット片風 (上部のカレンダー追加)。左に金のミシン目調アクセント。 */
.nb-yae-btn--ticket {
	padding-left: 1.3em;
	background: var(--yae-ink);
	color: var(--yae-paper);
	border-color: var(--yae-ink);
	border-left: 3px solid var(--yae-gold);
}

.nb-yae-btn--ticket:hover,
.nb-yae-btn--ticket:focus-visible {
	background: #1f1b16;
	color: var(--yae-paper);
	border-color: #1f1b16;
	border-left-color: var(--yae-gold);
}

.nb-yae-btn--ghost {
	background: transparent;
	border-color: var(--yae-line-strong);
	color: var(--yae-ink-soft);
}

.nb-yae-btn--accent {
	border-color: var(--yae-gold);
	color: var(--yae-gold-ink);
}

.nb-yae-btn--accent:hover,
.nb-yae-btn--accent:focus-visible {
	background: var(--yae-gold);
	color: #fff;
	border-color: var(--yae-gold);
}

/* ---------- 空表示 ---------- */
.nb-yae-empty {
	max-width: 680px;
	margin: 2em auto;
	padding: 1.4em 1.6em;
	border: 1px solid var(--yae-line);
	border-radius: 2px;
	background: var(--yae-paper);
	color: var(--yae-ink-soft);
	text-align: center;
}

/* ---------- セクション見出し ---------- */
.nb-yae-block {
	margin: clamp(38px, 6vw, 66px) 0 0;
}

.nb-yae-heading {
	display: flex;
	align-items: center;
	gap: 0.9em;
	margin: 0 0 clamp(18px, 2.6vw, 28px);
}

.nb-yae-heading::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: var(--yae-line);
}

.nb-yae-heading__en {
	font-family: var(--yae-eyebrow);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--yae-gold);
}

.nb-yae-heading__ja {
	font-family: var(--yae-serif);
	font-weight: 500;
	font-size: clamp(1.15rem, 2vw, 1.4rem);
	letter-spacing: 0.04em;
	color: var(--yae-ink);
}

/* =========================================================
   会期タイムライン (ガント風) — 行間にゆとりを持たせる
   ========================================================= */
.nb-yae-timeline {
	padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 30px) clamp(10px, 1.4vw, 18px);
	border: 1px solid var(--yae-line);
	border-radius: 3px;
	background: var(--yae-paper);
}

/* PC: 会期タイムラインのセクションだけ本文カードより少しワイドな
   「会期一覧パネル」として見せる。コンテナ中央を基準に左右へ均等に
   はみ出させる (100vw ではなく余白を引いて横スクロールを防ぐ)。
   見出しごとワイドにして、見出しの下線も広い面に揃える。 */
@media (min-width: 1080px) {
	.nb-yae-block--timeline {
		width: min(1280px, calc(100vw - 56px));
		margin-left: 50%;
		transform: translateX(-50%);
	}
}

.nb-yae-timeline__scale,
.nb-yae-timeline__row {
	display: flex;
	align-items: stretch;
}

/* 展覧会名の列。タイトルがなるべく 1 行で収まる幅を確保し、バーと
   十分に距離を取る。長い場合のみ自然に折り返す (nowrap にはしない)。 */
.nb-yae-timeline__name {
	flex: 0 0 auto;
	width: clamp(220px, 30%, 380px);
	padding-right: 28px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 3px;
	font-family: var(--yae-serif);
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--yae-ink);
}

.nb-yae-timeline__name a {
	color: var(--yae-ink);
	text-decoration: none;
}

.nb-yae-timeline__name a:hover,
.nb-yae-timeline__name a:focus-visible {
	color: var(--yae-rust);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.nb-yae-timeline__venue {
	font-family: var(--yae-eyebrow);
	font-size: 0.7rem;
	letter-spacing: 0.06em;
	color: var(--yae-ink-soft);
}

/* バー/罫/今日線の基準。ゆったりした行高で詰まって見えないように。 */
.nb-yae-timeline__track {
	position: relative;
	flex: 1 1 auto;
	min-height: 66px;
}

/* 行間の区切り罫 (名前列・トラックの両方に引いて 1 本に見せる)。 */
.nb-yae-timeline__row + .nb-yae-timeline__row .nb-yae-timeline__track,
.nb-yae-timeline__row + .nb-yae-timeline__row .nb-yae-timeline__name {
	border-top: 1px solid var(--yae-line);
}

.nb-yae-timeline__scale {
	margin-bottom: 12px;
}

.nb-yae-timeline__scale .nb-yae-timeline__track {
	min-height: 22px;
}

.nb-yae-timeline__tick {
	position: absolute;
	left: var(--nb-tick-left, 0);
	top: 0;
	transform: translateX(-50%);
	white-space: nowrap;
	font-family: var(--yae-eyebrow);
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	color: var(--yae-ink-soft);
}

.nb-yae-timeline__today-label {
	position: absolute;
	left: var(--nb-today-left, 0);
	bottom: 0;
	transform: translateX(-50%);
	white-space: nowrap;
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--yae-rust);
}

.nb-yae-timeline__gridline {
	position: absolute;
	left: var(--nb-tick-left, 0);
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--yae-line);
}

.nb-yae-timeline__today {
	position: absolute;
	left: var(--nb-today-left, 0);
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--yae-rust);
}

/* 会期バー。角はほぼ直角でタイムラインの「区間」らしく。 */
.nb-yae-timeline__bar {
	position: absolute;
	top: 50%;
	left: var(--nb-bar-left, 0);
	width: var(--nb-bar-width, 0);
	min-width: 10px;
	height: 18px;
	transform: translateY(-50%);
	border-radius: 2px;
	display: flex;
	align-items: center;
	overflow: hidden;
}

.nb-yae-timeline__bar--ongoing {
	background: var(--yae-navy);
}

.nb-yae-timeline__bar--upcoming {
	background: var(--yae-gold-soft);
	border: 1px solid var(--yae-gold);
}

.nb-yae-timeline__bar-text {
	padding: 0 0.7em;
	font-size: 0.68rem;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--yae-paper);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nb-yae-timeline__bar--upcoming .nb-yae-timeline__bar-text {
	color: var(--yae-gold-ink);
}

/* =========================================================
   展覧会カード (展示ラベル風)
   ========================================================= */
/* 1 カラム。1 件ずつ横長の紹介パネルとして大きく見せる。 */
.nb-yae-cards {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 3vw, 36px);
}

.nb-yae-card {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 2.6vw, 34px);
	padding: clamp(24px, 3vw, 42px);
	background: var(--yae-paper);
	border: 1px solid var(--yae-line);
	border-top: 3px solid var(--yae-gold); /* 壁ラベルの上辺アクセント */
	border-radius: 2px;
	box-shadow: none;
	scroll-margin-top: 96px;
}

/* PC: 左=展覧会情報 / 右=公式サイトプレビュー の 2 カラム。 */
@media (min-width: 768px) {
	.nb-yae-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr) clamp(280px, 34%, 400px);
		align-items: start;
	}
}

.nb-yae-card__main,
.nb-yae-card__aside {
	min-width: 0;
}

.nb-yae-card__labels {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 1em;
}

.nb-yae-card__status {
	padding: 0.3em 0.8em;
	border-radius: 1px;
	font-family: var(--yae-eyebrow);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.12em;
}

.nb-yae-card__status--ongoing {
	background: var(--yae-navy);
	color: var(--yae-paper);
}

.nb-yae-card__status--upcoming {
	background: transparent;
	color: var(--yae-navy);
	border: 1px solid var(--yae-navy);
}

.nb-yae-card__free {
	padding: 0.3em 0.8em;
	border-radius: 1px;
	background: var(--yae-gold-soft);
	color: var(--yae-gold-ink);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.nb-yae-card__venue {
	margin: 0 0 0.35em;
	font-family: var(--yae-eyebrow);
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	color: var(--yae-ink-soft);
}

.nb-yae-card__title {
	margin: 0 0 0.7em;
	font-family: var(--yae-serif);
	font-weight: 500;
	font-size: clamp(1.35rem, 2.2vw, 1.75rem);
	line-height: 1.5;
	color: var(--yae-ink);
}

.nb-yae-card__summary {
	margin: 0 0 1.2em;
	font-size: 0.92rem;
	line-height: 1.85;
	color: var(--yae-ink);
}

.nb-yae-card__meta {
	margin: 0 0 1em;
	padding: 0;
	border-top: 1px solid var(--yae-line);
}

.nb-yae-card__row {
	display: grid;
	grid-template-columns: 5.5em 1fr;
	gap: 0.3em 1em;
	padding: 0.55em 0;
	border-bottom: 1px solid var(--yae-line);
	font-size: 0.86rem;
	line-height: 1.65;
}

.nb-yae-card__row-label {
	margin: 0;
	font-family: var(--yae-eyebrow);
	font-size: 0.74rem;
	letter-spacing: 0.06em;
	color: var(--yae-ink-soft);
}

.nb-yae-card__row-value {
	margin: 0;
	color: var(--yae-ink);
}

/* 公式表記の補足 (詳細は公式に合わせる)。控えめなキャプション扱い。 */
.nb-yae-card__official {
	margin: 0 0 1.2em;
	font-size: 0.78rem;
	line-height: 1.75;
	color: var(--yae-ink-soft);
}

.nb-yae-card__official-label {
	display: inline-block;
	margin-right: 0.6em;
	padding: 0.1em 0.55em;
	border: 1px solid var(--yae-line-strong);
	border-radius: 1px;
	font-family: var(--yae-eyebrow);
	font-size: 0.66rem;
	letter-spacing: 0.08em;
	color: var(--yae-ink-soft);
}

.nb-yae-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: auto;
}

.nb-yae-card__actions .nb-yae-btn {
	padding: 0.5em 1em;
	font-size: 0.78rem;
}

/* =========================================================
   公式サイトプレビュー (ブラウザウィンドウ風リンクカード)
   iframe は使わず、ドメイン + 額装風プレースホルダ + 導線で表現。
   ========================================================= */
.nb-yae-card__aside {
	display: flex;
}

/* 公式サイトプレビュー = 1 枚の「角丸ブラウザウィンドウカード」。
   外側カード (このボックス) は角丸あり。overflow:hidden により、上部バーの
   上角と下部 CTA の下角がこの角丸でクリップされ、ブラウザ枠らしく丸くなる。
   中段のスクリーンショット表示窓 (.nb-yae-preview__window) はカード角に
   接しないので四角を保つ。 */
.nb-yae-preview {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid var(--yae-line-strong);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	color: var(--yae-ink);
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.nb-yae-preview:hover,
.nb-yae-preview:focus-visible {
	border-color: var(--yae-gold);
	box-shadow: 0 8px 24px rgba(43, 38, 32, 0.12);
	transform: translateY(-2px);
}

/* ブラウザ chrome 風の上部バー */
.nb-yae-preview__bar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	background: #ece8df;
	border-bottom: 1px solid var(--yae-line);
}

.nb-yae-preview__dots {
	display: inline-flex;
	gap: 5px;
	flex: 0 0 auto;
}

.nb-yae-preview__dots i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--yae-line-strong);
}

.nb-yae-preview__addr {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	font-family: var(--yae-eyebrow);
	font-size: 0.74rem;
	color: var(--yae-ink-soft);
}

.nb-yae-preview__favicon {
	flex: 0 0 auto;
	border-radius: 2px;
}

.nb-yae-preview__host {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* スクリーンショット表示窓 (赤枠部分)。カード中段にありカード角丸に
   接しないので四角を保つ。画像があれば余白を外して画面写真をフィット。 */
.nb-yae-preview__window {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 176px;
	padding: 22px;
	background: var(--yae-bg);
}

.nb-yae-preview__window--shot {
	padding: 0;
	min-height: 0;
}

/* 公式サイトキャプチャ画像は角丸なし。ウィンドウ枠 (.nb-yae-preview__window)
   も角丸 0。カード外枠と CTA ボタンの角丸のみ維持する。
   親テーマが本文画像に border-radius を付与しており (img が 14px に
   丸められていた) これを上書きするため、スクショ画像とウィンドウは
   !important で 0 を明示する。 */
.nb-yae-preview__window,
.nb-yae-preview__window img,
.nb-yae-preview__shot {
	border-radius: 0 !important;
}

.nb-yae-preview__shot {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 8 / 5;
	object-fit: cover;
	object-position: top center;
}

/* 額装風プレースホルダ (二重枠 + 中央にタイトル) */
.nb-yae-preview__frame {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	width: 100%;
	padding: 1.5em 1.3em;
	background: var(--yae-paper);
	border: 1px solid var(--yae-line-strong);
	outline: 3px solid #fff;
	outline-offset: -7px;
	text-align: center;
}

.nb-yae-preview__plabel {
	font-family: var(--yae-eyebrow);
	font-size: 0.64rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-indent: 0.28em;
	color: var(--yae-gold);
}

.nb-yae-preview__ptitle {
	font-family: var(--yae-serif);
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--yae-ink);
}

.nb-yae-preview__pvenue {
	font-family: var(--yae-eyebrow);
	font-size: 0.7rem;
	letter-spacing: 0.08em;
	color: var(--yae-ink-soft);
}

/* 「公式サイトを見る」導線 (カード最下部)。下側の角丸はカードの
   border-radius + overflow:hidden のクリップで付く (= カード下角と一致)。 */
.nb-yae-preview__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.95em 1em;
	background: var(--yae-ink);
	color: var(--yae-paper);
	font-size: 0.82rem;
	letter-spacing: 0.08em;
	transition: background 0.18s ease;
}

.nb-yae-preview:hover .nb-yae-preview__cta,
.nb-yae-preview:focus-visible .nb-yae-preview__cta {
	background: #1f1b16;
}

.nb-yae-preview__cta-arrow {
	font-size: 0.95em;
}

/* ---------- 注意書き ---------- */
.nb-yae-note {
	max-width: 760px;
	margin: clamp(40px, 6vw, 72px) auto 0;
	padding-top: 1.4em;
	border-top: 1px solid var(--yae-line);
	font-size: 0.82rem;
	line-height: 1.95;
	color: var(--yae-ink-soft);
	text-align: center;
}

.nb-yae-note strong {
	color: var(--yae-ink);
	font-weight: 600;
}

/* =========================================================
   レスポンシブ: SP (≤767px)
   - 会期タイムラインは隠さず、横スクロールで表示する
     (min-width で潰さず、overflow-x:auto でスクロール。右端をフェード
      して「横に続く」ことを示す)。
   - 展覧会カードは 1 カラム (既に flex 縦並び)。
   ========================================================= */
@media (max-width: 767px) {
	.nb-yae-timeline {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		/* 右端フェードで横スクロール可能を示唆 */
		-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
		mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
	}

	/* 画面幅に押し込まず、最低幅を確保して横スクロールさせる */
	.nb-yae-timeline__scale,
	.nb-yae-timeline__row {
		min-width: 680px;
	}

	/* SP では展覧会名の列をやや狭め、バー領域を確保 */
	.nb-yae-timeline__name {
		width: 150px;
		padding-right: 14px;
	}

	.nb-yae-intro__actions .nb-yae-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nb-yae-btn {
		transition: none;
	}
}

/* ---------- 自動更新ステータス (ページ下部の小さな表示) ---------- */
.nb-yae-auto-status {
	max-width: 760px;
	margin: clamp(28px, 4vw, 44px) auto 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-size: 0.76rem;
	letter-spacing: 0.04em;
	color: var(--yae-ink-soft);
}

.nb-yae-auto-status__badge {
	display: inline-block;
	padding: 0.2em 0.85em;
	border: 1px solid var(--yae-line);
	border-radius: 999px;
	background: var(--yae-paper);
	color: var(--yae-gold);
	font-weight: 600;
	letter-spacing: 0.06em;
}

.nb-yae-auto-status__sep {
	opacity: 0.5;
}

.nb-yae-auto-status__date {
	color: var(--yae-ink-soft);
}