/* ===== 佑桥官网 — 首页专属移动端覆盖 =====
   只在 index.html 引入，不影响其他页面
   关键改动：
   - 办公效率工具（yq-tool-grid）：每行 3 个
   - 系统基础功能 feature-item：每行 3 个
   - 系统基础功能 choose-area 功能标签：6 个排成 2 行 × 3 列
   - 统计数据 counter-box：4 个排成 2 行 × 2 列
   - 更懂企业的AI知识库（team-item）：4 个 item 一行
   - 价格（pricing-item）：三栏并排一行
   - 合作伙伴（partner-item）：每行 3 个
   - 客户案例（blog-area）：手机端隐藏图片并紧凑化
*/

@media (max-width: 768px) {

    /* ============================================================
       1. 办公效率工具（yq-tool-grid）— 每行 3 个
       ============================================================ */
    .yq-tool-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .yq-tool-card {
        padding: 12px 8px !important;
        border-radius: 8px !important;
    }
    .yq-tool-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
        margin: 0 auto 8px !important;
        border-radius: 6px !important;
    }
    .yq-tool-name {
        font-size: 12px !important;
        margin-bottom: 3px !important;
        line-height: 1.3 !important;
    }
    .yq-tool-desc {
        font-size: 10px !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* ============================================================
       2. 系统基础功能（feature-area）— 每行 3 个
       ============================================================ */
    .feature-area .feature-area-wrapper > .row {
        --bs-gutter-x: 0.75rem !important;
    }
    .feature-area .feature-area-wrapper > .row > [class*="col-"] {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }
    .feature-area .feature-item {
        padding: 14px 10px !important;
        margin-bottom: 12px !important;
    }
    .feature-area .feature-icon {
        width: 36px !important;
        height: 36px !important;
        line-height: 36px !important;
        font-size: 16px !important;
        margin-bottom: 10px !important;
    }
    .feature-area .feature-content h5 {
        font-size: 13px !important;
        line-height: 1.35 !important;
        margin-bottom: 6px !important;
    }
    .feature-area .feature-content p {
        font-size: 11px !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 4 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    /* ============================================================
       3. 价格（pricing-area）— 三栏一行（高密度压缩）
       ============================================================ */
    .pricing-area .row.g-5 {
        --bs-gutter-x: 0.75rem !important;
    }
    .pricing-area .row.g-5 > [class*="col-"] {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }
    .pricing-item {
        padding: 14px 10px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
    }
    .pricing-header {
        margin-bottom: 6px !important;
        padding-bottom: 6px !important;
    }
    .pricing-header h5 {
        font-size: 13px !important;
        margin-bottom: 0 !important;
    }
    .pricing-amount {
        margin-bottom: 2px !important;
    }
    .pricing-amount strong {
        font-size: 20px !important;
        font-weight: 700 !important;
    }
    .pricing-amount-type {
        margin-bottom: 8px !important;
    }
    .pricing-amount-type span {
        font-size: 10px !important;
    }
    .pricing-feature {
        margin: 8px 0 !important;
    }
    .pricing-feature ul li {
        font-size: 11px !important;
        line-height: 1.5 !important;
        padding: 3px 0 !important;
        margin-bottom: 0 !important;
    }
    .pricing-feature ul li i {
        font-size: 10px !important;
        margin-right: 4px !important;
    }
    .pricing-footer {
        margin-top: 10px !important;
    }
    .pricing-footer .theme-btn {
        padding: 6px 8px !important;
        font-size: 11px !important;
        width: 100% !important;
        line-height: 1.3 !important;
    }

    /* ============================================================
       4. 合作伙伴（partner-area）— 每行 3 个
       ============================================================ */
    .partner-area .partner-wrapper > .row {
        --bs-gutter-x: 0.5rem !important;
        --bs-gutter-y: 0.5rem !important;
    }
    .partner-area .partner-wrapper > .row > [class*="col-"] {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        width: 33.3333% !important;
    }
    .partner-item {
        padding: 6px !important;
    }
    /* 注意：全局 * { box-sizing: border-box } 下，max-height 含 padding。
       style.css 原给图片 padding:20px，若 max-height 小于 40px 会把内容压成 0 高度导致整块"消失"。
       这里把 padding 收到 4px，并留足 max-height(64px)，确保 logo 可见且大小一致。 */
    .partner-area .partner-item img,
    .partner-area .partner-wrapper img {
        padding: 4px !important;
        max-height: 64px !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* ============================================================
       5. 更懂企业的AI知识库（team-area）— 4 个 item 一行
       ============================================================ */
    .team-area > .container {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }
    .team-area > .container > .row {
        --bs-gutter-x: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .team-area > .container > .row > [class*="col-"] {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        width: 25% !important;
        padding-left: 1px !important;
        padding-right: 1px !important;
    }
    .team-item {
        margin-bottom: 14px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .team-item img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        object-fit: cover !important;
        border-radius: 0 !important;
    }
    /* 桌面端绿色浮层是 absolute left/right:20px，手机端列宽只有 25%，
       必须让浮层严格贴合卡片边缘（left/right:0），避免向两侧溢出导致第 4 列被裁 */
    .team-content {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: -14px !important;
        background: #00D1AB !important;
        padding: 5px 1px 0 !important;
        border-radius: 0 0 4px 4px !important;
        text-align: center !important;
        box-shadow: none !important;
    }
    .team-bio {
        padding-top: 3px !important;
        padding-bottom: 4px !important;
    }
    .team-bio h5,
    .team-bio h5 a {
        font-size: 10px !important;
        line-height: 1.25 !important;
        margin-bottom: 1px !important;
        /* 防止长标题撑破窄列 */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        color: #fff !important;
    }
    .team-bio span {
        font-size: 8px !important;
        line-height: 1.15 !important;
        color: #fff !important;
    }

    /* ============================================================
       6. 客户案例（blog-area）：手机端隐藏图片并紧凑化
       ============================================================ */
    .blog-area .blog-item-img {
        display: none !important;
    }
    .blog-area .blog-item {
        display: flex !important;
        flex-direction: column !important;
        padding: 12px 0 !important;
        margin-bottom: 8px !important;
        border-bottom: 1px solid #eee !important;
        text-align: left !important;
    }
    .blog-area .blog-item-info {
        padding: 0 !important;
    }
    .blog-area .blog-item-meta {
        margin-bottom: 4px !important;
    }
    .blog-area .blog-item-meta ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .blog-area .blog-item-meta ul li {
        font-size: 11px !important;
    }
    .blog-area .blog-item-meta ul li a {
        font-size: 11px !important;
        color: #888 !important;
    }
    .blog-area .blog-title {
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }
    .blog-area .blog-title a {
        font-size: 15px !important;
    }
    .blog-area .blog-item-info > li {
        display: none !important;
    }
    .blog-area .blog-item-info p {
        font-size: 13px !important;
        line-height: 1.5 !important;
        margin-bottom: 0 !important;
        color: #555 !important;
    }

    /* ============================================================
       7. 系统基础功能（choose-area）— 6 个 item 排成 2 行 × 3 列
       ============================================================ */
    .choose-content .row {
        display: block !important;
    }
    .choose-content .row > .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .choose-content .row > .col-md-6 ul {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }
    .choose-content .row > .col-md-6 ul li {
        margin-bottom: 0 !important;
        padding: 10px 4px !important;
        text-align: center !important;
        border-radius: 6px !important;
        background: #fff !important;
        box-shadow: 0 1px 4px rgb(0 0 0 / 6%) !important;
    }
    .choose-content .row > .col-md-6 ul li h5 {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* ============================================================
       8. 统计数据（counter-area）— 4 个 box 排成 2 行 × 2 列
       ============================================================ */
    .counter-area .row {
        --bs-gutter-x: 0.75rem !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .counter-area .row > [class*="col-"] {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
        margin-bottom: 12px !important;
    }
    .counter-box {
        padding: 14px 8px !important;
        border-radius: 8px !important;
        background: rgba(255,255,255,0.12) !important;
        text-align: center !important;
    }
    .counter-box .icon {
        font-size: 22px !important;
        margin-bottom: 6px !important;
    }
    .counter-box .counter {
        font-size: 22px !important;
        line-height: 1.2 !important;
        margin-bottom: 2px !important;
        word-break: break-all !important;
    }
    .counter-box .title {
        font-size: 12px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }
}

/* 超小屏（≤400px）— 三栏进一步压缩保证可读 */
@media (max-width: 400px) {
    .yq-tool-grid { gap: 6px !important; }
    .yq-tool-card { padding: 10px 6px !important; }
    .yq-tool-name { font-size: 11px !important; }
    .yq-tool-desc { font-size: 9px !important; }

    .feature-area .feature-item { padding: 12px 8px !important; }
    .feature-area .feature-content h5 { font-size: 12px !important; }
    .feature-area .feature-content p { font-size: 10px !important; }

    .pricing-item { padding: 12px 8px !important; }
    .pricing-header h5 { font-size: 12px !important; }
    .pricing-amount strong { font-size: 18px !important; }
    .pricing-feature ul li { font-size: 10px !important; }
    .pricing-footer .theme-btn { font-size: 10px !important; }

    /* team-area 超小屏：进一步压缩 */
    .team-area > .container > .row > [class*="col-"] {
        padding-left: 3px !important;
        padding-right: 3px !important;
    }
    .team-bio h5,
    .team-bio h5 a {
        font-size: 10px !important;
    }
    .team-bio span {
        font-size: 8px !important;
    }
    .team-content {
        padding: 5px 3px !important;
    }
}