/* ==========================================================================
   Kikuo Watanabe Portal スキン追加分
   トークン（色・書体・角丸・影）は style.css の :root が正本。
   ここには portal 固有の意匠だけを置く：辞典・索引の基調として、
   ヘッダー／フッターの二重罫、紙面のフレッシュバーと朱赤のタグ、
   青い参照リンク、墨色の下線で締めるセクション見出し、点線の年表。
   意匠は原則として親の部品に寄せるが、1.1.3 で header.php／single.php／
   template-parts/guide-cards.php を上書きして名鑑の形に組み替えたため、
   その専用部品（索引タブ・記録帯・案内一覧）の意匠も持つ。
   ========================================================================== */

/* ---- ヘッダー下の罫とフッター上の二重罫（サンプルの header.site／footer.site の基調） ----
   ヘッダー下は 1.1.3 で索引タブの「棚」になるため、実線2pxに読み替えた
   （タブの下辺はこの罫と一体化する。下記「索引タブ」参照）。 */
.bmb-site-header {
	border-bottom: 2px solid var(--portal-line2);
}

.bmb-footer {
	border-top: 3px double var(--portal-line2);
}

/* フッター下段の区切りは、親指定が kikuo-fun の金色の固定値なので罫色に読み替える */
.bmb-footer__bottom {
	border-top-color: rgba(251, 250, 246, 0.3);
}

/* ---- フレッシュバー：紺の帯を「紙面＋朱赤タグ」に読み替える ----
   サンプルの見出しタグ（朱赤地に白文字）の意匠。バッジの中身は親の仕様で
   サイト名そのまま。帯は紙面（一段濃い生成り）に墨文字で、索引の奥付らしく。 */
.bmb-freshbar {
	background: var(--surface-2);
	color: var(--ink);
	border-bottom: 1px solid var(--portal-line2);
}

.bmb-freshbar__badge {
	background: var(--gold);
	border-color: var(--gold);
	border-radius: 2px;
	color: #fff;
	letter-spacing: 0.08em;
}

/* ダークモードでは朱赤が明るくなる（--gold=#e0786c）ため、タグの文字は墨色にして対比を保つ */
@media (prefers-color-scheme: dark) {
	.bmb-freshbar__badge {
		color: #16171b;
	}
}

/* ---- ヘッダーのサイト名：正式名称を省略せず全文出す ----
   サイト名「全国の渡辺喜久男さんを集めました！」は17文字あり、狭いデスクトップ
   幅では名称＋ドメイン＋ナビ5ピルでコンテナ上限を超え、ブランド側が省略される
   ことがある（watcher 1.0.3 で先行して入れた調整と同じ型）。
   名称を 1.125rem（18px）に一段下げて幅を詰め、ブランドは縮小させない。
   入りきらない分は横スクロール可のナビ側が吸収する。
   モバイル（≤768px）は親の仕様どおりブランド非表示のまま触らない。 */
