/* Sino Parts 汽车零部件公司官网 - 优化后的响应式样式文件 */

/* ===== 响应式设计 ===== */

/* 大屏幕设备 (1024px 及以下) */
@media (max-width: 1024px) {
    .container {
        padding: 0;
    }
    
    .nav-container {
        padding: 0 20px;
    }
    
    .banner-overlay {
        padding-left: 100px;
    }
    
    .banner-indicators-left {
        left: 40px;
    }
    
    .banner-content {
        margin-left: 60px;
    }
    

    
    /* 调整notification bar间距，保持右侧对齐 */
    .notification-content {
        gap: 30px;
        justify-content: flex-end;
    }
    
    /* 调整公司介绍区域布局 */
    .who-we-are-content {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: center;
    }
    
    .left-image {
        flex: none;
        width: 100%;
        height: 300px;
    }
    
    .experience-overlay {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        margin-top: var(--spacing-sm);
    }
    
    .right-content {
        padding-left: 0;
        padding-top: 0;
        max-width: 100%;
        text-align: center;
    }
    

    
    .brief-section {
        margin-bottom: 25px;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    /* 调整红色背景方块宽度和混合模式 */
    .banner::before {
        width: 60%;
        mix-blend-mode: multiply;
        opacity: 0.8;
    }
    
    /* 调整服务内容区域布局 */
.service-content {
    flex-direction: column;
    gap: var(--spacing-lg);
    align-items: center;
}

/* Catalogues 页面响应式样式 */
.catalogues-content {
    grid-template-columns: 1fr;
    gap: 40px;
}

.catalogue-cover {
    max-width: 300px;
}

.catalogue-cover-front,
.catalogue-cover-back {
    max-width: 250px;
}

.feature-text {
    font-size: var(--font-size-md);
}
    
    .sino-service-section .service-left {
        align-items: center;
        text-align: center;
    }
    
    .sino-service-section .service-stats {
        position: relative;
        right: auto;
        top: auto;
        margin-top: var(--spacing-lg);
        width: 100%;
        max-width: 300px;
    }
    
    .left-content {
        padding-right: 0;
        max-width: 100%;
        text-align: center;
    }
    
    .stats-grid {
        max-width: 100%;
        justify-content: center;
    }
    
    .right-images {
        height: 300px;
    }
    
    .warehouse-image,
    .engine-image {
        width: 80%;
        height: 80%;
    }
    
    /* 调整优势特点区域布局 */
    .why-choose-us {
        height: auto;
        min-height: 600px;
    }
    
    .why-choose-us-content {
        height: auto;
        min-height: 600px;
    }
    
    .content-card {
        width: 90%;
        max-width: 500px;
        position: relative;
        transform: none;
        left: auto;
        margin: 0 auto;
    }
    
    .background-image {
        position: relative;
        top: auto;
        height: 300px;
        margin-bottom: var(--spacing-lg);
    }
    
    .features-list {
        gap: var(--spacing-md);
    }
    
    .feature-item {
        flex-direction: column;
        align-items: center;
    }
    
    .feature-dot {
        margin-bottom: var(--spacing-sm);
    }
    
    .feature-content {
        text-align: center;
        width: 100%;
    }
    
    /* 调整产品类别网格布局 */
    .category-row {
        flex-direction: column;
        gap: var(--spacing-md);
        align-items: center;
    }
    
    .intro-card {
        width: 100%;
        max-width: 300px;
        height: auto;
        min-height: 200px;
    }
    
    .categories-grid {
        width: 100%;
        gap: 20px;
    }
    
    .category-item {
        width: 100%;
        max-width: 300px;
        height: 200px;
    }
    
    .bottom-image-area {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    
    .image-container {
        width: 100%;
        max-width: 300px;
        height: 200px;
    }
    
    .grey-bg-sino {
        width: 100%;
        max-width: 400px;
        height: 120px;
    }
    
    .category-info {
        padding: 15px;
    }
    
    .category-icon {
        width: 35px;
        height: 35px;
    }
    
    .category-name {
        font-size: 14px;
    }
    
    .footer-content {
        flex-direction: column;
        gap: 30px;
        padding-top: 80px;
    }
    
    .products-grid {
        flex-direction: column;
        gap: 20px;
    }
    
    .products-column {
        width: 100% !important;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }
    
    .social-media {
        justify-content: center;
    }
}

/* 平板设备 (768px 及以下) */
@media (max-width: 768px) {
    /* 通知栏调整 */
    .notification-content {
        flex-direction: column;
        gap: var(--spacing-sm);
        padding-right: var(--spacing-sm);
        align-items: flex-end;
    }
    
    .notification-item {
        padding: 6px 10px;
        font-size: 12px;
    }
    
    .notification-icon {
        width: 14px;
        height: 14px;
    }
    
    /* 搜索弹窗响应式调整 */
    .search-modal-content {
        width: 95%;
        max-height: 90vh;
    }
    
    .search-modal-header {
        padding: 20px 24px 16px;
    }
    
    .search-modal-title {
        font-size: var(--font-size-2xl);
    }
    
    .search-input-section {
        padding: 24px;
    }
    
    .search-results-section {
        padding: 0 24px 24px;
    }
    
    .search-input {
        font-size: var(--font-size-lg);
    }
    
    /* 横幅区域调整 */
    .banner-indicators-left {
        left: 20px;
    }
    
    .indicator {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .banner::before {
        width: 100%;
    }
    
    .banner-content {
        margin-left: 0;
        padding: 0 20px;
    }
    
    .banner-title {
        font-size: 32px;
    }
    
    .banner-subtitle {
        font-size: 18px;
    }
    
    /* 导航菜单调整 */
    .nav-menu {
        display: none;
    }
    

    
    .logo {
        height: 30px;
    }
    
    /* 公司介绍区域调整 */
    .who-we-are-content {
        flex-direction: column;
        gap: var(--spacing-lg);
        padding: 0 15px;
    }
    
    .left-image {
        height: 250px;
    }
    
    .right-content {
        padding-left: 0;
        padding-top: 0;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    /* 服务内容区域调整 */
    .service-content {
        flex-direction: column;
        gap: var(--spacing-lg);
        padding: 0 15px;
    }
    
    .left-content {
        padding-right: 0;
    }
    
    .description {
        text-align: center;
    }
    
    .stat-item {
        align-items: center;
        text-align: center;
    }
    
    .stat-icon {
        opacity: 0.1;
    }
    
    .why-choose-us {
        height: auto;
        min-height: 500px;
    }
    
    .why-choose-us-content {
        height: auto;
        min-height: 500px;
    }
    
    .content-card {
        width: 95%;
        padding: var(--spacing-lg);
    }
    
    .background-image {
        height: 250px;
    }
    
    .feature-title {
        font-size: 16px;
    }
    
    .feature-description {
        font-size: 12px;
    }
    
    /* 产品类别网格调整 */
    .main-content-area {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    
    .intro-card {
        width: 100%;
        max-width: 300px;
        height: auto;
        min-height: 200px;
    }
    
    .categories-grid {
        width: 100%;
        gap: 20px;
    }
    
    .category-row {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }
    
    .category-item {
        width: 100%;
        max-width: 300px;
        height: 200px;
    }
    
    .bottom-image-area {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }
    
    .image-container {
        width: 100%;
        max-width: 300px;
        height: 200px;
    }
    
    .footer-content {
        padding-top: 50px;
    }
    
    .sino-logo-white {
        width: 150px;
        height: 25px;
    }
}

/* 手机设备 (480px 及以下) */
@media (max-width: 480px) {
    /* 通知栏调整 */
    .notification-content {
        padding-right: 10px;
    }
    
    .notification-item {
        padding: 4px 8px;
        font-size: 11px;
    }
    
    .notification-icon {
        width: 12px;
        height: 12px;
    }
    
    /* 搜索弹窗响应式调整 */
    .search-modal-content {
        width: 98%;
        max-height: 95vh;
    }
    
    .search-modal-header {
        padding: 16px 20px 12px;
    }
    
    .search-modal-title {
        font-size: var(--font-size-xl);
    }
    
    .search-input-section {
        padding: 20px;
    }
    
    .search-results-section {
        padding: 0 20px 20px;
    }
    
    .search-input {
        font-size: var(--font-size-md);
    }
    
    /* 横幅区域调整 */
    .banner-indicators-left {
        left: 15px;
    }
    
    .indicator {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .banner-content {
        padding: 0 15px;
    }
    

    
    /* 导航调整 */
    
    /* 公司介绍区域调整 */
    .who-we-are-content {
        padding: 0 15px;
    }
    
    .left-image {
        height: 200px;
    }
    

    

    
    /* 服务内容区域调整 */
    .service-content {
        padding: 0 15px;
    }
    

    

    

    

    
    /* 优势特点区域调整 */
    .why-choose-us {
        min-height: 400px;
    }
    
    .why-choose-us-content {
        min-height: 400px;
    }
    

    

    
    /* 产品类别网格调整 */

    
    /* 页脚调整 */
    
    .footer-top {
        padding-top: var(--spacing-md);
        padding-bottom: var(--spacing-sm);
    }
    
    .sino-logo-white {
        width: 180px;
        height: 30px;
    }
    
    .footer-content {
        padding-top: 60px;
        gap: 20px;
    }
    
    .products-section,
    .services-section,
    .about-section {
        width: 100%;
        text-align: center;
    }
    
    .contact-section {
        text-align: center;
    }
    
    .free-quote-btn {
        width: 100%;
        max-width: 200px;
        margin: 0 auto;
        margin-top: var(--spacing-sm);
    }
    
    .social-media {
        gap: 15px;
        margin-top: var(--spacing-sm);
    }
    
    .social-link {
        width: 24px;
        height: 24px;
    }
}

/* 超小屏幕设备 (320px 及以下) */
@media (max-width: 320px) {

    

    

    
    .left-content {
        padding-right: 0;
    }
}

/* 横屏模式调整 */
@media (orientation: landscape) and (max-height: 500px) {
    .banner {
        height: 400px;
    }
    

    
    .who-we-are,
    .what-we-offer,
    .why-choose-us {
        padding: var(--spacing-md) 0;
    }
    
    .left-image {
        height: 250px;
    }
    

}

/* ===== Banner响应式样式 ===== */
/* 1024px断点 */
@media (max-width: 1024px) {
    .banner-title {
        font-size: var(--font-size-7xl);
    }
    
    .banner-subtitle {
        font-size: var(--font-size-2xl);
    }
}

/* 768px断点 */
@media (max-width: 768px) {
    .banner-title {
        font-size: var(--font-size-6xl);
    }
    
    .banner-subtitle {
        font-size: var(--font-size-xl);
    }
}

/* 480px断点 */
@media (max-width: 480px) {
    .banner-title {
        font-size: var(--font-size-4xl);
        line-height: 1.3;
    }
    
    .banner-subtitle {
        font-size: var(--font-size-lg);
    }
}

/* ===== Navigation响应式样式 ===== */
/* 768px断点 - Navigation调整 */
@media (max-width: 768px) {
    .dropdown-menu {
        min-width: 240px;
        left: 0;
        transform: none;
        margin-top: 4px;
    }
    
    .dropdown-menu::before,
    .dropdown-menu::after {
        left: 20px;
        transform: none;
    }
    
    .dropdown:hover .dropdown-menu,
    .dropdown:focus-within .dropdown-menu {
        transform: none;
    }
    
    .dropdown-item {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .dropdown-icon {
        width: 18px;
        height: 18px;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .dropdown-menu {
        display: none;
    }
    
    .dropdown:active .dropdown-menu,
    .dropdown:focus-within .dropdown-menu {
        display: block;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .left-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
    
    .warehouse-image,
    .engine-image {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* 打印样式优化 */
@media print {
    .header,
    .notification-bar,
    .scroll-arrow,
    .social-media,

    
    .main-content {
        margin-top: 0 !important;
    }
    
    .banner {
        height: auto !important;
        background: none !important;
        page-break-inside: avoid;
    }
    
    .banner::before {
        display: none !important;
    }
    
    .banner-content {
        color: #000 !important;
    }
    
    .category-item:hover {
        transform: none !important;
    }
    
    .footer {
        background: #fff !important;
        color: #000 !important;
        height: auto !important;
        page-break-inside: avoid;
    }
    
    .footer-background,
    .footer-overlay {
        display: none !important;
    }
    
    .section-title,
    .subtitle,
    .description {
        color: #000 !important;
    }
    
    .view-more-btn,
    .free-quote-btn {
        background: #000 !important;
        color: #fff !important;
        border: 1px solid #000 !important;
    }
    
    /* 确保内容不被截断 */
    .who-we-are,
    .what-we-offer,
    .why-choose-us,
    .product-category-grid {
        page-break-inside: avoid;
    }
}

/* ===== Products页面响应式样式 ===== */

/* 大屏幕设备 (1024px 及以下) */
@media (max-width: 1024px) {
    .catalogues-grid {
        gap: 20px;
        max-width: 800px;
    }
    
    .catalogue-title {
        font-size: var(--font-size-xl);
    }
    
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

/* 平板设备 (768px 及以下) */
@media (max-width: 768px) {
    .catalogues-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        max-width: 100%;
    }
    
    .catalogue-card {
        height: 150px;
    }
    
    .catalogue-content {
        left: 15px;
        right: 15px;
    }
    
    .catalogue-title {
        font-size: var(--font-size-lg);
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .feature-item {
        flex-direction: column;
        text-align: center;
    }
    
    .feature-icon {
        margin-bottom: var(--spacing-sm);
    }
}

/* 手机设备 (480px 及以下) */
@media (max-width: 480px) {
    .catalogue-card {
        height: 120px;
    }
    
    .catalogue-content {
        left: 10px;
        right: 10px;
    }
    
    .catalogue-subtitle {
        font-size: var(--font-size-md);
        margin-bottom: 10px;
    }
    
    .catalogue-title {
        font-size: var(--font-size-md);
        margin-bottom: var(--spacing-sm);
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .category-card {
        padding: 15px;
    }
    
    .feature-item {
        padding: 20px;
    }
}

/* ===== Home页面响应式样式补充 ===== */

/* 大屏幕设备 (1024px 及以下) */
@media (max-width: 1024px) {
    .categories-scroll {
        gap: 20px;
    }
    
    .nav-category-item {
        min-width: 120px;
    }
    
    .who-we-are-content {
        gap: var(--spacing-lg);
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
}

/* 平板设备 (768px 及以下) */
@media (max-width: 768px) {
    .categories-scroll {
        gap: 15px;
        padding: 0 15px;
    }
    
    .nav-category-item {
        min-width: 100px;
        padding: 12px 8px;
    }
    
    .nav-category-item .category-text {
        font-size: var(--font-size-sm);
    }
    
    .scroll-arrow {
        width: 32px;
        height: 32px;
    }
    
    .scroll-arrow img {
        width: 16px;
        height: 16px;
    }
    
    .who-we-are-content {
        flex-direction: column;
        gap: var(--spacing-lg);
        align-items: center;
    }
    
    .left-image {
        flex: none;
        width: 100%;
        height: 300px;
    }
    
    .experience-overlay {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        height: auto;
        margin-top: var(--spacing-sm);
    }
    
    .right-content {
        padding-left: 0;
        padding-top: 0;
        max-width: 100%;
        text-align: center;
    }
    
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    
    .features-list {
        gap: var(--spacing-md);
    }
    
    .feature-item {
        flex-direction: column;
        text-align: center;
        gap: var(--spacing-sm);
    }
    
    .category-row {
        flex-direction: column;
        gap: var(--spacing-md);
    }
    
    .category-item {
        width: 100%;
        height: 200px;
    }
}

/* 手机设备 (480px 及以下) */
@media (max-width: 480px) {
    .categories-scroll {
        gap: 10px;
        padding: 0 10px;
    }
    
    .nav-category-item {
        min-width: 80px;
        padding: 10px 6px;
    }
    
    .nav-category-item .category-text {
        font-size: 11px;
    }
    
    .scroll-arrow {
        width: 28px;
        height: 28px;
    }
    
    .scroll-arrow img {
        width: 14px;
        height: 14px;
    }
    
    .left-image {
        height: 250px;
    }
    
    .experience-overlay {
        padding: 15px;
    }
    
    .experience-text .main-number {
        font-size: var(--font-size-2xl);
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .stat-item {
        padding: 15px;
    }
    
    .features-list {
        gap: var(--spacing-sm);
    }
    
    .feature-item {
        padding: 15px;
    }
    
    .category-item {
        height: 180px;
    }
    
    .intro-card {
        padding: 20px;
    }
    
    /* 产品分类页响应式样式 */
    .category-title {
        font-size: 36px;
    }
    
    .category-description {
        font-size: 16px;
    }
    
    .products-gallery {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
        padding: 0 20px;
    }
    
    .gallery-image {
        height: 150px;
    }
    
    .gallery-title {
        font-size: 14px;
    }
    
    .modal-body {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 20px;
    }
    
    .product-image-large {
        height: 250px;
    }
    
    .product-details h2 {
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .category-info-section,
    .products-section {
        padding: 60px 0;
    }
    
    .modal-content {
        width: 95%;
        max-height: 95vh;
    }
    
    .modal-body {
        padding: 20px 15px;
    }
}