/* ==========================================================================
   works.css —— 「作品」栏目内部作品集风格（lists_works.htm / view_works.htm）
   与整站风格协调：沿用 --themeColor 红色主题、--fNN 字号、wp/wp-cont 容器。
   说明：本文件在 head_common（含 mobile.css）之后加载，移动端覆写必须
   写在下方 @media 内；行高一律使用无单位倍数，禁止固定 rem 行高。
   ========================================================================== */

/* ---------------- 深色 Hero ---------------- */
.w-hero {
	background:
		radial-gradient(60% 120% at 85% 0%, rgba(200, 10, 20, .35) 0%, rgba(200, 10, 20, 0) 55%),
		linear-gradient(135deg, #1c1c22 0%, #101014 55%, #0a0a0d 100%);
	padding: 1.9rem 0 0.5rem;
}

.w-hero h1 {
	color: #fff;
	font-size: var(--f50);
	line-height: 1.4;
	font-weight: bold;
	letter-spacing: .01rem;
}

.w-hero .w-hero-sub {
	color: rgba(255, 255, 255, .72);
	font-size: var(--f20);
	line-height: 1.8;
	margin-top: .1rem;
}

.w-hero-tags {
	display: flex;
	flex-wrap: wrap;
	gap: .12rem;
	margin-top: .24rem;
}

.w-hero-tags li {
	color: #fff;
	font-size: var(--f16);
	line-height: 1;
	padding: .1rem .16rem;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: .3rem;
	display: flex;
	align-items: center;
	gap: .08rem;
	background: rgba(255, 255, 255, .06);
}

.w-hero-tags li::before {
	content: "";
	width: .08rem;
	height: .08rem;
	border-radius: 50%;
	background: var(--themeColor);
}

/* ---------------- 行业分类 chips ---------------- */
.w-nav {
	display: flex;
	flex-wrap: wrap;
	gap: .1rem;
	padding: .3rem 0 .1rem;
}

.w-nav li a {
	display: inline-flex;
	align-items: center;
	color: #171616;
	font-size: var(--f17);
	line-height: 1;
	background: #f5f5f5;
	border: 1px solid #ececec;
	border-radius: .3rem;
	padding: .12rem .2rem;
	transition: all .35s;
}

.w-nav li a:hover {
	color: #c80a14;
	border-color: rgba(200, 10, 20, .35);
}

.w-nav li.on a {
	color: #fff;
	background: linear-gradient(to right, #ec2c34, #c80a14);
	border-color: transparent;
	font-weight: bold;
}

/* ---------------- 作品卡片栅格 ---------------- */
.w-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .18rem;
	/* 分类 chips 与列表间距增加 30px（1920 设计稿折算） */
	margin-top: .17rem;
	padding-bottom: .2rem;
}

.w-card {
	background: #fff;
	border-radius: .05rem;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(21, 20, 20, .05);
	transition: box-shadow .35s, transform .35s;
}

.w-card:hover {
	box-shadow: 0 12px 28px rgba(21, 20, 20, .13);
	transform: translateY(-.03rem);
}

.w-card .w-cover {
	display: block;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f2f2f2;
}

.w-card .w-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform .6s;
}

.w-card:hover .w-cover img {
	transform: scale(1.04);
}

/* 卡片信息区 */
.w-meta {
	padding: .13rem .15rem .15rem;
}

.w-meta h3 {
	font-size: var(--f19);
	line-height: 1.5;
	color: #171616;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.w-meta h3 a {
	color: #171616;
	transition: color .3s;
}

.w-meta h3 a:hover {
	color: #c80a14;
}

.w-meta .w-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: .07rem;
	min-height: .22rem;
}

.w-meta .w-industry {
	color: #9b9b9b;
	font-size: var(--f14);
	line-height: 1;
}

.w-meta .w-site {
	color: var(--themeColor);
	font-size: var(--f14);
	line-height: 1;
	display: inline-flex;
	align-items: center;
	gap: .04rem;
	transition: opacity .3s;
}

.w-meta .w-site .iconfont {
	font-size: var(--f15);
	line-height: 1;
}

.w-meta .w-site:hover {
	opacity: .75;
}

/* ---------------- 内部资料提示带 ---------------- */
.w-note {
	background: #171616;
	border-left: .04rem solid var(--themeColor);
	border-radius: .04rem;
	padding: .16rem .2rem;
	margin: .1rem 0 .3rem;
}

.w-note p {
	color: rgba(255, 255, 255, .82);
	font-size: var(--f16);
	line-height: 1.8;
}

.w-note strong {
	color: #fff;
	font-weight: bold;
}

.w-note .w-note-red {
	color: #ff6b72;
}

/* ---------------- 详情页（view_works.htm）微调 ---------------- */
.w-detail-url {
	background: #f7f7f7;
	border: 1px solid #ececec;
	border-radius: .05rem;
	padding: .14rem .16rem;
	margin-top: .12rem;
}

.w-detail-url p {
	color: #9b9b9b;
	font-size: var(--f15);
	line-height: 1.6;
	margin-bottom: .05rem;
}

.w-detail-url a {
	color: var(--themeColor);
	font-size: var(--f17);
	line-height: 1.6;
	word-break: break-all;
	display: inline-flex;
	align-items: center;
	gap: .05rem;
}

.w-detail-url a:hover {
	text-decoration: underline;
}

.w-detail-cover {
	width: 100%;
	border-radius: .05rem;
	border: 1px solid #ececec;
	display: block;
}

/* ==========================================================================
   移动端（≤991px）
   ========================================================================== */
@media (max-width: 991px) {
	.w-hero {
		padding: 76px 0 18px;
	}

	.w-hero h1 {
		font-size: 26px;
	}

	.w-hero .w-hero-sub {
		font-size: 14px;
		line-height: 1.8;
		margin-top: 8px;
	}

	.w-hero-tags {
		gap: 8px;
		margin-top: 16px;
	}

	.w-hero-tags li {
		font-size: 12px;
		padding: 7px 12px;
		border-radius: 20px;
	}

	.w-nav {
		gap: 8px;
		padding: 18px 0 4px;
	}

	.w-nav li a {
		font-size: 13px;
		padding: 9px 14px;
		border-radius: 20px;
	}

	.w-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
		padding-bottom: 12px;
	}

	.w-card {
		border-radius: 8px;
	}

	.w-card:hover {
		transform: none;
	}

	.w-meta {
		padding: 10px 12px 12px;
	}

	.w-meta h3 {
		font-size: 14px;
	}

	.w-meta .w-industry,
	.w-meta .w-site {
		font-size: 12px;
	}

	.w-meta .w-site .iconfont {
		font-size: 12px;
	}

	.w-note {
		padding: 12px 14px;
		margin: 8px 0 20px;
		border-left-width: 3px;
	}

	.w-note p {
		font-size: 13px;
		line-height: 1.8;
	}

	.w-detail-url {
		padding: 12px;
	}

	.w-detail-url p {
		font-size: 12px;
	}

	.w-detail-url a {
		font-size: 14px;
	}
}

@media (max-width: 575px) {
	.w-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}