/**
 * 移动端响应式样式
 * 仅针对 768px 以下屏幕，不影响 PC 版
 * 使用!important 覆盖内联样式
 */

/* ==================== 通用响应式 ==================== */
@media(max-width:768px) {
    /* 容器内边距调整 */
    .container {
        padding: 0 15px !important;
    }
    
    /* 标题字体调整 */
    h1 { font-size: 24px !important; }
    h2 { font-size: 20px !important; }
    h3 { font-size: 18px !important; }
    
    /* 隐藏 PC 端元素 */
    .pc-only { display: none !important; }
    
    /* 显示移动端元素 */
    .mobile-only { display: block !important; }
    
    /* 图片自适应 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* ==================== 首页轮播图 ==================== */
@media(max-width:768px) {
    .banner-box {
        height: 280px !important;
    }
    
    .banner-item {
        height: 280px !important;
    }
    
    .banner-title {
        font-size: 24px !important;
        padding: 0 20px !important;
    }
    
    .banner-subtitle {
        font-size: 14px !important;
        padding: 0 20px !important;
    }
    
    .banner-text .btn {
        padding: 8px 20px !important;
        font-size: 14px !important;
    }
    
    /* 轮播箭头按钮缩小 */
    .banner-arrow {
        width: 40px !important;
        height: 40px !important;
        line-height: 40px !important;
        font-size: 18px !important;
        left: 15px !important;
    }
    
    .banner-arrow:last-child {
        right: 15px !important;
        left: auto !important;
    }
    
    /* 轮播圆点缩小 */
    .banner-dots {
        bottom: 15px !important;
    }
    
    .banner-dots .dot {
        width: 10px !important;
        height: 10px !important;
    }
}

/* ==================== 首页快捷入口 ==================== */
@media(max-width:768px) {
    .quick-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
    }
    
    .quick-item {
        padding: 15px 10px !important;
        min-height: 100px !important;
    }
    
    .quick-item i {
        font-size: 24px !important;
        width: 48px !important;
        height: 48px !important;
    }
    
    .quick-item p {
        font-size: 13px !important;
    }
}

/* ==================== 首页新闻资讯 ==================== */
@media(max-width:768px) {
    .home-row {
        grid-template-columns: 1fr !important;
    }
    
    .main-col {
        margin-bottom: 20px;
    }
}

/* ==================== 首页保安风采 ==================== */
@media(max-width:768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .gallery-item img {
        height: 150px !important;
    }
}

