/* 文章检索/列表页（参考 hotels 列表的 banner + 卡片网格） */

/* Banner */
.destination_banner {
    min-height: 520px;
    background: url('../../../assets/img/hotels/top_bg.jpg') no-repeat center center;
    background-size: cover;
    padding: 60px 0;
    color: #fff;
    position: relative;
}
.destination_banner::before{
    content:'';
    position:absolute;left:0;right:0;top:0;bottom:0;
    background: linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.20) 100%);
}
.destination_overlay{position:relative;z-index:1;margin-top:120px;}
.destination_title{font-size:2.5rem;font-weight:600;text-align:center;margin-bottom:18px;color:#fff;}
.destination_desc_en{font-size:1rem;line-height:1.8;text-align:center;color:rgba(255,255,255,.95);max-width:980px;margin:0 auto;}

/* Filters */
.article_filters{
    max-width: 980px;
    margin: 18px auto 0 auto;
    display:flex;
    gap:12px;
    justify-content:center;
    flex-wrap:wrap;
}
.article_filters .filter_item{
    display:flex;
    align-items:center;
    gap:8px;
    background: rgba(255,255,255,.92);
    border-radius: 999px;
    padding: 8px 14px;
}
.article_filters label{margin:0;font-size:13px;color:#333;font-weight:600;}
.article_filters select,
.article_filters input{
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
}
.article_filters .filter_btn{
    border:0;
    border-radius: 999px;
    padding: 8px 16px;
    background:#ff6611;
    color:#fff;
    font-weight:600;
}

/* Cards Section */
.article_cards_section{padding:50px 0;background:#fff;}
.article_cards_header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:18px;
    margin-top:10px;
    gap:12px;
    flex-wrap:wrap;
}
.article_cards_title{font-size:2rem;color:#ff6600;font-weight:bold;margin:0;}
.article_cards_hint{font-size:13px;color:#666;margin:0;}

.article_cards_grid{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
}
.article_card{
    flex: 1 1 30%;
    max-width: 32%;
    min-width: 300px;
    background:#fff;
    border-radius:8px;
    box-shadow:0 2px 8px rgba(0,0,0,0.06);
    border:1.5px solid #eee;
    text-decoration:none;
    overflow:hidden;
    transition: box-shadow .2s, border-color .2s, transform .2s;
    display:flex;
    flex-direction:column;
}
.article_card:hover{
    border-color:#ff6600;
    box-shadow:0 4px 16px rgba(255,102,0,0.10);
    transform: translateY(-2px);
    text-decoration:none;
}
.article_card_img{
    width:100%;
    aspect-ratio: 1.6/1;
    background:#d9d9d9;
    background-size:cover;
    background-position:center;
}
.article_card_info{padding:14px 14px 12px 14px;display:flex;flex-direction:column;gap:8px;flex:1;}
.article_card_meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.article_badge{
    display:inline-block;
    font-size:12px;
    color:#ff6611;
    border:1px solid rgba(255,102,0,.35);
    padding:2px 10px;
    border-radius:999px;
    background: rgba(255,102,0,.06);
}
.article_date{font-size:12px;color:#666;}
.article_card_title{font-weight:700;font-size:16px;color:#222;line-height:1.3;margin:0;}
.article_card_desc{color:#444;font-size:13px;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.article_card_tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;}
.article_tag{font-size:12px;color:#666;border:1px solid #e6e6e6;border-radius:999px;padding:2px 10px;background:#fafafa;}

/* Pagination */
.article_pager{display:flex;justify-content:center;align-items:center;gap:10px;margin-top:28px;flex-wrap:wrap;}
.article_pager a,
.article_pager span{
    display:inline-block;
    padding:8px 12px;
    border-radius:8px;
    border:1px solid #e6e6e6;
    color:#333;
    text-decoration:none;
    font-size:13px;
}
.article_pager .is-active{
    background:#ff6611;
    border-color:#ff6611;
    color:#fff;
}
.article_pager .is-disabled{
    opacity:.45;
    pointer-events:none;
}

@media (max-width: 992px){
    .article_card{min-width:48%;max-width:48%;}
}
@media (max-width: 600px){
    .destination_overlay{margin-top:90px;}
    .article_cards_grid{gap:12px;}
    .article_card{min-width:98%;max-width:98%;}
}