/* ============================================================
   Journey 個別記事 ―― 読み物タイプごとに別の「雑誌の一ページ」
   対象：通常投稿 かつ Journey(travel)カテゴリ かつ content_type が
         ARTICLE / COLUMN / ESSAY のものだけ（functions.php で限定配信）
   方針：親テーマ・SWELL標準テンプレートは変更しない。
         既存DOM（#top_title_area の扉／自動目次／本文／参照札／
         本文内ギャラリー／旅日記ナビ）を CSS と最小JS で組み替える。
   背景：Journeyのページ面は純白 #fff（クリーム/ベージュを敷かない）
   ============================================================ */

/* ── 0. 共通の下地 ────────────────────────────────────────── */

/* JSが扉の組み替えを終えるまでは元レイアウトのまま（no-JSでも壊さない） */
#body_wrap.vayu-jsingle-ready #top_title_area { display: none !important; }

/* 旧・関連記事欄「お時間あれば、こちらもどうぞ…」は新誌面では出さない。
   前後の記事リンク（.p-pnLinks）とコメント欄は残す。Journey誌面のみ・他ページ無影響。 */
#body_wrap.vayu-jsingle-ready #after_article .l-articleBottom__section.-related { display: none !important; }

/* 標準パンくずの帯は視覚上だけ隠す。head内 JSON-LD の BreadcrumbList は無関係なので残る */
#body_wrap.vayu-jsingle-ready > #breadcrumb {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ページ面を純白に（Journey個別記事のみ） */
#body_wrap.vayu-journey-post.vayu-jsingle-ready,
#body_wrap.vayu-journey-post.vayu-jsingle-ready #content,
#body_wrap.vayu-journey-post.vayu-jsingle-ready #main_content {
	background-color: #fff;
}

/* SWELLが本文頭に出す装飾バッジ（vayu-content-type .-single）は扉に集約するので隠す */
#body_wrap.vayu-jsingle-ready .l-mainContent__inner > .vayu-content-type.-single { display: none; }

/* 扉コンテナ（PHPが .l-mainContent__inner の先頭に挿入） */
.vayu-jsingle {
	margin: 0 0 4px;
	font-feature-settings: "palt" 1;
}
.vayu-jsingle * { box-sizing: border-box; }

