/* style.css - Natura Humanitas 期刊样式表 (白线蒙德里安版) */

:root {
    /* ================= 配色方案 ================= */
    
    /* 1. 蒙德里安三原色 (提高了饱和度，更鲜活) */
    --mondrian-red: #E63946;    /* 鲜亮的红色，用于重要按钮或强调 */
    --mondrian-yellow: #FFD166; /* 明亮的黄色，用于导航或提示 */
    --mondrian-blue: #118AB2;   /* 活力的蓝色，用于深沉的信息块 */

    /* 2. 背景色与文字色 */
    --bg-color: #FFFFFF;        /* 整体背景纯白 */
    --block-bg: #F7F9F9;        /* 内容区块的背景：极淡的灰，为了和白线形成对比 */
    --text-main: #333333;       /* 主要文字颜色：深灰，比纯黑更护眼 */
    --text-light: #666666;      /* 次要文字颜色 */

    /* 3. 网格设置 */
    --grid-gap: 5px;            /* 【关键】线宽：这里是白线的宽度 */
}

/* 全局设置 */
body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    /* 隐藏浏览器的滚动条，做成全屏应用感（如果内容多了可以去掉这一行） */
    height: 100vh; 
    overflow: hidden; 
}

/* ================= 核心布局容器 ================= */
.journal-container {
    width: 100vw;   /* 占满屏幕宽度 */
    height: 100vh;  /* 占满屏幕高度 */
    
    /* 启用网格布局 */
    display: grid;
    
    /* 【关键】列的定义：左侧边栏(250px) - 中间主要内容(自动填充) - 右侧功能区(280px) */
    grid-template-columns: 250px 1fr 280px;
    
    /* 【关键】行的定义：头部(100px) - 导航(50px) - 主体内容(自动) - 底部(40px) */
    grid-template-rows: 100px 50px 1fr 40px;
    
    /* 利用背景色白色 + gap间距，形成白线分割效果 */
    background-color: white; 
    gap: var(--grid-gap);
    
    /* 给整个容器加个内边距，像画框一样 */
    padding: var(--grid-gap);
    box-sizing: border-box;
}

/* ================= 通用区块样式 ================= */
.box {
    background-color: var(--block-bg); /* 给每个格子填充淡灰色，这样白线才看得见 */
    padding: 20px;
    overflow-y: auto; /* 如果内容太多，允许格子内部滚动 */
    position: relative;
}

/* ================= 1. 头部区域 (Header) ================= */
.header-title {
    /* 占据第一行的前两列 */
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    
    display: flex;
    align-items: center; /* 垂直居中 */
    background-color: var(--mondrian-red); /* 红色背景，视觉冲击 */
    color: white;
}

.header-title h1 {
    margin: 0;
    font-size: 2.5rem;
    text-transform: uppercase; /* 全大写 */
    letter-spacing: 2px;
}

/* 右上角的用户/搜索区 */
.header-user {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    background-color: #333; /*以此深色压住右上角*/
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 0.9rem;
}

/* ================= 2. 导航栏 (Nav) ================= */
.nav-bar {
    /* 跨越整个第二行 */
    grid-column: 1 / 4;
    grid-row: 2 / 3;
    
    background-color: var(--mondrian-yellow); /* 黄色背景 */
    display: flex;
    align-items: center;
    padding: 0 20px;
}

.nav-bar a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    margin-right: 40px;
    text-transform: uppercase;
    font-size: 0.9rem;
}
.nav-bar a:hover {
    text-decoration: underline;
}

/* ================= 3. 左侧边栏：当前刊物信息 ================= */
.sidebar-left {
    grid-column: 1 / 2;
    grid-row: 3 / 4;
    border-right: none;
}

/* style.css - 找到原有的 .cover-image-placeholder 相关样式并替换 */

/* 1. 修改图片的容器：利用负边距实现“全宽”效果 */
.cover-image-placeholder {
    /* 【关键技巧】
       父容器(.box)有 20px 的 padding。
       我们设置 -20px 的左右 margin，就可以把容器拉伸到贴住边缘。
    */
    margin-left: -20px;
    margin-right: -20px;
    
    /* 调整一下上下的间距，让它和上面的文字隔开一点 */
    margin-top: 25px;
    margin-bottom: 25px;
    
    /* 确保去掉任何边框 */
    border: none;
    
    /* 如果图片本身带有白色背景，可以加个浅色投影增加立体感（可选）*/
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.05); */
}

/* 2. 图片本身的设置不变 */
.cover-image-placeholder img {
    width: 100%;    /* 让图片宽度撑满这个被拉伸过的容器 */
    height: auto;   /* 高度自动 */
    display: block; /* 消除底部空隙 */
}
}

/* ================= 4. 中间：文章列表 (核心内容) ================= */
.main-content {
    grid-column: 2 / 3;
    grid-row: 3 / 4;
    background-color: white; /* 主要阅读区保持白色背景 */
}

