/**
 * css/pages/top-news.css
 * ============================================================
 * A LEGEND 2：TOP News
 * ============================================================
 *
 * 役割：
 * - template-parts/top/news.php のTOPニュースセクションを装飾します。
 * - top.news.layout の選択肢ごとに、HTML構造と見た目を明確に分岐します。
 *
 * 今回の改修：
 * - list / cards / compact / minimal / legacy の5レイアウトを正式対応します。
 * - legacy は旧A LEGEND型として、PCでは最新5件カード + 後続リスト、
 *   SPでは最新4件カード + 5件目以降リストをCSSで保証します。
 * - 色・角丸・影・フォントは旧テーマ固定値を持ち込まず、A LEGEND 2のCSS変数へ接続します。
 * - JSでDOMを移動しなくてもレイアウトが成立するよう、SP専用行はdisplayで切り替えます。
 * - コンテンツ本体はA LEGEND 2の既存コンテナトークンへ接続し、
 *   レイアウトごとに標準幅 / 広め幅を明確に切り替えます。
 * - セクション全面の背景は全レイアウト共通で扱い、NEWS専用背景が
 *   設定された場合のみ --aleg2-top-bg を使います。未設定時は transparent にし、
 *   TOP全体の背景演出へ自然に馴染ませます。
 * - legacy など特定レイアウトだけの全面背景・薄い膜・wave背景上書きは持たせず、
 *   layout差分はカード構造・余白・見出し配置だけで表現します。
 * - surface はカード・パネルなどの「面」だけで使います。
 */

/* ------------------------------------------------------------
 * Section root
 * ------------------------------------------------------------ */
.aleg2-top-news {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	/*
	 * TOP News のセクション背景は全レイアウト共通の責務です。
	 *
	 * 優先順位：
	 * 1. --aleg2-top-bg
	 *    inc/top/helpers.php がセクション設定 color.background / background から出力します。
	 * 2. transparent
	 *    NEWS専用背景が未設定の場合は、.aleg2-main--top が持つTOP全体の
	 *    背景グロー・グリッド・粒状感をそのまま見せます。
	 *
	 * 重要：
	 * - layoutごとにセクション全面背景を持たせません。
	 * - A LEGEND（旧）も背景は共通責務に従い、固有差分は配置・カード構造だけに限定します。
	 * - --aleg2-color-surface はカード・パネル用の「面」トークンです。
	 */
	background: var(--aleg2-top-bg, transparent);
}

.aleg2-top-news__wave {
	position: absolute;
	inset: auto -8vw 0;
	/*
	 * rootに背景を持たせても波装飾が背景の裏へ沈まないよう、
	 * セクション内の装飾レイヤーとして z-index: 0 に置きます。
	 * 本文は .aleg2-top-news__inner の z-index: 1 で常に前面に出します。
	 */
	z-index: 0;
	height: clamp(90px, 12vw, 180px);
	pointer-events: none;
	background:
		radial-gradient(circle at 16% 100%, var(--aleg2-glow-primary), transparent 42%),
		linear-gradient(135deg, transparent 0 32%, var(--aleg2-glass-bg-strong) 32% 56%, transparent 56% 100%);
	clip-path: polygon(0 42%, 8% 35%, 18% 48%, 30% 32%, 42% 46%, 54% 28%, 68% 44%, 82% 30%, 100% 40%, 100% 100%, 0 100%);
	opacity: 0.55;
}

body:not(.aleg2-bg-glow) .aleg2-top-news__wave {
	opacity: 0.32;
}

.aleg2-top-news__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: clamp(28px, 5vw, 72px);
	/*
	 * TOP News のinnerは、他のTOPセクションと同じく
	 * 「セクション見出し + 本文」を縦に積む外枠だけを担当します。
	 *
	 * 重要：
	 * - 見出し専用ラッパーやlayout別の2カラム化をinnerに持たせると、
	 *   section-headingの左基準やスマホ時CTA幅がNEWSだけズレます。
	 * - list / cards / compact / minimal / legacy の差分は、
	 *   .aleg2-top-news__body 配下のリスト・カード構造だけで表現します。
	 * - 幅は共通inner幅の責務に寄せ、ここではfallback付きで同じ値を明示します。
	 */
	width: min(
		100% - (var(--aleg2-container-padding, 24px) * 2),
		var(--aleg2-container-lg, 1280px)
	);
	margin-inline: auto;
}

.aleg2-top-news__body {
	min-width: 0;
}

/*
 * layoutごとの横幅変更は行いません。
 * 見出し・CTA・本文の基準幅を他TOPセクションと揃えるため、
 * inner幅は全NEWSレイアウトで共通にします。
 */

/* ------------------------------------------------------------
 * Common item foundation
 * ------------------------------------------------------------ */
