/* ===================================
   星图AI产品官网 - 响应式样式
   版本：v2.0
   =================================== */

/* ===================================
   响应式断点定义
   - 移动端：<768px
   - 平板端：768px-1024px
   - 桌面端：>1024px
   =================================== */

/* ===================================
   平板端适配（768px-1024px）
   =================================== */
@media (max-width: 1024px) {
    /* Hero区块 - 保持垂直布局 */
    .hero {
        padding: 80px 0;
        min-height: 600px;
    }

    .hero__content {
        max-width: 800px;  /* 稍微减小 */
        padding-bottom: var(--spacing-lg);
    }

    .hero__title {
        font-size: 44px;
    }

    .hero__subtitle {
        font-size: 32px;
    }

    .hero__description {
        font-size: 18px;
    }

    .hero__visual {
        margin-top: var(--spacing-lg);
    }

    .hero__illustration {
        max-width: 900px;  /* 平板端插图900px */
    }

    /* 网格系统调整为2列 */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 思维升级区块 */
    .trap-card {
        grid-template-columns: 1fr;
    }

    .trap-card__illustration {
        max-width: 100%;
        margin-top: var(--spacing-md);
    }

    /* 表格保持水平滚动 */
    .data-table,
    .solution-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* 下载卡片 */
    .download__buttons {
        flex-direction: column;
        align-items: center;
    }

    .download-card {
        width: 100%;
        max-width: 400px;
    }

    /* 下载信息网格 - 改为单列 */
    .download__info-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
}

/* ===================================
   移动端适配（<768px）
   =================================== */
@media (max-width: 768px) {
    /* 导航栏 */
    .nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-bg-white);
        box-shadow: var(--shadow-md);
        padding: var(--spacing-md);
    }

    .nav.active {
        display: block;
    }

    .nav__list {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .mobile-menu-btn {
        display: flex;
    }

    /* Hero区块 - 保持垂直布局 */
    .hero {
        padding: 60px 0;  /* 增加上下内边距 */
        min-height: auto;
    }

    .hero__content {
        padding-right: 0;
        max-width: 600px;
        padding-bottom: var(--spacing-lg);
    }

    .hero__title {
        font-size: 36px;  /* 从32px增加 */
    }

    .hero__subtitle {
        font-size: 28px;  /* 从24px增加 */
    }

    .hero__description {
        font-size: 16px;
    }

    .hero__cta {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .hero__visual {
        margin-top: var(--spacing-lg);
    }

    .hero__illustration {
        max-width: 600px;  /* 移动端保持600px */
    }

    /* 章节标题字号调整 */
    .section-title {
        font-size: 28px;
    }

    .subsection-title {
        font-size: 20px;
    }

    .traps__title {
        font-size: 22px;
    }

    /* 网格系统改为单列 */
    .grid-4,
    .grid-2 {
        grid-template-columns: 1fr;
    }

    /* 陷阱卡片 */
    .trap-card {
        grid-template-columns: 1fr;
        padding: var(--spacing-md);
    }

    .trap-card__illustration {
        order: -1;
        max-width: 100%;
        margin-bottom: var(--spacing-md);
    }

    .trap-card__title {
        font-size: 18px;
    }

    /* 数据表格改为卡片式展示 */
    .data-table,
    .solution-table {
        display: block;
        border: none;
        box-shadow: none;
    }

    .data-table thead,
    .solution-table thead {
        display: none;
    }

    .data-table tbody,
    .solution-table tbody {
        display: block;
    }

    .data-table tr,
    .solution-table tr {
        display: block;
        background-color: var(--color-bg-white);
        border-radius: var(--radius-md);
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-md);
        box-shadow: var(--shadow-card);
    }

    .data-table td,
    .solution-table td {
        display: block;
        border: none;
        padding: 4px 0;
        font-size: 14px;
    }

    .data-table td:first-child,
    .solution-table td:first-child {
        font-weight: 600;
        color: var(--color-primary);
        margin-bottom: var(--spacing-xs);
    }

    /* 功能卡片 */
    .feature-card {
        padding: var(--spacing-md);
    }

    .feature-card__icon {
        font-size: 40px;
    }

    .feature-card__title {
        font-size: 16px;
    }

    /* 价值卡片 */
    .value-card__value {
        font-size: 36px;
    }

    .value-card__title {
        font-size: 16px;
    }

    /* 战略卡片 */
    .strategic-card {
        padding: var(--spacing-md);
    }

    .strategic-card__icon {
        font-size: 32px;
    }

    .strategic-card__title {
        font-size: 15px;
    }

    /* 下载卡片 */
    .download-card {
        padding: var(--spacing-md);
    }

    .download-card__icon svg {
        width: 48px;
        height: 48px;
    }

    .download-card__title {
        font-size: 16px;
    }

    .download-card__version {
        font-size: 13px;
    }

    /* 下载信息卡片 */
    .download__info-grid {
        padding: 0 var(--spacing-sm);
    }

    .download__instructions,
    .download__requirements {
        padding: var(--spacing-md);
    }

    .download__info-title {
        font-size: 16px;
    }

    .download__info-list {
        font-size: 14px;
        line-height: 1.6;
    }
}

