/*
 * 新闻动态页面样式文件
 * 包含新闻动态页面的布局和样式
 */
 
   /* 新闻动态首页部分 */
 /* 通栏banner图 */
.water-page {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.water-banner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
/*    background-color: rgba(0, 0, 0, 0.5);*/
}

.by-line {
    background: url('../images/by-line.png');
    background-size: contain;
    width: 100%;
    height: 12px;
}

.banner-content {
    text-align: center;
    color: white;
}

.banner-title {
    font-size: 3em;
    font-weight: 400;
    margin-top: 50px;
    text-shadow: 0 0 7px rgba(0,0,0,.3);
}  
 :root{
    --ink:#111;
    --ghost:#e4e4e4;
    --hairline:#b6b6b6;
    --btn:#999;
    --serif:"Times New Roman","Times","Songti SC","Noto Serif SC",serif;
    --sans:"Helvetica Neue","Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}
  body{
    margin:0;
    background:#fff;
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img{display:block;}

  .news{
    width:min(72vw, 1000px);
    margin-inline:auto;
    container-type:inline-size;
  }
  .inner{
    --u:.72vw;                 /* fallback, replaced by 1cqw when supported */
    padding:calc(var(--u) * 7) 0 calc(var(--u) * 5.6);
  }
  @supports (container-type:inline-size){
    .inner{--u:1cqw;}
  }

  /* 顶部英文标题 */
  .ghost{
    margin:0 0 calc(var(--u) * .4);
    font-family:var(--serif);
    font-size:calc(var(--u) * 10.6);
    line-height:.78;
    font-weight:400;
    letter-spacing:.005em;
    color:var(--ghost);
    text-transform:uppercase;
    user-select:none;
  }

  .list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:calc(var(--u) * 8);
  }

  /* 卡片 */
  .card{
    position:relative;
    display:block;
    aspect-ratio:16/9;
    border-radius:calc(var(--u) * 2.2);
    isolation:isolate;
  }
  .card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border:1px solid var(--hairline);
    border-radius:inherit;
    transform:translate(calc(var(--u) * 2.7), calc(var(--u) * 3.3));
    transition:transform .5s cubic-bezier(.22,.61,.36,1), border-color .3s;
  }
  .card__media{
    position:absolute;
    inset:0;
    border-radius:inherit;
    overflow:hidden;
    background:#eee;
  }
  .card__media img{
    width:100%;
    height:100%;
    object-fit:cover;
    transform:scale(1.001);
    transition:transform .8s cubic-bezier(.22,.61,.36,1);
  }
  .card__date{
    position:absolute;
    top:calc(var(--u) * 2.1);
    right:calc(var(--u) * 3.1);
    font-size:calc(var(--u) * 6.1);
    font-weight:200;
    letter-spacing:.02em;
    line-height:1;
    color:#fff;
    font-variant-numeric:tabular-nums;
    z-index: 2;
  }
  .card__title{
    position:absolute;
    left:calc(var(--u) * 4.5);
    bottom:calc(var(--u) * 5.5);
    right:calc(var(--u) * 4.5);
    margin:0;
    font-size:calc(var(--u) * 5.8);
    font-weight:300;
    line-height:1.26;
    letter-spacing:.03em;
    color:#fff;
    width: 600px;
    z-index: 2;
  }
  .card:hover .card__media img{transform:scale(1.035);}
  .card:hover::before{transform:translate(calc(var(--u) * 3.1), calc(var(--u) * 3.7));}
  .card:focus-visible{outline:none;}
  .card:focus-visible::before{outline:2px solid #111;outline-offset:6px;}

  /* 叶片装饰 */
  .leaves{
    display:block;
    width:calc(var(--u) * 2);
    margin:calc(var(--u) * 8.8) auto 0;
    height:auto;
  }

  /* 更多按钮 */
  .more-wrap{
    display:flex;
    justify-content:center;
    margin-top:calc(var(--u) * 2.2);
  }
  .more{
    position:relative;
    display:inline-block;
    padding:calc(var(--u) * 1.35) calc(var(--u) * 2.9);
    border-radius:999px;
    background:var(--btn);
    color:#fff;
    font-size:calc(var(--u) * 2.5);
    font-weight:300;
    letter-spacing:.12em;
    line-height:1;
    transition:background .25s;
  }
  .more::after{
    content:"";
    position:absolute;
    inset:calc(var(--u) * -.8);
    border:1px solid var(--hairline);
    border-radius:999px;
    transition:border-color .25s;
  }
  .more:hover{background:#808080;}
  .more:hover::after{border-color:#8f8f8f;}
  .more:focus-visible{outline:none;}
  .more:focus-visible::after{outline:2px solid #111;outline-offset:2px;}

  @media (max-width:640px){
    .news{width:88vw;}
    .inner{padding-top:calc(var(--u) * 9);}
    .ghost{font-size:calc(var(--u) * 13.2);line-height:.82;margin-bottom:calc(var(--u) * 1.6);}
    .list{gap:calc(var(--u) * 11);}
    .card__date{font-size:calc(var(--u) * 7);top:calc(var(--u) * 3);right:calc(var(--u) * 3.6);}
    .card__title{font-size:calc(var(--u) * 7.2);left:calc(var(--u) * 5);bottom:calc(var(--u) * 5.6);right:calc(var(--u) * 5);}
    .card::before{transform:translate(calc(var(--u) * 2), calc(var(--u) * 2.6));}
    .leaves{margin-top:calc(var(--u) * 12);width:calc(var(--u) * 2.6);}
    .more{font-size:calc(var(--u) * 3.4);padding:calc(var(--u) * 1.7) calc(var(--u) * 4);letter-spacing:.14em;}
    .more-wrap{margin-top:calc(var(--u) * 3.4);}
  } 
  .card-bk {
    width: 100%;
    height: 300px;
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5));
    position: absolute;
    bottom: 0;
    z-index: 1;
    border-radius:calc(var(--u) * 2.2) ;    
  }
    .card-bt {
    width: 100%;
    height: 150px;
    background: linear-gradient(to top, transparent, rgba(0, 0, 0, 0.5));
    position: absolute;
    top: 0;
    z-index: 1;
    border-radius:calc(var(--u) * 2.2) ;
  }
.shuidi {
    width: 100%;
    margin: 100px 0 0;
}
.shuidi img {
    width: 21px;
    margin: 0 auto;
}
/* 新闻列表部分 */
.news-list {
    padding: 60px 0;
    background-color: white;
}

.news-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.news-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

.news-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    position: relative;
    z-index: 1;
}

.news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.news-image {
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease;
}

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

.news-info {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.news-title {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 10px;
    color: #333;
    line-height: 1.3;
    transition: color 0.3s ease;
}

.news-card:hover .news-title {
    color: #e60012;
}

.news-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 15px;
    display: block;
}

.news-description {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin-bottom: 20px;
    flex: 1;
}

.news-link {
    display: inline-block;
    color: #e60012;
    text-decoration: none;
    font-size: 14px;
    transition: all 0.3s ease;
}

.news-link:hover {
    color: #c40010;
    text-decoration: underline;
}

/* 分页部分 */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.pagination-list {
    display: flex;
    list-style: none;
    gap: 5px;
}

.pagination-item {
    margin: 0 2px;
}

.pagination-link {
    display: inline-block;
    padding: 8px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    color: #333;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 14px;
}

.pagination-link:hover {
    background-color: #f9f9f9;
    border-color: #e60012;
    color: #e60012;
}

.pagination-link.active {
    background-color: #e60012;
    border-color: #e60012;
    color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .news-container {
        padding: 0 20px;
    }
    
    .news-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .news-image {
        height: 180px;
    }
    
    .news-info {
        padding: 15px;
    }
}