/*
Theme Name: My Bili Blog (自主版权主题)
Theme URI: http://ilaoer.com
Author: ilaoer
Author URI: http://ilaoer.com
Description: 一个仿B站四列布局的响应式简约主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: mybiliblog
*/

/* 基础重置样式 */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: #f4f4f4; color: #333; }

/* 核心：四列网格布局容器 */
.post-grid {
    display: grid;
    /* 默认在PC端平分4列，间距20px */
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/* 响应式调整：平板2列 */
@media (max-width: 1024px) {
    .post-grid { grid-template-columns: repeat(2, 1fr); }
}

/* 响应式调整：手机1列 */
@media (max-width: 600px) {
    .post-grid { grid-template-columns: 1fr; }
}

/* 文章卡片样式 */
.post-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.3s;
}
.post-card:hover { transform: translateY(-5px); }
.post-card img { width: 100%; height: auto; display: block; }
.post-card h2 { font-size: 16px; padding: 10px; line-height: 1.4; }