/**
 * 如东在线 - 响应式样式
 * frontend/assets/css/responsive.css
 */

/* ======== 平板 ≤ 1200px ======== */
@media (max-width: 1200px) {
    .container { max-width: 100%; padding: 0 16px; }
    .main-inner.has-sidebar { flex-direction: column; }
    .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 16px; }
    .sidebar .widget { flex: 1; min-width: 220px; }
    .footer-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ======== 手机 ≤ 768px ======== */
@media (max-width: 768px) {
    body { font-size: 15px; }

    /* 头部 */
    .main-nav {
        position: fixed; top: 0; right: -280px; width: 280px; height: 100vh;
        flex-direction: column; background: var(--bg-white); padding: 60px 20px 20px;
        box-shadow: -4px 0 24px rgba(0,0,0,0.15); z-index: 2000;
        transition: right 0.3s ease; gap: 0;
    }
    .main-nav.open { right: 0; }
    .main-nav a { padding: 14px 12px; border-radius: var(--radius-sm); font-size: 16px; }
    .mobile-toggle { display: block; z-index: 2001; }

    /* 搜索框缩小 */
    .search-box input { width: 100px; }
    .auth-links { display: none; }
    .user-name { display: none; }

    /* 主内容 */
    .main-inner.has-sidebar { flex-direction: column; }
    .sidebar { width: 100%; flex-direction: column; }
    .sidebar .widget { min-width: auto; }

    /* 文章列表 */
    .article-item { flex-direction: column; }
    .article-thumb { width: 100%; height: 180px; }
    .top-article { flex-direction: column; }
    .top-article-img { width: 100%; height: 200px; }

    /* Banner */
    .banner-slider { height: 220px; }
    .banner-content h2 { font-size: 22px; }
    .banner-content p { font-size: 14px; }

    /* 页脚 */
    .footer-grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ======== 小手机 ≤ 480px ======== */
@media (max-width: 480px) {
    .logo-text { font-size: 18px; }
    .logo-icon { font-size: 22px; }
    .search-box { display: none; } /* 小屏隐藏搜索，点击图标展开 */
    .banner-slider { height: 180px; }
    .banner-content h2 { font-size: 18px; }
    .btn { padding: 8px 20px; font-size: 14px; }
    .card-title { font-size: 15px; }
}

/* ======== 打印样式 ======== */
@media print {
    .site-header, .site-footer, .back-to-top, .sidebar, .banner-section { display: none; }
    .site-main { padding: 0; }
    body { background: #fff; color: #000; }
}