/**
 * News List block — front-side & editor iframe styles.
 * block.json の "style": "file:./style.css" で双方にロードされる。
 *
 * フォント定義は元 HTML / CSS（body・h1,h2,h4-6・.fh5co-heading h2・
 * .dl-horizontal.user dt/dd・a）を忠実に踏襲。
 */

.news-list {
	background-color: #fff;
	padding: 64px 0 56px;
	margin: 0;
	/* 元 body 設定を踏襲（テーマ既定の Helvetica/14px/#333 を上書き） */
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 16px;
	font-weight: 300;
	color: #848484;
	line-height: 1.8;
}

.news-list__header {
	text-align: center;
	margin-bottom: 2.5em;
}

/* 「NEWS」見出し — Service セクション (`.mp-service__title`) とスタイルを統一。
   legacy `.fh5co-heading h2` の Arial / uppercase / 900 / letter-spacing を踏襲し、
   下にテーマカラー (cyan→orange) のアクセントバーを敷くデザイン。 */
.news-list__title {
	position: relative;
	margin: 0 auto 8px;
	padding-bottom: 22px;
	font-family: Arial, Helvetica, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
	font-size: clamp(36px, 5.5vw, 64px);
	font-weight: 900;
	font-style: normal;
	letter-spacing: 0.08em;
	line-height: 1.15;
	text-transform: uppercase;
	text-align: center;
	color: var(--mp-color-text, #333333);
}

.news-list__title::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 72px;
	height: 4px;
	border-radius: 2px;
	background: linear-gradient(
		90deg,
		var(--mp-color-ctb, #37b3cc) 0%,
		var(--mp-color-cta, #e89e15) 100%
	);
	transform: translateX(-50%);
}

/* リスト本体 */
.news-list__items {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 920px;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.news-list__item {
	display: grid;
	grid-template-columns: auto auto 1fr;
	column-gap: 16px;
	row-gap: 4px;
	align-items: center;
	min-height: 64px;
	padding: 18px 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* 日付（元: .dl-horizontal.user dt — body の メイリオ/16/300/#848484/1.8 を継承） */
.news-list__date {
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 1.8;
	letter-spacing: 0;
	color: #848484;
	min-width: 100px;
	text-align: center;
}

/* カテゴリーバッジ（元 HTML には存在しないため、本実装で追加） */
.news-list__badge {
	display: inline-block;
	min-width: 112px;
	padding: 6px 14px;
	border-radius: 4px;
	background: #999;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: none;
	line-height: 1.5;
}

/* バッジ：カテゴリー slug 別カラー（既知の slug のみプリセット） */
.news-list__badge--notice  { background: #37b3cc; }
.news-list__badge--release { background: #25af99; }
.news-list__badge--media   { background: #e89e15; }
.news-list__badge--news    { background: #37b3cc; }
.news-list__badge--press   { background: #25af99; }
.news-list__badge--default { background: #999; }

/* タイトルリンク（元: .dl-horizontal.user dd 内の <a>。
   dd line-height 26px / a { color: #333; transition: 0.5s } / a:hover { color: #25af99 } を踏襲） */
.news-list__title-link {
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 16px;
	font-weight: 300;
	line-height: 26px;
	letter-spacing: 0;
	color: #333333;
	text-decoration: none;
	transition: color 0.5s ease;
	overflow-wrap: anywhere;
}

.news-list__title-link:hover,
.news-list__title-link:focus-visible {
	color: #25af99;
	text-decoration: underline;
}

/* 「Learn more」（元: .row.animate-box .col-md-10.col-md-offset-1.animate-box.fh5co-heading p） */
.news-list__more {
	margin: 24px auto 0;
	max-width: 920px;
	font-size: 16px;
	text-align: right;
	line-height: 1.8;
}

.news-list__more a {
	color: #333333;
	text-decoration: none;
	transition: color 0.5s ease;
}

.news-list__more a:hover,
.news-list__more a:focus-visible {
	color: #25af99;
	text-decoration: underline;
}

/* 空状態 */
.news-list__empty {
	text-align: center;
	color: #848484;
	padding: 24px 0;
	font-family: 'メイリオ', Meiryo, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
	font-size: 16px;
	font-weight: 300;
}

/* レスポンシブ（元の .dl-horizontal は ≥768px で float レイアウト、未満で縦積み） */
@media (max-width: 768px) {
	.news-list {
		padding: 48px 0 40px;
	}

	.news-list__item {
		grid-template-columns: auto 1fr;
		grid-template-areas:
			"date  badge"
			"title title";
		column-gap: 12px;
		row-gap: 8px;
		min-height: 0;
		padding: 16px 4px;
	}

	.news-list__date       { grid-area: date; min-width: 0; text-align: left; }
	.news-list__badge      { grid-area: badge; justify-self: start; min-width: 0; }
	.news-list__title-link { grid-area: title; }
}