/* ==========================================================================
   news.css  ·  新闻资讯（列表页 + 详情页）
   ========================================================================== */

/* 品质保障详情 结束 */

/* 新闻页面 开始 */
#news_main {
	
}
#news_main .news_content {
	background-color: var(--color-bg-page);
	margin-bottom: 100px;
}
#news_main .news_content .list_news {
	max-width: 1200px;
	margin: 0 auto;
	padding: 48px; /* 对齐 about 容器水槽 */
	margin-top: 40px;
	background-color: #fff;
}
#news_main .news_content .list_news .item_news {
	font-size: 0;
	padding: 20px 0;
  border-bottom: 1px solid var(--color-border);
  /* 改 flex：原来靠 inline-block + font-size:0 拼，日期块固定 150px 高、
     右侧 min-height 150px，字数一多两边就对不齐（日期块下面空一截）。
     flex + stretch 让日期块自动跟右侧一样高。 */
  display: flex;
  align-items: stretch;
  gap: 20px;
}
#news_main .item_news .item_news_time {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	flex: 0 0 auto;
	min-width: 116px;
	min-height: 150px;
	font-size: 16px;
	color: var(--color-brand-bronze);
	background-color: var(--color-bg-page);
	padding: 20px 24px;
	text-align: center;
	font-weight: bold;
}
#news_main .item_news .item_news_time .day {
	font-size: 50px;
	line-height: 1.1;
}
#news_main .item_news .item_news_time .year {
	font-size: 15px;
	line-height: 1.6;
	letter-spacing: .5px;
}
#news_main .item_news .news_wrap {
	font-size: 14px;
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 220px;
  position: relative;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#news_main .item_news .news_wrap .cover_wrap {
	position: absolute;
	width: 200px;
	height: 100%;
	top: 0;
	left: 0;
}
#news_main .item_news .news_wrap .cover_wrap .cover {
	width: 100%;
	height: 100%;
}
#news_main .news_wrap .news_info .title_wrap {
	margin-bottom: 12px;
}
/* 标题：最多两行。
   line-clamp 是视觉上限，模板里另有 str_limit 兜住超长原文；
   max-height 给不支持 -webkit-line-clamp 的老浏览器留个硬上限，不会把卡片顶开。 */
#news_main .news_wrap .news_info .title_wrap .title {
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-text);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: calc(1.5em * 2);
	text-wrap: pretty;
}
/* 发布时间：13px / 1.6 的弱化小字。
   注意选择器以前写成了 `#news_main v.news_wrap …`（多了一个 v），整条规则从未生效，
   于是这行一直继承 <a> 的绿色 14px，跟摘要混成一团。 */
#news_main .news_wrap .news_info .title_wrap .subtitle {
	font-size: 13px;
	line-height: 1.6;
	color: var(--color-text-muted);
	margin-top: 8px;
	letter-spacing: .2px;
}
/* 摘要：最多三行 */
#news_main .news_wrap .news_info .news_text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--color-text-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	max-height: calc(1.7em * 3);
	text-wrap: pretty;
}
#news_main .list_news .item_news:hover .item_news_time {
	background-color: var(--color-primary);
	color: #fff;
}
#news_main .list_news .item_news:hover .news_info .title {
	font-weight: bold;
	color: var(--color-primary);
}
/* 新闻页面 结束 */

/* 新闻详情 开始 */
#news_views_main {
	background: var(--color-bg-page);
}
#news_views_main .news_views {
	max-width: 1200px;
	margin: 0 auto;
	padding: 100px 48px; /* 对齐 about：100px 板块间距 + 48px 水槽 */
}
#news_views_main .news_views .news_wrap {
	background-color: #fff;
	padding: 35px;
}
#news_views_main .news_views .news_wrap .title_wrap {
	text-align: center;
	margin-bottom: 20px;
}
#news_views_main .news_views .news_wrap .title_wrap .title {
	font-size: 30px;
	font-weight: bold;
}

/* 新闻详情 补充：发布时间 / 摘要 / 插图 / 正文（newsdetail.html） */
#news_views_main .news_views .news_meta {
	text-align: center;
	font-size: 14px;
	color: var(--color-text-muted);
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--color-border);
}
#news_views_main .news_views .news_summary {
	background-color: var(--color-bg-page);
	border-left: 3px solid var(--color-brand-bronze);
	padding: 18px 22px;
	font-size: 15px;
	line-height: 1.8;
	color: var(--color-text-secondary);
	margin-bottom: 32px;
}
#news_views_main .news_views .news_summary .news_summary_label {
	display: inline-block;
	font-weight: bold;
	color: var(--color-brand-bronze);
	margin-right: 10px;
}
#news_views_main .news_views .news_cover {
	margin-bottom: 32px;
}
#news_views_main .news_views .news_cover img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 8px;
}
#news_views_main .news_views .news_article {
	font-size: 16px;
	line-height: 1.9;
	color: var(--color-text-secondary);
}
#news_views_main .news_views .news_article p {
	margin-bottom: 1em;
}
#news_views_main .news_views .news_article p:last-child {
	margin-bottom: 0;
}

