/**
 * 响应式样式文件 - responsive.css
 * 包含所有媒体查询和响应式调整
 * 加载顺序：在所有其他CSS文件之后
 */

/* ========== 通用响应式断点 ========== */

/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    /* 斜切图片容器 */
    .slant-img-box { height: 280px; }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {
    /* 斜切图片容器 */
    .slant-img-box {
        transform: skewX(-2deg);
        margin-left: -6px;
        margin-right: -6px;
        height: 260px;
    }
    
    .slant-img-box img {
        width: calc(100% + 12px);
        margin-left: -6px;
        transform: skewX(2deg);
    }
    
    .slant-img-box:hover img {
        transform: skewX(2deg) scale(1.03);
    }
    
    .about-container { gap: 1.5rem !important; }
    
    .about-text-block {
        padding-right: 0;
        padding-bottom: 1rem;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .about-text-block h3 { font-size: 1.5rem; }
    
    .about-container > div:last-child {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* 步骤区域 */
    .step-card { flex: 0 0 calc(33.33% - 20px); }
    .step-arrow:last-of-type { display: none; }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {
    /* Hero区域 */
    .hero h1 { font-size: 32px; }

    /* 斜切图片容器 */
    .slant-img-box { height: 240px; }

    /* 统计卡片 */
    .stats-card {
        border-right: none;
        border-bottom: 1px solid #dee2e6;
        min-height: 100px;
    }
    
    .stats-card:last-child { border-bottom: none; }
    
    .stats-number { font-size: 2rem; }
    
    .stats-label { font-size: 0.85rem; }

    /* About区域 */
    .about-container { grid-template-columns: 1fr; }

    /* Clients区域 */
    .clients-grid { grid-template-columns: repeat(2, 1fr); }

    /* 步骤区域 */
    .steps-container { flex-direction: column; }
    
    .step-card {
        flex: 0 0 100%;
        max-width: 280px;
    }
    
    .step-arrow {
        transform: rotate(90deg);
        margin: 10px 0;
        animation: none;
    }
    
    .step-arrow svg {
        width: 28px;
        height: 28px;
        transform: rotate(0deg);
    }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    /* 斜切图片容器 */
    .slant-img-box {
        transform: skewX(-1.5deg);
        margin-left: -4px;
        margin-right: -4px;
        height: 200px;
    }
    
    .slant-img-box img {
        width: calc(100% + 8px);
        margin-left: -4px;
        transform: skewX(1.5deg);
    }
    
    .slant-img-box:hover img {
        transform: skewX(1.5deg) scale(1.03);
    }
    
    .about-text-block h3 { font-size: 1.3rem; }

    /* 统计卡片 */
    .stats-number { font-size: 1.8rem; }

    /* 展览画廊 */
    .gallery-title { font-size: 24px; }
    
    .gallery-divider { width: 120px; }
    
    .gallery-subtitle { font-size: 14px; }
    
    .gallery-item .gallery-img,
    .gallery-item-center .gallery-img { height: 220px; }
    
    .exhibition-gallery { padding: 40px 15px; }

    /* 步骤区域 */
    .step-card img {
        width: 120px;
        height: 120px;
    }
    
    .step-card h3 { font-size: 14px; }
    
    .step-card p { font-size: 13px; }

    /* 移动端分页隐藏 */
    .page-num { display: none; }

    .head-sm-height { height: 61px !important; }
}

/* xl屏幕以上 (≥1200px) */
@media only screen and (min-width: 1200px) {
    /* 可根据需要添加额外样式 */
}

/* ========== 导航下拉菜单响应式 ========== */

/* 中小屏幕（≤991px）：导航折叠为移动端菜单 */
@media (max-width: 991.98px) {
    .navbar-nav {
        gap: 0 !important;
        padding: 10px 0;
    }

    .navbar-nav .nav-item {
        width: 100%;
    }

    .navbar-nav .nav-item-link {
        display: block;
        padding: 12px 15px !important;
        border-bottom: 1px solid #f0f0f0;
    }

    /* 移动端下拉菜单 */
    .nav-item-dropdown::after {
        display: none;
    }

    .nav-dropdown-menu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 100%;
        max-height: 0;
        overflow: hidden;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        padding-left: 20px;
        background-color: #f8f9fa;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .nav-item-open .nav-dropdown-menu {
        max-height: 500px;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .nav-dropdown-item-wrapper {
        width: 100%;
    }

    .nav-dropdown-item {
        padding: 10px 15px;
        font-size: 13px;
        border-bottom: 1px solid #e9ecef;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    /* 移动端三级菜单 */
    .nav-dropdown-submenu {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        min-width: 100%;
        max-height: 0;
        overflow: hidden;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        padding-left: 25px;
        background-color: #f1f3f4;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    .nav-dropdown-open .nav-dropdown-submenu {
        max-height: 400px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    .nav-dropdown-subitem {
        padding: 9px 15px;
        font-size: 12.5px;
        border-bottom: 1px solid #e9ecef;
    }

    .nav-dropdown-has-child::after {
        display: none;
    }

    .nav-dropdown-arrow {
        font-size: 10px;
        transition: transform 0.3s ease;
    }

    .nav-dropdown-open .nav-dropdown-arrow {
        transform: rotate(90deg);
    }

    .nav-arrow {
        float: right;
        transition: transform 0.3s ease;
    }

    .nav-item-open .nav-arrow {
        transform: rotate(180deg);
    }
}