/* ============================================================
   index.css — 首页·杂志编辑式（版式C）
   含：封面混排 / 同城横滚 / 类型列表 / 时间线 / 三联价 / 田字问答 / 城市索引
   依赖 style.css 的变量
   ============================================================ */

/* ===== 模块通用 ===== */
.zcmod{padding:52px 0 6px}
.zc-hd{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-bottom:26px}
.zc-t{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:3px}
.zc-t a{color:var(--txt)}
.zc-t a:hover{color:var(--gold)}
.zc-cap{font-size:12px;color:var(--txt-dim);letter-spacing:2px;margin-top:5px}
.zc-more{font-size:13px;color:var(--txt-mute);border:1px solid var(--line-soft);padding:5px 18px;letter-spacing:2px}
.zc-more:hover{color:var(--gold);border-color:var(--gold)}
.zc-rank{font-size:11px;color:var(--gold);letter-spacing:4px;margin-bottom:7px}

/* ===== 公共小标签（tag直链） ===== */
.qa-tg{display:inline-block;font-size:12px;color:var(--gold);border:1px solid var(--line);padding:1px 11px;letter-spacing:1px;background:rgba(14,16,20,.55)}
.qa-tg:hover{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ===== 模块一 · 封面混排（一大四中） ===== */
.fm-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:24px}
.fm-big{position:relative;overflow:hidden;border:1px solid var(--line-soft)}
.fm-fig{aspect-ratio:4/3;overflow:hidden}
.fm-fig img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform .6s,filter .6s}
.fm-big:hover .fm-fig img{transform:scale(1.05);filter:saturate(1.05)}
.fm-bd{position:absolute;left:0;right:0;bottom:0;padding:30px 26px 20px;background:linear-gradient(transparent,rgba(8,9,12,.93))}
.fm-nm{font-family:var(--serif);font-size:26px;font-weight:700;letter-spacing:2px}
.fm-nm a{color:var(--txt)}
.fm-nm a:hover{color:var(--gold-2)}
.fm-kw{display:flex;gap:8px;margin-top:10px}
.fm-attr{color:#cfcabd;font-size:12.5px;margin-top:9px;letter-spacing:.5px}
.fm-side{display:grid;grid-template-rows:repeat(4,1fr);gap:12px}
.fm-md{display:grid;grid-template-columns:132px 1fr;background:var(--ink-2);border:1px solid var(--line-soft);overflow:hidden;transition:border-color .3s}
.fm-md:hover{border-color:var(--line)}
.fm-mdf{width:132px;overflow:hidden}
.fm-mdf img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform .5s}
.fm-md:hover .fm-mdf img{transform:scale(1.06)}
.fm-mbd{padding:13px 15px;min-width:0}
.fm-mnm{font-family:var(--serif);font-size:16.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-mnm a{color:var(--txt)}
.fm-mnm a:hover{color:var(--gold)}
.fm-mkw{display:flex;gap:6px;margin:7px 0 5px}
.fm-mkw .qa-tg{font-size:11px;padding:0 8px}
.fm-mattr{font-size:11.5px;color:var(--txt-mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-attr .as,.fm-mattr .as{color:var(--txt-dim);margin:0 4px}

/* ===== 模块二 · 同城模特卡（杂志卡 A1） ===== */
.mk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.mk-card{position:relative;background:var(--ink-2);border:1px solid var(--line-soft);overflow:hidden;transition:border-color .35s,transform .35s}
.mk-card:hover{border-color:var(--gold);transform:translateY(-4px)}
.mk-fig{position:relative;aspect-ratio:3/4;overflow:hidden}
.mk-figlnk{display:block;position:absolute;inset:0;z-index:0;overflow:hidden}
.mk-figlnk img{width:100%;height:100%;object-fit:cover;filter:saturate(.92);transition:transform .6s,filter .6s}
.mk-card:hover .mk-figlnk img{transform:scale(1.06);filter:saturate(1.05)}
.mk-type{display:inline-block;position:absolute;top:12px;left:12px;z-index:2;font-family:var(--serif);font-size:11px;color:var(--gold);letter-spacing:2px;border:1px solid var(--line);background:rgba(14,16,20,.7);padding:3px 10px;backdrop-filter:blur(4px)}
.mk-bd{padding:16px 16px 18px}
.mk-city{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:3px;margin-bottom:4px;color:var(--gold)}
.mk-tt{font-size:13px;color:var(--txt);line-height:1.6;letter-spacing:.3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:42px;margin-bottom:14px}
.mk-tt a{color:inherit}
.mk-tt a:hover{color:var(--gold)}
.mk-attr{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding-top:12px;border-top:1px solid var(--line-soft);font-size:12px}
.mk-attr dt{color:var(--txt-dim);letter-spacing:1px}
.mk-attr dd{color:var(--txt-mute);font-family:var(--serif);text-align:right}
.mk-price{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-soft);display:flex;align-items:center;justify-content:space-between}
.mk-style{font-size:11.5px;color:var(--txt-mute);letter-spacing:1px}
.mk-style::before{content:"◆";color:var(--gold);font-size:8px;margin-right:6px;vertical-align:2px}
.mk-price-tag{font-family:var(--serif);font-size:13px;color:var(--gold);font-weight:600;letter-spacing:1px}

/* ===== 模块三 · 类型编辑列表 ===== */
.lx-ls{border-top:1px solid var(--line-soft)}
.lx-li{display:grid;grid-template-columns:58px 1fr auto;gap:20px;align-items:center;padding:17px 8px;border-bottom:1px solid var(--line-soft);transition:background .25s}
.lx-li:hover{background:var(--gold-soft)}
.lx-idx{font-family:var(--serif);color:var(--gold);font-size:17px;opacity:.65;text-align:center;border-right:1px solid var(--line-soft);line-height:1.3}
.lx-nm{font-family:var(--serif);font-size:18px;font-weight:600;letter-spacing:1px}
.lx-nm a{color:var(--txt)}
.lx-nm a:hover{color:var(--gold)}
.lx-ds{font-size:12.5px;color:var(--txt-dim);margin-top:3px}
.lx-pc{font-size:12.5px;color:var(--gold-2);letter-spacing:1px;flex:none}

/* ===== 模块四 · 资讯时间线 ===== */
.zx-tl{position:relative;padding-left:28px}
.zx-tl::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--gold),transparent)}
.zx-li{position:relative;padding:11px 0 15px;border-bottom:1px dashed var(--line-soft)}
.zx-li:last-child{border-bottom:none}
.zx-li::before{content:"";position:absolute;left:-27px;top:22px;width:7px;height:7px;border-radius:50%;background:var(--bg);border:1px solid var(--gold)}
.zx-lt{font-family:var(--serif);font-size:17px;font-weight:600;line-height:1.5}
.zx-lt a{color:var(--txt)}
.zx-lt a:hover{color:var(--gold)}
.zx-mt{font-size:12px;color:var(--txt-dim);margin-top:5px}
.zx-mt .qa-tg{margin-left:9px}

