/* ==================== News List Page ==================== */

/* Page Banner */
.page-banner { position: relative; height: 280px; overflow: hidden; }
.page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-banner-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.35); }
.page-banner h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 44px; font-weight: 600; letter-spacing: 1px; margin: 0; }

/* Breadcrumb */
.breadcrumb-bar { background: #f2f2f2; padding: 14px 0; font-size: 14px; color: #666; }
.breadcrumb-bar .container { max-width: 1500px; margin: 0 auto; }
.breadcrumb-bar a { color: #666; transition: color 0.3s; }
.breadcrumb-bar a:hover { color: #4C4C4C; }
.breadcrumb-label { margin-right: 8px; }
.breadcrumb-sep { margin: 0 8px; }
.breadcrumb-current { color: #4C4C4C; }

/* Main Layout */
.newslist-wrap { padding: 55px 0 60px; }
.newslist-wrap .container { max-width: 1500px; margin: 0 auto; }

/* Section Title */
.news-title { text-align: center; font-size: 34px; font-weight: 600; color: #222; margin: 0 0 45px; }

/* News Grid */
.news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 25px; }
.news-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #eee; text-decoration: none; transition: box-shadow 0.3s, transform 0.3s; }
.news-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.1); transform: translateY(-3px); }
.news-card-img { aspect-ratio: 16/9; overflow: hidden; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s; }
.news-card:hover .news-card-img img { transform: scale(1.05); }
.news-card-body { padding: 22px 20px 25px; display: flex; flex-direction: column; flex: 1; }
.news-date { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #4C4C4C; margin-bottom: 14px; }
.news-date svg { width: 16px; height: 16px; }
.news-card-body h3 { font-size: 19px; font-weight: 600; color: #333; line-height: 1.45; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color 0.3s; }
.news-card:hover h3 { color: #4C4C4C; }
.news-card-body p { font-size: 14px; color: #888; line-height: 1.8; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 8px; margin-top: 50px; list-style: none; padding: 0; flex-wrap: wrap; }
.pagination li { list-style: none; }
.pagination li a { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 8px; color: #555; font-size: 14px; text-decoration: none; }
.pagination li a[href] { border: 1px solid #ddd; transition: all 0.3s; }
.pagination li a[href]:hover { border-color: #4C4C4C; color: #4C4C4C; }
.pagination li.active a { background: #4C4C4C; border-color: #4C4C4C; color: #fff; }
.page-num { min-width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0 8px; border: 1px solid #ddd; color: #555; font-size: 14px; text-decoration: none; transition: all 0.3s; }
.page-num:hover { border-color: #4C4C4C; color: #4C4C4C; }
.page-num.active { background: #4C4C4C; border-color: #4C4C4C; color: #fff; }
.page-ellipsis { min-width: 24px; height: 36px; display: flex; align-items: center; justify-content: center; color: #999; }

/* ==================== Responsive ==================== */
@media (max-width: 1024px) {
    .news-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 15px; }
    .news-title { font-size: 28px; margin-bottom: 30px; }
    .news-card-body { padding: 18px 15px 20px; }
    .news-card-body h3 { font-size: 17px; }
}

@media (max-width: 768px) {
    .page-banner { height: 180px; }
    .page-banner h1 { font-size: 30px; }
    .newslist-wrap { padding: 30px 0 40px; }
    .news-title { font-size: 24px; margin-bottom: 20px; }
    .news-grid { grid-template-columns: 1fr; gap: 15px; }
    .news-card-img { aspect-ratio: 16/9; }
    .news-card-body h3 { font-size: 16px; -webkit-line-clamp: 3; }
    .pagination { margin-top: 30px; flex-wrap: wrap; }
}