/* ==========================================================================
   responsive.css — 响应式断点覆写
   移动优先：默认样式为手机，通过 min-width 逐级增强
   YXShop 官网与文档站
   ========================================================================== */

/* ==================== 默认（手机 < 640px） ==================== */

/* 导航栏：隐藏链接，显示汉堡菜单 */
.nav-links {
    display: none;
}

.nav-toggle {
    display: flex;
}

/* 移动端导航展开 */
.nav--mobile-open .nav-links {
    display: flex;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    flex-direction: column;
    background: var(--color-bg);
    padding: var(--space-md);
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.nav--mobile-open .nav-links li {
    width: 100%;
}

.nav--mobile-open .nav-links a {
    display: block;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-border);
}

.nav--mobile-open .nav-links a.active::after {
    display: none;
}

/* 网格：单列 */
.grid--2,
.grid--3,
.grid--4 {
    grid-template-columns: 1fr;
}

/* Footer 网格：单列 */
.footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
}

/* 按钮组 */
.btn-group {
    flex-direction: column;
    width: 100%;
}

.btn-group .btn {
    width: 100%;
}

/* Section 间距缩小 */
.section {
    padding: var(--space-xl) 0;
}

/* 表格字体缩小 */
.table {
    font-size: 0.8rem;
}

.table th,
.table td {
    padding: var(--space-sm) var(--space-md);
}

/* Hero 区块 */
.hero {
    text-align: center;
    padding-top: 100px;
}

.hero h1 {
    font-size: 2rem;
}

.hero-actions {
    flex-direction: column;
    width: 100%;
}

.hero-actions .btn {
    width: 100%;
}


/* ==================== sm（640px ~ 767px） ==================== */
@media (min-width: 640px) {
    .grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr;
    }

    .hero h1 {
        font-size: 2.5rem;
    }

    .hero-actions {
        flex-direction: row;
        width: auto;
    }

    .hero-actions .btn {
        width: auto;
    }

    .btn-group {
        flex-direction: row;
        width: auto;
    }

    .btn-group .btn {
        width: auto;
    }
}


/* ==================== md（768px ~ 1023px） ==================== */
@media (min-width: 768px) {
    .grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }

    /* 平板：依然显示汉堡菜单 */
    .nav-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
    }

    .nav--mobile-open .nav-links {
        display: flex;
    }

    .section {
        padding: var(--space-2xl) 0;
    }

    .hero h1 {
        font-size: 3rem;
    }
}


/* ==================== lg（1024px ~ 1279px） ==================== */
@media (min-width: 1024px) {
    .grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid--4 {
        grid-template-columns: repeat(4, 1fr);
    }

    /* 桌面：显示完整导航 */
    .nav-toggle {
        display: none;
    }

    .nav-links {
        display: flex;
    }

    .hero {
        text-align: left;
        padding-top: 120px;
    }

    .hero h1 {
        font-size: 3.5rem;
    }
}


/* ==================== xl（>= 1280px） ==================== */
@media (min-width: 1280px) {
    .container {
        padding: 0 var(--space-lg);
    }
}

/* ==================== 打印 ==================== */
@media print {
    .nav,
    .footer,
    .nav-toggle,
    .btn {
        display: none;
    }

    .section {
        padding: var(--space-md) 0;
    }
}