/* ===== 模块五 · 价格三联 ===== */
.jg-jy{font-size:13.5px;color:var(--txt-mute);line-height:1.95;margin-bottom:24px;padding-left:14px;border-left:2px solid var(--gold)}
.jg-band{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-soft)}
.jg-cd{padding:26px 22px;border-right:1px solid var(--line-soft);text-align:center;background:var(--ink-2)}
.jg-cd:last-child{border-right:none}
.jg-ch{font-size:12px;letter-spacing:4px;color:var(--txt-dim)}
.jg-cp{font-family:var(--serif);font-size:24px;color:var(--gold);margin:9px 0 6px;font-weight:700;letter-spacing:2px}
.jg-ds{font-size:12.5px;color:var(--txt-mute)}
.jg-link{display:inline-block;margin-top:14px;font-size:13px;color:var(--gold);letter-spacing:2px;border-bottom:1px solid var(--line)}
.jg-link:hover{color:var(--gold-2);border-color:var(--gold)}
.jg-note{margin-top:18px;font-size:12.5px;color:var(--txt-dim);text-align:center;letter-spacing:1px}
.jg-note a{color:var(--gold)}

/* ===== 模块六 · 问答田字格 ===== */
.wd-gd{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid var(--line-soft);border-left:1px solid var(--line-soft)}
.wd-it{padding:24px 26px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:var(--ink-2)}
.wd-q{font-family:var(--serif);font-size:16.5px;font-weight:600;line-height:1.6;letter-spacing:.5px}
.wd-q::before{content:"问";font-size:11px;color:var(--gold);border:1px solid var(--line);padding:0 7px;margin-right:9px;vertical-align:2px;letter-spacing:1px}
.wd-q a{color:var(--txt)}
.wd-q a:hover{color:var(--gold)}
.wd-a{font-size:13px;color:var(--txt-mute);margin-top:10px;line-height:1.8}

/* ===== 全站索引 · 城市标签墙 ===== */
.csy-pg{border:1px solid var(--line-soft);background:var(--ink-2)}
.csy-cap{font-family:var(--serif);font-size:17px;font-weight:700;letter-spacing:4px;color:var(--gold);padding:15px 24px;border-bottom:1px solid var(--line-soft)}
.csy-bd{padding:20px 24px}
.tw-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.tw-row:last-child{margin-bottom:0}
.tw-lb{flex:none;font-size:12.5px;color:var(--txt-dim);letter-spacing:3px;border-right:1px solid var(--line-soft);padding-right:14px;margin-right:4px}
.tw-a{font-size:13px;color:var(--txt-mute);border:1px solid var(--line-soft);padding:2px 14px;transition:all .2s}
.tw-a:hover{color:var(--ink);background:var(--gold);border-color:var(--gold)}

/* ===== 首页响应式 ===== */
@media(max-width:960px){
  .fm-grid{grid-template-columns:1fr}
  .fm-side{grid-template-rows:none;grid-template-columns:1fr;gap:12px}
  .jg-band{grid-template-columns:1fr}
  .jg-cd{border-right:none;border-bottom:1px solid var(--line-soft)}
  .jg-cd:last-child{border-bottom:none}
  .wd-gd{grid-template-columns:1fr}
  .zc-t{font-size:22px}
  .mk-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .zcmod{padding:38px 0 4px}
  .zc-hd{grid-template-columns:1fr;gap:10px}
  .zc-more{display:none}
  .fm-side{grid-template-columns:1fr}
  .fm-md{grid-template-columns:104px 1fr}
  .fm-mdf{width:104px}
  .lx-li{grid-template-columns:38px 1fr;gap:12px}
  .lx-pc{display:none}
  .fm-nm{font-size:21px}
  .tw-lb{letter-spacing:2px}
}