/* =====================================================================
   文件位置：/template/ranyu/css/content.css
   用途：新闻 / 录像 / 集锦 / 球员 内容页与列表页样式增量
   引入顺序：index.css → page.css → content.css
   ===================================================================== */

/* ---------- 1. 新闻列表 ---------- */
.ry-nlist{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ry-nlist-item{min-width:0}
.ry-nlist-item .ry-card{height:100%}
.ry-art-sub{margin-top:14px;color:var(--ry-mut);font-size:16px;line-height:1.8}

/* ---------- 2. 文章正文布局（正文 + 目录） ---------- */
.ry-art-layout{display:grid;grid-template-columns:1fr;gap:26px;position:relative}
.ry-art-layout.has-toc{grid-template-columns:1fr 200px}
.ry-toc{display:none}
.ry-art-layout.has-toc .ry-toc{display:block;position:sticky;top:100px;align-self:start;
  border-left:1px solid var(--ry-bd);padding-left:16px;max-height:70vh;overflow:auto}
.ry-toc-t{font-family:var(--ry-f-m);font-size:10px;letter-spacing:.2em;color:var(--ry-dim);margin-bottom:12px}
.ry-toc a{display:block;font-size:12.5px;color:var(--ry-mut);padding:6px 0 6px 10px;border-left:2px solid transparent;
  margin-left:-17px;line-height:1.5;transition:.2s}
.ry-toc a:hover{color:var(--ry-tx)}
.ry-toc a.on{color:var(--ry-lime);border-left-color:var(--ry-lime)}
.ry-toc a.lv3{padding-left:22px;font-size:12px;color:var(--ry-dim)}
.ry-art-body [id^="ry-h-"]{scroll-margin-top:96px}
/* 正文内图片灯箱 */
.ry-art-body img{cursor:zoom-in}
.ry-lightbox{position:fixed;inset:0;z-index:500;background:rgba(4,5,10,.94);display:none;
  align-items:center;justify-content:center;padding:32px;cursor:zoom-out}
.ry-lightbox.on{display:flex;animation:ryFade .25s}
.ry-lightbox img{max-width:100%;max-height:100%;border:1px solid var(--ry-bd2)}

/* ---------- 3. 顶踩 / 分享 / 作者 ---------- */
.ry-digg{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:32px 0 20px;
  padding:20px;border:1px solid var(--ry-bd);background:linear-gradient(120deg,#0F121A,#0A0C12)}
.ry-digg-btn{display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border:1px solid var(--ry-bd2);
  background:#0A0C12;cursor:pointer;font-size:13px;font-weight:700;color:var(--ry-mut);
  clip-path:var(--ry-cut-s);transition:.25s var(--ry-ease)}
.ry-digg-btn:hover{transform:translateY(-2px);color:var(--ry-tx);border-color:var(--ry-lime)}
.ry-digg-btn b{font-family:var(--ry-f-d);font-size:19px;color:var(--ry-lime);line-height:1}
.ry-digg-btn.on{background:var(--ry-lime);border-color:var(--ry-lime);color:#0A0C06}
.ry-digg-btn.on b{color:#0A0C06}
.ry-digg-btn.down:hover{border-color:var(--ry-flame);color:var(--ry-flame)}
.ry-digg-btn.down b{color:var(--ry-flame)}
.ry-digg .ry-shares{margin:0 0 0 auto}
.ry-tagbar{padding:18px 0;border-top:1px solid var(--ry-bd);border-bottom:1px solid var(--ry-bd);
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ry-tagbar .ry-kicker{margin:0}
.ry-author{display:flex;align-items:center;gap:16px;padding:20px;margin:24px 0;
  border:1px solid var(--ry-bd);background:linear-gradient(120deg,rgba(201,255,61,.05),#0A0C12)}
.ry-author .ry-av{width:52px;height:52px;font-size:19px;flex-shrink:0}
.ry-author-b{flex:1;min-width:0}
.ry-author-b h4{font-size:15.5px;font-weight:900}
.ry-author-b p{font-family:var(--ry-f-m);font-size:11px;color:var(--ry-dim);margin-top:5px;line-height:1.7}
.ry-comment{margin-top:44px;padding-top:10px;border-top:1px solid var(--ry-bd)}
/* 帝国CMS 默认评论样式适配 */
.ry-comment table,.ry-comment form{width:100%}
.ry-comment input[type=text],.ry-comment textarea{width:100%;background:#080A0F;border:1px solid var(--ry-bd2);
  padding:11px 13px;outline:0;font-size:13.5px;font-family:var(--ry-f-b);margin-bottom:10px}
.ry-comment input:focus,.ry-comment textarea:focus{border-color:var(--ry-lime)}
.ry-comment input[type=submit],.ry-comment button{background:var(--ry-lime);border:0;color:#0A0C06;
  font-weight:900;padding:11px 24px;cursor:pointer;clip-path:var(--ry-cut-s);transition:.25s}
.ry-comment input[type=submit]:hover{box-shadow:0 8px 26px rgba(201,255,61,.28)}
.ry-comment a{color:var(--ry-lime)}

/* ---------- 4. 视频列表网格 ---------- */
.ry-vlist{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ry-vlist .ry-card{height:100%}
/* 头牌集锦 */
.ry-feature{position:relative;display:block;overflow:hidden;border:1px solid var(--ry-bd2);min-height:340px;
  transition:.4s var(--ry-ease)}
.ry-feature:hover{border-color:rgba(201,255,61,.5);transform:translateY(-4px)}
.ry-feature-ph{position:absolute;inset:0}
.ry-feature-ph img,.ry-feature-ph i{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ry-ease)}
.ry-feature:hover .ry-feature-ph img{transform:scale(1.05)}
.ry-feature-ov{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,6,10,.96) 6%,rgba(5,6,10,.5) 50%,rgba(5,6,10,.2))}
.ry-feature-b{position:relative;z-index:2;padding:30px;max-width:760px;margin-top:auto;
  display:flex;flex-direction:column;gap:12px;height:100%;justify-content:flex-end}
.ry-feature-b h2{font-size:clamp(22px,3.4vw,38px);font-weight:900;line-height:1.25;margin-top:6px}
.ry-feature:hover .ry-feature-b h2{color:var(--ry-lime)}
.ry-feature-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-family:var(--ry-f-m);
  font-size:11px;color:var(--ry-dim);letter-spacing:.08em;margin-top:6px}
.ry-feature-go{color:var(--ry-lime);font-weight:700;margin-left:auto}
.ry-feature .ry-playb{z-index:1}

/* ---------- 5. 播放页信息头 ---------- */
.ry-vhead{padding:22px 0 18px;border-bottom:1px solid var(--ry-bd)}
.ry-vhead-tt{font-size:clamp(20px,2.8vw,29px);font-weight:900;line-height:1.35}
.ry-vhead-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:14px;
  font-family:var(--ry-f-m);font-size:11.5px;color:var(--ry-dim)}
.ry-vhead-act{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap}
.ry-chap{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--ry-bd);
  background:#0A0C12;margin-bottom:8px;cursor:pointer;transition:.25s}
.ry-chap:hover,.ry-chap.on{border-color:var(--ry-lime);background:rgba(201,255,61,.06)}
.ry-chap time{font-family:var(--ry-f-m);font-size:11.5px;color:var(--ry-lime);width:56px;flex-shrink:0}
.ry-chap span{font-size:13.5px;font-weight:700}

/* ---------- 6. 球员列表 / 内容页 ---------- */
.ry-plrgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ry-plrcard-grid{height:100%}
.ry-plrcard-tm{display:inline-block;margin-top:8px;font-size:10.5px;color:var(--ry-lime);
  border:1px solid rgba(201,255,61,.28);padding:2px 9px}
.ry-plrhero{position:relative;overflow:hidden;border-bottom:1px solid var(--ry-bd);background:#07080C}
.ry-plrhero-art{position:absolute;inset:0;z-index:0;opacity:.34}
.ry-plrhero-art svg{width:100%;height:100%}
.ry-plrhero-ov{position:absolute;inset:0;z-index:1;background:linear-gradient(0deg,#07080C 3%,rgba(7,8,12,.7) 48%,rgba(7,8,12,.28))}
.ry-plrhero-in{position:relative;z-index:2;padding:48px 26px;display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.ry-plrhero-pic{position:relative;width:150px;height:150px;flex-shrink:0;border:1px solid var(--ry-bd2);
  background:rgba(8,10,15,.75);overflow:hidden;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.ry-plrhero-pic img{width:100%;height:100%;object-fit:cover}
.ry-plrhero-pic i{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--ry-lime),#0A0C12);opacity:.45}
.ry-plrhero-num{position:absolute;right:2px;bottom:6px;font-family:var(--ry-f-d);font-size:34px;color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.9);font-style:normal;line-height:1}
.ry-plrhero-txt{flex:1;min-width:270px}
.ry-plrhero-team{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:7px 14px 7px 8px;
  border:1px solid var(--ry-bd2);background:rgba(10,12,18,.7);font-size:13px;color:var(--ry-mut);transition:.25s}
.ry-plrhero-team:hover{border-color:var(--ry-lime);color:var(--ry-tx)}
.ry-plrhero-team img{width:26px;height:26px;object-fit:contain}
.ry-plrhero-team b{color:var(--ry-lime);font-weight:700}
.ry-plrhero-act{display:flex;gap:10px;margin-top:20px;flex-wrap:wrap}
.ry-plrhero-stats{margin:0;flex-shrink:0}
/* 档案卡 */
.ry-cardface{text-align:center}
.ry-cardface-pic{width:96px;height:96px;margin:6px auto 14px;border:1px solid var(--ry-bd2);overflow:hidden;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:#0A0C12}
.ry-cardface-pic img{width:100%;height:100%;object-fit:cover}
.ry-cardface-pic i{display:block;width:100%;height:100%;background:linear-gradient(135deg,var(--ry-lime),#0A0C12);opacity:.5}
.ry-cardface-nm{display:flex;align-items:baseline;justify-content:center;gap:10px}
.ry-cardface-nm b{font-size:20px;font-weight:900}
.ry-cardface-nm em{font-style:normal;font-family:var(--ry-f-d);font-size:26px;color:var(--ry-lime);line-height:1}
.ry-cardface-row{display:flex;gap:1px;margin-top:18px;background:var(--ry-bd);border:1px solid var(--ry-bd)}
.ry-cardface-row span{flex:1;background:#0A0C12;padding:10px 4px}
.ry-cardface-row s{text-decoration:none;display:block;font-family:var(--ry-f-m);font-size:9.5px;color:var(--ry-dim);letter-spacing:.1em}
.ry-cardface-row b{display:block;font-size:13.5px;font-weight:700;margin-top:4px}

/* ---------- 7. 搜索结果页复用 ---------- */
.ry-search-hint{padding:14px 18px;border:1px solid var(--ry-bd);background:#0A0C12;
  font-family:var(--ry-f-m);font-size:12px;color:var(--ry-mut);margin-bottom:22px}
.ry-search-hint b{color:var(--ry-lime);font-family:var(--ry-f-d);font-size:19px}

/* ---------- 8. 响应式 ---------- */
@media(max-width:1280px){
  .ry-vlist{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:1180px){
  .ry-nlist{grid-template-columns:repeat(2,1fr)}
  .ry-plrgrid{grid-template-columns:repeat(3,1fr)}
  .ry-art-layout.has-toc{grid-template-columns:1fr}
  .ry-art-layout.has-toc .ry-toc{display:none}
}
@media(max-width:960px){
  .ry-vlist{grid-template-columns:repeat(2,1fr)}
  .ry-plrhero-pic{width:110px;height:110px}
  .ry-plrhero-in{padding:36px 16px;gap:18px}
}
@media(max-width:680px){
  .ry-nlist,.ry-vlist,.ry-plrgrid{grid-template-columns:1fr}
  .ry-feature{min-height:240px}
  .ry-feature-b{padding:20px}
  .ry-digg{padding:16px;gap:9px}
  .ry-digg .ry-shares{margin-left:0;width:100%}
  .ry-author{flex-wrap:wrap;padding:16px}
  .ry-plrhero-stats{width:100%}
  .ry-cardface-row{flex-wrap:wrap}
  .ry-cardface-row span{flex:1 1 32%}
  .ry-tagbar{flex-direction:column;align-items:flex-start;gap:10px}
  .ry-vhead-act{margin-left:0;width:100%}
}