/* ==================== 列表页/详情页左侧菜单 ==================== */
@media(max-width:768px) {
    .page-row,
    .content-layout,
    .list-layout,
    .detail-layout {
        grid-template-columns: 1fr !important;
    }
    
    /* 子栏目菜单 - 移动端显示为顶部横向滚动或卡片式 */
    .left-menu {
        margin-bottom: 20px !important;
    }
    
    .left-menu .menu-title {
        border-radius: 8px 8px 0 0 !important;
        font-size: 15px !important;
        padding: 12px 15px !important;
    }
    
    .left-menu .sub-menu {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        padding: 12px !important;
        border-radius: 0 0 8px 8px !important;
    }
    
    .left-menu .sub-menu li {
        flex: 0 0 auto !important;
        border: none !important;
    }
    
    .left-menu .sub-menu a {
        display: inline-block !important;
        padding: 8px 14px !important;
        background: #f0f0f0 !important;
        border-radius: 4px !important;
        font-size: 13px !important;
        border-bottom: none !important;
        border-left: none !important;
    }
    
    .left-menu .sub-menu a.active {
        background: #16366c !important;
        color: #fff !important;
    }

    .sidebar-menu {
        position: static !important;
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .sidebar-menu h3 {
        font-size: 16px !important;
        padding: 12px 15px !important;
        background: #f5f5f5 !important;
        border-radius: 4px !important;
        margin-bottom: 10px !important;
    }
    
    .sidebar-menu ul {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .sidebar-menu li {
        flex: 0 0 auto !important;
    }
    
    .sidebar-menu a {
        display: inline-block !important;
        padding: 6px 12px !important;
        background: #f0f0f0 !important;
        border-radius: 4px !important;
        font-size: 13px !important;
    }
    
    .sidebar-menu a.active {
        background: #16366c !important;
        color: #fff !important;
    }
}

/* ==================== 联系页双列布局 ==================== */
@media(max-width:768px) {
    .contact-layout {
        grid-template-columns: 1fr !important;
    }
    
    .contact-info {
        margin-bottom: 30px !important;
    }
    
    .contact-form {
        width: 100% !important;
    }
}

/* ==================== 人物详情页 ==================== */
@media(max-width:768px) {
    .person-detail-layout {
        grid-template-columns: 1fr !important;
    }
    
    .person-photo {
        max-width: 200px !important;
        margin: 0 auto 20px !important;
    }
    
    .person-photo img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ==================== 会员列表表格 ==================== */
@media(max-width:768px) {
    .member-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
    
    .member-table th,
    .member-table td {
        padding: 8px 10px !important;
        font-size: 13px !important;
    }
}

/* ==================== 会员详情页 ==================== */
@media(max-width:768px) {
    .member-info-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== 图库列表 ==================== */
@media(max-width:768px) {
    .gallery-list-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ==================== 搜索页表单 ==================== */
@media(max-width:768px) {
    .search-form {
        flex-direction: column !important;
    }
    
    .search-form input,
    .search-form select,
    .search-form button {
        width: 100% !important;
        margin-bottom: 10px !important;
    }
}

/* ==================== 精选回复页 ==================== */
@media(max-width:768px) {
    .message-layout {
        grid-template-columns: 1fr !important;
    }
}

/* ==================== 图库详情页 ==================== */
@media(max-width:768px) {
    .gallery-detail-images {
        overflow-x: auto !important;
        white-space: nowrap !important;
        padding-bottom: 10px !important;
    }
    
    .gallery-detail-images img {
        display: inline-block !important;
        width: 120px !important;
        height: 90px !important;
        object-fit: cover !important;
        margin-right: 10px !important;
    }
}

/* ==================== 面包屑导航 ==================== */
@media(max-width:768px) {
    .breadcrumb {
        font-size: 13px !important;
        padding: 10px 0 !important;
    }
    
    .breadcrumb a,
    .breadcrumb span {
        font-size: 13px !important;
    }
}

/* ==================== 文章上一篇/下一篇 ==================== */
@media(max-width:768px) {
    .article-nav {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .article-nav a {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ==================== 表单输入框 ==================== */
@media(max-width:768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px !important; /* 防止 iOS 自动缩放 */
    }
    
    .form-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .form-row label {
        width: 100% !important;
        margin-bottom: 8px !important;
    }
    
    .form-row input,
    .form-row textarea,
    .form-row select {
        width: 100% !important;
    }
}

/* ==================== 页脚 ==================== */
@media(max-width:576px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }
    
    .footer-col {
        margin-bottom: 0 !important;
    }
}

/* ==================== 按钮优化 ==================== */
@media(max-width:768px) {
    .btn {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    
    .btn-sm {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }
}

/* ==================== 导航菜单移动端 ==================== */
/* 注: 移动端侧滑导航样式由 header.php 内联 <style> 统一管理
   此处不再定义 .nav-list 的 display，避免冲突 */
@media(max-width:992px) {
    .menu-btn {
        display: block !important;
    }
}

/* ==================== 章节标题 ==================== */
@media(max-width:768px) {
    .section-title h3 {
        font-size: 18px !important;
    }
    
    .section-title {
        margin-bottom: 20px !important;
        padding-bottom: 8px !important;
    }
}

/* ==================== 卡片间距 ==================== */
@media(max-width:768px) {
    .side-card,
    .content-card {
        padding: 15px !important;
        margin-bottom: 15px !important;
    }
}

/* ==================== 列表项 ==================== */
@media(max-width:768px) {
    .news-item {
        padding: 10px 0 !important;
        font-size: 14px !important;
    }
    
    .news-date {
        font-size: 12px !important;
    }
}