@import url(common.css);

/* =====================================================================
   视频占位体系（.vid-ph）— 全站统一占位底 + grid；自 index L160-188 引入完整版
   （本页作品卡只用 .vid-ph__bg + .vid-ph__grid 两子元素；无播放钮/shimmer/is-playing）
   ===================================================================== */
.vid-ph {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--color-dark-ink);
}

.vid-ph__bg {
    position: absolute;
    inset: 0;
    background: var(--color-dark-blue);
    transition: transform .6s ease;
}

.vid-ph--ink .vid-ph__bg {
    background: var(--color-dark-ink);
}

.vid-ph--cool .vid-ph__bg {
    background: var(--color-brand-blue);
}

.vid-ph--deep .vid-ph__bg {
    background: var(--color-brand-blue-deep);
}

.vid-ph--warm .vid-ph__bg {
    background: var(--color-brand-yellow);
}

.vid-ph__grid {
    position: absolute;
    inset: 0;
    opacity: .10;
    background-image: linear-gradient(rgba(255, 255, 255, .6) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .6) 1px, transparent 1px);
    background-size: 44px 44px;
}

.vid-ph__shimmer {
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, .18), transparent 60%);
    transition: opacity .4s ease;
}

.vid-ph.is-playing .vid-ph__shimmer {
    opacity: 1;
    animation: kenburns 9s ease-in-out infinite alternate;
}

.vid-ph.is-playing .vid-ph__bg {
    animation: kenburns 12s ease-in-out infinite alternate;
}

@keyframes kenburns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.08) translate(-2%, -2%);
    }
}

/* 播放钮：本页作品不用；保留样式以维持 .vid-ph 占位族完整 + 未来真图替换留口 */
.vid-ph__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-brand-yellow);
    display: grid;
    place-items: center;
    transform: translate(-50%, -50%);
    transition: transform .2s ease, background .2s ease;
    box-shadow: var(--shadow-card);
    z-index: 2;
}

.vid-ph__play svg {
    width: 20px;
    height: 20px;
    fill: var(--color-on-yellow);
    margin-left: 3px;
}

.vid-ph.is-playing .vid-ph__play {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.6);
}

.vid-ph--warm .vid-ph__play {
    background: var(--color-white);
}

.vid-ph--warm .vid-ph__play svg {
    fill: var(--color-ink);
}

.vid-ph__pill {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(10, 10, 10, .7);
    color: #fff;
    font-size: .6875rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    z-index: 3;
    letter-spacing: .02em;
}

.vid-ph__tag {
    position: absolute;
    bottom: 10px;
    left: 10px;
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .04em;
    z-index: 3;
    opacity: .9;
    background: rgba(10, 10, 10, .6);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
}



/* ---------- ② 分类筛选条 .tsecnav（pill 为筛选按钮 · 含计数角标 · 两级同条分簇） ---------- */
.tsecnav .container div.item{
    display: inline-flex;
    width: 50%;
    justify-content: center;
    border-bottom: 3px solid var(--color-white);
    
}
.tsecnav .container{
    gap: 0;
}
.tsecnav__pill{
    width: auto;
    /*border: 0px;*/
}
.tsecnav .container div.item:hover, .tsecnav .container div.is-active{
    border-bottom: 3px solid var(--color-brand-yellow);
}
.tsecnav .container div.is-active a.tsecnav__pill, .tsecnav .container div.item:hover .tsecnav__pill{
    color: var(--color-ink);
}
.tsecnav__pill:hover{
    /*border: 0px;*/
}
.tsecnav__pill.icon01 {
    background: url(../img/zpzs_icon01.png) no-repeat left center;
}

.tsecnav__pill.icon02 {
    background: url(../img/zpzs_icon02.png) no-repeat left center;
}


.tsecnav .container div.item:hover .tsecnav__pill.icon01 {
    background: url(../img/zpzs_icon01_h.png) no-repeat left center;
}

.tsecnav .container div.item:hover .tsecnav__pill.icon02 {
    background: url(../img/zpzs_icon02_h.png) no-repeat left center;
}

.tsecnav .container div.is-active .tsecnav__pill.icon01{
    background: url(../img/zpzs_icon01_h.png) no-repeat left center;
}

.tsecnav .container div.is-active .tsecnav__pill.icon02 {
    background: url(../img/zpzs_icon02_h.png) no-repeat left center;
}

/* ---------- ②′ 计数角标（pill 内 · 激活态反转为墨黑底黄字） ---------- */
.tsecnav__badge {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--color-bg-soft);
    color: var(--color-text-secondary);
    font-family: var(--font-number);
    font-weight: 800;
    font-size: .72rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: background .18s ease, color .18s ease;
}

.tsecnav__pill.is-active .tsecnav__badge {
    background: var(--color-ink);
    color: var(--color-brand-yellow);
}




/* =====================================================================
   作品展示二级页 · 页面级追加样式（仅结构/尺寸；颜色字体圆角阴影全引 :root 既有 var）
   类前缀：.wlist / .wgrid / .wcard（仿 .vlist/.vgrid 命名习惯）
   数值对照：.vlist 视频中心 L372-388 → .wlist 同名语义
   ===================================================================== */