.aleg2-top-news__item {
	position: relative;
	overflow: hidden;
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
	box-shadow: var(--aleg2-shadow-soft);
	backdrop-filter: var(--aleg2-backdrop-glass);
	transition:
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		background var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-top-news__item::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	content: "";
	background:
		linear-gradient(
			120deg,
			var(--aleg2-glow-primary),
			transparent 48%
		);
	opacity: 0;
	transition: opacity var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

body:not(.aleg2-bg-glow) .aleg2-top-news__item::before {
	display: none;
}

.aleg2-top-news__item:hover {
	background: var(--aleg2-glass-bg-strong);
	border-color: var(--aleg2-color-border-strong);
	box-shadow: var(--aleg2-shadow-card);
	transform: translate3d(0, -4px, 0);
}

.aleg2-top-news__item:hover::before {
	opacity: 1;
}

.aleg2-top-news__card-link,
.aleg2-top-news__row-link {
	position: relative;
	z-index: 1;
	display: block;
	min-height: 100%;
	color: var(--aleg2-color-text, var(--aleg2-top-news-legacy-card-text));
	text-decoration: none;
}

.aleg2-top-news__card-link:hover,
.aleg2-top-news__row-link:hover {
	color: var(--aleg2-color-text, var(--aleg2-top-news-legacy-card-text));
	text-decoration: none;
}

.aleg2-top-news__card-link:focus-visible,
.aleg2-top-news__row-link:focus-visible,
.aleg2-top-news__term:focus-visible {
	outline: 2px solid var(--aleg2-color-link-hover, var(--aleg2-color-primary, currentColor));
	outline-offset: 4px;
	box-shadow: var(--aleg2-focus-ring, 0 0 0 4px color-mix(in srgb, var(--aleg2-color-link-hover, var(--aleg2-color-primary, currentColor)) 24%, transparent));
}

.aleg2-top-news__media {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	margin: 0;
	background:
		linear-gradient(135deg, var(--aleg2-glass-bg-strong), transparent),
		var(--aleg2-color-surface);
}

.aleg2-top-news__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--aleg2-duration-slow) var(--aleg2-ease-standard);
}

.aleg2-top-news__item:hover .aleg2-top-news__image {
	transform: scale(1.055);
}

.aleg2-top-news__media--empty {
	display: grid;
	place-items: center;
	color: var(--aleg2-top-news-legacy-card-muted);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	letter-spacing: var(--aleg2-letter-spacing-wide);
}

.aleg2-top-news__card-body,
.aleg2-top-news__row-body {
	min-width: 0;
}

.aleg2-top-news__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	align-items: center;
	min-height: 1em;
	margin-bottom: var(--aleg2-space-2);
}

.aleg2-top-news__date {
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin);
	font-size: var(--aleg2-font-size-xs);
	font-weight: 900;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-transform: uppercase;
}

.aleg2-top-news__term {
	display: inline-flex;
	align-items: center;
	max-width: 100%;
	padding: 0.28em 0.72em;
	color: var(--aleg2-color-primary);
	font-family: var(--aleg2-font-latin);
	font-size: calc(var(--aleg2-font-size-xs) * 0.92);
	font-weight: 800;
	line-height: 1;
	letter-spacing: var(--aleg2-letter-spacing-wide);
	text-decoration: none;
	text-transform: uppercase;
	background: var(--aleg2-glass-bg-strong);
	border: 1px solid var(--aleg2-color-border);
	border-radius: 999px;
}

.aleg2-top-news__term:hover {
	color: var(--aleg2-color-link-hover);
	text-decoration: none;
	border-color: var(--aleg2-color-border-strong);
}

.aleg2-top-news__title {
	margin: 0;
	color: var(--aleg2-color-heading);
	font-family: var(--aleg2-font-heading);
	font-size: var(--aleg2-font-size-lg);
	font-weight: 800;
	line-height: 1.38;
	letter-spacing: -0.02em;
	transition: color var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-top-news__item:hover .aleg2-top-news__title {
	color: var(--aleg2-color-link-hover);
}

.aleg2-top-news__excerpt {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: var(--aleg2-space-2) 0 0;
	color: var(--aleg2-color-text-muted);
	font-size: var(--aleg2-font-size-sm);
	line-height: 1.75;
}

.aleg2-top-news--no-date .aleg2-top-news__date {
	display: none;
}

/* ------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------ */
.aleg2-top-news__empty {
	padding: var(--aleg2-space-6);
	margin: 0;
	color: var(--aleg2-color-text-muted);
	line-height: var(--aleg2-line-height-body);
	background: var(--aleg2-glass-bg);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-card);
	box-shadow: var(--aleg2-shadow-soft);
	backdrop-filter: var(--aleg2-backdrop-glass);
}

/* ------------------------------------------------------------
 * Layout: list
 * ------------------------------------------------------------ */
/*
 * listレイアウトでもinnerは2カラム化しません。
 * 見出しとCTAを他セクションと同じ縦積みに保ち、
 * 一覧の密度差分は .aleg2-top-news__list 側だけで扱います。
 */
