/* ==================== 板块页样式（forum 控制器两个页面专用，经 $extraCss 加载）
 * 依赖 home.css 的变量体系与 .wrap/.panel/.trow/.pager 等公共类
 * ==================== */

/* 页面底部留白：板块页最后一个区块与页脚之间不能贴死（home.css 的 .foot 无 margin-top）。
 * 注意：顶栏 .wrap.topbar-in 和页脚 .wrap.foot-in 也带 .wrap，必须排除，否则导航布局被撑坏 */
.wrap:not(.topbar-in):not(.foot-in){padding-bottom:36px}

/* ==================== 目录页：页头横幅 ==================== */
.fh{margin:18px 0 6px;border-radius:14px;position:relative;overflow:hidden;
    background:linear-gradient(120deg,var(--primary) 0%,var(--primary-dark) 70%,#0a4f48 100%);color:#fff}
.fh:after{content:"";position:absolute;right:-60px;top:-80px;width:260px;height:260px;border-radius:50%;
    background:rgba(255,255,255,.08)}
.fh:before{content:"";position:absolute;right:120px;bottom:-110px;width:200px;height:200px;border-radius:50%;
    background:rgba(255,255,255,.06)}
.fh-in{position:relative;z-index:1;padding:34px 34px 28px}
.fh h1{margin:0;font-size:26px;font-weight:800;letter-spacing:1px;display:flex;align-items:center;gap:10px}
.fh h1 i{font-size:26px;opacity:.9}
.fh-sub{margin:8px 0 16px;font-size:13.5px;opacity:.85;letter-spacing:.5px}
.fh-anchors{display:flex;gap:8px;flex-wrap:wrap}
.fh-chip{padding:5px 14px;border-radius:999px;font-size:13px;background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.25);color:#fff;transition:background .15s}
/* hover 必须显式重申 color：pg-ui.css 的 a:hover{color:var(--pg-ui-link-hover-color)} 权重(0,1,1)
   高于 .fh-chip(0,1,0)，否则白字被改成主色深绿，落在渐变横幅上直接看不见 */
.fh-chip:hover{background:rgba(255,255,255,.28);color:#fff}

/* ==================== 目录页：分区块 ==================== */
.fs{margin-top:26px;scroll-margin-top:76px}
.fs-hd{display:flex;align-items:center;gap:9px;margin-bottom:12px}
.fs-hd i.ti{font-size:20px;color:var(--primary)}
.fs-hd h2{margin:0;font-size:17px;font-weight:800;letter-spacing:.5px}
.fs-meta{font-size:12px;color:var(--text-3);white-space:nowrap}
.fs-line{flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
/* 轨道必须写 minmax(0,1fr)：1fr 的自动最小尺寸是 min-content，而 .fc 里的最新帖标题是
   nowrap + ellipsis（overflow:hidden 只在自己身上生效，撑不住祖先的内在尺寸），
   于是最长那条标题直接把整条轨道顶宽 —— 同一页出现三种卡片宽度，手机端整页横向溢出。
   与 home.css 的 .main 同一口径。 */
.fs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fs-empty{padding:18px;text-align:center;color:var(--text-3);font-size:13px;
    background:var(--card);border:1px dashed var(--border);border-radius:var(--radius)}

/* ==================== 目录页：板块卡片 ==================== */
.fc{position:relative;min-width:0;display:flex;flex-direction:column;
    background:var(--card);border:1px solid var(--border);border-radius:12px;
    box-shadow:var(--shadow);padding:16px 18px 12px;transition:border-color .15s,transform .15s,box-shadow .15s}
.fc:hover{border-color:var(--primary);transform:translateY(-2px);box-shadow:0 6px 18px rgba(var(--primary-rgb),.12)}
.fc-top{display:flex;align-items:center;gap:11px}
.fc-ico{width:40px;height:40px;border-radius:11px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff}
.fc-ico i{font-size:20px}
.fc-head{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.fc-name{font-size:15.5px;font-weight:700;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-name:hover{color:var(--primary)}
.fc-num{margin-left:auto;font-size:11.5px;color:var(--text-3);white-space:nowrap}
.fc-num b{font-size:13.5px;color:var(--text-2);margin-right:2px;font-variant-numeric:tabular-nums}
.fc-brief{margin:8px 0 0;font-size:12.5px;color:var(--text-3);line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.fc-subs{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;position:relative;z-index:1}
/* 子板块胶囊：长名字不许把整行顶出去（一行放不下就换行，单个太长则自己截断） */
.fc-chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;max-width:100%;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    font-size:12px;color:var(--text-2);background:var(--bg);border:1px solid var(--border-soft);transition:all .15s}
.fc-chip:hover{color:var(--primary);border-color:var(--primary);background:var(--primary-light)}
.fc-chip span{flex:0 0 auto;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.fc-chip:hover span{color:var(--primary)}
.fc-last{display:flex;align-items:center;gap:8px;margin-top:11px;padding-top:10px;border-top:1px dashed var(--border-soft);font-size:12.5px;min-width:0}
.fc-last-tag{flex:0 0 auto;padding:1px 7px;border-radius:4px;font-size:11px;
    background:var(--primary-light);color:var(--primary);font-weight:600}
.fc-last-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.fc-last-t:hover{color:var(--primary)}
.fc-last-meta{flex:0 0 auto;color:var(--text-3);font-size:11.5px;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-foot{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:9px;font-size:11.5px;color:var(--text-3);min-height:22px}
.fc-mods{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
.fc-today{flex:0 0 auto;color:var(--warn);white-space:nowrap}
.fc-go{flex:0 0 auto;margin-left:auto;padding:3px 11px;border-radius:999px;border:1px solid var(--border);
    display:inline-flex;align-items:center;gap:2px;font-size:12px;color:var(--text-2);transition:all .15s;position:relative;z-index:1}
.fc-go:hover{border-color:var(--primary);background:var(--primary);color:#fff}

/* ==================== 板块详情页 ==================== */
.fb-crumb{display:flex;align-items:center;gap:4px;margin:16px 0 12px;font-size:13px;color:var(--text-3);flex-wrap:wrap}
.fb-crumb a{color:var(--text-2);display:inline-flex;align-items:center;gap:3px}
.fb-crumb a:hover{color:var(--primary)}
.fb-crumb i.ti{font-size:13px;opacity:.6}
.fb-crumb b{color:var(--text);font-weight:600}

.fb-head{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--border);
    border-radius:14px;box-shadow:var(--shadow);padding:22px 24px}
.fb-ico{width:58px;height:58px;border-radius:15px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff}
.fb-ico i{font-size:28px}
.fb-info{flex:1;min-width:0}
.fb-info h1{margin:0;font-size:20px;font-weight:800;display:flex;align-items:center;gap:8px}
.fb-badge{font-size:11px;font-weight:600;color:var(--primary);background:var(--primary-light);
    border-radius:4px;padding:1px 7px;vertical-align:middle}
.fb-brief{margin:5px 0 0;font-size:12.5px;color:var(--text-3)}
.fb-meta{display:flex;gap:16px;margin-top:8px;font-size:12.5px;color:var(--text-3);flex-wrap:wrap}
.fb-meta b{color:var(--text);font-size:14px;margin-right:2px;font-variant-numeric:tabular-nums}
.fb-today{color:var(--warn)}
.fb-post{flex:0 0 auto;padding:9px 20px;border-radius:999px;background:var(--primary);color:#fff;
    font-size:13.5px;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:background .15s}
.fb-post:hover{background:var(--primary-dark);color:#fff}

.fb-subs{margin-top:14px;background:var(--card);border:1px solid var(--border);border-radius:14px;
    box-shadow:var(--shadow);padding:14px 18px}
.fb-subs-hd{font-size:12.5px;font-weight:700;color:var(--text-3);letter-spacing:1px;margin-bottom:10px;
    display:flex;align-items:center;gap:6px}
.fb-subs-hd i{font-size:15px;color:var(--primary)}
.fb-subs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.fb-sub{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border-soft);
    border-radius:10px;background:var(--bg);transition:all .15s;min-width:0}
.fb-sub:hover{border-color:var(--primary);background:var(--primary-light)}
.fb-sub-ico{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:#fff}
.fb-sub-ico i{font-size:15px}
.fb-sub-main{flex:1;min-width:0}
.fb-sub-main b{display:block;font-size:13.5px;font-weight:600}
.fb-sub-main small{display:block;font-size:11.5px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-sub-n{flex:0 0 auto;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}

.fb-count{margin-left:auto;font-weight:400;font-size:12px;color:var(--text-3)}
.fb-pin{color:var(--warn);margin-right:3px;font-size:14px;vertical-align:-2px}

/* ==================== 响应式 ==================== */
@media (max-width:900px){
    .fs-grid{grid-template-columns:minmax(0,1fr)}
    .fb-subs-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .fh-in{padding:24px 20px 20px}
    .fh h1{font-size:21px}
}
@media (max-width:560px){
    .fb-head{flex-wrap:wrap;padding:16px}
    .fb-post{width:100%;justify-content:center}
    .fb-subs-grid{grid-template-columns:minmax(0,1fr)}
    .fc-last-meta{display:none}
    /* 手机端：横幅 / 分区标题 / 卡片 / 页脚共用 .wrap 的 12px 内边距，卡片自己再收一档，
       375 屏上「最新」那行才留得下标题；分区统计允许换行，别把分区名挤成两行 */
    .fh{margin-top:14px}
    .fh-in{padding:20px 16px 18px}
    .fh h1{font-size:19px}
    .fs{margin-top:20px}
    .fs-hd{flex-wrap:wrap;row-gap:2px}
    .fs-meta{white-space:normal}
    .fs-grid{gap:12px}
    .fc{padding:14px 14px 11px}
}