/* ===================================================================
 *  ↓↓↓ Algolia 列表页样式表 (针对错误HTML结构的修复版) ↓↓↓
 * ===================================================================
*/

/*
 * --- 核心卡片布局 ---
 * 我们将整个 <a> 标签作为卡片的基础
*/
a.t1-research--item {
    display: block !important;
    position: relative !important;
    background-color: #ffffff !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.04) !important;
    height: 320px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
    text-decoration: none !important;

    align-items: center !important; /* 你也可以试试 flex-start，看哪种对齐方式更好看 */
}

a.t1-research--item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.08) !important;
}

/*
 * --- 布局修复核心 ---
 * 由于 HTML 结构错误，我们不能使用 Flexbox。
 * 新策略：使用绝对定位。
*/

/* 1. 父容器（照片区），作为定位的基准 */
a.t1-research--item .t1-research--photo {
    position: relative !important; /* 确保它是定位上下文 */
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    /* 清除它自己身上可能带有的flex和position内联样式干扰 */
    flex: none !important;
}

/* 2. 真正的图片，让它占据左侧固定宽度 */
a.t1-research--item .t1-research--photo-image {
    display: block !important;
    position: absolute !important;
    top: 20px !important;
    left: 0 !important;
    width: 280px !important;  /* 关键1：给定一个固定的宽度 */
    /* 【修改】高度是父容器的100%减去顶部栏(50px)和底部栏(40px)的高度 */
    height: calc(100% - 50px - 40px) !important;
    object-fit: contain  !important;
    padding: 8px; /* 给图片周围一点留白，视觉效果更好 */
    box-sizing: border-box;
}

/* 底部的年份和作者信息条容器 */
.t1-research--meta-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: 280px; /* 与左侧栏宽度一致 */
    height: 50px; /* 信息条的高度 */
    display: flex; /* 使用Flex布局来平分空间 */
    overflow: hidden; /* 防止内容溢出 */
    background: #f8f9fa; /* 1. 添加灰色背景 */
    border-top: 1px solid #e9ecef; /* 2. 添加顶部分割线 */
    box-sizing: border-box;
}

/* 年份和作者的通用样式 */
.t1-research--meta-bar .meta-year,
.t1-research--meta-bar .meta-author {
    flex: 1; /* 每个部分占据50%的宽度 */
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 100%;
    color: #2c3e50; /* 【修改】颜色与顶部栏统一 */
    font-size: 14px; /* 【关键修改】减小字体大小以防止换行 */
    font-weight: 600; /* 【修改】字重与顶部栏统一 */
    font-family: sans-serif;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px; /* 给左右一点空间，防止文字贴边 */
}

.t1-research--meta-bar .meta-year {
    border-right: 1px solid #e9ecef; /* 在年份右侧添加一条垂直分割线 */
}

/* 图片上的文字覆盖层 */
a.t1-research--item .t1-research--photo-overlay {
    position: absolute;
    z-index: 2;
    left: 0;
    width: 280px; /* 宽度和图片保持一致 */
    height: 50px; /*给定一个固定的高度 */
    padding: 10px 12px;
    box-sizing: border-box;
    color: #2c3e50; /* 改为深色文字以适应浅色背景 */
    font-size: 14px;
    font-weight: 600;
    text-shadow: none; /* 移除文字阴影 */
    background: #f8f9fa; /* 将透明渐变背景改为不透明的浅灰色 */
    border-bottom: 1px solid #e9ecef; /* 添加下边框进行视觉分割 */
    /* --- 使用 Flexbox 使文字在栏内水平垂直居中 --- */
    display: flex;
    align-items: center;
    justify-content: center;
}
a.t1-research--item .t1-research--photo-overlay.top {
    background: #f8f9fa;
}

/* 3. 右侧内容区，用绝对定位“飞”到右边 */
a.t1-research--item .t1-research--main {
    position: absolute !important;
    top: 0 !important;
    left: 280px !important; /* <<<<< 关键：从左侧图片宽度的位置开始 */
    right: 0 !important;
    bottom: 0 !important;

    /* 让其内部可以垂直排列内容 */
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 24px !important;
    overflow-y: auto; /* 如果内容过多可以滚动 */

    /* 清除它自己身上可能带有的flex和min-width内联样式干扰 */
    flex: none !important;
    min-width: 0 !important;
}

/* --- 内容区文字样式 (保持不变) --- */
.t1-research--title { font-size: 19px; font-weight: 600; color: #2c3e50; line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t1-research--cite { font-size: 14px; color: #7f8c8d; margin-top: 4px; line-height: 1.5; white-space: normal; } /* 允许换行 */
.t1-research--summary { font-size: 14px; color: #555; line-height: 1.6; margin-top: 12px; flex-grow: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.t1-research--info { margin-top: auto; padding-top: 10px; border-top: 1px solid #f0f2f5; font-size: 13px; color: #95a5a6; display: flex; align-items: center; }

/* 隐藏外层的 li 默认样式 */
li.ais-Hits-item {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 标签容器：让它们横向排列，稍微有点间距 */
.t1-research--tags {
    display: flex !important;
    flex-wrap: wrap !important; /* 如果标签太多，允许换行 */
    gap: 6px !important;        /* 标签之间的空隙 */
    margin-bottom: 10px !important; /* 让它和下面的标题保持距离 */

    /* 防止被压缩 */
    flex-shrink: 0 !important;
}

/* 标签通用样式：小巧、精致 */
.tag-badge {
    display: inline-block !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important; /* 防止标签内部文字换行 */
    box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* 加一点点阴影让它更立体 */
}

/* --- 各种类型的配色方案 --- */

/* 1. Review 标签: 优雅的紫色 */
.tag-badge.review {
    background-color: #f3e5f5 !important;
    color: #7b1fa2 !important;
    border: 1px solid #e1bee7 !important;
}

/* 2. 影响因子 (IF): 醒目的红色，强调数据 */
.tag-badge.impact-factor {
    background-color: #ffebee !important;
    color: #c62828 !important;
    border: 1px solid #ffcdd2 !important;
}

/* 3. 分区 (Zone): 专业冷峻的蓝色 */
.tag-badge.zone {
    background-color: #e3f2fd !important;
    color: #1565c0 !important;
    border: 1px solid #bbdefb !important;
}

/* 4. 全文 (Fulltext): 充满希望的绿色 */
.tag-badge.fulltext {
    background-color: #e8f5e9 !important;
    color: #2e7d32 !important;
    border: 1px solid #c8e6c9 !important;
}

/* --- 底部栏布局调整 --- */
.t1-research--info {
    display: flex !important;
    justify-content: space-between !important; /* 关键：一左一右 */
    align-items: center !important; /* 垂直居中 */
    width: 100%;
}

/* --- 阅读全文按钮样式 (仿照您的截图) --- */
.read-fulltext-btn {
    display: inline-block;
    padding: 4px 12px;
    font-size: 13px;
    color: #e74c3c; /* 红色文字 */
    border: 1px solid #e74c3c; /* 红色边框 */
    border-radius: 4px;
    text-decoration: none;
    background-color: transparent;
    transition: all 0.3s ease;
    font-weight: 500;
}

/* 鼠标悬停效果：变实心红 */
.read-fulltext-btn:hover {
    background-color: #e74c3c;
    color: white;
    box-shadow: 0 2px 5px rgba(231, 76, 60, 0.3);
}