/* ===================================
   小屏移动端适配（<480px）
   =================================== */
@media (max-width: 480px) {
    /* Hero区块 */
    .hero__title {
        font-size: 28px;
    }

    .hero__subtitle {
        font-size: 20px;
    }

    .hero__description {
        font-size: 14px;
    }

    /* 章节标题 */
    .section-title {
        font-size: 24px;
    }

    .subsection-title {
        font-size: 18px;
    }

    /* 按钮 */
    .btn {
        width: 100%;
        padding: 10px 20px;
    }

    .hero__cta {
        width: 100%;
    }

    /* 痛点卡片 */
    .pain-card {
        padding: var(--spacing-md);
    }

    .pain-card__icon {
        font-size: 40px;
    }

    .pain-card__title {
        font-size: 16px;
    }

    .pain-card__desc {
        font-size: 14px;
    }

    /* 陷阱案例 */
    .trap-card__case {
        font-size: 13px;
    }

    /* 能力卡片 */
    .capability-card {
        padding: var(--spacing-md);
    }

    .capability-card__icon {
        font-size: 32px;
    }

    .capability-card__title {
        font-size: 16px;
    }

    .capability-card__desc,
    .capability-card__example,
    .capability-card__value {
        font-size: 13px;
    }

    /* 对比卡片 */
    .compare-card {
        padding: var(--spacing-md);
    }

    .compare-card__title {
        font-size: 18px;
    }

    .compare-card__list li {
        font-size: 14px;
    }

    /* 功能卡片 */
    .feature-card {
        padding: var(--spacing-md);
    }

    .feature-card__icon {
        font-size: 36px;
    }

    .feature-card__title {
        font-size: 16px;
    }

    .feature-card__desc,
    .feature-card__value {
        font-size: 13px;
    }

    .feature-card__tag {
        font-size: 11px;
        padding: 3px 10px;
    }

    /* 价值卡片 */
    .value-card {
        padding: var(--spacing-md);
    }

    .value-card__value {
        font-size: 32px;
    }

    .value-card__title {
        font-size: 15px;
    }

    .value-card__desc {
        font-size: 13px;
    }

    /* 战略卡片 */
    .strategic-card {
        padding: var(--spacing-md);
    }

    .strategic-card__icon {
        font-size: 28px;
    }

    .strategic-card__title {
        font-size: 15px;
    }

    .strategic-card__desc {
        font-size: 13px;
    }
}

/* ===================================
   横屏模式优化
   =================================== */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 30px 0;
    }

    .hero__content {
        margin-bottom: var(--spacing-md);
    }
}

/* ===================================
   打印样式（可选）
   =================================== */
@media print {
    .header,
    .footer,
    .download,
    .nav {
        display: none;
    }

    body {
        background-color: white;
    }

    .hero,
    .pain-points,
    .mindset-upgrade,
    .solution,
    .features,
    .value {
        page-break-inside: avoid;
    }
}