/* 首页文章列表 - 只作用于 #latestBlogs，避免污染导航等其他列表 */

#latestBlogs ul {
    margin: 0;
    padding: 0;
}

/* 列表项样式 - 贴合网站卡片/容器设计语言 */
#latestBlogs li {
    display: flex;
    align-items: center;
    font-size: 14pt;
    margin-bottom: 8px;
    padding: 12px 16px; /* 与全局内边距规范一致 */
    background-color: #fff; /* 统一使用白色底色，贴合网站卡片风格 */
    border-radius: var(--radius-md); /* 复用全局圆角，视觉统一 */
    box-shadow: var(--shadow-sm); /* 轻阴影，与contentBox/contactUsBox保持一致 */
    transition: box-shadow 0.2s ease; /* 统一过渡效果，提升交互感 */
}

/* 列表项 hover 效果 - 延续网站卡片交互风格 */
#latestBlogs li:hover {
    box-shadow: var(--shadow-md); /* 与subShowBox hover阴影一致 */
}

#latestBlogs .listTitle {
    flex: 1;
    min-width: 0;
    color: var(--neutral-900); /* 全局主文本色 */
}

#latestBlogs .dateTime {
    flex-shrink: 0;
    margin-left: auto;
    color: var(--neutral-700); /* 全局次要文本色，与info模块一致 */
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}

/* 移动端适配 */
@media (max-width: 768px) {
    #latestBlogs li {
        padding: 8px 12px; /* 移动端缩减内边距 */
        font-size: 13pt; /* 轻微缩小字体，适配移动端 */
    }

    #latestBlogs .dateTime {
        font-size: 13px;
    }
}