/* 响应式媒体查询样式 */

/* 默认隐藏响应式类 */
.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

.tablet-only {
    display: none;
}

.small-screen-only {
    display: none;
}

/* 小屏幕断点 (< 600px) */
@media (max-width: 599px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: none !important;
    }
    
    .tablet-only {
        display: none !important;
    }
    
    .small-screen-only {
        display: block !important;
    }
    
    /* 小屏幕flex布局 */
    .small-screen-only.flex {
        display: flex !important;
    }
    
    .small-screen-only.grid {
        display: grid !important;
    }
}

/* 平板断点 (600px - 1199px) */
@media (min-width: 600px) and (max-width: 1199px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: none !important;
    }
    
    .tablet-only {
        display: block !important;
    }
    
    .small-screen-only {
        display: none !important;
    }
    
    /* 平板flex布局 */
    .tablet-only.flex {
        display: flex !important;
    }
    
    .tablet-only.grid {
        display: grid !important;
    }
}

/* 移动端断点 (< 1200px) */
@media (max-width: 1199px) {
    .desktop-only {
        display: none !important;
    }
    
    .mobile-only {
        display: block !important;
    }
    
    /* 移动端flex布局 */
    .mobile-only.flex {
        display: flex !important;
    }
    
    .mobile-only.grid {
        display: grid !important;
    }
    
    .mobile-only.inline-block {
        display: inline-block !important;
    }
}

/* 桌面端断点 (>= 1200px) */
@media (min-width: 1200px) {
    .desktop-only {
        display: block !important;
    }
    
    /* 桌面端flex布局 */
    .desktop-only.flex {
        display: flex !important;
    }
    
    .desktop-only.grid {
        display: grid !important;
    }
    
    .desktop-only.inline-block {
        display: inline-block !important;
    }
    
    .mobile-only {
        display: none !important;
    }
    
    .tablet-only {
        display: none !important;
    }
    
    .small-screen-only {
        display: none !important;
    }
}

/* 隐藏类 */
.hide-on-small {
    display: block;
}

@media (max-width: 599px) {
    .hide-on-small {
        display: none !important;
    }
}