.article-item {
    border-bottom: 1px solid #eee; /* 文章之间的分隔线 */
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.article-category {
    color: var(--mondrian-blue);
    font-size: 0.8rem;
    font-weight: bold;
    text-transform: uppercase;
}

.article-title {
    margin: 5px 0;
    font-size: 1.4rem;
    cursor: pointer;
}
.article-title:hover {
    color: var(--mondrian-red);
}

.article-meta {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 10px;
    font-style: italic;
}

/* DOI 按钮 */
.btn-doi {
    display: inline-block;
    padding: 2px 8px;
    background-color: #eee;
    color: #555;
    font-size: 0.7rem;
    border-radius: 3px;
    text-decoration: none;
}

/* ================= 5. 右侧边栏：编委与公告 ================= */
.sidebar-right {
    grid-column: 3 / 4;
    grid-row: 3 / 5; /* 到底部 */
    background-color: var(--block-bg);
}

.info-block {
    margin-bottom: 30px;
}
.info-block h3 {
    border-bottom: 2px solid var(--mondrian-blue); /* 蓝色下划线标题 */
    padding-bottom: 5px;
    font-size: 1rem;
}

/* ================= 6. 底部 (Footer) ================= */
.footer {
    grid-column: 1 / 3; /* 不占满，留出右下角 */
    grid-row: 4 / 5;
    background-color: var(--mondrian-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.8rem;
}

/* 右下角装饰块，补齐格子 */
.footer-corner {
    grid-column: 3 / 4;
    grid-row: 4 / 5;
    background-color: var(--mondrian-red);
}
/* style.css - 添加到底部：Archives 页面专用样式 */

/* 年份大标题 */
.archive-year-title {
    font-size: 1.8rem;
    color: var(--mondrian-blue);
    border-bottom: 2px solid var(--text-main);
    padding-bottom: 10px;
    margin-top: 30px;
    margin-bottom: 20px;
}

/* 每一期杂志的卡片容器 */
.issue-card {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    margin-bottom: 15px;
    transition: all 0.3s ease; /* 动画效果 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

/* 鼠标悬停时的效果：边框变红，稍微浮起 */
.issue-card:hover {
    border-color: var(--mondrian-red);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.issue-card-title {
    font-size: 1.2rem;
    font-weight: bold;
    margin: 0;
}

.issue-card-meta {
    color: #666;
    font-size: 0.9rem;
    margin-top: 5px;
}

/* 状态标签 (如: Current, Upcoming) */
.status-badge {
    padding: 5px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: white;
    border-radius: 4px;
}

.status-current {
    background-color: var(--mondrian-red);
}

.status-upcoming {
    background-color: #aaa; /* 灰色 */
}
/* style.css - 添加到底部：编委会 (Editorial Board) 专用样式 */

/* 人物列表的网格布局：在大屏幕上每行显示2个人，手机上每行1个人 */
.board-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* 单个人物卡片 */
.person-card {
    display: flex;
    align-items: center;
    background-color: #fff; /* 白色背景 */
    border: 1px solid #eee;
    padding: 15px;
    transition: box-shadow 0.3s;
}

.person-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 鼠标悬停微微浮起 */
}

/* 照片区域 */
.person-photo-container {
    width: 80px;
    height: 80px;
    background-color: #ddd; /* 灰色背景：如果没有照片就显示这个颜色 */
    border-radius: 50%; /* 圆形头像 */
    overflow: hidden; /* 切割溢出的图片 */
    margin-right: 15px;
    flex-shrink: 0; /* 防止被挤压 */
    border: 2px solid var(--mondrian-yellow); /* 给头像加个漂亮的黄色边框 */
}

/* 图片本身 */
.person-photo-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保持比例填满圆形，不拉伸变形 */
    display: block;
}

/* 右侧文字信息 */
.person-info h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    color: var(--text-main);
}

.person-info p {
    margin: 0;
    font-size: 0.85rem;
    color: #666;
    line-height: 1.4;
}

/* 职位小标题 (如 Managing Editor) */
.role-title {
    font-size: 1.4rem;
    color: var(--mondrian-blue);
    border-left: 5px solid var(--mondrian-red); /* 左边加个红竖线装饰 */
    padding-left: 10px;
    margin-top: 30px;
    margin-bottom: 15px;
}
/* style.css - 添加到底部 */

/* ================= 隐藏滚动条但在功能上保留滚动 ================= */

/* 针对所有主要区块 (.box) */
.box {
    /* 1. 针对 Firefox 浏览器 */
    scrollbar-width: none; 
    
    /* 2. 针对 IE 10+ */
    -ms-overflow-style: none;  
}

/* 3. 针对 Chrome, Safari, Edge (Webkit内核) */
.box::-webkit-scrollbar { 
    display: none;  /* 直接把滚动条设为不显示 */
}
/* style.css - 请复制并粘贴到文件最底部 */

/* 灰色小药丸按钮样式 */
.btn-chip {
    display: inline-block;
    background-color: #F0F0F0; /* 浅灰背景 */
    color: #333 !important;    /* 强制深灰色字，防止变蓝/紫 */
    padding: 5px 12px;         /* 内边距，撑大一点 */
    font-size: 0.8rem;
    border-radius: 4px;        /* 圆角 */
    text-decoration: none !important; /* ⚠️关键：强制去掉下划线 */
    font-weight: 500;
    transition: background-color 0.2s;
    margin-right: 5px;         /* 按钮之间留点缝隙 */
    cursor: pointer;
}

/* 鼠标悬停时的效果 */
.btn-chip:hover {
    background-color: #d0d0d0; /* 变深一点 */
    color: #000 !important;
}
/* 📱 强制修复手机端底部内容消失的问题 */
@media screen and (max-width: 768px) {
    /* 1. 强制解锁整个网页的高度，允许滚动 */
    html, body {
        height: auto !important;       /* 取消 100% 高度限制 */
        min-height: 100vh !important;  /* 最小也是一屏 */
        overflow-y: scroll !important; /* 强制允许上下滚动 */
        overflow-x: hidden !important; /* 禁止左右乱晃 */
        position: static !important;   /* 取消可能存在的绝对定位锁定 */
    }

    /* 2. 强制让所有大色块自动撑开高度，防止重叠 */
    div, section {
        flex-shrink: 0 !important;     /* 防止内容被挤压消失 */
    }
}