/* ===== 首页下半段：解决方案（浅底，桌面端铉住被盖）+ 社群黑底带（静止生命游戏方格） ===== */
/* 黑底只落在社群区，和首屏同一套 #121110 / #f4f1eb / #c2bcb2；静止方格由 app/home-community-life.js 画一帧。 */

/* 包裹层只是 DOM 上的分组，布局上透明：让解决方案 / 社群直接成为 #tab-home 的网格项，
   这样 sticky 的包含块是整个 #tab-home，解决方案被社群、FAQ、页脚依次盖住，不会在社群带走完后又露出来。 */
.home-page .home-lower-stack { display: contents; }
@media (min-width: 769px) {
  .home-page .home-lower-stack > * { grid-column: 2; min-width: 0; }
  .home-page .home-lower-stack > .home-community-section { grid-column: 1 / -1; padding-inline: max(40px, calc((100% - 1800px) / 2)); }
}

/* ---- 社群区：黑底带 ---- */
.home-page .home-community-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 0;
  background: #121110;
  color: #f4f1eb;
}
.home-page .home-community-life { position: absolute; inset: 0; z-index: 0; display: block; pointer-events: none; }
.home-page .home-community-section > :not(.home-community-life) { position: relative; z-index: 1; }
.home-page .home-community-section .home-editorial-title,
.home-page .home-community-copy h2 { color: #f4f1eb; }
.home-page .home-community-copy > p,
.home-page .home-community-copy li { color: #c2bcb2; }
.home-page .home-community-copy li::before { background: #c2bcb2; }
.home-page .home-community-section .home-community-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
/* 二维码保留白底方块，扫码需要；占位符沿用白底内的深色文字。 */
.home-page .home-community-section .home-community-qr-frame { border: 0; background: #fff; }
.home-page .home-community-section .home-community-card-copy strong { color: #f4f1eb; }
.home-page .home-community-section .home-community-card-copy p { color: #c2bcb2; }
.home-page .home-community-section .home-community-card-copy a { color: #f4f1eb; }
.home-page .home-community-section .home-community-card-copy a:hover { color: #fff; }

/* ---- 解决方案区：桌面端铉住，被社群带盖上 ---- */
@media (min-width: 769px) and (prefers-reduced-motion: no-preference) {
  .home-page .home-solutions-section[data-sticky-cover] {
    position: sticky;
    top: 0; /* 区块高于视口时由 JS 改成负值，保证滑到底时区块底边与视口底边对齐 */
    z-index: 1;
    background: var(--bg-primary);
  }
  .home-page .home-lower-stack > .home-community-section { z-index: 2; box-shadow: 0 -28px 70px rgba(18, 17, 16, .22); }
  /* 社群之后的 FAQ / 页脚也要盖在铉住的解决方案上方，否则页面滑到底时解决方案会从它们背后透出来。 */
  .home-page #tab-home > :is(.home-faq-section, .home-site-footer) { position: relative; z-index: 2; background: var(--bg-primary); }
}

/* ---- 手机端社群区：同样黑底 + 静止暗格 ---- */
@media (max-width: 768px) {
  .home-page .mobile-community-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin: 48px -24px 0;
    padding: 56px 24px 60px;
    border-top: 0;
    background: #121110;
    color: #f4f1eb;
  }
  .home-page .mobile-community-section > :not(.home-community-life) { position: relative; z-index: 1; }
  .home-page .mobile-community-section h2 { color: #f4f1eb; }
  .home-page .mobile-community-section > p { color: #c2bcb2; }
  .home-page .mobile-community-section .home-community-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
  .home-page .mobile-community-section .home-community-qr-frame { border: 0; background: #fff; }
  .home-page .mobile-community-section .home-community-card-copy strong { color: #f4f1eb; }
  .home-page .mobile-community-section .home-community-card-copy p { color: #c2bcb2; }
  .home-page .mobile-community-section .home-community-card-copy a { color: #f4f1eb; }
}