/* ── 页脚：与上方卡片式 UI 融合 ──────────────────────────────────────────
   原来页脚是整块灰色通栏（--footer-bg），而上方的正文是一叠白色圆角卡片
   （home.css 的 .jx-sheet），底色和形状都接不上。这里把页脚也做成同一张
   卡片：页面底色 + 白色圆角卡，底部版权栏是卡内的一条 hairline 分隔行。

   注意：本文件必须在 ios-theme.css 之后加载（main.php 中紧跟其后），
   否则 .jx-container 的 padding 简写会把 .jx-footer__grid 的纵向内边距
   覆盖成 0（两者特异性相同，后加载者胜）。                            */

.jx-footer {
    /* 底色跟页面一致、去掉分隔线，视觉上与上方内容连成一片 */
    background: var(--bg);
    border-top: 0;
    color: var(--footer-text);
    padding-top: 1.25rem;
    /* ios-theme 里的 env(safe-area-inset-bottom) 用 max() 保住 */
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
}

/* 卡片本体：与 .jx-sheet 同款观感 */
.jx-footer__sheet {
    background: var(--surface-primary, #ffffff);
    border: 1px solid var(--border, rgba(55, 53, 47, 0.12));
    border-radius: var(--radius-xl, 16px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(55, 53, 47, 0.04));
    overflow: hidden;
}

/* 4 列主体：恢复被 .jx-container 吃掉的纵向内边距 */
.jx-footer__sheet .jx-footer__grid {
    padding: 1.75rem 1.25rem;
}

@media (min-width: 768px) {
    .jx-footer__sheet .jx-footer__grid {
        padding: 2.25rem 1.75rem;
    }
}

/* 底部栏：卡片内的一条分隔行 */
.jx-footer__sheet .jx-footer__bottom {
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border, rgba(55, 53, 47, 0.12));
}

@media (min-width: 768px) {
    .jx-footer__sheet .jx-footer__bottom {
        padding: 1.125rem 1.75rem;
    }
}

/* 「查看全部合作支持 →」原先没有任何样式规则，按 body 的 16px 渲染，
   比旁边 13px 的链接大一圈，在页脚里非常突兀；这里补上并给一点强调色。 */
.jx-footer__more {
    margin: 0.75rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.6;
}

.jx-footer__more a {
    color: var(--accent);
    transition: color var(--transition);
}

.jx-footer__more a:hover {
    text-decoration: underline;
}