/* ==========================================================================
   responsive.css — 断点适配
   --------------------------------------------------------------------------
   全站只保留两个断点，避免"到处是 media query"难以追踪：
     · ≤720px  手机：搜索框收成图标、副标题隐藏、标题缩小、出现滑动提示
     · ≤560px  窄屏手机：卡片内边距与字号再收一档
   列数、卡片宽高、间距本身不需要断点——它们由 clamp() 连续流动。
   ========================================================================== */

/* ---------- ≤720px：手机 ---------- */
@media (max-width: 720px) {
  .swipe-hint { display: block; }

  .top { gap: 10px; padding: 11px var(--pad-x); }
  .brand { gap: 7px; }
  h1 { font-size: 13.5px; max-width: 88px; }
  .brand-txt p { display: none; }          /* 副标题让位给搜索框 */

  .tools { gap: 7px; }

  /* 搜索框平时收成一个图标 */
  .search { display: none; }
  .icon-btn.search-toggle { display: grid; }
  .search input { height: 36px; font-size: 13px; padding: 0 32px; border-radius: 9px; }
  .s-ico { left: 9px; width: 14px; height: 14px; }
  .s-clear { right: 3px; width: 24px; height: 24px; }
  .s-kbd { display: none; }

  .icon-btn { width: 34px; height: 34px; border-radius: 9px; }

  .to-top {
    right: 14px;
    width: 38px;
    height: 38px;
    bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  }

  /* ---------- 点放大镜后：搜索框在标题右侧原地展开 ----------
     品牌区不动，logo 与标题保持可见；让出两个图标按钮的宽度 */
  .top.searching { gap: 12px; }
  .top.searching .search {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    position: static;
    transform: none;
    width: auto;
  }
  .top.searching .icon-btn.search-toggle,
  .top.searching #themeBtn { display: none; }
  /* 展开时只留一个 ✕（关闭），框内的清除按钮让位，避免两个叉挤在一起 */
  .top.searching .s-clear { display: none; }
  .top.searching .s-cancel { display: grid; }
  .top.searching .search input { padding-right: 36px; }
}

/* ---------- ≤560px：窄屏手机 ---------- */
@media (max-width: 560px) {
  .main { gap: 22px; }
  .link { padding: 0 22px 0 9px; gap: 8px; }
  .thumb { border-radius: 6px; }
  .name { font-size: 12.5px; }
  .desc { font-size: 11px; }
}