/* =====================================================================
   短视频频道 · PC 版（模板 424__122 / video.html）
   配色沿用暮山：主色 #7D8471、深 #656B5C、背景 #F5F3EE、金 #D4A56A
   ===================================================================== */

.jv-body { background: #F5F3EE; }

.jv-page { padding: 18px 0 46px; background: #F5F3EE; }
.jv-wrap { width: 1200px; margin: 0 auto; }

.jv-crumb { font-size: 12.5px; color: #9aa093; margin-bottom: 12px; }
.jv-crumb a { color: #9aa093; }
.jv-crumb a:hover { color: #656B5C; }
.jv-crumb i { margin: 0 6px; font-style: normal; color: #c4c8bd; }
.jv-crumb span { color: #656B5C; }

/* ---------- 头部 ---------- */
.jv-hero {
	display: flex; align-items: flex-end; justify-content: space-between;
	padding: 22px 26px; border-radius: 18px; margin-bottom: 14px; color: #fff;
	background: linear-gradient(120deg, #656B5C 0%, #7D8471 52%, #8d9480 100%);
	box-shadow: 0 8px 22px rgba(101,107,92,.20);
}
.jv-hero-txt h1 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.4px; }
.jv-hero-txt p { margin: 8px 0 0; font-size: 13px; color: rgba(255,255,255,.82); }
.jv-hero-num { text-align: right; line-height: 1.1; }
.jv-hero-num b { display: block; font-size: 34px; font-weight: 800; font-variant-numeric: tabular-nums; }
.jv-hero-num span { font-size: 12px; color: rgba(255,255,255,.75); }

/* ---------- 分类 ---------- */
.jv-tabs { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.jv-tabs a {
	display: inline-flex; align-items: center; gap: 6px;
	height: 34px; padding: 0 16px; border-radius: 999px;
	background: #fff; border: 1px solid #E4E0D6; color: #656B5C;
	font-size: 13px; transition: all .16s;
}
.jv-tabs a:hover { border-color: #7D8471; color: #4b5145; }
.jv-tabs a.on { background: #7D8471; border-color: #7D8471; color: #fff; font-weight: 700; }
.jv-tabs a em { font-style: normal; font-size: 11.5px; opacity: .68; font-variant-numeric: tabular-nums; }

/* ---------- 双列网格 ---------- */
.jv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.jv-card {
	background: #fff; border-radius: 16px; overflow: hidden;
	border: 1px solid #ECE8DE; transition: box-shadow .2s, transform .2s, border-color .2s;
}
.jv-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(60,52,40,.13); border-color: #dcd8cb; }
.jv-card.on { border-color: #7D8471; box-shadow: 0 0 0 2px rgba(125,132,113,.35); }

.jv-cover {
	position: relative; display: block; width: 100%; padding-top: 56.25%;
	background: #2f332c center/cover no-repeat; cursor: pointer;
}
.jv-cover .jv-cover-img {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	transition: transform .35s;
}
.jv-card:hover .jv-cover-img { transform: scale(1.04); }

.jv-cover::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,22,18,0) 45%, rgba(20,22,18,.55) 100%);
	pointer-events: none;
}

.jv-play {
	position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
	border-radius: 50%; background: rgba(255,255,255,.9); z-index: 3;
	box-shadow: 0 6px 18px rgba(0,0,0,.3);
	transition: transform .2s, background .2s;
}
.jv-play:hover { transform: scale(1.08); background: #fff; }
.jv-play i {
	position: absolute; left: 21px; top: 17px; width: 0; height: 0;
	border-left: 15px solid #4b5145; border-top: 10px solid transparent; border-bottom: 10px solid transparent;
}

.jv-dur {
	position: absolute; right: 8px; bottom: 8px; z-index: 3;
	padding: 2px 6px; border-radius: 4px; background: rgba(20,22,18,.72);
	color: #fff; font-size: 11px; font-variant-numeric: tabular-nums;
}
.jv-badge {
	position: absolute; left: 10px; top: 10px; z-index: 3;
	padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff;
	backdrop-filter: blur(4px);
}
.jv-badge.s1 { background: rgba(45,122,68,.92); }
.jv-badge.s2 { background: rgba(152,107,24,.92); }
.jv-badge.s3 { background: rgba(60,110,150,.92); }
.jv-badge.s4 { background: rgba(148,71,57,.92); }
.jv-badge.s5 { background: rgba(125,132,113,.95); }

.jv-info { padding: 12px 14px 14px; }
.jv-title {
	display: block; font-size: 14.5px; line-height: 1.5; font-weight: 600; color: #2f332c;
	height: 43px; overflow: hidden; text-decoration: none;
}
.jv-title:hover { color: #4b5145; }
.jv-meta { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: #9aa093; }
.jv-meta .jv-meta-author { color: #656B5C; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.jv-meta .jv-meta-view { margin-left: auto; flex: none; }

/* ---------- 骨架 / 空态 ---------- */
.jv-skel { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.jv-sk { height: 320px; border-radius: 16px; background: linear-gradient(90deg,#EFEBE2 25%,#F6F3EC 37%,#EFEBE2 63%); background-size: 400% 100%; animation: jvShine 1.3s infinite; }
@keyframes jvShine { 0%{background-position:100% 0} 100%{background-position:0 0} }

.jv-empty { padding: 70px 0 60px; text-align: center; }
.jv-empty-i { width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 14px; border: 2px dashed #cdd0c4; }
.jv-empty p { margin: 0; font-size: 15px; color: #656B5C; font-weight: 600; }
.jv-empty span { display: block; margin-top: 6px; font-size: 12.5px; color: #9aa093; }

.jv-more { margin-top: 24px; text-align: center; }
.jv-more a {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 180px; height: 42px; padding: 0 24px; border-radius: 999px;
	border: 1px solid #d8d4c7; background: #fff; color: #656B5C; font-size: 13.5px;
}
.jv-more a:hover { border-color: #7D8471; color: #4b5145; }
.jv-more a.loading { color: #b5b9ad; border-color: #e8e4d9; }

.jv-note { margin-top: 22px; padding: 12px 16px; border-radius: 12px; background: rgba(255,255,255,.7); border: 1px solid #ECE8DE; }
.jv-note p { margin: 0; font-size: 12px; line-height: 1.7; color: #9aa093; }

/* ---------- 播放弹层 ---------- */
.jv-modal { position: fixed; inset: 0; z-index: 2000; }
.jv-modal-mask { position: absolute; inset: 0; background: rgba(20,22,18,.72); }
.jv-modal-box {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	width: 860px; max-width: 92vw; max-height: 88vh; overflow: auto;
	background: #fff; border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.jv-modal-x {
	position: absolute; right: 12px; top: 10px; z-index: 5; width: 30px; height: 30px;
	border-radius: 50%; background: rgba(20,22,18,.5); color: #fff; font-size: 17px;
	line-height: 30px; text-align: center; text-decoration: none;
}
.jv-modal-x:hover { background: rgba(20,22,18,.72); }
.jv-modal-player { background: #14160f; }
.jv-modal-player video { display: block; width: 100%; max-height: 66vh; background: #14160f; }
.jv-modal-info { padding: 16px 20px 20px; }
.jv-modal-info h3 { margin: 0; font-size: 17px; font-weight: 700; color: #2f332c; line-height: 1.4; }
.jv-modal-meta { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 12.5px; color: #9aa093; }
.jv-modal-meta .jv-src { padding: 2px 8px; border-radius: 999px; background: #EFEBE2; color: #656B5C; font-size: 11.5px; }
.jv-modal-meta a { margin-left: auto; color: #656B5C; font-weight: 600; }
.jv-modal-meta a:hover { text-decoration: underline; }