/* ← JOURNEYへ戻る */
.vayu-jsingle__back {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	letter-spacing: .18em;
	color: #8a949c;
	text-decoration: none;
	padding: 4px 0;
	transition: color .18s ease;
}
.vayu-jsingle__back:hover { color: #3f4a52; }

/* 扉に取り込んだ SWELL の元タイトル塊（JSが lede へ移設） */
.vayu-jsingle .p-articleHead.c-postTitle {
	all: unset;
	display: block;
}
.vayu-jsingle .c-postTitle__ttl {
	margin: 0;
	color: #2f3a42;
	font-weight: 600;
}
/* 装飾用の日付（aria-hidden）は扉では隠し、扉側の整形メタを使う */
.vayu-jsingle .c-postTitle__date { display: none; }
.vayu-jsingle .p-articleMetas.-top { display: none; }
/* 旧 vayu-journey-post.css のタイトル装飾（紙飛行機::before ／ "JOURNEY"::after）は
   扉のキッカーに統合したので止める */
.vayu-jsingle .p-articleHead.c-postTitle::before,
.vayu-jsingle .p-articleHead.c-postTitle::after {
	content: none !important;
	display: none !important;
}
/* 扉直後、本文の入りを詰める（SWELL標準の4emは扉があると空きすぎる） */
#body_wrap.vayu-jsingle-ready .l-mainContent__inner > .post_content { margin-top: 26px; }

/* キッカー */
.vayu-jsingle__kicker {
	margin: 0 0 14px;
	font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: .3em;
	color: #9aa4ac;
	display: flex;
	align-items: center;
	gap: 12px;
}
.vayu-jsingle__ctype {
	color: #5a6b78;
	border: 1px solid rgba(124, 135, 144, .4);
	border-radius: 3px;
	padding: 3px 9px;
	letter-spacing: .22em;
}
.vayu-jsingle__cat { position: relative; padding-left: 14px; }
.vayu-jsingle__cat::before {
	content: ""; position: absolute; left: 0; top: 50%;
	width: 6px; height: 6px; margin-top: -3px;
	border-radius: 50%; background: #cfd6da;
}

/* 手動抜粋（設定がある時だけPHPが出力。無ければ自動生成しない） */
.vayu-jsingle__excerpt {
	margin: 16px 0 0;
	color: #5c6771;
	line-height: 1.95;
}

/* 整形メタ（日付・署名） */
.vayu-jsingle__meta {
	margin: 18px 0 0;
	font-family: "Josefin Sans", "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	letter-spacing: .12em;
	color: #9aa4ac;
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

/* 目次を細い横長の案内に（ARTICLE で扉直下へ移設） */
.vayu-jsingle__tocslot { margin: 22px 0 0; }
.vayu-jsingle__tocslot .p-toc,
#body_wrap.vayu-jsingle-ready .vayu-jsingle__tocslot .p-toc {
	margin: 0;
	padding: 14px 20px;
	background: #fff;
	border: 1px solid #e7e3da;
	border-radius: 8px;
	max-width: none;
	width: 100%;
}
.vayu-jsingle__tocslot .p-toc__ttl {
	font-size: 11px;
	letter-spacing: .18em;
	color: #8a949c;
}
.vayu-jsingle__tocslot .p-toc__ttl::before { display: none; }
.vayu-jsingle__tocslot .p-toc__list {
	columns: 2;
	column-gap: 28px;
	margin-top: 8px;
}
.vayu-jsingle__tocslot .p-toc__list > li { break-inside: avoid; }
.vayu-jsingle__tocslot .p-toc__link { font-size: 13px; line-height: 1.7; }

/* ============================================================
   1. ARTICLE ―― 左に文字の塊、右にアイキャッチ。一枚の扉。
   ============================================================ */
.vayu-jsingle--article { margin-bottom: 8px; }

.vayu-jsingle--article .vayu-jsingle__door {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 44%);
	gap: 40px;
	align-items: center;
	margin-top: 14px;
	padding-bottom: 26px;
	border-bottom: 1px solid #e7e3da;
}
.vayu-jsingle--article .c-postTitle__ttl {
	font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem);
	line-height: 1.5;
	letter-spacing: .01em;
}
/* ARTICLE 題名：JS が「——」「？」で主題／副題に分けたときの副題行（Mind／Body と同挙動） */
.vayu-jsingle--article .c-postTitle__ttl .vayu-jsingle__tMain { display: block; }
.vayu-jsingle--article .c-postTitle__ttl .vayu-jsingle__tSub {
	display: block;
	margin-top: 8px;
	font-size: clamp(.95rem, .82rem + .5vw, 1.2rem);
	line-height: 1.7;
	font-weight: 400;
	letter-spacing: .02em;
	color: #6a7681;
}
.vayu-jsingle--article .vayu-jsingle__figure {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	background: #f3f2ee;
	aspect-ratio: 4 / 3;
}
.vayu-jsingle--article .vayu-jsingle__figure img {
	width: 100%; height: 100%;
	object-fit: cover; display: block;
}
/* ARTICLE：本文は読み通しやすい標準幅。参照札はそのまま生かす */
.vayu-jsingle--article ~ .post_content { max-width: 100%; }

/* ============================================================
   2. COLUMN ―― 写真より「問い」。縦の思考の流れ。左右分割しない。
   ============================================================ */
.vayu-jsingle--column .vayu-jsingle__door {
	margin-top: 10px;
	padding: 0 0 22px;
	border-bottom: 1px solid #d9dde0;
}
.vayu-jsingle--column .vayu-jsingle__figure { display: none; } /* 写真は主役にしない */
.vayu-jsingle--column .c-postTitle__ttl {
	font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.35rem);
	line-height: 1.5;
	letter-spacing: .015em;
	max-width: 22em;
}
.vayu-jsingle--column .vayu-jsingle__kicker { margin-bottom: 18px; }
.vayu-jsingle--column .vayu-jsingle__excerpt {
	margin-top: 20px;
	padding-left: 16px;
	border-left: 2px solid #c4b7c9;   /* Mind寄りの藤色ヒント（COLUMNの静けさ） */
	font-size: 1.02em;
	color: #4b535b;
	max-width: 30em;
}
.vayu-jsingle--column .vayu-jsingle__meta { margin-top: 16px; }

