/* ==========================================================================
   通用布局 · 页脚贴底
   --------------------------------------------------------------------------
   需求：页脚版权（「© 2026 优客装修汇 版权所有」）应位于**页面的最下面**，
        而不是紧跟在卡片列表后面。

   实现：把 body 变成「纵向弹性列 + 最小一屏高」，.wrap 撑满剩余高度，
        页脚用 margin-top:auto 沉到容器底部。效果分两种：
        · 内容不足一屏 → 页脚贴在页面底部，与卡片之间自然留白；
        · 内容超过一屏 → 页脚跟在内容之后，滚动到底即页面最下面。

   ⚠️ 为什么单独建文件：
      public/static/css/navcard.css 与用户提供的 shbnisz.html 逐行一致，
      是「视觉 1:1」的验收红线（QA 用例 PUB-06 逐字节比对），**不可改动**。
      所以这些覆盖规则只放在本文件，由首页与商家页共同引用。

   本文件被以下视图引用：
      app/view/home/index.php   （网站首页）
      app/view/page/index.php   （商家公开页 /companies/{slug}）
   ========================================================================== */

/* ---------- 页面骨架：纵向弹性列，至少一屏高 ---------- */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;

    /*
     * 底部内边距收窄到 24px。
     *
     * 基线 navcard.css 给的是 `padding: 48px 20px 80px` —— 那 80px 是为
     * 「页脚紧跟内容」的原始版式预留的空白。可本页脚要沉到页面最底部，
     * 若沿用 80px，页脚文字与页面底边之间会空出 80px，看上去仍不贴底。
     * 这里只覆盖 padding-bottom，横向与顶部内边距保持基线原值。
     */
    padding-bottom: 24px;
}

/* ---------- 内容容器：撑满剩余高度，内部也是纵向弹性列 ---------- */
/*
 * width:100% 是必须的 —— 纵向弹性列里，子项的横向尺寸默认按 stretch 求解，
 * 而 .wrap 在基线里带 margin:0 auto（自动外边距会取消 stretch），
 * 若不显式给宽度，.wrap 会被收缩成「内容宽度」，卡片版式就会走样。
 * 给出 width:100% 后仍受基线的 max-width 约束，行为与基线 block 布局一致。
 */
.wrap {
    width: 100%;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

/* ---------- 页脚：沉到容器底部 ---------- */
/*
 * margin-top:auto —— 把页脚推到容器底部（内容少时贴住页面最下面）；
 * padding-top:40px —— 保留与上方内容的最小间距，内容多时不会紧贴卡片。
 * margin-bottom:0 —— 抹掉 <p> 的浏览器默认下外边距（首页用的是 <footer> 元素，
 * 本就没有默认外边距），让两处页脚的位置口径完全一致。
 */
.footer {
    margin-top: auto;
    margin-bottom: 0;
    padding-top: 40px;
}