/* 全局基础设置 */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;letter-spacing: 0.2px;
    line-height: 1.75;
    color: #2c3e50;
    max-width: 900px; /* 稍微加宽一点，让大屏幕阅读更舒服 */
    margin: 60px auto; /* 上下留白更多，视觉中心更稳 */
    padding: 0 40px;
    background-color: #f4f6f8; /* 换个更沉稳的浅灰色背景 */
}


.logo-container {
    display: flex;          /* 开启弹性布局 */
    align-items: center;    /* 垂直居中对齐 */
    justify-content: left; /* 水平居中（可选，看你是否希望标题整体居中） */
    gap: 15px;              /* Logo 和标题之间的间距 */
    margin-bottom: 10px;
}

.site-logo {
    width: 150px;            /* 调整 Logo 的宽度 */
    height: auto;           /* 自动保持比例 */
    object-fit: contain; /* 确保图片不变形 */
}

/* 导航栏样式 */
/* 2. 给导航栏加个底部阴影，像漂浮在页面上方 */
nav {
    background: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 50px; /* 导航和主体内容的距离拉开 */
}

nav a {
    margin-right: 20px;
    text-decoration: none;
    color: #007bff;
    font-weight: bold;
}

.hero-banner {
    width: 100%;
    height: 300px; /* 控制高度，你可以随心所欲调整 */
    overflow: hidden;
    position: relative;
}

.hero-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 关键：这行代码能自动裁剪图片，使其填满长条区域，不拉伸变形 */
    display: block; /* 强制图片作为块级元素，去掉底部的微小空隙 */
}

/* 产品列表卡片样式 */
ul { list-style: none; padding: 0; }
li {
    background: #fff;
    padding: 20px;
    border: none; /* 去掉边框，改用阴影 */
    margin-bottom: 5px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.03);
    transition: transform 0.2s ease; /* 增加交互动效 */
}
li:hover { 
    border-color: #007bff;
    transform: translateY(-3px); /* 鼠标放上去有微微浮起的效果 */
    box-shadow: 0 8px 12px rgba(0,0,0,0.08); }

li.item {
    background: #fff;
    padding: 20px;
    margin-bottom: 15px;
    
    /* 核心约束 */
    max-height: 200px;     /* 限制卡片最大高度 */
    overflow: hidden;      /* 溢出部分隐藏 */
    position: relative;
}

/* 可以在底部加个“淡出”效果，提示用户还有内容 */
li.item::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: linear-gradient(transparent, #fff);
}