/* COLUMN：本文幅を ARTICLE より狭め、縦読みの流れをつくる */
#body_wrap.vayu-jsingle-ready.vayu-ctype-column .post_content > *:not(.wp-block-image):not(figure):not(.p-toc):not(table):not(.wp-block-table) {
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
}
/* COLUMN：目次は常設の大箱にしない。見出しが多い時だけ小さく inline 表示 */
#body_wrap.vayu-jsingle-ready.vayu-ctype-column .post_content .p-toc {
	max-width: 34em;
	margin: 22px auto;
	padding: 10px 16px;
	background: transparent;
	border: 0;
	border-top: 1px solid #e2e5e7;
	border-bottom: 1px solid #e2e5e7;
	border-radius: 0;
	font-size: .92em;
}
#body_wrap.vayu-jsingle-ready.vayu-ctype-column .post_content .p-toc__ttl { font-size: 10px; letter-spacing:.18em; color:#9aa4ac; }
#body_wrap.vayu-jsingle-ready.vayu-ctype-column .post_content .p-toc__ttl::before { display:none; }
/* 見出しが3個未満なら目次自体を出さない（SWELLが出しても隠す） */
#body_wrap.vayu-jsingle-ready.vayu-ctype-column .post_content .p-toc__list[data-level="2"] > li:only-child { list-style: none; }

/* ============================================================
   3. ESSAY ―― 本人写真・場所・日付・短い副題が主役。
      本文内の写真帖(jrnl-*/vayu-grid)・旅日記ナビは一切触らない。
   ============================================================ */
.vayu-jsingle--essay .vayu-jsingle__door {
	margin-top: 8px;
	padding: 0 0 20px;
	border-bottom: 1px solid #e7e3da;
}
.vayu-jsingle--essay .vayu-jsingle__figure { display: none; } /* 本文写真と重複させない */
.vayu-jsingle--essay .vayu-jsingle__lede {
	border-left: 3px solid rgba(90, 100, 110, .3);
	padding-left: 22px;
}
.vayu-jsingle--essay .c-postTitle__ttl {
	font-size: clamp(1.4rem, 1.1rem + 1.3vw, 1.9rem);
	line-height: 1.6;
	font-weight: 500;
}
.vayu-jsingle--essay .vayu-jsingle__excerpt {
	font-size: 1em;
	color: #6b7680;
}
/* ESSAY：大きな目次は原則置かない */
#body_wrap.vayu-jsingle-ready.vayu-ctype-essay .post_content > .p-toc { display: none; }

/* ESSAY 本文写真（プレーンブロック）：サイドバー無しの広い段（約900px）で、
   スマホ縦位置の写真が1枚で画面全体を覆ってしまうのを抑える。
   写真帖(jrnl-*) と vayu-grid は入れ子のため、この直下セレクタでは対象にならない。 */
#body_wrap.vayu-jsingle-ready.vayu-ctype-essay .post_content > figure.wp-block-image {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}
#body_wrap.vayu-jsingle-ready.vayu-ctype-essay .post_content > figure.wp-block-image img {
	max-height: 76vh;
	width: auto;
	height: auto;
	margin-left: auto;
	margin-right: auto;
}

/* ESSAY 互換：旧・ペルー旅日記（ID 1121/1124/1250/1251）の本文先頭にある
   独自スタイルの旧見出しは、functions.php の the_content フィルタで
   <p class="vayu-jsingle-oldttl"> へ格下げ済み（DOM上のH1は正式タイトル1個だけ）。
   その格下げ後の段落は誌面では出さない（写真・署名・副題・旅日記ナビは残る）。 */
.vayu-jsingle-oldttl { display: none !important; }

/* ============================================================
   3-b. ESSAY「写真から入る誌面」— Phase 1
   対象：body.vayu-jphoto-essay（functions.php で postid 216/476/1668 のみ付与）。
   jrnl-* 写真帖・vayu-grid・他のESSAY・ARTICLE/COLUMN には一切かからない。
   ============================================================ */

/* 扉を縦積みにし、アイキャッチを先頭の主役へ（DOM順 lede→figure を order で入替） */
#body_wrap.vayu-jphoto-essay.vayu-jsingle-ready .vayu-jsingle--essay .vayu-jsingle__door {
	display: flex;
	flex-direction: column;
	gap: 22px;
	margin-top: 6px;
	padding: 0 0 22px;
}
#body_wrap.vayu-jphoto-essay .vayu-jsingle--essay .vayu-jsingle__figure {
	display: block;            /* 上の display:none を上書き */
	order: -1;
	width: 100%;
	max-width: 1080px;
	margin: 0 auto;
	border-radius: 10px;
	overflow: hidden;
	background: #eceae4;
	aspect-ratio: 16 / 9;      /* 人物・建物の重要部を切らない範囲の横帯 */
}
#body_wrap.vayu-jphoto-essay .vayu-jsingle--essay .vayu-jsingle__figure img {
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	display: block;
}
/* 低解像度アイキャッチ（PHPが figure に is-lowres を付与）：
   引き伸ばさず、余白のある静かな写真扉に。原寸 500px級が甘く見えない上限で止める。 */
