/* ====== 基础样式 ====== */
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter', sans-serif; line-height:1.7; color:#333; background:#f8f9fa; }
h1,h2,h3,h4,h5,h6 { font-family:'Playfair Display', serif; font-weight:700; color:#1a1a1a; }
a { text-decoration:none; color:inherit; }
img { max-width:100%; border-radius:8px; }

/* ====== Header ====== */
.header { background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.05); position:sticky; top:0; z-index:1000; }
.logo { font-size:1.8rem; font-weight:700; color:#0d6efd; }
.nav-menu { display:flex; gap:16px; }
.nav-link { font-weight:500; color:#333; transition:0.2s; }
.nav-link:hover { color:#0d6efd; }
.search-form { display:flex; gap:8px; }
.search-form input { padding:6px 10px; border:1px solid #ddd; border-radius:6px; }
.search-form button { border:none; background:none; cursor:pointer; }

/* ====== Offcanvas Menu ====== */
.offcanvas-menu { position:fixed; top:0; right:-100%; width:80%; max-width:320px; height:100vh; background:#fff; transition:0.3s; z-index:1500; overflow-y:auto; padding:20px; }
.offcanvas-menu.active { right:0; }
.close-btn { font-size:1.5em; cursor:pointer; background:none; border:none; }
.offcanvas-nav a { display:block; padding:12px 0; border-bottom:1px solid #f0f0f0; font-size:1.1em; }
.offcanvas-nav a:hover { color:#0d6efd; }

/* ====== Hero Banner ====== */
.hero-banner { background:linear-gradient(rgba(255,255,255,0.6), rgba(255,255,255,0.6)), url('https://via.placeholder.com/1200x400') center/cover no-repeat; border-radius:12px; color:#333; text-align:center; }
.hero-banner h1 { font-size:2.5rem; margin-bottom:15px; }
.hero-banner p { font-size:1.1rem; }

/* ====== Breaking News Carousel ====== */
.horizontal-swiper { display:flex; overflow-x:auto; gap:16px; padding:16px 0; -webkit-overflow-scrolling:touch; }
.horizontal-swiper::-webkit-scrollbar { display:none; }
.swiper-slide { min-width:280px; background:#fff; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,0.08); flex:0 0 auto; cursor:pointer; transition:0.3s; }
.swiper-slide:hover { transform:translateY(-3px); }
.swiper-slide img { width:100%; height:160px; object-fit:cover; border-radius:12px; }
.category-badge { display:inline-block; padding:4px 10px; border-radius:50px; font-size:0.8em; font-weight:600; color:#fff; background:#0d6efd; margin:8px; }

/* ====== Category Cards ====== */
.category-module { margin-bottom:50px; }
.category-module h2 { font-size:1.8rem; color:#0d6efd; margin-bottom:20px; text-align:center; }
.articles-staggered { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.staggered-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 4px 16px rgba(0,0,0,0.08); transition:0.3s; }
.staggered-card:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(0,0,0,0.15); }
.staggered-img { width:100%; height:180px; object-fit:cover; }
.staggered-body { padding:16px; }
.staggered-title { font-size:1.2rem; margin:8px 0; font-weight:700; }
.staggered-meta { font-size:0.85rem; color:#666; margin-bottom:8px; }
.staggered-excerpt { font-size:0.95rem; color:#555; line-height:1.4; margin-bottom:10px; }
.staggered-link { color:#0d6efd; font-weight:600; text-decoration:none; }
.staggered-link:hover { text-decoration:underline; }

/* ====== Popular Sidebar ====== */
.popular-list a { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #f0f0f0; }
.popular-list .text { flex:1; }
.popular-list .category { font-size:0.8em; color:#777; }
.popular-list .title { font-size:0.95em; font-weight:600; }

/* ====== Footer ====== */
.footer { background:#f8f9fa; color:#333; margin-top:50px; }
.footer-logo { font-size:1.5rem; color:#0d6efd; font-weight:700; }
.footer-links a { color:#333; margin-right:16px; }
.footer-links a:hover { color:#0d6efd; text-decoration:underline; }
.ads-box{
    max-width:1200px;
    min-width:320px;
    margin:auto;
    width:100%;
    display: flex;
    justify-content: center;
}


#article-list{
    width:100%;
    max-width:800px;
    margin:0 auto;
}

/* ====== Responsive ====== */
@media(max-width:991.98px){ .d-lg-none{display:block!important} .d-lg-flex{display:none!important} }
@media(max-width:768px){
  .articles-staggered { grid-template-columns:1fr; }
  .staggered-img { height:180px; }
}