/* 上一篇 / 下一篇 —— CMS 新增（原站没有这块），沿用详情页的纸张底 + 古铜标签
   注意：必须写在 #news_views_main .news_views 级联下，与正文同层，
   否则会掉回浏览器默认的行内链接样式（小字、无间距、贴在一起） */
#news_views_main .news_views .news_adj {
	margin-top: 44px;
	padding-top: 28px;
	border-top: 1px solid var(--color-border);
	display: grid;
	gap: 10px;
}
#news_views_main .news_views .news_adj_item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 15px 20px;
	background-color: var(--color-bg-page);
	border: 1px solid transparent;
	border-radius: 6px;
	transition: background-color .25s, border-color .25s;
}
#news_views_main .news_views .news_adj_item:hover {
	background-color: #fff;
	border-color: var(--color-primary);
}
#news_views_main .news_views .news_adj_k {
	flex: 0 0 auto;
	/* 14px：正文 16px、标签 14px，层级清楚又不会小到要眯眼（13px 时中文字形已发糊） */
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .3px;
	color: var(--color-brand-bronze);
}
#news_views_main .news_views .news_adj_v {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-text-secondary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color .25s;
}
#news_views_main .news_views .news_adj_item:hover .news_adj_v {
	color: var(--color-primary);
}
/* 新闻详情面包屑（main_tap_wrap 复用吸顶条，与产品详情一致） */
#news_views_main .tap_crumb {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 50px;
	line-height: 1;
	font-size: 15px;
	color: var(--color-text-muted);
}
#news_views_main .tap_crumb .crumb_label { white-space: nowrap; }
#news_views_main .tap_crumb .crumb_link { color: var(--color-text-muted); transition: color .3s; }
#news_views_main .tap_crumb .crumb_link:hover { color: var(--color-primary); }
#news_views_main .tap_crumb .crumb_sep { color: var(--color-border-strong); }
#news_views_main .tap_crumb .crumb_cur { color: var(--color-text); font-weight: 600; }
#news_views_main .tap_crumb .crumb_back {
	margin-left: auto;
	white-space: nowrap;
	color: var(--color-primary);
	font-weight: 600;
	transition: color .3s;
}
#news_views_main .tap_crumb .crumb_back:hover { color: var(--color-brand-bronze, #c79d6e); }
@media (max-width: 640px) {
	#news_views_main .tap_crumb { font-size: 14px; gap: 6px; }
	#news_views_main .tap_crumb .crumb_label { display: none; }
	#news_views_main .news_views .news_wrap { padding: 22px 18px; }
	#news_views_main .news_views .news_wrap .title_wrap .title { font-size: 22px; }
	#news_views_main .news_views .news_meta { padding-bottom: 18px; margin-bottom: 24px; }
	#news_views_main .news_views .news_summary,
	#news_views_main .news_views .news_cover { margin-bottom: 24px; }
	#news_views_main .news_views .news_article { font-size: 15px; }
	/* 窄屏上下篇：标签与标题上下排，标题最多两行，不再单行省略 */
	#news_views_main .news_views .news_adj { margin-top: 32px; padding-top: 20px; }
	#news_views_main .news_views .news_adj_item {
		align-items: flex-start;
		flex-direction: column;
		gap: 6px;
		padding: 13px 16px;
	}
	#news_views_main .news_views .news_adj_v {
		font-size: 15px;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
}

/* ============================================================
   网格版式（栏目页 → 新闻动态 → 展示方式 = 网格）
   原始设计是一行一条的日期时间轴；选网格时把日期块收起，
   封面提到顶部、正文落到卡片里，不改 DOM 只改排布。
   ============================================================ */
#news_main .list_news--grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	gap: 22px;
	padding: 40px;
}
#news_main .list_news--grid .item_news {
	display: block;
	padding: 0;
	border: 1px solid var(--color-border);
	border-radius: 8px;
	overflow: hidden;
}
#news_main .list_news--grid .item_news_time { display: none; }
#news_main .list_news--grid .news_wrap {
	padding-left: 0;
	min-height: 0;
	display: block;
}
#news_main .list_news--grid .news_wrap .cover_wrap {
	position: static;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
}
#news_main .list_news--grid .news_info { padding: 16px 18px 18px; }
@media (max-width: 640px) {
	#news_main .list_news--grid {
		grid-template-columns: 1fr;
		padding: 16px;
		gap: 16px;
	}
}

/* 新闻列表：标签筛选条与下方 .list_news 白卡片外框同宽同边（不加水平内边距），
   两块卡片左右边缘对齐才不像浮在中间；卡片内部的 48px 水槽只管它自己的内容。 */
#news_main .news_content .news_tags {
	max-width: 1200px;
	margin: 32px auto 0;
}
#news_main .news_content .news_tags .tagfilter { margin-bottom: 0; }