.aleg2-top-news__list {
	display: grid;
	gap: var(--aleg2-space-3);

	/*
	 * list / compact / minimal系カードのhover安全域。
	 * セクションrootのoverflow:hiddenは背景演出を閉じるため維持し、
	 * カードが動くための逃げ代は一覧コンテナ側で確保します。
	 */
	--aleg2-top-news-interaction-safe-space: var(--aleg2-card-interaction-safe-space, 7px);
	padding-block: var(--aleg2-top-news-interaction-safe-space);
	margin-block: calc(var(--aleg2-top-news-interaction-safe-space) * -1);
}

.aleg2-top-news__row-link {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: var(--aleg2-space-5);
	align-items: center;
	min-height: 84px;
	padding: var(--aleg2-space-5);
}

.aleg2-top-news__row-link > .aleg2-top-news__date {
	align-self: start;
	padding-top: 0.18em;
}

.aleg2-top-news--layout-list .aleg2-top-news__item:hover,
.aleg2-top-news--layout-compact .aleg2-top-news__item:hover {
	transform: translate3d(6px, 0, 0);
}

.aleg2-top-news--no-date .aleg2-top-news__row-link {
	grid-template-columns: 1fr;
}

/* ------------------------------------------------------------
 * Layout: cards
 * ------------------------------------------------------------ */
.aleg2-top-news__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(18px, 2.6vw, 32px);

	/*
	 * card layout用のhover安全域。
	 * .aleg2-top-news__item 自体は画像・hover幕を閉じ込めるためoverflow:hiddenを維持し、
	 * 上下に動く分はgrid側で受けます。
	 */
	--aleg2-top-news-interaction-safe-space: var(--aleg2-card-interaction-safe-space, 7px);
	padding-block: var(--aleg2-top-news-interaction-safe-space);
	margin-block: calc(var(--aleg2-top-news-interaction-safe-space) * -1);
}

.aleg2-top-news__card-link {
	display: flex;
	flex-direction: column;
}

.aleg2-top-news__card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--aleg2-space-5);
}

.aleg2-top-news__card .aleg2-top-news__title {
	font-size: clamp(1rem, 1.35vw, 1.24rem);
}

/* ------------------------------------------------------------
 * Layout: compact
 * ------------------------------------------------------------ */
/*
 * compactレイアウトの差分も本文側へ閉じます。
 * innerの横並び化は、見出し位置とCTA幅のズレにつながるため行いません。
 */
.aleg2-top-news--layout-compact .aleg2-top-news__list {
	gap: var(--aleg2-space-2);
}

.aleg2-top-news--layout-compact .aleg2-top-news__row-link {
	grid-template-columns: 112px minmax(0, 1fr);
	min-height: 64px;
	padding: var(--aleg2-space-4);
}

.aleg2-top-news--layout-compact .aleg2-top-news__title {
	font-size: var(--aleg2-font-size-md);
}

.aleg2-top-news--layout-compact .aleg2-top-news__excerpt {
	-webkit-line-clamp: 1;
	font-size: var(--aleg2-font-size-xs);
}

/* ------------------------------------------------------------
 * Layout: minimal
 * ------------------------------------------------------------ */
/*
 * minimal はテキスト主体ですが、innerを狭めると見出し・CTAまで
 * 他セクションと違う幅になります。読みやすさのための幅制御は本文側だけに限定します。
 */
.aleg2-top-news--layout-minimal .aleg2-top-news__body {
	max-width: min(100%, 980px);
}

.aleg2-top-news--layout-minimal .aleg2-top-news__item {
	background: transparent;
	border-color: color-mix(in srgb, var(--aleg2-color-border) 72%, transparent);
	border-right: 0;
	border-left: 0;
	border-radius: 0;
	box-shadow: none;
	backdrop-filter: none;
}

.aleg2-top-news--layout-minimal .aleg2-top-news__item::before {
	background: linear-gradient(90deg, var(--aleg2-glow-primary), transparent 28%);
}

.aleg2-top-news--layout-minimal .aleg2-top-news__row-link {
	grid-template-columns: 120px minmax(0, 1fr);
	min-height: 72px;
	padding: var(--aleg2-space-4) 0;
}

.aleg2-top-news--layout-minimal .aleg2-top-news__item:hover {
	transform: none;
}

/* ------------------------------------------------------------
 * Layout: legacy / A LEGEND（旧）
 * ------------------------------------------------------------
 * legacy は旧A LEGENDの構造・余白・縦積み・hover演出を再現します。
 * ただし、色・フォントファミリー・角丸・影・transition はA LEGEND 2の
 * デザイントークンに接続し、管理画面のデザイン設定から外れないようにします。
 * ------------------------------------------------------------ */
