/* 
 * 云南震序律师事务所网站 - 党建列表页面样式
 */

/* 党建列表页 */
.party-list-page {
    padding-bottom: 80px;
}

/* 子栏目导航 */
.subnav-item {
    flex: 1;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #ffffff;
    font-size: 24px;
    background-color: #002B70;
    transition: all 0.3s ease;
}

.subnav-item.active {
    background-color: #F4AD03;
}

.subnav-item:hover:not(.active) {
    background-color: #003a94;
}

/* 顶部特色党建卡片 */
.party-card,
.article-card {
    display: flex;
    background-color: #ffffff;
    height: 440px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    overflow: hidden;
    padding: 0;
    transition: all 0.3s ease;
}

.party-card:hover,
.article-card:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
}

.party-image,
.article-image {
    flex: 0 0 60%;
    max-width: 60%;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.party-image img,
.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.3s ease;
}

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

.party-info,
.article-info {
    flex: 0 0 40%;
    max-width: 40%;
    padding: 30px;
    position: relative;
}

/* 列表党建卡片 */
.party-list-section .party-card,
.case-item,
.news-item {
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    height: 300px;
    overflow: hidden;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
}

.party-list-section .party-card:hover,
.case-item:hover,
.news-item:hover {
    box-shadow: 0 12px 30px rgba(0,0,0,0.16);
}

/* 党建列表布局 */
.party-list-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
}

.party-list-section .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.party-list-section .col-md-6 {
    padding: 0 10px;
    margin-bottom: 20px;
    width: 50%;
    box-sizing: border-box;
}

/* 日期样式 */
.date {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: baseline;
}

.date span:first-child {
    color: #F4AD03;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
}

.date span:last-child {
    color: #F4AD03;
    font-size: 18px;
    margin-left: 20px;
    line-height: 1;
}

/* 黄色分割线 */
.yellow-divider {
    width: 180px;
    height: 1px;
    background-color: #F4AD03;
    margin-bottom: 20px;
}

/* 标题样式 */
.party-card h2,
.party-card h3,
.article-card h2,
.case-item h3,
.news-item h3 {
    color: #F4AD03;
    font-size: 30px;
    margin-bottom: 15px;
    font-weight: bold;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.party-list-section .party-card h3,
.case-item h3,
.news-item h3 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
}

/* 摘要样式 */
.party-card p,
.article-card p,
.case-item p,
.news-item p {
    color: #000000;
    margin-bottom: 30px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.party-info p,
.article-info p {
    -webkit-line-clamp: 6;
    line-clamp: 6;
}

.party-list-section .party-card p,
.case-item p,
.news-item p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

/* 三角形按钮 */
.triangle-button {
    position: absolute;
    bottom: 30px;
    left: 30px;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
    border-left: 25px solid #F4AD03;
    transition: all 0.3s ease;
}

.party-card:hover .triangle-button,
.article-card:hover .triangle-button,
.case-item:hover .triangle-button,
.news-item:hover .triangle-button {
    transform: translateX(5px);
}

/* 分页导航 */
.pagination {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.page-button {
    display: inline-block;
    padding: 8px 15px;
    margin: 0 5px;
    background-color: #fff;
    color: #333;
    text-decoration: none;
    border: 1px solid #ddd;
    transition: all 0.3s ease;
}

.page-button:hover {
    background-color: #f5f5f5;
}

/* 分页样式 */
.page-num {
    display: inline-block !important;
    padding: 8px 15px !important; 
    margin: 0 5px !important; 
    background-color: #fff !important; 
    color: #333 !important; 
    text-decoration: none !important; 
    border: 1px solid #ddd !important;
    transition: all 0.3s ease !important;
}

.page-num:hover {
    background-color: #f5f5f5 !important;
}

/* 当前页高亮样式 */
.page-num-current {
    background-color: #F4AD03 !important; 
    color: #fff !important; 
    border: 1px solid #F4AD03 !important;
}

/* 箭头动画和滚动样式 */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}

.scroll-down {
    transition: opacity 0.3s ease;
    cursor: pointer;
}

.scroll-down:hover {
    opacity: 0.8;
}

/* 从 newslist.css 复制过来的样式，用于统一列表项外观 */
.news-item { 
    background-color: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 30px;
    position: relative;
    height: 340px; /* 统一卡片高度 */
    display: flex;
    flex-direction: column;
}

.news-item .date-divider-container { 
    margin-bottom: 20px; 
}

.news-item .divider-line { 
    width: 180px; 
    height: 1px; 
    background-color: #F4AD03;
}

.news-item h3 { /* 列表项标题 */
    color: #F4AD03;
    font-size: 28px; 
    margin-bottom: 15px;
    font-weight: 600; /* 使用 600 字重 */
    line-height: 1.3;
    height: calc(28px * 1.3 * 2); /* 固定两行高度 */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    line-clamp: 2; 
}

.news-item p { /* 列表项摘要 */
    color: #000000;
    font-size: 16px;
    line-height: 1.6;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; 
    line-clamp: 2; 
    height: calc(16px * 1.6 * 2); /* 固定两行高度 */
    margin-bottom: 20px; 
}

.news-item .triangle-button {
    position: absolute;
    bottom: 30px; 
    left: 30px;
}