/* =========================================================
   Journal / News
   配置: assets/css/al/45-journal.css
   エディトリアル指向。カード風UIにしない（背景色/border/角丸/影なし）。
   Masonry は JS（Masonry.js + imagesLoaded）が座標を管理し、
   CSS は列幅・ガター・タイポのみ担当する。
   すべて lr-journal / lr-news 配下にスコープし、既存に影響を出さない。
   ========================================================= */

/* ------------------------------------------------------------
   ページ上部の導入は共通 intro（parts/sections/intro）を使用。
   Journal / News では K.aL と同じ「白背景・左寄せ・本体幅一致」に差し替える
   （黒幕センターの標準 intro を、このページ限定で上書き）。
   43-kal.css の G セクションと同じ流儀。タイトルは文字（画像は使わない）。
   本体一覧と左端をピクセル一致させるため、__inner を wide 幅・gutter に合わせる。
   ------------------------------------------------------------ */

/* 外側：白背景・黒幕解除・画面比の高さを無効化（高さは中身なり） */
.page-template-page-journal .lr-intro,
.page-template-page-news .lr-intro {
	background: var(--lr-white);
	min-height: 0;
	padding-top: calc(var(--lr-header-h, 64px) + var(--lr-space-lg));
	padding-bottom: var(--lr-space-lg);
}

/* 内側：本体 wide と同じ幅・同じガター・左寄せ（下の一覧と左端を揃える） */
.page-template-page-journal .lr-intro__inner,
.page-template-page-news .lr-intro__inner {
	max-width: calc(var(--lr-width-wide) + var(--lr-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--lr-gutter);
	text-align: left;
}

/* News は本体が contained 幅（page-news.php の data-width="contained"）。
   intro もそれに合わせて、下のニュースリストと左端を揃える。 */
.page-template-page-news .lr-intro__inner {
	max-width: calc(var(--lr-width-contained) + var(--lr-gutter) * 2);
}

/* スマホは本体と同じくガターを詰める（.lr-section__inner の 599px 以下に合わせる） */
@media (max-width: 599px) {
	.page-template-page-journal .lr-intro__inner,
	.page-template-page-news .lr-intro__inner {
		padding-inline: var(--lr-space-md);
	}
}

/* 文字色：黒幕前提の白文字を通常色へ */
.page-template-page-journal .lr-intro__title,
.page-template-page-journal .lr-intro__overview,
.page-template-page-news .lr-intro__title,
.page-template-page-news .lr-intro__overview {
	color: var(--lr-text);
}
.page-template-page-journal .lr-intro__subtitle,
.page-template-page-news .lr-intro__subtitle {
	color: var(--lr-text-muted);
}

/* overview・区切り線も左端へ（中央 auto を解除） */
.page-template-page-journal .lr-intro__overview,
.page-template-page-news .lr-intro__overview {
	margin-inline: 0;
}
.page-template-page-journal .lr-intro__subtitle::after,
.page-template-page-news .lr-intro__subtitle::after {
	margin-inline: 0;
	background: var(--lr-accent);   /* 白地なのでブランド赤の短い罫に */
}

/* ------------------------------------------------------------
   Masonry グリッド
   ベース（スマホ）：1カラム相当。JS 初期化前でも縦積みで破綻しない。
   列幅は __sizer と __item に同じ幅を与え、Masonry の columnWidth に使う。
   ガター（列間・行間）は --lr-journal-gutter を正本とし、
   JS（journal.js）も同じ値をこの変数から読んで gutter に使う（縦横を一致させる）。
   列幅は calc でガター分を引き、「幅×列数 + ガター×(列数-1) = 100%」に収める。
   ------------------------------------------------------------ */
.lr-journal-grid {
	margin: 0;
	/* 記事どうしの間隔（縦横）。Masonry は __gutter-sizer の実幅を読む。 */
	--lr-journal-gutter: var(--lr-space-2xl);
	/* wide 記事の画像↔テキスト間。記事間とは独立させる（記事間を広げても内側は保つ）。 */
	--lr-journal-inner-gap: var(--lr-space-lg);
	position: relative;
}

/* Masonry 用の測定要素（表示しない・レイアウトに場所を取らせない）。
   __sizer=列幅、__gutter-sizer=列間。どちらも itemSelector 外なのでアイテム化しない。 */
.lr-journal-grid__sizer,
.lr-journal-grid__gutter-sizer {
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	pointer-events: none;
}

/* ガター測定要素の幅＝ガター実寸。Masonry がこの offsetWidth を gutter に使う。 */
.lr-journal-grid__gutter-sizer {
	width: var(--lr-journal-gutter);
}

/* 列幅の定義。__sizer と __item は同一幅。
   スマホ=100%（1カラム）、タブレット=2カラム、PC=3カラム。
   各段でガター分を引いて、Masonry の gutter と足して 100% に収める。 */
.lr-journal-grid__sizer,
.lr-journal-item {
	width: 100%;
}

/* Masonry 未初期化時／初期化後とも、行間はこのガターで統一 */
.lr-journal-item {
	margin-bottom: var(--lr-journal-gutter);
}

@media (min-width: 600px) {
	.lr-journal-grid__sizer,
	.lr-journal-item {
		/* 2カラム：(100% - ガター1本) / 2 */
		width: calc((100% - var(--lr-journal-gutter)) / 2);
	}
}
@media (min-width: 900px) {
	.lr-journal-grid__sizer,
	.lr-journal-item {
		/* 3カラム：(100% - ガター2本) / 3 */
		width: calc((100% - var(--lr-journal-gutter) * 2) / 3);
	}
	/* MAKING 記事：2カラム幅（sizer幅×2 ＋ ガター1本）。PC のみ。 */
	.lr-journal-item[data-size="wide"] {
		width: calc((100% - var(--lr-journal-gutter) * 2) / 3 * 2 + var(--lr-journal-gutter));
	}

	/* wide かつアイキャッチ有り：画像左・テキスト右の横並び（1:1）。PC のみ。
	   figure が半分幅になるので、2カラム幅で出ていた画像の巨大化も解消される。 */
	.lr-journal-item[data-size="wide"][data-has-thumb="1"] .lr-journal-item__link {
		display: flex;
		align-items: flex-start;
		gap: var(--lr-journal-inner-gap);
	}
	.lr-journal-item[data-size="wide"][data-has-thumb="1"] .lr-journal-item__figure {
		flex: 1 1 50%;
		min-width: 0;
		margin-bottom: 0;   /* 横並び時は下余白を消す（右の gap で間隔を取る） */
	}
	.lr-journal-item[data-size="wide"][data-has-thumb="1"] .lr-journal-item__body {
		flex: 1 1 50%;
		min-width: 0;
	}

	/* wide（MAKING）はタイトルを大きく（normal は基本サイズ --lr-font-lg のまま） */
	.lr-journal-item[data-size="wide"] .lr-journal-item__title {
		font-size: var(--lr-font-heading);
	}
}

/* ------------------------------------------------------------
   Journal アイテム（カード装飾なし）
   背景色・border・角丸・影を一切持たせない。白背景と余白で見せる。
   ------------------------------------------------------------ */
.lr-journal-item__link {
	display: block;
	color: var(--lr-text);
	text-decoration: none;
}

.lr-journal-item__figure {
	margin: 0 0 var(--lr-space-sm);
}

/* アイキャッチ：元画像の比率をそのまま。トリミングしない。 */
.lr-journal-item__image {
	display: block;
	width: 100%;
	height: auto;
}

.lr-journal-item__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--lr-space-sm);
	margin-bottom: var(--lr-space-2xs);
}
.lr-journal-item__cat {
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-bold);
	letter-spacing: var(--lr-tracking-tight);
	color: var(--lr-accent);   /* #910000 限定使用：カテゴリラベルに絞る */
}
/* 複数カテゴリの区切り。主張しすぎないようミュート。 */
.lr-journal-item__cat-sep {
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-normal);
	color: var(--lr-text-muted);
}
.lr-journal-item__date {
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-normal);
	color: var(--lr-text-muted);
	letter-spacing: 0.02em;
}

