/* =====================================================================
 * brandlinks.css —— 页脚「关注我们」（品牌官方外链）区块样式（2026-11-02）
 * ---------------------------------------------------------------------
 * 为什么单独一份文件，不写进皮肤 css：
 *   .v-foot 的样式分散在 inc.min.css（压缩文件，改了再也没法 diff）与 6 个皮肤
 *   （runfeng/xizuo/zhisou/yunzz/zhirong/chaoqin）里各写一遍。逐个补必然漏一处，
 *   而且**漏了不报错**——只是那里没样式，肉眼才发现。
 *   这里用全新类名（xz-bl-*），不覆盖任何既有选择器，两处 <head> 各引一次即可全站生效。
 * 引用位置：Pages/Shared/_Layout.cshtml（所有内页 + 非落地页首页）、
 *           Pages/GeoSite.cshtml（所有落地页）。两处都带 asp-append-version。
 * ===================================================================== */

.xz-brand-links,
.gs-foot-social {
    /* display:flow-root 是**必须**的，不是洁癖：
       旧页脚 .v-foot → .footer-left → .footerNav(自身 float:right) 是一条 float 链，
       普通块级子元素在这条链里会把标题行盒算成 471px（单行文字 14px，实测真机 390px
       下 h2 高 471px、标题下方一片空白）。让本块自己建立 BFC 后，标题恢复 20px 正常高度。
       副作用为零：BFC 只影响内部浮动/外边距折叠，不改宽度。 */
    display: flow-root;
    min-width: 0;
    width: 100%;
}

.xz-bl-title {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #e8edf6;
}

.xz-bl-list {
    /* ⚠ 必须显式 width:100%，不能靠 auto：
       旧页脚 .v-foot 里有一条 `.footer-left a { width:100% }`，它同样命中本区块的 <a>。
       条目 width:100% 与列表 width:auto（需由内容决定）互相依赖，构成百分比循环，
       Chromium 按 0 解 → 列表与条目宽度都算成 0，内容溢出到视口外（真机 390px 实测溢出 65px）。
       这里把列表宽度定死为 100%（脱离内容，打断循环），再用下面的特异性规则把条目放回 auto。 */
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px 14px;
    align-content: flex-start;
}

.xz-bl-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .68);
    text-decoration: none;
    transition: color .15s;
}

/* 覆盖 `.footer-left a{width:100%}`（0,1,1）：本段特异性 (0,3,1)，且不改 display，避免条目被拉成整行 */
.v-foot .footerNav > .xz-brand-links .xz-bl-item { width: auto; }

.xz-bl-item:hover { color: #fff; }

.xz-bl-ico { display: inline-flex; width: 18px; height: 18px; flex: 0 0 18px; }
.xz-bl-ico svg { width: 18px; height: 18px; display: block; }
.xz-bl-name { white-space: nowrap; }

/* ---- 深色三栏页脚（_GeoFoot：超勤全站 + 各站落地页）：三列变四列 ----
   特异性算过：body .gs-foot-inner.has-social = (0,2,1)，
   高于 GeoSite.cshtml 内联的 .gs-foot-inner (0,1,0) 与 geoshell.css 的 body .gs-foot-inner (0,1,1)，
   所以与"内联样式表后加载"无关，不会被压回三列。 */
body .gs-foot-inner.has-social { grid-template-columns: 1.4fr 1fr .9fr .8fr; }
/* 深色三栏页脚里的这一列本身就是 grid 项，宽度由栅格给；这里只防止内容撑破列宽 */
.gs-foot-social { min-width: 0; }

/* ---- 内页 .v-foot 链接墙 ----
   必须做成 .footerNav 的普通流内子项：非 chaoqin 站该容器是
   flex + justify-content:space-between（子项是若干 <ul> 与一个 <address>），
   chaoqin 站是 grid(repeat(4,minmax(0,1fr)))——flex 属性在 grid 项上被忽略，两种布局都不冲突。
   ⚠ .v-foot 的 <footer> 自身高度是 0（内容靠内层块撑开），这里禁止出现 position:absolute/fixed。 */
.v-foot .footerNav > .xz-brand-links { flex: 0 0 220px; width: 220px; max-width: 240px; }
.v-foot .footerNav > .xz-brand-links .xz-bl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v-foot .footerNav > .xz-brand-links .xz-bl-list { gap: 8px 14px; }

@media (max-width: 860px) {
    body .gs-foot-inner.has-social { grid-template-columns: 1fr; }
    .gs-foot-social .xz-bl-list { max-width: none; }
    .v-foot .footerNav > .xz-brand-links { flex: 1 1 100%; width: 100%; max-width: 100%; }
}

/* 手机端：图标行点击区放大到 40px 高以上（18px 图标 + 上下 10px 内边距），避免误触；
   两列定宽，避免 auto-fill 在 390px 下挤出 3 列把「大众点评」这类名字挤换行。 */
@media (max-width: 768px) {
    .xz-bl-item { padding: 10px 0; min-height: 40px; font-size: 14px; }
    .xz-bl-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
}