.aleg2-top-news--layout-legacy {
	/*
	 * A LEGEND（旧）レイアウト専用の意味トークンです。
	 *
	 * 旧テーマの固定色を直接コピーせず、A LEGEND 2 のデザイン設定から
	 * 生成されるトークンへ接続します。カード本文・カテゴリーチップ・VIEW帯・
	 * hover反転色をここで一元化することで、明るい配色 / 暗い配色のどちらでも
	 * 「背景だけ変わる」「文字色だけ変わる」ことによる白飛びを防ぎます。
	 */
	--aleg2-top-news-legacy-card-bg: var(--aleg2-color-surface, #fff);
	--aleg2-top-news-legacy-card-text: var(--aleg2-color-heading, #222);
	--aleg2-top-news-legacy-card-muted: var(--aleg2-color-text-muted, #777);
	--aleg2-top-news-legacy-card-border: color-mix(in srgb, var(--aleg2-color-border, rgba(0, 0, 0, .14)) 84%, transparent);

	/*
	 * hover時に下から上がる幕は、A LEGEND 2 の「リンクホバー色」に接続します。
	 * VIEW帯やチップは通常時のカード面へ戻すことで、幕色と同化しない別面として残します。
	 */
	--aleg2-top-news-legacy-hover-bg: var(--aleg2-color-link-hover, var(--aleg2-color-primary, #000));
	--aleg2-top-news-legacy-hover-text: var(--aleg2-color-on-link-hover, var(--aleg2-color-on-primary, var(--aleg2-color-on-inverse, #fff)));
	--aleg2-top-news-legacy-hover-muted: color-mix(in srgb, var(--aleg2-top-news-legacy-hover-text) 82%, transparent);

	--aleg2-top-news-legacy-term-bg: var(--aleg2-button-bg, var(--aleg2-color-primary, #000));
	--aleg2-top-news-legacy-term-text: var(--aleg2-button-color, var(--aleg2-color-on-primary, #fff));
	--aleg2-top-news-legacy-term-border: var(--aleg2-button-border, var(--aleg2-top-news-legacy-term-bg));
	--aleg2-top-news-legacy-term-bg-hover: var(--aleg2-top-news-legacy-card-bg);
	--aleg2-top-news-legacy-term-text-hover: var(--aleg2-top-news-legacy-card-text);
	--aleg2-top-news-legacy-term-border-hover: var(--aleg2-top-news-legacy-card-bg);

	--aleg2-top-news-legacy-view-bg: var(--aleg2-button-bg, var(--aleg2-color-primary, #000));
	--aleg2-top-news-legacy-view-text: var(--aleg2-button-color, var(--aleg2-color-on-primary, #fff));
	--aleg2-top-news-legacy-view-border: var(--aleg2-button-border, var(--aleg2-top-news-legacy-view-bg));
	--aleg2-top-news-legacy-view-bg-hover: var(--aleg2-top-news-legacy-card-bg);
	--aleg2-top-news-legacy-view-text-hover: var(--aleg2-top-news-legacy-card-text);
	--aleg2-top-news-legacy-view-border-hover: var(--aleg2-top-news-legacy-card-bg);

	--aleg2-top-news-legacy-row-hover-bg: color-mix(in srgb, var(--aleg2-color-link-hover, var(--aleg2-color-primary, #000)) 10%, transparent);
	--aleg2-top-news-legacy-row-hover-text: var(--aleg2-color-link-hover, var(--aleg2-color-primary, #000));

	/*
	 * legacy下段リストの列設計です。
	 *
	 * 重要：
	 * - PC/SPで「日付｜カテゴリ｜本文」の情報構造を変えません。
	 * - SPでは5件目をカードからリストへ移す仕様を維持しますが、
	 *   そのリスト行もPCと同じ横並び構造で表示します。
	 * - 幅だけをCSS変数で調整し、将来の件数・カテゴリ名・日付ON/OFFにも
	 *   影響範囲を閉じたまま対応できるようにします。
	 */
	--aleg2-top-news-legacy-row-date-width: 88px;
	--aleg2-top-news-legacy-row-term-min: 92px;
	--aleg2-top-news-legacy-row-term-max: clamp(92px, 14vw, 160px);
	--aleg2-top-news-legacy-row-gap: clamp(16px, 2.4vw, 32px);

	/*
	 * legacyレイアウトでも、セクション全面の背景はrootの共通責務に従います。
	 *
	 * ここで background / ::before / wave背景上書きを持たせない理由：
	 * - レイアウト差分が背景レイヤーまで持つと、A LEGEND（旧）だけ薄く見えます。
	 * - TOP全体背景を遮断する矩形背景や、legacy専用の薄い膜を作りません。
	 * - 将来NEWS専用背景設定を追加しても、--aleg2-top-bg に流せばCSS変更なしで反映できます。
	 */
}

/*
 * A LEGEND（旧）固有の全面背景・薄い膜・wave背景上書きは定義しません。
 * 背景は .aleg2-top-news の共通指定へ集約し、レイアウト固有差分は
 * 下記の見出し・カード・後続リストの構造表現に限定します。
 */

/*
 * legacyでもinner構造は共通化します。
 * 旧A LEGEND風の差分は、下のlegacyカード・リストだけに限定します。
 */
.aleg2-top-news--layout-legacy .aleg2-top-news__body {
	display: grid;
}

/*
 * 見出しの見た目は css/components/section-heading.css の
 * .aleg2-section-heading--variant-large-bg に移管しました。
 * ここではNEWS固有のカード・リスト構造だけを扱います。
 */

.aleg2-top-news__legacy {
	display: grid;
	gap: clamp(26px, 4vw, 52px);
}

.aleg2-top-news__legacy-featured {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
	width: min(100%, 1200px);
	margin-inline: auto;

	/*
	 * legacyカードはhover時に6px上がるため、通常カードより切れが目立ちます。
	 * 旧A LEGEND風の見た目は維持しつつ、親gridで安全域を確保します。
	 */
	--aleg2-top-news-interaction-safe-space: var(--aleg2-card-interaction-safe-space, 7px);
	padding-block: var(--aleg2-top-news-interaction-safe-space);
	margin-block: calc(var(--aleg2-top-news-interaction-safe-space) * -1);
}

.aleg2-top-news__legacy-card {
	min-width: 0;
}

.aleg2-top-news__legacy-card-link {
	position: relative;
	display: flex;
	min-height: 100%;
	overflow: hidden;
	isolation: isolate;
	color: var(--aleg2-top-news-legacy-card-text);
	text-align: center;
	text-decoration: none;
	background: var(--aleg2-top-news-legacy-card-bg);
	border: 1px solid var(--aleg2-top-news-legacy-card-border);
	border-radius: var(--aleg2-radius-card);
	box-shadow: var(--aleg2-shadow-soft);
	flex-direction: column;
	transition:
		color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		background var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		box-shadow var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-top-news__legacy-card-link::before {
	position: absolute;
	inset: 0;
	z-index: 0;
	content: "";
	background: var(--aleg2-top-news-legacy-hover-bg);
	transform: translateY(102%);
	transition: transform var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-top-news__legacy-card-link > * {
	position: relative;
	z-index: 1;
}

.aleg2-top-news__legacy-card-link:hover,
.aleg2-top-news__legacy-card-link:focus-visible {
	color: var(--aleg2-top-news-legacy-hover-text);
	text-decoration: none;
	border-color: var(--aleg2-top-news-legacy-hover-bg);
	box-shadow: var(--aleg2-shadow-card);
	transform: translate3d(0, -6px, 0);
}

.aleg2-top-news__legacy-card-link:hover::before,
.aleg2-top-news__legacy-card-link:focus-visible::before {
	transform: translateY(0);
}

.aleg2-top-news__legacy-card-link:focus-visible,
.aleg2-top-news__legacy-row-link:focus-visible,
.aleg2-top-news__legacy-cta:focus-visible {
	outline: 2px solid var(--aleg2-color-link-hover, var(--aleg2-color-primary, currentColor));
	outline-offset: 4px;
	box-shadow: var(--aleg2-focus-ring, 0 0 0 4px color-mix(in srgb, var(--aleg2-color-link-hover, var(--aleg2-color-primary, currentColor)) 24%, transparent));
}

.aleg2-top-news__legacy-card-term {
	align-self: center;
	max-width: calc(100% - (var(--aleg2-space-4) * 2));
	padding: 0.36em 0.92em;
	margin: var(--aleg2-space-4) var(--aleg2-space-4) var(--aleg2-space-3);
	overflow: hidden;
	color: var(--aleg2-top-news-legacy-term-text);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(0.64rem, 0.72vw, 0.76rem);
	font-weight: 800;
	line-height: 1;
	text-overflow: ellipsis;
	letter-spacing: 0.08em;
	white-space: nowrap;
	background: var(--aleg2-top-news-legacy-term-bg);
	border: 1px solid var(--aleg2-top-news-legacy-term-border);
	border-radius: 999px;
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-top-news__legacy-card-link:hover .aleg2-top-news__legacy-card-term,
.aleg2-top-news__legacy-card-link:focus-visible .aleg2-top-news__legacy-card-term {
	color: var(--aleg2-top-news-legacy-term-text-hover);
	background: var(--aleg2-top-news-legacy-term-bg-hover);
	border-color: var(--aleg2-top-news-legacy-term-border-hover);
}

.aleg2-top-news__legacy-card-media-wrap {
	padding-inline: clamp(12px, 1.5vw, 18px);
}

.aleg2-top-news__legacy-card-media-wrap .aleg2-top-news__media {
	border-radius: calc(var(--aleg2-radius-card) * 0.72);
}

.aleg2-top-news__legacy-card-media-wrap .aleg2-top-news__media--empty {
	border: 1px dashed color-mix(in srgb, var(--aleg2-color-border, rgba(0, 0, 0, .14)) 78%, transparent);
}

.aleg2-top-news__legacy-card-link:hover .aleg2-top-news__image,
.aleg2-top-news__legacy-card-link:focus-visible .aleg2-top-news__image {
	transform: scale(1.055);
}

.aleg2-top-news__legacy-card-link:hover .aleg2-top-news__media--empty,
.aleg2-top-news__legacy-card-link:focus-visible .aleg2-top-news__media--empty {
	color: var(--aleg2-top-news-legacy-hover-muted);
	border-color: color-mix(in srgb, var(--aleg2-top-news-legacy-hover-text) 36%, transparent);
}

.aleg2-top-news__legacy-card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--aleg2-space-2);
	padding: clamp(12px, 1.4vw, 18px) clamp(13px, 1.5vw, 20px) clamp(14px, 1.4vw, 18px);
}

.aleg2-top-news__legacy-card-date {
	color: var(--aleg2-top-news-legacy-card-muted);
	font-family: var(--aleg2-font-latin);
	font-size: clamp(0.68rem, 0.72vw, 0.78rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.08em;
	transition: color var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-top-news__legacy-card-link:hover .aleg2-top-news__legacy-card-date,
.aleg2-top-news__legacy-card-link:focus-visible .aleg2-top-news__legacy-card-date {
	color: var(--aleg2-top-news-legacy-hover-muted);
}

.aleg2-top-news__legacy-card-title {
	display: -webkit-box;
	min-height: calc(1em * 1.48 * 2);
	margin: 0;
	overflow: hidden;
	color: var(--aleg2-top-news-legacy-card-text);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(0.88rem, 0.94vw, 1rem);
	font-weight: 800;
	line-height: 1.48;
	letter-spacing: 0.01em;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	transition: color var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-top-news__legacy-card-link:hover .aleg2-top-news__legacy-card-title,
.aleg2-top-news__legacy-card-link:focus-visible .aleg2-top-news__legacy-card-title {
	color: var(--aleg2-top-news-legacy-hover-text);
}

.aleg2-top-news__legacy-card-excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--aleg2-top-news-legacy-card-muted);
	font-size: clamp(0.72rem, 0.78vw, 0.84rem);
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	transition: color var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-top-news__legacy-card-link:hover .aleg2-top-news__legacy-card-excerpt,
.aleg2-top-news__legacy-card-link:focus-visible .aleg2-top-news__legacy-card-excerpt {
	color: var(--aleg2-top-news-legacy-hover-muted);
}

.aleg2-top-news__legacy-card-view {
	display: grid;
	place-items: center;
	min-height: 42px;
	padding: 0.82em 1em;
	margin-top: auto;
	color: var(--aleg2-top-news-legacy-view-text);
	font-family: var(--aleg2-font-latin);
	font-size: clamp(0.68rem, 0.72vw, 0.78rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	background: var(--aleg2-top-news-legacy-view-bg);
	border-top: 1px solid var(--aleg2-top-news-legacy-view-border);
	transition:
		color var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		background var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-top-news__legacy-card-link:hover .aleg2-top-news__legacy-card-view,
.aleg2-top-news__legacy-card-link:focus-visible .aleg2-top-news__legacy-card-view {
	color: var(--aleg2-top-news-legacy-view-text-hover);
	background: var(--aleg2-top-news-legacy-view-bg-hover);
	border-top-color: var(--aleg2-top-news-legacy-view-border-hover);
}

.aleg2-top-news__legacy-list {
	display: grid;
	width: min(100%, 960px);
	padding: 0;
	margin: 0 auto;
	list-style: none;
	border-top: 1px solid var(--aleg2-top-news-legacy-card-border);
}

.aleg2-top-news__legacy-row {
	margin: 0;
	border-bottom: 1px solid var(--aleg2-top-news-legacy-card-border);
}

.aleg2-top-news__legacy-row-link {
	display: grid;
	grid-template-columns:
		var(--aleg2-top-news-legacy-row-date-width)
		minmax(var(--aleg2-top-news-legacy-row-term-min), auto)
		minmax(0, 1fr);
	gap: var(--aleg2-top-news-legacy-row-gap);
	align-items: center;
	min-height: 86px;
	padding: clamp(14px, 1.6vw, 20px) 0;
	color: var(--aleg2-color-text, var(--aleg2-top-news-legacy-card-text));
	text-decoration: none;
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		padding-inline var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

/*
 * 日付/カテゴリの有無に応じて、空列を残さず本文列へ正しく渡します。
 * セクション全体の show_date OFF だけでなく、将来的に行単位でカテゴリが
 * 未設定になった場合も、横並び構造を破綻させないための保険です。
 */
.aleg2-top-news--no-date .aleg2-top-news__legacy-row-link,
.aleg2-top-news__legacy-row--no-date .aleg2-top-news__legacy-row-link {
	grid-template-columns:
		minmax(var(--aleg2-top-news-legacy-row-term-min), auto)
		minmax(0, 1fr);
}

.aleg2-top-news__legacy-row--no-term .aleg2-top-news__legacy-row-link {
	grid-template-columns:
		var(--aleg2-top-news-legacy-row-date-width)
		minmax(0, 1fr);
}

.aleg2-top-news--no-date .aleg2-top-news__legacy-row--no-term .aleg2-top-news__legacy-row-link,
.aleg2-top-news__legacy-row--no-date.aleg2-top-news__legacy-row--no-term .aleg2-top-news__legacy-row-link {
	grid-template-columns: minmax(0, 1fr);
}

.aleg2-top-news__legacy-row-link:hover,
.aleg2-top-news__legacy-row-link:focus-visible {
	padding-inline: var(--aleg2-space-3);
	color: var(--aleg2-top-news-legacy-row-hover-text);
	background: var(--aleg2-top-news-legacy-row-hover-bg);
	text-decoration: none;
}

.aleg2-top-news__legacy-row-link:hover .aleg2-top-news__legacy-row-term,
.aleg2-top-news__legacy-row-link:focus-visible .aleg2-top-news__legacy-row-term {
	color: var(--aleg2-top-news-legacy-term-text-hover);
	background: var(--aleg2-top-news-legacy-term-bg-hover);
	border-color: var(--aleg2-top-news-legacy-term-border-hover);
}

.aleg2-top-news__legacy-row-link:hover .aleg2-top-news__legacy-row-excerpt,
.aleg2-top-news__legacy-row-link:focus-visible .aleg2-top-news__legacy-row-excerpt {
	color: var(--aleg2-top-news-legacy-row-hover-text);
}

.aleg2-top-news__legacy-row-date {
	display: grid;
	gap: 2px;
	color: var(--aleg2-top-news-legacy-card-muted);
	font-family: var(--aleg2-font-latin);
	line-height: 1;
	transition: color var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-top-news__legacy-row-yearmonth {
	font-size: clamp(0.68rem, 0.8vw, 0.8rem);
	font-weight: 800;
	letter-spacing: 0.08em;
}

.aleg2-top-news__legacy-row-day {
	color: var(--aleg2-top-news-legacy-card-text);
	font-size: clamp(1.5rem, 2.2vw, 2.3rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	transition: color var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-top-news__legacy-row-link:hover .aleg2-top-news__legacy-row-date,
.aleg2-top-news__legacy-row-link:focus-visible .aleg2-top-news__legacy-row-date,
.aleg2-top-news__legacy-row-link:hover .aleg2-top-news__legacy-row-day,
.aleg2-top-news__legacy-row-link:focus-visible .aleg2-top-news__legacy-row-day {
	color: var(--aleg2-top-news-legacy-row-hover-text);
}

.aleg2-top-news__legacy-row-term {
	justify-self: start;
	max-width: min(100%, var(--aleg2-top-news-legacy-row-term-max));
	padding: 0.38em 0.88em;
	overflow: hidden;
	color: var(--aleg2-top-news-legacy-term-text);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(0.66rem, 0.74vw, 0.8rem);
	font-weight: 800;
	line-height: 1;
	text-overflow: ellipsis;
	letter-spacing: 0.08em;
	white-space: nowrap;
	background: var(--aleg2-top-news-legacy-term-bg);
	border: 1px solid var(--aleg2-top-news-legacy-term-border);
	border-radius: 999px;
}

.aleg2-top-news__legacy-row-content {
	display: grid;
	gap: 5px;
	min-width: 0;
}

.aleg2-top-news__legacy-row-title {
	position: relative;
	display: inline;
	width: fit-content;
	max-width: 100%;
	color: var(--aleg2-top-news-legacy-card-text);
	font-family: var(--aleg2-font-heading);
	font-size: clamp(0.98rem, 1.25vw, 1.16rem);
	font-weight: 800;
	line-height: 1.45;
	background-image: linear-gradient(var(--aleg2-top-news-legacy-row-hover-text), var(--aleg2-top-news-legacy-row-hover-text));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background-size var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-top-news__legacy-row-link:hover .aleg2-top-news__legacy-row-title,
.aleg2-top-news__legacy-row-link:focus-visible .aleg2-top-news__legacy-row-title {
	color: var(--aleg2-top-news-legacy-row-hover-text);
	background-size: 100% 1px;
}

.aleg2-top-news__legacy-row-excerpt {
	display: -webkit-box;
	overflow: hidden;
	color: var(--aleg2-top-news-legacy-card-muted);
	font-size: var(--aleg2-font-size-xs);
	line-height: 1.6;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
}

.aleg2-top-news__legacy-row--mobile-only {
	display: none;
}

/* ------------------------------------------------------------
 * CTA
 * ------------------------------------------------------------
 *
 * 正規のNEWS CTAは template-parts/components/section-heading.php の
 * button_label / button_url へ集約しています。
 * NEWS固有の .aleg2-top-news__actions は通常DOMで出力しないため、
 * ここでは配置CSSを定義しません。
 */

/* ------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------ */
@media (max-width: 1400px) {
	.aleg2-top-news__legacy-featured {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (max-width: 1200px) {
	.aleg2-top-news__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aleg2-top-news__legacy-featured {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		width: min(100%, 980px);
	}
}

@media (max-width: 768px) {
	.aleg2-top-news__grid,
	.aleg2-top-news__legacy-featured {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.aleg2-top-news__legacy-featured {
		width: min(100%, 680px);
		gap: clamp(12px, 3.2vw, 18px);
	}

	.aleg2-top-news__legacy-card--mobile-hidden {
		display: none;
	}

	.aleg2-top-news__legacy-row--mobile-only {
		display: block;
	}

	.aleg2-top-news__legacy-list {
		width: min(100%, 680px);
	}
}

@media (max-width: 640px) {
	.aleg2-top-news__row-link,
	.aleg2-top-news--layout-compact .aleg2-top-news__row-link,
	.aleg2-top-news--layout-minimal .aleg2-top-news__row-link {
		grid-template-columns: 1fr;
		gap: var(--aleg2-space-2);
		min-height: auto;
		padding: var(--aleg2-space-4);
	}

	.aleg2-top-news--layout-minimal .aleg2-top-news__row-link {
		padding-inline: 0;
	}

	.aleg2-top-news__item:hover,
	.aleg2-top-news--layout-list .aleg2-top-news__item:hover,
	.aleg2-top-news--layout-compact .aleg2-top-news__item:hover {
		transform: none;
	}

	.aleg2-top-news__card-body {
		padding: var(--aleg2-space-4);
	}

	/*
	 * legacyの下段リストは、SPでもPCと同じ情報構造を維持します。
	 * ここで grid-template-columns: 1fr に落とすと、
	 * レスポンシブ時に「日付 / カテゴリ / 本文」が縦積みになってしまいます。
	 * そのため、列数は変えず、列幅・gap・文字サイズだけを小画面向けに縮めます。
	 */
	.aleg2-top-news--layout-legacy {
		--aleg2-top-news-legacy-row-date-width: clamp(52px, 16vw, 72px);
		--aleg2-top-news-legacy-row-term-min: clamp(50px, 17vw, 76px);
		--aleg2-top-news-legacy-row-term-max: clamp(54px, 22vw, 88px);
		--aleg2-top-news-legacy-row-gap: clamp(8px, 2.5vw, 12px);
	}

	.aleg2-top-news--layout-legacy .aleg2-top-news__legacy-row-link {
		min-height: clamp(68px, 18vw, 82px);
		padding: var(--aleg2-space-4) 0;
	}

	.aleg2-top-news--layout-legacy .aleg2-top-news__legacy-row-link:hover,
	.aleg2-top-news--layout-legacy .aleg2-top-news__legacy-row-link:focus-visible {
		padding-inline: var(--aleg2-space-2);
	}

	.aleg2-top-news--layout-legacy .aleg2-top-news__legacy-row-yearmonth {
		font-size: clamp(0.56rem, 2.5vw, 0.68rem);
		letter-spacing: 0.04em;
	}

	.aleg2-top-news--layout-legacy .aleg2-top-news__legacy-row-day {
		font-size: clamp(1.05rem, 5vw, 1.42rem);
	}

	.aleg2-top-news--layout-legacy .aleg2-top-news__legacy-row-title,
	.aleg2-top-news--layout-legacy .aleg2-top-news__legacy-row-excerpt {
		min-width: 0;
	}

	.aleg2-top-news__legacy-card-body {
		padding: var(--aleg2-space-3) var(--aleg2-space-3) var(--aleg2-space-4);
	}

	.aleg2-top-news__legacy-card-media-wrap {
		padding-inline: var(--aleg2-space-3);
	}

	.aleg2-top-news__legacy-card-title {
		font-size: var(--aleg2-font-size-sm);
	}

	.aleg2-top-news__legacy-card-view {
		min-height: 38px;
	}
}

@media (max-width: 430px) {
	.aleg2-top-news__grid,
	.aleg2-top-news__legacy-featured {
		gap: var(--aleg2-space-3);
	}

	.aleg2-top-news__term,
	.aleg2-top-news__legacy-card-term,
	.aleg2-top-news__legacy-row-term {
		font-size: 0.64rem;
	}

	.aleg2-top-news__legacy-card-link {
		border-radius: calc(var(--aleg2-radius-card) * 0.8);
	}
}