/* ==================== Utility Classes（响应式工具类） ==================== */

/* === 响应式Grid系统 === */
.grid-auto-fit-300 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.grid-auto-fit-280 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.grid-auto-fit-250 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
}

.grid-auto-fit-320 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.grid-auto-fit-350 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.grid-auto-fit-380 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 40px;
}

/* 移动端强制单列 */
@media (max-width: 768px) {
    .grid-auto-fit-300,
    .grid-auto-fit-280,
    .grid-auto-fit-250,
    .grid-auto-fit-320,
    .grid-auto-fit-350,
    .grid-auto-fit-380,
    [class*="grid-auto-fit"] {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

@media (max-width: 480px) {
    .grid-auto-fit-300,
    .grid-auto-fit-280,
    .grid-auto-fit-250,
    .grid-auto-fit-320,
    .grid-auto-fit-350,
    .grid-auto-fit-380,
    [class*="grid-auto-fit"] {
        gap: 15px !important;
    }
}

/* === 间距系统 === */
.section-spacing-xl {
    padding: 120px 5%;
}

.section-spacing-lg {
    padding: 80px 5%;
}

.section-spacing-md {
    padding: 60px 5%;
}

@media (max-width: 768px) {
    .section-spacing-xl,
    .section-spacing-lg {
        padding: 40px 5% !important;
    }
    
    .section-spacing-md {
        padding: 35px 5% !important;
    }
}

@media (max-width: 480px) {
    .section-spacing-xl,
    .section-spacing-lg {
        padding: 30px 5% !important;
    }
    
    .section-spacing-md {
        padding: 25px 5% !important;
    }
}

/* === Hero padding响应式 === */
.hero-padding {
    padding-top: 120px !important;
}

@media (max-width: 768px) {
    .hero-padding {
        padding-top: 70px !important;
    }
}

@media (max-width: 480px) {
    .hero-padding {
        padding-top: 60px !important;
    }
}

/* === 响应式文字大小 === */
.text-responsive-xl {
    font-size: clamp(24px, 4vw, 32px) !important;
}

.text-responsive-lg {
    font-size: clamp(20px, 3vw, 24px) !important;
}

.text-responsive-md {
    font-size: clamp(16px, 2.5vw, 18px) !important;
}

/* === Container系统 === */
.container-1200 {
    max-width: 1200px;
    margin: 0 auto;
}

/* === 隐藏箭头（移动端） === */
.arrow-desktop-only {
    display: block;
}

@media (max-width: 768px) {
    .arrow-desktop-only {
        display: none !important;
    }
}

/* === 响应式换行 === */
br.br-desktop-only {
    display: inline;
}

@media (max-width: 768px) {
    br.br-desktop-only {
        display: none !important;
    }
}

/* === Margin系统 === */
.mt-60 {
    margin-top: 60px;
}

.mb-60 {
    margin-bottom: 60px;
}

@media (max-width: 768px) {
    .mt-60 {
        margin-top: 40px !important;
    }
    
    .mb-60 {
        margin-bottom: 40px !important;
    }
}

@media (max-width: 480px) {
    .mt-60 {
        margin-top: 25px !important;
    }
    
    .mb-60 {
        margin-bottom: 25px !important;
    }
}

/* === 超级强制单列布局（终极方案） === */
@media (max-width: 768px) {
    /* 覆盖所有inline grid，强制flex布局 */
    div[style*="display: grid"],
    div[style*="display:grid"],
    section[style*="display: grid"],
    section[style*="display:grid"] {
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* 覆盖所有inline gap */
    div[style*="gap:"],
    div[style*="gap: "],
    section[style*="gap:"],
    section[style*="gap: "] {
        gap: 20px !important;
    }
    
    /* 覆盖inline padding */
    div[style*="padding: 80px"],
    section[style*="padding: 80px"] {
        padding: 40px 5% !important;
    }
    
    div[style*="padding-top: 120px"] {
        padding-top: 70px !important;
    }
}

@media (max-width: 480px) {
    div[style*="gap:"],
    div[style*="gap: "],
    section[style*="gap:"],
    section[style*="gap: "] {
        gap: 15px !important;
    }
    
    div[style*="padding: 80px"],
    section[style*="padding: 80px"] {
        padding: 30px 5% !important;
    }
    
    div[style*="padding-top: 120px"] {
        padding-top: 60px !important;
    }
}