/* ================================================
   昊明实业 - 移动端响应式样式
   文件：public/css/responsive.css
   断点：≤768px 手机  |  ≤992px 平板
   ================================================ */

/* ------------------------------------------------
   1. 全局基础
   ------------------------------------------------ */
@media (max-width: 768px) {
    .section {
        padding: 36px 0;
    }
    .section-title {
        margin-bottom: 24px;
    }
    .section-title h2 {
        font-size: 22px;
    }
    .container {
        padding: 0 12px;
    }
}

/* ------------------------------------------------
   2. 顶部联系栏（手机隐藏，节省空间）
   ------------------------------------------------ */
@media (max-width: 768px) {
    .top-bar {
        display: none;
    }
}

/* ------------------------------------------------
   3. 导航栏
   ------------------------------------------------ */
@media (max-width: 768px) {
    .header-content {
        height: 60px;
    }
    .logo a {
        font-size: 18px;
    }
    .logo img {
        height: 36px;
    }
    /* 汉堡菜单打开后，导航从60px以下展开 */
    .nav-list {
        top: 60px;
    }
    .nav-item a {
        height: 52px;
        font-size: 15px;
        padding: 0 20px;
    }
}

/* ------------------------------------------------
   4. Hero Banner 轮播
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* 按图片实际比例约3:1撑开高度，完整显示无黑边无裁切 */
    .hero {
        height: 0 !important;
        padding-top: 33.3%; /* 宽:高 ≈ 3:1 */
        position: relative;
        overflow: hidden;
    }
    /* slide 铺满整个 hero */
    .hero-slide {
        position: absolute;
        inset: 0;
        background-size: 100% 100% !important; /* 完全拉伸填满，不裁切不留黑边 */
        background-repeat: no-repeat;
        background-position: center center;
    }
    /* 手机端：隐藏文字、箭头、dots，只显示第一张图 */
    .hero-content,
    .hero-content-left,
    .hero-arrow,
    .hero-prev,
    .hero-next,
    .hero-dots { display: none !important; }

    /* 第一张slide之外全部隐藏 */
    .hero-slide:not(:first-child) { display: none !important; }
}

/* ------------------------------------------------
   5. 首页 - 数字统计板块
   ------------------------------------------------ */
@media (max-width: 768px) {
    .section .grid-3 > div > h2[style] {
        font-size: 36px !important;
    }
}

/* ------------------------------------------------
   6. 产品卡片网格
   ------------------------------------------------ */
@media (max-width: 992px) {
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .grid-4,
    .grid-3,
    .grid-2 { grid-template-columns: 1fr; }

    /* 首页 20+ 30+ 100+ 统计板块：手机上保持3列横排 */
    .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4px;
    }
    .stats-grid > div {
        padding: 0 4px;
    }
    .stats-grid h2 {
        font-size: 22px !important;
        margin-bottom: 4px !important;
    }
    .stats-grid p {
        font-size: 11px !important;
        margin-bottom: 4px !important;
    }
}

/* ------------------------------------------------
   7. 产品分类卡片（首页 cat-card）
   ------------------------------------------------ */
@media (max-width: 992px) {
    .cat-card { height: 160px; }
}
@media (max-width: 768px) {
    .cat-card {
        height: 110px;
        padding: 16px 12px;
    }
    .cat-name { font-size: 15px; }
    /* 手机上不做悬停位移动画，避免点击延迟感 */
    .cat-card:hover { transform: none; }
}

