/* ===========================
   responsive.css
   统一移动端 & 平板覆盖样式
   =========================== */

/* —— 桌面端（>900px）的小优化：底部四栏更均匀 —— */
#info .info{
  grid-template-columns: 0.9fr 1.1fr 1.1fr auto;
  gap: clamp(24px, 5vw, 64px);
}
#info .addr{ max-width:32ch; }
#info .addr .line{ display:block; }

/* ===========================
   小平板：641–900px
   顶部两行 Grid（品牌｜按钮）/（菜单）
   =========================== */
@media (min-width: 641px) and (max-width: 900px){
  .container{ padding: 0 20px; }

  .nav .row{
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "brand cta"
      "menu  menu";
    align-items: center;
    gap: 14px;
    padding: 12px 0;
  }
  .brand{ grid-area: brand; font-size: 18px; line-height: 1.25; white-space: normal; }
  .menu{
    grid-area: menu;
    justify-self: center;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  .menu a{ font-size: 16px; }
  .cta{ grid-area: cta; justify-self: end; margin-left: 0 !important; }

  section{ scroll-margin-top: 78px; }
}

/* ===========================
   手机：≤640px
   顶部一行三列（品牌 | 菜单 | 按钮）
   极限紧凑化 + 横向滚动菜单
   =========================== */
@media (max-width: 640px){
  .container{ padding: 0 16px; }

  /* 一行三列 */
  .nav .row{
    display: grid !important;
    grid-template-columns: auto 1fr auto;   /* 品牌自适应 | 菜单吃满 | 按钮自适应 */
    align-items: center;
    gap: 8px;
    padding: 8px 0;
  }

  /* 品牌紧凑化：logo缩小、文本省略号 */
  .brand{
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;              /* 允许被压缩 */
  }
  .brand .logo{ width: 24px; height: 24px; border-radius: 6px; }
  .brand span{
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;   /* 名称过长省略 */
    max-width: 48vw;           /* 不压扁菜单 */
  }

  /* 菜单横向滚动，不换行 */
  .menu{
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;           /* Firefox 隐藏滚动条 */
  }
  .menu::-webkit-scrollbar{ display: none; }  /* iOS/Chrome 隐藏滚动条 */
  .menu a{
    white-space: nowrap;
    font-size: 14.5px;
    line-height: 1.1;
    padding: 4px 0;
    color: var(--muted);
  }

  /* 右侧按钮紧凑化 */
  .cta{ margin-left: 0 !important; }
  .btn{
    padding: 8px 10px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1;
    white-space: nowrap;
  }

  /* Hero 更紧凑，标题不溢出 */
  .hero{ padding: 70px 0 40px; }
  .title{ font-size: clamp(26px, 7vw, 32px); line-height: 1.18; }
  .lead{ font-size: 15.5px; max-width: 44ch; }

  /* 锚点跳转时给粘顶导航留空间 */
  section{ scroll-margin-top: 68px; }

  /* 底部信息单列置中 */
  #info .info{
    grid-template-columns: 1fr !important;
    justify-items: center;
    text-align: center;
    gap: 18px;
  }
  #info .cta-block{ justify-self: center; }

  /* Cards/Logo 增强可读性 */
  .grid.s-3, .grid.s-4{ grid-template-columns: 1fr !important; }
  .logo-wall{ grid-template-columns: repeat(2,1fr) !important; }
  .sample-grid{ grid-template-columns: 1fr !important; }
}

/* ===========================
   其它公共退化（保持一致性）
   =========================== */
@media (max-width: 1024px){
  .grid.s-3{ grid-template-columns: repeat(2,1fr) !important; }
  .grid.s-4{ grid-template-columns: repeat(2,1fr) !important; }
  .logo-wall{ grid-template-columns: repeat(3,1fr) !important; }
}

/* 宽度≤720：若 hero-art 未隐藏，降低其透明度（兜底） */
@media (max-width: 720px){
  .hero-art{ opacity: .12; }
}