/* 内容区域 */
article {
    background: #fff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 统一控制所有产品详情里的图片 */
article img {
    max-width: 100%;       /* 不会超出屏幕宽度 */
    width: 600px;          /* 固定一个你觉得舒服的宽度 */
    height: auto;          /* 保持比例，防止变形 */
    display: block;
    margin: 20px auto;     /* 图片居中 */
    border-radius: 8px;
}

/* 给小标题增加更强的层级感 */
article h3 {
    margin-top: 30px;
    padding-bottom: 10px;
    border-bottom: 2px solid #007bff; /* 蓝色下划线区分模块 */
    color: #0056b3;
}

/* 标题层次：利用字重区别 */
h1 { color: #2c3e50; font-size: 2em; }
h2 { color: #34495e; font-size: 1.5em; border-left: 5px solid #007bff; padding-left: 15px; }

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应两列 */
    gap: 20px;
}

table {
    width: 100%;
    border-collapse: collapse; /* 保持表格紧凑 */
    margin: 25px 0;
    font-size: 0.95em;
    background: #fff;
    border-radius: 8px; /* 给表格边角也圆角化，和卡片呼应 */
    overflow: hidden;   /* 确保圆角能显示出来 */
}

table th, table td {
    padding: 15px 20px; /* 增加内边距，让文字看起来“松快” */
    text-align: left;
    border-bottom: 1px solid #eee; /* 仅保留底部横线，去掉垂直线 */
}

table th {
    background-color: #fcfcfc;
    color: #666;
    font-weight: 600;
    text-transform: uppercase; /* 稍微大写或字重调整增加质感 */
    letter-spacing: 0.5px;
}

table tr:last-child td {
    border-bottom: none; /* 最后一行去掉底线，更干净 */
}

/* 增加鼠标悬停效果，让表格看起来有交互性 */
table tr:hover {
    background-color: #f9f9f9;
}

/* 首页英雄区居中 */
.home-hero { text-align: center; padding: 40px 0; }

/* 让产品卡片并排显示 (如果不想要并排，删掉这两行) */
.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
}

/* 卡片样式 */
.product-card {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.related-articles {
    margin-top: 40px;
    padding: 20px;
    background-color: #f4f7f6;
    border-radius: 6px;
}

.related-articles h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: #333;
}

.related-articles ul {
    list-style: none;
    padding: 0;
}

.related-articles li {
    margin-bottom: 10px;
}

.product-detail {
    max-width: 800px; /* 限制阅读宽度，防止文字太长眼睛累 */
    margin: 0 auto;   /* 居中页面 */
    padding: 20px;
}

/* 1. 通用结构样式 (给所有 Section 使用) */
.content-section {
    margin-bottom: 3px;
}

.section-title {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    font-size: 1.5rem;
    color: #2c3e50;
    border-bottom: 2px solid #3498db; /* 保持专业蓝色调 */
}

/*  列表紧凑化 (通用逻辑) */
/* 1. 针对 section 结构，移除所有卡片感的高度限制 */
.section-body ul, 
.section-body ol,
.section-body li {
    background: none !important;
    border: none !important;
    min-height: auto !important; /* 彻底取消最小高度 */
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    list-style-position: inside !important; /* 保持列表符号显示 */
}

/* 2. 这里的间距才是“透气”的关键 */
.section-body ul, .section-body ol {
    margin-bottom: 15px !important; /* 列表块整体与下方的距离 */
}

.section-body li {
    margin-bottom: 8px !important;  /* 这一行决定了列表项之间的间距 */
    line-height: 1.6 !important;
    display: list-item !important;
}

/* 3. 确保段落有正常的呼吸空间 */
.section-body p {
    margin: 0 !important;
    margin-bottom: 10px !important; /* 段落之间的间距 */
    display: block !important;
}

/* 4. 优化嵌套结构（如药效学/药动学）的视觉层级 */
.section-body strong {
    color: #2c3e50;
    margin-right: 5px;
}

/* 针对 section 内部表格的专属优化 */
.section-body table {
    margin: 10px 0 !important;      /* 将 25px 压缩到 10px */
    font-size: 0.9em !important;    /* 稍微缩小字体，增加紧凑感 */
}

.section-body table th, 
.section-body table td {
    padding: 8px 12px !important;  /* 将 15/20px 缩减到 8/12px */
}

/* 强制表格行高 */
.section-body table tr {
    line-height: 1.2 !important;
}

.content-box { 
    background-color: #fcfcfc; 
    border-left: 5px solid #2c3e50; 
    padding: 1rem; 
    margin: 1.5rem 0; 
    border-radius: 0 4px 4px 0;
}

.box-title { margin-top: 0; color: #2c3e50; }

/* 增强嵌套时的视觉舒适度 */
.section-body .content-box {
    margin: 20px 0; /* 嵌套时的边距微调 */
    box-shadow: 0 2px 2px rgba(0,0,0,0.05); /* 加一点极淡的阴影，让 box 更有“浮起来”的质感 */
}

/* 3. (可选) 如果你希望产品页 Section 有特殊背景，可以通过类名区分 */
.product-style {
    background: #f9f9f9;
    padding: 20px;
    border-left: 5px solid #27ae60;
}

/* 针对手机的小优化 */
@media (max-width: 600px) {
    .product-section {
        padding: 15px;
    }
}

.breadcrumb {
    font-size: 0.9rem;
    margin-bottom: 20px;
    padding: 10px 0;
    color: #666;
    box-sizing: border-box; /* 确保 padding 不会撑大容器 */
    padding-left: 20px;  /* 增加左侧间距，避免顶格 */
    padding-right: 20px; /* 右侧也加一点，对称好看 */
    margin-bottom: 20px; /* 与下方标题拉开距离 */
}

.breadcrumb a {
    color: #3498db;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb span {
    margin: 0 8px;
    color: #ccc;
}

/* 布局基石 */
.layout-container {
    display: grid;
    grid-template-columns: 240px 1fr; /* 左侧固定240px，右侧自适应 */
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.sidebar-nav {
    border: 2px solid red; /* 临时添加红色边框，看看它到底在哪 */
    min-height: 500px;
    background-color: #f4f4f4;
}

/* 手机端响应式折叠 */
@media (max-width: 768px) {
    .layout-container {
        grid-template-columns: 1fr; /* 手机端变为单列 */
    }
}

/* 当没有侧边栏时，主内容区全宽 */
.full-width {
    grid-column: 1 / -1; /* 让内容跨越整个网格宽度 */
    max-width: 900px;    /* 限制阅读宽度，防止文字过长 */
    margin: 0 auto;      /* 自动居中 */
}

/* 如果有侧边栏，恢复正常布局 */
.content-area {
    width: 100%;
}

/* 首页内容分栏 */
.home-container {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 产品占 2/3，知识库占 1/3 */
    gap: 40px;
}

.home-products {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.knowledge-list {
    list-style: none;
    padding: 0;
}

.knowledge-item {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
}

.knowledge-item a {
    color: #3498db;
    text-decoration: none;
}

.knowledge-item .date {
    font-size: 0.85em;
    color: #999;
}

/* 让首页的卡片稍微紧凑一点，防止占地面积过大 */
.product-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 15px;
}

.product-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.product-image {
    width: 100%;
    height: 180px; /* 固定高度，统一视觉 */
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 4px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 自动裁剪，填满区域，防止变形 */
    transition: transform 0.3s ease;
}

/* 鼠标悬停放大效果，增加质感 */
.product-card:hover .product-image img {
    transform: scale(1.05);
}


.wiki-entry-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.wiki-entry-item {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.wiki-entry-item:hover {
    background-color: #f9f9f9; /* 悬停高亮，方便定位 */
}

.entry-date {
    font-size: 0.85rem;
    color: #999;
    min-width: 90px; /* 日期对齐 */
}

.entry-title {
    flex: 1;
    text-decoration: none;
    color: #333;
    font-weight: 500;
    margin: 0 20px;
}

.entry-category {
    font-size: 0.75rem;
    background: #eef6fc;
    color: #3498db;
    padding: 2px 8px;
    border-radius: 4px;
}

.wiki-link {
    color: #3498db;
    border-bottom: 1px dashed #3498db; /* 用虚线下划线区分普通链接 */
    text-decoration: none;
    cursor: pointer;
}

.wiki-link:hover {
    background-color: #f1f8fe;
    color: #2980b9;
}

.wiki-missing {
    color: #999;
    border-bottom: 1px dotted #ccc;
}

.wiki-footer-categories::before {
    content: "📁"; /* 使用 Emoji 作为轻量级图标，无需加载图片 */
    margin-right: 8px;
    font-size: 0.8rem;
}

.grid-container {
    display: grid;
    /* 自动计算列数，每列最小 150px，不够时自动换行，没有间隙感 */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px; /* 间距更紧凑 */
    margin-top: 15px;
}

.grid-card {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background: #f4f4f4;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
    transition: background 0.2s;
}

.grid-card:hover {
    background: #e0e0e0;
}

.card-title {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* 文字溢出自动变省略号，保持整齐 */
}

.card-meta {
    font-size: 0.7em;
    color: #fff;
    background-color: #555; /* 深灰色标签 */
    padding: 2px 6px;
    border-radius: 10px; /* 圆角标签 */
    align-self: flex-start; /* 标签贴在左上角或紧跟标题 */
    margin-top: 8px;
}