/* ------------------------------------------------
   8. 产品列表页 - Sidebar + 主列表
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* 外层 flex 容器改为纵向 */
    .section > .container > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 0 !important;
    }

    /* Sidebar 宽度重置，变为顶部横向滚动筛选条 */
    aside[style*="flex: 0 0 250px"] {
        flex: none !important;
        width: 100% !important;
    }

    /* 搜索框保持全宽 */
    aside form {
        margin-bottom: 10px;
    }

    /* 分类菜单改为横向滚动 */
    .sidebar {
        border-radius: 4px;
        margin-bottom: 16px;
    }
    .sidebar-title {
        display: none; /* 手机上标题收起 */
    }
    .sidebar-menu {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 8px 4px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .sidebar-menu::-webkit-scrollbar { display: none; }
    .sidebar-menu li {
        flex-shrink: 0;
    }
    .sidebar-menu li a {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 20px;
        border: 1px solid #c8d4e8;
        border-left: 1px solid #c8d4e8 !important; /* 覆盖active态左边框 */
        font-size: 13px;
        white-space: nowrap;
        background: #fff;
    }
    .sidebar-menu li.active a {
        background: #1a2f4e;
        color: #fff;
        border-color: #1a2f4e !important;
    }

    /* 产品卡片列表：手机2列 */
    .section > .container > div > section > .grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }
    .card-img { height: 150px; }
    .card-title { font-size: 15px; }
}

/* 极小屏（≤375px）产品卡片退为1列 */
@media (max-width: 375px) {
    .section > .container > div > section > .grid-3 {
        grid-template-columns: 1fr !important;
    }
}

/* ------------------------------------------------
   9. 产品详情页 - 图文布局
   ------------------------------------------------ */
@media (max-width: 992px) {
    .detail-wrapper {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }
    .detail-img {
        flex: none !important;
        width: 100%;
    }
    .detail-info h1 {
        font-size: 22px !important;
    }
}
@media (max-width: 768px) {
    .detail-wrapper {
        padding: 16px;
        margin-bottom: 16px;
    }
    .detail-info h1 {
        font-size: 20px !important;
    }
}

/* ------------------------------------------------
   10. 产品详情页 - Tab 导航
   ------------------------------------------------ */
@media (max-width: 768px) {
    .tabs-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 2px solid #e8e8e8;
    }
    .tabs-nav::-webkit-scrollbar { display: none; }
    .tab-item {
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* ------------------------------------------------
   11. 产品详情页 - 数据表格横向滚动
   ------------------------------------------------ */
@media (max-width: 768px) {
    .tab-content {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    table.spec-table {
        min-width: 480px;
        font-size: 13px;
    }
    table.spec-table th,
    table.spec-table td {
        padding: 8px 6px;
    }
    /* 化学成分/力学性能 HTML 表格（description 内嵌的） */
    .product-overview-html table,
    .tab-content table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
}

/* ------------------------------------------------
   12. 关于我们页
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* 公司简介：图文竖排 */
    .section > .container > section > div[style*="display: flex"] {
        flex-direction: column !important;
        gap: 20px !important;
    }
    /* 厂房图片宽度重置 */
    div[style*="flex: 0 0 420px"] {
        flex: none !important;
        width: 100% !important;
    }

    /* 生产工艺：5步骤改为2列网格 */
    section > div[style*="display: flex"][style*="flex-wrap: wrap"] {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        justify-items: center;
    }
    /* 箭头在手机上隐藏 */
    section > div[style*="display: flex"][style*="flex-wrap: wrap"] > div[style*="→"],
    section > div[style*="display: flex"][style*="flex-wrap: wrap"] > div[style*="padding-bottom: 80px"] {
        display: none !important;
    }
    /* 每个工艺步骤卡片 */
    section > div[style*="display: flex"][style*="flex-wrap: wrap"] > div[style*="min-width: 130px"] {
        min-width: unset !important;
        max-width: unset !important;
        width: 100%;
        padding: 0 4px !important;
    }
}

/* ------------------------------------------------
   13. 联系我们页
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* 左右两栏改为上下 */
    main > .container > div[style*="display: flex"][style*="gap: 50px"] {
        flex-direction: column !important;
        gap: 24px !important;
    }
    /* 联系信息栏宽度重置 */
    div[style*="flex: 0 0 400px"] {
        flex: none !important;
        width: 100% !important;
    }
    /* 表单内两列改为单列 */
    form > div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    /* 表单容器去掉多余内边距 */
    div[style*="flex: 1"][style*="padding: 40px"] {
        padding: 20px !important;
    }
}

