/*
 * Harashina Standard — Information（正式実装）
 *
 * 承認済みプロトタイプの方向をそのまま正式移植したもの。
 * 大きな「INFORMATION」見出し（日本語の補助見出し・説明文は追加しない）＋
 * 「日付｜タイトル→」だけのシンプルなeditorial list。カード・角丸・
 * box-shadow・背景色付きボックス・カテゴリpillは一切使わない
 * （Business/SHOPと同じ「同格の項目を罫線とタイポグラフィだけで
 * 連続させる」方針を踏襲）。
 *
 * 投稿データはfront-page.php側のWP_Queryで取得し、このファイルは
 * 見た目のみを担当する。
 *
 * 色・フォントはtokens.css（--bg-alt/--text/--text-muted/--accent/
 * --border-color/--font-serif/--font-mono/--ease-in）を、余白の単位は
 * Business/SHOPで既に使っているclamp()の書式を踏襲する。
 */

.information{
	/* ---- 背景交互配色＋vertical rhythm構造（比較試作・再修正） ----
	   Information自身の色（--bg-dark。定義はbusiness.css内.page-id-833
	   参照）は変更していない。SHOP→Informationの遷移は、下の
	   .information::beforeという独立した疑似要素（--transition-inの
	   高さぶんのgradient専用。長さは従来のclamp(3rem,6vw,6rem)から
	   変更していない）が担当する。

	   コンテンツ自身の上下solid余白は、新設した.information__inner
	   （front-page.php側に追加した最小限のwrapper。.information__head・
	   .information__list・.information__footを1つに包むだけで、既存の
	   見た目・レイアウトは変更していない）のpadding-top/padding-bottom
	   に分離した（同値、以前のpadding-bottom値を両方に適用したため、
	   SHOP→Informationの実距離は今回のpadding-top=padding-bottom統一
	   ルールの結果として変化する）。

	   Information→CTAの遷移はCTA側の::beforeが担当するため、
	   Information自身にはgradientを持たせていない。
	   見出し・リスト・内部spacingは変更していない。 */
	--pad-h: clamp(1.2rem, 4vw, 3rem);
	--transition-in: clamp(3rem, 6vw, 6rem);
	background: var(--bg-dark);
	padding: 0 var(--pad-h);
}
.information::before{
	content: "";
	display: block;
	height: var(--transition-in);
	margin: 0 calc(-1 * var(--pad-h));
	background: linear-gradient(to bottom, var(--bg) 0%, var(--bg-dark) 100%);
}
.information__inner{
	--own-pad: clamp(3rem, 7vw, 5rem);
	padding-top: var(--own-pad);
	padding-bottom: var(--own-pad);
}

.information__head{
	max-width: 1180px; margin: 0 auto 2.5rem;
}

/* ---- 大きな「INFORMATION」見出し ----
   Business/SHOPの「小さいeyebrow＋日本語title」の2階建てとは異なり、
   今回は承認済み仕様通り「INFORMATION」という1つの見出しだけで構成する。
   font-serifで他セクションの見出しと書体を統一しつつ、eyebrowより
   明確に大きく・letter-spacingを付けて「大きな見出し」として単独で
   成立するようにしている。 */
.information__heading{
	font-family: var(--font-serif); font-weight: 700;
	font-size: clamp(1.9rem, 1.5rem + 2vw, 3rem);
	letter-spacing: 0.02em;
	margin: 0; line-height: 1.2; color: var(--text);
}

.information__list{
	list-style: none; margin: 0; padding: 0;
	max-width: 1180px; margin-left: auto; margin-right: auto;
}

.information__link{
	position: relative;
	display: flex;
	align-items: baseline;
	gap: clamp(1rem, 3vw, 2.5rem);
	padding: 1.1rem 0;
	border-top: 1px solid var(--border-color);
	text-decoration: none; color: inherit;
}
.information__list li:last-child .information__link{ border-bottom: 1px solid var(--border-color); }

.information__date{
	font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted);
	white-space: nowrap;
	flex: 0 0 auto;
}
/* ---- タイトル＋矢印のひとまとまり ----
   PC/モバイル共通で「タイトル →」という関係を1つの塊として保つための
   ラッパー。日付とは別の要素にしておくことで、モバイルで
   `.information__link`をcolumn化した際に「日付」「タイトル →」の
   2行構成へ自然に分かれる（.information__name/.information__arrowを
   個別にcolumn化すると3行に割れてしまうため）。 */
.information__title-row{
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex: 1 1 auto;
	min-width: 0;
}
.information__name{
	font-family: var(--font-serif); font-weight: 700;
	font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
	color: var(--text);
}
.information__arrow{
	font-family: var(--font-mono); font-size: 1rem; color: var(--text-muted);
	flex: 0 0 auto;
	transform: translateX(-6px); opacity: 0.55;
	transition: transform 0.35s var(--ease-in), opacity 0.35s var(--ease-in), color 0.35s var(--ease-in);
}
.information__link:hover .information__arrow,
.information__link:focus-visible .information__arrow{
	transform: translateX(0); opacity: 1; color: var(--accent);
}
/* タイトル自体にも、矢印移動と同じ穏やかさでごく控えめな色変化を付ける
   （下線・拡大・背景変化のような派手な演出は使わない）。 */
.information__link:hover .information__name,
.information__link:focus-visible .information__name{
	color: var(--accent);
}

.information__foot{
	max-width: 1180px; margin: 2rem auto 0;
	display: flex; justify-content: flex-end;
}
.information__all-link{
	font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em;
	color: var(--text-muted); text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.3s var(--ease-in), border-color 0.3s var(--ease-in);
}
.information__all-link:hover,
.information__all-link:focus-visible{ color: var(--accent); border-color: var(--accent); }

/* ---- モバイル（Business/SHOPと同じ820px境界） ----
   「日付｜タイトル→」の横並びを、幅が足りない390px等では無理に
   1行へ押し込まず、日付を独立した行にして下にタイトル＋矢印を
   自然に続ける。カード化はせず、罫線区切りのシンプルなリスト構造は
   維持する。 */
@media (max-width: 820px){
	.information__link{
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
		padding: 1.1rem 0;
	}
	.information__arrow{
		/* モバイルにhoverは存在しないため、常時見える状態にする
		   （タップ操作でtranslateXのhover演出を出す意味がないため）。 */
		transform: none; opacity: 0.7;
	}
}