/* 父容器布局：两列排列 */
#whitepaper-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: space-between;
}

/* 单个 update card 样式 */

.update-card {
    flex: 0 1 calc(50% - 15px); /* 两列结构，减掉 gap */
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.update-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: #007bff;
}

/* 图片处理，统一尺寸裁切 */
.update-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 15px;
}

/* 文本排版 */
.update-card h4 {
    font-size: 18px;
    margin-bottom: 10px;
}

.update-card p {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
}

.update-card small {
    font-size: 12px;
    color: #888;
}

/* ==== Filter 容器白底科技风样式 ==== */
/* 让 filters 水平排布，等宽并居中 */
.whitepaper-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 25px 20px;
    background-color: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    border-radius: 12px;
    max-width: 1000px;
    margin: 0 auto 40px auto;
    flex-wrap: wrap;
}

/* 让 select 固定宽度，排成一行 */
.whitepaper-filters select {
    flex: 0 0 200px;  /* 固定宽度 */
    background-color: #f8faff;
    color: #333;
    padding: 10px 16px;
    border: 1px solid #d0e3f1;
    border-radius: 8px;
    font-size: 14px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg fill='gray' height='18' viewBox='0 0 24 24' width='18' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px;
    transition: all 0.2s ease-in-out;
}

/* ==== Pagination 容器样式 ==== */
#whitepaper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 40px;
    margin-bottom: 60px;
}

/* ==== 单个分页按钮样式 ==== */
#whitepaper-pagination button {
    padding: 8px 14px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#whitepaper-pagination button:hover {
    background-color: #f0f0f0;
    border-color: #69c0ff;
    color: #000;
}

/* ==== 当前页高亮按钮 ==== */
#whitepaper-pagination button.active {
    background-color: #0066ff;
    border-color: #0066ff;
    color: #fff;
    font-weight: bold;
}


/* Hover 效果 */
.whitepaper-filters select:hover,
.whitepaper-filters select:focus {
    border-color: #69c0ff;
    box-shadow: 0 0 0 3px rgba(105, 192, 255, 0.2);
    outline: none;
}

/* 在小屏幕时垂直排布 */
@media (max-width: 768px) {
    .whitepaper-filters {
        flex-direction: column;
	}
}

/* ==== 响应式排版 ==== */
@media (max-width: 768px) {
    .whitepaper-filters {
        flex-direction: column;
        align-items: center;
    }

    .whitepaper-filters select {
        width: 100%;
        max-width: 300px;
    }
}


/* 响应式优化 */
@media (max-width: 768px) {
    .whitepaper-filters {
        flex-direction: column;
        align-items: center;
    }

    .whitepaper-filters select {
        width: 100%;
        max-width: 300px;
    }
}



.whitepaper-wrapper .pagination button {
    margin: 2px;
}

.whitepaper-wrapper .pagination .active {
    font-weight: bold;
    background-color: #0073aa;
    color: #fff;
}


.whitepaper-wrapper .sidebar-box {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 6px;
}

.whitepaper-wrapper .sidebar-box h3 {
    margin-bottom: 15px;
    font-size: 18px;
}

.whitepaper-wrapper .whitepaper-latest-list {
    list-style: none;
    padding-left: 0;
}

.whitepaper-wrapper .whitepaper-latest-list li {
    margin-bottom: 10px;
}

.whitepaper-wrapper .whitepaper-latest-list li a {
    text-decoration: none;
    color: #0073aa;
}


/* ---- Product Update: Single Page Layout ---- */

.whitepaper-banner-full {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

.whitepaper-banner {
    width: 100%;
    height: 440px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.whitepaper-banner h1 {
    color: #fff;
    font-size: 30px;
    text-align: center;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
    margin: 0;
	z-index: 2;
	padding: 140px 40px 0;
}

.whitepaper-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5); /* 黑色半透明 */
    z-index: 1;
}

/* 主体结构：左右栏布局 */
.whitepaper-wrapper {
    display: flex;
    flex-wrap: nowrap;
    gap: 40px;
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* 左侧内容区域 */
.whitepaper-main-content {
    flex: 0 0 70%;
    max-width: 70%;
    min-width: 0;
}

/* 右侧侧边栏 */
.whitepaper-sidebar {
    flex: 0 0 30%;
    max-width: 30%;
    min-width: 280px;
}

.whitepaper-sidebar .sidebar-box {
    background: #f1f1f1;
    padding: 20px;
    border-radius: 6px;
}

.whitepaper-sidebar .sidebar-box h3 {
    margin-bottom: 15px;
    font-size: 18px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
}

.whitepaper-sidebar .whitepaper-latest-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.whitepaper-sidebar .whitepaper-latest-list li {
    margin-bottom: 10px;
}

.whitepaper-sidebar .whitepaper-latest-list li a {
    text-decoration: none;
    color: #0073aa;
    transition: color 0.2s ease;
}

.whitepaper-sidebar .whitepaper-latest-list li a:hover {
    color: #005177;
}

/* 响应式：移动设备时堆叠显示 */
@media (max-width: 991px) {
    .whitepaper-wrapper {
        flex-direction: column;
    }

    .whitepaper-main-content,
    .whitepaper-sidebar {
        max-width: 100%;
        flex: 1 1 100%;
    }
}