@charset "UTF-8";
/* ==========================================================================
   首页专属样式 —— index.html
   依赖 common.css（须先引入）
   ========================================================================== */

/* ===== ① 焦点区:头条 + 最热榜 ===== */
.top{padding:24px 0 26px;border-bottom:1px solid var(--line)}
.top .wrap{display:grid;grid-template-columns:1.7fr 1fr;gap:30px;align-items:start}
.lead a.main{display:block;position:relative;border-radius:13px;overflow:hidden}
.lead .thumb{aspect-ratio:16/8.6;border-radius:13px}
.lead .ov{position:absolute;left:0;right:0;bottom:0;padding:56px 22px 18px;background:linear-gradient(transparent,rgba(15,33,29,.9));color:#fff}
.lead .ov .tb{margin-bottom:9px}
.lead .ov h1{font-family:var(--serif);font-weight:900;font-size:clamp(21px,2.5vw,29px);line-height:1.4;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.lead a.main:hover h1{text-decoration:underline;text-decoration-color:var(--spot);text-decoration-thickness:3px;text-underline-offset:5px}
.sub2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.sub2 a{display:flex;gap:12px;align-items:flex-start}
.sub2 .thumb{width:120px;aspect-ratio:16/10.5;flex:none;border-radius:9px;font-size:10px}
.sub2 h3{font-size:15px;font-weight:900;line-height:1.5}
.sub2 a:hover h3{text-decoration:underline;text-decoration-color:var(--spot);text-decoration-thickness:2.5px;text-underline-offset:4px}
.sub2 .m{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
/* 最热榜外框(榜单本体 .hotlist 在 common.css) */
.hotbox{border:1.5px solid var(--line);border-radius:13px;overflow:hidden}
.hotbox .sh{background:var(--ink);color:#fff;padding:10px 15px;display:flex;justify-content:space-between;align-items:baseline}
.hotbox .sh b{font-size:14.5px;letter-spacing:1px}
.hotbox .sh span{font-size:11px;color:#9FB3AC;letter-spacing:2px}

/* ===== ② 最新情报横条 ===== */
.ticker{border-bottom:1px solid var(--line);background:var(--mist)}
.ticker .wrap{display:flex;align-items:center;gap:16px;padding:10px 20px;overflow:hidden}
.ticker .tl{flex:none;background:var(--spot);color:#fff;font-weight:900;font-size:12.5px;letter-spacing:2px;padding:5px 12px;border-radius:7px}
.ticker ul{list-style:none;display:flex;gap:30px;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.ticker ul::-webkit-scrollbar{display:none}
.ticker a{font-size:13.5px;font-weight:700;color:var(--pine)}
.ticker a:hover{color:var(--spot-deep)}
.ticker a::before{content:"·";color:var(--spot);font-weight:900;margin-right:7px}

/* ===== ③ 分类区块 ===== */
.sec{padding:34px 0 6px}
.sec.tint{background:var(--mist)}
.sec-h{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.sec-h h2{font-family:var(--serif);font-weight:900;font-size:23px;padding-left:14px;border-left:5px solid var(--spot);line-height:1.3}
.sec-h a.more{margin-left:auto;font-weight:800;font-size:13.5px;color:var(--spot-deep);white-space:nowrap}
.sec-h a.more:hover{text-decoration:underline}
/* 全宽区块:1 主卡 + 3 列表 */
.sec-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:26px;padding-bottom:30px}
.seclead{border:1.5px solid var(--line);border-radius:13px;overflow:hidden;display:flex;flex-direction:column;background:var(--paper)}
.seclead:hover{box-shadow:0 10px 24px rgba(22,48,43,.10)}
.seclead .thumb{aspect-ratio:16/8.4;border-radius:0}
.seclead .pb{padding:15px 17px 16px;display:flex;flex-direction:column;gap:9px;flex:1}
.seclead h3{font-size:18px;font-weight:900;line-height:1.55}
.seclead:hover h3{text-decoration:underline;text-decoration-color:var(--spot);text-decoration-thickness:2.5px;text-underline-offset:4px}
.seclead .ex{font-size:13.5px;color:var(--muted);line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.seclead .pm{margin-top:auto;font-size:12px;color:var(--muted);display:flex;gap:10px}
.seclist{list-style:none;display:flex;flex-direction:column}
.seclist li{border-bottom:1px solid var(--line)}
.seclist li:last-child{border-bottom:none}
.seclist a{display:flex;gap:13px;padding:13px 2px;align-items:flex-start}
.seclist .thumb{width:118px;aspect-ratio:16/10;flex:none;font-size:10px;border-radius:8px}
.seclist h4{font-size:15px;font-weight:900;line-height:1.5}
.seclist a:hover h4{text-decoration:underline;text-decoration-color:var(--spot);text-decoration-thickness:2.5px;text-underline-offset:4px}
.seclist .m{font-size:11.5px;color:var(--muted);margin-top:4px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* 双拼区块:两个分类并排，各 1 主卡 + 2 列表(第 4 个分类起自动进入本网格) */
.duosec{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding-bottom:30px}
.duosec .col .seclead .thumb{aspect-ratio:16/7.6}
.duosec .seclist .thumb{width:100px}

/* ===== ④ 工具条 ===== */
.toolband{background:var(--ink);color:#fff;padding:26px 0}
.toolband .wrap{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:22px;align-items:center}
.toolband .tt{font-family:var(--serif);font-weight:900;font-size:19px;line-height:1.5}
.toolband .tt em{font-style:normal;color:var(--spot)}
.toolband a.tool{display:flex;gap:12px;align-items:center;background:var(--pine);border-radius:11px;padding:13px 16px;font-weight:800;font-size:14.5px}
.toolband a.tool:hover{background:#2A5A4E}
.toolband .ti{font-size:22px}
.toolband small{display:block;font-weight:500;color:#B9CCC5;font-size:11.5px}

/* ===== ⑤ 投稿招商带 ===== */
.pitch{background:linear-gradient(135deg,#FFF4EA,#FDEBDD);border-top:1px solid #F3D9C2;border-bottom:1px solid #F3D9C2;padding:36px 0}
.pitch .wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:30px;align-items:center}
.pitch h2{font-family:var(--serif);font-weight:900;font-size:clamp(21px,2.6vw,28px);line-height:1.5}
.pitch h2 em{font-style:normal;color:var(--spot-deep)}
.pitch p{margin-top:10px;font-size:14.5px;color:#7A5A3A;max-width:38em;line-height:1.8}
.pitch .act{text-align:right}
.pitch .act a{display:inline-flex;align-items:center;gap:8px;background:var(--spot);color:#fff;font-weight:900;padding:14px 30px;border-radius:11px;font-size:16px}
.pitch .act a:hover{background:var(--spot-deep)}
.pitch .act small{display:block;margin-top:10px;font-size:11.5px;color:#A0784E}

/* ===== 信任带 ===== */
.trust{background:var(--ink);color:#E8F1ED;padding:38px 0}
.trust .wrap{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:28px;align-items:start}
.trust h2{font-family:var(--serif);font-size:22px;font-weight:900;color:#fff;line-height:1.5}
.trust h2 em{font-style:normal;color:var(--spot)}
.trust .pt b{display:block;font-size:14.5px;color:#fff;margin-bottom:6px}
.trust .pt p{font-size:13px;color:#B9CCC5;line-height:1.75}

/* ===== 响应式 ===== */
@media (max-width:1080px){
  .top .wrap{grid-template-columns:1fr}
  .toolband .wrap{grid-template-columns:1fr 1fr}
  .toolband .tt{grid-column:1/-1}
}
@media (max-width:860px){
  .sec-grid,.duosec,.pitch .wrap{grid-template-columns:1fr}
  .pitch .act{text-align:left}
  .trust .wrap{grid-template-columns:1fr 1fr}
  .duosec{gap:30px}
}
@media (max-width:600px){
  .sub2{grid-template-columns:1fr}
  .toolband .wrap{grid-template-columns:1fr}
  .trust .wrap{grid-template-columns:1fr}
}