/* ═══════════════════════════════════════════════════════════
   剧种专题页 — juzhong.css
   V6 戏韵东方色彩体系 | 设计基准：1200px
   Desktop≥1024 / Tablet 768-1023 / Mobile<768
   最后更新：2026-07-08
   ═══════════════════════════════════════════════════════════ */

/* ═══ 声腔系主题色（Hero背景渐变用） ═══ */
:root{
    --sq-bangzi:#7A1524;--sq-bangzi-dark:#3D0C14;
    --sq-xiansuo:#1A4A6E;--sq-xiansuo-dark:#0D2A42;
    --sq-yangge:#3B6D11;--sq-yangge-dark:#1A3308;
    --sq-daoqing:#854F0B;--sq-daoqing-dark:#3D2406;
    --sq-other:#5F5E5A;--sq-other-dark:#2C2C2A;
}

/* ═══ HERO — 剧种主视觉 Banner ═══ */
.jz-hero{position:relative;overflow:hidden;color:#fff;padding:100px 0 72px}
.jz-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:4px;background:linear-gradient(90deg,transparent,var(--au),var(--aul),var(--au),transparent));z-index:4}
.jz-hero-deco-svg{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:340px;height:340px;opacity:0.06;fill:#fff;z-index:1}
.jz-hero .container{position:relative;z-index:3}
.jz-hero-inner{display:flex;align-items:center;gap:48px}
.jz-hero-text{flex:1;max-width:640px}
.jz-hero-tags{display:flex;gap:10px;align-items:center;margin-bottom:18px;flex-wrap:wrap}
.jz-hero-sq{font-size:13px;padding:4px 14px;border:1px solid rgba(255,255,255,0.3);border-radius:20px;letter-spacing:1px}
.jz-hero-region{font-size:13px;opacity:0.75;display:flex;align-items:center;gap:5px}
.jz-hero-region i{font-size:11px}
.jz-hero-title{font-family:Noto Serif SC,STSong,SimSun,serif;font-size:48px;font-weight:700;margin:0 0 18px;letter-spacing:3px;line-height:1.2}
.jz-hero-desc{font-size:15px;line-height:1.85;max-width:560px;opacity:0.88;margin:0 0 28px}
.jz-hero-btns{display:flex;gap:14px;flex-wrap:wrap}
.jz-hero-visual{flex:0 0 280px;display:flex;align-items:center;justify-content:center}
.jz-hero-badge{width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,0.06);border:2px solid rgba(255,255,255,0.12);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.jz-hero-badge .badge-label{font-size:12px;letter-spacing:4px;opacity:0.5}
.jz-hero-badge .badge-value{font-size:28px;font-weight:700;letter-spacing:2px}
.jz-hero-badge .badge-note{font-size:11px;opacity:0.4;letter-spacing:0.5px}

/* 声腔系 Hero 背景渐变 */
.jz-bg-bangzi{background:linear-gradient(160deg,var(--sq-bangzi-dark) 0%,var(--sq-bangzi) 55%,#5C1A24 100%)}
.jz-bg-xiansuo{background:linear-gradient(160deg,var(--sq-xiansuo-dark) 0%,var(--sq-xiansuo) 55%,#0D2A42 100%)}
.jz-bg-yangge{background:linear-gradient(160deg,var(--sq-yangge-dark) 0%,var(--sq-yangge) 55%,#1A3308 100%)}
.jz-bg-daoqing{background:linear-gradient(160deg,var(--sq-daoqing-dark) 0%,var(--sq-daoqing) 55%,#3D2406 100%)}
.jz-bg-other{background:linear-gradient(160deg,var(--sq-other-dark) 0%,var(--sq-other) 55%,#2C2C2A 100%)}

/* ═══ 概况信息栏 ═══ */
.jz-info-bar{background:var(--bg-warm);padding:28px 0;border-bottom:1px solid rgba(0,0,0,0.04)}
.jz-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(0,0,0,0.05);border-radius:var(--r-lg);overflow:hidden}
.jz-info-item{background:var(--bg-warm);padding:18px 12px;text-align:center;transition:background var(--t)}
.jz-info-item:hover{background:#FFF8E8}
.jz-info-label{font-size:11.5px;color:var(--ink-light);margin-bottom:8px;letter-spacing:1px}
.jz-info-value{font-size:17px;font-weight:600;color:var(--ink-mid)}
.jz-info-value.highlight{color:var(--cr);font-weight:700}

/* ═══ 板块通用 ═══ */
.jz-section{padding:52px 0}
.jz-section.jz-bg-warm{background:var(--bg-warm)}
.jz-section.jz-bg-soft{background:var(--bg-c)}
.jz-section.jz-bg-dark{background:var(--ink);color:#fff}
.jz-empty{grid-column:1/-1;text-align:center;padding:48px 0;font-size:14px;color:var(--ink-light)}
.jz-empty i{font-size:36px;color:var(--ink-light);margin-bottom:12px;opacity:0.4}
/*   sec-head 已在 public.css 定义，这里只覆写间距 */
.jz-sec-head{margin-bottom:28px}

/* ═══ 百科知识 — 文章卡片网格 2列 ═══ */
.jz-baike-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.jz-baike-card{display:flex;flex-direction:column;background:#fff;border-radius:12px;padding:28px;border:1px solid rgba(0,0,0,0.06);transition:all var(--t);position:relative;overflow:hidden}
.jz-baike-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cr);opacity:0;transition:opacity var(--t);border-radius:0 2px 2px 0}
.jz-baike-card:hover{box-shadow:0 6px 28px rgba(0,0,0,0.1);transform:translateY(-3px)}
.jz-baike-card:hover::before{opacity:1}
.jz-bc-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.jz-bc-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.jz-bc-dot.dot-cr{background:var(--cr)}
.jz-bc-dot.dot-au{background:var(--au)}
.jz-bc-dot.dot-blue{background:var(--blue)}
.jz-bc-dot.dot-plum{background:var(--plum)}
.jz-bc-dot.dot-green{background:var(--green)}
.jz-bc-tag{font-size:11px;padding:2px 10px;border-radius:3px;background:var(--bg-b);color:var(--au-deep);letter-spacing:0.5px}
.jz-bc-title{font-size:17px;font-weight:600;color:var(--ink);margin:0 0 10px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jz-baike-card:hover .jz-bc-title{color:var(--cr)}
.jz-bc-summary{font-size:13px;line-height:1.75;color:var(--ink-soft);margin:0 0 16px;flex:1;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.jz-bc-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(0,0,0,0.05);padding-top:14px;margin-top:auto}
.jz-bc-date{font-size:12px;color:var(--ink-light)}
.jz-bc-link{font-size:12.5px;color:var(--au);font-weight:500;display:flex;align-items:center;gap:4px;transition:gap var(--t)}
.jz-baike-card:hover .jz-bc-link{gap:8px}

/* ═══ 视听精选 — 视频卡片网格 4列 ═══ */
.jz-video-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.jz-video-card{display:block;border-radius:10px;overflow:hidden;background:#fff;border:1px solid rgba(0,0,0,0.06);transition:all var(--t)}
.jz-video-card:hover{box-shadow:0 6px 24px rgba(0,0,0,0.12);transform:translateY(-3px)}
.jz-vc-thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(135deg,#2A1215,#3D0C14);display:flex;align-items:center;justify-content:center}
.jz-vc-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.jz-vc-thumb .fa-play-circle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40px;color:rgba(255,255,255,0.88);z-index:2;transition:all var(--t);filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4))}
.jz-video-card:hover .fa-play-circle{transform:translate(-50%,-50%) scale(1.15);color:#fff}
.jz-vc-thumb-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.15);z-index:1;transition:opacity var(--t)}
.jz-video-card:hover .jz-vc-thumb-overlay{opacity:0}
.jz-vc-tag{position:absolute;top:8px;right:8px;font-size:10px;padding:3px 8px;border-radius:3px;background:rgba(0,0,0,0.6);color:#fff;z-index:3;letter-spacing:0.5px}
.jz-vc-info{padding:12px 14px}
.jz-vc-title{font-size:13.5px;line-height:1.5;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color var(--t)}
.jz-video-card:hover .jz-vc-title{color:var(--cr)}

/* ═══ 名家介绍 — 人物卡片网格 5列 ═══ */
.jz-artist-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.jz-artist-card{text-align:center;transition:transform var(--t)}
.jz-artist-card:hover{transform:translateY(-4px)}
.jz-ac-avatar{aspect-ratio:3/4;border-radius:12px;overflow:hidden;margin-bottom:12px;position:relative;background:linear-gradient(135deg,var(--sq-bangzi-dark),var(--sq-bangzi));display:flex;align-items:center;justify-content:center}
.jz-ac-avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.jz-ac-avatar .fa-user{font-size:36px;color:rgba(255,255,255,0.35);z-index:1}
.jz-ac-avatar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(0,0,0,0.35),transparent);z-index:2;opacity:0;transition:opacity var(--t)}
.jz-artist-card:hover .jz-ac-avatar::after{opacity:1}
.jz-ac-name{font-size:15px;font-weight:600;color:var(--ink);transition:color var(--t);margin-bottom:4px}
.jz-artist-card:hover .jz-ac-name{color:var(--cr)}
.jz-ac-sub{font-size:12px;color:var(--ink-light);line-height:1.4}

/* ═══ 梨园动态 — 资讯列表 ═══ */
.jz-news-list{display:flex;flex-direction:column}
.jz-news-item{display:flex;align-items:center;gap:16px;padding:15px 0;border-bottom:1px dashed rgba(0,0,0,0.07);transition:all var(--t);text-decoration:none}
.jz-news-item:last-child{border-bottom:none}
.jz-news-item:hover{padding-left:8px;background:rgba(0,0,0,0.01)}
.jz-news-item:hover .jz-news-title{color:var(--au)}
.jz-news-date{font-size:13px;color:var(--ink-light);white-space:nowrap;flex-shrink:0;width:64px;font-variant-numeric:tabular-nums}
.jz-news-title{font-size:15px;color:var(--ink);flex:1;transition:color var(--t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jz-news-arrow{color:var(--ink-light);font-size:13px;flex-shrink:0;opacity:0;transform:translateX(-4px);transition:all var(--t)}
.jz-news-item:hover .jz-news-arrow{opacity:1;transform:translateX(0)}

/* ═══ 演出公告列表 ═══ */
.jz-perform-list{display:flex;flex-direction:column}
.jz-perform-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px dashed rgba(0,0,0,0.07);transition:all var(--t);text-decoration:none}
.jz-perform-item:last-child{border-bottom:none}
.jz-perform-item:hover{padding-left:8px;background:rgba(0,0,0,0.01)}
.jz-perform-item:hover .jz-perform-title{color:var(--cr)}
.jz-perform-date{font-size:13px;color:var(--ink-light);white-space:nowrap;flex-shrink:0;width:64px;font-variant-numeric:tabular-nums}
.jz-perform-venue{font-size:11.5px;color:var(--au-deep);white-space:nowrap;flex-shrink:0;padding:3px 12px;background:rgba(184,134,11,0.08);border-radius:12px;border:1px solid rgba(184,134,11,0.12);letter-spacing:0.5px}
.jz-perform-title{font-size:15px;color:var(--ink);flex:1;transition:color var(--t);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jz-perform-arrow{color:var(--ink-light);font-size:13px;flex-shrink:0;opacity:0;transform:translateX(-4px);transition:all var(--t)}
.jz-perform-item:hover .jz-perform-arrow{opacity:1;transform:translateX(0)}

/* ═══ 相关剧种 — 同声腔系导航 ═══ */
.jz-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.jz-related-card{display:block;background:rgba(255,255,255,0.04);border-radius:12px;padding:24px;border:1px solid rgba(255,255,255,0.08);transition:all var(--t)}
.jz-related-card:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2);transform:translateY(-2px)}
.jz-rc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.jz-rc-name{font-size:18px;font-weight:600;color:#fff}
.jz-rc-desc{font-size:13px;line-height:1.65;color:rgba(255,255,255,0.55);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ═══ seal badge — 比 public.css 的 .seal 略大（Hero用） ═══ */
.jz-seal{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:3px;font-size:12px;font-weight:700;color:#fff;flex-shrink:0;line-height:1}
/*   .seal-n / .seal-p 颜色已在 public.css 定义，这里不再重复 */

/* ═══ BUTTONS — Hero 深色底专用 ═══ */
.jz-btn-primary,.jz-btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:var(--r);font-size:14px;font-weight:600;transition:all var(--t);cursor:pointer}
.jz-btn-primary{background:rgba(255,255,255,0.92);color:#3D0C14;border:none}
.jz-btn-primary:hover{background:#fff;color:var(--sq-bangzi);box-shadow:0 4px 20px rgba(0,0,0,0.25)}
.jz-btn-ghost{border:1.5px solid rgba(255,255,255,0.45);color:#fff;background:transparent}
.jz-btn-ghost:hover{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.7)}

/* ════════════════════════════════════════════
   RESPONSIVE — Desktop≥1024 / Tablet 768-1023 / Mobile<768
   ════════════════════════════════════════════ */

/* --- Tablet: 768-1023 --- */
@media(max-width:1023px){
    .jz-hero{padding:90px 0 56px}
    .jz-hero-inner{flex-direction:column;gap:32px}
    .jz-hero-text{max-width:100%}
    .jz-hero-title{font-size:36px}
    .jz-hero-visual{display:none}
    .jz-hero-deco-svg{width:240px;height:240px;right:-40px;opacity:0.04}
    .jz-info-grid{grid-template-columns:repeat(2,1fr)}
    .jz-baike-grid{grid-template-columns:1fr 1fr;gap:14px}
    .jz-baike-card{padding:22px}
    .jz-video-grid{grid-template-columns:repeat(3,1fr);gap:14px}
    .jz-artist-grid{grid-template-columns:repeat(4,1fr);gap:16px}
    .jz-related-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    .jz-news-date{width:52px;font-size:12px}
    .jz-news-title{font-size:14px}
    .jz-perform-date{width:52px;font-size:12px}
    .jz-perform-title{font-size:14px}
}

/* --- Mobile: <768 --- */
@media(max-width:767px){
    .jz-hero{padding:80px 0 44px}
    .jz-hero-title{font-size:30px;letter-spacing:2px;line-height:1.3}
    .jz-hero-desc{font-size:13.5px;line-height:1.7}
    .jz-hero-btns{flex-direction:column;gap:10px}
    .jz-hero-btns .jz-btn-primary,.jz-hero-btns .jz-btn-ghost{width:100%;justify-content:center}
    .jz-hero-deco-svg{width:180px;height:180px;right:-30px;opacity:0.03}
    .jz-info-grid{grid-template-columns:repeat(2,1fr)}
    .jz-info-value{font-size:15px}
    .jz-baike-grid{grid-template-columns:1fr;gap:12px}
    .jz-baike-card{padding:20px}
    .jz-bc-title{font-size:15px}
    .jz-video-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .jz-vc-title{font-size:12.5px}
    .jz-artist-grid{grid-template-columns:repeat(2,1fr);gap:14px}
    .jz-related-grid{grid-template-columns:1fr;gap:12px}
    .jz-news-item{gap:12px;padding:12px 0}
    .jz-news-date{width:48px;font-size:11px}
    .jz-news-title{font-size:13.5px}
    .jz-perform-item{gap:10px;padding:12px 0;flex-wrap:wrap}
    .jz-perform-date{width:48px;font-size:11px}
    .jz-perform-venue{font-size:10.5px;padding:2px 8px}
    .jz-perform-title{font-size:13.5px;flex-basis:100%}
    .jz-section{padding:36px 0}
    .jz-sec-head{margin-bottom:20px}
    .sec-head .sh-cn{font-size:16px}
}

/* --- Small Mobile: <480 --- */
@media(max-width:480px){
    .jz-hero{padding:72px 0 36px}
    .jz-hero-title{font-size:26px}
    .jz-hero-sq{font-size:11px;padding:3px 10px}
    .jz-video-grid{grid-template-columns:repeat(2,1fr);gap:10px}
    .jz-artist-grid{grid-template-columns:repeat(2,1fr);gap:12px}
    .jz-ac-name{font-size:13px}
}