.lr-journal-item__title {
	margin: 0;
	font-size: var(--lr-font-lg);
	font-weight: var(--lr-weight-bold);
	line-height: var(--lr-leading-tight);
	letter-spacing: var(--lr-tracking-tight);
	color: var(--lr-text);
}

/* 抜粋（一覧の高さのばらつきを作る。アイキャッチ無し記事はこれが主役になる） */
.lr-journal-item__excerpt {
	margin: var(--lr-space-xs) 0 0;
	font-size: var(--lr-font-base);
	line-height: var(--lr-leading-body);
	color: var(--lr-text-muted);
}

/* スマホは抜粋が長いと1カラムで間延びするので、6行（≒150字相当）で省略。
   PC/タブレットでは制限しない（本文量の差＝Masonry の段差を活かす）。 */
@media (max-width: 599px) {
	.lr-journal-item__excerpt {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 6;
		line-clamp: 6;
		overflow: hidden;
	}
}

/* タイトルサイズは記事幅で決める（画像有無では変えない）。
   normal（1カラム）=基本サイズ、wide（2カラム・MAKING）=大きく。 */

/* ホバーはタイトルの色変化のみ（装飾を足さない） */
.lr-journal-item__link:hover .lr-journal-item__title {
	color: var(--lr-accent);
}

/* ------------------------------------------------------------
   ページャ（Journal / News 共通）
   ------------------------------------------------------------ */
.lr-journal-pager {
	margin-top: var(--lr-space-xl);
}
.lr-journal-pager__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lr-space-sm);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
.lr-journal-pager__item .page-numbers {
	display: inline-block;
	padding: var(--lr-space-2xs) var(--lr-space-sm);
	color: var(--lr-text);
	text-decoration: none;
	font-size: var(--lr-font-sm);
}
.lr-journal-pager__item .page-numbers.current {
	color: var(--lr-accent);
	font-weight: var(--lr-weight-bold);
}

/* ------------------------------------------------------------
   空表示
   ------------------------------------------------------------ */
.lr-journal__empty,
.lr-news__empty {
	color: var(--lr-text-muted);
	font-size: var(--lr-font-base);
}