/* ------------------------------------------------
   14. 生产设备页
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* 分类按钮横向滚动，和产品分类筛选条一致 */
    .equip-filter {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 0 0 6px 0;
        margin-bottom: 20px !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .equip-filter::-webkit-scrollbar { display: none; }
    .equip-btn {
        flex-shrink: 0;
        padding: 6px 14px !important;
        font-size: 13px !important;
        border-radius: 20px !important;
        white-space: nowrap;
    }
    /* 设备卡片图高度 */
    .card > div[style*="height: 250px"] {
        height: 180px !important;
    }
}

/* ------------------------------------------------
   14.5 分页条
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* 分页条：强制flex横排一行，覆盖grid影响 */
    .pagination {
        display: flex !important;
        grid-template-columns: unset !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 4px !important;
        margin-top: 24px !important;
        padding-bottom: 4px;
        justify-content: center;
        align-items: center;
    }
    .pagination::-webkit-scrollbar { display: none; }
    .pagination a,
    .pagination span {
        flex-shrink: 0 !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 13px !important;
        line-height: 30px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    /* 统计文字隐藏 */
    .pagination > span[style*="margin-left"] {
        display: none !important;
    }
}

/* ------------------------------------------------
   14.6 文档/新闻详情页 - 防止横向滑动错位
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* 外层flex容器改为纵向 */
    .section > .container > div[style*="display: flex"][style*="gap: 30px"][style*="align-items: flex-start"] {
        flex-direction: column !important;
        gap: 0 !important;
    }
    /* aside固定宽度重置 */
    .section > .container > div[style*="display: flex"][style*="align-items: flex-start"] > aside {
        flex: none !important;
        width: 100% !important;
    }
    /* aside内sidebar改为横向滚动筛选条 */
    .section > .container > div[style*="display: flex"][style*="align-items: flex-start"] > aside .sidebar-title {
        display: none;
    }
    .section > .container > div[style*="display: flex"][style*="align-items: flex-start"] > aside .sidebar-menu {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 6px;
        padding: 8px 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .section > .container > div[style*="display: flex"][style*="align-items: flex-start"] > aside .sidebar-menu::-webkit-scrollbar {
        display: none;
    }
    .section > .container > div[style*="display: flex"][style*="align-items: flex-start"] > aside .sidebar-menu li {
        flex-shrink: 0;
    }
    .section > .container > div[style*="display: flex"][style*="align-items: flex-start"] > aside .sidebar-menu li a {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 20px;
        border: 1px solid #c8d4e8 !important;
        font-size: 13px;
        white-space: nowrap;
        background: #fff;
    }
    .section > .container > div[style*="display: flex"][style*="align-items: flex-start"] > aside .sidebar-menu li.active a {
        background: #1a2f4e;
        color: #fff;
        border-color: #1a2f4e !important;
    }
    /* 右侧文章内容区缩小内边距 */
    .section > .container > div[style*="display: flex"][style*="align-items: flex-start"] > div[style*="flex: 1"] {
        padding: 20px 16px !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
    /* 文章内表格横向滚动 */
    .article-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
    }
    /* 文章标题字号缩小 */
    .article-body h1,
    div[style*="text-align: center"] > h1 {
        font-size: 18px !important;
    }
}

/* ------------------------------------------------
   14.8 技术文档 / 新闻 详情页
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* 外层改为纵向排列 */
    .doc-detail-wrap,
    .news-detail-wrap {
        flex-direction: column !important;
        gap: 0 !important;
    }
    /* 左侧分类改为横向滚动筛选条 */
    .doc-detail-aside,
    .news-detail-aside {
        flex: none !important;
        width: 100% !important;
    }
    .doc-detail-aside .sidebar-title,
    .news-detail-aside .sidebar-title {
        display: none;
    }
    .doc-detail-aside .sidebar-menu,
    .news-detail-aside .sidebar-menu {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 8px 4px;
        gap: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .doc-detail-aside .sidebar-menu::-webkit-scrollbar,
    .news-detail-aside .sidebar-menu::-webkit-scrollbar { display: none; }
    .doc-detail-aside .sidebar-menu li,
    .news-detail-aside .sidebar-menu li { flex-shrink: 0; }
    .doc-detail-aside .sidebar-menu li a,
    .news-detail-aside .sidebar-menu li a {
        display: inline-block;
        padding: 6px 14px;
        border-radius: 20px;
        border: 1px solid #c8d4e8 !important;
        font-size: 13px;
        white-space: nowrap;
        background: #fff;
    }
    .doc-detail-aside .sidebar-menu li.active a,
    .news-detail-aside .sidebar-menu li.active a {
        background: #1a2f4e;
        color: #fff;
        border-color: #1a2f4e !important;
    }
    /* 右侧内容区padding缩小 */
    .doc-detail-content,
    .news-detail-content {
        padding: 20px 16px !important;
        width: 100% !important;
    }
    /* 文章内表格横向滚动 */
    .article-body table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
}

