@charset "UTF-8";
/* ===== 响应式样式 - 768px 和 480px 断点 ===== */

/* ===== 平板 (max-width: 768px) ===== */
@media (max-width: 768px) {
    .header-inner { height: 64px; padding: 0 16px; }
    .logo { font-size: 22px; }
    .logo span { font-size: 10px; }

    /* 汉堡菜单 - 宫格式展开 */
    .hamburger { display: flex; }
    .nav {
        position: fixed;
        top: 64px;
        right: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        background: #fff;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1px;
        transition: max-height 0.4s ease;
        box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    }
    .nav.active { max-height: 460px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr 1fr; }
    .nav a { padding: 14px 10px; text-align: center; font-size: 14px; background: var(--bg); border-radius: 10px; margin: 2px; }
    .nav a.active::after { display: none; }
    .nav a.active { background: var(--gradient); color: #fff; }

    /* Banner */
    .banner { height: 320px; }
    .banner-slide .overlay h2 { font-size: 26px; margin-bottom: 12px; }
    .banner-slide .overlay p { font-size: 14px; }
    .banner-btn { width: 44px; height: 44px; font-size: 24px; padding: 10px; }

    /* Section */
    .section { padding: 44px 16px; }
    .section-title { margin-bottom: 34px; }
    .section-title h2 { font-size: 26px; }

    /* About */
    .about-grid { grid-template-columns: 1fr; gap: 28px; }
    .about-img img { height: 260px; }
    .about-text h3 { font-size: 22px; }
    .about-features { grid-template-columns: 1fr; }

    /* Masonry - 2列 */
    .masonry { column-count: 2; column-gap: 16px; }
    .masonry-item { margin-bottom: 16px; }

    /* Reviews */
    .reviews-grid { grid-template-columns: 1fr; gap: 18px; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; gap: 24px; }
    .contact-info, .contact-form { padding: 28px; }

    /* Links */
    .links-grid { grid-template-columns: repeat(2, 1fr); }

    /* Page banner */
    .page-banner { padding: 46px 16px; }
    .page-banner h1 { font-size: 28px; }

    /* Article */
    .article-box { padding: 28px 20px; }
    .article-box h1 { font-size: 24px; }
    .article-box h2 { font-size: 19px; }
    .article-nav { flex-direction: column; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
    .footer { padding: 36px 16px 0; }

    /* Floating */
    .floating-contact { right: 14px; bottom: 90px; }
    .back-top { right: 14px; bottom: 160px; }
}

/* ===== 手机 (max-width: 480px) ===== */
@media (max-width: 480px) {
    .header-inner { height: 58px; padding: 0 12px; }
    .logo { font-size: 20px; }

    .nav.active { grid-template-columns: 1fr 1fr; }

    .banner { height: 260px; }
    .banner-slide .overlay h2 { font-size: 22px; }
    .banner-slide .overlay p { font-size: 13px; }
    .banner-btn { width: 38px; height: 38px; font-size: 20px; }
    .banner-btn.prev { left: 8px; }
    .banner-btn.next { right: 8px; }

    .section { padding: 36px 12px; }
    .section-title h2 { font-size: 23px; }

    .about-img img { height: 200px; }

    /* Masonry - 1列 */
    .masonry { column-count: 1; }

    .news-item { flex-direction: column; gap: 14px; }
    .news-date { align-self: flex-start; }

    .contact-info, .contact-form { padding: 22px; }

    .links-grid { grid-template-columns: 1fr; }

    .page-banner { padding: 36px 12px; }
    .page-banner h1 { font-size: 24px; }

    .article-box { padding: 22px 16px; }
    .article-box h1 { font-size: 21px; }
    .article-meta { flex-wrap: wrap; gap: 10px; }

    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}