/* ========================================
   有图列表页样式 - pic-list.css
   诺奖典范等图文列表页
   ======================================== */

/* ==================== 页面主体 ==================== */
.pic-list-main {
    min-height: 100vh;
    padding: 6rem 0;
    background-color: #fff;
}

.pic-list-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* ==================== 文章列表 ==================== */
.article-list {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 35px;
    min-height: calc(260px * 4 + 25px * 3);  /* 4篇文章高度 + 3个间距 */
    align-content: start;
}

/* ==================== 单篇文章卡片 ==================== */
.article-card {
    display: flex;
    gap: 0;
    background: #fff;
    cursor: pointer;
    height: 260px;
    border-radius: 12px;
}

/* 偶数项图片在右边 */
.article-card:nth-child(even) {
    flex-direction: row-reverse;
}

/* ==================== 图片区域 ==================== */
.article-image {
    position: relative;
    flex: 0 0 50%;
    max-width: 50%;
    overflow: hidden;
    border-radius: 12px;
}

.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.article-card:hover .article-image img {
    transform: scale(1.05);
}

/* 日期标签 - 灰色半透明背景 */
.image-date {
    position: absolute;
    bottom: 15px;
    right: 80px;
    background: rgba(180, 179, 179, 0.65);
    color: #fff;
    padding: 6px 18px;
    font-size: 14px;
    border-radius: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    border-color: white;
    border-width: 1px;
    border-style: solid;
}

/* 偶数项日期位置不变，始终在图片左上角 */
.article-card:nth-child(even) .image-date {
    left: 20px;
    right: auto;
}

/* 图片底部标题区域 - 无渐变 */
.image-title-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    padding: 0 20px 18px;
}

.image-title {
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* 箭头按钮 - 圆形白色边框 */
.article-arrow {
    position: absolute;
    bottom: 18px;
    right: 20px;
    width: 40px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    transition: all 0.3s ease;
    z-index: 2;
    background: transparent;
}

.article-arrow svg {
    width: 18px;
    height: 18px;
}

/* 偶数项箭头位置不变，始终在图片右下角 */
.article-card:nth-child(even) .article-arrow {
    right: 20px;
    left: auto;
}

/* 悬停时箭头变绿 */
.article-card:hover .article-arrow {
    border-color: #1cb6c1;
    color: #1cb6c1;
    background: rgba(255, 255, 255, 0.95);
}

/* ==================== 内容区域 ==================== */
.article-body {
    flex: 1;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #fff;
}

/* 偶数项内容区域圆角调整 */
.article-card:nth-child(odd) .article-body {
    border-radius: 0 12px 12px 0;
}

.article-card:nth-child(even) .article-body {
    border-radius: 12px 0 0 12px;
}

.article-date {
    display: none;
}

.article-text {
    font-size: 15px;
    color: #333;
    line-height: 2;
    margin: 10px 40px 0 40px;
    text-align: justify;
    font-weight: 500;
}

.article-text p {
    /* margin: 0 0 15px 0; */
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 装饰线条图片 */
.article-decoration {
    /* margin-top: 10px; */
    height: 20px;
}

.article-decoration img {
    height: 100%;
    width: 100%;
}

/* ==================== 分页器 ==================== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
}

.page-info {
    font-size: 13px;
    color: #666;
    margin-right: 15px;
}

.page-btn,
.page-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    color: #333;
    text-decoration: none;
    background-color: #fff;
    transition: all 0.3s ease;
    cursor: pointer;
}

.page-btn:hover,
.page-num:hover {
    border-color: #1cb6c1;
    color: #1cb6c1;
}

.page-num.active {
    background-color: #1cb6c1;
    border-color: #1cb6c1;
    color: #fff;
}

.page-btn.disabled {
    color: #ccc;
    border-color: #eee;
    cursor: not-allowed;
}

.page-btn.disabled:hover {
    color: #ccc;
    border-color: #eee;
}

/* ==================== 响应式布局 ==================== */
@media screen and (max-width: 900px) {
    .article-card {
        flex-direction: column !important;
        height: auto;
        min-height: 420px;  /* 图片220px + 内容区约200px */
    }

    .article-list {
        min-height: calc(420px * 4 + 25px * 3);  /* 4篇文章 */
    }

    .article-image {
        flex: none;
        max-width: 100%;
        height: 220px;
        border-radius: 12px 12px 0 0;
    }

    .article-card:nth-child(even) .image-date {
        left: 20px;
        right: auto;
    }

    .article-card:nth-child(even) .article-arrow {
        left: auto;
        right: 20px;
    }

    .article-body {
        padding: 25px;
    }

    .article-card:nth-child(odd) .article-body,
    .article-card:nth-child(even) .article-body {
        border-radius: 0 0 12px 12px;
    }
}

@media screen and (max-width: 600px) {
    .article-card {
        min-height: 380px;
    }

    .article-list {
        min-height: calc(380px * 4 + 25px * 3);
    }

    .pic-list-container {
        padding: 0 20px;
    }

    .article-image {
        height: 180px;
    }

    .article-body {
        padding: 20px;
    }

    .article-text {
        font-size: 13px;
        line-height: 1.8;
    }

    .article-text p {
        -webkit-line-clamp: 5;
        line-clamp: 5;
    }

    .pagination {
        flex-wrap: wrap;
    }
}
.article-text p.event-title {
    color: #1a858c;
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 600;
}
/* 装饰容器基础样式：控制位置 */
.article-decoration {
    margin-top: 1rem; /* 与文本保持间距 */
    height: 20px; /* 保留原有高度，避免样式冲突 */
}

.article-decoration img {
    height: 100%;
    width: 100%;
    transition: transform 0.3s ease; /* 可选：翻转过渡动画 */
}

/* 奇数项：装饰图右对齐 + 水平翻转 */
.article-card:nth-child(odd) .article-decoration {
    text-align: right;
}
.article-card:nth-child(odd) .article-decoration img {
    transform: scaleX(1); /* 核心：水平翻转 */
}

/* 偶数项：装饰图左对齐 + 原始方向（默认） */
.article-card:nth-child(even) .article-decoration {
    text-align: left;
}
.article-card:nth-child(even) .article-decoration img {
    transform: scaleX(-1); /* 默认值，可省略 */
}