/* ------------------------------------------------
   15. 新闻 / 文档列表页 (sidebar同产品列表)
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* 新闻条目：日期块缩小 */
    .news-item {
        gap: 12px;
        padding: 14px 12px;
    }
    .news-date {
        flex: 0 0 70px;
    }
    .news-date .day { font-size: 20px; }
    .news-content h3 { font-size: 15px; }
}

/* ------------------------------------------------
   16. Footer
   ------------------------------------------------ */
@media (max-width: 992px) {
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 768px) {
    footer { padding: 36px 0 16px; }
    /* 手机端只显示第1列(关于我们)和第4列(联系我们)，隐藏第2、3列 */
    .footer-col:nth-child(2),
    .footer-col:nth-child(3) { display: none; }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-bottom: 24px;
    }
    .footer-col h4 { font-size: 15px; margin-bottom: 12px; }
}

/* ------------------------------------------------
   17. 回到顶部按钮（手机上缩小）
   ------------------------------------------------ */
@media (max-width: 768px) {
    #back-to-top {
        bottom: 16px;
        right: 16px;
        width: 34px;
        height: 34px;
        font-size: 14px;
    }
}

/* ------------------------------------------------
   18. 询价悬浮按钮（如有）
   ------------------------------------------------ */
@media (max-width: 768px) {
    /* CTA 板块字号 */
    .section h2[style*="font-size: 32px"] {
        font-size: 20px !important;
    }
    .section p[style*="font-size: 18px"] {
        font-size: 14px !important;
    }
    .section .btn[style*="padding: 15px 40px"] {
        padding: 12px 24px !important;
        font-size: 15px !important;
    }
}

/* ------------------------------------------------
   19. 面包屑 → 手机端改为返回导航条
   ------------------------------------------------ */
@media (max-width: 768px) {
    .breadcrumb {
        background: #fff;
        border-bottom: 1px solid #e8edf3;
        padding: 0 !important;
        position: sticky;
        top: 60px; /* 紧贴导航栏下方 */
        z-index: 99;
    }
    .breadcrumb .container {
        display: flex;
        align-items: center;
        height: 44px;
        padding: 0 !important;
        position: relative;
        font-size: 0; /* 隐藏所有>文本节点 */
    }
    /* 隐藏中间所有a链接和span（只保留第一个a和最后一个span） */
    .breadcrumb .container > a:not(:first-child) {
        display: none;
    }
    /* 隐藏所有a标签原有文字，只保留返回两字 */
    .breadcrumb .container > a:first-child {
        display: flex;
        align-items: center;
        height: 44px;
        padding: 0 16px;
        font-size: 14px;
        color: #1a2f4e;
        font-weight: 500;
        text-decoration: none;
        font-size: 0; /* 隐藏原文字 */
    }
    /* 返回箭头 + 文字 全部用::before生成，不受原文字影响 */
    .breadcrumb .container > a:first-child::before {
        content: '‹ 返回';
        font-size: 15px;
        line-height: 1;
        color: #1a2f4e;
        font-weight: 500;
    }
    /* 当前页名称居中显示 */
    .breadcrumb .container > span:last-child {
        display: block;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 15px;
        font-weight: 600;
        color: #1a2f4e;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55%;
    }
}

/* ------------------------------------------------
   20. 通用：防止任何元素横向溢出
   ------------------------------------------------ */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    img {
        max-width: 100%;
    }
}