@charset "utf-8";
/* ============================================================
   首页手机端适配（只写移动端覆盖，桌面端样式见 home.css）
   断点：<=1024px 头部切换为汉堡菜单；<=768px 为手机主断点
   ============================================================ */

/* ---------- 头部与 banner 的垂直间距 ---------- */
/* headTop 在 <=1024px 被隐藏，但 navHeader 仍固定 top:40px，会在页面顶部留出 40px 空白。
   用 body.home 提升优先级，覆盖后加载的 headFooter.css 中的 .navHeader */
@media (max-width: 1024px){
    body.home .navHeader{top: 0;}
    /* banner 上边距与 60px 高的移动端导航栏对齐，避免顶部留空 */
    .swiper-container{margin-top: 60px;}
}

/* ==================== 手机端（<=768px） ==================== */
@media (max-width: 768px){
    /* ---------- 通用区块 ---------- */
    .sec{width: 92%;padding: 36px 0;}
    .sec-title{font-size: 22px;line-height: 1.35;letter-spacing: .5px;}
    .sec-title small{font-size: 18px;margin-top: 4px;}

    /* ---------- 诚挚邀请 ---------- */
    /* 桌面端左栏固定 250px + 56px 间距，窄屏会把右侧正文压到极窄并撑出横向滚动条，这里改为上下堆叠 */
    .invite{padding-top: 30px;}
    .invite-grid{display: block;}
    .invite .watermark{font-size: 2rem;line-height: 1.1;margin-bottom: .3em;}
    .invite-cn{font-size: 2.6rem;}
    .invite-cn .y{font-size: 3.6rem;}
    .invite-line{width: 90px;margin: 18px 0 22px;}
    .invite-body p{margin-bottom: 14px;}
    .invite-banner{margin-top: 6px;}

    /* ---------- 展会核心亮点 ---------- */
    /* 图文左右两栏改为上下堆叠，配图统一置顶（.flip 行 DOM 顺序为文字在前，用 order 纠正） */
    .hl-row,
    .hl-row.flip{display: flex;flex-direction: column;margin-top: 34px;}
    .hl-row .pic{width: 100%;order: -1;}
    #highlights .hl-txt{padding: 0;height: auto;}
    .hl-txt h3{font-size: 17px;margin: 18px 0 10px;}
    /* 箭头原本相对文字框绝对定位（文字框在桌面端撑满行高），移动端改为跟随文本流排列 */
    .hl-arrow{position: static;bottom: auto;left: auto;right: auto;margin: 14px 0 14px;}
    .hl-arrow.right{margin-left: auto;right: auto;}

    /* ---------- 展品范围 ---------- */
    /* 三列/两列卡片网格在窄屏被压成 80~100px 宽，改为单列 */
    .scope-sub{font-size: 18px;margin: 28px 0 14px;}
    .scope-grid3,
    .scope-grid2{grid-template-columns: 1fr;gap: 16px;}
    /* 单列布局下不再需要叠加在网格中间的循环利用图标 */
    .recycle{display: none;}
    .s-card{padding: 24px 20px 20px;border-radius: 14px;}
    .s-num{top: 16px;left: 18px;width: 30px;height: 30px;font-size: 13px;}
    .s-card h4{margin: 34px 0 14px;font-size: 17px;}
    /* 卡片内两列清单在窄屏会被压缩，改为单列 */
    .s-card .cols{grid-template-columns: 1fr;column-gap: 0;}

    /* ---------- 参展参会价值 ---------- */
    .value{padding: 46px 0 56px;}
    .value .sec-title{width: 92%;}
    .v-cards{width: 92%;margin-top: 26px;gap: 22px;}
    .v-head{padding: 16px 18px 12px;gap: 10px;}
    .v-head img{width: 32px;height: 32px;}
    .v-head h4{font-size: 17px;}
    .v-body{padding: 28px 16px 32px;min-height: 0;font-size: 14px;}

    /* ---------- 关于主办方 ---------- */
    .org .sec-title{text-align: left;}
    .org-block{margin-top: 30px;}
    /* 牵头单位的“大图 + 说明”两栏改为上下堆叠 */
    .org-flag-grid{grid-template-columns: 1fr;gap: 18px;}
    .org-label{font-size: 17px;margin-bottom: 14px;padding: 5px 26px 5px 16px;}
    .org-item{padding-left: 18px;margin-bottom: 18px;}
    .org-item h5{font-size: 16px;}
    .org-item p{font-size: 14px;}
    /* 合作方“文字 + logo”左右并排改为上下堆叠，避免 logo 被挤到边缘、文字过窄 */
    .org-row{flex-direction: column;align-items: flex-start;gap: 14px;}
    .org .org-logo img{max-width: 100%;max-height: 80px;}

    /* ---------- 报名咨询 ---------- */
    .reg{padding: 40px 0 50px;}
    .reg .wrap{width: 92%;}
    .reg-grid{grid-template-columns: 1fr;gap: 20px;margin-top: 8px;}
    .reg-txt{align-self: auto;padding-bottom: 0;}
    .reg-txt p{font-size: 14px;line-height: 1.9;}
    /* 卡片单列后需要给左上角外凸的圆形图标留出空间 */
    .reg-cards{grid-template-columns: 1fr;gap: 26px;padding-top: 18px;}
    /* 桌面端刻意错位的卡片在单列下会互相压叠，还原为常规排布 */
    .r-card{padding: 22px 18px 18px;}
    .r-card:nth-child(1){grid-row: auto;margin-top: 0;}
    .r-card:nth-child(3){grid-column: auto;margin-top: 0;}
    .r-ico{top: -16px;left: -8px;width: 40px;height: 40px;}
    .r-ico img{width: 20px;}
    .r-card .big{font-size: 20px;}
    .r-card .name{font-size: 18px;}

    /* ---------- 页脚 ---------- */
    .footer-logos{padding: 28px 0 22px;gap: 18px;}
    .footer-logos .logo-item img{max-width: 150px;max-height: 42px;}
    .footer-bar{padding: 16px 0;}
    .footer-bar .wrap{gap: 10px;}
    .footer-bar .fb-logo{font-size: 16px;}
    .footer-bar .fb-logo img{height: 26px;}
}