@media (min-width: 769px) {
	.bmb-site-header__inner {
		gap: 16px 20px;
	}

	.bmb-site-header__brand {
		flex: 0 0 auto;
	}

	.bmb-site-header__name {
		font-size: 1.125rem;
	}

	/* ナビも少しだけ詰め、全幅で収まる範囲を広げる */
	.bmb-nav {
		gap: 6px;
	}

	.bmb-nav a {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* 現在地のナビの色は、下記「索引タブ」（1.1.3）の指定に一本化した。 */

/* ---- 参照リンクは青（辞典・索引の基調） ----
   親の既定は a の色＝--gold-ink（このサイトでは朱赤）だが、サンプルでは
   索引のリンクは一貫して青（--blue）で、赤は見出しタグ・印・日付の専用色。
   ナビ・カード題字・フッターリンクなど部品側で色を指定しているものは
   そちらが勝つため、この上書きが効くのは本文リンクや「詳しく見る」系の
   参照リンクに限られる。 */
a {
	color: var(--portal-blue);
}

/* ---- セクション見出しは墨色の2px下線で締める（サンプルの .sec-head の基調） ---- */
.bmb-section__head {
	border-bottom: 2px solid var(--ink);
	padding-bottom: 8px;
}

/* ---- ボタン：主ボタンは墨地に紙色（サンプルの .btn の基調） ----
   親の指定は「背景 var(--navy)／文字 var(--accent-soft)」で、portal では
   淡い赤地の色が文字になり判読はできるが、サンプルの素直な紙色に合わせる。 */
.bmb-btn--primary {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--bg);
}

.bmb-btn--primary:hover {
	opacity: 0.88;
}

/* ---- 検索フォーム：索引の検索ボックス（サンプルの .searchbox の基調） ---- */
.bmb-main .search-form,
.bmb-notfound .search-form {
	background: var(--surface-2);
	border: 1px solid var(--portal-line2);
	padding: 16px;
}

.search-form input[type="search"] {
	border-color: var(--portal-line2);
	border-radius: 2px;
}

.search-form button,
.search-form input[type="submit"] {
	background: var(--ink);
	border-color: var(--ink);
	border-radius: 2px;
	color: var(--bg);
}

/* ---- 案内カード（ダーク面）のCTA：朱赤地のボタンに白文字 ----
   親の指定は「背景 var(--gold)／文字 var(--navy)」で、portal のライトモード
   では朱赤（#b3352b）地に墨（#22252b）文字になり対比が弱い（他サイトで
   起きた同色化と同じ型）。ライトモードだけ文字を白に読み替える。
   ダークモードは --gold が明るい赤（#e0786c）で墨文字が読めるため親のまま。 */
@media (prefers-color-scheme: light) {
	.bmb-guide__card.is-dark .bmb-guide__cta {
		color: #fff;
	}
}

/* ---- 筆頭カード：プロフィールminiは2pxの墨枠で「見出し語カード」の重みにする
   （サンプルの .lead-card の基調） ---- */
.bmb-profile-mini {
	border: 2px solid var(--ink);
}

/* ---- 人物カード：罫は強い方の線で台帳らしく（サンプルの .pcard の基調） ---- */
.bmb-card {
	border-color: var(--portal-line2);
}

.bmb-record-card {
	border-color: var(--portal-line2);
}

/* ---- 年表は点線の区切り（サンプルの .timeline の基調）。日付は親指定の
   --gold-ink＝朱赤で、サンプルの赤い日付と一致する ---- */
.bmb-timeline__item {
	border-top: 1px dotted var(--portal-line2);
}

/* ---- 数字は等幅で揃える（サンプルの名簿集計の tabular-nums の基調） ---- */
.bmb-num,
.bmb-numbers-panel__value,
.bmb-numbers-single__value,
.bmb-timeline__when {
	font-variant-numeric: tabular-nums;
}

/* ---- 場面チップは索引のフィルタチップ寄りに（サンプルの .chip の基調） ---- */
.bmb-chip {
	background: var(--surface);
	border-color: var(--portal-line2);
	color: var(--ink-soft);
}

/* ---- 写真の壁：キャプションは小さく淡く（サンプルの写真索引の基調） ---- */
.bmb-photo-wall__item figcaption {
	font-size: 0.78rem;
	color: var(--ink-soft);
	line-height: 1.6;
}

/* ---- 人物索引：フロントページの追加セクション（子テーマ front-page.php） ----
   カード本体は親の .bmb-card を流用し、ここでは名鑑らしい読み替えだけを行う。
   人物カードは見出し語の並びとして読ませたいので、広い画面でも2列に留める
   （親の .bmb-card-grid は 860px 以上で3列になる）。4人なら2×2の整った並び。 */
@media (min-width: 860px) {
	.bmb-person-index__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 題字の頭に朱赤の印（四角）を置き、見出し語カードの目印にする */
.bmb-person-index__card .bmb-card__title::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.45em;
	background: var(--gold);
}

/* ---- 第一画面の顔（1.1.2） ----
   人物索引をフロントの先頭に移したことに合わせた3点：
   (1) 索引はページの開幕なので、セクション間の間合い（56px）は
       取らず、本文の天からすぐ始める。
   (2) ヒーローは「筆頭の新しい姿」の特集帯にする（下記）。
   (3) ヘッダーのナビは、索引のタブの形にする（下記）。 */

/* (1) 人物索引の間合い */
.bmb-person-index {
	margin-top: 4px;
}

/* (3) ナビ＝索引タブ（1.1.2 で導入、1.1.3 で実物化）：
   タブの下辺を無くし、ヘッダー下の太罫（実線2px）に「貼り付いた」
   索引タブにする。ヘッダー内側は下端揃えにして、タブの足元が罫に
   接地するようにする。対象は header.php で付けた .bmb-nav--tabs と、
   モバイルの「トップ」導線（.bmb-nav-home、このサイトの形として残す）。
   現在地は見出しタグと同じ朱赤で塗り、開いているタブとして読ませる。
   ダークモードでは朱赤が明るくなるため、文字は墨色にして対比を保つ
   （フレッシュバーのタグと同じ判断）。 */
.bmb-site-header__inner {
	align-items: flex-end;
	padding-bottom: 0;
}

.bmb-site-header__brand {
	padding-bottom: 10px;
}

.bmb-nav--tabs {
	gap: 4px;
}

.bmb-nav--tabs a,
.bmb-nav-home {
	border: 1px solid var(--portal-line2);
	border-bottom: 0;
	border-radius: 3px 3px 0 0;
	background: var(--surface-2);
}

.bmb-nav--tabs a:hover,
.bmb-nav-home:hover {
	background: var(--portal-blue-soft);
}

.bmb-nav--tabs .current-menu-item > a,
.bmb-nav--tabs .current_page_item > a {
	background: var(--gold);
	border-color: var(--gold);
	color: #fff;
}

@media (prefers-color-scheme: dark) {
	.bmb-nav--tabs .current-menu-item > a,
	.bmb-nav--tabs .current_page_item > a {
		color: #16171b;
	}
}

/* モバイル（≤768px）でもタブの足元を罫に接地させる：
   親はナビ帯を中央揃えにするため、下端揃えに読み替える。
   ブランド帯が消える分、帯の高さはタブの高さで決まる。 */
@media (max-width: 768px) {
	.bmb-site-header__nav {
		align-items: flex-end;
	}

	.bmb-nav-home {
		border: 1px solid var(--portal-line2);
		border-bottom: 0;
		border-radius: 3px 3px 0 0;
		background: var(--surface-2);
	}
}

/* (2) 特集帯「筆頭の新しい姿」（front-page.php 上書きの専用部品）：
   帯は紙面の上に置く1枚の台帳カードとして、強い罫の枠＋面で作る。
   中の並びは、写真が左に約4割（2fr）・本文が右（3fr）。
   写真の割り当てはグリッドの行・列の指定で担うため、本文側の要素は
   DOM の順序のまま右列に流れる。写真が無い記事では
   .bmb-feature__main--no-media が付き、本文が全幅になる。
   1.1.4 で帯は「写真＋タイトル＋リード＋人物ページへのリンク」だけに
   絞った（プロフィールminiと会長の言葉pickupは帯に出さない）。 */
.bmb-feature {
	margin-top: 44px;
}

.bmb-feature__wrap {
	grid-template-columns: minmax(0, 1fr);
}

.bmb-feature__main {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 4px 26px;
	background: var(--surface);
	border: 1px solid var(--portal-line2);
	padding: 22px;
}

.bmb-feature__main > :not(.bmb-feature__media) {
	grid-column: 2;
}

.bmb-feature__media {
	grid-column: 1;
	grid-row: 1 / span 6;
	align-self: stretch;
	margin: 0;
	display: flex;
	flex-direction: column;
}

/* 写真の下にキャプションが付く場合も帯の高さに収める：
   リンク側を伸縮させ、画像はその中でトリミングする */
.bmb-feature__media a {
	display: block;
	flex: 1 1 auto;
	min-height: 0;
}

.bmb-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bmb-feature__main--no-media {
	grid-template-columns: minmax(0, 1fr);
}

.bmb-feature__main--no-media > :not(.bmb-feature__media) {
	grid-column: 1;
}

/* 帯の中では見出しを一段落として、特集の題字として読ませる */
.bmb-feature__main .bmb-hero__title {
	font-size: 1.625rem;
}

/* 帯の締め：会長の人物ページへの参照リンク（辞典の参照リンクの青で引く） */
.bmb-feature__person-link {
	margin: 10px 0 0;
	font-weight: 700;
}

.bmb-feature__person-link a {
	color: var(--portal-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 860px) {
	.bmb-feature__main {
		grid-template-columns: minmax(0, 1fr);
		padding: 18px;
	}

	.bmb-feature__main > :not(.bmb-feature__media) {
		grid-column: 1;
	}

	.bmb-feature__media {
		grid-column: 1;
		grid-row: auto;
	}

	.bmb-feature__media img {
		height: auto;
	}
}

/* ---- 共通部品の作り分け（1.1.3） ----
   header.php／single.php／guide-cards.php の上書きに合わせた専用部品。 */

/* フレッシュバー＝名鑑の扉：帯は親のまま（バッジ＋説明文＋日付）で、
   余白を細くし、索引の扉として締める。 */
.bmb-freshbar--door .bmb-freshbar__inner {
	padding-top: 6px;
	padding-bottom: 6px;
}

.bmb-freshbar--door .bmb-freshbar__desc {
	font-size: 0.8125rem;
}

/* 「新しい姿」帯（single.php 上書きの専用部品）：
   淡地の帯に朱赤のラベルと日付を並べ、右端に人物ページへのリンクを置く。
   左の朱赤の縦罫で「記録の帯」として締める。 */
.bmb-record-band {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	background: var(--surface-2);
	border: 1px solid var(--portal-line2);
	border-left: 4px solid var(--gold);
	padding: 10px 14px;
	margin-bottom: 22px;
	font-size: 0.8125rem;
	color: var(--ink-soft);
}

.bmb-record-band__label {
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	color: var(--gold-ink);
}

.bmb-record-band__date {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bmb-record-band__person {
	margin-left: auto;
	font-weight: 700;
	white-space: nowrap;
}

/* 案内一覧（template-parts/guide-cards.php 上書きの専用部品）：
   カードをやめ、「名鑑と記録」と同じ語彙の一覧にする。全体を墨の
   2px罫で締め、項目同士は細罫で区切る。見出しには朱赤の四角印
   （人物カードの題字と同じ印）を付ける。 */
.bmb-guide--index {
	border-top: 2px solid var(--ink);
}

.bmb-guide-index {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bmb-guide-index__item {
	padding: 14px 2px 16px;
}

.bmb-guide-index__item + .bmb-guide-index__item {
	border-top: 1px solid var(--portal-line2);
}

.bmb-guide-index__head {
	font-family: var(--font-serif);
	font-weight: 900;
	font-size: 1rem;
}

.bmb-guide-index__head::before {
	content: "";
	display: inline-block;
	width: 0.5em;
	height: 0.5em;
	margin-right: 0.45em;
	background: var(--gold);
}

.bmb-guide-index__head a {
	color: var(--ink);
	text-decoration: none;
}

.bmb-guide-index__head a:hover {
	text-decoration: underline;
}

.bmb-guide-index__cta {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 0.8125rem;
	color: var(--portal-blue);
	margin-left: 0.6em;
	white-space: nowrap;
}

.bmb-guide-index__cta::before {
	content: "／";
	margin-right: 0.6em;
	color: var(--ink-faint);
	font-weight: 400;
}

.bmb-guide-index__text {
	margin: 5px 0 0;
	font-size: 0.875rem;
	line-height: 1.8;
	color: var(--ink-soft);
}

.bmb-guide-index__text a {
	font-weight: 700;
}

/* カード写真に重なるキャプションは、焼き込み文字のあるサムネイルと
   衝突して読めなくなるため、カード上では隠す（キャプション自体は
   記事ページの写真下と構造化データに残る） */
.bmb-card__caption {
	display: none;
}

/* ---- 記事カード：索引行バリアント（1.1.10） ----
   名鑑の索引として、写真を左に小さく置いた横並びの行にする。
   箱の面は残しつつ、縦積みのカード列とは違う「引く」形に。 */
.bmb-card--index {
	flex-direction: row;
	border-radius: 4px;
}

.bmb-card--index .bmb-card__media {
	flex: 0 0 40%;
	align-self: flex-start;
	margin: 12px 0 12px 12px;
}

.bmb-card--index .bmb-card__img {
	aspect-ratio: 4 / 3;
	border-radius: 3px;
}

.bmb-card--index .bmb-card__caption {
	display: none;
}

.bmb-card--index .bmb-card__body {
	padding: 12px 14px;
	gap: 6px;
}

.bmb-card--index .bmb-card__title {
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1.5;
}

.bmb-card--index .bmb-card__excerpt {
	-webkit-line-clamp: 2;
	font-size: 0.84rem;
}

.bmb-card--index .bmb-card__more {
	font-size: 0.84rem;
}