/* ---------- ③ 作品网格区 .wlist（白底 · 容器 1200 由 .container 承当） ---------- */
.wlist {
    background: var(--color-white);
    padding-block: var(--space-4) var(--space-8);
}

/* 视频 .vlist L373 */
.wlist[id] {
    scroll-margin-top: 150px;
}

/* 避让吸顶 pill（≥1024 sticky top:64 + 自身高 → 锚点不被盖） */
@media(min-width:1024px) {
    .wlist {
        padding-block: var(--space-6) var(--space-9);
    }
}

/* 视频 .vlist L375 */
@media(max-width:1023px) {
    .wlist[id] {
        scroll-margin-top: 64px;
    }
}

/* 视频 .vlist L376（无吸顶时对齐 sitehead） */

/* 网格上方灰字占位注记（语义同 .vlist__note L379-380） */
.wlist__note {
    margin-bottom: var(--space-4);
    font-size: .75rem;
    line-height: 1.5;
    color: var(--color-text-tertiary);
    letter-spacing: .02em;
}

/* 空态：筛选无匹配时显示（JS .is-show；占位 36 件下任意组合均非空，保留体系完整性） */
.wlist__empty {
    display: none;
    margin: var(--space-4) auto var(--space-6);
    padding: var(--space-7) var(--space-5);
    text-align: center;
    color: var(--color-text-secondary);
    font-size: .9375rem;
    background: var(--color-bg-soft);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
}

.wlist__empty.is-show {
    display: block;
}

/* ---------- ④ 作品 4 列栅格 .wgrid（内容宽 1160 = .container 1200 - padding 20×2） ----------
   列数（用户拍板 §三）：<576 1 → ≥576 2 → ≥768 3 → ≥1024 4
   桌面单卡 ≈ (1160 − 3×gap16)/4 = 278px 宽 × 4/5 → ≈348px 高
   gap：移动 var(--space-3)=12 / ≥768 var(--space-4)=16（桌面 gap16 是 §三 4 列计算的基准值） */
.wgrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
    min-width: 0;
}

@media(min-width:576px) {
    .wgrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media(min-width:768px) {
    .wgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }
}

@media(min-width:1024px) {
    .wgrid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* ---------- 卡 .wcard —— 视觉继承首页 .work__item（index L982-989），数值逐条对齐 ---------- */
.wcard {
    position: relative;
    display: block;
    aspect-ratio: 4/5;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
    cursor: pointer;
    background: var(--color-white);
    transition: box-shadow .2s ease, transform .2s ease;
}

/* = .work__item L982-984 */
.wcard:hover {
    box-shadow: var(--shadow-float);
    transform: translateY(-3px);
}

/* = .work__item L985 */
.wcard .vid-ph__bg {
    transition: transform .4s ease;
}

/* = .work__item L986（index 现成封面动效） */
.wcard:hover .vid-ph__bg {
    transform: scale(1.04);
}

/* = .work__item L987 */
.wcard:focus-visible {
    outline: 3px solid rgba(30, 64, 175, .35);
    outline-offset: 2px;
}

/* focus 视觉沿用全站既有语言：.btn:focus-visible(index L154)/.vcard:focus-visible(视频 L398) 同一值 */

/* 底部渐变白字标题（语义沿 .work__label L988-989；卡更大 → 字号由 .65rem 适度提到 .75rem） */
.wcard__label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 10px 6px;
    background: linear-gradient(transparent, rgba(20, 30, 50, .78));
    color: #fff;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
}

/* 两级筛选分簇间隔（结构性类：仅占位宽，引用既有 var；无任何颜色/圆角/字体） */
.tsecnav__sep {
    flex: 0 0 var(--space-5);
}

/* 24px 分簇留白（=--space-5，结构性尺寸） */


@media(max-width:767px) {
    .tsecnav__sep {
        display: none;
    }
}

/* 新增样式 二级栏目 */
.wlist .tabTit{
	display: flex;
	justify-content: flex-start;
	position: relative;
    margin-bottom: 30px;
}
.wlist .tabTit li{
	border-bottom: 1px solid #9b9b9b;
	cursor: pointer;
}

.wlist .tabTit li.hover{
	font-size: 20px;
	font-family: var(--font-heading);
	color: #333333;
	border-top: 1px solid #9b9b9b;
	border-right: 1px solid #9b9b9b;
	border-left: 1px solid #9b9b9b;
	border-bottom: 0px;
}
.wlist .tabTit li a{
	display: block;
	font-size: 20px;
	color: #9b9b9b;
	line-height: 40px;
	padding: 0px 20px;
    font-family: var(--font-heading);
    font-weight: 600;
}
.wlist .tabTit li.hover a{
	color: #333333;
}
.wlist .tabTit li.hover:first-child{
	border-top: 1px solid #9b9b9b;
	border-right: 1px solid #9b9b9b;
	border-bottom: 0px;
	border-left: 0px;
}
.wlist .tabTit .line{
	border-bottom: 1px solid #9b9b9b;
}