/* 响应式样式 - 移动端适配 */

/* 大屏幕 (1200px以下) */
@media(max-width:1200px){
    .container{padding:0 16px}
}

/* 平板 (992px以下) */
@media(max-width:992px){
    .cards-grid{grid-template-columns:repeat(2,1fr)}
    .news-grid{grid-template-columns:repeat(2,1fr)}
    .footer__top{grid-template-columns:repeat(2,1fr)}
    .hero__title{font-size:2.5rem}
    .section__title{font-size:1.75rem}
}

/* 小平板 (768px以下) */
@media(max-width:768px){
    /* 导航菜单 */
    .nav{display:none;position:fixed;top:70px;left:0;right:0;background:var(--header-bg);padding:20px;border-bottom:1px solid var(--color-border);z-index:999}
    .nav.open{display:block}
    .nav__list{flex-direction:column;gap:0}
    .nav__item{width:100%}
    .nav__link{width:100%;justify-content:flex-start;height:auto;padding:12px 16px;border-radius:0}
    .nav__login{margin-left:auto}
    .nav__login-btn{height:36px;padding:0 16px;font-size:14px}
    .mobile-menu-btn{display:flex;align-items:center;justify-content:center;margin-left:12px;width:40px;height:40px}
    .header__inner{justify-content:space-between;gap:8px;padding:0 16px}
    .logo__img{height:36px}
    
    /* Hero区域 */
    .hero{padding:60px 0;margin-top:60px}
    .hero__title{font-size:2rem}
    .hero__subtitle{font-size:1rem}
    
    /* 内容区域 */
    .section{padding:50px 0}
    .section__header{margin-bottom:40px}
    .section__title{font-size:1.5rem}
    .section__subtitle{font-size:1rem}
    
    /* 页面横幅 */
    .page-banner{padding:50px 0;margin-top:60px}
    .page-banner h1{font-size:2rem}
    
    /* 卡片网格 */
    .cards-grid{grid-template-columns:1fr;gap:20px}
    .news-grid{grid-template-columns:1fr;gap:20px}
    .card{padding:24px}
    
    /* 页脚 */
    .footer__top{grid-template-columns:1fr;gap:30px}
    .footer{padding:40px 0 20px}
    
    /* 统计 */
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .stat-number{font-size:2.5rem}
    
    /* 按钮 */
    .btn{padding:10px 20px;font-size:0.9rem}
    
    /* 文章页 */
    .article{padding:40px 0}
    .article h1{font-size:1.75rem}
    
    /* 分页 */
    .pagination{gap:4px}
    .pagination a,.pagination span{padding:6px 12px;font-size:0.875rem}
}

/* 手机 (576px以下) */
@media(max-width:576px){
    /* 基础 */
    body{font-size:14px}
    .container{padding:0 12px}
    
    /* 头部 */
    .header__inner{height:60px}
    .hero{margin-top:60px}
    .page-banner{margin-top:60px}
    
    /* Hero区域 */
    .hero{padding:40px 0}
    .hero__title{font-size:1.75rem}
    .hero__subtitle{font-size:0.9rem;margin-bottom:24px}
    
    /* 内容区域 */
    .section{padding:40px 0}
    .section__header{margin-bottom:30px}
    .section__title{font-size:1.25rem}
    .section__subtitle{font-size:0.9rem}
    
    /* 页面横幅 */
    .page-banner{padding:40px 0}
    .page-banner h1{font-size:1.5rem}
    .page-banner p{font-size:0.9rem}
    
    /* 卡片 */
    .card{padding:20px}
    .card__icon{font-size:2rem}
    .card__title{font-size:1.1rem}
    
    /* 新闻卡片 */
    .news-card__img{height:160px}
    .news-card__body{padding:16px}
    .news-card__title{font-size:1rem}
    
    /* 统计 */
    .stats-grid{grid-template-columns:1fr 1fr;gap:16px}
    .stat-item{padding:20px}
    .stat-number{font-size:2rem}
    .stat-label{font-size:0.875rem}
    
    /* 表单 */
    .form-group{margin-bottom:16px}
    .form-control{padding:10px 14px}
    
    /* 页脚 */
    .footer__top{grid-template-columns:1fr;gap:24px}
    .footer__title{font-size:1rem;margin-bottom:12px}
    .footer__text{font-size:0.875rem}
    .footer__links li{margin-bottom:6px}
    .footer__links a{font-size:0.875rem}
    .footer__contact li{font-size:0.875rem;margin-bottom:8px}
    .footer__bottom{padding-top:16px}
    .footer__copyright{font-size:0.75rem}
    
    /* 两列布局变单列 */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important}
    
    /* 按钮 */
    .btn{width:100%;justify-content:center;margin-bottom:8px}
    .btn:last-child{margin-bottom:0}
}

/* 小手机 (375px以下) */
@media(max-width:375px){
    .hero__title{font-size:1.5rem}
    .section__title{font-size:1.1rem}
    .stat-number{font-size:1.75rem}
    .logo__img{height:32px}
}

/* 横屏优化 */
@media(max-height:500px) and (orientation:landscape){
    .hero{padding:30px 0}
    .hero__title{font-size:1.75rem}
    .section{padding:30px 0}
}