/* ------------------------------------------------------------
   News 一覧（簡素：日付＋カテゴリ＋タイトル）
   罫線1本で区切る程度。カード化しない。
   ------------------------------------------------------------ */
.lr-news-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.lr-news-list__item {
	border-top: 1px solid var(--lr-border);
}
.lr-news-list__item:last-child {
	border-bottom: 1px solid var(--lr-border);
}
.lr-news-list__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--lr-space-2xs) var(--lr-space-md);
	padding-block: var(--lr-space-md);
	color: var(--lr-text);
	text-decoration: none;
}
.lr-news-list__date {
	flex: 0 0 auto;
	font-size: var(--lr-font-sm);
	color: var(--lr-text-muted);
	letter-spacing: 0.02em;
}
.lr-news-list__cats {
	flex: 0 0 auto;
}
.lr-news-list__cat {
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-bold);
	color: var(--lr-accent);
	letter-spacing: var(--lr-tracking-tight);
}
.lr-news-list__cat-sep {
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-normal);
	color: var(--lr-text-muted);
}
.lr-news-list__title {
	flex: 1 1 100%;
	font-size: var(--lr-font-base);
	font-weight: var(--lr-weight-bold);
	line-height: var(--lr-leading-body);
}
.lr-news-list__link:hover .lr-news-list__title {
	color: var(--lr-accent);
}
@media (min-width: 600px) {
	.lr-news-list__title {
		flex: 1 1 auto;
	}
}

/* =============================================================
   個別記事（single.php / lr-article）
   Journal・News 共通の読み物レイアウト。白背景・左寄せ・エディトリアル。
   intro は出さない（本文主体）。News はアイキャッチなし・簡素。
   すべて lr-article 配下にスコープ。
   ============================================================= */

/* 記事上部に少し余白（intro が無いぶんヘッダーとの間を確保） */
.lr-article__head {
	margin-bottom: var(--lr-space-lg);
	padding-top: var(--lr-space-lg);
}

.lr-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--lr-space-2xs) var(--lr-space-sm);
	margin-bottom: var(--lr-space-sm);
}
.lr-article__cat {
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-bold);
	letter-spacing: var(--lr-tracking-tight);
	color: var(--lr-accent);
}
.lr-article__cat-sep {
	font-size: var(--lr-font-sm);
	font-weight: var(--lr-weight-normal);
	color: var(--lr-text-muted);
}
.lr-article__date {
	font-size: var(--lr-font-sm);
	color: var(--lr-text-muted);
	letter-spacing: 0.02em;
}

.lr-article__title {
	margin: 0;
	padding-left: var(--lr-space-sm);            /* 罫とテキストの間隔（16px） */
	border-left: 6px solid var(--lr-accent);     /* 看板の左赤縦罫（lr-heading と同様式） */
	font-size: var(--lr-font-heading);
	font-weight: var(--lr-weight-black);
	line-height: var(--lr-leading-tight);
	letter-spacing: var(--lr-tracking-tight);
	color: var(--lr-text);
}

/* アイキャッチ（Journal のみ）。元比率のまま。 */
.lr-article__figure {
	margin: 0 0 var(--lr-space-lg);
}
.lr-article__image {
	display: block;
	width: 100%;
	height: auto;
}

/* 本文は lr-richtext に委譲（タイポ・見出し・リスト等は richtext 側が持つ）。
   ここでは記事本文としての上下リズムだけ足す。 */
.lr-article__body {
	margin-bottom: var(--lr-space-xl);
}

/* 一覧へ戻る導線 */
.lr-article__foot {
	padding-top: var(--lr-space-lg);
	border-top: 1px solid var(--lr-border);
}
.lr-article__back {
	font-size: var(--lr-font-sm);
	color: var(--lr-text-muted);
	text-decoration: none;
	transition: color var(--lr-ease);
}
.lr-article__back:hover {
	color: var(--lr-accent);
}

/* News 記事はタイトルを一段控えめに（伝達コンテンツ） */
.lr-article[data-root="news"] .lr-article__title {
	font-size: var(--lr-font-lg);
}

/* -------------------------------------------------------------
   Journal / News 記事本文の見出し（記事スコープ限定の上書き）
   看板装飾（左赤縦罫）は記事タイトル(lr-article__title)に移したので、
   本文中の h2 からは縦罫を外し、サイズを落として本文に馴染ませる。
   ※ サイト全体の .lr-richtext h2（作家bio・展示説明等）には触らない。
      詳細度は .lr-article .lr-richtext h2 が .lr-richtext h2 に勝つ。
   ------------------------------------------------------------- */
.lr-article .lr-richtext h2 {
	padding-left: 0;
	border-left: 0;                  /* 看板の縦罫を外す */
	font-size: var(--lr-font-lg);    /* heading(24→32) から lg(20px) へ縮小し本文に馴染ませる */
	margin: 2em 0 1em;               /* 上に余白を置いて区切りを作る */
}
.lr-article .lr-richtext h3 {
	font-size: var(--lr-font-md);    /* h3 も一段落として階層を保つ（18px） */
}