/*
 * Harashina Standard — 「お知らせ」一覧（category-news.php専用）
 *
 * トップページInformationセクション（assets/css/information.css、
 * freeze済み・今回未変更）と同じデザイン言語（typography・spacing感・
 * 細いrule・控えめなarrow hover）を踏襲した、独立したCSSファイル。
 * information.cssの値・selectorは一切参照・変更していない
 * （このファイルだけで完結する）。
 *
 * トップページのBusiness→SHOP→Information→CTA→Footerのような
 * セクション間背景色transition構造は、このアーカイブページには
 * 適用しない（単一セクションの通常ページのため）。背景色は
 * tokens.cssの--bgをそのまま使う。
 *
 * 色・フォントはtokens.css（--bg/--text/--text-muted/--accent/
 * --border-color/--font-serif/--font-mono/--ease-in）を参照する。
 * 新しいデザイントークンは追加していない。
 */

.info-archive{
	background: var(--bg);
	padding: clamp(3rem, 7vw, 6rem) clamp(1.2rem, 4vw, 3rem) clamp(4rem, 9vw, 7rem);
}

.info-archive__inner{
	max-width: 1180px;
	margin: 0 auto;
}

.info-archive__head{
	margin: 0 0 2.5rem;
}

.info-archive__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);
}

.info-archive__list{
	list-style: none; margin: 0; padding: 0;
}

.info-archive__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;
}
.info-archive__list li:last-child .info-archive__link{ border-bottom: 1px solid var(--border-color); }

.info-archive__date{
	font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-muted);
	white-space: nowrap;
	flex: 0 0 auto;
}

.info-archive__title-row{
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	flex: 1 1 auto;
	min-width: 0;
}
.info-archive__name{
	font-family: var(--font-serif); font-weight: 700;
	font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem);
	color: var(--text);
}
.info-archive__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);
}
.info-archive__link:hover .info-archive__arrow,
.info-archive__link:focus-visible .info-archive__arrow{
	transform: translateX(0); opacity: 1; color: var(--accent);
}
.info-archive__link:hover .info-archive__name,
.info-archive__link:focus-visible .info-archive__name{
	color: var(--accent);
}

.info-archive__empty{
	font-size: 0.95rem; color: var(--text-muted);
	padding: 1.5rem 0;
	border-top: 1px solid var(--border-color);
	margin: 0;
}

/* ---- pagination ----
   the_posts_pagination()が出力する.info-archive__pagination（nav要素）を
   タイポグラフィ中心で控えめに。ボタンUI・背景色ボックスは使わない。 */
.info-archive__pagination{
	margin: 3rem 0 0;
	display: flex; justify-content: center; align-items: center;
	gap: 0.5rem 1rem;
	flex-wrap: wrap;
}
.info-archive__pagination .page-numbers{
	font-family: var(--font-mono); font-size: 0.85rem; letter-spacing: 0.02em;
	color: var(--text-muted); text-decoration: none;
	padding: 0.4rem 0.6rem;
	border-bottom: 1px solid transparent;
	transition: color 0.3s var(--ease-in), border-color 0.3s var(--ease-in);
}
.info-archive__pagination a.page-numbers:hover,
.info-archive__pagination a.page-numbers:focus-visible{
	color: var(--accent); border-color: var(--accent);
}
.info-archive__pagination .page-numbers.current{
	color: var(--text); border-bottom: 1px solid var(--text);
}
.info-archive__pagination .page-numbers.dots{
	color: var(--text-muted);
}

/* ---- モバイル（トップページInformationと同じ820px境界） ----
   「日付｜タイトル→」の横並びを、幅が足りない390px等では無理に
   1行へ押し込まず、日付を独立した行にして下にタイトル＋矢印を
   自然に続ける。 */
@media (max-width: 820px){
	.info-archive__link{
		flex-direction: column;
		align-items: flex-start;
		gap: 0.4rem;
		padding: 1.1rem 0;
	}
	.info-archive__arrow{
		/* モバイルにhoverは存在しないため、常時見える状態にする。 */
		transform: none; opacity: 0.7;
	}
}