@layer components {
	/*
	 * ニュース共有スタイル。
	 *
	 * 1件の行（.news-item）は共有ヘルパ nexray_render_news_item() が出力し、
	 * /news/ 一覧（templates/home.html の nexray/news-item ブロック）とトップの
	 * nexray/news-list ブロックの両方で使う。行スタイルをブロック個別CSS（そのブロックが
	 * 在るページだけ条件ロード）に置くと、news-list だけのトップページで news-item ブロックが
	 * 未レンダー＝CSS 未ロードになり行が崩れる。共有マークアップの CSS は必ず本コンポーネント
	 * （全ページ enqueue）に置く（#158 追修正）。
	 *
	 * トークンは移植元 --slate-* / --blue-* をテーマの --wp--preset--* / --nexray-* にマップ。
	 * モバイルファースト（ADR 0009）。
	 */

	/* ---- 1件の行（単一アンカー・共有） ---- */
	.news-item {
		position: relative;
		display: flex;
		gap: var(--wp--preset--spacing--30);
		align-items: center;
		padding-block: var(--wp--preset--spacing--30);
		border-bottom: 1px solid var(--wp--preset--color--slate-300);
		color: inherit;
		text-decoration: none;
	}

	/* hover 下線ワイプ（装飾） */
	.news-item::after {
		content: "";
		position: absolute;
		bottom: -1px;
		left: 0;
		width: 0;
		height: 1px;
		background: var(--nexray-arrow);
		transition: width 0.4s ease;
	}

	.news-item:hover::after,
	.news-item:focus-visible::after {
		width: 100%;
	}

	.news-item__body {
		flex: 1 0 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: var(--wp--preset--spacing--20);
	}

	.news-item__meta {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		flex-shrink: 0;
	}

	.news-item__date {
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		line-height: 1;
		color: var(--wp--preset--color--slate-500);
		white-space: nowrap;
	}

	.news-item__title {
		font-size: var(--wp--preset--font-size--body);
		font-weight: 600;
		line-height: 1.6;
		color: var(--wp--preset--color--primary);
		transition: color var(--nexray-transition);
	}

	.news-item:hover .news-item__title,
	.news-item:focus-visible .news-item__title {
		color: var(--wp--preset--color--contrast);
	}

	.news-item__link {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--30);
		flex-shrink: 0;
		color: var(--nexray-arrow);
		transition: transform var(--nexray-transition);
	}

	.news-item:hover .news-item__link {
		transform: translateX(4px);
	}

	.news-item__link-label {
		font-size: 0.875rem;
		white-space: nowrap;
	}

	.news-item__arrow {
		display: block;
		width: 29px;
		height: 10px;
	}

	/* ニュース個別（singular）の投稿日。一覧の日付と同じ控えめ色・タイトルの上に少し間隔。 */
	.news-single__date {
		margin-block-end: var(--wp--preset--spacing--20);
		font-weight: 600;
		color: var(--wp--preset--color--slate-500);
	}

	/* /news/ 一覧の白シート（nexray-sheet）は紺地ページ上に浮かせる＝上下に紺の余白。
	   スコープは .news-archive 配下のみ＝共有 .nexray-sheet の他用途に影響しない。 */
	.news-archive .nexray-sheet {
		margin-block: clamp(2rem, 5vw, 4rem);
	}

	/* ---- /news/ 一覧（templates/home.html）のリストコンテナ ---- */
	.news-list .news-items {
		list-style: none;
		margin: 0;
		padding: 0;
		gap: 0; /* 行間は news-item の padding-block ＋ border-bottom が担うため詰める。 */
	}

	.news-list .news-items > li {
		margin: 0;
	}

	/* 各行は border-bottom。先頭行だけ上罫を足してリストの枠を閉じる。 */
	.news-list .news-items > li:first-child .news-item {
		border-top: 1px solid var(--wp--preset--color--slate-300);
	}

	/* 該当なし文言は控えめに中央。 */
	.news-list .wp-block-query-no-results {
		padding-block: var(--wp--preset--spacing--50);
		color: var(--wp--preset--color--slate-500);
	}
}