#body_wrap.vayu-jphoto-essay .vayu-jsingle--essay .vayu-jsingle__figure.is-lowres {
	/* 実測：500px級の原寸に対し 560px＝1.12倍。甘さがほぼ分からない上限。
	   620で1.24倍、680で1.36倍と徐々に眠くなるため 560 で止める。 */
	max-width: 560px;
	aspect-ratio: auto;
	background: transparent;
	border-radius: 8px;
	margin: 4px auto 8px;
}
#body_wrap.vayu-jphoto-essay .vayu-jsingle--essay .vayu-jsingle__figure.is-lowres img {
	height: auto;
	object-fit: contain;
}
/* 高解像度の原本に差し替われば is-lowres は付かず、そのまま上の 16:9 hero に戻る */

/* 写真の下：キッカー→H1→抜粋→日付（左罫は残す） */
#body_wrap.vayu-jphoto-essay .vayu-jsingle--essay .vayu-jsingle__lede {
	order: 0;
	max-width: 46em;
}
#body_wrap.vayu-jphoto-essay .vayu-jsingle--essay .c-postTitle__ttl {
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem);
	line-height: 1.55;
	line-break: strict;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

@media (max-width: 900px) {
	#body_wrap.vayu-jphoto-essay.vayu-jsingle-ready .vayu-jsingle--essay .vayu-jsingle__door { gap: 16px; }
	/* 390px：写真 → 題名。ただし写真で最初の画面を占有しない。
	   写真の高さを抑え、題名の入口が最初のスクロール内に見える位置にする。 */
	#body_wrap.vayu-jphoto-essay .vayu-jsingle--essay .vayu-jsingle__figure {
		order: -1;
		border-radius: 8px;
		aspect-ratio: 3 / 2;
		max-width: 100%;
		max-height: 46vh;
	}
	#body_wrap.vayu-jphoto-essay .vayu-jsingle--essay .vayu-jsingle__figure.is-lowres {
		max-width: 100%;
		max-height: 42vh;
	}
	#body_wrap.vayu-jphoto-essay .vayu-jsingle--essay .vayu-jsingle__lede { order: 0; max-width: 100%; }
}

/* ============================================================
   4. レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
	.vayu-jsingle--article .vayu-jsingle__door {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	/* 390px想定：キッカー→H1→抜粋→画像→折りたたみ目次→本文 の順 */
	.vayu-jsingle--article .vayu-jsingle__lede { order: 1; }
	.vayu-jsingle--article .vayu-jsingle__figure { order: 2; aspect-ratio: 16 / 10; }
	.vayu-jsingle__tocslot { order: 3; }

	.vayu-jsingle__tocslot .p-toc__list { columns: 1; }

	/* 折りたたみ式「この記事をめぐる」 */
	.vayu-jsingle__tocslot .p-toc__ttl {
		display: block;
		cursor: pointer;
		position: relative;
		padding-right: 20px;
	}
	.vayu-jsingle__tocslot .p-toc__ttl::after {
		content: "";
		position: absolute; right: 2px; top: 50%;
		width: 7px; height: 7px; margin-top: -5px;
		border-right: 1.5px solid #9aa4ac;
		border-bottom: 1.5px solid #9aa4ac;
		transform: rotate(45deg);
		transition: transform .2s ease;
	}
	.vayu-jsingle__tocslot.-collapsed .p-toc__list { display: none; }
	.vayu-jsingle__tocslot.-collapsed .p-toc__ttl::after { transform: rotate(-45deg); }

	#body_wrap.vayu-jsingle-ready.vayu-ctype-column .post_content > *:not(.wp-block-image):not(figure):not(.p-toc):not(table):not(.wp-block-table),
	#body_wrap.vayu-jsingle-ready.vayu-ctype-column .post_content .p-toc {
		max-width: 100%;
	}
	.vayu-jsingle--column .c-postTitle__ttl,
	.vayu-jsingle--column .vayu-jsingle__excerpt { max-width: 100%; }
}

@media (max-width: 600px) {
	.vayu-jsingle__kicker { flex-wrap: wrap; gap: 8px; }
	.vayu-jsingle--essay .vayu-jsingle__lede { padding-left: 16px; }
	.vayu-jsingle--article .vayu-jsingle__door { padding-bottom: 20px; }
}