/* ============================================
   Tickle 主页（home）
   仅移动端使用：从上到下垂直四菜单
   桌面端不使用主页（默认直接落地 REITs 红绿灯）
   字体使用菜单字体 --font-sans（非 Copperplate）
   ============================================ */

/* 桌面端：主页容器始终不渲染、不占空间 */
#home {
    display: none;
}

/* 移动端（≤768px）：主页可见时显示 #home、隐藏主内容区 */
@media (max-width: 768px) {
    body.home-visible #home {
        display: block;
    }
    body.home-visible .main-content {
        display: none;
    }

    .home-grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 1fr);
        min-height: calc(100vh - var(--nav-height));
    }

    .home-cell {
        margin: 0;
        padding: 16px;
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--border);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;

        /* 使用与导航菜单一致的字体 */
        font-family: var(--font-sans);
        font-size: clamp(20px, 6vw, 28px);
        font-weight: 600;
        letter-spacing: 0.5px;
        line-height: 1.2;
        color: var(--primary);

        -webkit-tap-highlight-color: transparent;
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .home-cell:last-child {
        border-bottom: none;
    }

    .home-cell:active {
        background: var(--accent-light);
        color: var(--primary-dark);
    }
    .home-cell:focus-visible {
        outline: 2px solid var(--secondary);
        outline-offset: -2px;
    }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
    .home-cell {
        transition: none;
    }
}