/* ==================================================
   全局样式表 style.css
   创建日期: 2026-03-04
   说明: 本网站所有页面的共用样式。修改此处将全局生效。
   参考风格: 个人博客 (https://gitee.com/hmq2013/my-personal-homepage)
   ================================================== */

/* --- 基础重置 & 字体 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: #f5f5f7; /* 柔和背景 */
    color: #1d1d1f;
    line-height: 1.6;
    padding: 30px 20px;
}

/* --- 整体容器，模仿博客的居中卡片布局 --- */
.container {
    max-width: 1000px;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: 24px; /* 大圆角，现代感 */
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1);
    padding: 40px;
}

/* --- 头部样式 (H1和日期) --- */
h1 {
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: #1d1d1f;
    margin-bottom: 8px;
    padding-bottom: 15px;
    border-bottom: 3px solid #e6e6e8; /* 细分割线 */
}

.update-time {
    display: inline-block;
    background-color: #f5f5f7;
    color: #6e6e73;
    font-size: 0.9rem;
    padding: 6px 15px;
    border-radius: 30px;
    margin-bottom: 30px;
    border: 1px solid #e6e6e8;
}

/* --- 网格布局 (用于首页功能区) --- */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

/* --- 卡片样式 (核心视觉元素) --- */
.card {
    background-color: #ffffff;
    border: 1px solid #e6e6e8;
    border-radius: 18px;
    padding: 25px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.15);
    border-color: #d2d2d6;
}

.card h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 15px;
    color: #1d1d1f;
    padding-bottom: 10px;
    border-bottom: 2px dashed #e6e6e8;
}

.card p {
    color: #6e6e73;
    margin-bottom: 20px;
}

/* --- 链接/按钮样式 (简洁为主) --- */
.button-link {
    display: inline-block;
    background-color: #1d1d1f;
    color: white;
    text-decoration: none;
    padding: 12px 24px;
    border-radius: 40px; /* 胶囊按钮 */
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color 0.2s, transform 0.1s;
    border: none;
    cursor: pointer;
}

.button-link:hover {
    background-color: #3a3a3c;
    transform: scale(1.02);
}

/* 次要链接样式 (如表格内、文章归档页) */
.secondary-link {
    display: inline-block;
    background-color: #e6e6e8;
    color: #1d1d1f;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}
.secondary-link:hover {
    background-color: #d2d2d6;
}

/* --- 图标占位符样式 (供你插入图片) --- */
/* 使用示例: <div class="image-placeholder" style="background-image: url('assets/images/your-book-cover.jpg');"></div> */
.image-placeholder {
    width: 100%;
    height: 150px;
    background-color: #f0f0f2; /* 占位色 */
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #e6e6e8;
}

/* 小图标占位符 */
.icon-placeholder {
    width: 30px;
    height: 30px;
    background-color: #e6e6e8;
    border-radius: 8px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* --- 文章归档页面样式 (博客风格) --- */
.archive-header {
    margin-bottom: 30px;
}
.back-link {
    display: inline-block;
    margin-bottom: 20px;
    color: #6e6e73;
    text-decoration: none;
    font-size: 0.95rem;
}
.back-link:hover {
    color: #1d1d1f;
    text-decoration: underline;
}

.article-list {
    list-style: none;
}
.article-item {
    border-bottom: 1px solid #e6e6e8;
    padding: 20px 0;
    display: flex;
    align-items: center;
    gap: 20px;
}
.article-item:last-child {
    border-bottom: none;
}
.article-info {
    flex: 1;
}
.article-title {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 5px;
}
.article-meta {
    font-size: 0.9rem;
    color: #6e6e73;
    margin-bottom: 10px;
}
.article-summary {
    color: #3a3a3c;
    margin-bottom: 10px;
}
.article-thumbnail {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    background-color: #f0f0f2;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

/* --- 页脚 --- */
.footer {
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid #e6e6e8;
    text-align: center;
    color: #6e6e73;
    font-size: 0.9rem;
}