@charset "utf-8";
/* ==========================================================================
   莜歌铝业 · 内页视觉（列表页 / 文章页 / 单页）— 依赖 youge.css 的变量与基础
   ========================================================================== */

/* ============ 内页 Hero ============ */
.phero{position:relative;padding:158px 0 66px;background:var(--bg);overflow:hidden;border-bottom:1px solid var(--line2)}
.phero .bg{position:absolute;inset:0;background:url("../images/hero-main.jpg") center/cover no-repeat;opacity:.20}
.phero .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(10,12,14,.99) 0%,rgba(10,12,14,.62) 60%,rgba(10,12,14,.86) 100%)}
.phero .wrap{position:relative;z-index:2}
.crumbs{font-size:13px;color:var(--muted2);letter-spacing:.04em}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--gold-l)}
.crumbs i{font-style:normal;margin:0 8px;color:var(--muted2)}
.crumbs em{font-style:normal;color:var(--gold-l)}
.phero h1{margin-top:18px;font-size:38px;font-weight:600;letter-spacing:.04em;line-height:1.4}
.phero h1 em{font-style:normal;color:var(--gold-l)}
.phero .sub{margin-top:14px;font-size:14px;color:var(--muted);max-width:820px;line-height:1.95}

/* ============ 两栏布局 ============ */
.pl{display:grid;grid-template-columns:268px 1fr;gap:46px;padding:66px 0}
.side{align-self:start;position:sticky;top:96px}
.sbox{background:var(--card);border:1px solid var(--line2);border-radius:3px;margin-bottom:20px;overflow:hidden}
.sbox>h3{font-size:15px;font-weight:600;letter-spacing:.1em;padding:16px 20px;border-bottom:1px solid var(--line2);background:rgba(201,169,97,.05);color:var(--ink)}
.sbox>h3 em{font-style:normal;color:var(--gold);font-size:11px;letter-spacing:.24em;display:block;margin-bottom:4px}
.sbox ul{padding:9px}
.sbox li{list-style:none}
.sbox li a{display:block;padding:11px 14px;font-size:14px;color:var(--muted);border-left:2px solid transparent;border-radius:2px;transition:all .22s}
.sbox li a:hover{color:var(--gold-l);background:rgba(201,169,97,.07)}
.sbox li.cur a{color:var(--gold-l);border-left-color:var(--gold);background:rgba(201,169,97,.1)}
.scall{padding:24px 20px;text-align:center}
.scall small{display:block;font-size:11px;letter-spacing:.22em;color:var(--muted)}
.scall b{display:block;font-size:21px;color:var(--gold-l);letter-spacing:.02em;margin:8px 0 4px;font-weight:600}
.scall .btn{width:100%;margin-top:16px}

/* ============ 文章卡片列表 ============ */
.plist{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.acard{background:var(--card);border:1px solid var(--line2);border-radius:3px;overflow:hidden;transition:all .3s;display:flex;flex-direction:column}
.acard:hover{border-color:var(--line);transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,0,0,.45)}
.acard .ph{height:184px;overflow:hidden;background:var(--card2)}
.acard .ph img{width:100%;height:100%;object-fit:cover;transition:transform .7s}
.acard:hover .ph img{transform:scale(1.06)}
.acard .bd{padding:20px 22px 22px;flex:1;display:flex;flex-direction:column}
.acard h4{font-size:16px;line-height:1.62;font-weight:600}
.acard h4 a:hover{color:var(--gold-l)}
.acard p{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.9;flex:1}
.acard .mt{margin-top:16px;padding-top:13px;border-top:1px solid var(--line2);display:flex;justify-content:space-between;font-size:12px;color:var(--muted2);letter-spacing:.06em}
.acard .mt b{color:var(--gold-l);font-weight:400}

