/* ===========================================================================
 * V9-APP 首页重构样式 · platform-narrative
 * 产品叙事：共生·共享·共富 — 城市级服务反哺闭环平台
 * =========================================================================== */

/* ---------- 平台叙事模块 ---------- */
.hd-platform-narrative { margin: 16px; background: var(--bg-card); border-radius: var(--v9-card-radius); box-shadow: var(--v9-card-shadow); overflow: hidden; }
.hd-platform-narrative-header { padding: 16px; border-bottom: 1px solid var(--border-line); }
.hd-platform-narrative-title { font-size: 16px; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }
.hd-platform-narrative-subtitle { font-size: 12px; color: var(--gray-400); }
.hd-platform-narrative-body { padding: 16px; }
.hd-platform-loop { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; position: relative; }
.hd-platform-loop::before { content: ''; position: absolute; top: 50%; left: 10%; right: 10%; height: 2px; background: linear-gradient(90deg, var(--v9-platform-trust) 0%, var(--v9-platform-commerce) 25%, var(--v9-platform-credit) 50%, var(--v9-platform-elderly) 75%, var(--v9-platform-rural) 100%); opacity: 0.3; z-index: 0; }
.hd-loop-node { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px; position: relative; z-index: 1; }
.hd-loop-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.15); }
.hd-loop-icon--trust { background: var(--v9-platform-trust); }
.hd-loop-icon--commerce { background: var(--v9-platform-commerce); }
.hd-loop-icon--credit { background: var(--v9-platform-credit); }
.hd-loop-icon--elderly { background: var(--v9-platform-elderly); }
.hd-loop-icon--rural { background: var(--v9-platform-rural); }
.hd-loop-label { font-size: 11px; color: var(--gray-600); text-align: center; line-height: 1.4; }
.hd-loop-desc { font-size: 10px; color: var(--gray-400); text-align: center; line-height: 1.3; }

/* ---------- 数据卡片 ---------- */
.hd-data-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 16px 16px; }
.hd-data-card { background: var(--bg-card); border-radius: var(--v9-card-radius); padding: 12px; text-align: center; box-shadow: var(--v9-card-shadow); }
.hd-data-card-value { font-size: 20px; font-weight: 700; color: var(--gray-900); line-height: 1.2; }
.hd-data-card-label { font-size: 11px; color: var(--gray-400); margin-top: 4px; }
.hd-data-card--trust .hd-data-card-value { color: var(--v9-platform-trust); }
.hd-data-card--commerce .hd-data-card-value { color: var(--v9-platform-commerce); }
.hd-data-card--credit .hd-data-card-value { color: var(--v9-platform-credit); }
.hd-data-card--elderly .hd-data-card-value { color: var(--v9-platform-elderly); }

/* ---------- 资讯预告卡片 ---------- */
.hd-news-preview { margin: 0 16px 16px; background: var(--bg-card); border-radius: var(--v9-card-radius); box-shadow: var(--v9-card-shadow); overflow: hidden; }
.hd-news-preview-header { padding: 12px 16px; border-bottom: 1px solid var(--border-line); display: flex; align-items: center; justify-content: space-between; }
.hd-news-preview-title { font-size: 14px; font-weight: 600; color: var(--gray-900); display: flex; align-items: center; gap: 6px; }
.hd-news-preview-more { font-size: 12px; color: var(--color-primary); text-decoration: none; }
.hd-news-preview-list { padding: 8px 0; }
.hd-news-preview-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; color: inherit; transition: background var(--v9-duration-fast); }
.hd-news-preview-item:active { background: var(--gray-50); }
.hd-news-preview-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex-shrink: 0; }
.hd-news-preview-text { flex: 1; font-size: 13px; color: var(--gray-700); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-news-preview-time { font-size: 11px; color: var(--gray-400); flex-shrink: 0; }

/* ---------- 公益入口卡片 ---------- */
.hd-charity-entry { margin: 0 16px 16px; background: linear-gradient(135deg, #FFF8F0 0%, #FFF1E0 100%); border-radius: var(--v9-card-radius); padding: 16px; display: flex; align-items: center; gap: 16px; text-decoration: none; color: inherit; }
.hd-charity-entry-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--color-charity); display: flex; align-items: center; justify-content: center; font-size: 24px; color: #fff; flex-shrink: 0; }
.hd-charity-entry-content { flex: 1; }
.hd-charity-entry-title { font-size: 15px; font-weight: 600; color: var(--gray-900); margin-bottom: 4px; }
.hd-charity-entry-desc { font-size: 12px; color: var(--gray-600); }
.hd-charity-entry-arrow { font-size: 20px; color: var(--gray-400); }

/* ---------- 响应式适配 ---------- */
@media (max-width: 360px) {
    .hd-platform-loop { grid-template-columns: repeat(5, 1fr); gap: 4px; }
    .hd-loop-icon { width: 36px; height: 36px; font-size: 16px; }
    .hd-loop-label { font-size: 10px; }
    .hd-loop-desc { font-size: 9px; }
    .hd-data-cards { grid-template-columns: repeat(2, 1fr); }
}