/* ============ 分页 ============ */
.pages{margin-top:46px;text-align:center;font-size:0}
.pages a,.pages span{display:inline-block;min-width:40px;height:40px;line-height:38px;padding:0 13px;margin:0 4px;border:1px solid var(--line2);color:var(--muted);font-size:13px;border-radius:2px}
.pages a:hover{border-color:var(--gold);color:var(--gold-l)}
.pages .active,.pages a.on{background:var(--gold);border-color:var(--gold);color:#16120A}
.pages .disabled{opacity:.35}

/* ============ 文章正文 ============ */
.art{background:var(--card);border:1px solid var(--line2);border-radius:3px;padding:46px 50px}
.art h1{font-size:29px;line-height:1.55;font-weight:600;letter-spacing:.02em}
.art .meta{margin-top:18px;padding-bottom:22px;border-bottom:1px solid var(--line2);display:flex;gap:26px;flex-wrap:wrap;font-size:13px;color:var(--muted2)}
.art .meta b{color:var(--gold-l);font-weight:400}
.art .content{margin-top:30px;font-size:16px;line-height:2.15;color:#D6D1CA}
.art .content p{margin:16px 0}
.art .content img{max-width:100%;height:auto;display:block;margin:22px auto;border-radius:3px}
.art .content h2{margin:34px 0 14px;padding-left:14px;border-left:3px solid var(--gold);font-size:21px;color:var(--ink);line-height:1.5}
.art .content h3{margin:26px 0 12px;font-size:18px;color:var(--gold-l)}
.art .content h4{margin:20px 0 10px;font-size:16px;color:var(--ink)}
.art .content ul,.art .content ol{margin:14px 0 14px 26px}
.art .content li{margin:8px 0}
.art .content a{color:var(--gold-l);border-bottom:1px solid var(--line)}
.art .content table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.art .content th,.art .content td{border:1px solid var(--line2);padding:11px 14px;text-align:left}
.art .content th{background:rgba(201,169,97,.08);color:var(--gold-l);font-weight:600}
.art .content blockquote{margin:22px 0;padding:16px 22px;background:rgba(201,169,97,.06);border-left:3px solid var(--gold);color:var(--muted)}

/* 上下篇 */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:38px}
.pager a{background:var(--card);border:1px solid var(--line2);border-radius:3px;padding:20px 24px;transition:all .3s}
.pager a:hover{border-color:var(--line);background:var(--card2)}
.pager small{display:block;font-size:11px;letter-spacing:.22em;color:var(--gold);margin-bottom:9px}
.pager b{font-size:14px;font-weight:400;line-height:1.75;color:var(--ink)}
.pager .nx{text-align:right}

/* ============ 单页正文 ============ */
.pgtxt{background:var(--card);border:1px solid var(--line2);border-radius:3px;padding:46px 50px;font-size:16px;line-height:2.15;color:#D6D1CA}
.pgtxt img{max-width:100%;height:auto;display:block;margin:22px auto;border-radius:3px}
.pgtxt h2{margin:30px 0 14px;padding-left:14px;border-left:3px solid var(--gold);font-size:21px;color:var(--ink)}
.pgtxt h3{margin:24px 0 12px;font-size:18px;color:var(--gold-l)}
.pgtxt p{margin:14px 0}
.pgtxt table{width:100%;border-collapse:collapse;margin:22px 0;font-size:14px}
.pgtxt th,.pgtxt td{border:1px solid var(--line2);padding:11px 14px}
.pgtxt th{background:rgba(201,169,97,.08);color:var(--gold-l)}

/* ============ 子栏目卡片（父栏目页） ============ */
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin-bottom:44px}
.ccard{position:relative;height:190px;border-radius:3px;overflow:hidden;border:1px solid var(--line2);display:flex;align-items:flex-end}
.ccard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s}
.ccard .ov{position:absolute;inset:0;background:linear-gradient(to top,rgba(8,10,12,.94) 4%,rgba(8,10,12,.35) 62%,rgba(8,10,12,.55))}
.ccard .tx{position:relative;z-index:2;padding:22px 24px}
.ccard .tx h3{font-size:18px;letter-spacing:.08em;font-weight:600}
.ccard .tx span{display:block;margin-top:8px;font-size:12px;color:var(--gold-l);letter-spacing:.1em}
.ccard:hover img{transform:scale(1.07)}

/* ============ 响应式 ============ */
@media (max-width:1100px){
  .pl{grid-template-columns:1fr;gap:34px}
  .side{position:static}
  .plist,.cgrid{grid-template-columns:1fr}
  .art,.pgtxt{padding:32px 26px}
  .pager{grid-template-columns:1fr}
  .phero{padding:120px 0 50px}
  .phero h1{font-size:28px}
}